• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 23/05/2023

Créez vos propres classes utilitaires grâce à l’API de Bootstrap 5

Dans sa dernière mise à jour, Bootstrap 5 a ajouté une API en Sass permettant de générer des classes utilitaires en quelques lignes de code.

Le but de ce chapitre est de vous expliquer comment elle fonctionne et comment la mettre en pratique dans vos futurs projets.

Rendez-vous dans la documentation Bootstrap 5, dans la rubrique “Utility” puis “API”. On retrouve le code suivant :

$utilities: (
 "opacity": (
  property: opacity,
  values: (
   0: 0,
   25: .25,
   50: .5,
   75: .75,
   100: 1,
  )
 )
);

Qui a pour résultat :

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

Dans l’exemple ci-dessus, nous voyons la structure Sass de l’API.

Quand on voit cet exemple, on peut légitimement se demander à quoi elle sert, car il y a presque autant d’un côté que de l’autre !

Tout l'intérêt de cette API se dévoile quand on ajoute certaines options dans le code Sass (partie 1 de l’exemple ci-dessus).

Voici les options utilisables, dans une traduction du tableau de la documentation de Bootstrap 5 :

Option

Type

Description

property

Obligatoire

Nom de la propriété, il peut s'agir d'une chaîne ou d'un tableau de chaînes (par exemple, des marges ou des marges horizontales).

values

Obligatoire

Liste de valeurs, ou un tableau de valeurs si vous ne voulez pas que le nom de la classe soit le même que la valeur. Si   null  est utilisé comme clé de tableau, il n'est pas compilé.

class

Optionnel

Variable pour le nom de la classe si vous ne voulez pas qu'il soit le même que la propriété. Si vous ne fournissez pas la   class  clé et que la   property  clé est un tableau de chaînes de caractères, le nom de la classe sera le premier élément du   property  tableau.

state

Optionnel

Liste des variantes de pseudo-classe comme   :hover  ou   :focus  à générer pour l'utilitaire. Aucune valeur par défaut.

responsive

Optionnel

Booléen indiquant si des classes responsives doivent être générées.   false  par défaut.

rfs

Optionnel

Booléen pour activer le redimensionnement fluide. Jetez un œil à la page RFS pour savoir comment cela fonctionne.   false  par défaut.

print

Optionnel

Booléen indiquant si les classes d'impression doivent être générées.   false  par défaut.

rtl

Optionnel

Booléen indiquant si l'utilitaire doit être conservé en RTL.   true  par défaut.

Voici l’exemple d’une classe utilitaire générée par l’API de Bootstrap 5  avec l’option   responsive  égale à true  : 

$utilities: (
 "opacity": (
  property: opacity,
  responsive: true,
  values: (
   0: 0,
   25: .25,
   50: .5,
   75: .75,
   100: 1,
  )
 )
);

qui génère :

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
 .opacity-sm-0 { opacity: 0 !important; }
 .opacity-sm-25 { opacity: .25 !important; }
 .opacity-sm-50 { opacity: .5 !important; }
 .opacity-sm-75 { opacity: .75 !important; }
 .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
 .opacity-md-0 { opacity: 0 !important; }
 .opacity-md-25 { opacity: .25 !important; }
 .opacity-md-50 { opacity: .5 !important; }
 .opacity-md-75 { opacity: .75 !important; }
 .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
 .opacity-lg-0 { opacity: 0 !important; }
 .opacity-lg-25 { opacity: .25 !important; }
 .opacity-lg-50 { opacity: .5 !important; }
 .opacity-lg-75 { opacity: .75 !important; }
 .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
 .opacity-xl-0 { opacity: 0 !important; }
 .opacity-xl-25 { opacity: .25 !important; }
 .opacity-xl-50 { opacity: .5 !important; }
 .opacity-xl-75 { opacity: .75 !important; }
 .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
 .opacity-xxl-0 { opacity: 0 !important; }
 .opacity-xxl-25 { opacity: .25 !important; }
 .opacity-xxl-50 { opacity: .5 !important; }
 .opacity-xxl-75 { opacity: .75 !important; }
 .opacity-xxl-100 { opacity: 1 !important; }
}

