DSFR v1.12.1
Le package core est utilisé comme fondation du Design System, il contient plusieurs éléments fondamentaux.
### Typographie
Les typographies Marianne® et Spectral sont les typographies officielles de la charte de l'État. Leur usage crée une cohérence entre les interfaces et offre une expérience positive à l’utilisateur. Leur respect renforce également la reconnaissance de la parole de l’État.
### Icônes
Les icônes fonctionnelles sont des symboles visuels qui accompagnent l’utilisateur dans ses actions et qui aident à sa compréhension de l’interface.
### Icônes de favoris - Favicon
L’icône de favoris est un petit icône associé à un site web. Il permet à l’utilisateur de repérer qu’il se trouve sur un site de l'état.
### Medias
Les médias désignent vos contenus photos et vidéos. Lorsqu’ils sont intégré à une page de contenu, il est recommandé de suivre les règles décrites ci-dessous.
### Grille
La grille proposée par le design system vous permet de structurer vos pages et vos contenus simplement.
Des classes utilitaires sont disponibles pour gérer les marges intérieures et extérieures d'un élément html.
Celles-ci suivent la structure suivante (entre crochets les valeurs, facultatives, possibles):
- Le prefix : 'fr-',
- la lettre 'm' pour margin ou 'p' pour padding,
- l'orientation avec 't', 'r', 'b', 'l' (top, right, bottom, left) ou 'x', 'y' (horizontal, vertical),
- un séparateur : '-',
- le token d'espacement (nb: le signe '-' des nombres négatifs est remplacé par la lettre 'n', et 0 n'a pas d'unité 'v')
| Classe | Description | Exemple d'espacement | Exemple de classe |
|---|---|---|---|
| fr-m- | Margin |
|
fr-m-2v |
| fr-mt- | Margin top |
|
fr-mt-2v |
| fr-mr- | Margin right |
|
fr-mr-2v |
| fr-mb- | Margin bottom |
|
fr-mb-2v |
| fr-ml- | Margin left |
|
fr-ml-2v |
| fr-mx- | Margin left & right |
|
fr-mx-2v |
| fr-my- | Margin top & bottom |
|
fr-my-2v |
| fr-p- | Padding |
|
fr-p-2v |
| fr-pt- | Padding top |
|
fr-pt-2v |
| fr-pr- | Padding right |
|
fr-pr-2v |
| fr-pb- | Padding bottom |
|
fr-pb-2v |
| fr-pl- | Padding left |
|
fr-pl-2v |
| fr-px- | Padding left & right |
|
fr-px-2v |
| fr-py- | Padding top & bottom |
|
fr-py-2v |
Il est possible de définir le breakpoint à partir du quel on applique l'espacement.
Il suffit d'ajouter à la classe le breakpoint (md) avant la valeur du token. ex: fr-p-md-4v
Pour adapter les espacements à la taille de l'écran, on peut ainsi combiner les classes en partant du mobile puis en surchargeant en md
<button id="button-106" class="fr-px-4v fr-px-md-16v fr-btn fr-btn">4v en mobile / 16v en md</button>
| Token | rem | px | Exemple d'espacement | Exemple de classe |
|---|---|---|---|---|
| n8v | -2 | -32 |
1
2
|
fr-ml-n8v |
| n7v | -1.75 | -28 |
1
2
|
fr-ml-n7v |
| n6v | -1.5 | -24 |
1
2
|
fr-ml-n6v |
| n5v | -1.25 | -20 |
1
2
|
fr-ml-n5v |
| n4v | -1 | -16 |
1
2
|
fr-ml-n4v |
| n3v | -0.75 | -12 |
1
2
|
fr-ml-n3v |
| n2v | -0.5 | -8 |
1
2
|
fr-ml-n2v |
| n1-5v | -0.375 | -6 |
1
2
|
fr-ml-n1-5v |
| n1v | -0.25 | -4 |
1
2
|
fr-ml-n1v |
| n0-5v | -0.125 | -2 |
1
2
|
fr-ml-n0-5v |
| 0 | 0 | 0 |
1
2
|
fr-ml-0 |
| 0-5v | 0.125 | 2 |
1
2
|
fr-ml-0-5v |
| 1v | 0.25 | 4 |
1
2
|
fr-ml-1v |
| 1-5v | 0.375 | 6 |
1
2
|
fr-ml-1-5v |
| 2v | 0.5 | 8 |
1
2
|
fr-ml-2v |
| 3v | 0.75 | 12 |
1
2
|
fr-ml-3v |
| 4v | 1 | 16 |
1
2
|
fr-ml-4v |
| 5v | 1.25 | 20 |
1
2
|
fr-ml-5v |
| 6v | 1.5 | 24 |
1
2
|
fr-ml-6v |
| 7v | 1.75 | 28 |
1
2
|
fr-ml-7v |
| 8v | 2 | 32 |
1
2
|
fr-ml-8v |
| 9v | 2.25 | 36 |
1
2
|
fr-ml-9v |
| 10v | 2.5 | 40 |
1
2
|
fr-ml-10v |
| 11v | 2.75 | 44 |
1
2
|
fr-ml-11v |
| 12v | 3 | 48 |
1
2
|
fr-ml-12v |
| 13v | 3.25 | 52 |
1
2
|
fr-ml-13v |
| 14v | 3.5 | 56 |
1
2
|
fr-ml-14v |
| 15v | 3.75 | 60 |
1
2
|
fr-ml-15v |
| 16v | 4 | 64 |
1
2
|
fr-ml-16v |
| 17v | 4.25 | 68 |
1
2
|
fr-ml-17v |
| 18v | 4.5 | 72 |
1
2
|
fr-ml-18v |
| 19v | 4.75 | 76 |
1
2
|
fr-ml-19v |
| 20v | 5 | 80 |
1
2
|
fr-ml-20v |
| 21v | 5.25 | 84 |
1
2
|
fr-ml-21v |
| 22v | 5.5 | 88 |
1
2
|
fr-ml-22v |
| 23v | 5.75 | 92 |
1
2
|
fr-ml-23v |
| 24v | 6 | 96 |
1
2
|
fr-ml-24v |
| 25v | 6.25 | 100 |
1
2
|
fr-ml-25v |
| 26v | 6.5 | 104 |
1
2
|
fr-ml-26v |
| 27v | 6.75 | 108 |
1
2
|
fr-ml-27v |
| 28v | 7 | 112 |
1
2
|
fr-ml-28v |
| 29v | 7.25 | 116 |
1
2
|
fr-ml-29v |
| 30v | 7.5 | 120 |
1
2
|
fr-ml-30v |
| 31v | 7.75 | 124 |
1
2
|
fr-ml-31v |
| 32v | 8 | 128 |
1
2
|
fr-ml-32v |
| auto | NaN | NaN |
1
2
|
fr-ml-auto |