Twitter vient de mettre en ligne la nouvelle version de son framework front-end Bootstrap3, toujours disponible sous licence Apache 2.0. Faisons un tour rapide pour examiner toutes les nouveautés de cette version :

Documentation

Elle est un peu plus riche, surtout avec la présence de bonnes pratiques (très intéressantes) pour créer des interfaces accessibles aux mal voyants : utilisation de la class .sr-only qui ne sera utilisée que par les screen readers.

Look and feel

Un look plus Flat et des couleurs pastelles (style très épuré, minimaliste et très à la mode actuellement surtout pour les applications mobiles) avec comme toujours la possibilité de personnaliser son Bootstrap via le site.

Bootstrap 3 utilise la même police que la version 2 mais en moins gras (plus fin, va très bien avec le nouveau style Flat)

Responsive Design

Mobile Friendly : Bootstrap 3 est Responsive par défaut (peut être désactivé via une petite modification sur les fichiers ccs ou less) donc plus besoin de rajouter bootstrap-responsive.css à votre projet mobile. Il existe des classes telles que visible-xs ou hidden-xs qui permettent de changer le rendu de votre projet selon la taille de l’écran du device utilisé :

  • xs = extra-small devices < 768px
  • sm = small devices >= 768px
  • md =medium devices et desktop >= 992px
  • lg = large devices et desktop >= 1200px
  • print = visible pour l’impression

Compatibilité navigateurs

Certaines difficulté existaient déjà dans les anciennes versions, cette fois Bootstrap abandonne clairement le support de certains navigateurs :

  • Chromium et IE7 ne sont plus officiellement supportés mais on nous promet un rendu potable sur les deux.
  • Vu que certaines propriétés CSS3 ne sont pas supportées sur IE8 et IE9, certaines fonctionnalités telles que les bords arrondis, les ombres et les placeholders ne sont toujours pas supportés par ces navigateurs.
  • Safari sur Windows n’est plus supporté.
  • Un petit script js fourni sur le site est nécessaire pour faire fonctionner correctement vos projets sur les mobile windows 8 avec IE10, ceci est due à un conflit sur le navigateur entre la largeur du device et le viewport.

Grid system

Bootstrap 3 offre un nouveau système de grid Mobile Friendly, encore basé sur 12 colonnes, mais basé aussi sur la taille du périphérique qui affiche la page.

Exemple :

<div class=”col-xs-12 col-md-6”/>

Sur un mobile qui a une résolution < 768px (Extra Small Devices) la div utilisera toute la largeur de l’ecran(12 colonnes sur les 12 disponibles), tandis que sur une desktop ou un device avec une résolution > 992px (medium ou desktop) la div utilisera que la moitié de la largeur(6 sur 12 colonnes).

Les offsets des Grid sont gérés avec le même principe :

<div class="col-md-§ col-md-offset-3"/>

La div se positionnera à l’offset 3 et occupera la moitié de la taille de l’écran.

Les Grids fils sont désormais découpés en 12 colonnes et n’héritent plus du nombre de colonnes de la Grid parente (par défaut il sont en mode Fluid Nesting).

Bootstrap 3 propose également un nouveau système de pull et push sur les Grid qui facilite la gestion de l’ordre des balises.

Formulaires

Les objet de Formulaires doivent avoir une class form-control pour que le style par défaut soit appliqué dessus.

Apparition d’un nouveau système plus riche pour faire des input-group plus complexes.

Plugins

Après l’annonce de l’abandon de la dépendance des Glyphicon dans les premières betas, les voila de retour sur cette version avec 180 nouvelles icônes.

Pour les fonctionnalités JavaScript, seul le plugin Typeahead semble avoir été supprimé. aucun changement majeur n’est à noter sur les autres.

 

En conclusion, que du neuf sur cette nouvelle version, le mobile est mis beaucoup plus en valeur, le nouveau style épuré choisi est intéressant à mon goût et surtout une meilleure gestion du multi-device render qui facilite beaucoup le travail des développeurs UI multi-plateformes.

En revanche la mise à jour d’un projet réalisé avec Bootstrap 2 vers Bootstrap 3 me semble complexe à faire à cause de la refonte totale du système de Grid et de formulaires qui sont en fait les deux fonctionnalités les plus utilisées dans la majorité des projets utilisant bootstrap. Pour vous aider, la liste des classes changées ou fraîchement rajoutées à Bootstrap 3 sont disponibles dans la documentation :http://getbootstrap.com/getting-started/#migration