Upload
acquia
View
5.462
Download
1
Embed Size (px)
Citation preview
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!