CSS Grids and Genesis

[itsonlybarney]

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?

[Brad Dalton]

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.

---

Tutorials for StudioPress Themes.

[itsonlybarney]

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?

[surefirewebserv]

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

[itsonlybarney]

@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?

[surefirewebserv]

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

[PittsburghChris]

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.

[Tom]

< subscribe >

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts