RESPONSIVE DESIGN
WITH ZEN
AND ZEN GRIDS
About us

• Drupal consulting,

development, and training
• Founded in 2007 by Alex

and Suzanne
• Help organizations buil...
What is Zen?
What is Zen?


Extensive documentation



Comes with a fixed and responsive layouts



Accessibility features



Conten...
Content first ordering
Normalize.css
Adds styling to particular items rather than ‘re-setting’ all
HTML elements
•

Preserve useful browser defau...
Normalize.css
Avoids use of multiple selectors, which clutter up inspector
tools when de-bugging CSS.
Role Attribute
Few Settings
Uses Sass and Compass
Zen Grids
• A compass library for creating layouts
Approaches to Layouts
Writing CSS by Hand
• CSS for each layout

(two-sidebars,
sidebar-left, sidebarright, etc.)
• Need t...
What is Sass?
Sass
styles.scss

http://sass-lang.com/
Sass nesting
sass/styles.scss

css/styles.css

.block {

.block {

border: 1px solid #444;
h2 {
color: #ff0000;

border: 1...
Sass variables
sass/styles.scss
$red: #ff0000;

css/styles.css
h1, h2, h3 {

h1, h2, h3 {
color: $red;
}

color: #ff0000;
...
Sass built-in functions
sass/styles.scss

css/styles.css

$red: #ff0000;

h1, h2, h3 {

h1, h2, h3 {
color: darken($red, 2...
Mixins
sass/styles.scss
@mixin button {
border: 1px solid #000;
background: #222;
color: #fff;
padding: 5px 15px;
display:...
Extend
sass/styles.scss

css/styles.css

#block-block-1 {
border: 1px solid #000;
padding: 5px 15px;
}

#block-block-1,
#b...
Import
sass/_defaults.scss
@mixin button {
border: 1px solid #000;
background: #222;
color: #fff;
padding: 5px 15px;
displ...
What is Compass?
• Compass converts sass files to regular

css
• It provides libraries that make your life

easier
Using Compass
compass watch sites/all/themes/subtheme
OR
Use a GUI tool to run Compass
(i.e. compass.app http://compass.ha...
Using Compass Libraries
• Import compass @import compass
• Import a particular compass library

@import compass/css3
• The...
Compass Mixins
sass/styles.scss
@import “compass/css3”;
.block {
@include single-box-shadow(#888, 10px, 10px, 5px);
}

css...
Compass and Zen
• Zen includes a _base.scss file which

imports useful compass partials
sass/_base.scss

sass/blocks.scss
Zen Grids
Zen Grids
• Grid system for Zen
• Can be used separately as a compass

library
• Uses sass and compass
• zengrids.com
@import “zen”;
$zen-column-count: 16;
$zen-gutter-width: 10px;
#page {
@include zen-grid-container();
}
#sidebar-first {
@include zen-grid-item(4,1);
}
#content {
@include zen-grid-item(12,5);
}
#content {
@include zen-grid-item(12,5);
@include zen-nested-container();
}
Box Sizing
$zen-box-sizing: true;

Standard box model

Using box-sizing: border-box;

http://www.paulirish.com/2012/box-si...
Demo!
bit.ly/zen-grids
Best Practices
• Use Zen Grids
• Use Sass and Compass
• Use _custom.scss for your custom mixins

and variables
• Take adva...
Resources
•

Documentation: http://zengrids.com/

•

Webinar: https://www.acquia.com/resources/acquia-tv/
conference/creat...
Upcoming SlideShare
Loading in...5
×

Responsive Design in Drupal with Zen and Zen Grids

8,189

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
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,189
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "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

×