Bootstrap 5 : quelles nouveautés en 2020 ?

Le métier de développeur peut être frustrant : réinventer du HTML, du CSS et du JavaScript à chaque projet… Bien que certains préfèrent écrire leur propre code, il n’y a pas de honte à se contenter d’un framework existant. L’un des frameworks les plus populaires est Bootstrap, qui vient de dévoiler sa dernière version (en Alpha), avec à la clé des changements importants.

L’équipe derrière Bootstrap fait de son mieux pour rendre le framework léger, simple et plus rapide, au bénéfice du développeur : dans cette dernière version le ménage a donc été fait !

Si vous l’utilisez dans vos projets, alors vous aimerez probablement les changements offerts par Bootstrap 5, dont voici les principales nouveautés.

Exit jQuery

Alors que Bootstrap utilise jQuery depuis plus de 8 ans, ce framework est devenu assez lourd, d’autant qu’il oblige les sites web qui l’utilisent à le télécharger, ajoutant un temps de chargement parfois conséquent, pour une bibliothèque qui ne peut être utilisée par aucun autre plugin que Bootstrap.

jQuery a donc peu à peu perdu de sa popularité au profil d’ perdu de sa popularité au profit d’Angular, Vue ou React, car la plupart de ces frameworks modernes fonctionnent à travers le DOM virtuel et non pas directement sur le DOM, ce qui conduit à des performances fortement améliorées.

À l’avenir, toute requête jQuery devra être réalisée avec du code JavaScript dans Bootstrap 5, ce qui permettra de réduire la taille ou le poids des fichiers du framework.

Exit Internet Explorer

Le glas a sonné pour l’un des pires cauchemars du développeur web : dans Bootstrap 5, la prise en charge d’Internet Explorer 10 et 11 n’est plus qu’un souvenir.

Le navigateur de Microsoft ne supportant pas les standards modernes de JavaScript ni la plupart des nouvelles propriétés CSS, il limitait le développeur dans la conception d’un site web, ou bien l’obligeait à alourdir son code pour le rendre compatible avec ce navigateur obsolète. Fini le casse-tête !

Exit les « card deck »

Dans les dernières versions de Bootstrap, il fallait utiliser les « jeux de cartes » comme autant de classes CSS, pour pouvoir définir des zones de largeur et de hauteur égales. Bootstrap 5 a remplacé ses « jeux de cartes » par un nouveau système de grid qui offre un meilleur contrôle sur la responsivité de la page. Les classes « card » devenues inutiles ont été supprimées.

Bien sûr, la disparition de ces classes (et d’autres) vont laisser la place à de nouvelles classes CSS, comme la classe « dropdown-menu-dark » qui transforme le menu, lui aussi largement remanié.

Exit Jekyll, bonjour Hugo

Le générateur de site passe de Jekyll à Hugo. Jekyll, jadis choisi pour sa facilité de mise en route et sa simplicité de déploiement sur GitHub, a fait long feu : sa lenteur, combinée à l’installation obligatoire de Ruby, a eu raison de lui.

Hugo, par contre, est écrit en Go : il n’a pas de dépendance externe, et il est beaucoup plus rapide.

Polices d’écriture responsives

La conception d’un site web qui reste attrayant sur plusieurs tailles d’écrans a été un véritable défi pour les développeurs. Les « media queries » ont été souvent utilisées résoudre les problèmes de typographie (mais pas que). Les « media queries » permettent aux développeurs de contrôler l’apparence des textes en spécifiant des tailles de police spécifiques en fonction d’une taille d’écran donnée.

Bootstrap 5 activera par défaut les tailles de police réactives qui redimensionneront automatiquement l’élément en fonction de la taille de la fenêtre de l’utilisateur, via le moteur RFS (Responsive Font Sizes).

À savoir

RFS est un moteur de redimensionnement développé pour redimensionner les tailles de police. Mais pas que, puisque RFS offre la possibilité de redimensionner pratiquement tout, comme le margin, padding, border-radius…

Nouvelle librairie d’icônes

Dans Bootstrap 4, les développeurs web doivent se contenter de polices d’icônes libre de droit (comme Font Awesome) ou utiliser leurs propres icônes SVG afin d’ajouter du cachet à leur site web.

Bootstrap 5 arrive avec une nouvelle bibliothèque d’icônes SVG conçue par le co-fondateur de Bootstrap. Avant la sortie officielle de Bootstrap 5, ces icônes peuvent d’ores-et-déjà être ajoutées et utilisées dans votre projet, en visitant cette page.

Le plus

Entièrement gratuite, cette librairie d’icônes peut même servir à ceux qui n’utilisent pas le framework.
 

Conclusion

L’équipe de développement de Boostrap 5 a bien travaillé, mais a informé ses utilisateurs que cette mouture est toujours en version alpha : d’autres changements, ainsi que des corrections de bugs  sont attendus jusqu’à la sortie de la bêta. Si vous êtes un aficionado du framework, pressé d’essayer la version 5 de Bootstrap, il est inutile de vous conseiller de garder un œil sur le GitHub de Bootstrap.

Vous avez un projet de création de site internet avec Bootstrap ? Demandez les devis de développeurs web freelances sur Codeur.com ! C’est rapide, et gratuit !

 

De quoi avez-vous besoin ?

Développer votre marque et votre identité visuelle

Augmenter votre présence sur le web

Vous faire connaître et reconnaître ?