Bootstrap 4 Alpha est dans les bacs

Pour un grand nombre de webdesigners, Bootstrap rime avec toujours, ou presque. Pour ma part, je dois dire que ne serait-ce que pour le responsive, le système de grilles, les components css principaux et les helpers classes, il trône, avec Foundation, dans mes premiers choix au commencement d’un projet.

Si je vous en parle, c’est que la version 4 alpha a pointé le bout de son nez le 20 août dernier. Son créateur, Mark Otto, parle d’une refonte totale concernant presque chaque ligne de code. Difficile de nier en effet que beaucoup de changements ont été réalisés sous le capot, et la carrosserie a elle aussi subit quelques (bienvenues) améliorations. Accrochez votre ceinture, c’est parti pour un tour d’horizon de cette nouvelle version.

Exit Less, Hello Sass

Historiquement, Bootstrap utilise depuis ses débuts et jusqu’à sa branche 3 le pré-processeur CSS Less, écrit en javascript. Sans vouloir avoir l’air de prendre parti, on peut quand même dire que Sass est plus mature et rapide que Less, et également plus utilisé et bénéficiant d’une communauté plus active. C’est sans doute pour cette raison que Bootstrap a été porté sur Sass de manière plus ou moins officielle depuis sa branche 3. Avec l’arrivée de la version 4, plus de Less dans le paysage, Bootstrap utilise maintenant Sass. Et c’est pas plus mal. Comme quoi, y’a que les idiots qui ne changent pas d’avis 😉

Un nouveau palier pour le responsive

Depuis que j’utilise bootstrap, et nonobstant ses qualités, j’ai toujours été irrité de l’absence de breakpoint en dessous de 768px. Le principe même du responsive étant d’afficher différemment un layout selon que l’on se trouve sur un mobile ou sur une tablette, difficile donc de ne pas trouver absurde cette curieuse absence. De vives protestations se sont élevées de part et d’autre, et des snippets non officiels pour ajouter un breakpoint a 420px ont fleuri sur github. A partir de cette version 4, un nouveau breakpoint (mieux vaut tard que jamais) pour les extra small devices à fais son apparition, se situant à 34em. Au passage, on saluera l’initiative de passer les media queries en em, bonne pratique car elles se basent maintenant sur la taille de la police du navigateur pour calculer les breakpoints, résolvant le problème des devices qui viennent avec un zoom-in, provoquant des comportements inattendus dans le responsive. Notons également l’apparition de responsive utilities très utiles, telles que .col-**-push-* et .col-**-pull-* pour changer l’ordre des colonnes selon le breakpoint, ou encore .hidden-**-up et .hidden-**-down, pour afficher / cacher des éléments pour un breakpoint et ceux d’au-dessus / dessous. « So satisfying », si j’ose dire. (Pour l’info, Foundation propose cse fonctionnalités depuis un certain temps déjà.)

Un nouveau reset CSS maison

Jusqu’à maintenant, Bootstrap utilisait Normalize.css, un ensemble de CSS qui « reset » le style des différents éléments HTML pour les forcer à adopter le même comportement sur tous les navigateurs. La version 4 utilise maintenant son reset maison, baptisé « reboot ». Disponible dans un fichier Sass et pouvant être utilisé sans bootstrap dans vos projets Sass, il a été écrit pour être plus abouti, et surtout mieux correspondre aux besoins du framework (il donne notamment la propriété box-sizing: border-box à tous les éléments HTML).

Le support des Flexbox

Le système de grille de Bootstrap supporte maintenant les Flexbox. On salue ici le parti pris, encore une fois, de regarder vers l’avenir et d’utiliser les dernières technologies html5 disponibles. Les flexbox sont supportées par tous les navigateurs récents, mais seulement partiellement par IE 10 et Android browser jusqu’à sa version 4.3, et pas du tout par IE 9 et inférieur (plus d’informations sur CanIUse). Selon le besoin de compatibilité de vos projets avec ces navigateurs, vous pouvez choisir de l’utiliser ou non. Pour l’utiliser, il suffit de changer un boolean dans les variables Sass de bootstrap et de recompiler le Sass en CSS.

Les cards

bootstrap3Les panels, wells et thumnails, composants que les utilisateurs du framework connaissent bien, ont été remerciés de leurs bons et loyaux services, au profit d’un composant appelé « card ». Les cards sont des éléments ressemblant aux panels, mais beaucoup plus souples et esthétiquement plus épurés. Et je dois dire que je suis particulièrement content de cette nouveauté. Les cards peuvent avoir un header et un footer, un thème parmi les couleurs de bootstrap (modifiables dans le Sass) que sont primary, success, info, warning et danger. Elles peuvent contenir une image (qui peut être disposée en premier, au milieu, à la fin ou en overlay), une liste ou une nav, des boutons… Elles sont flexibles, et même si j’utilise rarement bootstrap sans un thème ou sans modifier le design, je dois dire que je trouve leur ergonomie très convaincante.

Et tout le reste…

Parmi les autres changements plus ou moins importants, on retrouve :

  • la réécriture complète des plugins javascript intégrés à Bootstrap (modals, popovers, scrollspy…) en ES6 (lien en anglais), la nouvelle mouture du célèbre langage qui est déjà partiellement supportée, et le sera de plus en plus. Cet update leur donne, selon Otto, des améliorations diverses et des performances accrues. Personnellement, j’aurais apprécié une refonte (tant graphique que dans les fonctionnalités) du module de Carousel, veillot, ne supportant pas les touch events et de moins en moins adapté aux besoins des webdesigners. Je prends de ce fait un autre plugin à chaque fois que j’ai besoin d’un slider.
  • L’abandon de IE8 (Comme jQuery 2.x et de nombreuses autres ressources, on retrouve cette mouvance un peu partout en ce moment, et c’est pas plus mal). Si, malheureusement pour vous, vous avez des contraintes par rapport au support de IE <= 8, il faudra rester sur la version 3.
  • Une customisation avancée avec Sass. Changer des variables et recompiler vous permet maintenant de faire à peu près ce que vous voulez avec Bootstrap.
  • L’utilisation de Tether dans le module de tooltip / popover, permettant « un meilleur placement automatique des éléments ».
  • De nombreuses helper classes, diverses améliorations sur les formulaires, une nouvelle documentation (plus design et plus pratique, je l’admets).

Les thèmes

Avec l’arrivée de la v4, une rubrique thème a fait son apparition, contenant d’ores et déjà 3 thèmes :

Ces thèmes sont tous les 3 à 99$ (87€ à l’heure ou j’écris ces lignes). Mon premier réflexe a été de trouver ça hors de prix, là ou la plupart des thèmes qui n’ont rien à lui envier se trouvent autour de 25€, mais apparemment il n’y a pas de limite d’utilisation pour une licence, et les thèmes semblent assez complets et modulables pour être déclinés un certain nombre de fois sans tomber dans la redondance en termes de layout et de design. N’ayant pas pu les essayer pour le moment je ne peux donc pas en parler plus à fond mais ça a l’air de valoir que l’on sy intéresse. Je receuillerai avec plaisir les réactions de ceux qui ont pu les tester.

Pour finir

C’est la fin de cet article, et je dirai avant de vous laisser que je trouve cette nouvelle version pleine de promesses. Tous les points noirs de Bootstrap que j’attendais de voir disparaître ont été corrigés, les performances ont subi un rafraîchissement et les nouvelles avancées de l’html5 sont de la partie et redonnent à Bootstrap une modernité qui commençait à se ternir de plus en plus. Comme quoi ça vaut bien les 1100 commits et les 120000 lignes de code remaniées.

Sources

Annonce de la v4 http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha

Documentation http://v4-alpha.getbootstrap.com/getting-started/introduction

Page wikipédia https://fr.wikipedia.org/wiki/Twitter_Bootstrap

Site de Mark Otto http://markdotto.com

 

 

Adam Écrit par :

Développeur web et webdesigner en Freelance passionné de code et de design. Autodidacte et amoureux de la connaissance, je suis curieux et passe mon temps à apprendre de nouvelles choses, que j'ai envie de vous faire partager !

Soyez le premier à commenter

    Laisser un commentaire

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