CSS

Bootstrap

Bootstrap 4 Beta - Attendre la version 5 ou pas?

2 ans depuis la version Alpha!

Bootstrap a sauvé les meubles de son retard sur le dos des concepteurs. D’ailleurs, essayer de poser vos questions sur GitHub ou stackoverflow.com! Ne soyez pas trop critique ni trop pointue! Quand on a l’habitude d’une technologie, on capitalise dessus, c’est normal! Mais on le disait aussi, éviter de développer avec Bootstrap pour l’instant. Et de fait, il faut réécrire la plupart des codes. On parle de 6 versions alpha! Est-ce que cette nouvelle version Beta et l’annoncée version 5 seront encore différentes pour une énième fois? On a même tourné en rond en modifiant des mnémoniques pour revenir ensuite à la première idée (badge, label et retour au badge)! Je peux bien croire que la technologie change, mais harmonisé la sémantique pour une meilleure compréhension? Peut-être passer à autre chose, comme Fundation qui n’a pas perdu de temps pendant ce temps? Allant même jusqu’à réinventer les grilles avec son nouveau XY grid!

Enfin, la bonne nouvelle est que cette nouvelle version du 10 aout 2017 vient aussi avec une refonte du site de Bootstrap. On parle tout de même de 67 000 lignes ajoutées et 82 000 lignes supprimées au plus que populaire cadriciel. Ça semble par contre enfin sérieux, quoique j’ai déjà noté une erreur. Mais rien à voir avec l’improvisation de dernière minute avec la version alpha. Une véritable documentation à jour avec cette fois des exemples fonctionnelle. Rien ne garantit que la version 5 n’arrivera pas dans 2 ans mais Bootstrap admet ne pas être parfait et assure surtout qu’ils feront de leur mieux pour garder toutes les classes, les fonctionnalités et les URL de la documentation telles qu’elles apparaissent maintenant dans cette version. Certaines fonctionnalités pourront toujours être ajoutées, mais avec la promesse de ne plus rien retirer.

Outre les changements majeurs déjà apportés par la version alpha, comme le passage à Sass, les grilles Flex, le nouveau « cards », le retrait du .dl-horizontal et du blockquote par défaut, l’ajout du point d’arrêt 576px de la grille, le nouveau btn-secondary au lieu du .btn-default, l’ajout du .form-control-* au lieu du .input-* pour les formulaires, le retrait du support IE8 et IE9 (rien de moins), la réécriture du JavaScript en ES6 et l’utilisation de l’unité de mesure « rem », HTML5 oblige. Je note le retrait de Normalize.css pour Reboot et surtout du script Tether (infobulles) au profit de Popper.js. Avec encore une fois plusieurs changements de classe.

Changements des noms de classes de la version alpha à la version beta

On « display » au lien de cacher

Je n’utilise pas beaucoup les classes gadgets de bootstrap, comme les cards. J’utilise plutôt Bootstrap pour son caractère à normaliser l’ergonomie. Mais aussi pour ses outils adaptatifs comme les grilles. Si les composantes ergonomiques ne changent pas vraiment, le nom de classe des outils adaptatif n’arrête pas de changer alors qu’ils parsèment mes codes d’un bout à l’autre. Des classes de la version 3 et alpha sont disparues. Notamment les .hidden-*-down et .hidden-*-show utilisées pour afficher ou non des éléments selon la dimension de l’écran. Au profit du très sémantique .d-*-none et .d-*-block, par exemple .d-none.d-md-block.d-xl-none! C’est à dire pas d’affichage mobile, ni extra-large, uniquement un affichage pour la largeur moyenne. Ouf, tous mes codes doivent être revus en profondeur, par pur idéologie!

Si c’est pour le mieux tant mieux, on finit toujours par s’y faire. Or donc, cette même idéologie qui privilégie l’usage du très sémantique strong au détriment du court et tout aussi touchant b, qui retire .next pour .carousel-item-next, retrait du .table-condensed au profit de .table-sm, nous propose aujourd’hui le petit d (display) au lieu du long hidden. Non seulement le mot change, mais carrément la méthode, quoique je trouve plus logique cette nouvelle façon de faire, la sémantique en prend pour son rhume. À en perdre son latin ;- ) On cachait avec la version alpha, avec la version beta, on display : bloc ou on display : none. En d’autres mots, on vire à l’envers la façon de gérer et de penser une structure adaptative à la Bootstrap.

Ou encore, finis le sémantique .center-block pour le nouveau .mx-auto. Bonne nouvelle, l’ajout de .float-left et .float-right effectivement plus harmionisé avec le CSS. Quoique je crois que c’était déjà comme ça avec la version alpha. Plus besoin du form-horizontal pour les formulaires, d’ailleurs c’est maintenant la grille avec le row qui doit être utilisé.

Voilà la liste des changements :

• .badge-default pour .badge-dark
• .bg-faded pour .bg-light
• .bg-inverse pour .bg-dark
• .card-block pour .card-body
• .card-outline-primary pour .border-primary
• .card-outline-secondary pour .border-secondary
• .card-outline-success pour .border-success
• .card-outline-info pour .border-info
• .card-outline-warning pour .border-warning
• .card-primary pour .bg-primary
• .card-success pour .bg-success
• .card-info pour .bg-info
• .card-warning pour .bg-warning
• .card-danger pour .bg-danger
• .hidden-xs-down pour .d-none .d-sm-block (.d-sm-inline, .d-sm-inline-block)
• .hidden-sm-down pour .d-none .d-md-block
• .hidden-md-down pour .d-none .d-lg-block
• .hidden-lg-down pour .d-none .d-xl-block
• .hidden-xs-up pour .d-none
• .hidden-sm-up pour .d-sm-none
• .hidden-md-up pour .d-md-none
• .hidden-lg-up pour .d-lg-none
• .hidden-xl-up pour .d-xl-none
• .navbar-toggleable-sm pour .navbar-expand-sm
• .navbar-toggleable-md pour .navbar-expand-md
• .navbar-toggleable-lg pour .navbar-expand-lg
• .navbar-toggleable-xl pour .navbar-expand-xl

Nouvelles couleurs

Quant au changement de l’image, c’est à dire ce que l’internaute est en mesure de vraiment remarquer, je note deux nouvelles couleurs pour les thèmes : Light (claire) et Dark (foncée).

Autres couleurs :

Pas beaucoup de changement important pour l’internaute en fin de compte. Je note même encore l’usage du style des plus laid pour les boites à cocher et les boutons radio. Le mot le plus juste est sans doute celui anglais de « ugly »! Pour plus d’information concernant la migration, consulter « Migrating to v4 ».

Bootstrap CDN

Pour utiliser Bootstrap, vous pouvez télécharger les fichiers ou simplement inclure les fichiers CSS et JavaScript compilé de Bootstrap via le CDN de Bootstrap.

Fichier CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

JavaScript, Popper, et jQuery

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Exemple de page

<!DOCTYPE html>
<html lang="fr-FR">
  <head>
    <!-- Balise méta requise -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Feuille de styles Bootstrap v4.0.0-beta -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
    <h1>Bonjour le monde!</h1>

    <!-- JavaScript optionnel -->
    <!-- jQuery en premier, suivi par Popper.js et du JavaScript de Bootstrap -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>

Références

• Bootstrap version Alpha
• Bootstrap
• GitHub
• Stackoverflow.com
• Fundation 6
• Fundation
• XY grid
• Blog - Nouvelle version du 10 aout 2017
• Reboot
• Popper.js
• Télécharger les fichiers
• Migrating to v4