Espacement - Spacing
Le DSFR propose un système de dimension d'espacement et de marge qui s’appuie sur les multiples de 8 (le système “8 point grid”).
Règles d’espacement
Ce système d’espacement permet de garantir une homogénéité, cohérence et consistance des interfaces conçues. Cela dans le but d'améliore l’UX et de faciliter la conception et le développement.
Nous utilisons des multiples de 8px pour définir les marges et padding, auxquels s’ajoutent les espacements de 4px, 12px et 20 px afin de gérer tous les cas de figure les plus courants.
Espacement horizontaux
Voici le détail pour les espacements horizontaux prévus :
Espacement verticaux
Voici le détail pour les espacements verticaux prévus :
Correspondances en Rem
Dans le code, les espacements sont exprimés en Rem. Voici la correspondance des pixels en Rem.
La nomenclature “v” indique un multiple de 4 et “w” un multiple de 8.
0,5v | 2 | 0.125 |
1v | 4 | 0,25 |
1,5v | 6 | 0.375 |
1w | 8 | 0,50 |
3v | 12 | 0,75 |
2w | 16 | 1 |
5v | 20 | 1.25 |
3w | 24 | 1,5 |
4w | 32 | 2 |
5w | 40 | 2,5 |
6w | 48 | 3 |
7w | 56 | 3,5 |
8w | 64 | 4 |
9w | 72 | 4,5 |
12w | 96 | 6 |
15w | 120 | 7,5 |
Titres et paragraphes
Les espacements sous les titres et les paragraphes de texte - margin-bottom - sont :
Titres (h1 - h6) | 3w / 24px / 1,5rem |
|
|
Titres alternatifs | 4w / 32 px / 2rem |
|
|
paragraphes de texte (xl - xs) | 3w / 24px / 1,5rem |
|
|
Voir le détail sur la documentation de la Typographie
Règles d’utilisation
Espacement
Chaque partie de l'interface utilisateur doit être intentionnellement conçue, y compris l'espace vide entre les éléments. Les espacements permettent de :
Créer des relations
Utilisez des espacements faibles entre plusieurs composants pour signaler qu’ils sont liés, ou font partie d’un même groupe (exemple : champs de formulaire) ;
Utilisez des espacements importants pour mettre en évidence un élément indépendant du reste de la page (exemple : call to action).
Créer des hiérarchies
Augmentez les espacements autour d’un composant clé de votre page permet d’améliorer sa visibilité.
Classes CSS
Des classes utilitaires sont présentes au sein du DSFR afin de mettre en place ces espacements de manière simplifiée. Il est de ce fait possible par exemple, d’ajouter un espacement en bas d’un bloc de 40 pixels par exemple, en utilisant la classe .fr-mb-5w.
Attention pour les valeur avec une virgule, cette dernière est remplacée par un tiret dans le nom des classes. Exemples:
margin-top de 0,5v = .fr-mt-0-5v
margin-top de 1,5v = fr-mt-1-5v
Ces classes existent pour les propriétés de padding et de margin, pour les directions top, right, bottom et left.
Propriété de padding et margin
Margin | m | fr-m-1w correspond a une margin de 1w sur tous les cotés |
Padding | p | fr-p-1w correspond a un padding de 1w sur tous les cotés |
Propriété de direction : top, bottom, right, left
Top | t | fr-mt-1w correspond a une margin top de 1w |
Bottom | b | fr-mb-1w correspond a une margin bottom de 1w |
Left | l | fr-ml-1w correspond a une margin left de 1w |
Right | r | fr-mr-1w correspond a une margin right de 1w |
Top + bottom | y | fr-my-1w correspond a une margin top et bottom de 1w |
Left+right | x | fr-mx-1w correspond a une margin left et right de 1w |
Top + Bottom + Left + Right |
| fr-m-1w correspond a une margin de tous les coté de 1w |
Propriété de point de rupture : md
md | md | fr-mt-md-1w correspond a une margin top de 1w à partir du point de rupture md. |
Valeurs complémentaires
n1v | négatif | fr-m-n1w correspond a une margin négative de tous les cotés de 1w. |
0 |
| fr-m-0 correspond à une marge à 0 de tous les cotés. |
auto |
| fr-m-auto correspond à une marge auto de tous les cotés. |
Besoin d’aide ?
L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :
la communauté slack pour poser vos questions, et échanger avec d’autres utilisateurs.
Vous êtes agent de l’État et souhaitez accéder au slack ? Rejoignez la communauté dès maintenant !le centre de support pour envoyer vos demandes de correctifs et d'évolution.