Variabile dimensione contenitore esterno con Bourbon Neat

Question

Sto imparando a lavorare con Bourbon Neat e ho sempre lavorato con il sistema di griglia di Bootstrap. Sto cercando di ricreare this Bootstrap grid page per imparare le basi di Bourbon Neat.

Le impostazioni che uso sono:

// Bourbon Neat Grid Settings 
$column: 70px; 
$gutter: 30px; 
$grid-columns: 12; 
$max-width: em(1170); 
$visual-grid: true; 

decisi i miei punti di interruzione e li misi con la funzione new breakpoint, in cui posso anche cambiare il numero di colonne.

Ma quello che voglio cambiare è la dimensione del contenitore. In Bootstrap, max-width del contenitore varia in questo modo:

@media> 1200px: max-width: 1170px;

@media> 992px: larghezza massima 970 px;

@media> 768px: larghezza massima: 750 px;

In Bourbon Neat tuttavia, la larghezza massima viene impostata una volta con una variabile. Al momento l'ho impostato su max-width: em(1170); Come posso lasciare che le dimensioni di questo contenitore variano? Come posso ottenere la stessa pagina di esempio con Bourbon Neat anziché Bootstrap 3? So che in Susy è possibile set the container width

Answer 1

Qualcosa di simile a quanto segue può funzionare:

$large-screen: new-breakpoint(max-width 1200px 12); 
$medium-screen: new-breakpoint(max-width 992px 12); 
$small-screen: new-breakpoint(max-width 768px 6); 

@mixin bootstrap-container { 
    @include outer-container; 
    @include media($large-screen) { max-width: 1170px; } 
    @include media($medium-screen) { max-width: 970px; } 
    @include media($small-screen) { max-width: 750px; } 
} 

poi basta usare il mixin come segue:

#foo { 
    @include bootstrap-container; 
} 

Sono interessato a sentire i vostri commenti.

Answer 2

È possibile eseguire questa operazione con alcune sovrascritture CSS/SCSS nella configurazione.

lascia supporre si dispone di questo nel file SCSS, come è standard a Bourbon Neat:

$max-width: 1000px; 

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

.outer-container{ 
    @include outer-container; 
} 

Attualmente tutto ciò si avvolge con contenitore esterno avrà una larghezza massima 1000 px (o 1170em nel tuo esempio).

Per modificare la larghezza massima del contenitore a diverse dimensioni dello schermo/query multimediali, è possibile includere query multimediali dopo queste righe che sostituiscono la dichiarazione originale, ad es.

.outer-container{ 
    max-width: 800px; 
    @media all and (min-width: 750px){ 
    max-width:1500px; 
    } 
} 

In questo esempio la max-width finirà per essere 800px di larghezza, a meno che la dimensione dello schermo è più grande poi 749px nel qual caso il max-width sarà 1500px.

Questa è una corsa semplicistica che si sente un po 'hacker, ma dovrebbe portare a termine il lavoro e non ti preoccupare di esso una volta impostato. Se Bourbon Neat ha un modo corretto per farlo non l'ho notato.

Answer 3

Penso che questa sarà rispondere alla tua domanda:

È possibile modificare il valore della variabile $max-width in _grid-settings.scss e quindi importare che il foglio di stile in amari di base foglio di stile, che è _bitters.scss.

Se si modifica il valore di $max-width senza importare _grid-settings.scss, la larghezza di outer-container non verrà modificata.

Answer 4

