Documentation des classes utilitaires
Accessibilité (_utils-accessibility.scss)
.visually-hidden: Rend un élément invisible mais toujours accessible aux dispositifs de lecture d'écran (existe en placeholder selector%visually-hidden)..visually-hidden-focusable: Rend un élément invisible mais toujours accessible aux dispositifs de lecture d'écran ou si l'utilisateur navigue au clavier..hidden: Rend un élément complètement invisible (existe aussi en attribut[hidden]). Attention, ledisplayest valué ànone !important..disabled: Empêche l'interaction d'un élément du DOM avec l'utilisateur (existe aussi avec l'attribut[disabled], standard pour les champs de formulaire)..u-dom-invisible: Utilise le modecontentspour ledisplayde l'élément.u-pointer-events-none: Empêche l'interaction avec la souris (ou en tactile) d'un élément du DOM avec l'utilisateur, sans changement d'apparence.
Couleur (_utils-color.scss)
.u-content-[palette]-[variant]: Classe permettant de changer la couleur du texte, basée sur la variante de luminosité (variant) d'une palette donnée (palette). Exemples :.u-content-success-30,.u-content-color1-100,.u-content-error-base..u-fill-[palette]-[variant]: Classe permettant de changer la couleur d'arrière-plan basée sur la variante de luminosité (variant) d'une palette donnée (palette). Exemples :.u-content-success-30,.u-content-color1-100,.u-content-error-base.
NOTE : les palettes disponibles sont : color1, color2, color3, neutral, success, error. Les variantes de luminosité disponibles sont les valeurs base, 10, 20, 30 … 100.
NOTE 2 : les classes .u-content-black, .u-fill-black, .u-content-white, .u-fill-white sont également disponibles.
Modes de couleurs (_utils-color-scheme.scss)
.u-scheme-normal: Mode d'affichage par défaut.u-scheme-light: Mode d'affichage en thème clair.u-scheme-dark: Mode d'affiche en thème sombre.u-scheme-light-dark: Indique une préférence pour le mode d'affichage clair.u-scheme-only-light: Force le mode d'affichage en thème clair.u-scheme-only-dark: Force le mode d'affichage en thème sombre
NOTE : Plus d'informations à propos de la propriété color-scheme.
Affichage et masquage (_utils-display.scss)
.hide: Cache un élément du DOM.hide°...: Cache un élément du DOM au-delà du point de rupture indiqué à la place des...(peut êtrexs,sm,md,lg,xl,xxl)..show°...: Affiche un élément du DOM au-delà du point de rupture indiqué à la place des...(peut êtrexs,sm,md,lg,xl,xxl), l'élément est masqué en-deçà.
Flottement (_utils-float.scss)
.u-float-left: Rend un élément flottant à gauche.u-float-right: Rend un élément flottant à droite.u-float-clear: Annule l'effet de déclage produit par les éléments flottants précédant l'élément.u-float-clear-after: Annule l'effet de décalage produit par les éléments flottants à l'intérieur d'un élément (utilise le pseudo-élément::after)
Icônes (_utils-icon-box.scss)
.u-icon-box: Permet la prise en charge de l'affichage d'une icône. Cette classe est à placer sur un conteneur (voir exemple ci-après)..u-icon-box--xs: Taille xs pour l'icône (16px).u-icon-box--sm: Taille sm pour l'icône (24px).u-icon-box--md: Taille md pour l'icône (32px).u-icon-box--lg: Taille lg pour l'icône (48px).u-icon-box--xl: Taille xl pour l'icône (64px).u-icon-box--block: Utilise l'affichage enblockplutôt qu'eninline.u-icon-box--primary: Affiche l'icône en couleur primaire.u-icon-box--secondary: Affiche l'icône en couleur secondaire
Exemple :
<div class="u-icon-box u-icon-box--md">
<svg>...</svg>
</div>
Listes (_utils-lists.scss)
.u-list-naked: Indique qu'une liste ne doit avoir ni marges, ni puces. (existe en placeholder selector%list-reset)..u-list-gaps-xxs: Espacement de taille xxs entre les items (4px).u-list-gaps-xs: Espacement de taille xs entre les items (8px).u-list-gaps-sm: Espacement de taille sm entre les items (16px).u-list-gaps-md: Espacement de taille md entre les items (24px).u-list-gaps-lg: Espacement de taille lg entre les items (32px).u-list-gaps-xl: Espacement de taille xl entre les items (48px)
Médias (_utils-media.scss)
.u-media-center: Appliquée sur un élément contenant une image en enfant direct, cette classe permet de le centrer horizontalement et verticalement à l'intérieur de l'élément..u-media-cover: Assure que le média est centré et vient remplir l'affichage de la zone qu'il occupe, sans laisser de vide autour..u-media-contain: Assure que le média est bien affiché dans son intégralité dans la zone qu'il occupe, tout en le centrant dans cette zone..u-media-blur-fill: Appliquée sur un élément contenant une image, cette classe permet de remplir l'arrière-plan du conteneur avec la même image floue et assombrie. Attention, l'image doit être renseignée à la propriété--srcen utilisant la fonction CSSurl()sur l'élément. Exemple ci-après.
<div class="u-media-center u-media-blur-fill" style="--src: url(...)">
<img src="..." alt="">
</div>
Listes pour popover (_utils.pop-list.scss)
.u-pop-list__content: Permet l'affichage d'une zone dédié à un contenu quelconque dans une popover avec une liste.
NOTE : Cette classe ne respecte pas scrupuleusement la nomenclature BEM. Elle sera renommée prochainement.
Popover (_utils-popover.scss)
.u-popover: Encadre l'affichage d'un popover..u-popover__content: Encadre l'affichage du contenu d'un popover..u-popover__content--end: Aligne le popover avec la fin du bouton qui l'a déclenché plutôt que le début..u-popover__content--no-padding: Permet de retirer le padding du contenu d'un popover.
Ratio (_utils-ratio.scss)
.u-ratio-16-9: Ratio d'affichage 16/9.u-ratio-4-3: Ratio d'affichage 4/3.u-ratio-1-1: Ratio d'affichage 1/1.u-ratio-9-16: Ratio d'affichage 9/16
Dimensions des coins (_utils-rounded.scss)
.u-rounded-none: Ne pas styliser les coins.u-rounded-2xs: Taille équivalente à 2px.u-rounded-xs: Taille équivalente à 4px.u-rounded-sm: Taille équivalente à 6px.u-rounded-md: Taille équivalente à 8px.u-rounded-lg: Taille équivalente à 10px.u-rounded-xl: Taille équivalente à 12px.u-rounded-2xl: Taille équivalente à 16px.u-rounded-infinite: Arrondi infini (non déformé)
Auto-alignement (_utils-self-align.scss)
.u-align-self-start: Alignement de l'élément au début.u-align-self-center: Alignement de l'élément au centre.u-align-self-end: Alignement de l'élément à la fin.u-align-self-stretch: Étire l'élément sur tout l'espace
Dimensions (_utils-size.scss)
.u-size-block-100: Occuper tout l'espace dans le sensblock(hauteur).u-size-inline-100: Occuper tout l'espace dans le sensinline(largeur).u-size-inline-sm: Applique une largeur maximale équivalente à 320px à ne pas dépasser.u-size-inline-md: Applique une largeur maximale équivalente à 696px à ne pas dépasser.u-size-inline-lg: Applique une largeur maximale équivalente à 1296px à ne pas dépasser.u-size-inline-xl: Applique une largeur maximale équivalente à 1408px à ne pas dépasser.u-height-{1,2,3,4,5,6,7,8,9,10,11,12,14,16,18,20,24,28,32,36,40,44,48,56,60,64,72,80,96,120,130,160}: Applique une hauteur correspondant à la valeur fois 4rem..u-max-height-{1,2,3,4,5,6,7,8,9,10,11,12,14,16,18,20,24,28,32,36,40,44,48,56,60,64,72,80,96,120,130,160}: Applique une hauteur maximale correspondant à la valeur fois 4rem..u-width-{1,2,3,4,5,6,7,8,9,10,11,12,14,16,18,20,24,28,32,36,40,44,48,56,60,64,72,80,96,120,130,160}: Applique une largeur correspondant à la valeur fois 4rem..u-max-width-{1,2,3,4,5,6,7,8,9,10,11,12,14,16,18,20,24,28,32,36,40,44,48,56,60,64,72,80,96,120,130,160}: Applique une largeur maximale correspondant à la valeur fois 4rem.
Espacements (_utils-spacer.scss)
Comprendre la construction des classes utilitaires d'espacement
Les classes utilitaires d'espacement possèdent un nommage particulier qu'il convient d'expliquer pour savoir comment les utiliser. Elles répondent toutes au motif suivant :
.u-<propriété>-<taille>
La propriété peut être l'une des suivantes :
| Code | Propriété CSS équivalente |
|---|---|
mbs |
margin-block-start |
mbe |
margin-block-end |
mis |
margin-inline-start |
mie |
margin-inline-end |
mb |
margin-block |
mi |
margin-inline |
m |
margin |
pbs |
padding-block-start |
pbe |
padding-block-end |
pis |
padding-inline-start |
pie |
padding-inline-end |
pb |
padding-block |
pi |
padding-inline |
p |
padding |
cg |
column-gap |
rg |
row-gap |
g |
gap |
NOTE : les codes des propriétés correspondent aux initiales de la propriété CSS correspondante.
La taille peut être l'une des suivantes :
| Code | Taille équivalente |
|---|---|
0 |
0px |
xxs |
4px |
xs |
8px |
sm |
16px |
md |
24px |
lg |
32px |
xl |
48px |
xxl |
64px |
auto |
Espacement auto* |
* L'espacement auto n'est pas utilisable sur les propriétés de padding et de gap.
NOTE : les tailles indiquées sont les équivalents en pixels, l'unité utilisée en réalité est le rem.
EXEMPLES : u-pbs-xxl = padding-block-start: 64px ; u-rg-sm = row-gap: 16px ; u-m-auto = margin: auto
Spacers autonomes
Les spacers sont des éléments généralements vides qui permettent d'ajouter de l'espace entre 2 autres éléments.
.u-vspacer-...: Spacer entre 2 éléments dans le sens vertical.u-hspacer-...: Spacer entre 2 éléments dans le sens horizontal
NOTE : les ... sont à remplacer par les codes de tailles décrits ci-dessus.
Autres classes utilitaires
.u-margin-trim: Supprimer la marge haute du premier enfant et la marge basse du dernier élément enfant, cela afin de conserver des marges intérieures cohérentes à l'intérieur du conteneur qui utilise cette classe..u-no-margin: Supprime les marges
Typographie (_utils-typography.scss)
.text-size--xs: Taille de typographie xs (12px).text-size--sm: Taille de typographie sm (14px).text-size--md: Taille de typographie md (16px).text-size--lg: Taille de typographie lg (18px).text-size--xl: Taille de typographie xl (20px).text-size--2xl: Taille de typographie 2xl (22px).text-size--3xl: Taille de typographie 3xl (24px).text-size--4xl: Taille de typographie 4xl (32px).text-size--5xl: Taille de typographie 5xl (40px).text-weight--100: Épaisseur de typographie 100 (thin).text-weight--200: Épaisseur de typographie 200 (extralight).text-weight--300: Épaisseur de typographie 300 (light).text-weight--400: Épaisseur de typographie 400 (regular).text-weight--500: Épaisseur de typographie 500 (medium).text-weight--600: Épaisseur de typographie 600 (semibold).text-weight--700: Épaisseur de typographie 700 (bold).text-weight--800: Épaisseur de typographie 800 (extrabold).text-weight--900: Épaisseur de typographie 900 (black).u-text-uppercase: TRANSFORME LE TEXTE EN MAJUSCULES.u-text-lowercase: transforme le texte en minuscules.u-text-capitalize: Capitalise Chaque Première Lettre Des Mots.u-text-start: Aligne les lignes de texte avec le début du conteneur.u-text-center: Aligne les lignes de texte au centre du conteneur.u-text-end: Aligne les lignes de texte avec la fin du conteneur.u-text-ellipsis: Place le texte sur une seule ligne et tronque la fin avec des…si la ligne de texte est plus grande que le conteneur
Alignement vertical (_utils-vertical-align.scss)
.u-valign-top: Alignement vertical du texte en haut.u-valign-middle: Alignement vertical du texte au milieu.u-valign-bottom: Alignement vertical du texte en bas.u-valign-baseline: Alignement vertical sur la ligne de base du texte.u-valign-text-top: Alignement vertical du texte sur la ligne du haut des caractères.u-valign-text-bottom: Alignement vertical du texte sur la ligne du bas des caractères.u-valign-sub: Alignement vertical du texte sur la ligne d'exposant.u-valign-super: Alignement vertical du texte sur la ligne d'indice