Dans le cadre de ma formation Access Code School, j’ai été amenée à réaliser l’intégration d’une maquette. Elle a été conçue par un graphiste professionnel et je l’ai récupérée sur le web au format PSD. Le challenge était d’utiliser le moins possible de CSS personnalisé et de toujours privilégier l’utilisation de classes de Bootstrap. Ainsi, j’ai dû longuement pratiquer la documentation officielle de Bootstrap, comprendre les mécanismes du framework et sa logique interne.
Je vais vous expliquer dans cet article le fonctionnement de la grille de Bootstrap, comment elle permet une importante économie en terme de développement et de temps par rapport à l’utilisation des flexbox et des media queries ?
Les VRAIS utilisent CSS !
Intégrer Bootstrap à vos développements
Je commence par charger la feuille de style et les scripts nécessaires au fonctionnement du framework. Je les trouve grâce aux CDN indiqués dans la rubrique quick start :
Le quick start de la documentation officielle de Bootstrap
La grid : containers, rows et cols
Le principe de la grid de Bootstrap est de simplifier la responsivité des pages web, c’est-à-dire leur adaptation aux différentes tailles d’écran. Pour ce faire, on utilise des containers qui fixent une largeur maximale centrée. Ils prennent un pourcentage limité de l’écran et contiennent des lignes appelées rows ainsi que douze colonnes : les cols.
Les containers
En CSS3, pour centrer un container, on déclare une balise HTML de type block (par exemple, une div) et on lui définit une largeur limitée sans oublier des propriétés margin-right et margin-left avec la valeur « auto ». Le problème, c’est que l’effet perd en lisibilité sur les plus petites tailles d’écran. Il faut alors utiliser des media queries pour modifier le comportement de la balise de type block.
Avec Bootstrap, le container va automatiquement prendre 100% de l’écran lorsque la largeur de celui-ci est inférieure à 576px. Pour avoir une idée précise des comportements des classes containers, consultez ce tableau :
La rubrique containers dans la catégorie layout ➡️ overview de la documentation Bootstrap
Les rows
Mais qu’est-ce qu’une « row » ? Il s’agit d’une une rangée dans le container, qui établit des marges négatives à droite et à gauche et qui va contenir les 12 cols. Dans une row, vous pouvez placer votre block verticalement à la hauteur désirée : centrer, en bas de page…
Les cols
Comme nous l’avons vu précédemment, la grille de Bootstrap contient douze cols. Ces colonnes vont extrêmement simplifier la mise en page de votre projet. Votre balise block s’aligne horizontalement dans la row et prend une certaine largeur.
Vous pouvez définir la largeur de votre élément en définissant la proportion qu’il va prendre sur la grille de 12 colonnes. Par exemple, si je veux que mon élément central prenne la moitié de la grille, voilà ce que je dois écrire :
<div class="container">
<div class="row">
<div class="col">
un espace de 3/12
</div>
<div class="col-6">
un espace de 6/12
</div>
<div class="col">
un espace qui occupe la place qu'il reste (donc ici 3/12)
</div>
</div>
</div>Bootstrap VS les media queries
Bien qu’il soit devenu nécessaire de raisonner en mobile first, beaucoup sont encore habitués au desktop first (moi la première, simplement parce qu’on développe sur PC, donc qu’on teste dans le navigateur du PC). En intégrant avec Bootstrap, le passage au responsive intervient à toutes les phases de la réalisation du site, on n’a pas à mener deux développements en parallèles. En pur CSS, c’est une autre histoire !
Lorsque vous décidez de ne pas utiliser Bootstrap, il vous faut intégrer les media queries à votre style, et gérer pratiquement au cas par cas : rapetisser un élément voire le faire disparaître… Vous pensiez avoir fini mais vous en êtes encore loin.
Non seulement il faut choisir le nombre de media queries que l’on aura (plus il y en aura, mieux ça s’adaptera) mais aussi, il faudra définir dans chacune d’elles, la taille de vos block, tailles de police, images…
Bref, vous l’aurez compris : ça peut vite devenir long !
Que faut-il faire alors ?
Le CSS pur vs Bootstrap, un faux débat ?
Bootstrap permet un gain de temps conséquent ainsi qu’une excellente responsivité. Allié à une bonne utilisation du CSS, votre site sera beau (et adapté) sur toutes les tailles d’écran !