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.
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)