Fondazione - Stili globali
In questo capitolo studieremo gli stili globali . Il framework CSS globale di Foundation include utili ripristini che assicurano che lo stile sia coerente tra i browser.
Dimensionamento dei caratteri
La dimensione del carattere del foglio di stile del browser è impostata su 100% per impostazione predefinita. La dimensione del carattere predefinita è impostata su 16 pixel. A seconda della dimensione del carattere, viene calcolata la dimensione della griglia. Per avere una dimensione del carattere di base distinta e punti di interruzione della griglia inalterati, impostare $ rem-base sul valore $ global-font-size , che deve essere in pixel.
Colori
Gli elementi interattivi come link e pulsanti utilizzano la tonalità di blu predefinita che proviene dalla variabile SASS $ primary-color . I componenti possono anche avere colori come: secondario, avviso, successo e avviso . Per maggiori informazioni controlla qui .
Riferimento SASS
Variabili
La tabella seguente elenca le variabili SASS, che vengono utilizzate per personalizzare gli stili predefiniti dei componenti nel progetto _settings.scss .
| Sr.No. | Nome e descrizione | genere | Valore predefinito |
|---|---|---|---|
| 1 |
$global-width Rappresenta la larghezza globale del sito. Utilizzato per determinare la larghezza delle righe della griglia. |
Numero | rem-calc (1200) |
| 2 |
$global-font-size Rappresenta la dimensione del carattere applicata a <html> e <body> . È impostato al 100% per impostazione predefinita e il valore delle impostazioni del browser dell'utente verrà ereditato. |
Numero | 100% |
| 3 |
$global-lineheight Rappresenta tutti i tipi di altezza di linea predefinita. $ global-lineheight è 24px mentre $ global-font-size è impostato su 16px. |
Numero | 1.5 |
| 4 |
$primary-color Dà colore ai componenti interattivi come link e pulsanti. |
Colore | # 2199e8 |
| 5 |
$secondary-color Viene utilizzato con i componenti che supportano la classe .secondary . |
Colore | # 777 |
| 6 |
$success-color Rappresenta lo stato o l'azione positivo quando viene utilizzato con la classe .success . |
Colore | # 3adb76 |
| 7 |
$warning-color Rappresenta uno stato o un'azione di attenzione quando viene utilizzato con la classe .warning . |
Colore | # ffae00 |
| 8 |
$alert-color Rappresenta uno stato o un'azione negativa quando viene utilizzato con la classe .alert . |
Colore | # ec5840 |
| 9 |
$light-gray Viene utilizzato per gli elementi dell'interfaccia utente grigio chiaro. |
Colore | # e6e6e6 |
| 10 |
$medium-gray Viene utilizzato per gli elementi dell'interfaccia utente grigio medio. |
Colore | #cacaca |
| 11 |
$dark-gray Viene utilizzato per gli elementi dell'interfaccia utente grigio scuro. |
Colore | # 8a8a8a |
| 12 |
$black Viene utilizzato per gli elementi dell'interfaccia utente neri. |
Colore | # 0a0a0a |
| 13 |
$white Viene utilizzato per gli elementi dell'interfaccia utente bianchi. |
Colore | #fefefe |
| 14 |
$body-background Rappresenta il colore di sfondo del corpo. |
Colore | $ bianco |
| 15 |
$body-font-color Rappresenta il colore del testo del corpo. |
Colore | $ nero |
| 16 |
$body-font-family Rappresenta l'elenco dei caratteri del corpo. |
Elenco | "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif |
| 17 |
$body-antialiased Il tipo con antialiasing viene abilitato impostando questo attributo su true utilizzando le proprietà CSS -webkit-font-smoothing e -moz-osx-font-smoothing . |
Booleano | vero |
| 18 |
$global-margin Rappresenta il valore del margine globale sui componenti. |
Numero | 1rem |
| 19 |
$global-padding Rappresenta il valore di riempimento globale sui componenti. |
Numero | 1rem |
| 20 |
$global-margin Rappresenta il valore del margine globale utilizzato tra i componenti. |
Numero | 1rem |
| 21 |
$global-weight-normal Rappresenta lo spessore del carattere globale per il tipo normale. |
Parola chiave o numero | normale |
| 22 |
$global-weight-bold Rappresenta lo spessore del carattere globale per il grassetto. |
Parola chiave o numero | grassetto |
| 23 |
$global-radius Rappresenta il valore globale di tutti gli elementi che hanno un raggio di confine. |
Numero | 0 |
| 24 |
$global-text-direction Imposta la direzione del testo del CSS su ltr o rtl |
ltr |