🇫🇷 Angular + Bootstrap 5: Getting started

Les bases pour survivre avec bootstrap & Angular

Sur un projet de grande envergure, avec une armée de développeurs de tous horizons, réussir à maintenir une base de code homogène n’est pas chose aisée ! Encore plus quand on parle d’interface graphique avec du CSS. C'est donc pour cette raison que Bootstrap arrive afin d'organiser toute cette anarchie !

Au fil de cet article, nous verrons quelles sont les règles de base pour organiser son équipe au mieux avec cet outil !

Comment personnaliser le thème de Bootstrap dans votre application Angular (SCSS)

Étape 1 : Comprendre comment Bootstrap est organisé

Lors de l’installation de Bootstrap, il va charger tous ces fichiers SCSS au chemin suivant :
your-project/node_modules/bootstrap/scss/**/*.scss

C’est donc à cet endroit que l’on peut retrouver l’ensemble du style fournit par Bootstrap. On peut donc lire comment est construit l’ensemble des classes de Bootstrap. En voici un extrait.

Le premier screen présente le fichier SCSS regroupant l’entièreté de ce que propose Bootstrap. On y apprend plein d’informations sur leur organisation. Et oui, il sépare les variables “classiques”, des variables “dark” (quand je vous dis que lire la doc c’est intéressant !).

Le deuxième quant à lui, présente le contenu des différentes variables que l’on peut personnaliser. C'est à cet endroit là que Bootstrap va appliquer son thème de couleurs par exemple !

On y comprend un concept vital sur Bootstrap, il utilise des variables par défaut ! Cela implique qu’il est possible de les surcharger en SCSS. Attention, ceci ne fonctionne qu’en créant une variable avec le MÊME nom ! Oui cela parait assez logique, mais j’anticipe les questions. Alors on oublie l’originalité du $my-primary ou encore $amazing-success. On ne créer pas de nom personnalisés et on peut continuer notre aventure.

Étape 2 : Personnaliser son thème Bootstrap

Maintenant que l’on connait un peu mieux Bootstrap, essayons de créer notre propre thème !

Pour notre exemple, nous allons surcharger les couleurs primaires, secondaires et de success de Bootstrap ainsi que la taille de la police.

Une fois cela fait, on pourra utiliser l’ensemble des classes définies par Bootstrap avec notre thème.

Surcharger les composants Bootstrap

Pour suivre le travail de ton designer, il se peut que tu veuilles modifier le style de tous les boutons de ton application. Pour cela, tu vas devoir surcharger la classe btn de Bootstrap. C’est elle que tu appliques sur tous les boutons de ton application (enfin si personne n’oublie de la mettre dans ton équipe 😜).

Pour surcharger cette classe rien de plus simple, après l’import de Bootstrap, ajoute le sélecteur de la classe btn et voila ! Tu peux y écrire le style à ajouter.

Dans notre exemple, on souhaite ajouter une bordure à l’extérieur du bouton en gris foncé. Cela donne le code suivant :

Maintenant que tu sais surcharger, un des designers t’a demandé de modifier la bordure de tous les boutons principaux pour qu’elle soit de 2px avec des petits tirets.

Pas de problème, c’est dans tes cordes alors tu t’élances et produis ça :

Pro tips : Depuis la version 5.2, Bootstrap a mis en place de nombreuses variables CSS afin de personnaliser ces composants. Cela permet à Bootstrap d’utiliser la valeur de la variable plus facilement et que celle-ci soit modifiable non plus seulement à la compilation du SCSS mais aussi au runtime. On verra un résultat de ces variables plus tard lors de la personnalisation de la couleur des boutons (et oui, c’est du teasing ça 😊).

It’s a trap!

Bootstrap est de toute bonté et va automatiquement trouver pour nous la couleur la plus adaptée pour notre thème. Il calcule automatiquement la couleur du texte en fonction de la couleur de fond. N’est ce pas sublime d’avoir une tache noire sur notre magnifique rose saumon ?

Spoiler, les designers ne le pensent pas ! Donc va falloir vite changer ça et lui mettre du blanc pour la couleur du texte.

Ce que Bootstrap génère :

Ce que les designers veulent :

Le contenu de l’icône est noir. Cela est dû au fait que Bootstrap va automatiquement calculer la couleur avec le meilleur contraste en fonction de la couleur de fond.

Notre problème c’est qu’il n’y a aucune variable SCSS pour décrire la couleur du texte d’un bouton. Il va donc falloir appliquer un sélecteur pour notre bouton primaire pour surcharger ce dernier.

Ici, Bootstrap a mis en place des variables CSS pour personnaliser la couleur de notre bouton, alors on l’utilise !

Maintenant, tous les éléments ayant les classes btn ainsi que btn-primary auront leur couleur de texte blanche pour les différents états de ce dernier. Problème réglé, il faut simplement espérer ne pas avoir à faire ceci trop souvent…

3 Limites à Bootstrap

Devoir surcharger un bon nombre de règles de Bootstrap

Comme on a pu le voir avec les couleurs du texte, Bootstrap gère certaines parties du CSS en calculant automatiquement certaines valeurs. Si vous avez un thème complet, l’utilisation de Bootstrap peut vous compliquer la vie avec de nombreuses règles à surcharger !

Le manque de certaines classes

Bootstrap c’est bien, suivre leurs conventions c’est mieux. Mais quand il n’y a pas la propriété CSS que l’on souhaite, on se retrouve à devoir nous-même écrire une classe CSS d’utilities et ça c’est une des parties ennuyantes de Bootstrap.

Par exemple, voici une liste non exhaustive des propriétés m’ayant manqué récemment :

• Style des bordures (dashed, dotted, …)
• Plus de niveaux de zIndex
• Type du cursor (pointer, move, …)

Pas de nettoyage du CSS inutile

Bootstrap n’inclue aucun système de suppression des classes non utilisées dans l’application. Cela implique que notre application va devoir charger toutes les classes de Bootstrap. Et ça, c’est toujours une perte de temps que ce soit sur le réseau ou pour le navigateur.

Image non contractuelle

Conclusion

Avant d’utiliser Bootstrap, j’avais un gros à priori sur les librairies qui permettent de styliser notre application. J’avais l’impression que mon application allait ressembler à toutes les autres et que je n’aurais pas assez de contrôle sur mes composants. Ce n’est finalement pas entièrement le cas, dans 80% du temps, Bootstrap me simplifie la vie. Je peux personnaliser le thème et surcharger les règles des composants génériques afin de créer mon design system.

Là où j’hésite encore sur l’utilité de Bootstrap, c’est pour l’élaboration de mise en page et surtout lorsque je souhaite faire des grilles ! A ce moment là, je vous conseille de rester sur votre CSS standard, cela ne sera que plus simple.