SlideShare a Scribd company logo
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
modules
drupal.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!
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2

More Related Content

What's hot

Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Cedric Spillebeen
 
Site Building Checklist DrupalCamp Ottawa
Site Building Checklist DrupalCamp OttawaSite Building Checklist DrupalCamp Ottawa
Site Building Checklist DrupalCamp Ottawa
Suzanne Dergacheva
 
Top 20 mistakes you will make on your 1st Drupal project
Top 20 mistakes you will make on your 1st Drupal projectTop 20 mistakes you will make on your 1st Drupal project
Top 20 mistakes you will make on your 1st Drupal project
Iztok Smolic
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
Jubair Ahmed Junjun
 
Twitter bootstrap and Drupal
Twitter bootstrap and DrupalTwitter bootstrap and Drupal
Twitter bootstrap and Drupal
Sujith Nara
 
Node.js 101
 Node.js 101 Node.js 101
Node.js 101
FITC
 
Responsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen GridsResponsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen Grids
Suzanne Dergacheva
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
Diacode
 
Web Development Intro
Web Development IntroWeb Development Intro
Web Development Intro
Cindy Royal
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
Zunair Sagitarioux
 
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...
Mediacurrent
 
Simplifying End-user Drupal 7 Content Administration
Simplifying End-user Drupal 7 Content Administration Simplifying End-user Drupal 7 Content Administration
Simplifying End-user Drupal 7 Content Administration
Aidan Foster
 
Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8
Acquia
 
Drupal 8 - A Brief Introduction
Drupal 8 - A Brief IntroductionDrupal 8 - A Brief Introduction
Drupal 8 - A Brief Introduction
Jeff Geerling
 
Bootstrap Web Development Framework
Bootstrap Web Development FrameworkBootstrap Web Development Framework
Bootstrap Web Development Framework
Cindy Royal
 
Tech talk on Tailwind CSS
Tech talk on Tailwind CSSTech talk on Tailwind CSS
Tech talk on Tailwind CSS
Squareboat
 
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeMinimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Suzanne Dergacheva
 
Drupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs PanelsDrupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs Panels
David Burns
 
Upgrading to Drupal 8: Benefits and Gotchas
Upgrading to Drupal 8: Benefits and GotchasUpgrading to Drupal 8: Benefits and Gotchas
Upgrading to Drupal 8: Benefits and Gotchas
Suzanne Dergacheva
 

What's hot (20)

Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
Bootstrap 3 - Sleek, intuitive, and powerful mobile first front-end framework...
 
Site Building Checklist DrupalCamp Ottawa
Site Building Checklist DrupalCamp OttawaSite Building Checklist DrupalCamp Ottawa
Site Building Checklist DrupalCamp Ottawa
 
Top 20 mistakes you will make on your 1st Drupal project
Top 20 mistakes you will make on your 1st Drupal projectTop 20 mistakes you will make on your 1st Drupal project
Top 20 mistakes you will make on your 1st Drupal project
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
 
Twitter bootstrap and Drupal
Twitter bootstrap and DrupalTwitter bootstrap and Drupal
Twitter bootstrap and Drupal
 
Node.js 101
 Node.js 101 Node.js 101
Node.js 101
 
Responsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen GridsResponsive Design in Drupal with Zen and Zen Grids
Responsive Design in Drupal with Zen and Zen Grids
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
 
Web Development Intro
Web Development IntroWeb Development Intro
Web Development Intro
 
Responsive web-design through bootstrap
Responsive web-design through bootstrapResponsive web-design through bootstrap
Responsive web-design through bootstrap
 
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...
Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...
 
Simplifying End-user Drupal 7 Content Administration
Simplifying End-user Drupal 7 Content Administration Simplifying End-user Drupal 7 Content Administration
Simplifying End-user Drupal 7 Content Administration
 
Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8Everything You Need to Know About the Top Changes in Drupal 8
Everything You Need to Know About the Top Changes in Drupal 8
 
Drupal 8 - A Brief Introduction
Drupal 8 - A Brief IntroductionDrupal 8 - A Brief Introduction
Drupal 8 - A Brief Introduction
 
Bootstrap Web Development Framework
Bootstrap Web Development FrameworkBootstrap Web Development Framework
Bootstrap Web Development Framework
 
Tech talk on Tailwind CSS
Tech talk on Tailwind CSSTech talk on Tailwind CSS
Tech talk on Tailwind CSS
 
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeMinimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
 
Drupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs PanelsDrupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs Panels
 
Upgrading to Drupal 8: Benefits and Gotchas
Upgrading to Drupal 8: Benefits and GotchasUpgrading to Drupal 8: Benefits and Gotchas
Upgrading to Drupal 8: Benefits and Gotchas
 
Forensic Theming for Drupal
Forensic Theming for DrupalForensic Theming for Drupal
Forensic Theming for Drupal
 

Similar to Drupal Step-by-Step: How We Built Our Training Site, Part 2

Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)
Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)
Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)
Guust Nieuwenhuis
 
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon BaltimoreCreating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Suzanne Dergacheva
 
Know the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkKnow the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css framework
Omkarsoft Bangalore
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an Overview
Matt Weaver
 
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
La Drupalera
 
Twitter Bootstrap Presentation
Twitter Bootstrap PresentationTwitter Bootstrap Presentation
Twitter Bootstrap PresentationDuy Do Phan
 
Modern Theming & The Future of WordPress- Working with Full Site Editing and ...
Modern Theming & The Future of WordPress- Working with Full Site Editing and ...Modern Theming & The Future of WordPress- Working with Full Site Editing and ...
Modern Theming & The Future of WordPress- Working with Full Site Editing and ...
WP Engine
 
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationWebpack and Web Performance Optimization
Webpack and Web Performance Optimization
Chen-Tien Tsai
 
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Anupam Ranku
 
Theming moodle technical
Theming moodle   technicalTheming moodle   technical
Theming moodle technicalAlex Walker
 
WordPress Theme Design and Development Workshop - Day 2
WordPress Theme Design and Development Workshop - Day 2WordPress Theme Design and Development Workshop - Day 2
WordPress Theme Design and Development Workshop - Day 2
Mizanur Rahaman Mizan
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)
Eugenio Minardi
 
Theme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.orgTheme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.org
ThemeHorse
 
full-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptxfull-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptx
Plasterdog Web Design
 
Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4
Derek Jacoby
 
Drupal Skils Lab 302Labs
Drupal Skils Lab 302Labs Drupal Skils Lab 302Labs
Drupal Skils Lab 302Labs
Ahmad Mohamad Zain
 
Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016
David Brattoli
 
WordPress Themes 101 - PSUWeb13 Workshop
WordPress Themes 101 - PSUWeb13 WorkshopWordPress Themes 101 - PSUWeb13 Workshop
WordPress Themes 101 - PSUWeb13 Workshop
Curtiss Grymala
 
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Asish Padhy
 

Similar to Drupal Step-by-Step: How We Built Our Training Site, Part 2 (20)

Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)
Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)
Ready? Bootstrap! Go! (CFUG Belgium 24 04-2012)
 
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon BaltimoreCreating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
 
Know the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkKnow the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css framework
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an Overview
 
Efficient theming in Drupal
Efficient theming in DrupalEfficient theming in Drupal
Efficient theming in Drupal
 
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
 
Twitter Bootstrap Presentation
Twitter Bootstrap PresentationTwitter Bootstrap Presentation
Twitter Bootstrap Presentation
 
Modern Theming & The Future of WordPress- Working with Full Site Editing and ...
Modern Theming & The Future of WordPress- Working with Full Site Editing and ...Modern Theming & The Future of WordPress- Working with Full Site Editing and ...
Modern Theming & The Future of WordPress- Working with Full Site Editing and ...
 
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationWebpack and Web Performance Optimization
Webpack and Web Performance Optimization
 
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
 
Theming moodle technical
Theming moodle   technicalTheming moodle   technical
Theming moodle technical
 
WordPress Theme Design and Development Workshop - Day 2
WordPress Theme Design and Development Workshop - Day 2WordPress Theme Design and Development Workshop - Day 2
WordPress Theme Design and Development Workshop - Day 2
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)
 
Theme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.orgTheme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.org
 
full-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptxfull-site-editing-theme-presentation.pptx
full-site-editing-theme-presentation.pptx
 
Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4Untangling the web - fall2017 - class 4
Untangling the web - fall2017 - class 4
 
Drupal Skils Lab 302Labs
Drupal Skils Lab 302Labs Drupal Skils Lab 302Labs
Drupal Skils Lab 302Labs
 
Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016
 
WordPress Themes 101 - PSUWeb13 Workshop
WordPress Themes 101 - PSUWeb13 WorkshopWordPress Themes 101 - PSUWeb13 Workshop
WordPress Themes 101 - PSUWeb13 Workshop
 
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
 

More from Acquia

Acquia_Adcetera Webinar_Marketing Automation.pdf
Acquia_Adcetera Webinar_Marketing Automation.pdfAcquia_Adcetera Webinar_Marketing Automation.pdf
Acquia_Adcetera Webinar_Marketing Automation.pdf
Acquia
 
Acquia Webinar Deck - 9_13 .pdf
Acquia Webinar Deck - 9_13 .pdfAcquia Webinar Deck - 9_13 .pdf
Acquia Webinar Deck - 9_13 .pdf
Acquia
 
Taking Your Multi-Site Management at Scale to the Next Level
Taking Your Multi-Site Management at Scale to the Next LevelTaking Your Multi-Site Management at Scale to the Next Level
Taking Your Multi-Site Management at Scale to the Next Level
Acquia
 
CDP for Retail Webinar with Appnovation - Q2 2022.pdf
CDP for Retail Webinar with Appnovation - Q2 2022.pdfCDP for Retail Webinar with Appnovation - Q2 2022.pdf
CDP for Retail Webinar with Appnovation - Q2 2022.pdf
Acquia
 
May Partner Bootcamp 2022
May Partner Bootcamp 2022May Partner Bootcamp 2022
May Partner Bootcamp 2022
Acquia
 
April Partner Bootcamp 2022
April Partner Bootcamp 2022April Partner Bootcamp 2022
April Partner Bootcamp 2022
Acquia
 
How to Unify Brand Experience: A Hootsuite Story
How to Unify Brand Experience: A Hootsuite Story How to Unify Brand Experience: A Hootsuite Story
How to Unify Brand Experience: A Hootsuite Story
Acquia
 
Using Personas to Guide DAM Results: How Life Time Pumped Up Their UX and CX
Using Personas to Guide DAM Results: How Life Time Pumped Up Their UX and CXUsing Personas to Guide DAM Results: How Life Time Pumped Up Their UX and CX
Using Personas to Guide DAM Results: How Life Time Pumped Up Their UX and CX
Acquia
 
Improve Code Quality and Time to Market: 100% Cloud-Based Development Workflow
Improve Code Quality and Time to Market: 100% Cloud-Based Development WorkflowImprove Code Quality and Time to Market: 100% Cloud-Based Development Workflow
Improve Code Quality and Time to Market: 100% Cloud-Based Development Workflow
Acquia
 
September Partner Bootcamp
September Partner BootcampSeptember Partner Bootcamp
September Partner Bootcamp
Acquia
 
August partner bootcamp
August partner bootcampAugust partner bootcamp
August partner bootcamp
Acquia
 
July 2021 Partner Bootcamp
July  2021 Partner BootcampJuly  2021 Partner Bootcamp
July 2021 Partner Bootcamp
Acquia
 
May Partner Bootcamp
May Partner BootcampMay Partner Bootcamp
May Partner Bootcamp
Acquia
 
DRUPAL 7 END OF LIFE IS NEAR - MIGRATE TO DRUPAL 9 FAST AND EASY
DRUPAL 7 END OF LIFE IS NEAR - MIGRATE TO DRUPAL 9 FAST AND EASYDRUPAL 7 END OF LIFE IS NEAR - MIGRATE TO DRUPAL 9 FAST AND EASY
DRUPAL 7 END OF LIFE IS NEAR - MIGRATE TO DRUPAL 9 FAST AND EASY
Acquia
 
Work While You Sleep: The CMO’s Guide to a 24/7/365 Lead Machine
Work While You Sleep: The CMO’s Guide to a 24/7/365 Lead MachineWork While You Sleep: The CMO’s Guide to a 24/7/365 Lead Machine
Work While You Sleep: The CMO’s Guide to a 24/7/365 Lead Machine
Acquia
 
Acquia webinar: Leveraging Drupal to Bury Your Sales Team In B2B Leads
Acquia webinar: Leveraging Drupal to Bury Your Sales Team In B2B LeadsAcquia webinar: Leveraging Drupal to Bury Your Sales Team In B2B Leads
Acquia webinar: Leveraging Drupal to Bury Your Sales Team In B2B Leads
Acquia
 
April partner bootcamp deck cookieless future
April partner bootcamp deck  cookieless futureApril partner bootcamp deck  cookieless future
April partner bootcamp deck cookieless future
Acquia
 
How to enhance cx through personalised, automated solutions
How to enhance cx through personalised, automated solutionsHow to enhance cx through personalised, automated solutions
How to enhance cx through personalised, automated solutions
Acquia
 
DRUPAL MIGRATIONS AND DRUPAL 9 INNOVATION: HOW PAC-12 DELIVERED DIGITALLY FOR...
DRUPAL MIGRATIONS AND DRUPAL 9 INNOVATION: HOW PAC-12 DELIVERED DIGITALLY FOR...DRUPAL MIGRATIONS AND DRUPAL 9 INNOVATION: HOW PAC-12 DELIVERED DIGITALLY FOR...
DRUPAL MIGRATIONS AND DRUPAL 9 INNOVATION: HOW PAC-12 DELIVERED DIGITALLY FOR...
Acquia
 
Customer Experience (CX): 3 Key Factors Shaping CX Redesign in 2021
Customer Experience (CX): 3 Key Factors Shaping CX Redesign in 2021Customer Experience (CX): 3 Key Factors Shaping CX Redesign in 2021
Customer Experience (CX): 3 Key Factors Shaping CX Redesign in 2021
Acquia
 

More from Acquia (20)

Acquia_Adcetera Webinar_Marketing Automation.pdf
Acquia_Adcetera Webinar_Marketing Automation.pdfAcquia_Adcetera Webinar_Marketing Automation.pdf
Acquia_Adcetera Webinar_Marketing Automation.pdf
 
Acquia Webinar Deck - 9_13 .pdf
Acquia Webinar Deck - 9_13 .pdfAcquia Webinar Deck - 9_13 .pdf
Acquia Webinar Deck - 9_13 .pdf
 
Taking Your Multi-Site Management at Scale to the Next Level
Taking Your Multi-Site Management at Scale to the Next LevelTaking Your Multi-Site Management at Scale to the Next Level
Taking Your Multi-Site Management at Scale to the Next Level
 
CDP for Retail Webinar with Appnovation - Q2 2022.pdf
CDP for Retail Webinar with Appnovation - Q2 2022.pdfCDP for Retail Webinar with Appnovation - Q2 2022.pdf
CDP for Retail Webinar with Appnovation - Q2 2022.pdf
 
May Partner Bootcamp 2022
May Partner Bootcamp 2022May Partner Bootcamp 2022
May Partner Bootcamp 2022
 
April Partner Bootcamp 2022
April Partner Bootcamp 2022April Partner Bootcamp 2022
April Partner Bootcamp 2022
 
How to Unify Brand Experience: A Hootsuite Story
How to Unify Brand Experience: A Hootsuite Story How to Unify Brand Experience: A Hootsuite Story
How to Unify Brand Experience: A Hootsuite Story
 
Using Personas to Guide DAM Results: How Life Time Pumped Up Their UX and CX
Using Personas to Guide DAM Results: How Life Time Pumped Up Their UX and CXUsing Personas to Guide DAM Results: How Life Time Pumped Up Their UX and CX
Using Personas to Guide DAM Results: How Life Time Pumped Up Their UX and CX
 
