Column Class Offsets

[deebeedee]

Is there a way of doing offsets with Genesis column classes just like Twitter Bootstrap does it?

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

[David Chu]

That's a very interesting question. I'm seeing more and more questions relating to Bootstrap, SASS, and other fascinating extras.

Genesis has taken some steps in that direction. If you have the latest Sample Theme, or any of the themes that have a pretty recent upgrade, you will find plenty of column classes in the CSS. Just do a find on "one-third", for instance. And cleverly, they are using percentages, so you're not stuck with static widths. So to a degree, you can use that right now, and they even include some margin settings to get the columns to co-exist well. To facilitate their use a little, on some sites I'll add shortcodes to help that - a bit less coding for a client to do. Depending on the theme and context, I might need to adjust the margins and percentages, but this would be true on Bootstrap sites as well.

But the offset thing (a cool idea) is not in Genesis yet, so you'd have to add classes and more CSS to make that happen. If I have some extra time sometime, maybe I'll code that. Or maybe you could pull in the Bootstrap libraries to get those goodies, although I'd imagine you'd have to make some changes to the HTML structure to get all that stuff "talking together". If you're super into Bootstrap, there are frameworks around that base their whole thing around that.

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[deebeedee]

I appreciate your reply. I will try out what you suggest here, which is to add classes and more CSS to get the offset thing going. That'd be great if you implement the feature into column classes!

Daniel

[David Chu]

Right. And as long as you decide on a "standard" spacing between your columns, just as your link's example has, this would be pretty easy to do. Once I get a bit of extra time, I may well go for it. It could probably be done in an hour or less.

Of course, if a client doesn't like the spacing, you'd want your code well-enough organized that it wouldn't be tough to change all your offsets. With Gary Jones' phenomenal influence in the current Sample theme CSS, this is easier than ever before.

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts