How to do mobile first with Bourbon Neat Framework

Question

I've been using bourbon neat to do a desktop first layout that worked fine.

However, I would like to do a mobile first versions, starting with mobile and working my way up. The default grid is 12 columns and for mobile I usually use a grid of 4. I tried changine my grid to 4 and scaling up to 12 but this didn't work.

Is there a better way to do mobile first other than creating the standard desktop layout, then putting a mobile media query into each CSS selector and starting with the mobile version and building up the way?

Answer 1

You should create new breakpoints with the new-breakpoint mixin from Neat. But instead of using max-width like they do in their examples, you can use min-width.

For example:

@import "bourbon/bourbon";
@import "neat/neat";

$mobile: new-breakpoint(min-width 0px 4);
$tablet: new-breakpoint(min-width 760px 8);

.main {
  background: grey;

  @include media( $mobile ) {
    @include span-columns(4);
    background: white;
  }

  @include media( $tablet ) {
    @include span-columns(8);
    background: black;
    color: white;
  }
}

In the example .main will have a white background and consist out of 4 columns. When the viewport is at least 760 pixels width, it will get a black background and span 8 columns.

Answer 2

I would scope out Chasers by Kenneth Ormandy. It's a little omega-reset(xn) include passing "xn" from the previous media-query's omega(xn). He provides plenty of documentation on the github repo and you can easily install it with Bower or NPM.

Answer 3

To expand on Jorn's answer... you also need to set the $grid-columns variable to the mobile width number, as opposed to the desktop number that it is set as a default. This is what the _grid_settings.scss file looks like for a project I'm currently working on:

@import "../neat/neat-helpers";

// Neat Overrides
$column: golden-ratio(1em, 3);
$gutter: golden-ratio(1em, 1);
$grid-columns: 6;
$max-width: em(1280);


// Neat Breakpoints
$mobile-large-screen: em(480);
$tablet-small-screen: em(560);
$medium-screen: em(640);
$medium-large-screen: em(750);
$large-screen: em(860);
$x-large-screen: em(970);
$xx-large-screen: em(1088);
$super-large-screen: em(1280);

$mobile-large-screen-up: new-breakpoint(min-width $mobile-large-screen 6);
$tablet-small-screen-up: new-breakpoint(min-width $tablet-small-screen 6);
$medium-screen-up: new-breakpoint(min-width $medium-screen 12);
$medium-large-screen-up: new-breakpoint(min-width $medium-large-screen 12);
$large-screen-up: new-breakpoint(min-width $large-screen 12);
$x-large-screen-up: new-breakpoint(min-width $x-large-screen 12);
$xx-large-screen-up: new-breakpoint(min-width $xx-large-screen 12);
$super-large-screen-up: new-breakpoint(min-width $super-large-screen 12);

You can see I've created a lot of new breakpoints and I'm using 6 cols at mobile width as opposed to 4 in the original Neat settings (necessary for what I have going on in my project). You should tailor these settings to work for your own project. The takeaway though is that I'm overriding the $grid-columns variable and then creating my new breakpoints. Also, be sure to import your _grid_setting.scss BEFORE Neat...

@import "bourbon/bourbon";
@import "grid_settings";
@import "neat/neat";