Stiftung - Das Gitter

Beschreibung

Das Foundation Grid-System skaliert bis zu 12 Spalten auf der Seite. Rastersysteme werden verwendet, um Seitenlayouts durch eine Reihe von Zeilen und Spalten zu erstellen, in denen Ihre Inhalte gespeichert sind.

Rasteroptionen

In der folgenden Tabelle wird kurz erläutert, wie das Foundation-Grid-System auf mehreren Geräten funktioniert.

Kleine Geräte Telefone (<640px) Mittlere Geräte Tablets (> = 640px) Große Geräte Laptops & Desktops (> = 1200px)
Gitterverhalten Immer horizontal Zum Start zusammengeklappt, horizontal über den Haltepunkten Zum Start zusammengeklappt, horizontal über den Haltepunkten
Klassenpräfix .klein-* .Mittel-* .large- *
Anzahl der Spalten 12 12 12
Nestable Ja Ja Ja
Offsets Ja Ja Ja
Spaltenbestellung Ja Ja Ja

Grundstruktur eines Fundamentgitters

Das Folgende ist die Grundstruktur eines Foundation-Rasters -

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>
  • Erstellen Sie zunächst eine Zeilenklasse , um horizontale Spaltengruppen zu erstellen.

  • Der Inhalt sollte innerhalb der Spalten platziert werden, und nur Spalten dürfen die unmittelbaren untergeordneten Elemente von Zeilen sein.

  • Rasterspalten werden erstellt, indem die Anzahl der zwölf verfügbaren Spalten angegeben wird, die Sie überspannen möchten. Zum Beispiel würden wir für vier gleiche Spalten .large-3 verwenden

Im Folgenden sind die drei Klassen aufgeführt, die im Foundation-Rastersystem verwendet werden:

Sr.Nr. Grundlegende Rasterklassen & Beschreibung
1 Groß

Die large- * Klassen werden für die großen Geräte verwendet.

2 Mittel

Die Medium-Klasse * wird für die Medium-Geräte verwendet.

3 Klein

small- * class wird für kleine Geräte verwendet.

Erweitertes Raster

Im Folgenden sind die in Foundation verwendeten erweiterten Rasterformate aufgeführt.

Sr.Nr. Erweiterte Raster & Beschreibung
1 Kombinierte Spalte / Zeile

Die Spalten- und Zeilenklassen werden für dasselbe Element verwendet, um die Spalte mit voller Breite als Container zu verwenden.

2 Nisten

Wir können die Rasterspalten in anderen Spalten verschachteln.

3 Offsets

Mit der Klasse mit großem Versatz * oder kleinem Versatz * können Sie die Spalten nach rechts verschieben.

4 Unvollständige Zeilen

Foundation verschiebt das letzte Element automatisch nach rechts, wenn die Zeilen keine Spalten bis 12 enthalten.

5 Zeilen reduzieren / nicht reduzieren

Bei Verwendung der Größe der Medienabfrage werden die Klassen zum Reduzieren und Auflösen in das Zeilenelement aufgenommen, um die Auffüllungen anzuzeigen.

6 Zentrierte Spalten

Indem Sie die Klasse klein zentriert in die Spalte aufnehmen, können Sie die Spalte in der Mitte erstellen.

7 Quellenbestellung

Die Quellordnungsklasse wird verwendet, um die Spalten zwischen dem Haltepunkt zu verschieben.

8 Blockgitter

Block-Grid wird verwendet, um den Inhalt zu teilen.

Semantisch bauen

Mit den SASS-Mixins wird ein Grid-CSS generiert, mit dem Sie Ihr eigenes semantisches Grid erstellen können. Für weitere Informationen klicken Sie hier

SASS-Referenz

Im Folgenden finden Sie die SASS-Referenz für das in Foundation verwendete Raster.

Sr.Nr. Grundraster & Beschreibung
1 Variablen

Mit den sass-Variablen können wir die Standardstile dieser Komponente ändern.

2 Mixins

Die endgültige CSS-Ausgabe wird mithilfe des Mixins erstellt.