Fondation - Typographie de base
La description
La typographie dans Foundation définit des en-têtes, des paragraphes, des listes et d'autres éléments en ligne qui créent des styles par défaut attrayants et simples pour les éléments.
Le tableau suivant répertorie les différents types de typographie utilisés dans Foundation -
| N ° Sr. | Typographie et description |
|---|---|
| 1 | Les paragraphes Le paragraphe est un groupe de phrases définies avec une taille de police différente, des mots en surbrillance, une hauteur de ligne, etc. |
| 2 | Entête Il définit les en-têtes HTML de h1 à h6. |
| 3 | Liens Il crée un lien hypertexte qui ouvre un autre document lorsque vous cliquez sur le texte ou une image. |
| 4 | Diviseurs Il est utilisé pour donner une pause entre les sections en utilisant la balise <hr>. |
| 5 | Listes ordonnées et non ordonnées Foundation prend en charge les listes ordonnées, les listes non ordonnées pour lister les choses. |
| 6 | Listes de définitions Les listes de définitions sont utilisées pour afficher les paires de valeurs de nom. |
| sept | Blockquotes Il représente un bloc de texte, qui définit beaucoup plus grand que la normale. |
| 8 | Abréviations et code L'abréviation définit un terme raccourci de mot ou de phrase et le code représente un morceau de code. |
| 9 | Frappes Il est utilisé pour exécuter une fonction spécifique. |
| dix | Accessibilité Foundation fournit quelques lignes directrices pour accéder au contenu de la page. |
Référence Sass
Vous pouvez modifier les styles des composants à l'aide des variables SASS suivantes, comme indiqué dans le tableau.
| N ° Sr. | Nom et description | Type | Valeur par défaut |
|---|---|---|---|
| 1 | $header-font-family Spécifie la famille de polices pour les éléments d'en-tête. |
Chaîne ou liste | $ body-font-family |
| 2 | $header-font-weight Spécifie l'épaisseur de la police des en-têtes. |
Chaîne | $ global-poids-normal |
| 3 | $header-font-style Fournit le style de police des en-têtes. |
Chaîne | Ordinaire |
| 4 | $font-family-monospace Pile de polices utilisée pour les éléments qui utilisent un type à espacement fixe, tels que des exemples de code. |
Chaîne ou liste | Consolas, 'Liberation Mono', Courier, monospace |
| 5 | $header-sizes Définit les tailles d'écran des en-têtes et chaque clé est un point d'arrêt, et chaque valeur est une carte des tailles de titre. |
Carte | |
| 6 | $header-color Fournit la couleur des en-têtes. |
Couleur | hériter |
| sept | $header-lineheight Définit la hauteur de ligne des en-têtes. |
Nombre | 1,4 |
| 8 | $header-margin-bottom Fournit la marge inférieure des en-têtes. |
Nombre | 0,5rem |
| 9 | $header-text-rendering Définit la méthode de rendu du texte. |
Chaîne | optimiserLégibilité |
| dix | $small-font-size Spécifie la taille de la police pour les éléments <petits>. |
Nombre | 80% |
| 11 | $paragraph-margin-bottom Spécifie la marge inférieure des paragraphes. |
Nombre | 1rem |
| 12 | $paragraph-text-rendering Méthodes de rendu de texte de paragraphe. |
Chaîne | optimiserLégibilité |
| 13 | $code-color Fournit la couleur du texte aux échantillons de code. |
Couleur | $ noir |
| 14 | $code-font-family Fournit la famille de polices aux exemples de code. |
Chaîne ou liste | $ font-family-monospace |
| 15 | $code-border Spécifie la bordure autour du code. |
liste | 1px uni $ gris moyen |
| 16 | $code-padding Spécifie le remplissage autour du texte. |
Numéro ou liste | rem-calc (2 5 1) |
| 17 | $anchor-color Couleur par défaut des liens. |
Couleur | $ couleur primaire |
| 18 | $anchor-color-hover Spécifie la couleur par défaut des liens au survol. |
Couleur | scale-color ($ anchor-color, $ lightness: -14%) |
| 19 | $anchor-text-decoration Décoration de texte par défaut pour les liens. |
Chaîne | aucun |
| 20 | $anchor-text-decoration-hover Décoration de texte par défaut pour les liens au survol. |
Chaîne | aucun |
| 21 | $hr-width Définit la largeur maximale d'un séparateur. |
Nombre | $ largeur-globale |
| 22 | $hr-border Spécifie la bordure par défaut d'un séparateur. |
liste | 1px uni $ gris moyen |
| 23 | $hr-margin Marge par défaut pour un diviseur. |
Numéro ou liste | rem-calc (20) automatique |
| 24 | $list-lineheight Il définit la hauteur de ligne pour les éléments d'une liste. |
Nombre | $ paragraph-lineheight |
| 25 | $list-style-type Fournit un type de puce pour les listes non ordonnées. |
Chaîne | disque |
| 26 | $list-style-position Il définit le positionnement des puces sur des listes non ordonnées. |
Chaîne | à l'extérieur |
| 27 | $list-side-margin Définit la marge du côté gauche (ou droit). |
Nombre | 1,25rem |
| 28 | $defnlist-term-weight Fournit l'épaisseur de la police pour les éléments <dt>. |
Chaîne | $ global-weight-bold |
| 29 | $defnlist-term-margin-bottom Fournit un espacement entre les éléments <dt> et <dd>. |
Nombre | 0,3rem |
| 30 | $blockquote-color Il applique la couleur du texte des éléments <blockquote>. |
Couleur | $ gris foncé |
| 31 | $blockquote-padding Fournit un remplissage à l'intérieur d'un élément <blockquote>. |
Numéro ou liste | rem-calc (9 20 0 19) |
| 32 | $blockquote-border Il donne une bordure latérale pour les éléments <blockquote>. |
liste | 1px uni $ gris moyen |
| 33 | $cite-font-size Définit la taille de la police pour les éléments <cite>. |
Nombre | rem-calc (13) |
| 34 | $cite-color Fournit la couleur du texte pour les |
Couleur | $ gris foncé |
| 35 | $keystroke-font Définit la famille de polices pour les éléments <kbd>. |
Chaîne ou liste | $ font-family-monospace |
| 36 | $keystroke-color Définit la couleur du texte pour les éléments <kbd>. |
Couleur | $ noir |
| 37 | $keystroke-background Fournit une couleur d'arrière-plan pour les éléments <kbd>. |
Couleur | $ gris clair |
| 38 | $keystroke-padding Spécifie le remplissage pour les éléments <kbd>. |
Numéro ou liste | rem-calc (2 4 0) |
| 39 | $keystroke-radius Affiche le rayon de la bordure des éléments <kbd>. |
Numéro ou liste | $ global-radius |
| 40 | $abbr-underline Fournit le style de bordure inférieure pour les éléments <abbr>. |
liste | 1px pointillé $ noir |