Le document présente une introduction au framework Bootstrap pour Drupal, visant à aider les développeurs à créer des thèmes compatibles et responsive. Il fournit également des liens vers des ressources et modules utiles pour améliorer l'expérience de thématisation avec Bootstrap. Sophie Bonnin, graphiste webdesigner, partage ses connaissances et outils pour optimiser l'utilisation de Bootstrap dans les projets Drupal.

1. Bootstrap pour Drupal
Drink and Drupal - 17/06/2015 Montpellier

2. Je me présente... @sographik
Sophie BONNIN
Graphiste Webdesigner Freelance
www.sographik.com
sographik@gmail.com
@sographik
Thémeur niveau intermédiaire

3. Le framework Bootstrap créé par Twitter
Pourquoi Bootstrap ?
Mobile first - Responsive
Compatible avec tous les navigateurs et IE8+
Pleins de composants CSS et JS qui facilite la vie
Possibilité d’utiliser SASS ou LESS
Plus d’infos : http://getbootstrap.com/

4. Pour apprendre à utiliser Bootstrap
Le site Bootstrap 3
une super documentation :
http://getbootstrap.com/
Prenez en main Bootstrap, des tutos :
http://openclassrooms.com/courses/prenez-en-main-bootstrap
http://www.opentuto.com/informatique/maitriser-bootstrap-3-par-la-pratique/

5. La grille Bootstrap

6. Structure de base d’un fichier html Bootstrap

7. Installer un sous-thème Bootstrap : Comment ? (sans LESS)
Documentation : https://www.drupal.org/node/1978010
Le thème Bootstrap pour Drupal : https://www.drupal.org/project/bootstrap
Installation : Installer le thème Bootstrap de base dans sites/all/themes
Module requis :
- Jquery update : https://www.drupal.org/project/jquery_update
Bootstrap 3 a besoin de la version jQuery 1.9 ou +
Créer votre sous-thème :
- Copier le dossier «bootstrap_subtheme» dans sites/all/themes
- Renommer le dossier: my_bootstrap_theme. Renommer le fichier .info : the bootstrap_
subtheme.info.starterkit en lui donnat le même nom que le dossier de sous-thème créé :
my_bootstrap_theme.info.
- Apparence > «Activer et choisir par défaut» votre sous-thème

8. Des modules Bootstrap Drupal très utiles !
Display Suite Bootstrap :
https://www.drupal.org/project/ds_bootstrap_layouts
Bootstrap views :
https://www.drupal.org/project/views_bootstrap
Bootstrap Library :
https://www.drupal.org/project/bootstrap_library
Pour les fans de Panels :
https://www.drupal.org/project/panels_bootstrap_layouts
et pleins d’autres :
https://www.drupal.org/node/2011034

9. Des modules pour vous aider à thémer
• Field Group (HTML5 elements for groups)
• Field Formatter Class (custom class on fields)
• Block Class (custom class on blocks)
• Font Awesome (cool icons just with a class)
Et une extension chrome pratique et utile
«Bootstrap Overlay»
Des modules pour vous aider à thémer !

10. D’autres frameworks à proposer ?
Parlons de Less et Sass ...