Spectre CSS -Framework: Leichte, reaktionsschnelle und moderne CSS -Lösungen
In der Projektentwicklung kann der Rahmen die Entwicklungszeit erheblich verkürzen. Beliebte Frameworks wie Bootstrap sind Funktionen, aber nicht alle Funktionen sind für jedes Projekt geeignet. In diesem Artikel wird ein neues leichter, modernes, reaktionsschnelles und mobilfreundliches Rahmen eingeführt - Gespenst. Die Größe nach Komprimierung und GZIP beträgt ca. 6,8 KB. Zusätzlich zum grundlegenden Netzsystem bietet es auch vielen anderen praktischen Komponenten wie Registerkarten, Modalboxen und Karten.
Dieses Tutorial gibt Ihnen einen kurzen Überblick über das Framework und gibt Ihnen einige Anleitungen, damit Sie schnell beginnen können.
Schlüsselpunkte
Installation
Sie können die komprimierte Spektre.CSS -Datei direkt herunterladen oder mit NPM und Bower installieren. Sobald die Installation abgeschlossen ist, können Sie Dateien wie ein normales Stilblatt in Ihr Projekt einbeziehen.
<link rel="stylesheet" href="link/spectre.min.css" />
Sie können auch eine eigene benutzerdefinierte Framework -Version erstellen, indem Sie die weniger Datei im Verzeichnis /src
oder unerwünschte Komponenten aus der Specree.less -Datei bearbeiten. Sie können dann Gulp verwenden, um die CSS -Datei aus der Befehlszeile zu erstellen.
Gittersystem
Spectre verfügt über ein auf Flexbox-basiertes Responsive Raster-System mit 12 Spalten. Die Breite jeder Spalte wird durch ihren Klassennamen bestimmt. Jede Klasse beginnt mit col-
und folgt von einer Zahl, um die Anzahl der Spalten anzuzeigen, die das Element besetzen sollte. Zum Beispiel nimmt col-12
12 Spalten mit einer Breite von 100%ein; Standardmäßig gibt es einige Lücken zwischen verschiedenen Spalten. Sie können diese Lücke beseitigen, indem Sie seinem Container eine col-3
-Klasse hinzufügen. Wie Bootstrap bietet es auch Klassen wie col-gapless
, col-md-[1-12]
und col-sm-[1-12]
, um die Breite des Elements zu steuern, wenn sich die Ansichtsfenstergröße ändert. col-xs-[1-12]
, hide-xs
und hide-sm
zum Verstecken von Elementen unter einer bestimmten Ansichtsfenstergröße. hide-md
Wenn die Ansichtsfenster weniger als 480 Pixel beträgt, werden alle Spalten als einzelne Zeile angezeigt. Die col-xs-*
-Klasse wird auf alle Elemente mit einer Breite von mehr als 480 Pixel angewendet. In ähnlicher Weise wird col-sm-*
auf Elemente mit einer Ansichtsfensterbreite von mehr als 600 Pixel angewendet, und col-md-*
wird auf Elemente mit einer Ansichtsfensterbreite von mehr als 800 Pixel angewendet.
Das folgende Code -Snippet erstellt eine Spalte mit einer Breite von 33,333% (col-4
), zwei Spalten mit einer Breite von 25% (col-3
) und einer Spalte mit einer Breite von 16,66% (col-2
).
<link rel="stylesheet" href="link/spectre.min.css" />
... (Der nachfolgende Inhalt ähnelt dem Originaltext. Sie können die Formulierung und Absatzstruktur nach Bedarf anpassen, um die ursprüngliche Absicht unverändert zu halten) ....
Das obige ist der detaillierte Inhalt vonGespenst: Ein leichtes CSS -Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!