The Genesis stylesheet has a great feature called Column Classes. This allows you to easily break a page’s content into multiple columns.
But if you’re like me, you’ll receive design files from the client’s designer and she’s using a grid of her own. You should then update the CSS of the column classes to match this grid, but that can be a big hassle (and a lot of math).
I’ve done the hard work for you! Simply drop the page’s width and gutter (space between columns) in here, and it will create the column classes for you. You can then copy/paste it into your own theme.
Clifton Griffin says
So, you’re saying this is easier than going to the Bootstrap 2.x customizer, changing the base gutter and column size, generating it, unzipping it, finding the column classes, and then manually copying and pasting over the new values, doing the class conversion in your head. (ie, span4 = one-third)?
I happen to have done that two or three times this week, by happenstance.
This is an awesome utility. And nearly perfect timing 🙂
Clif
Melanie G. Adcock says
Sweet! I hate having to do the math!!
Melanie
Juan Rangel says
That’s awesome! Thanks!
Dave says
Bill,
Smoking hot idea! Thanks!!!!!
btw, kudos to Clifton above for that pinch of humor!
Dave
Jeremy says
Bill,
Thanks for sharing.
Awesome work.
Shaan Nicol says
Nice one! Thanks for including 5ths
Keith Davis says
Thanks for sharing Bill.
I used column classes for the first time on my latest post and then I see this.
Column classes everywhere.
Marcy Diaz says
It worked perfectly. Next time, I’ll use it before I do the math myself. Thank you!
Zach Russell says
Man, I feel like you read people’s minds when you publish content 🙂 I am in the process of building a wp.org theme and I was thinking about integrating this exact thing into it 🙂
thanks!
Vijay Sharma says
It worked like a charm. Its so amazing when you can get away without having to do the math