CSS Grids and Genesis

Community Forums Forums Design Tips and Tricks CSS Grids and Genesis

This topic is: not resolved

Tagged: , ,

This topic contains 7 replies, has 5 voices, and was last updated by  Tom 5 months, 2 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #22836

    itsonlybarney
    Participant
    Post count: 15

    I haven’t seen this posted here in the forums, but I may be mistaken.

    Has anyone implemented a CSS Grid Framework (such as 960.gs) with Genesis child themes? Or is the way to do it to select the styling you want from the Grid Framework and apply it to the selectors from the Genesis output?

    #22859

    braddalton
    Participant
    Post count: 10263

    No but i would be interested in having a look if you can paste a link please.

    Not sure i can help but happy to have a go.


    #23026

    itsonlybarney
    Participant
    Post count: 15

    I haven’t started building a site yet, but wondering if anyone has successfully used a CSS grid system with Genesis.

    I guess what I am asking, has anyone added the additional classes used by CSS grids to certain Genesis styling elements without hacking the Genesis theme core?

    #23121

    surefirewebserv
    Participant
    Post count: 69

    I did the 1140 grid system on my old version of genesissandbox.com

    It’s just a matter of changing the column classes. It takes a bit of time, but it’s more tedious then anything.


    SureFireWebServices.com | Genesis Tuts and More
    Genesis Theme Starter Kit | It’s Free

    #23164

    itsonlybarney
    Participant
    Post count: 15

    @surefirewebserv When you mean changing the column classes, do you mean changing the class selectors in the CSS grid style sheet to match the Genesis output selectors?

    #23168

    surefirewebserv
    Participant
    Post count: 69

    Well I guess technically it wouldn’t matter since the column classes are kind of an extra in the style.css BUT when you get into the layout like .content-sidebar-wrap and .content-sidebar-content-wrap, yes you’ll have to change the attributes.

    Here’s a sample of what I did to get 1140 working. This was with Gen 1.8 though, I never tested it with 1.9, mainly because I like the 1152 that’s included.

    /* Responsive Design
    ------------------------------------------------------------ */

    /* ==================================================================================================================== */
    /* ! The 1140px Grid V2 by Andy Taylor \ http://cssgrid.net \ http://www.twitter.com/andytlr \ http://www.andytlr.com */
    /* ==================================================================================================================== */

    .wrap {
    width: 100%;
    max-width: 1140px;
    min-width: 755px;
    margin: 0 auto;
    overflow: hidden;
    }

    .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .content-sidebar #sidebar, .content-sidebar #content,.sidebar-content #content, .sidebar-content #sidebar,.content-sidebar-sidebar #content {
    margin-right: 3.8%;
    float: left;
    min-height: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    .sidebar-content #content {
    float: right;
    }

    .wrap .onecol {
    width: 4.85%;
    }

    .wrap .twocol,
    #sidebar-alt {
    width: 13.45%;
    }

    .wrap .threecol, .content-sidebar #sidebar, .sidebar-content #sidebar {
    width: 22.05%;
    }

    .wrap .fourcol,
    .content-sidebar-sidebar #sidebar,
    .sidebar-sidebar-content #sidebar,
    .sidebar-content-sidebar #sidebar {
    width: 30.75%;
    }

    .wrap .fivecol {
    width: 39.45%;
    }

    .wrap .sixcol {
    width: 48%;
    }

    .wrap .sevencol {
    width: 56.75%;

    }

    .wrap .eightcol,
    .content-sidebar-sidebar #content,
    .sidebar-sidebar-content #content,
    .sidebar-content-sidebar #content {
    width: 65.4%;
    }

    .wrap .ninecol,
    .content-sidebar #content,
    .sidebar-content #content {
    width: 74.05%;
    }

    .wrap .tencol {
    width: 82.7%;
    }
    .content-sidebar-sidebar #content-sidebar-wrap,
    .sidebar-sidebar-content #content-sidebar-wrap,
    .sidebar-content-sidebar #content-sidebar-wrap {
    width: 84.7%;
    }

    .wrap .elevencol {
    width: 91.35%;
    }

    .wrap .twelvecol {
    width: 100%;
    float: left;
    }

    .last, .content-sidebar #sidebar,.sidebar-content #content,
    .sidebar-sidebar-content #content-sidebar-wrap,
    .sidebar-content-sidebar #content-sidebar-wrap,
    .sidebar-content-sidebar #sidebar {
    margin-right: 0px;
    }



    SureFireWebServices.com | Genesis Tuts and More
    Genesis Theme Starter Kit | It’s Free

    #104337

    PittsburghChris
    Participant
    Post count: 6

    I found this article:

    http://www.onextrapixel.com/2012/11/09/how-to-develop-wordpress-themes-using-responsive-frameworks/

    It did the trick for me to incorporate Zurb Foundation with WordPress/Genesis. I had to do some more work to get it to work with SASS, but that was also possible. As mentioned earlier, there is a bunch of work to be done on the style classes.

    #104559

    Tom
    Participant
    Post count: 960

    < subscribe >


    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.