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

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -