Créer des relations
Un petit écart (1 à 3) signale que des éléments vont ensemble : un libellé et son champ, les boutons d'un groupe. Un grand écart (6 à 9) isole un élément du reste de la page.
Fondamentaux
Espacements
Marges, paddings et écarts suivent une seule échelle, la cadence : neuf pas, de 4 à 96 pixels. Les espacements s'appliquent avec des classes utilitaires dans le HTML, ou avec les variables --j6n-space-* dans votre CSS.
Échelle de cadence — --j6n-space-*
Le chiffre du token est aussi celui des classes utilitaires : --j6n-space-4 correspond à .j6n-mt-4, .j6n-p-4, .j6n-gap-4… La valeur 0 annule l'espacement et ne correspond à aucun token.
| Token | px | rem | Aperçu | Suffixe | Usage typique |
|---|---|---|---|---|---|
--j6n-space-1 | 4 | 0.25 | -1 | valeur et son libellé, liens de navigation, onglets | |
--j6n-space-2 | 8 | 0.5 | -2 | icône et texte, petits écarts internes | |
--j6n-space-3 | 12 | 0.75 | -3 | éléments en ligne, marge sous les titres | |
--j6n-space-4 | 16 | 1 | -4 | blocs empilés, marge sous les paragraphes, padding des alertes | |
--j6n-space-5 | 24 | 1.5 | -5 | padding des cartes et modales, marges de la page | |
--j6n-space-6 | 32 | 2 | -6 | gap du header, grandes zones | |
--j6n-space-7 | 48 | 3 | -7 | séparation entre sections | |
--j6n-space-8 | 64 | 4 | -8 | marge au-dessus du pied de page | |
--j6n-space-9 | 96 | 6 | -9 | très grandes respirations |
Titres et paragraphes
Le thème pose déjà une marge basse sur le texte. Inutile de l'ajouter ; pour la supprimer sur un dernier élément, utilisez .j6n-mb-0.
| Élément | Marge basse | px |
|---|---|---|
Titres h1 à h4 | --j6n-space-3 | 12 |
Paragraphes p (68 caractères de large au maximum) | --j6n-space-4 | 16 |
Séparateur hr (haut et bas) | --j6n-space-7 | 48 |
Règles d'utilisation
Créer une hiérarchie
Plus d'espace autour d'un élément le met en avant. Gardez l'écart entre sections (7) plus grand que l'écart à l'intérieur d'une section (4 à 5).
Rester sur l'échelle
Pas de valeur en pixels écrite à la main : une classe utilitaire ou un token --j6n-space-*. Si aucun pas ne convient, prenez le plus proche.
Classes utilitaires — .j6n-m-* .j6n-p-*
Une classe se compose de la propriété, de la direction (facultative) et de la valeur : .j6n- + m + t + -4 donne .j6n-mt-4, une marge haute de 16px.
Propriété
| Propriété | Préfixe | Exemple |
|---|---|---|
Marge externe (margin) | m | .j6n-m-2 : marge de 8px sur les quatre côtés |
Marge interne (padding) | p | .j6n-p-2 : padding de 8px sur les quatre côtés |
Écart entre enfants (gap) | gap | .j6n-gap-2 : 8px entre les enfants d'un flex ou d'une grille |
Direction
| Direction | Lettre | Exemple |
|---|---|---|
| Les quatre côtés | (aucune) | .j6n-m-1, .j6n-p-1 |
| Haut | t | .j6n-mt-1, .j6n-pt-1 |
| Bas | b | .j6n-mb-1, .j6n-pb-1 |
| Gauche | l | .j6n-ml-1, .j6n-pl-1 |
| Droite | r | .j6n-mr-1, .j6n-pr-1 |
| Gauche + droite | x | .j6n-mx-1, .j6n-px-1 |
| Haut + bas | y | .j6n-my-1, .j6n-py-1 |
Valeur
| Valeur | Suffixe | Exemple |
|---|---|---|
| Un pas de l'échelle | -1 à -9 | .j6n-pb-5 : padding bas de 24px |
| Nulle | -0 | .j6n-mt-0 : supprime la marge haute (d'un titre, d'un composant) |
| Automatique (marges uniquement) | -auto | .j6n-ml-auto : pousse l'élément à droite dans un flex ; .j6n-mx-auto : centre un bloc |
Les utilitaires sont déclarés en fin de theme.css : ils remplacent l'espacement par défaut d'un composant, par exemple <footer class="j6n-footer j6n-mt-0">.
Marge et padding
La marge (m) éloigne l'élément de ses voisins, à l'extérieur de sa bordure. Le padding (p) éloigne le contenu de la bordure, à l'intérieur. Légende : marge, padding, contenu.
j6n-m-5
j6n-p-5
j6n-m-5 j6n-p-5
Directions
La même valeur (-5, 24px) appliquée à chaque direction.
j6n-mt-5
j6n-mb-5
j6n-ml-5
j6n-mr-5
j6n-mx-5
j6n-my-5
j6n-pt-5
j6n-pl-5
j6n-py-5
Écart entre éléments — .j6n-gap-*
Dans un conteneur flex ou grille, gap espace les enfants sans marge sur chacun d'eux.
gap-14pxentrechaque
gap-416pxentrechaque
gap-748pxentrechaque
Pousser et centrer — .j6n-ml-auto .j6n-mx-auto
j6n-mx-auto
Espacements des classes de mise en page
Ces classes portent leur propre écart. Pour le changer à un endroit, ajoutez un utilitaire : <div class="j6n-stack j6n-gap-2">.
| Classe | Rôle | Espacement par défaut |
|---|---|---|
.j6n-container | centre le contenu (1120px maximum) | marges gauche et droite --j6n-space-5 (24px) |
.j6n-stack | empile verticalement | gap --j6n-space-4 (16px) |
.j6n-row | aligne horizontalement, passe à la ligne | gap --j6n-space-3 (12px) |
.j6n-grid | grille de colonnes de 260px minimum | gap --j6n-space-5 (24px) |
.j6n-layout | sommaire latéral + contenu | gap --j6n-space-7 (48px) |
Dans votre CSS
Pour un composant à vous, utilisez directement les variables plutôt qu'une suite de classes.
.ma-carte {
padding: var(--j6n-space-5);
margin-bottom: var(--j6n-space-4);
display: flex;
gap: var(--j6n-space-3);
}