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.

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