Responsive Design in Drupal with Zen and Zen Grids

10,824 views

Published on

Slides presented at DrupalCamp Montreal 2013. Walks through the features of the Zen theme, how to use Sass and Compass, and finally, how to use Zen Grids to change the layout. Conclusion: Zen Grids simplifies the process of changing the layout, so makes responsive design a lot easier to implement.

Published in: Technology, Spiritual
1 Comment
11 Likes
Statistics
Notes
  • how way to download this slide?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
10,824
On SlideShare
0
From Embeds
0
Number of Embeds
364
Actions
Shares
0
Downloads
0
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

Responsive Design in Drupal with Zen and Zen Grids

  1. 1. RESPONSIVE DESIGN WITH ZEN AND ZEN GRIDS
  2. 2. About us • Drupal consulting, development, and training • Founded in 2007 by Alex and Suzanne • Help organizations build awesome Drupal websites with custom functionality
  3. 3. What is Zen?
  4. 4. What is Zen?  Extensive documentation  Comes with a fixed and responsive layouts  Accessibility features  Content-first source ordering  Uses normalize.css  Sass and compass integration  Zen grids
  5. 5. Content first ordering
  6. 6. Normalize.css Adds styling to particular items rather than ‘re-setting’ all HTML elements • Preserve useful browser defaults rather than erasing them. • Normalize styles for a wide range of HTML elements. • Correct bugs and common browser inconsistencies. • Improve usability with subtle improvements. • Explain the code using comments and detailed documentation.
  7. 7. Normalize.css Avoids use of multiple selectors, which clutter up inspector tools when de-bugging CSS.
  8. 8. Role Attribute
  9. 9. Few Settings
  10. 10. Uses Sass and Compass
  11. 11. Zen Grids • A compass library for creating layouts
  12. 12. Approaches to Layouts Writing CSS by Hand • CSS for each layout (two-sidebars, sidebar-left, sidebarright, etc.) • Need to modify a lot of CSS to make a new layout Modify the Markup • Add classes to each element (i.e. grid-12) • CSS fixed for each class • Need to modify HTML to make a layout
  13. 13. What is Sass?
  14. 14. Sass styles.scss http://sass-lang.com/
  15. 15. Sass nesting sass/styles.scss css/styles.css .block { .block { border: 1px solid #444; h2 { color: #ff0000; border: 1px solid #444; } .block h2 { } } color: #ff0000; }
  16. 16. Sass variables sass/styles.scss $red: #ff0000; css/styles.css h1, h2, h3 { h1, h2, h3 { color: $red; } color: #ff0000; }
  17. 17. Sass built-in functions sass/styles.scss css/styles.css $red: #ff0000; h1, h2, h3 { h1, h2, h3 { color: darken($red, 20); } color: #cc0000; }
  18. 18. Mixins sass/styles.scss @mixin button { border: 1px solid #000; background: #222; color: #fff; padding: 5px 15px; display: inline-block; } input#edit-submit { @include button; } css/styles.css input#edit-submit { border: 1px solid #000; background: #222; color: #fff; padding: 5px 15px; display: inline-block; }
  19. 19. Extend sass/styles.scss css/styles.css #block-block-1 { border: 1px solid #000; padding: 5px 15px; } #block-block-1, #block-block-2 { border: 1px solid #000; padding: 5px 15px; } #block-block-2 { @extend #block-block-1; background: red; } #block-block-2 { background: red; }
  20. 20. Import sass/_defaults.scss @mixin button { border: 1px solid #000; background: #222; color: #fff; padding: 5px 15px; display: inline-block; } sass/styles.scss @import “defaults”; input#edit-submit { @include button; } css/styles.css input#edit-submit { border: 1px solid #000; background: #222; color: #fff; padding: 5px 15px; display: inline-block; }
  21. 21. What is Compass?
  22. 22. • Compass converts sass files to regular css • It provides libraries that make your life easier
  23. 23. Using Compass compass watch sites/all/themes/subtheme OR Use a GUI tool to run Compass (i.e. compass.app http://compass.handlino.com)
  24. 24. Using Compass Libraries • Import compass @import compass • Import a particular compass library @import compass/css3 • These files include variables and mixins that you can include in your own code http://compass-style.org/reference
  25. 25. Compass Mixins sass/styles.scss @import “compass/css3”; .block { @include single-box-shadow(#888, 10px, 10px, 5px); } css/styles.css .block { -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888; }
  26. 26. Compass and Zen • Zen includes a _base.scss file which imports useful compass partials sass/_base.scss sass/blocks.scss
  27. 27. Zen Grids
  28. 28. Zen Grids • Grid system for Zen • Can be used separately as a compass library • Uses sass and compass • zengrids.com
  29. 29. @import “zen”;
  30. 30. $zen-column-count: 16; $zen-gutter-width: 10px;
  31. 31. #page { @include zen-grid-container(); }
  32. 32. #sidebar-first { @include zen-grid-item(4,1); }
  33. 33. #content { @include zen-grid-item(12,5); }
  34. 34. #content { @include zen-grid-item(12,5); @include zen-nested-container(); }
  35. 35. Box Sizing $zen-box-sizing: true; Standard box model Using box-sizing: border-box; http://www.paulirish.com/2012/box-sizing-border-box-ftw/
  36. 36. Demo! bit.ly/zen-grids
  37. 37. Best Practices • Use Zen Grids • Use Sass and Compass • Use _custom.scss for your custom mixins and variables • Take advantage of included compass libraries (see _base.scss) • Keep your layout in responsive-sidebars.scss
  38. 38. Resources • Documentation: http://zengrids.com/ • Webinar: https://www.acquia.com/resources/acquia-tv/ conference/creating-responsive-drupal-sites-zen-gridsand-zen-5-theme-july-19 • Best practices for Sass: https://github.com/anthonyshort/ idiomatic-sass • Resizing Bookmarklet: http://lab.maltewassermann.com/ viewport-resizer • http://compass-style.org/reference • http://zengrids.com

×