Utilitaires d'espacement
Comprendre la construction des classes utilitaires d'espacement
Les classes utilitaires d'espacement possèdent un nommage particulier qu'il convient d'expliquer pour savoir comment les utiliser. Elles répondent toutes au motif suivant :
.u-<propriété>-<taille>
La propriété peut être l'une des suivantes :
| Code | Propriété CSS équivalente |
|---|---|
mbs |
margin-block-start |
mbe |
margin-block-end |
mis |
margin-inline-start |
mie |
margin-inline-end |
mb |
margin-block |
mi |
margin-inline |
m |
margin |
pbs |
padding-block-start |
pbe |
padding-block-end |
pis |
padding-inline-start |
pie |
padding-inline-end |
pb |
padding-block |
pi |
padding-inline |
p |
padding |
cg |
column-gap |
rg |
row-gap |
g |
gap |
NOTE : les codes des propriétés correspondent aux initiales de la propriété CSS correspondante.
La taille peut être l'une des suivantes :
| Code | Taille équivalente |
|---|---|
0 |
0px |
xxs |
4px |
xs |
8px |
sm |
16px |
md |
24px |
lg |
32px |
xl |
48px |
xxl |
64px |
auto |
Espacement auto* |
* L'espacement auto n'est pas utilisable sur les propriétés de padding et de gap.
NOTE : les tailles indiquées sont les équivalents en pixels, l'unité utilisée en réalité est le
rem.
EXEMPLES :
u-pbs-xxl=padding-block-start: 64px;u-rg-sm=row-gap: 16px;u-m-auto=margin: auto
Spacers autonomes
Les spacers sont des éléments généralements vides qui permettent d'ajouter de l'espace entre 2 autres éléments.
.u-vspacer-...: Spacer entre 2 éléments dans le sens vertical.u-hspacer-...: Spacer entre 2 éléments dans le sens horizontal
NOTE : les
...sont à remplacer par les codes de tailles décrits ci-dessus.
Autres classes utilitaires
.u-margin-trim: Supprimer la marge haute du premier enfant et la marge basse du dernier élément enfant, cela afin de conserver des marges intérieures cohérentes à l'intérieur du conteneur qui utilise cette classe..u-no-margin: Supprime les marges