Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

BDUG Responsive Web Theming - 7/23/12

Berkeley Drupal Users Group (BDUG)
Slides from 7/23/12 presentation on Responsive Web Theming with Zen 5, Sass, and Compass

  • Login to see the comments

BDUG Responsive Web Theming - 7/23/12

  1. 1. Slides• Slideshare webtheming20120723• UC Berkeley: IST Drupal 2
  2. 2. Agenda• Introduction• Responsive Web Design• Base Theme: Zen 5• CSS Preprocessing• Sass• Compass• Zen Starterkit• Demo• Preview Berkeley Panopoly theme• Q&A 3
  3. 3. One Website on Multiple Devices 4
  4. 4. Mobile v. Babies Luke Wroblewski “Why Mobile Matters” February 2012 “1.27M mobile devices sold or activated per day compared to 371,124 children born” 5
  5. 5. Responsive Web Design• Coined by Ethan Marcotte• Three Parts: 1. CSS3 media queries 2. Fluid or flexible layouts 3. Flexible images• Device Independence: Users viewing your site on a broad range of devices will be accessing the same content 6
  6. 6. What does a responsive website look like?• Online tools • • • responsive-web-design• Design examples •• Navigation Patterns • • for_navigation 7
  7. 7. Media Queries• CSS2 introduced the concept of media queries• HTML files with separate stylesheets for screen and print <link rel="stylesheet" type="text/css" media="screen" href="screen.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css">• CSS stylesheets @media screen { * { font-family: sans-serif } } 8
  8. 8. Media Queries• CSS3: W3C extended the functionality of media queries • Check for particular media features like width, height, and color • Tailor styles to a specific range of devices without changing the content itself• Implemented via the @import rule in CSS @import url(style480min.css) screen and (min-width: 480px);• Used in the HTML <link> media attribute <link rel="stylesheet" type="text/css" media="screen and (min-width: 480px)" href="style480min.css" /> 9
  9. 9. Media Queries• Or most commonly used directly in a style sheet (from Zen responsive-sidebars.css): @media all and (min-width: 480px) { #main { padding-top: 3em; position: relative; } #navigation { position: absolute; top: 0; height: 3em; width: 100%; } } 10
  10. 10. Fluid or Flexible Layouts• Before responsive web design: Fixed, fluid, elastic? Fixed: Fluid: Elastic: #container { #container { #container { width: 400px; width: 40%; width: 25em; } } } Adjusts to Size elements Control and user’s screen with ems (relative consistency resolution unit based on font size) 11
  11. 11. Responsive Grids 12
  12. 12. Flexible Images and Media• Scaling images and video in CSS is straightforward by setting the max-width to 100%. img { max-width: 100%; }• Performance considerations: May be taking up bandwidth to serve a high-resolution image to a device that isn’t using it 13
  13. 13. Responsive Base Themes • Zen 5 • Adaptive Theme • Omega 14
  14. 14. Why Zen 5?• Terrific documentation• Clean organization• Best practices ( HTML5 Optional IE6/7 Support HTML shiv Documentation Responsive Design Swappable Layouts Sass/Compass Drush Support CSS RTL Language Support Zen Grids Accessibility Normalize CSS Respond.js IE Conditional Classes 15
  15. 15. CSS Preprocessing• Sounds more complicated than it is• “I already know CSS; no time to learn something new”• Easy to get started• Just an extension of CSS – use as much or as little as desired• Sass ( or Less ( • Allow you to write cleaner and easier-to-read code • Run through CSS preprocessor – transforms into typical CSS • Can just write css, so easy to "sassify” or “lessify” existing CSS files• Live websites are running CSS (compiled by Sass) 16
  16. 16. Sass• “Syntactically awesome style sheets”• Getting started: • • compass• Written in Ruby; installed via Ruby package manager; don’t need to learn Ruby to use 17
  17. 17. Sass• Mac OS X: Ruby already installed! (update if desired) ruby --version or ruby –v• Windows: Ruby installer (• Linux: Install via favorite package manager• Install Sass: gem install sass 18
  18. 18. Sass• Two syntaxes • .sass (Sass – older syntax for those who like terseness; indentation instead of braces and semicolons) • .scss (Sassy CSS – default syntax of Sass 3)• Default SCSS syntax is a superset of CSS • Allows you to write CSS and only add SCSS when you need it • Every CSS file is a valid SCSS file 19
  19. 19. Sass Examples 20
  20. 20. Sass Examples 21
  21. 21. Sass Examples 22
  22. 22. Sass Examples 23
  23. 23. Compass• Open Source CSS Authoring Framework • Uses Sass • Makes things easier • Library of functions and add-ons to do common things• Install Compass: gem install compass• Using Compass (outside of Zen 5, Drupal): compass help Primary Commands: * clean - Remove generated files and the sass cache * compile - Compile Sass stylesheets to CSS * create - Create a new compass project * init - Add compass to an existing project * watch - Compile Sass stylesheets to CSS when they change 24
  24. 24. CSS before Compass 25
  25. 25. Compass 26
  26. 26. Compass: CSS module 27
  27. 27. Compass: Sprites Image sprites • Performance boost by fetching all images at once • Difficult to create and manage Example: Baron Wanschers, LimoenGroen (Lime Green): CSS: 28
  28. 28. Zen 5• Already set up to use Sass and Compass• STARTERKIT (see zen/STARTERKIT/README.txt) • Copy the STARTERKIT folder, place under sites/all/themes and rename Copy “sites/all/themes/zen/STARTERKIT” To “sites/all/themes/foo” • Rename “” as “” and update name and description • In template.php and theme-settings.php: Replace ALL occurrences of "STARTERKIT" with “foo” • Set default theme at admin/appearance• Or use drush: drush zen "Foo Theme" foo 29
  29. 29. Zen 5• Review Files • Standard Drupal theme files • Standard folders • Sass-related files/folders• Using Sass and Compass with Zen 5 From root of your sub-theme folder: compass clean //removes existing css files so they can be regenerated compass watch //watches the “sass” directory //anytime a .scss file is changed, .css auto-generated //includes debug feature for syntax errors during development //launch compass watch and leave running (if needed, re-launch terminal) //can look at css generated but eventually just work with scss files 30
  30. 30. Zen Grids 31
  31. 31. Zen 5: Production• When ready to move to production… See and zen/STARTERKIT/sass/README.txt• Update CSS files, minify, and aggregate for performance: • compass clean • edit config.rb by uncommenting “#environment = :production” • turn on CSS aggregation 32
  32. 32. Tools• FireSass for Firebug: US/firefox/addon/firesass-for-firebug/• ZenGrids:• If you don’t like the command line: • (Mac, Linux, PC) • (Mac, Linux, PC) • Codekit: (Mac) 33
  33. 33. Berkeley Panopoly• Berkeley Panopoly Theme• Panopoly 34
  34. 34. Next Steps Pilots • Administration & Finance • Office of the Chancellor • BAS: Parking & Transportation • Campus IT35