Fondation - Styles globaux
Dans ce chapitre, nous étudierons les styles globaux . Le cadre global CSS of Foundation comprend des réinitialisations utiles qui garantissent la cohérence du style entre les navigateurs.
Dimensionnement des polices
La taille de police de la feuille de style du navigateur est définie sur 100% par défaut. La taille de police par défaut est définie sur 16 pixels. En fonction de la taille de la police, la taille de la grille est calculée. Pour avoir une taille de police de base distincte et des points d'arrêt de grille non affectés, définissez $ rem-base sur la valeur $ global-font-size , qui doit être en pixels.
Couleurs
Les éléments interactifs tels que les liens et les boutons utilisent la nuance de bleu par défaut qui provient de la variable SASS $ primary-color . Les composants peuvent également avoir des couleurs telles que: secondaire, alerte, succès et avertissement . Pour plus d'informations, cliquez ici .
Référence SASS
Variables
Le tableau suivant répertorie les variables SASS, qui sont utilisées pour personnaliser les styles par défaut des composants de votre projet _settings.scss .
| N ° Sr. | Nom et description | Type | Valeur par défaut |
|---|---|---|---|
| 1 | $global-width Il représente la largeur globale du site. Utilisé pour déterminer la largeur de ligne de la grille. |
Nombre | rem-calc (1200) |
| 2 | $global-font-size Il représente la taille de police appliquée à <html> et <body> . Il est défini à 100% par défaut et la valeur des paramètres du navigateur de l'utilisateur sera héritée. |
Nombre | 100% |
| 3 | $global-lineheight Il représente tous les types de hauteur de ligne par défaut. $ global-lineheight est 24px tandis que $ global-font-size est défini sur 16px. |
Nombre | 1,5 |
| 4 | $primary-color Il donne de la couleur aux composants interactifs tels que les liens et les boutons. |
Couleur | # 2199e8 |
| 5 | $secondary-color Il est utilisé avec des composants prenant en charge la classe .secondary . |
Couleur | # 777 |
| 6 | $success-color Il représente l'état positif ou l'action lorsqu'il est utilisé avec la classe .success . |
Couleur | # 3adb76 |
| sept | $warning-color Il représente un état ou une action d'avertissement lorsqu'il est utilisé avec la classe .warning . |
Couleur | # ffae00 |
| 8 | $alert-color Il représente un statut ou une action négatif lorsqu'il est utilisé avec la classe .alert . |
Couleur | # ec5840 |
| 9 | $light-gray Il est utilisé pour les éléments d'interface utilisateur gris clair. |
Couleur | # e6e6e6 |
| dix | $medium-gray Il est utilisé pour les éléments d'interface utilisateur gris moyen. |
Couleur | #cacaca |
| 11 | $dark-gray Il est utilisé pour les éléments d'interface utilisateur gris foncé. |
Couleur | # 8a8a8a |
| 12 | $black Il est utilisé pour les éléments noirs de l'interface utilisateur. |
Couleur | # 0a0a0a |
| 13 | $white Il est utilisé pour les éléments blancs de l'interface utilisateur. |
Couleur | #fefefe |
| 14 | $body-background Il représente la couleur de fond du corps. |
Couleur | $ blanc |
| 15 | $body-font-color Il représente la couleur du texte du corps. |
Couleur | $ noir |
| 16 | $body-font-family Il représente la liste des polices du corps. |
liste | 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif |
| 17 | $body-antialiased Le type anti-crénelé est activé en définissant cet attribut sur true à l'aide des propriétés CSS -webkit-font-smoothing et -moz-osx-font-smoothing . |
Booléen | vrai |
| 18 | $global-margin Il représente la valeur de la marge globale sur les composants. |
Nombre | 1rem |
| 19 | $global-padding Il représente la valeur de remplissage globale sur les composants. |
Nombre | 1rem |
| 20 | $global-margin Il représente la valeur de marge globale utilisée entre les composants. |
Nombre | 1rem |
| 21 | $global-weight-normal Il représente l'épaisseur de police globale pour le type normal. |
Mot-clé ou numéro | Ordinaire |
| 22 | $global-weight-bold Il représente l'épaisseur de police globale pour les caractères gras. |
Mot-clé ou numéro | audacieux |
| 23 | $global-radius Il représente la valeur globale de tous les éléments qui ont un rayon de bordure. |
Nombre | 0 |
| 24 | $global-text-direction Il définit la direction du texte du CSS sur ltr ou rtl |
ltr |