Creating ResponsiveDrupal Sites with Zen Gridsand the Zen 5 ThemeJohn Albin Wilkins and Dana DeMetPalantir.net
About Palantir.net• Founded in 1996; working with Drupal since 2006• Web strategy, design, and development firm• Team of s...
Palantir and Responsive Design• Responsive Web Design is the sustainable  approach for building “mobile-first” sites• The ...
http://drupal.org/project/zen                              00, 000                          er 7 ads!                     ...
+Zen 7.x-5.0 is the 5th major release.
+ Normalize.css                  + Respond.js+ Compass            + Zen Grids    + Responsive Design                      ...
drupal.org/project/fences
Drupal 7Drupal 7                         + Fences<div class="field-field-NAME">  <div class="field-label">      <h3 class=...
Building a Responsive Drupal Site• Configure Drupal fields with Fences• Build a Zen sub-theme• Design your layouts with Ze...
Building a Responsive Drupal Site• Configure Drupal fields with Fences• Build a Zen sub-theme• Design your layouts  with Z...
Guiding principle of Zen                     Zen makes no assumptions                     about your content and your     ...
Guiding principle of Zen                     Lean, semantic HTML5 markup                     Flexible, light-weight respon...
Drush + Zen = ♡ > drush dl zen (download Zen) > drush cc all (clear the cache) > drush zen "My First Sub-theme" first   --...
Configure your sub-theme         /admin/appearance
Configure your sub-theme     Turn off “Add Respond.js” if you want       to use a custom Modernizr script.
Re-thinkingResponsive TechniquesResponsive Techniques
Natural vs. UnnaturalBreakpointshttp://www.palantir.net/blog/re-thinking-breakpoints-responsive-design
%-based gutters
%-based gutters• They suck.
%-based gutters
em or px-based gutters                box-sizing: border-box;                       Set your gutter                   (pad...
The obvious layout method:region-based layoutsregion-based layouts                                     in                 ...
Field-based grid itemEach field becomes a                     layouts         http://www.palantir.net/experience
+A Drupal Project   A Sass/Compass Project
Zen Grids is a separate project( but it’s included with the Zen theme )                  http://zengrids.com
Writing raw layout CSS is hard• Writing 3 to 5 separate  layouts with raw CSS is  really, really, really, really,  really ...
Sass in 2 minutes• Variables    • Mixins $blue: #3bbfce;                       @mixin left($distance) {                   ...
Sass in 2 minutes   • Write in Sass.   • Have a Sass utility generate the CSS.   • Deploy the CSS.             http://sass...
Compass in 1 minute• Compass is a library of pre-defined Sass mixins.• Includes CSS3 mixins. ( Never have to mess with   v...
Installation• Command-line junkies:  Install Compass and Sass for free at:  http://sass-lang.com/tutorial.htmlAnd then run...
Zen Grids LIVE DEMO!        http://zengrids.com
Thanks!John Albin WilkinsFollow me on Twitter @JohnAlbinVisit Palantir at www.palantir.netFollow us on Twitter @palantir
Upcoming SlideShare
Loading in...5
×

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

23,691

Published on

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.

Published in: Technology
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
23,691
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
197
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide
  • Making the Web a better place means: technology - experience - content - together and in harmony
  • * Luke Wro-BLEW-ski * 2 problems — 1.) boring 2.) dangerous * DANGER: content — what goes in the the other regions?
  • Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme

    1. 1. Creating ResponsiveDrupal Sites with Zen Gridsand the Zen 5 ThemeJohn Albin Wilkins and Dana DeMetPalantir.net
    2. 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. 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. 4. http://drupal.org/project/zen 00, 000 er 7 ads! Ov nlo dow
    5. 5. +Zen 7.x-5.0 is the 5th major release.
    6. 6. + Normalize.css + Respond.js+ Compass + Zen Grids + Responsive Design ++ ARIA + Mobile First + Sass + Drush + HTML5 Shiv + IE Conditional Classes + RTL + Accessibility
    7. 7. drupal.org/project/fences
    8. 8. Drupal 7Drupal 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. 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. 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. 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. 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. 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. 14. Configure your sub-theme /admin/appearance
    15. 15. Configure your sub-theme Turn off “Add Respond.js” if you want to use a custom Modernizr script.
    16. 16. Re-thinkingResponsive TechniquesResponsive Techniques
    17. 17. Natural vs. UnnaturalBreakpointshttp://www.palantir.net/blog/re-thinking-breakpoints-responsive-design
    18. 18. %-based gutters
    19. 19. %-based gutters• They suck.
    20. 20. %-based gutters
    21. 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. 22. The obvious layout method:region-based layoutsregion-based layouts in rk 8 ta al S Dr up “Multi-Device Layout Patterns” http://www.lukew.com/ff/entry.asp?1514
    23. 23. Field-based grid itemEach field becomes a layouts http://www.palantir.net/experience
    24. 24. +A Drupal Project A Sass/Compass Project
    25. 25. Zen Grids is a separate project( but it’s included with the Zen theme ) http://zengrids.com
    26. 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. 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. 28. Sass in 2 minutes • Write in Sass. • Have a Sass utility generate the CSS. • Deploy the CSS. http://sass-lang.com
    29. 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. 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. 31. Zen Grids LIVE DEMO! http://zengrids.com
    32. 32. Thanks!John Albin WilkinsFollow me on Twitter @JohnAlbinVisit Palantir at www.palantir.netFollow us on Twitter @palantir
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×