Salut toi, jeune MMI ! Si Bootstrap ne t’évoque absolument rien et que tu te sens complètement perdu(e) entre ton HTML et ton CSS alors ne cherche plus, Bootstrap 4 est LE framework qu’il te faut pour booster ton projet web.

Si au contraire tu connaissais déjà Bootstrap 3, alors tu vas sûrement adorer la dernière version qui vient de sortir et cet article va te montrer pourquoi c’est du très très lourd !

Un framework tu dis, mais c’est quoi ?

Pour ceux ou celles qui n’auraient pas suivi, Bootstrap est un framework open-source HTML, CSS et même JavaScript. À l’origine de ton nouveau meilleur ami, deux génies de chez Twitter, Mark Otto et Jacob Thornton, qui en 2010, ont développé un guide de style pour construire plus facilement leurs produits et optimiser leurs codes. Depuis, Bootstrap a bien grandi et aujourd’hui c’est toute une team de développeurs du monde entier qui s’affairent à faire évoluer le projet utilisé sur 3,4% de l’Internet mondial !

Plus en détail, Bootstrap est donc une grosse librairie, qui regroupe principalement une multitude de classes CSS qui vont te permettre, par exemple, de facilement donner du style au texte, aligner des blocs ou encore de construire rapidement une grille responsive. Mais ce n’est pas tout, aux classes CSS s’ajoutent bien d’autres fonctionnalités JavaScript pour créer des sliders, des menus déroulants ou encore des pop-up. Pour s’y retrouver dans tout ça, Bootstrap possède une grande documentation en ligne vraiment bien faite (en anglais, of course) qui t’explique comment mettre en place chaque composant.

Tu l’auras compris, utiliser Bootstrap accélèrera ton workflow, et t’évitera de longues heures passées à vouloir réinventer la roue !  

Awesome.

Bootstrap 4 : nouvelle version, nouveaux horizons

Pas encore convaincu(e) ? Et si je te disais que parmi les nouveautés, Bootstrap 4 abandonne sa grille « Floatante » pour une puissante grille basée sur Flexbox. Toujours pas ?? Et pourtant ceci est une véritable petite révolution !

Dites bonjour à Flexbox

Avec l’intégration de Flexbox, adieu le support des vieilles versions d’Internet Explorer 8 et 9, Bootstrap 4 est moderne, conçu pour le web de demain et donc compatible IE 10+/ iOS 6+. Fini aussi la limitation à une grille de 12 colonnes, aujourd’hui tu peux faire une grille infinie, responsive et dont les colonnes s’adapteront toutes seules dans l’espace qui leur est réservé. Terminé également les pertes de temps à vouloir faire des colonnes de même hauteur ou à aligner des éléments proprement, avec Flexbox tu peux TOUT faire !

 

Flexbox facilite la mise en page
Aperçu des nouvelles possibilités de mise en page qu’offre Flexbox

 

Bootstrap 4, toujours pensé “mobile first”, introduit aussi un nouveau breakpoint responsive. Ce dernier, défini à 576px, te permet ainsi d’adapter ton site encore plus facilement sur les écrans de téléphones de plus en plus grands et surtout toujours de plus en plus utilisés pour surfer sur le web.

De LESS à SASS

Et puis finalement, la véritable force de Bootstrap ce n’est pas juste ses classes et sa grille, non, sa véritable force c’est que tout le style est basé sur des variables et donc que tout est paramétrable ! A l’origine codé en LESS, Bootstrap 4 a été entièrement repensé en SASS. Dans le cas où tu ne connais pas SASS, je t’invite à lire cet article qui explique tout ce que tu dois savoir sur ce pré-processeur CSS bien puissant. Pour résumer en très gros, il s’agit en fait d’un langage dérivé du CSS qui permet beaucoup plus de chose et notamment l’utilisation de variables et de boucles comme en JavaScript par exemple.

 

Déclarations de variables en SASS
Exemple de déclarations de variables en SASS

