Breakpoints mit sauberem Bourbon-Gitter

8

Ich versuche, ordentlich für Bourbon zu verwenden, und ich habe die meisten Dinge aussortiert, aber ich treffe einige Straßenblockaden, wenn es darum geht, die Bruchstellen zu schaffen.

Ich bevorzuge separate Sass-Dateien für Handy, Tablet, Desktop & Amp; larydesktop und ich benutze normalerweise keine Blasenbildung, um meine Medienabfragen zu erstellen, da ich nicht mag, wie es nicht nur eine Medienabfrage erstellt, sondern Töne aus der CSS-Datei macht. Aber bis jetzt kann ich nur Dokumentation über eine blubbernde Methode finden.

Artikel zur Verwendung von Haltepunkten in ordentlich

Hier ist was ich getan habe:

%Vor%

Ich habe das auch versucht, was die bg-Farbe aktualisiert, aber das visuelle Gitter nicht aktualisiert:

%Vor%     
Daimz 04.04.2013, 08:08
quelle

3 Antworten

18

Ich habe das wirklich herausgefunden, mein Hauptproblem war nur, wie ich meine .scss-Dateien organisiert hatte, aber hier ist wie.

Dateistruktur wie folgt:

%Vor%

Variablen müssen vor dem Importieren von Variablen gehen.

in _variables.scss fügen Sie Ihre Abfragen wie folgt hinzu:

%Vor%

Dann (so organisiere ich gerne Dinge) erstelle eine scss-Datei für Handy, Tablet, Desktop & Amp; larydesktop und importieren nach _base.scss - Ich habe oben gezeigt, wie die Dateien strukturiert sein sollten.

Geben Sie in jedem Element Ihre Medienabfrage zusammen mit den erforderlichen Layoutänderungen ein.

so: _mobile.scss

%Vor%

Das sollte für Sie funktionieren.

Wie ich schon sagte, so habe ich es gemacht, ich bin mir sicher, dass es viele andere gibt, aber ich wollte die Leute auf eine Art wissen lassen, wenn sie Probleme haben:)

    
Daimz 04.04.2013, 16:45
quelle
10

Ich hatte ein ähnliches Problem mit den Breakpoints und mit der Aktualisierung des Rasters. Etwas andere Spur, obwohl ...

Hier ist, was mir geholfen hat. Dies ist nicht in der Hauptdokumentation .

Auf der ordentlichen GitHub-Seite erklärt das Team des Thirdbot:

  1. Sie müssen eine Datei _grid-settings.scss
  2. erstellen
  3. Importieren Sie es direkt vor dem Import von Ordentlichem

    %Vor%
  4. Importieren Sie in der _grid-settings.scss-Datei unverdorbene Helfer

    %Vor%

Vor dem Hinzufügen dieses Setups konnte ich das Gitter sehen , aber das Gitter würde nicht auf meine Haltepunktanforderungen reagieren, um Spalten zu aktualisieren oder die Position der Komponenten zu ändern. Sobald diese Einstellungen vorhanden waren, funktionierte das Gitter wie erwartet.

Ich verwende CodeKit 2, wenn das zählt.

    
user3647674 18.09.2014 20:26
quelle
2

Für alle, die es interessieren könnten, war mein Problem nicht, dass ich die falsche Reihenfolge der Importe hatte, sondern wie ich meine Variablen verwendete. Ich dachte, die Funktion nahm eine Zeichenfolge ...

Das ist falsch:

%Vor%

Das ist richtig:

%Vor%     
Design by Adrian 28.09.2014 18:07
quelle