Drupal Step-by-Step: How We Built Our Training site

(part 2) Theming with Bootstrap

About Me

•  Dave Myburgh •  Senior Engineer at

Acquia

•  Lead dev on Acquia.com site

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

Who’s this for?

•  Themers •  Site builders •  With some experience in Drupal •  New Drupalers will learn too

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

WHAT IS TWITTER BOOTSTRAP?

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

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

•  Complete base theme drupal.org/project/bootstrap

•  Selected companion modulesdrupal.org/node/2011034

Integrate Bootstrap with Drupal

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

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

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)

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

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)  

MODULES FOR STYLING & CSS

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)

Adding classes Field Formatter Class Block Class

Demo node forms, events page

Other bootstrap modules

•  Bootstrap Field Group •  Display Suite Bootstrap Layouts •  Panels Bootstrap Layouts, Styles, Tabs

BOOTSTRAP AND VIEWS

Components

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

Demo track page + View, homepage

GRID & RESPONSIVE LAYOUTS

Bootstrap Grid •  http://getbootstrap.com/css/#grid •  12 column grid •  Grid options

Responsive tables •  http://getbootstrap.com/css/#tables-responsive

Responsive helper classes •  http://getbootstrap.com/css/#responsive-

utilities •  img-responsive (max-width: 100%; and height: auto;)

COMPONENTS AVAILABLE

Bootstrap CSS goodies

•  lead text, lists, code, etc •  Forms: inline options •  Buttons: colors, sizes, states, grouping •  Glyphicons: icon font •  Jumbotron •  Panels •  many more…

Demo bootstrap components documentation pages

Bootstrap Javascript goodies

•  Accordion & Carousel •  Modals (on current page or remote)

•  Tooltips •  Popovers •  Affix (sticky sidebar nav)

Demo bootstrap javascript documentation pages

Any questions?

Thank you!