Créez des sites web responsives avec 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 :

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.