Close
Glad You're Ready. Let's Get Started!

Let us know how we can contact you.

Thank you!

We'll respond shortly.

LABS
Responsive web design with GroundworkCSS: Column stacking

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’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.

Comments
  1. David Tengdin says:

    Jacob and I here in Boston have also been playing around with groundwork on some beach projects. We also found that the documentation was a little lacking and the groundworkcss_gem wasn’t really fully fleshed out yet when we looked at it.

    That said we also enjoyed how lightweight it felt compared to bootstrap. We used it for a flat page site you can see here: http://www.bytesandatoms.com/.

    Nice to hear that other people are trying this out too, and thanks for the tip on stacking!

  2. Gary Hepting says:

    Hey David, thanks for taking the time to evaluate GroundworkCSS and for publishing this write-up. I’m really glad you and others are finding it useful and am very motivated by the positive feedback I’ve received from folks around the globe.

    I absolutely realize I need to dedicate time to improving the documentation. I really appreciate your patience and understanding so far and urge you and others to contribute to the project by helping on that front, as well as the source code. The project is 100% open-source and hosted on Github at https://github.com/groundworkcss/groundwork and contributions are very welcome! :)

    Thanks again for publishing your experiences and your tips for beginners starting out with GroundworkCSS. I hope to have more voices like yours to help the project and community knowledge grow!

    – Gary Hepting

  3. John Slegers says:

    If you like GroundworkCSS, try Cascade Framework ( http://cascade-framework.com/ ). It has a very innovative architecture that allows it to combine optimal performance with flexibility.

    Cascade Framework 2, which is currently in development, will reimplement the framework in SASS and will boldly go where no framework has gone before by eliminating all bloat and making every single feature configurable.

Post a Comment

Your Information (Name required. Email address will not be displayed with comment.)

* Copy This Password *

* Type Or Paste Password Here *