Boostrap pour 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 ...