Arrivé de Bootstrap 4 Alpha

Encore plus dépouillé, ce n’est pas facile de voir les changements du cadriciel CSS Bootstrap 4, encore en version Alpha. À part les nouvelles composantes comme le contenu ou menu de type accordéon «Collapsed content», le «Card» et «Scrollspy», genre de «Magellan» comme Fundation 5, le gros du changement est plutôt derrière, dans la manière de faire, dans le support des nouveaux techniques. Personnellement j’aime beaucoup l’idée d’avoir retiré le style, les dégradés, les rondeurs et arrondis qu’on peut maintenant configurer avec Sass, le langage de génération dynamique de feuilles de style. Amateur de l’Open source et des langages script, je ne suis pas à m’embourber avec Sass et installer Ruby, préfèrent manipuler moi même les styles. D’ailleurs j’utilise Bootstrap avec parcimonie! Mais pour les amateurs, c’est un outils très pratique.

Un cadriciel à plusieurs utilités, outre celle de régler des problèmes de compatibilité ou la réactivité en toute fluidité des différents supports, du bureau au mobile en passant par la tablette, Bootstrap à littéralement propulser un type d’ergonomie sur le Web. Pour ceux qui ne connaissent pas encore Bootstrap, vous ne le savez pas mais depuis 4 ans il n’est pas rare lorsque vous naviguez de tomber sur un site Web qui l’utilise. Porter une attention aux alertes et boutons, ou encore la fameuse barre de navigation. Pour en savoir plus, lire Les « cadriciel CSS » (Framework).

Voir la documentation de la nouvelle version v4 alpha

Bootstrap 4 affirme avoir vraiment revu de fond en comble son célèbre cadriciel CSS (framework). Chaque ligne de code a été réécrite avec une tonne de changements majeurs impossible à couvrir ici en détail. Tout d’abord pour suivre les nouvelles technologie du CSS3, animations et transitions, Javascript ES6, «média query» par exemple. Mais aussi arrêter le support IE8! Voici quelques faits saillants :

Modification au système de grille

Outre le support «flexbox» et les nouvelles classes « col-lg-* col-md-* col-hd-* col-sm-* et col-xs-*. », on parle essentiellement d’une nouvelle méthode pour calculer la responssivité des différents supports basés sur les «points d’arrêt sensibles» ou «Responsive breakpoints» avec l’unité em.

Bootstrap est depuis toujours conçu pour être mobile d’abord, en utilisant les «media queries» pour créer des points d’arrêt sensibles pour nos modèles et interfaces. Ces points d’arrêt sont principalement basés sur des largeurs minimales de fenêtres (viewport) permettant d’ajuster les éléments aux changements de dimension de la fenêtre.

Bootstrap utilise principalement la gammes de points d’arrêt des «media queries» suivant dans notre son fichier source Sass pour le mise en page, le système de grille, et des composantes.

// Extra petits supports (portrait mobile, plus petit que ???px)
// Aucun «media query»  puisque c'est le défaut dans Bootstrap

// Petits supports (paysage mobile, 34em et plus)
@media (min-width: 34em) { ... }

// Médiums supports (tablettes, 48em et plus)
@media (min-width: 48em) { ... }

// Larges supports (bureaux, 62em et plus)
@media (min-width: 62em) { ... }

// Extra large support (larges bureaux, 75em et plus)
@media (min-width: 75em) { ... }

Autres nouveautés

Passage de Less à Sass. Bootstrap compile maintenant plus rapidement que jamais grâce à Libsass, et rejoint ainsi une communauté de plus en plus grande des développeurs Sass.
Amélioration du système de grille. Bootstrap a ajouté un nouvel échelon au système de grille pour un meilleur support des appareils mobiles en remaniant la sémantique mixins.
Nouveau support flexbox. Le futur est maintenant! Passer une simple variable booléenne pour recompiler votre feuille CSS pour profiter du système et des composantes de grille basée flexbox.
Retrait des «wells, thumbnails, et panels» en faveur du nouveau «cards». Les «cards» sont une nouvelle composante de Bootstrap, mais qui vous semblera très familier pour faire sensiblement la même chose en mieux.
Consolidation de la réinitialise HTML dans un nouveau module «Reboot». «Reboot» commence là ou «Normalize.css» arrête. Vous donnant plus de flexibilité de réinitialisation que jamais comme box-sizing: border-box le réglage des marges, et plus encore en un seul fichier Sass.
De toutes nouvelles options de personnalisation.Au lieu de reléguer l’embellissement de style comme les dégradés, les transitions, les ombres, et plus à une feuille de styles séparée comme la version 3, nous avons déplacé toutes ces options en variables Sass. Vous voulez des transitions par défaut sur tout ou désactiver des coins arrondis? Il suffit de mettre à jour une variable et recompiler.
Retrait du soutien IE8 et utilisation des unités rem et em. Abandonner le support de IE8 signifie que nous pouvons profiter du meilleure du CSS3 sans être tenu d’ajouter des tours de passe passe CSS (hacks ou fallbacks). Les pixels ont été abandonée en faveur des unités rems et ems le cas échéant pour une typographie réactive et un redimensionnement encore plus facile. Si vous avez besoin de support IE8, continuer tout simplement à utiliser Bootstrap 3.
Réécriture de tous les «plugins» JavaScript. Chaque «plugin» a été réécrit en ES6 pour profiter des plus récentes améliorations du JavaScript. Maintenant avec le support UMD, les méthodes de démontage génériques, type d’option de vérification, et encore davantage.
Amélioration de l’auto-positionnement des infobulles et «popovers». Grâce à un outil appelé «Tether».
Amélioration de la documentation. Nous avons réécrit tout en «Markdown» et ajouté quelques «plugins» pratiques pour les exemples et extraits de code et rendre le travail avec la documentation encore plus facile. L’amélioration de la recherche est aussi sur la table à dessin.
Et encore plus! La personnalisation des contrôles de formulaires, des classes pour les marges externes et internes (padding) et de nouvelles classes pratiques ont également été ajoutées.
Animations et transition. Bootstrap n’a jamais été très riche en animation outre les accordéons et quelques autres exemple. Il semblerais que ce ne soit plus le cas. Par contre il s’agit d’une flexibilité lors de la génération du code à l’aide de Sass. J’ai bien hâte d’essayer ça.
Barre de navigation complètement revampée. Pas facile de s’y retrouver avec toutes les classes de la barre de navigation Bootstrap 3. Le simple ajout d’une image ou d’un logo pouvait s’avérer toute une entreprise. Et que dire d’un deuxième niveau. En gros, quelques nouveautés de menu adaptatif, de nouvelle couleurs de base et surtout le contenu de type accordéon «Collapsed content» de tous les côtés de plus en plus rependu pour suivre l’évolution des mobiles et petits écrans.

En comparaison

Je ne rentrerais pas dans les détails philosophiques entre les deux cadres de travail ou la subtilité du style. Mais de l’aveu même de Fundation, on n’utilise souvent que quelques fonctionnalités alors que le reste de la librairie est chargé pour rien. Avec jQuery c’est d’ailleurs à mon avis ce qui pollue le plus le web après le pourriel et la pub! Alors le poids des fichiers est un aspect des plus important. Même si Bootstrap 4 (sans jQuery) avec ses 208 ko fait 53 ko de plus que Bootstrap 3 (sans jQuery et sans thème), il est toujours plus légé de 100 ko que Fundation 5 (sans jQuery) qui fait 298 ko. Noter que Zurb annonce prochainement une nouvelle version de Fundation 6 tout en promettant une réduction du poids de l’ordre de 40% à 50%, ce qui en ferait l’égal de Bootstrap 4. À venir...

Bootstrap 4

Fichier CSS: 112 ko
Fichier CSS: ? thème
Fichier JS: 96 ko
Fichier jQuery: 83 ko

Total : 291 ko

Fundation 5

Fichier CSS: 190 ko
Fichier CSS: 11 ko (modernizr.js)
Fichier JS: 97 ko
Fichier jQuery: 83 ko

Total : 381 ko

Bootstrap 3

Fichier CSS: 120 ko
Fichier CSS: 23 ko (thème)
Fichier JS: 36 ko
Fichier jQuery: 83 ko

Total : 262 ko

Support de la version v3

Bootstrap ne tombera pas de nouveau dans le panneau. Lui qui avait dès le lancement de la version 3 discontinuée tout support de la version v2.x. Ce qui avait provoqué à l’époque toute une commotion. C’était une erreur. Or donc Bootstrap va non seulement de maintenir le support de la version v3.x mais il promet en outre de l’améliorer et de régler les bogues éventuels et la documentation! La documentation v3 sera toujours disponible même après la sortie officielle de la version final v4.

Enfin en principe car il y a aussi plusieurs différences importantes que je vais décrire ici en fil de mes développement :

1. Bonne nouvelle, la description horizontale d’une liste <dl> qui demandait plus souvent qu’autrement un ajustement de largeur permet maintenant des largeurs dynamiques à l’aide du même système de grille.

<dl class="dl-horizontal">
  <dt class="col-sm-3">Description horizontale</dt>
  <dd class="col-sm-9">Une liste avec Bootstrap 4</dd>

  <dt class="col-sm-3">Item deux</dt>
  <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd class="col-sm-9 col-sm-offset-3">Donec id elit non mi porta gravida at eget metus.</dd>

  <dt class="col-sm-3">Item trois</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Item quatre (tronqué)</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>

Nouveaux thèmes officiels

Hum, Bootstrap en avait assez de voir les développeurs faire de l’argent avec sa plate-forme! Il annonce 3 nouveaux thèmes officiels. Mais attention, ce n’est pas gratuit! Non seulement il faut débourser un bon 100$ pur une seule licence, mais en plus le code diffère considérablement de la plate-forme Bootstrap courante! En d’autres mots on est loin du code portable et de l’open source. J’imagine qu’il espère ainsi convoiter une nouvelle classe de développeurs.

Après des centaines d’heures de travail, bootstrap considère que ses thèmes sont beaucoup plus que les la simple récupération traditionnelle de bootstrap (!) Wow, en d’autres mots on n’est pas fort! Ça me fait penser à l’hébergement mutualisé, fiable, robuste et à toute épreuve. Tant et aussi longtemps qu’on ne se renseigne pas sur le service dédié, offert par le même vendeur. Alors là le discours change radicalement comparé au service mutualisé en signalant le manque de ressources partagées, le manque de fiabilité, etc...

Et même qu’ils sont construits à partir de Bootstrap 3! On parle d’un tableau de bord genre administration, un thème pour les applications et un site de marketing. Chaque thème contient tout ce que bootstrap offre, en plus d’exemple réel, les nouvelles composantes et «plugins», une documentation personnalisée et des outils de développement.

Chaque thème inclut une licence multiusage et les mises à jour gratuites pour la durée de vie du thème.