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.