Foundation - Globale Stile
In diesem Kapitel werden wir uns mit globalen Stilen befassen . Das globale CSS of Foundation-Framework enthält nützliche Resets, die sicherstellen, dass das Styling in allen Browsern konsistent ist.
Schriftgröße
Die Schriftgröße des Browser-Stylesheets ist standardmäßig auf 100% eingestellt. Die Standardschriftgröße ist auf 16 Pixel eingestellt. Abhängig von der Schriftgröße wird die Rastergröße berechnet. Setzen Sie $ rem-base auf den Wert $ global-font-size , der in Pixel angegeben werden muss, um eine eindeutige Basisschriftgröße und nicht betroffene Raster-Haltepunkte zu erhalten.
Farben
Interaktive Elemente wie Links und Schaltflächen verwenden den Standard-Blauton, der von der SASS-Variablen $ Primärfarbe stammt . Komponenten können auch Farben haben wie: sekundär, Alarm, Erfolg und Warnung . Weitere Informationen finden Sie hier .
SASS-Referenz
Variablen
In der folgenden Tabelle sind die SASS-Variablen aufgeführt, mit denen die Standardstile von Komponenten in Ihrem Projekt _settings.scss angepasst werden .
| Sr.Nr. | Name & Beschreibung | Art | Standardwert |
|---|---|---|---|
| 1 | $global-width Es repräsentiert die globale Breite der Site. Wird verwendet, um die Zeilenbreite des Rasters zu bestimmen. |
Nummer | rem-calc (1200) |
| 2 | $global-font-size Es stellt die Schriftgröße dar, die auf <html> und <body> angewendet wird . Es ist standardmäßig auf 100% eingestellt und der Browser-Einstellungswert des Benutzers wird vererbt. |
Nummer | 100% |
| 3 | $global-lineheight Es repräsentiert alle Arten der Standardzeilenhöhe. $ global-lineheight ist 24px, während $ global-font-size auf 16px eingestellt ist. |
Nummer | 1.5 |
| 4 | $primary-color Es gibt den interaktiven Komponenten wie Links und Schaltflächen Farbe. |
Farbe | # 2199e8 |
| 5 | $secondary-color Es wird mit Komponenten verwendet, die die Sekundärklasse unterstützen . |
Farbe | # 777 |
| 6 | $success-color Es stellt den positiven Status oder die positive Aktion dar, wenn es mit der .success- Klasse verwendet wird. |
Farbe | # 3adb76 |
| 7 | $warning-color Es stellt einen Warnstatus oder eine Aktion dar, wenn es mit der .warning- Klasse verwendet wird. |
Farbe | # ffae00 |
| 8 | $alert-color Es stellt einen negativen Status oder eine negative Aktion dar, wenn es mit der Klasse .alert verwendet wird . |
Farbe | # ec5840 |
| 9 | $light-gray Es wird für hellgraue UI-Elemente verwendet. |
Farbe | # e6e6e6 |
| 10 | $medium-gray Es wird für mittelgraue UI-Elemente verwendet. |
Farbe | #cacaca |
| 11 | $dark-gray Es wird für dunkelgraue UI-Elemente verwendet. |
Farbe | # 8a8a8a |
| 12 | $black Es wird für schwarze UI-Elemente verwendet. |
Farbe | # 0a0a0a |
| 13 | $white Es wird für weiße UI-Elemente verwendet. |
Farbe | #fefefe |
| 14 | $body-background Es repräsentiert die Hintergrundfarbe des Körpers. |
Farbe | $ weiß |
| 15 | $body-font-color Es repräsentiert die Textfarbe des Körpers. |
Farbe | $ schwarz |
| 16 | $body-font-family Es repräsentiert die Liste der Schriftarten des Körpers. |
Liste | 'Helvetica Neue', Helvetica, Roboto, Arial, serifenlos |
| 17 | $body-antialiased Antialiased Typ wird durch das Setzen dieses Attributs aktiviert wahr die CSS - Eigenschaften mit -webkit-font-Glättung und -moz-osx-font-Glättung . |
Boolescher Wert | wahr |
| 18 | $global-margin Es repräsentiert den globalen Margin-Wert für Komponenten. |
Nummer | 1rem |
| 19 | $global-padding Es repräsentiert den globalen Füllwert für Komponenten. |
Nummer | 1rem |
| 20 | $global-margin Es stellt den globalen Randwert dar, der zwischen Komponenten verwendet wird. |
Nummer | 1rem |
| 21 | $global-weight-normal Es repräsentiert die globale Schriftgröße für den normalen Typ. |
Schlüsselwort oder Nummer | normal |
| 22 | $global-weight-bold Es repräsentiert die globale Schriftgröße für Fettdruck. |
Schlüsselwort oder Nummer | Fett gedruckt |
| 23 | $global-radius Es repräsentiert den globalen Wert aller Elemente mit einem Randradius. |
Nummer | 0 |
| 24 | $global-text-direction Es setzt die Textrichtung des CSS auf ltr oder rtl |
ltr |