Drupal et Bootstrap

Pour intégrer un projet Drupal en s 'appuyant sur le framework Bootstrap, il faut s'équiper...

La question du thème graphique de départ se pose immédiatement. Le thème Bootstrap représente la solution la plus aboutie car il s'agit d'une véritable internalisation du framework. Son but n'est pas de faire de votre site un enième clone Vanilla mais de vous apporter une série d'utilitaires dont le génial système de grille.

Bootstrap repose sur la logique thème de base / sous-thème. Le thème de base surcharge de nombreuses fonction de thème et de preprocess de manière à ce que la structure HTML de votre site "matche" avec les fichiers CSS du framework. Votre sous-thème permet d'adapter encore plus finement la structure et la présentation graphique afin d'intégrer la véritable maquette graphique du projet en cours.

S'il est possible de charger les librairies javascript et CSS de Bootstrap depuis un serveur distant, le mieux est de les télécharger au sein du sous-thème afin de pouvoir décider des composants que l'on conserve et surcharger les variables et les styles à l'aide d'un préprocesseur CSS, au choix LESS (le choix historique du thème) ou depuis peu SASS !

Cette première étape ne suffit pas car seule la structure globale des page est désormais "bootstrapée" et responsive. Quid des entités (noeud, utilisateur, terme de taxonomie), quid des vues ?

• Pour les entités, la meilleure solution est d'utilser Display suite + Display Suite Bootstrap Layout. Très puissant, Display suite permet de gérer la présentation des champs qui compose une entité (le plus souvent les noeuds) depuis l'interface graphique du CMS et Display Suite Bootstrap Layout vous apporte de nouveaux gabarits pour y répartir les infos. Des gabarits sur plusieurs colonnes conformes aux attentes du système de grille du framework Bootstrap.
   
• L'autre composante essentielle d'un site Drupal correspond aux pages dynamiques bâties avec Views. La plupart des formats de vue traditionnels (tableau, grille) deviennent vite obsolète car non responsive ou "non compliant" avec Bootstrap. Pour y remédier, le module ad hoc est views bootstrap. Ce module apporte une quantité de nouveau "formater" : grille et rableau responsives mais également Thumbnail, Media object, acordéon, caroussel, onglets ou liste groupées. Le plus intéressant reste la présentation sous forme de grille même s'il ne gère nativement qu'un seul point de rupture. Si vous souhaitez modifier ce comportement, il faudra donc surcharger les templates ou les fonctions de preprocess des vues concernées.

En fonction de vos besoins, vous serez amener à jeter un coup d'oeil aux modules Panels Bootstrap Layouts qui suit la même logique que Display Suite Bootstrap Layout mais appliquée cette fois au template de page et non à celui des noeuds. Enfin, le module Fontello de Mark Carver, co-mainteneur du thème Bootstrap vous permet d'étendre ou de remplacer le composant glyphicon avec de nouvelles icônes issus du service éponyme.