Responsive Design in Drupal with Zen and Zen Grids

  • 5,164 views
Uploaded 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 …

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.

More in: Technology , Spiritual
  • 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
5,164
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
0
Comments
0
Likes
7

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. RESPONSIVE DESIGN WITH ZEN AND ZEN GRIDS
  • 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. What is Zen?
  • 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. Content first ordering
  • 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. Normalize.css Avoids use of multiple selectors, which clutter up inspector tools when de-bugging CSS.
  • 8. Role Attribute
  • 9. Few Settings
  • 10. Uses Sass and Compass
  • 11. Zen Grids • A compass library for creating layouts
  • 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. What is Sass?
  • 14. Sass styles.scss http://sass-lang.com/
  • 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. Sass variables sass/styles.scss $red: #ff0000; css/styles.css h1, h2, h3 { h1, h2, h3 { color: $red; } color: #ff0000; }
  • 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. 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. 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. 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. What is Compass?
  • 22. • Compass converts sass files to regular css • It provides libraries that make your life easier
  • 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. 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. 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. Compass and Zen • Zen includes a _base.scss file which imports useful compass partials sass/_base.scss sass/blocks.scss
  • 27. Zen Grids
  • 28. Zen Grids • Grid system for Zen • Can be used separately as a compass library • Uses sass and compass • zengrids.com
  • 29. @import “zen”;
  • 30. $zen-column-count: 16; $zen-gutter-width: 10px;
  • 31. #page { @include zen-grid-container(); }
  • 32. #sidebar-first { @include zen-grid-item(4,1); }
  • 33. #content { @include zen-grid-item(12,5); }
  • 34. #content { @include zen-grid-item(12,5); @include zen-nested-container(); }
  • 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. Demo! bit.ly/zen-grids
  • 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. 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