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.

Nom (token)

Espace en pixel

Espace en rem

Nom (token)

Espace en pixel

Espace en rem

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 :

éléments

Token / px / rem)

Espace en pixel

Es

éléments

Token / px / rem)

Espace en pixel

Es

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

Valeur possible

Diminutif de la valeur

Exemple

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

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

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

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 ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :