Twitter Bootstrap 3

Le framework Twitter Bootstrap passe à une nouvelle version. Présentation et explication des changements.

Depuis le 19 août 2013, Twitter a lancé la version 3 officielle du framework Bootstrap. D'importants changements en perspective puisque l'outil prend une toute autre dimension en s'orientant Mobile First. Voici quelques explications sur cette nouvelle approche et sur les nouveautés de cette version 3.


Mobile First ? Ça veut dire quoi ?

Cette expression signifie littéralement "le mobile d'abord". Il faut comprendre ça par "commençons par réfléchir en premier lieu aux mobiles". En effet, cette approche, complémentaire du Responsive Design, a pour but de bâtir une structure et une charte graphique conçue d'abord pour les smartphones et les tablettes plutôt que pour les ordinateurs.

Le Mobile First permet de réfléchir sur ce qui est important dans le site et à garder essentiellement pour les petits supports. Puis, lors du passage du site internet sur des écrans plus grands (tablettes, puis ordinateurs), on ajoute ce qui peut être considéré comme moins essentiel.

C'est donc dans cette optique que s'est orientée la version 3 de Bootstrap. Il faut penser son site web d'abord pour les smartphones, puis pour les tablettes, puis pour les ordinateurs portables, puis pour les ordinateurs de bureaux, etc. Il y a aussi une réflexion pour les écrans très grands, type télés connectées.

Cependant, rien ne vous empêche de commencer par les grands écrans. Cela sera juste un peu plus difficile car ce n'est pas prévu pour. Il faudra donc soit passer un peu plus de temps, soit mettre la main dans le CSS de Bootstrap pour l'adapter à sa convenance.


Les nouveautés de Twitter Bootstrap 3

Tout d'abord, pour bien montrer son changement visuel, Twitter Bootstrap se dote d'un nouveau thème. Moins de dégradés et d'ombres portées et plus de couleurs uniformes. Ce nouveau thème est clairement dans la tendance du Flat Design, simple mais efficace.

Comme expliqué précédemment avec le principe du Mobile First, le framework est désormais entièrement responsive. Il n'y a plus le choix entre statique et responsive, il s'adaptera automatiquement à tous les supports.

Le Framework inclut désormais la propriété border-sizing : border-box sur tous les éléments pour un meilleur contrôle de leurs tailles.

De nouveaux composants ont été ajoutés. Aux éléments existants comme les "alert", "button", "well", etc. s'ajoutent les panels et les list group, qui vont respectivement permettre de créer des boites dans lesquelles insérer le contenu et de présenter des listes de façon efficace.
Certains ont par contre été enlevés comme l'accordéon, les submenus, le typeahead (l'auto-complétion dans les champs input) et d'autres moins importants.

Enfin, la compatibilité avec Internet Explorer 7 et Firefox 3.6 n'est plus assurée. Pour Internet Explorer 8, il faudra inclure le script Respond.js pour le support des media queries.


Importante nouveauté sur la grille de Twitter Bootstrap

La nouveauté sans doute la plus importante, qui est à l'origine de l'approche Mobile First, concerne la mise à jour du système de grille.

On se retrouve avec des classes complètement repensées. Les classes container et row restent les même sauf qu'il n'y a plus besoin d'ajouter le "-fluid" pour que les éléments deviennent responsives.

Ce sont les span qui changent principalement ! Maintenant devenus des col, ces éléments s'équipent de nouvelles classes très puissantes (et nombreuses).

Pour expliquer correctement leur fonctionnement, il faut savoir que le nouveau système de grille de Bootstrap 3 se définit par 4 layouts, soit 4 différentes tailles d'écrans prédéfinies, qui sont :

  • xs, pour les smartphones
  • sm, pour les tablettes
  • md, pour les écrans d'ordinateurs jusqu'à 1199 pixels
  • lg, les grands écrans, de plus de 1200 pixels

Alors qu'avant vous ne pouviez faire que des "span8" qui passaient forcément en 100% de largeur une fois l'écran rétréci, vous pouvez désormais attribuer une taille par layout et donc avoir des classes qui ressembleront à ça :

<div class="col-xs-12 col-sm-10 col-md-9 col-lg-6">
    Ma première colonne
</div>

Vous pouvez également ajouter des "offsets" et gérer du "push" et du "pull". Leur construction est assez complexe et nous avons donc décidé d'y consacrer un article complet pour l'expliquer. Cet article fait partie d'une nouvelle série consacrée à la création d'un Helper pour CakePHP dédié à Twitter Bootstrap 3. Vous pouvez trouver tout ça en suivant ces liens :


Où le trouver ?

Consultez le site officiel de Twitter Bootstrap.