Databases
StackOverflow2013
Postsdbo
POUsing nested breakpoint with bourbon neat
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing nested breakpoint with bourbon neat
    text
    copied!<p>i would to test bourbon neat grid and i try actually to do a mobile first approach grid. My structure look like:</p> <pre><code>#general #header .headHaut .headBas #content-global #left-content #content-inner #right-content #footer </code></pre> <p>My grid settings:</p> <pre><code>$mobile-size:em(320); $tablet-size:em(720); $desktop-size:em(1000); // Bourbon Neat Breakpoints - règle le nombre de colonnes $mobile: new-breakpoint(min-width $mobile-size 4); $tablet: new-breakpoint(min-width $tablet-size 8); $desktop: new-breakpoint(min-width $desktop-size 12); </code></pre> <p>My scss:</p> <pre><code>body #general{ //Approche mobile-first,réglage pour mobile @include outer-container; padding-top: 2em; background: transparent; #header{@include span-columns(4);} #content-global{@include span-columns(2);} #left-content{} #content-inner{} #right-content{} #footer{@include span-columns(4); @include background-size;} @include breakpoint ($desktop) {/* //Dimensions pour les pc*/ background: transparent; #header{@include span-columns(12);} #content-global{@include span-columns(12);} #left-content{@include span-columns(2 of 12);} #content-inner{@include span-columns(8 of 12);} #right-content{@include span-columns(2 of 12);} #footer{@include span-columns(12); @include background-size(auto); } } @include breakpoint($tablet) {/* //Dimensions pour les tablettes*/ } } </code></pre> <p>For example, i change background color depending on breakpoint, and on a pc screen, the color is override by the mobile one..but columns number is the right one...strange.</p> <p>thanks for help</p> <p>EDIT1: i need to specify the breakpoint to apply settings for mobile.Like this:</p> <pre><code>body #general{ //Approche mobile-first,réglage pour mobile @include outer-container; padding-top: 2em; background: transparent; @include breakpoint ($mobile){} #header{@include span-columns(4);} #content-global{@include span-columns(2);} #left-content{} #content-inner{} #right-content{} #footer{@include span-columns(4); @include background-size;} @include breakpoint ($desktop) {/* //Dimensions pour les pc*/ background: transparent; #header{@include span-columns(12);} #content-global{@include span-columns(12);} #left-content{@include span-columns(2 of 12);} #content-inner{@include span-columns(8 of 12);} #right-content{@include span-columns(2 of 12);} #footer{@include span-columns(12); @include background-size(auto); } } @include breakpoint($tablet) {/* //Dimensions pour les tablettes*/ #header{} #content-global{} #left-content{} #content-inner{} #right-content{} #footer{} } } </code></pre> <p>but i get troubles with inside parts of the page.do i need to specify the container or just span columns mixin is enought ?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload