Bootstrap : la version 5 en six nouveautés

Plutôt que de réinventer en permanence du HTML, du CSS et du JavaScript à chaque projet, en quoi le populaire framework Bootstrap peut-il vous aider ? Comment l'utiliser efficacement ? Quels changements et nouveautés en 2020 pour la version Alpha ? Freelance Info vous dit tout.


Qu’est-ce qu’un framework ?

Bootstrap est un framework, c’est-à-dire un ensemble de composants structurés visant à créer les bases et à organiser le code informatique.
L’objectif d’un framework : faciliter le travail des programmeurs, tant en matière de productivité que de simplification de la maintenance.
De nombreux frameworks sont disponibles pour les applications web ciblant des langages variés : Java, PHP, Python, Ruby…
Les frameworks peuvent être situés côté serveur (“backend”) ou côté client (“frontend”).



Bootstrap, le framework CSS côté client, mais pas seulement

Bootstrap est pour sa part un framework CSS côté client.
Comment son nom l’indique, il est spécialisée CSS, dont l’objectif est de mettre en forme les pages web, tant en termes d’organisation, d’aspect que d’animation.
Les frameworks concurrents sont nombreux : Knacss, Blueprint, unsemantic, YUI, BlueTrip, ez-css, Pure, Materialise, Gumby…
En plus de s’afficher comme framework CSS, Bootstrap embarque par ailleurs des composants HTML et JavaScript.
Il comporte ainsi de nombreux éléments : système de grille simple et efficace pour organiser l’aspect visuels d’une page web, boutons, formulaires et navigations stylisables, conception rapide de sites web sans ajout fastidieux de lignes de code.
A la clé, le framework est réputé pour ses nombreuses qualités : léger, simple, rapide, ou encore au bénéfice du développeur !



Quels changements et nouveautés pour la version 5 en 2020 ?

Adieu Internet Explorer. Le navigateur de Microsoft ne supporte ni la plupart des nouvelles propriétés CSS, ni les standards modernes de JavaScript. Limité dans la conception de son site web, le développeur peut dire adieu à son pire cauchemar, qui alourdissait par ailleurs son code pour le rendre compatible avec ce navigateur obsolète. Personne ne devrait le regretter.

Adieu jQuery. Après huit ans de bons et loyaux services, le framework devient trop lourd en obligeant les sites à le télécharger alors que la bibliothèque ne pourra être utilisée par aucun autre plugin que Bootstrap. Toute requête jQuery sera donc réalisée avec du code JavaScript dans Bootstrap, autorisant à la clé une réduction de la taille ou du poids des fichiers du framework.

Adieu les “Card Deck”. Les “jeux de carte” étaient jusqu’ici utilisés comme autant de classes CSS permettant de définir des zones de largeur et de hauteur égales. Un nouveau système de grid vient offrir un contrôle amélioré en matière de responsivité de la page. De nouvelles classes CSS vont ainsi apparaître, à l’image de la classe “dropdown-menu-dark” venant transformer un menu déjà largement remanié.

Adieu Jekyll, place à Hugo. Trop lent, le générateur de site statique Jekyll laisse sa place à Hugo, écrit en Go, et donc sans dépendance externe et beaucoup plus rapide.

Bonjour les polices d’écriture responsives. Concevoir un site web attrayant en responsible design, quelle que soit la taille de l’écran, constitue un défi de taille. Avec les “media queries”, les développeurs peuvent spécifier des tailles de polices spécifiques à l’écran et contrôler ainsi l’apparence des textes, selon une activation par défaut des tailles de police réactives. Via le moteur RFS (Responsive Font Sizes), les éléments sont ainsi redimensionnés automatiquement.

Bienvenue à une nouvelle librairie d’icônes. Plus besoin de se contenter de polices d’icônes libres de droit ou de leurs propres contenus SVG comme dans la dernière version, avec la version 5 de Bootstrap, une nouvelle bibliothèque entièrement gratuite d’icônes SVG a été conçue par son co-fondateur.



Bootstrap : intérêt et perspectives

Certes, un framework comporte deux inconvénients majeurs : il faut le connaître et donc passer par un temps long d’apprentissage, et la normalisation de la présentation peut lasser à force de répétition des effets visuels.
Pour autant, ses avantages sont nombreux. On citera, entre autres, les bénéfices suivants : compatibilité des frameworks malgré les fantaisies des navigateurs, gain de temps de développement, normalisation de la présentation grâce à un ensemble homogène de styles, présence d’une grille pour faciliter le positionnement des éléments, prise en compte des contraintes toujours plus variées de tailles d’écran, prise en main rapide…

D’autres changements et corrections de bugs seront annoncés lors du passage de la version Alpha en version Bêta : tenez-vous prêt.e.s et gardez un œil sur le GitHub de BootStrap !

Et vous, que pensez-vous d’ores et déjà de ces changements et nouveautés ?