Your SlideShare is downloading. ×
0
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

5,818

Published on

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,818
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
102
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Drupal Step-by-Step: How We Built Our Training site (part 2) Theming with Bootstrap
  • 2. About Me •  Dave Myburgh •  Senior Engineer at Acquia •  Lead dev on Acquia.com site
  • 3. 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
  • 4. Who’s this for? •  Themers •  Site builders •  With some experience in Drupal •  New Drupalers will learn too
  • 5. 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
  • 6. WHAT IS TWITTER BOOTSTRAP?
  • 7. 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
  • 8. 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
  • 9. •  Complete base theme drupal.org/project/bootstrap •  Selected companion modules drupal.org/node/2011034 Integrate Bootstrap with Drupal
  • 10. 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
  • 11. 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
  • 12. 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)
  • 13. 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
  • 14. 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)  
  • 15. MODULES FOR STYLING & CSS
  • 16. 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)
  • 17. Adding classes Field Formatter Class Block Class
  • 18. Demo node forms, events page
  • 19. Other bootstrap modules •  Bootstrap Field Group •  Display Suite Bootstrap Layouts •  Panels Bootstrap Layouts, Styles, Tabs
  • 20. BOOTSTRAP AND VIEWS
  • 21. Components
  • 22. 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
  • 23. Demo track page + View, homepage
  • 24. GRID & RESPONSIVE LAYOUTS
  • 25. Bootstrap Grid •  http://getbootstrap.com/css/#grid •  12 column grid •  Grid options
  • 26. Responsive tables •  http://getbootstrap.com/css/#tables-responsive
  • 27. Responsive helper classes •  http://getbootstrap.com/css/#responsive- utilities •  img-responsive (max-width: 100%; and height: auto;)
  • 28. COMPONENTS AVAILABLE
  • 29. Bootstrap CSS goodies •  lead text, lists, code, etc •  Forms: inline options •  Buttons: colors, sizes, states, grouping •  Glyphicons: icon font •  Jumbotron •  Panels •  many more…
  • 30. Demo bootstrap components documentation pages
  • 31. Bootstrap Javascript goodies •  Accordion & Carousel •  Modals (on current page or remote) •  Tooltips •  Popovers •  Affix (sticky sidebar nav)
  • 32. Demo bootstrap javascript documentation pages
  • 33. Any questions?
  • 34. Thank you!

×