Se è necessario visualizzare anche lo visual-grid (come ho fatto io) è possibile aggiungere le query multimediali allo visual-grid mixin nel file `necklace/grid/_visual-grid.scss. Ovviamente non è l'ideale per modificare i file core, ma non riesco a pensare a un altro modo per farlo.

 @mixin grid-column-gradient($values...) { 
     background-image: -webkit-linear-gradient(left, $values); 
     background-image: -moz-linear-gradient(left, $values); 
     background-image: -ms-linear-gradient(left, $values); 
     background-image: -o-linear-gradient(left, $values); 
     background-image: unquote("linear-gradient(to left, #{$values})"); 
    } 

    @if $visual-grid == true or $visual-grid == yes { 
     body:before { 
     content: ''; 
     display: inline-block; 
     @include grid-column-gradient(gradient-stops($grid-columns)); 
     height: 100%; 
     left: 0; 
     margin: 0 auto; 
     max-width: $max-width; 
     opacity: $visual-grid-opacity; 
     position: fixed; 
     right: 0; 
     width: 100%; 
     pointer-events: none; 

     @if $visual-grid-index == back { 
      z-index: -1; 
     } 

     @else if $visual-grid-index == front { 
      z-index: 9999; 
     } 

     @each $breakpoint in $visual-grid-breakpoints { 
      @if $breakpoint { 
      @include media($breakpoint) { 
       @include grid-column-gradient(gradient-stops($grid-columns)); 
      } 
      } 
     } 

     // HACK to get visual grid to display our max-width at our media queries 
     @include media($large-screen) { max-width: 1170px; } 
     @include media($medium-screen) { max-width: 970px; } 
     @include media($small-screen) { max-width: 750px; } 
     } 

    } 

curioso di sentire chiunque altro soluzione

Answer 5

Dal momento che non posso commentare mi piacerebbe costruire al largo di Andrew Hacking's answer che utilizza un mixin chiamato bootstrap-container. Il commento di Voodoocode dice che questo non funziona per la griglia visiva in quanto non tocca la variabile $ max-width. Affinché funzioni, è necessario un pezzo di codice per impostare la larghezza massima per il corpo: prima. Funzionerebbe come tale:

@if ($visual-grid) { 
body:before { 
    @include bootstrap-container; 
} 
} 

Una volta fatto, le impostazioni della larghezza del contenitore esterno avranno effetto sulla griglia.

Answer 6

Wow. Che argomento confuso era questo. Ma grazie a dasginganinja per averlo interpretato correttamente. La domanda non riguardava come modificare una proprietà di larghezza massima, ma come cambiare la variabile $max-width di Neat per visualizzare correttamente la griglia visiva di Neat. Per ripetere ciò che dasginganinja sta dicendo, non puoi manipolare esattamente la variabile ma puoi scegliere come target body:before e impostare una proprietà di larghezza massima che corrisponda alla larghezza dello outer-container(). MandsAtWork era sulla strada giusta, ma puoi farlo senza la necessità di modificare i file core. Ad esempio:

@import "bourbon"; 
@import "neat-helpers"; //IMPORTANT: ADD BEFORE GRID SETTINGS 

// Visual Grid 
$visual-grid: true; 
$visual-grid-color: #d4d4d4; 
$visual-grid-opacity: 0.3; 

// Initial Grid Settings 
$max-width: 100%; 
$grid-columns: 4; 

// Breakpoints 
$sm_val: 480px; 
$md_val: 640px; 
$lg_val: 800px; 
$xl_val: 1000px; 
$xxl_val: 1400px; 

$sm: new-breakpoint(min-width $sm_val 6); 
$md: new-breakpoint(min-width $md_val 7); 
$lg: new-breakpoint(min-width $lg_val 8); 
$xl: new-breakpoint(min-width $xl_val 9); 
$xxl: new-breakpoint(min-width $xxl_val 10); 

@import "neat"; //IMPORTANT: ADD AFTER GRID SETTINGS 

// Container 
@mixin container { 
    @include outer-container(100%); 

    @include media($sm) { 
     @include outer-container($sm_val); 
    } 

    @include media($md) { 
     @include outer-container($md_val); 
    } 

    @include media($lg) { 
     @include outer-container($lg_val); 
    } 

    @include media($xl) { 
     @include outer-container($xl_val); 
    } 

    @include media($xxl) { 
     @include outer-container($xxl_val); 
    } 
} 

@if ($visual-grid) { 
    body:before { 
     @include container; 
    } 
}