Mobile-first with Bourbon Neat | Ryan Bosinger

Mobile-first with Bourbon Neat

I’ve been playing around with the CSS grid framework Bourbon Neat the last little while. In fact, this blog theme is using it.

If you don’t know, Bourbon Neat is a grid framework similar to Bootstrap or Zurb’s responsive grids except for one key difference: you don’t add any additional classes to your mark-up. Instead you define how your page is laid out in straight CSS (actually, you need to use SASS with Bourbon Neat). This is great because you can keep your mark-up clean, semantic and untied from any CSS library.

Suprisingly, at the time of writing, the documentation for Neat don’t push for the “mobile first” CSS strategy that has become a standard practice for many developers and adopted by Bootstrap and Zurb.

In the Neat documentation for new-breakpoint there is this example:

$mobile: new-breakpoint(max-width 480px 4);

.element {
  @include media($mobile) {
    @include span-columns(4);
  }
}

This example would suggest that your default styles would be for desktop and that you would be using a media query to override some styles for mobile. With the “mobile first” strategy we do this the other way around. To do so here you simply want to make a small change:

$desktop: new-breakpoint(min-width 768px);

.element {
  width: 100%;
  @include media($desktop) {
    width: 25%;
  }
}

(note: I used a normal “width” instead of the Neat span-columns function to make this clearer.)

So here the element defaults to 100% width but then on the desktop it shrinks to 25%. I simply changed the breakpoint to use min-width and set it to 768px (tablet size). Basically: all styles will be for mobile and tablet and the more complex desktop styles will be added on top of those.

That might of been a bit long-winded but I know this can get confusing at times.

Cheers,
Ryan