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

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

on

  • 2,463 views

 

Statistics

Views

Total Views
2,463
Views on SlideShare
2,080
Embed Views
383

Actions

Likes
4
Downloads
50
Comments
0

3 Embeds 383

https://www.acquia.com 374
http://www.acquia.com 5
http://www.slideee.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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!