Improve Code Quality and Time to Market: 100% Cloud-Based Development Workflow
Improve Code Quality and Time to Market: 100% Cloud-Based Development WorkflowImprove Code Quality and Time to Market: 100% Cloud-Based Development Workflow
Improve Code Quality and Time to Market: 100% Cloud-Based Development Workflow
 
September Partner Bootcamp
September Partner BootcampSeptember Partner Bootcamp
September Partner Bootcamp
 
August partner bootcamp
August partner bootcampAugust partner bootcamp
August partner bootcamp
 
July 2021 Partner Bootcamp
July  2021 Partner BootcampJuly  2021 Partner Bootcamp
July 2021 Partner Bootcamp
 
May Partner Bootcamp
May Partner BootcampMay Partner Bootcamp
May Partner Bootcamp
 
DRUPAL 7 END OF LIFE IS NEAR - MIGRATE TO DRUPAL 9 FAST AND EASY
DRUPAL 7 END OF LIFE IS NEAR - MIGRATE TO DRUPAL 9 FAST AND EASYDRUPAL 7 END OF LIFE IS NEAR - MIGRATE TO DRUPAL 9 FAST AND EASY
DRUPAL 7 END OF LIFE IS NEAR - MIGRATE TO DRUPAL 9 FAST AND EASY
 
Work While You Sleep: The CMO’s Guide to a 24/7/365 Lead Machine
Work While You Sleep: The CMO’s Guide to a 24/7/365 Lead MachineWork While You Sleep: The CMO’s Guide to a 24/7/365 Lead Machine
Work While You Sleep: The CMO’s Guide to a 24/7/365 Lead Machine
 
Acquia webinar: Leveraging Drupal to Bury Your Sales Team In B2B Leads
Acquia webinar: Leveraging Drupal to Bury Your Sales Team In B2B LeadsAcquia webinar: Leveraging Drupal to Bury Your Sales Team In B2B Leads
Acquia webinar: Leveraging Drupal to Bury Your Sales Team In B2B Leads
 
April partner bootcamp deck cookieless future
April partner bootcamp deck  cookieless futureApril partner bootcamp deck  cookieless future
April partner bootcamp deck cookieless future
 
How to enhance cx through personalised, automated solutions
How to enhance cx through personalised, automated solutionsHow to enhance cx through personalised, automated solutions
How to enhance cx through personalised, automated solutions
 
DRUPAL MIGRATIONS AND DRUPAL 9 INNOVATION: HOW PAC-12 DELIVERED DIGITALLY FOR...
DRUPAL MIGRATIONS AND DRUPAL 9 INNOVATION: HOW PAC-12 DELIVERED DIGITALLY FOR...DRUPAL MIGRATIONS AND DRUPAL 9 INNOVATION: HOW PAC-12 DELIVERED DIGITALLY FOR...
DRUPAL MIGRATIONS AND DRUPAL 9 INNOVATION: HOW PAC-12 DELIVERED DIGITALLY FOR...
 
Customer Experience (CX): 3 Key Factors Shaping CX Redesign in 2021
Customer Experience (CX): 3 Key Factors Shaping CX Redesign in 2021Customer Experience (CX): 3 Key Factors Shaping CX Redesign in 2021
Customer Experience (CX): 3 Key Factors Shaping CX Redesign in 2021
 

Recently uploaded

FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
nkrafacyberclub
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
RinaMondal9
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
Peter Spielvogel
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
Dorra BARTAGUIZ
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 

Recently uploaded (20)

FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
 
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfSAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 

Drupal Step-by-Step: How We Built Our Training Site, Part 2

  • 1.
  • 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
  • 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
  • 8.
  • 9.
  • 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)  
  • 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
  • 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
  • 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…
  • 35. Bootstrap Javascript goodies •  Accordion & Carousel •  Modals (on current page or remote) •  Tooltips •  Popovers •  Affix (sticky sidebar nav)