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?
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.
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";
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.