Too many responsive websites fall into the "move the sidebars around" trap and end up looking the same as any other responsive site. By combining the CSS of Zen Grids and the smart markup of the Zen 5 theme, you can create a stellar, unique responsive design for your website with ease. Zen has always been a popular starting point for building Drupal themes, but the new Zen 5 has been re-written from the ground-up with updated best practices including HTML5, Modernizr integration, Normalize, IE conditional classes, responsive layouts, and, best of all, Sass and Compass integration. Zen Grids is an all new project, independent from the Zen theme. The Zen Grids system reinvents the flexible, but complicated CSS layout method in old versions of the Zen theme, transforming it into a radically simplified process using the power of Sass. Where traditional grid systems (like 960.gs) often don't scale to match a responsive design's requirements, Zen Grids makes it incredibly easy to create amazing responsive layouts in just a couple lines of code.

1. Creating Responsive
Drupal Sites with Zen Grids
and the Zen 5 Theme
John Albin Wilkins and Dana DeMet
Palantir.net

2. About Palantir.net
• Founded in 1996; working with Drupal since 2006
• Web strategy, design, and development firm
• Team of senior-level Drupal and Web experts
• Leading contributors to Drupal core, contributed
modules, and community
• Enterprise Select Acquia Partner

3. Palantir and Responsive Design
• Responsive Web Design is the sustainable
approach for building “mobile-first” sites
• The mobile device landscape is growing and
changing rapidly
• Zen 5 and Zen Grids are built to embrace that
change
• Zen 5 and Zen Grids are battle-tested and ready to
use today

4. http://drupal.org/project/zen
00, 000
er 7 ads!
Ov nlo
dow

5. +
Zen 7.x-5.0 is the 5th major release.

6. + Normalize.css
+ Respond.js
+ Compass + Zen Grids
+ Responsive Design
+
+ ARIA + Mobile First
+ Sass + Drush
+ HTML5 Shiv + IE Conditional Classes
+ RTL
+ Accessibility

7. drupal.org/project/fences

8. Drupal 7
Drupal 7 + Fences
<div class="field-field-NAME">
<div class="field-label"> <h3 class="field-label">
LABEL:&nbsp; LABEL
</div> </h3>
<div class="field-items"> <ELEMENT class="field-NAME">
<div>VALUE 1</div> VALUES
<div>VALUE 2</div> </ELEMENT>
</div>
</div>

9. Building a Responsive Drupal Site
• Configure Drupal fields with Fences
• Build a Zen sub-theme
• Design your layouts with Zen Grids
and Sass

10. Building a Responsive Drupal Site
• Configure Drupal fields with Fences
• Build a Zen sub-theme
• Design your layouts
with Zen Grids
and Sass

11. Guiding principle of Zen
Zen makes no assumptions
about your content and your
design.
It does the most minimally
useful thing for all designs and
then gets the hell out of your way.
http://palantir.net/blog/all-new-zen-same-guiding-principles

12. Guiding principle of Zen
Lean, semantic HTML5 markup
Flexible, light-weight responsive
framework
http://palantir.net/blog/all-new-zen-same-guiding-principles

13. Drush + Zen = ♡
> drush dl zen (download Zen)
> drush cc all (clear the cache)
> drush zen "My First Sub-theme" first
--description="Our example theme."
--without-rtl
Starter kit for "My First Sub-theme" created in:
/sites/all/themes/first

14. Configure your sub-theme
/admin/appearance

15. Configure your sub-theme
Turn off “Add Respond.js” if you want
to use a custom Modernizr script.

16. Re-thinking
Responsive Techniques
Responsive Techniques

17. Natural vs. Unnatural
Breakpoints
http://www.palantir.net/blog/re-thinking-breakpoints-responsive-design

18. %-based gutters

19. %-based gutters
• They suck.

20. %-based gutters

21. em or px-based gutters
box-sizing: border-box;
Set your gutter
(padding) in em or px.
Set your column
widths in %.
http://paulirish.com/2012/box-sizing-border-box-ftw/

22. The obvious layout method:
region-based layouts
region-based layouts
in
rk 8
ta al
S
Dr up
“Multi-Device Layout Patterns”
http://www.lukew.com/ff/entry.asp?1514

23. Field-based grid item
Each field becomes a
layouts
http://www.palantir.net/experience

24. +
A Drupal Project A Sass/Compass Project

25. Zen Grids is a separate project
( but it’s included with the Zen theme )
http://zengrids.com

26. Writing raw layout CSS is hard
• Writing 3 to 5 separate
layouts with raw CSS is
really, really, really, really,
really hard.
• Sass makes its easy.
• Sass is just CSS syntax +
awesomesauce.
• Learning Sass will save
you time. Immediately.

27. Sass in 2 minutes
• Variables • Mixins
$blue: #3bbfce; @mixin left($distance) {
float: left;
.text { margin-left: $distance;
color: $blue; }
}
.box { .picture {
border-color: $blue; @include left(10px);
} }
.text { .picture {
color: #3bbfce; float: left;
} margin-left: 10px;
.box { }
border-color: #3bbfce;
}
http://sass-lang.com

28. Sass in 2 minutes
• Write in Sass.
• Have a Sass utility generate the CSS.
• Deploy the CSS.
http://sass-lang.com

29. Compass in 1 minute
• Compass is a library of pre-defined Sass mixins.
• Includes CSS3 mixins. ( Never have to mess with
vendor prefixes again. )
• Includes vertical rhythm helper mixins.
• Includes standardized IE Legacy variables. (Turn on
or off IE 6/7/8 support with ease.)
$legacy-support-for-ie6: false;
• Includes image sprite generation mixins.
• Zen Grids requires Compass.
http://compass-style.org

30. Installation
• Command-line junkies:
Install Compass and Sass for free at:
http://sass-lang.com/tutorial.htmlAnd then run:
gem install compass
gem install zen
• Command-line haters:
Get Fire.app for $14 at:
http://fireapp.handlino.com

31. Zen Grids LIVE DEMO!
http://zengrids.com

32. Thanks!
John Albin Wilkins
Follow me on Twitter @JohnAlbin
Visit Palantir at www.palantir.net
Follow us on Twitter @palantir