Espacement
L’unité de base est 4 px (0,25 rem), notée 1v. Les jetons --bj-spacing-* garantissent un rythme vertical et horizontal cohérent.
Jetons d’espacement
| Jeton | rem | px | Repère |
|---|---|---|---|
--bj-spacing-0v5 | 0,125 | 2 | |
--bj-spacing-1v | 0,25 | 4 | |
--bj-spacing-1v5 | 0,375 | 6 | |
--bj-spacing-2v | 0,5 | 8 | |
--bj-spacing-3v | 0,75 | 12 | |
--bj-spacing-4v | 1 | 16 | |
--bj-spacing-5v | 1,25 | 20 | |
--bj-spacing-6v | 1,5 | 24 | |
--bj-spacing-7v | 1,75 | 28 | |
--bj-spacing-8v | 2 | 32 | |
--bj-spacing-9v | 2,25 | 36 | |
--bj-spacing-10v | 2,5 | 40 | |
--bj-spacing-12v | 3 | 48 | |
--bj-spacing-14v | 3,5 | 56 | |
--bj-spacing-16v | 4 | 64 | |
--bj-spacing-20v | 5 | 80 | |
--bj-spacing-24v | 6 | 96 |
Classes utilitaires
Marges et paddings : bj-m-*, bj-p-*, avec variantes directionnelles t, r, b, l, x, y (t, r, b, l pour haut, droite, bas, gauche ; x et y pour les axes).
| Suffixe | Exemple marge | Exemple padding |
|---|---|---|
0 | bj-m-0 | bj-p-0 |
0v5 … 16v | bj-m-4v, bj-mt-2v | bj-p-6v, bj-px-4v |
| Centrage horizontal | bj-mx-auto | |
bj-p-2v
<div class="bj-m-4v bj-p-6v">…</div>
<div class="bj-mt-2v bj-mb-8v">…</div>