Responsive Design in Drupal with Zen and Zen Grids
12 likes12,527 views
The document outlines the services of a Drupal consulting firm founded by Alex and Suzanne in 2007, focusing on creating customizable Drupal websites. It details the use of Zen and Zen Grids frameworks, including features such as responsive layouts, Sass, and Compass integration for better stylesheet management. Best practices for utilizing these tools, as well as links to additional resources, are also provided.
Responsive Design in Drupal with Zen and Zen Grids
- 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
- 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.
- 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?
- 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”;
- 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/
- 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