Espacements - 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éliorer 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

Modélisation des espacements horizontaux

Espacement verticaux

modélisation des espacements verticaux

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.

Correspondance des espacements
Nom (token)
Espace en pixel
Espace en rem
1v 4 0,25
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 

éléments
Token / px / rem
Titres (h1 - h6) 3w / 24px / 1,5rem
Titres alternatifs 4w / 32 px / 2rem
paragraphes de texte (xl - xs) 3w / 24px / 1,5rem

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.

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
Valeur possible
Diminutif de la valeur  
Exemple
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
Valeur possible
Diminutif de la valeur  
Exemple
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
Valeur possible
Diminutif de la valeur  
Exemple
md md fr-mt-md-1w correspond a une margin top de 1w  à partir du point de rupture md.
  • Valeurs complémentaires
Valeur possible
Diminutif de la valeur  
Exemple
n1v négatif fr-m-n1w correspond a une margin négative de tous les cotés de 1w.
fr-mb-n1w correspond a une margin bottom négatif 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 ?

Besoin d'aide ? 

L'équipe du Système de Design de l'État 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'évolutions.