Come fare il primo cellulare con Bourbon Neat Framework

Question

Ho usato bourbon neat per fare un primo layout desktop che ha funzionato bene.

Tuttavia, mi piacerebbe fare una prima versione mobile, iniziando con il cellulare e lavorando fino in su. La griglia di default è di 12 colonne e per i dispositivi mobili di solito utilizzo una griglia di 4. Ho provato a cambiare la mia griglia a 4 e scalare fino a 12, ma questo non ha funzionato.

C'è un modo migliore per fare il cellulare prima di creare il layout desktop standard, quindi inserire una query multimediale mobile in ogni selettore CSS e iniziare con la versione mobile e costruire la strada?

Answer 1

È necessario creare nuovi punti di interruzione con il mixin new-breakpoint di Neat. Ma invece di usare la larghezza massima come fanno nei loro esempi, puoi usare la larghezza minima.

Ad esempio:

@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; 
    } 
} 

Nell'esempio .main avrà uno sfondo bianco e consistono di 4 colonne. Quando il viewport ha una larghezza di almeno 760 pixel, otterrà uno sfondo nero e si estenderà su 8 colonne.

Answer 2

Esaminerò lo Chasers di Kenneth Ormandy. È un po 'il omega-reset(xn) includere il passaggio "xn" dal precedente file-query omega(xn). Fornisce molta documentazione sul repository github e puoi installarlo facilmente con Bower o NPM.

Answer 3

Per espandere la risposta di Jorn ... è inoltre necessario impostare la variabile $grid-columns sul numero di larghezza del cellulare, diversamente dal numero di desktop impostato come predefinito. Questo è ciò che il file _grid_settings.scss si presenta come un progetto a cui sto attualmente lavorando su:

@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); 

potete vedere ho creato un sacco di nuovi punti di interruzione e sto usando 6 cols a larghezza cellulare al contrario di 4 nelle impostazioni Neat originali (necessarie per quello che ho visto nel mio progetto). Dovresti adattare queste impostazioni affinché funzionino per il tuo progetto. Il takeaway però è che sto ignorando la variabile $grid-columns e quindi creando i miei nuovi punti di interruzione. Inoltre, assicurati di importare il tuo _grid_setting.scss PRIMA Neat ...

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