DEV Community

Gravisto
Gravisto

Posted on

đŸ‡«đŸ‡· 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.

Fichier bootstrap.scss

Fichier bootstrap variable.scss

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.

Fichier variable.scss surchargé

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

Une page customisé

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 :

composant button surchargé

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 :

button primary class

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!

gif star wars

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 :

logo maison noir sur fond saumon

Ce que les designers veulent :

logo maison blanc sur fond saumon

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.

Phrase avec des mots de différentes couleurs

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.

class btn-primary
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.

playmobile bootstrap qui ramasse des miettes
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.

Top comments (0)