Créez des sites web responsives avec Bootstrap 5

10 hours
Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Last updated on 5/23/23

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.