Ainsi avec SASS, si le bleu par défaut de Bootstrap 4 te sort par les yeux, libre à toi de modifier la variable de couleur qui le définit et de re-compiler le tout. Et ce n’est qu’un exemple, car dans Bootstrap cela vaut aussi pour toutes les autres variables qui définissent les marges, les espacements, la typo et j’en passe, l’idée c’est de pouvoir adapter Bootstrap à ton projet et ses besoins.

Pour aller plus loin : Gulp va te donner du style !

Je préfère prévenir et rassurer, dans cette dernière partie nous allons aborder l’utilisation du Terminal et des lignes de commandes. Si jamais tu n’es pas à l’aise avec tout ça (l’occasion quand même de passer pour un hacker devant tes parents), pas de panique ! Il s’agit ici de te faire découvrir des outils utilisés dans le milieu professionnel. Au début ça peut paraitre un peu déroutant mais avec l’habitude tu ne voudras plus jamais revenir en arrière.  

Un chaton, pour te consoler un peu.
Tout va bien se passer…

Introduction à Gulp

Tu l’auras compris, si tu veux personnaliser au mieux Bootstrap 4 pour qu’il convienne parfaitement à ton projet, il va falloir quand même que tu codes un peu et que tu modifies les variables par défaut pour ensuite re-compiler le tout ! Comment ? Et bien grâce à un outil bien pratique comme Gulp ou Grunt (deux frères jumeaux, à quelques différences près).

Les deux sont des taskrunners, comprenez “lanceurs de tâches” qui s’utilisent essentiellement en lignes de commandes et qui permettent (entre autre) de compiler, minifier et concaténer du CSS ou du JS. Tout bon intégrateur web qui utilise un pré-processeur CSS comme SASS se doit d’utiliser Gulp (ou Grunt, à chacun sa préférence). Assez facile à prendre en main, ils font partie des outils indispensables pour un workflow idéal.

Utiliser Bootstrap 4 avec SASS et Gulp

Si tu souhaites créer un projet Bootstrap utilisant un taskrunner, il y plusieurs petites choses auxquelles il faut que tu veilles. Pour cela, je te conseille ce petit tutoriel (en anglais) qui t’expliquera rapidement comment installer un environnement de travail pour utiliser Bootstrap 4 avec SASS et Gulp. Attention, dans la démo c’est Bootstrap 4 version Alpha qui est utilisé, à toi d’adapter en téléchargeant la version stable ici.

Finalement rien de bien compliqué, une fois que tu auras installé Gulp et créé les tâches qui vont permettre de compiler les fichiers SASS en CSS, il ne te restera plus qu’à ouvrir ton dossier de travail via la console de ton ordinateur et de lancer les tâches en ligne de commande. Ainsi, on peut imaginer une commande gulp watch qui, dès lors que tu modifies et enregistre tes fichiers SASS, s’occupe de re-compiler tout le style dans un seul et même fichier CSS que tu appelleras ensuite dans ton site.

 

Exemple de tâche Gulp en cours
Une tâche Gulp en cours d’exécution dans une console

Alors convaincu(e) cette fois ? Du lourd, tu étais prévenu•e  

J’ai souvent entendu dire que Bootstrap était un outil pour les développeurs back-end flemmards, ou qui n’ont pas le temps de s’attarder sur le Front, et c’est vrai. Pourtant, Bootstrap est à l’origine un véritable outil front-end qu’il ne faut pas avoir honte d’utiliser surtout lorsqu’il s’agit de générer un guide de style solide, du code propre, harmonieux et adapté à ton projet.

Dans ce sens, Bootstrap 4 et les nouveautés qu’il présente accorde encore plus de souplesse dans la personnalisation et maintenant que tu sais comment faire il ne te reste plus qu’à te lancer !

Bootstrap 4 : le framework CSS qui booste tes projets
4.8 (95.38%) 13 votes

Une réflexion sur “ Bootstrap 4 : le framework CSS qui booste tes projets ”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir