Le templating rapide avec Bootstrap et les Frameworks CSS


Technique

Introduction

En tant que (bon) développeur, vous avez déjà sans doute entendu parler de ce fameux “Twitter Bootstrap”, ou tout simplement “Bootstrap”…

Si ce nom vous évoque vaguement quelque chose ou vous fait penser à un bout de strapontin, alors cet article est fait pour vous ! Car celui-ci s’adresse principalement aux personnes qui ne l’ont jamais utilisé.

 

Capture d’écran 2012 10 10 à 13.48.51 1024x784 Le templating rapide avec Bootstrap et les Frameworks CSS

Comment ça, vous n’avez jamais croisé ce genre d’interface ?! 😉

 

Pourquoi utiliser Bootstrap ? Pour quel type de site ? Et surtout dans quel intérêt ?

Nous allons tenter de vous aider en répondant à toutes ces questions sans pour autant rentrer dans le technique 😉

 

Présentation

Twitter Bootstrap est un framework CSS très puissant, permettant de développer et concevoir des frontends/backends très rapidement sans avoir à passer par de l’intégration.

Comme les autres frameworks CSS que l’on peut trouver sur internet, il dispose d’une Grid qui permet de placer les éléments avec beaucoup plus de facilité.

Mais Bootstrap se démarque des autres frameworks car il a l’avantage de :

  • Etre “Responsive” (s’adapte à la taille de l’écran, que se soit tablette, ordinateur, smartphone, etc.)
  • Fonctionner sur tous les navigateurs.
  • Possèder deux types de layout : le premier qui est fixe (la scrollbar s’affichera si nécessaire), le second qui s’adapte à la largeur du navigateur.
  • Embarquer un tas de composants prêts à l’usage (labels, badges, boutons, boutons dropdown, icônes, menus, navbar, progressbar, etc.) qui sont, qui plus est, plutôt soignés.
  • Posséder également une dizaine de composants JavaScript comme des modals, tooltip, alert, carousel, etc. permettant de donner un peu d’interaction à votre future interface.
  • D’être développé en LESS

En bref, c’est un framework très complet, et surtout agrémenté d’une très forte communauté car il est le projet le plus “forké” et le plus suivi sur Github ( environ 38 000 favoris & 9 000 forks à  l’heure où nous écrivons ces lignes).

Bootstrap peut donc vous sauver la vie et vous aider à développer un Backend complet en quelque jours seulement, sans pour autant être esthétiquement repoussant 😉

 Tour d’horizon aux pays des kits de démarrage HTML5/CSS/Javascript

Comme vous avez pu le lire précédemment, Bootstrap fait figure de leader dans le domaine des kits de démarrage CSS/HTML5/Javascript.

Même si Bootstrap semble bien loin devant ses concurrents, il ne faut pas les négliger… car malgré son avance, Bootstrap n’est pas le seul framework HTML/CSS qui existe.

Un petit panel des différentes solutions existantes :

  • Fbootstrapp : le framework est basé sur Bootstrap mais “skinné” à la Facebook. Malheureusement celui-ci n’est plus mis à jour et il n’a pas beaucoup de fonctions JavaScript intégrées.
  • Kube et 99lime sont des frameworks CSS/JS très soignés graphiquement, possédant un certain nombre de fonctionnalités CSS,  mais nous déplorons le manque d’add-ons JavaScript.
  • 99lime, Gumby et Foundation sont les trois grands concurrents. Ils disposent tous les trois d’une solide librairie CSS et JS. Foundation 3 est plus strict que ses concurrents, Gumby quant à lui propose les PSD, ainsi que l’intégration des vidéos via des classes CSS spéciales.

Capture d’écran 2012 10 12 à 14.26.16 300x280 Le templating rapide avec Bootstrap et les Frameworks CSS

Lorsque l’on y regarde de plus près, on se rend compte que tous ces frameworks CSS en sont quasiment au même point, mais un seul bénéficie d’une aussi grande popularité : Bootstrap.

D’ailleurs, lorsque l’on regarde l’histoire de Bootstrap, on remarque qu’il est issu de la première version de Foundation, ce qui explique au moins pour une petite partie la ressemblance assez frappante entre ces deux frameworks, d’un point de vue fonctionnel mais aussi graphique.

 Limites et restrictions

Nous avons vu que Bootstrap apporte un gain non négligeable de confort et de rapidité d’intégration. Néanmoins, ce framework n’est pas parfait, et a d’ailleurs été (et est toujours) critiqué dans le milieu du webdesign pour plusieurs raisons.

Tout d’abord à cause de l’uniformité des sites utilisant Bootstrap au delà du scaffolding. Bien que le nombre de thèmes disponibles aient largement augmenté depuis la naissance du projet, il reste une part de la communauté qui utilise toujours le thème “brut”.

D’autre part, ces thèmes ne sont pas toujours suffisamment éloignés de l’original pour faire oublier la patte Bootstrap. Twitter devrait rapidement trouver une solution à ce problème (il est déjà possible de personnaliser le thème de base sur le site officiel mais l’opération est fastidieuse) en proposant des thèmes officiels très différenciés – comme le fait jQuery UI par exemple -, avant que ce point noir ne devienne une raison majeure d’utiliser d’autres frameworks.

Un autre problème qui ennuie plutôt les intégrateurs cette fois-ci, vient de certaines classes et structures DOM qui n’ont pas ou peu de valeur sémantique. Par exemple, les class raw ou span2 n’existe que pour indiquer la structure du document et non son contenu. Bien que n’ayant qu’un impact mineur sur le référencement, ces techniques ne sont pas considérées comme de bonnes pratiques.

Finalement, et ce point est commun à tous les frameworks CSS, il faut savoir garder du recul et mesurer l’intérêt d’utiliser Bootstrap pour un projet.

Si le gain de temps peut être significatif dans le cas où il est aisé de faire une correspondance entre le design et le scallfolding de Bootstrap, qu’en est-il d’un site au design plus original ? Le responsive design fluide va-t-il nous faire gagner du temps ? Ou nous en faire perdre car des éléments modifiés pour un écran d’ordinateur ne sont plus compatibles avec un écran de smartphone à cause du comportement de Bootstrap ?

A ces questions de pure conception peut s’ajouter un élément crucial pour les sites à très fort trafic : Bootstrap va alourdir le projet. Au delà de la librairie CSS (dont certaines propriétés ne seront pas utilisées), de la librairie JavaScript à ajouter à jQuery, il y aura aussi une surcharge de nombre de balises HTML uniquement structurelles nécessaires au framework que l’on ne retrouverait pas dans une intégration “sur mesure”. Des points à prendre en compte au moment de peser le pour et le contre de l’utilisation de l’outil de Twitter dans un projet.

Capture d’écran 2012 10 12 à 14.32.58 300x295 Le templating rapide avec Bootstrap et les Frameworks CSS

Wrapbootstrap propose des thèmes basés sur Twitter Bootstrap

Conclusion

On peut constater que les projets de framework HTML/CSS/JavaScript comme la plupart des projets de grande envergure, se distinguent par la communauté qui les englobe. En effet une forte communauté entraîne bien souvent une meilleure documentation, un lot de plug-ins qui pourrait correspondre à nos besoins, etc.

Bootstrap, sans aucun doute, est largement en tête, sachant que la plupart des projets JavaScript aujourd’hui se servent de Bootstrap comme base pour leurs démonstrations. Si bien que jQuery UI possède son propre thème pour Bootstrap, ce qui démontre bien la volonté des projets JavaScript & Opensource de supporter Bootstrap.

Laisser un commentaire