CSS Grids and Genesis

[itsonlybarneyParticipant Post count: 12]

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?

[braddaltonParticipant Post count: 2501]

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.

---

WordPress Developer & Consultant
Brad Dalton @ WP Sites – Click Here to Get Genesis Child Theme Tips Delivered.

[itsonlybarneyParticipant Post count: 12]

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?

[surefirewebservParticipant Post count: 62]

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

[itsonlybarneyParticipant Post count: 12]

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

[surefirewebservParticipant Post count: 62]

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

[Author]

Posts