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
6.
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
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
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)
