CSS

Framework

Bootstrap 5 Alpha 2

Version 5 alpha 1

Quand j’ai lu cette grande nouvelle en juin dernier (un jour avant ma fête!) c’était comme un cadeau. Le retrait de la dépendance à jQuery, Bravo ! Chanceux celui qui développement toujours, autant que possible, en pur JavaScript (Vanilla)... Car la plupart des sites Web dépendent aujourd’hui de jQuery, des millions de scripts et d’IU souvent carrément signé jQuery...

NOTE : Il sera toujours possible d’utiliser jQuery. En détectant la librairie jQuery dans l’objet window, Bootstrap ajoutera automatiquement toutes ses composantes dans le système de plugins de jQuery !

Sans plus! Cette grande nouvelle proposait peu de nouveauté. J’avais abandonné l’idée d’en faire un tutoriel. Si je n’ai rien écrit, c’est aussi parce que la migration de la version 4 à la version 5 alpha 1 n’a rien de bien compliqué. Personnellement, j’ai surtout eu à adapter mes codes au retrait des sélections perso et à un petit changement avec les groupes de saisie (input group), sans plus.

Sinon, Bootstrap parle d’un gros travail sur la documentation et d’une refonte complète des éléments de formulaires, peu visibles toutefois. Boites à cocher, boutons radio... L’amélioration du système de grille, davantage de points d’arrêt (breakpoints), le navbar-expand-xxl et le container-xxl, col-xxl- à 1320px par exemple (et le retour du xs avec la version 5 alpha 2!), le retrait du flex: 1 0 100% des « row » et surtout l’ajout de colonnes autonomes et l’intéressant line-height : .lh-1, .lh-sm, .lh-base et .lh-lg.

Ha, et un exemple avec Masonry de David DeSandro.

Rien à voir avec la migration cauchemardesque de la version 3 à la version 4. Enfin, le tutoriel attendra la prochaine version...

Version 5 alpha 2

Aujourd’hui, 30 septembre 2020, je suis aussi bien heureux de la nouvelle version 5 alpha 2 que j’attendais avec impatience. Avec à peine plus de viande autour de l’os (consultez les notes de version). Un meilleur support pour les thèmes foncés, sous-menu, carrousel foncé dropdown-menu-dark, carousel-dark et surtout le positionnement absolu (top, right, bottom et left) à 0%, 50% ou 100%.

Du débogage, des ajustements du genre sr-only et .sr-only-focusable remplacées par visually-hidden et visually-hidden-focusable. Personnellement je dois surtout ajuster deux éléments en passant à la nouvelle version. Le ratio de mes vidéos embed-responsive embed-responsive-16by9 devient ratio ratio-16x9 et le bouton « fermer », d’une fenêtre modale par exemple, passe de la classe close à btn-close. Une petite nouveauté que je vais utiliser souvent pour les bordures. Mais la version 5 alpha 3 à venir promet aussi la refonte complète des composantes de groupe de saisie (input group) amorcée par la version 5 alpha 1. Avec le retrait de jQuery, c’est la grosse nouvelle de la prochaine version 5.

Feuille de styles et librairie JavaScript

<!-- Feuille de style CSS Bootstrap 5 alpha 2 -->
<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css"
  integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK"
  crossorigin="anonymous"
/>

<!-- Javascript Bootstrap 5 alpha 2 Bundle avec Popper.js -->
<script 
  src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"
  integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD"
  crossorigin="anonymous">
</script>

Version 5 alpha 3 bientôt !

Alors si la version 5 alpha 3 promet encore un bouleversement au niveau des formulaires, quelques nouveautés comme les outils très attendus pour la grandeur de polices, aussi bien attendre la version 5 alpha 3 si vous n’avez pas encore fait le saut !!

Conclusion

J’utilise déjà depuis le 15 juin 2020 la version 5 alpha 1 et les quelques problèmes rencontrés semble déjà avoir trouvé écho dans l’équipe de Bootstrap puisque la version 5 alpha 2 en corrige plusieurs. Comme la correction de l’infobulle (tooltip) lors du survol d’un élément enfant. J’ai carrément passé à la version 5 alpha 2 ce matin. Mon premier constat, les puristes comme moi y verront un tas davantage, les autres moins, voir pas du tout. On verra à faire une revu plus étoffée de la version 5 lors de la sortie prochaine de la version 5 alpha 3.

Références

• Bootstrap 5 alpha! - 16 juin 2020
• Bootstrap 5 Alpha 2 - 29 septembre 2020
• Les notes de version v5.0.0-alpha2
• Masonry par David DeSandro