Bootstrap 5 : les nou­veau­tés les plus im­por­tantes

Bootstrap est l’un des fra­me­works les plus po­pu­laires pour le dé­ve­lop­pe­ment de sites Web. L’outil fournit des modèles pour CSS et HTML avec lesquels vous pouvez mettre en place une con­cep­tion Web moderne de manière re­la­ti­ve­ment simple. La mise en page, les polices, les boutons et les divers éléments de na­vi­ga­tion peuvent être créés et po­si­tion­nés très sim­ple­ment.

Développé à l’origine pour Twitter, le framework est dis­po­nible depuis un certain temps déjà en open source gra­tui­te­ment pour tous. La dernière version de Bootstrap 5 est main­te­nant dis­po­nible – tout du moins dans sa version alpha.

Depuis le 16 juin 2020, Bootstrap 5 est déjà dis­po­nible dans une version alpha, qui est toujours con­si­dé­rée comme ex­pé­ri­men­tale. Une grande partie des chan­ge­ments prévus ont déjà été mis en œuvre, mais le dé­ve­lop­pe­ment n’est pas encore terminé. En parallèle, des cor­rec­tifs pour la version 4 du framework con­ti­nue­ront à être publiés. L’équipe n’a pas com­mu­ni­qué de ca­len­drier. Il n’est donc ac­tuel­le­ment pas possible de dire quand une première version bêta et quand la version finale seront publiées. Pré­cé­dem­ment, il s’était écoulé près de 2 ans et demi entre la version alpha et la version finale.

L’équipe de Bootstrap a annoncé plusieurs centaines de chan­ge­ments pour sa nouvelle version. Bon nombre d’entre elles sont des évo­lu­tions mineures. Mais il en existe aussi de nouvelles qui sont ex­trê­me­ment im­por­tantes pour les uti­li­sa­teurs du framework open-source.

Depuis longtemps déjà, les uti­li­sa­teurs ont mas­si­ve­ment abandonné le na­vi­ga­teur Internet Explorer de Microsoft. Le nombre d’uti­li­sa­teurs est devenu si faible que Bootstrap 5 n’offre même plus de support pour ce na­vi­ga­teur. Comme Internet Explorer est devenu obsolète et n’est plus développé par Microsoft (au profit d’Edge), il était né­ces­saire d’ajouter beaucoup de code (en fait inutile) par le passé.

Avec l’arrêt du support Internet Explorer, les projets Bootstrap de­vien­nent plus petits. La raison en est que le na­vi­ga­teur Microsoft, devenu obsolète, ne pouvait pas gérer les nouvelles méthodes Ja­vaS­cript et des efforts né­ces­saires devaient donc être fournis. Cela se reflète dans la taille du fichier et dans le temps né­ces­saire à la con­cep­tion des sites Web.

Pour sim­pli­fier le travail avec Ja­vaS­cript, de nombreux con­cep­teurs et dé­ve­lop­peurs Web utilisent la bi­blio­thèque gratuite jQuery. Cette bi­blio­thèque a également été incluse dans Bootstrap pendant des années. Do­ré­na­vant toutefois, il a été décidé de mettre fin au support avec la nouvelle version. Il est probable que les uti­li­sa­teurs de Bootstrap 5 n’uti­li­saient plus cette bi­blio­thèque. Même sans jQuery, les effets peuvent être générés très ra­pi­de­ment avec le framework : pour ce faire, soit on utilise un code Ja­vaS­cript plus avancé, soit on passe à HTML et CSS.

Cet abandon permet de réduire con­si­dé­ra­ble­ment le nombre de projets mis en œuvre avec Bootstrap. La taille des fichiers et donc les temps de char­ge­ment sont par con­sé­quent plus petits, ce qui améliore l’ex­pé­rience uti­li­sa­teur.

Internet Explorer n’étant plus pris en charge, Bootstrap 5 peut désormais encore plus se con­cen­trer sur les tech­niques modernes de con­cep­tion de sites Web. Cela inclut les pro­prié­tés per­son­na­li­sées CSS : cette technique était déjà bien utilisée depuis longtemps avec Sass et Less, mais elle a main­te­nant également trouvé sa place dans le CSS classique. Les pro­prié­tés (souvent appelées variables) rendent la con­cep­tion avec le CSS beaucoup plus facile. En outre, elles per­met­tent de réaliser des variantes de mises en page modernes.

Déjà dans la version 4 du framework frontend, vous pouviez créer vos mises en page à l’aide de grids CSS. Cela reste inchangé dans Bootstrap 5, mais des ex­ten­sions ont été ajoutées. Avec xxl, l’équipe a introduit une dimension sup­plé­men­taire. En outre, davantage de classes ont été créées pour le vertical spacing.

Jusqu’à présent, Bootstrap était étroi­te­ment lié au gé­né­ra­teur de site statique Jekyll. Néanmoins, l’outil présente l’in­con­vé­nient que Ruby doit être installé sur le con­cep­teur pour pouvoir être utilisé. L’équipe de dé­ve­lop­pe­ment a donc décidé de passer à Hugo. Cet outil est écrit en langage Go et ne nécessite aucun logiciel ad­di­tion­nel en arrière-plan. De plus, Hugo promet d’être beaucoup plus rapide que ses con­cur­rents.

Afin de bé­né­fi­cier d’une plus grande flexi­bi­lité et de pousser encore plus loin le dé­ve­lop­pe­ment du framework, Bootstrap 5 offre une nouvelle façon d’inclure ses bi­blio­thèques et toolkits. Alors qu’au­pa­ra­vant il n’était pas possible d’intégrer des bi­blio­thèques et des outils externes dans un projet que par le biais de classes, une nouvelle interface a main­te­nant été développé avec Sass. Vous pouvez l’utiliser pour inclure vos propres uti­li­taires ainsi que pour supprimer ceux fournis par Bootstrap si vous ne voulez pas les utiliser pour votre projet.

Un projet qui s’est autant développé que Bootstrap se doit d’être cor­rec­te­ment documenté. C’est la seule façon pour les nouveaux uti­li­sa­teurs, mais aussi pour les con­cep­teurs ex­pé­ri­men­tés, d’utiliser au mieux le framework. L’équipe a donc fait un grand nettoyage sur la do­cu­men­ta­tion. Un nouveau pa­ra­graphe est notamment la section de per­son­na­li­sa­tion très utile. Une nouvelle palette de couleurs a également été ajoutée, offrant encore plus de pos­si­bi­li­tés de con­cep­tion di­rec­te­ment à la base du code.

En outre, la partie for­mu­laire a également été révisée. Vous pouvez trouver beaucoup plus ra­pi­de­ment des in­for­ma­tions utiles sur la création de for­mu­laires. La version Bootstrap 5 offre en effet plus de flexi­bi­lité pour la con­cep­tion d’éléments de contrôle (boutons, boîtes, radio, etc.).

Tous les chan­ge­ments prévus ne sont pas encore inclus dans la première version alpha. Cependant, les dé­ve­lop­peurs ont déjà annoncé quelques dé­ve­lop­pe­ments cruciaux qui seront intégrés dans les pro­chaines versions :

• Right-to-left (RTL) : les langues qui se lisent de droite à gauche seront mieux prises en charge à l’avenir.
• Offcanvas menu : avec les offcanvas, davantage de pos­si­bi­li­tés pour concevoir des menus.
• SVG in HTML : ac­tuel­le­ment, les fichiers SVG sont intégrés via CSS, mais il est possible d’utiliser du code HTML pour cela.