css - How to do mobile first with Bourbon Neat Framework -
i've been using bourbon neat desktop first layout worked fine.
however, mobile first versions, starting mobile , working way up. default grid 12 columns , mobile use grid of 4. tried changine grid 4 , scaling 12 didn't work.
is there better way mobile first other creating standard desktop layout, putting mobile media query each css selector , starting mobile version , building way?
you should create new breakpoints new-breakpoint mixin neat. instead of using max-width in examples, 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 example .main have white background , consist out of 4 columns. when viewport @ least 760 pixels width, black background , span 8 columns.
Comments
Post a Comment