Utilitaires

Class utilitaires

Il s'agit de class utiles pour construire soi-même des composants sans avoir recours à la création de règles CSS spécifiques.

Les couleurs

Les couleurs de texte

.text-primary
.text-white
.text-default
.text-brand-2

Les couleurs de fond

Elles peuvent s'appliquer aussi bien à du texte qu'à des blocs.

.bg-primary
.bg-white
.bg-default
.bg-brand-2
.bg-gray-100

Les textes

Les alignements

Texte aligné à gauche. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint velit, delectus debitis vel exercitationem minus. Ducimus fugiat sit voluptatum hic harum rerum velit cumque, voluptatem, ea natus quas? Velit, rerum?

Texte centré. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quae quaerat similique, nihil beatae ducimus excepturi hic voluptatem illum quibusdam eius incidunt pariatur, nesciunt tenetur? Tempore accusamus ab amet quasi.

Les graisses

Book (400)

Medium (500)

Demi (600)

Bold (700)

Les transformations

Texte en capitale

Les faux titres

Le but de ces classes est de donner à une portion de texte une apparence de titre ou sous-titre, mais sans lui en conférer la valeur sémantique (c'est donc sans effet pour les lecteurs d'écran ou sur le référencement, par exemple).

Style h1

Style h2

Style h3

Style h4

Style h5

Style h6

Le séparateur

Les séparateurs horizontaux sont par défaut des éléments sémantiques, qui dès lors sont annoncés par les lecteurs d'écran.

  • Si vous utilisez un séparateur pour diviser sémantiquement votre contenu (changement de thématique par exemple), laissez-le tel quel.
  • Dans tous les autres cas (donc à but purement décoratif), ajoutez un aria-hidden="true" afin qu'il ne soit pas vocalisé.

Séparateur avec sémantique

Séparateur sans sémantique

Les bordures et radius

Un fond blanc a été ajouté dans les exemples pour une meilleure visibilité.

Pour supprimer le radius d'un angle :

Les ombres

Ces classes font appel à la propriété box-shadow.

Les espacements

Extrait de Bootstrap

Le nom des classes est élaboré selon le format {property}{sides}-{size} pour xs et {property}{sides}-{breakpoint}-{size} pour sm, md, lg, et xl.

Où property peut être :

  • soit m - pour les classes qui établissent le margin
  • soit p - pour les classes qui établissent le padding

Où sides peut être l'une de ces valeurs :

  • t - pour les classes qui fixent le margin-top ou padding-top
  • b - pour les classes qui fixent le margin-bottom ou padding-bottom
  • l - pour les classes qui fixent le margin-left ou padding-left
  • r - pour les classes qui fixent le margin-right ou padding-right
  • x - pour les classes qui fixent le aussi bien le *-left que le *-right
  • y - pour les classes qui fixent le aussi bien le *-top que le *-bottom
  • rien - ces classes fixent alors un margin ou un un padding sur les 4 côtés de l'élément.

Où size peut être l'une de ces valeurs :

  • 0 - pour les classes qui éliminent totalement le margin ou le padding en le fixant à 0
  • 1 - pour les classes qui fixent un margin ou un padding de 10px
  • 2 - pour les classes qui fixent un margin ou un padding de 20px
  • 3 - pour les classes qui fixent un margin ou un padding de 30px
  • 4 - pour les classes qui fixent un margin ou un padding de 40px
  • 5 - pour les classes qui fixent un margin ou un padding de 50px
  • 6 - pour les classes qui fixent un margin ou un padding de 60px
  • auto - pour les classes qui fixent le margin à auto

Les paddings

Voici des cas concrets d'utilisation des classes utilitaires de padding :

Padding 1
Padding 2
Padding 3
Padding 4
Padding 5
Padding 6
Padding vertical 1
Padding vertical 2
Padding vertical 3
Padding vertical 4
Padding vertical 5
Padding vertical 6
Padding top 1
Padding top 2
Padding top 3
Padding top 4
Padding top 5
Padding top 6
Padding bottom 1
Padding bottom 2
Padding bottom 3
Padding bottom 4
Padding bottom 5
Padding bottom 6
Padding horizontal 1
Padding horizontal 2
Padding horizontal 3
Padding horizontal 4
Padding horizontal 5
Padding horizontal 6
Padding left 1
Padding left 2
Padding left 3
Padding left 4
Padding left 5
Padding left 6
Padding right 1
Padding right 2
Padding right 3
Padding right 4
Padding right 5
Padding right 6

Les margins

Voici des cas concrets d'utilisation des classes utilitaires de margin :

Margin 1
Margin 2
Margin 3
Margin 4
Margin 5
Margin 6
Margin vertical 1
Margin vertical 2
Margin vertical 3
Margin vertical 4
Margin vertical 5
Margin vertical 6
Margin top 1
Margin top 2
Margin top 3
Margin top 4
Margin top 5
Margin top 6
Margin bottom 1
Margin bottom 2
Margin bottom 3
Margin bottom 4
Margin bottom 5
Margin bottom 6
Margin horizontal 1
Margin horizontal 2
Margin horizontal 3
Margin horizontal 4
Margin horizontal 5
Margin horizontal 6
Margin left 1
Margin left 2
Margin left 3
Margin left 4
Margin left 5
Margin left 6
Margin right 1
Margin right 2
Margin right 3
Margin right 4
Margin right 5
Margin right 6