• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Design in Drupal with Zen and Zen Grids
 

Responsive Design in Drupal with Zen and Zen Grids

on

  • 3,267 views

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 ...

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.

Statistics

Views

Total Views
3,267
Views on SlideShare
3,013
Embed Views
254

Actions

Likes
3
Downloads
0
Comments
0

5 Embeds 254

http://evolvingweb.ca 176
http://localhost 49
http://www.drupalcampmontreal.com 16
http://drupalcampmontreal.com 8
http://www.evolvingweb.ca 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Design in Drupal with Zen and Zen Grids Responsive Design in Drupal with Zen and Zen Grids Presentation Transcript

    • RESPONSIVE DESIGN WITH ZEN AND ZEN GRIDS
    • About us • Drupal consulting, development, and training • Founded in 2007 by Alex and Suzanne • Help organizations build awesome Drupal websites with custom functionality
    • What is Zen?
    • 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
    • Content first ordering
    • 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.
    • 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 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
    • 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: 1px solid #444; } .block h2 { } } color: #ff0000; }
    • 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, 20); } color: #cc0000; }
    • 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; }
    • 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; }
    • 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; }
    • 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.handlino.com)
    • 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
    • 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; }
    • 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-sizing-border-box-ftw/
    • Demo! bit.ly/zen-grids
    • 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
    • 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