Wie Mobile zuerst mit Bourbon Neat Framework zu tun

Question

Ich habe Bourbon ordentlich verwendet, um einen Desktop ersten Layout, das gut funktioniert.

Allerdings würde ich gerne eine mobile erste Versionen machen, beginnend mit mobilen und arbeiten meinen Weg nach oben. Das Standardraster ist 12 Spalten und für Mobilgeräte verwende ich normalerweise ein Raster von 4. Ich habe versucht, mein Raster auf 4 zu skalieren und auf 12 zu skalieren, aber das hat nicht funktioniert.

Gibt es einen besseren Weg, als zuerst das Standard-Desktop-Layout zu erstellen, dann eine mobile Medienabfrage in jeden CSS-Selektor einzufügen und mit der mobilen Version zu beginnen und den Weg zu ebnen?

Answer 1

Sie sollten neue Haltepunkte mit dem neuen Haltepunkt Mixin von Neat erstellen. Aber anstatt die maximale Breite wie in ihren Beispielen zu verwenden, können Sie die minimale Breite verwenden.

Zum Beispiel:

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

Im Beispiel .main einen weißen Hintergrund haben und aus vier Spalten bestehen. Wenn das Ansichtsfenster mindestens 760 Pixel breit ist, erhält es einen schwarzen Hintergrund und umfasst 8 Spalten.

Answer 2

Ich würde Chasers von Kenneth Ormandy Reichweite. Es ist ein wenig omega-reset(xn) enthalten "xn" von der vorherigen Medien-Abfrage omega(xn) übergeben. Er bietet eine Vielzahl von Dokumentationen zum Github Repo und Sie können es einfach mit Bower oder NPM installieren.

Answer 3

Um Jorns Antwort zu erweitern ... müssen Sie auch die $grid-columns Variable auf die mobile Breitenzahl setzen, im Gegensatz zu der Desktop-Nummer, die als Standard eingestellt ist. Dies ist, was die _grid_settings.scss Datei wie für ein Projekt sieht bin ich zur Zeit arbeiten:

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

Sie können sehen, ich eine Menge neuer Haltepunkte erstellt habe, und ich bin mit 6 cols bei mobiler Breite im Gegensatz zu 4 in den ursprünglichen Neat-Einstellungen (notwendig für das, was ich in meinem Projekt habe). Sie sollten diese Einstellungen so anpassen, dass sie für Ihr eigenes Projekt funktionieren. Das Mitnehmen ist jedoch, dass ich die Variable $grid-columns überschreibe und dann meine neuen Haltepunkte erstelle. Auch sollten Sie Ihre _grid_setting.scss VOR Ordentlich importieren ...

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