Drupal Step-by-Step: How We Built Our Training Site, Part 2
7 likes7,983 views
The document discusses how to theme a Drupal site using Twitter Bootstrap, a popular front-end framework. It covers installing the Bootstrap base theme and modules, setting up a sub-theme using Sass, incorporating Bootstrap CSS and JS, and utilizing various Bootstrap components and responsive design features through the Views module and other modules.
Drupal Step-by-Step: How We Built Our Training Site, Part 2
- 2. Drupal Step-by-Step: How We Built Our Training site (part 2) Theming with Bootstrap
- 3. About Me • Dave Myburgh • Senior Engineer at Acquia • Lead dev on Acquia.com site
- 4. What we will cover • What is Twitter Bootstrap? • Modules for better styling and CSS • Using Bootstrap and Views • Grid system and responsive layouts • Components available
- 5. Who’s this for? • Themers • Site builders • With some experience in Drupal • New Drupalers will learn too
- 7. Requirements • Update the old design • Consistent look • Cross-browser • Easy to style new things without new styles and constant code pushes • Use SASS and Compass for the backend dev work
- 10. WHAT IS TWITTER BOOTSTRAP?
- 11. Bootstrap 3 "The most popular front-end framework for developing responsive, mobile first projects on the web." http://getbootstrap.com • made by Twitter for internal tool consistency • released as open source on Github
- 12. Bootstrap 3 Features • mobile-first, responsive • cross-browser & IE8+ • can use SASS or LESS as preprocessor OR use precompiled code • LOTS of useful CSS and JS “components” • excellent documentation and community
- 13. • Complete base theme drupal.org/project/bootstrap • Selected companion modules drupal.org/node/2011034 Integrate Bootstrap with Drupal
- 14. Bootstrap Drupal Theme • jQuery incompatibility issue – Bootstrap requires jQuery 1.7 – Views UI breaks with jQuery 1.8+ – jQuery Update module 7.x-2.5 will have a fix • CSS Preprocessor – Sub-theme uses LESS by default – Modified to use SASS
- 15. What is SASS? • http://sass-lang.com • Syntactically Awesome Style Sheets • CSS with superpowers • variables • nested rules • mixins ( = functions / scripts ) • installed locally as a Ruby gem (module) • compiled into a regular CSS file
- 16. Sub-theme setup • Default tutorial is for LESS: https://drupal.org/node/1978010 • Add bootstrap folder with JS, fonts, and (optionally) css • Either as separate components or one css/js file with everything (minified at 29kb)
- 17. SASS friendly sub-theme • (option) @import bootstrap in main .scss file • for Compass, config.rb needs require 'bootstrap-sass' • bootstrap.js (or components) added to .info • glyphicon font loaded in a scss file with @font- face
- 18. Sub-theme layout my_subtheme |_ bootstrap | |_ fonts (glyphicons-‐halfling-‐regular.*) | |_ js (separate js files, or all in bootstrap.js) | |_ css (optional -‐ bootstrap.css) |_ css | |_ styles.css (compiled css -‐ added to .info) |_ sass | |_ components (_*.scss) | |_ styles.scss (@import all the components) |_ templates | |_ *.tpl.php |_ theme | |_ *.inc (preprocess, theme) |_ my_subtheme.info |_ config.rb |_ template.php |_ ... (favicon, logo, screenshot)
- 19. MODULES FOR STYLING & CSS
- 20. Modules for better styling • 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) • Draggableviews (front-end reordering of table rows) • Gmap (event maps) • Views Bootstrap (Views styles using Bootstrap components)
- 21. Adding classes Field Formatter Class Block Class
- 22. Demo node forms, events page
- 23. Other bootstrap modules • Bootstrap Field Group • Display Suite Bootstrap Layouts • Panels Bootstrap Layouts, Styles, Tabs
- 25. Components
- 26. Views Bootstrap module • Use 7.x-3.x-dev version for Bootstrap 3 (Jan 31, 2014) • New Views styles: ○ Accordion ○ Carousel ○ Grid ○ Media Object ○ Tab ○ Table ○ Thumbnails
- 27. Demo track page + View, homepage
- 28. GRID & RESPONSIVE LAYOUTS
- 29. Bootstrap Grid • http://getbootstrap.com/css/#grid • 12 column grid • Grid options
- 31. Responsive helper classes • http://getbootstrap.com/css/#responsive- utilities • img-responsive (max-width: 100%; and height: auto;)
- 33. Bootstrap CSS goodies • lead text, lists, code, etc • Forms: inline options • Buttons: colors, sizes, states, grouping • Glyphicons: icon font • Jumbotron • Panels • many more…
- 34. Demo bootstrap components documentation pages
- 35. Bootstrap Javascript goodies • Accordion & Carousel • Modals (on current page or remote) • Tooltips • Popovers • Affix (sticky sidebar nav)
- 36. Demo bootstrap javascript documentation pages
- 37. Any questions?
- 38. Thank you!