Le développement de HTML5 a fait émerger des framework HTML/CSS qui permettent d'accélérer et d'industrialiser la création de webdesign de site internet.

Ces frameworks proposent en général un système de positionnement par grille, un ensemble d'éléments d'interface graphique prédéfinis, des icônes et pictogrammes, ainsi qu'une couche de Javascript qui remplace allégrement un framework JS comme jQuery UI.

Boostrap de Twitter

Le plus populaire d'entre eux s'appelle Bootstrap, développé par les geeks qui travaillent chez Twitter. Le bootstrap apporte de nombreuses fonctionnalités et offre l'avantage d'être très bien documenté sur son site officiel : http://twitter.github.io/bootstrap/, voici une petite liste de ses fonctions :

• Responsive design : pour avoir une mise en page qui s'adapte à la largeur de l'écran (ordinateur de bureau, tablette, smartphone).
• Système de scaffolding qui sert à prototyper une page en très peu de temps, grâce à une grille CSS de 12 colonnes avec un mode fixe et un mode fluide, ainsi que plusieurs layouts prédéfinis utilisé pour créer un menu à gauche ou à droite par exemple.
• Mise en forme des tableaux HTML (<table>).
• Plusieurs modes de présentation pour les formulaires HTML.
• Boutons prédéfinis, de plusieurs couleurs et différentes tailles, avec des features (extensions comme menu déroulant...).
• Jeu d'icônes à base de police iconique très simple à utiliser et léger à charger
• Composants d'interface graphique :
  • Menu déroulant
  • Barre de navigation
  • Fil d'Ariane (breadcrumb)
  • Bloc de pagination
  • Messages d'alerte
  • Barre de progression en CSS
  • Classes CSS helper
• Surcouche Javascript basé sur jQuery qui propose une série de fonctionnalités telle que les popin (boite modale), les transitions, le scrollspy (auto scroll à défilement automatique), une fonctionnalité infobulle en JS ou encore le module carrousel (diaporama).

Et en plus, le bootstrap est disponible sur un CDN public pour vous éviter d'avoir à l'héberger vous même : http://current.bootstrapcdn.com/. Le bootstrap de twitter est utilisé par de nombreux sites comme le forum excel ou encore dans mon extension CopyAllURL pour Google Chrome.

HTML5 Boilerplate

Ce framework est un kit de démarrage pour site internet HTML5. Il est moins riche que le bootstrap de twitter mais il offre des fonctionnalités comme un reset CSS (Normalise.css) ou le script JS Modernizr qui sert à faire de la détection de fonctionnalité, pour savoir si le navigateur est compatible avec les dernières fonctionnalités de CSS3 ou HTML5. On y trouve également une bibliothèque d'icônes.

Son avantage par rapport au bootrstrap de twitter et sa légèreté, donc il peut être un choix judicieux si vous cherchez un framework simple (inutile d'utiliser le bootstrap si vous n'utilisez pas ses fonctionnalités). Site officiel : http://html5boilerplate.com/.

960 Grid System

960gs est l'un des premiers framework CSS a être sorti. Aujourd'hui il est un peu dépassé par rapport aux autres car il ne propose qu'une grille CSS (c'est même ce framework qui a quasiment inventé ce concept). Site officiel : http://960.gs/.

La page du jour est afficher/masquer l'onglet développeur dans excel, bonne lecture.

Blueprint framework

Blueprint est très proche du bootstrap twitter dans son approche, c'est-à-dire qu'il fournit à la fois une grille et des composants d'interface graphique comme des alertes, et la mise en forme de formulaires.

Cependant, il est plus vieux et moins complet que bootstrap, et son développement est moins actif. Site officiel : http://www.blueprintcss.org/.

Quel framework HTML choisir ?

Personnellement j'utilise surtout le bootstrap, surtout pour créer des back-offices ou en tout cas des interfaces fonctionnelles. Pour ce genre d'utilisation, les framework CSS font gagner énormément de temps et on peut obtenir un résultat très propre, abouti et fonctionnel avec un minimum de travail. Les icônes permettent d'enrichir rapidement l'interface pour la rendre plus ludique et agréable pour les utilisateurs.

L'utilisé de ce genre d'outil pour le frontoffice est plus discutable, puisqu'en général le front est désigné par un graphiste et passe ensuite par une phase d'intégration HTML/CSS très spécifique au cours de laquelle les nombreux composants prédéfinis ne sont pas forcément d'une grande utilité.

Encore faim ? allez lire ça : effet brouillon !