Recently, I’ve started using GroundworkCSS to implement responsive design on a personal project. Simply put, it’s been an absolute pleasure to use. Not only is Groundwork highly flexible, but it also feels remarkably lightweight in comparison to something like Bootstrap.
There’s a few challenges, however. The Groundwork website has quite a few live demos, but there#8217;s very little text to explain exactly what’s going on. There’s also not much of a community to glean knowledge from. While teaching myself how to use the framework, I’ve had to spend a lot of time in the Chrome web inspector reverse-engineering the live examples and then experimenting.
As an example, one of the more difficult pieces when initially working with Groundwork is figuring out how things will stack on top of each other when your layout shrinks. The default behavior is simple, and reasonably intuitive. Elements will be stacked top-to-bottom in the order that they’re declared in markup. Here’s an example:
<div class='row'> <div id="left_thing" class="three fifths"></div> <div id="right_thing" class="two fifths"></div> </div>
When rendered in desktop mode, the ‘left_thing’ will show up on the left and take up three fifths of the viewport, while the ‘right_thing’ takes up the rest. When the viewport shrinks for mobile, then the left_thing gets stacked on top. Simple enough.
However, what if you want the right_thing to render to the right in desktop mode but stack on top of the left_thing on mobile devices? That’s when it starts to get tricky.
In order to get the “right_thing” to stack on top, it has to be declared first in the markup, like so:
<div class='row'> <div id="right_thing" class="two fifths"></div> <div id="left_thing" class="three fifths"></div> </div>
However, this screws up the ordering in desktop mode! Fortunately, there’s a fix.
It turns out that Groundwork will allow you to shift around the relative ordering of your declared elements. So, if you want to swap the “right_thing’ and “left_thing” into their proper places for desktop browsers, we’ll need to add some more classes.
<div class='row'> <div id="right_thing" class="two fifths right-three></div> <div id="left_thing" class="three fifths left-two"></div> </div>
Note that the “right_thing” needed to be nudged over for the number of columns that “left_thing” was taking up, and we had to do a similar dance for “left_thing”. It turns out that Groundwork behaves quite differently from the standard CSS box model, and shifting an element using the “right-xxx” or “left-xxx” directives does NOT cause anything else to automatically move. Much like CSS relative positioning, you’ll have to shift the other elements yourself to get the effect you want. Be careful, or you’ll get overlapping elements or breaks that you don’t want.
You can also omit columns or skip columns to create negative space. For example, here’s two equal sized columns with 20% margins on the sides.
<div class='row'> <div id="right_thing" class="one fourth skip-one"></div> <div id="left_thing" class="one fourth"></div> </div>
Note that we didn’t account for the fourth (and rightmost) column in the markup. Since we declared “fourth” in one of the row elements, Groundwork will automagically create four columns, no matter how few we provide elements for.
There’s some other tricky bits, but figuring out the nuances of column stacking has been by far my biggest hurdle. After getting that sorted, it’s been pretty smooth sailing. Overall, I’m impressed by the power and simplicity of Groundwork, and would strongly recommend anyone who’s interested in a responsive grid system to give it a shot.