Avec cet exemple, nous voyons plus concrètement la puissance de l’API utilitaire de Bootstrap 5, et le gain de temps qu'elle nous permet d’avoir sur notre développement.

En effet, elle nous permet de générer automatiquement 30 classes CSS liées aux “media queries” de chacun des breakpoints (points d’arrêt) de Bootstrap 5. C’est un gain de temps indéniable pour la création de vos propres classes utilitaires.

Implémentez l’API utilitaire dans votre projet

Pour utiliser l’API dans notre projet, nous allons créer une nouvelle page sous sass/_utilities_custom.scss, que nous allons importer juste après nos  sass/_variables_overrides.scss  et avant  bootstrap.scss  de notre fichier style.scss.

Tout en haut de ce nouveau fichier, il faut commencer par déclarer la variable  $utilities  à vide par défaut.  

Pour ce faire, il suffit d’écrire   $utilities: ()!default;.

Une fois la page créée, il nous faut utiliser la fonction  map-merge  de Sass pour ne pas remplacer les classes déjà existantes de Bootstrap 5. Voyons comment nous y prendre :

$utilities: map-merge(
 $utilities,
 (
  "cursor": (
   property: cursor,
   class: cursor,
   responsive: true,
   values: auto pointer grab,
  )
 )
);

Nous voyons que la structure est sensiblement la même, à la différence près que tout se passe dans la fonction map-merge.

Concrètement, nous disons à notre code de fusionner le contenu de la variable  $utilities  déjà existante (premier argument de la fonction map-merge), avec le reste du code que nous ajoutons (deuxième argument de la fonction map-merge).

Et bien sûr, pour que le CSS soit généré, il ne faut pas oublier de compiler notre Sass avec la commande (si elle n’est pas déjà en cours d'exécution) :

$ sass --watch scss:css

À vous de jouer !

Votre mission pour ce chapitre :

  • Générer les classes utilitaires  opacity  et  text-opacity  allant de  0  à  1  et allant de  0,1  en  0,1 .  Cette classe devra être responsive et utilisera la structure de classe suivante :  o-*  et  to-*.

  • Générer les classes utilitaires  z-index  allant de  -10  à  100  et allant de  10  en  10. Cette classe devra être responsive et utilisera la structure de classe suivante :  z-*.

Une fois que vous avez effectué ces modifications, suivez-moi dans le screencast ci-dessous pour comparer votre travail avec le mien !

En résumé

  • L’API en Sass de Bootstrap nous permet de créer nos propres classes utilitaires.

  • Cette API représente un gain de temps considérable, car avec quelques lignes de code nous pouvons générer automatiquement des classes CSS

Résumé du cours

Félicitations ! Vos compétences Bootstrap sont à présent suffisantes pour terminer le cours en beauté !

Vous possédez désormais les connaissances suivantes :

  • Évaluer les avantages et les inconvénients de Bootstrap dans vos projets.

  • Créer des grilles responsives dans Bootstrap.

  • Utiliser des composants de Bootstrap, tels que la barre de navigation, le carrousel, les cartes, etc.

  • Créer des formulaires à l'aide des classes de Bootstrap pour les entrées et les contrôles du formulaire.

  • Utiliser des classes utilitaires pour régler la mise en page et l'apparence de votre site web.

  • Créer vos propres thèmes et fonctionnalités personnalisés de Bootstrap.

  • Utiliser l’API utilitaire Sass de Bootstrap 5 pour générer vos propres classes utilitaires.

Dès que vous aurez terminé le dernier quiz, vous pourrez effectuer un projet plus important, tel que la création du front-end d'un site web plus complexe que celui que nous avons créé dans ce cours. Ou vous souhaiterez peut-être aborder de nouveaux aspects du développement web, tels qu'apprendre à protéger votre application des menaces pour la sécurité, améliorer vos compétences JavaScript ou utiliser vos compétences pour le back-end. 

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite