Neat and Media Queries

January 31, 2014

Last month I mentioned that I love the semantic grid framework in Neat, but didn’t go into a lot of detail. Here’s an example of what’s so great about it…

Changing Grid Columns for Mobile

Things may change by the time you read this, but right now this blog has a 2-empty-column left rail, an 8-column content region, and a 2-empty-column right rail by “default.” The CSS looks like this:

    .left-rail     { @include span-columns(2); }
    .center-rail   { @include span-columns(8); }
    .right-rail    { @include span-columns(2); @include omega(); }

That looks pretty good in a desktop layout, but in a really narrow page (like an iPhone in portrait mode), that’s just too much whitespace on the sides!

To fix it just detect the configuration via a media query and write the “obvious” code; hide the left and right rails, and let the center rail consume all 12 columns of the Neat layout.

    @media only screen and (orientation: portrait) {
      .left-rail,.right-rail { display: none; }
      .center-rail { @include span-columns(12); }
    }

See what happened there? Since Neat lets me specify in the CSS how many columns a class consumes, I simply @include the new column count. I’ll admit, I don’t remember how to pull that off in Bootstrap, but I’m pretty sure that it isn’t that easy!

If anyone wants to include the Bootstrap code in a comment, go for it!