Conseils
L’utilisation appropriée de l’espacement facilite le traitement des informations et l’interaction avec l’interface pour les utilisateurs. Le système de conception applique une grille de 8 px à toutes les valeurs d’espacement telles que les marges, les remplissages et les écarts. En plus des styles par défaut et des styles hérités, le système de conception offre également un ensemble complet de classes utilitaires d’espacement pour faciliter l’ajustement de l’apparence d’un élément. Ces classes permettent d’attribuer des marges ou des remplissages réactifs aux côtés d’un élément.
Espacement
Les valeurs d’espacement normalisées nous aident à maintenir une certaine uniformité entre les différents composants et les différentes mises en page.
| Taille | Valeur | Exemple |
|---|---|---|
| none | 0 | |
| xxs | 0.25rem (4px) | |
| xs | 0.5rem (8px) | |
| sm | 1rem (16px) | |
| md | 1.5rem (24px) | |
| lg | 2rem (32px) | |
| xl | 3rem (48px) | |
| xxl | 4rem (64px) |
Utilitaires d’espacement
Les utilitaires d’espacement s’appliquent à tous les points de rupture. Ces classes suivent le format {propriété}-{taille} lorsqu’elles sont appliquées à l’ensemble de l’élément, ou {propriété}-{côtés}-{taille} lorsqu’elles sont appliquées à un sous-ensemble des côtés de l’élément.
Les propriétés peuvent correspondre à l’un attributs suivants :
- margin: pour les classes qui définissent la marge.
- padding: pour les classes qui définissent le remplissage.
Les côtés peuvent correspondre à l’un des attributs suivants :
- top: pour les classes qui définissent la marge supérieure ou le remplissage supérieur.
- right: pour les classes qui définissent la marge droite ou le remplissage à droite.
- bottom: pour les classes qui définissent la marge inférieure ou le remplissage inférieur.
- left: pour les classes qui définissent la marge gauche ou le remplissage à gauche.
Les taille peut correspondre à l’un des attributs suivants :
- none: pour les classes qui éliminent la marge ou le remplissage en le définissant à 0.
- xxs: pour les classes qui définissent la marge ou le remplissage à 0,25 rem (4 px).
- xs: pour les classes qui définissent la marge ou le remplissage à 0,5 rem (8 px).
- sm: pour les classes qui définissent la marge ou le remplissage à 1 rem (16 px).
- md: pour les classes qui définissent la marge ou le remplissage à 1,5 rem (24 px).
- lg: pour les classes qui définissent la marge ou le remplissage à 2 rem (32 px).
- xl: pour les classes qui définissent la marge ou le remplissage à 3 rem (48 px).
- xxl: pour les classes qui définissent la marge ou le remplissage à 4 rem (64 px).
Appliquer l’espacement à tous les côtés
| Taille | Valeur | Classe (marge) | Classe (remplissage) |
|---|---|---|---|
| none | 0 | .margin-none |
.padding-none |
| xxs | 0.25rem (4px) | .margin-xxs |
.padding-xxs |
| xs | 0.5rem (8px) | .margin-xs |
.padding-xs |
| sm | 1rem (16px) | .margin-sm |
.padding-sm |
| md | 1.5rem (24px) | .margin-md |
.padding-md |
| lg | 2rem (32px) | .margin-lg |
.padding-lg |
| xl | 3rem (48px) | .margin-xl |
.padding-xl |
| xxl | 4rem (64px) | .margin-xxl |
.padding-xxl |
Appliquer l’espacement à des côtés précis
| Taille | Valeur | Classe (marge) | Classe (remplissage) |
|---|---|---|---|
| none | 0 | .margin-{côtés}-none |
.padding-{côtés}-none |
| xxs | 0.25rem (4px) | .margin-{côtés}-xxs |
.padding-{côtés}-xxs |
| xs | 0.5rem (8px) | .margin-{côtés}-xs |
.padding-{côtés}-xs |
| sm | 1rem (16px) | .margin-{côtés}-sm |
.padding-{côtés}-sm |
| md | 1.5rem (24px) | .margin-{côtés}-md |
.padding-{côtés}-md |
| lg | 2rem (32px) | .margin-{côtés}-lg |
.padding-{côtés}-lg |
| xl | 3rem (48px) | .margin-{côtés}-xl |
.padding-{côtés}-xl |
| xxl | 4rem (64px) | .margin-{côtés}-xxl |
.padding-{côtés}-xxl |
Exemples
HTML
<!-- Application d’une classe margin -->
<div class="margin-md">Contenu avec une marge moyenne </div>
<!-- Exemple 2 : Application d’une classe padding-bottom -->
<div class="padding-bottom-lg">Contenu avec un grand remplissage inférieur</div>
<!-- Exemple 3 : Application d’une classe margin-left -->
<div class="margin-left-sm">Contenu avec une petite marge à gauche</div>
<!-- Exemple 4 : Suppression d’une classe padding-right -->
<div class="padding-right-none">Contenu sans remplissage à droite</div>
Utilitaires d’espacement avec points de rupture
Les utilitaires d’espacement qui s’appliquent à tous les points de rupture, de « xs » à « xl », n’incluent pas d’abréviation de point de rupture. Ces classes sont appliquées à partir de min-width : 0 et plus et ne sont pas liées aux requêtes média. Notez cependant que la convention d’appellation des autres points de rupture inclut une telle abréviation.
Les classes comportant des points de rupture réactifs suivent le format {propriété}-{point de rupture}-{taille} lorsqu’elles sont appliquées à l’élément entier, ou {propriété}-{côtés}-{point de rupture}-{taille} lorsqu’elles sont appliquées à un sous-ensemble de côtés d’un élément.
Le point de rupture peut correspondre à l’un des attributs suivants :
- xs : pour les écrans de très petite taille (0 px et plus).
- sm : pour les écrans de petite taille (576 px et plus).
- md : pour les écrans de taille moyenne (768 px et plus).
- lg : pour les écrans de grande taille (992 px et plus).
- xl : pour les écrans de très grande taille (1200 px et plus).
Appliquer l’espacement à tous les côtés
| Point de rupture | Largeur minimale | Classe (marge) | Classe (remplissage) |
|---|---|---|---|
| xs | 0px | .margin-xs-{taille} |
.padding-xs-{taille} |
| sm | 576px | .margin-sm-{taille} |
.padding-sm-{taille} |
| md | 768px | .margin-md-{taille} |
.padding-md-{taille} |
| lg | 992px | .margin-lg-{taille} |
.padding-lg-{taille} |
| xl | 1200px | .margin-xl-{taille} |
.padding-xl-{taille} |
Appliquer l’espacement à des côtés précis
| Point de rupture | Largeur minimale | Classe (marge) | Classe (remplissage) |
|---|---|---|---|
| xs | 0px | .margin-{côtés}-xs-{taille} |
.padding-{côtés}-xs-{taille} |
| sm | 576px | .margin-{côtés}-sm-{taille} |
.padding-{côtés}-sm-{taille} |
| md | 768px | .margin-{côtés}-md-{taille} |
.padding-{côtés}-md-{taille} |
| lg | 992px | .margin-{côtés}-lg-{taille} |
.padding-{côtés}-lg-{taille} |
| xl | 1200px | .margin-{côtés}-xl-{taille} |
.padding-{côtés}-xl-{taille} |
Exemples
HTML
<!-- Exemple 1 : Application d’un remplissage pour les écrans de grande taille et plus -->
<div class="padding-lg-xl">Contenu avec un grand remplissage sur les écrans de grande taille et plus </div>
<!-- Exemple 2 : Application de classes margin-bottom et padding-left pour les écrans de taille moyenne et plus -->
<div class="margin-bottom-sm-md padding-left-sm-md">Contenu avec une petite marge inférieure et un remplissage à gauche sur les écrans de taille moyenne et plus</div>
Jetons d’espacement
Vous pouvez intégrer des jetons d'espacement aux fichiers CSS ou SASS supplémentaires que vous créez afin d’assurer la cohérence avec le système de conception.