Dans la catégorie des frameworks HTML permettant de faciliter la mise en place d’un projet web, Bootstrap, from Twitter s’est rapidement fait une place de choix à côté de HTML5 Boilerplate et de Zurb Fondation. (Je ne parle pas de Blueprint, 960.gs ou de 940.css version fixe ou fluide qui sont plutôt des frameworks CSS pour aligner des blocs sur une grille de mise en page.) Mais au fait, c’est quoi un framework HTML ? Un tel outil devrait inclure une structure de fichiers normalisée, quelques trucs pour mettre les navigateurs au garde-à-vous et des fichiers HTML servant de fondations pour des projets différents.
The HTML Framework Project
L’idée d’un environnement de travail intégré n’est pas nouvelle. En remontant dans le temps, je suis retombé sur The HTML Framework Project que j’avais relayé ici dès 2008 dans une série d’article commencée avec The HTML Framework Project | Phase 1 — définir.
Bootstrap, Fondation et HTML5 Boilerplate
Bootstrap et Fondation ont une vocation globale en proposant des d’éléments d’interface graphique. Cet aspect GUI a toujours été le talon d’Achille du langage HTML par rapport à des langages de programmation qui offrent des nomenclatures unifiées pour créer des applications.
En plus d’un système de grille, Fondation et Bootstrap proposent des éléments d’interface simples : bouton, formulaire, label ; ou plus complexes : boites modales, navigation par onglets horizontale ou verticale, menus déroulants, pagination ou encore fil d’Ariane, etc.
Pour les objets plus complexes, les deux frameworks utilisent des plugins Javascript qui font appel à la bibliothèque jQuery. A ce petit jeu, Bootstrap est certainement le plus complet.
HTML5 Boilerplate ne propose pas d’élément d’interface. Son domaine c’est la structure globale du projet, ce qui se passe entre les balises <head> et </head> et juste avant la fermeture du </body>, sans oublier les aspects liés aux performances du serveur avec un fichier .htaccess très complet. Tout cela en fait un complément «Bonnes Pratiques» idéal à Bootstrap ou Fondation.
Alors, les frameworks, c’est bien ou pas ?
J’aurai tendance à dire que tout dépend de votre projet, de vos compétences, du temps dont vous disposez, etc. Mais en réalité, la réponse est assez simple : il est important de passer du temps à faire de la veille pour se documenter et apprendre de nouvelles techniques. Le potentiel didactique de ces frameworks est presque inépuisable.
N’hésitez pas à visiter les dépôts Github des projets pour vous faire une idée. Vous serez ainsi de plus en plus capable de choisir votre framework (ou de ne pas en utiliser du tout) en connaissance de cause.
En bref : ne vous laissez pas enfermer dans un framework : les langages du web ont été conçus pour être utilisé simplement, là tout de suite ; les frameworks imposent de se pencher sur une surcouche qui n’est pas toujours la meilleure façon de faire. Il est important de n’utiliser dans ses projets que des choses que l’on comprend bien (enfin au moins dans votre coeur de métier).
PS : Voir aussi 99lime HTML KickStart qui propose la gestion de la typographie, tooltips, boutons, navigation par onglets (tabs), fil d’Ariane, système de grille fluide en 12 colonnes, images, Slideshow (Carousel), Media, etc.
Je ne suis pas d’accord avec toi sur le « En bref » et sur le niveau de compétences.
Un framework sert à gagner du temps, ce n’est pas quelque chose destiné à tel niveau de compétences.
Pourquoi se prendre la tête à créer une structure html/css » from scratch « , qui devra être compatible sur un maximum de navigateurs/smartphones, ainsi que certains éléments prisés (tabs nav… modals…) quand on a des toolkits comme twitter bootstrap ?
Je suis développeur rubyonrails et la plupart du temps, le client ne fournit pas de design, il veut un backend fonctionnel. Quand je présente une page d’accueil/login/inscription/administration sous bootstrap, il sont tous très content de la propreté et de la rapidité.
Ensuite quand le designer montre son nez, il intègre son travail efficacement sur une base saine, sans perdre de temps à faire des « hacks » css pour rendre compatible sur tel ou tel navigateur.
ça rend tout le monde content: le client, le dev backend, le designer.
badfoo > Pourquoi se prendre la tête ? Ben, je dirais simplement que c’est mon métier. Je comprends qu’en tant que développeur tu n’ai pas envie de de casser la tête, tout comme moi, en tant qu’intégrateur, je préfère utiliser WordPress plutôt que me prendre la tête à développer mon propre CMS. Si Bootstrap correspond à tes besoins, je n’ai qu’une chose à dire : fonce !
Mon propos s’adresse aux intégrateurs et aux webdesigners qui doivent travailler sur des maquettes diverses et variées qui ne « rentreront » pas forcément dans un frameworks (quel qu’il soit).
Ceci dit, je suis le premier prendre ce qui m’intéresse dans les frameworks CSS qui passe à portée de souris, mais j’essaie de digérer mes acquis pour rester libre d’utiliser la meilleure technique possible, plutôt qu’essayer de tout faire entrer dans une logique qui n’est pas forcément adaptée pour tout.