Ce package regroupe des classes utilitaires CSS et classes javascript utilisées par les autres packages du Design System de l'Etat.
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 class="fr-px-4v fr-px-md-16v fr-btn">
4v en mobile / 16v en md
</button>
| Token | rem | px | Exemple d'espacement | Exemple de classe |
|---|---|---|---|---|
| -8v | -2 | -32 |
1
2
|
fr-ml-n8v |
| -6v | -1.5 | -24 |
1
2
|
fr-ml-n6v |
| -4v | -1 | -16 |
1
2
|
fr-ml-n4v |
| -2v | -0.5 | -8 |
1
2
|
fr-ml-n2v |
| 0v | 0 | 0 |
1
2
|
fr-ml-0 |
| 2v | 0.5 | 8 |
1
2
|
fr-ml-2v |
| 4v | 1 | 16 |
1
2
|
fr-ml-4v |
| 6v | 1.5 | 24 |
1
2
|
fr-ml-6v |
| 8v | 2 | 32 |
1
2
|
fr-ml-8v |
| 10v | 2.5 | 40 |
1
2
|
fr-ml-10v |
| 12v | 3 | 48 |
1
2
|
fr-ml-12v |
| 14v | 3.5 | 56 |
1
2
|
fr-ml-14v |
| 16v | 4 | 64 |
1
2
|
fr-ml-16v |
| 18v | 4.5 | 72 |
1
2
|
fr-ml-18v |
| 20v | 5 | 80 |
1
2
|
fr-ml-20v |
| 22v | 5.5 | 88 |
1
2
|
fr-ml-22v |
| 24v | 6 | 96 |
1
2
|
fr-ml-24v |
| 26v | 6.5 | 104 |
1
2
|
fr-ml-26v |
| 28v | 7 | 112 |
1
2
|
fr-ml-28v |
| 30v | 7.5 | 120 |
1
2
|
fr-ml-30v |
| 32v | 8 | 128 |
1
2
|
fr-ml-32v |
| auto | auto | auto |
1
2
|
.fr-ml-auto |