Installation et personnalisation d'un thème Bootstrap - Partie 1

logo bootstrap
Pas un site digne de ce nom n'apparait aujourd'hui sans être « responsive design » - ou « site web adaptatif » pour les adeptes de la langue de Molière . Pour rappel, ce joli nom signifie que selon le nombre de pixels offert par l'appareil qui consulte un site web, on obtient un affichage différent. En effet, du smartphone basic, aux écrans ultra HD, le nombre de pixels horizontaux disponible pour l'affichage peut être multiplié par 10. Une seule solution, l'adaptation !

Ce site web fournira un excellent exemple : Diminuez la taille horizontale du navigateur et observons :

Grand écran :

juliesibi.net sur gd écran

Petit écran :

Le menu du haut se verticalise, et la taille diminue. Les bulles jaunes se réorganisent. Le contenu reste le même, mais sa disposition change afin de s'adapter à la taille disponible. Le responsive deisgn est illustré par la phrase « content is like water » : Le contenu, c'est comme l'eau, il doit s'adapter au récipient qui l'accueille.

Sans rentrer dans les détails, cette adaptation est possible grace à la balise @media qui permet de définir des propriétés CSS différentes à un élément selon le nombre de pixels horizontals qui lui sont disponibles.

 

Plus d'information sur le site de mozilla : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Plusieurs techniques sont possibles afin d'effectuer un tel site sur drupal. La première consisterait à réinventer l'eau chaude en créant totalement son propre thème, et en créant une feuille de style responsive. Pour ceux n'ayant pas les 100 prochains jours disponibles devant eux pour s'atteler à cette tâche, des thèmes drupal offre une boite à outils afin de faire du responsive design, simplement et rapidement. Les plus connus sont Iomega, zen, et bootstrap.

Cet article concerne la mise en place avec Bootstrap. Bootstrap est un projet créé à l'origine par des employés de Twitter, il a ensuite été placé sous licence open source, avant de conquérir rapidement une communauté et le web. Il offre des biblliothèques javascript, et des fauilles de styles css dédié à la mise en forme de la page web, et en particulier, un certains nombre de classes et d'outils pour faire du responsive design. Très vite un thème Bootstrap a vu le jour dans drupal afin de bénéficier des outils de ce framwork dans notre CMF préféré.

A l'heure de l'écriture de cet article, la seule version recommandé en production est la version 7.x-3.0, cet article concerne donc cette version.

Prérequis

 

