Gespenst: Ein leichtes CSS -Framework

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

• Spectre ist ein leichtes, modernes, reaktionsschnelles und mobilfreundliches CSS-Framework, das die Entwicklungszeit erheblich verkürzt. Es bietet ein grundlegendes Netzsystem und verschiedene Komponenten wie Registerkarten, Modalboxen und Karten.
• Dieses Framework enthält Standardstile von Typografieelementen, die für asiatische Schriftarten optimiert sind, und bietet Klassen für Tabellen, Schaltflächen und häufig verwendete Formularelemente. Es bietet auch drei Navigationskomponenten - eine Navigationsleiste, ein vertikales Menü und Brotkrumen.
• Die beiden wichtigen Komponenten von Spectre sind modale Felder und Karten, ähnlich den entsprechenden Komponenten in Bootstrap. Es enthält auch andere Komponenten wie "Toast" -Breinigungen, Abzeichen, Tags, Pagination und Tooltips. Versorgungsklassen können für subtile Layoutanpassungen verwendet werden.
• Während Spectre den geringsten Stil für Elemente bietet und seine Größe unter Berücksichtigung der Anzahl der von ihm bereitgestellten Komponenten sehr vernünftig ist, bietet es kein JavaScript für die Interaktion mit seinen Komponenten. Benutzer müssen ihren eigenen Code schreiben, um Funktionen wie das Anzeigen oder Verstecken von Modalfeldern zu implementieren.

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]

Es enthält auch Klassen wie

, 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!