Ich benutze Bourbon pur, um ein Desktop-Layout zu erstellen, das gut funktioniert.
Allerdings würde ich gerne eine mobile erste Version machen, beginnend mit Mobile und arbeite mich hoch. 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, zuerst mobil zu arbeiten, als 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 finden?
Sie sollten neue Breakpoints mit dem neuen Breakpoint-Mixin von Neat erstellen. Aber anstatt die maximale Breite wie in ihren Beispielen zu verwenden, können Sie min-width verwenden.
Zum Beispiel:
%Vor%Im Beispiel wird .main einen weißen Hintergrund haben und aus 4 Spalten bestehen. Wenn das Ansichtsfenster mindestens 760 Pixel breit ist, erhält es einen schwarzen Hintergrund und umfasst 8 Spalten.
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. So sieht die Datei _grid_settings.scss für ein Projekt aus, an dem ich gerade arbeite:
Sie können sehen, dass ich viele neue Haltepunkte erstellt habe und ich 6 Spalten in der mobilen Breite verwende, im Gegensatz zu 4 in den ursprünglichen ordentlichen Einstellungen (notwendig für das, was ich in meinem Projekt gemacht 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. Stellen Sie außerdem sicher, dass Sie _grid_setting.scss BEFORE Neat ... importieren.
Ich würde Chasers von Kenneth Ormandy ausspielen. Es ist ein wenig omega-reset(xn) include die Übergabe von "xn" von omega(xn) der vorherigen Medienanfrage. Er stellt eine Fülle von Dokumentationen zum Github Repo bereit und Sie können es einfach mit Bower oder NPM installieren.