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

  • 4,674 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,674
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
64
Comments
0
Likes
5

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!