Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bootstrap 3 sur drupal

938 views

Published on

Boostrap pour Drupal

Published in: Technology
  • Be the first to comment

Bootstrap 3 sur drupal

  1. 1. Bootstrap pour Drupal Drink and Drupal - 17/06/2015 Montpellier
  2. 2. Je me présente... @sographik Sophie BONNIN Graphiste Webdesigner Freelance www.sographik.com sographik@gmail.com @sographik Thémeur niveau intermédiaire
  3. 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. 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. 5. La grille Bootstrap
  6. 6. Structure de base d’un fichier html Bootstrap
  7. 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. 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. 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. 10. D’autres frameworks à proposer ? Parlons de Less et Sass ...

×