Afin de créer un sous thème bootstrap en suivant cet article, il vous faudra :

  • Une installation de drupal 7 fonctionnelle.

  • Le module jquery update, en effet bootstrap 3 nécessite au minimum jquery 1,9 pour fonctionner.

  • Un compilateur less : En effet afin de gagner en efficacité, bootstrap est articulé sur une évolution de css, qui s'appelle less, et qui doit être compilé en fichier css afin d'être interprétable par les navigateurs. (en savoir d'avantage sur less : https://en.wikipedia.org/wiki/Less_(stylesheet_language) )

  • Des notions de bases en theming drupal seront conseillés pour comprendre ce que vous faîtes en lisant cette suite d'article.

  • Il peut être utile d'en savoir plus sur bootstrap, je ne peux donc que vous conseiller l'excellent article d'openclassrooms sur le sujet : https://openclassrooms.com/courses/prenez-en-main-bootstrap

Téléchargement du thème

Il faut d'abord installer le thèe bootstrap qu'on ne modifiera pas directement afin de réaliser un sous thème.

Sous drush :

drush dl bootstrap

Pour les autres : https://www.drupal.org/project/bootstrap

Les fichiers sont téléchargés dans sites/all/themes/bootstrap

Création du dossier sous thème et téléchargement des dernières sources de bootstrap.

Il convient de faire une copie du répertoire bootstrap_subtheme (qui se trouve dans sites/all/themes/bootstrap) dans le répertoire sites/all/themes/ portant le nom de votre theme.
Supposons pour la suite de cet exemple que mon theme sera nommé bootjs. Je crée donc une copie.

Sous linux :

 cp -R sites/all/themes/bootstrap/bootstrap_subtheme sites/all/themes/bootjs

Il convient ensuite comme pour nimporte quel thème drupal de modifier le fichier .info.

On trouve dans le répertoire précédemment copié, un fichier bootstrap_subtheme.info.starterkit . Il faut le renommer en bootjs.info.

On notera que l'on trouve également dans ce répertoire le classique template.php, ainsi que le dossier templates...

Il faut ensuite télécharger les dernières sources de bootstrap (le framework, pas le thème drupal) afin de bénéficier de toutes les mises à jours. Rendez vous sur getbootstrap.com.pour la dernière version. Celle ci doivent figurer dans un répertoire bootstrap dans votre sous thème.

Sous linux :

wget https://github.com/twbs/bootstrap/archive/v3.3.5.zip
unzip v3.3.5.zip -d sites/all/themes/bootjs/
mv sites/all/themes/bootjs/

 

Edition du fichier bootjs.info :

 

On éditera les deux premières lignes afin de donner le nom de notre sous thème :

name = Jsnet Bootstrap
description = Sous thème bootstrap du site JulienSibi.net
core = 7.x
base theme = bootstrap

Il faut ensuite indiquer dans le fichier info que bootstrap ne doit pas utiliser de cdn, mais les sources précédemment téléchargés. Pour ceci, on décommentera les lignes contenant les sources, ainsi que bootstrap. On ajoutera également le fichier bootstrap.min.css.

Voici le résultat :

;;;;;;;;;;;;;;;;;;;;;
;; Stylesheets
;;;;;;;;;;;;;;;;;;;;;

stylesheets[all][] = css/style.css
stylesheets[all][] = bootstrap/css/bootstrap.min.css

; For information on choosing the desired method, please read the Drupal
; Bootstrap sub-theme "how-to" documentation:
; https://drupal.org/node/1978010

; ;----------------------------------
; ; METHOD 1: Bootstrap Source Files
; ;----------------------------------

; ;;;;;;;;;;;;;;;;;;;;;
;; Scripts
; ;;;;;;;;;;;;;;;;;;;;;

scripts[] = 'bootstrap/js/affix.js'
scripts[] = 'bootstrap/js/alert.js'
scripts[] = 'bootstrap/js/button.js'
scripts[] = 'bootstrap/js/carousel.js'
scripts[] = 'bootstrap/js/collapse.js'
scripts[] = 'bootstrap/js/dropdown.js'
scripts[] = 'bootstrap/js/modal.js'
scripts[] = 'bootstrap/js/tooltip.js'
scripts[] = 'bootstrap/js/popover.js'
scripts[] = 'bootstrap/js/scrollspy.js'
scripts[] = 'bootstrap/js/tab.js'
scripts[] = 'bootstrap/js/transition.js'


; ; Disable BootstrapCDN if using Bootstrap source files in your sub-theme.

settings[bootstrap_cdn] = '

 

Compilation du fichier less

 

Il convient maintenant de compiler le fichier styles.less en style.css. On se place dans le répertoire du thème, et la commande est la suivante :

 lessc less/style.less css/style.css

Il est probable que l'on obtienne l'erreur suivante :

julotdev@juliensibi:~/www/sites/all/themes/bootjs$ lessc less/style.less css/style.css
NameError: variable @link-hover-decoration is undefined in /var/www/julotdev/www/sites/all/themes/bootjs/bootstrap/less/scaffolding.less on line 55, column 22:
54 color: @link-hover-color;
55 text-decoration: @link-hover-decoration;

 

Rien d'inquiétant, Cette erreur est du au fait que le fichier bootjs/less/variable.less est encore issu de la vieille version du sous-thème, il convient de la remplacer avec celle contenu dans les sources précédemment tléchargés :

 

cp bootstrap/less/variables.less less/variables.less

Puis, cette fois ci tout devrait fonctionner, c'est à dire que la commande lessc ne retournera pas d'erreur.

Activation du thème et paramètrage de jquery

Avant d'activer le thème, il convient de vider les caches de drupal, puis dans appearance, on devrait voir notre nouveau thème apparaître, et ensuite pouvoir l'activer.

Une fois celui-ci activer, penser a régler jquery_update sur une version 1.9 au minimum.