Responsive Zen

1,497 views
1,326 views

Published on

Using Drupal's Zen 5 theme with Zen Grids to create a responsive website. Zen is a great starting point for building a responsive theme. The addition of Zen Grids to Zen 5 makes working with media query breakpoints and positioning elements a hassle free experience.

Published in: Design, Technology, Spiritual
3 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total views
1,497
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
41
Comments
3
Likes
5
Embeds 0
No embeds

No notes for slide

Responsive Zen

  1. 1. Responsive Zen USING DRUPAL'S ZEN 5 THEME WITH ZEN GRIDS TO CREATE A RESPONSIVE WEBSITE DRUPAL GOVERNMENT DAYS 2013
  2. 2. Who am I? Onaje Johnston PhD Information Technology Specialist @ National Agriculture Library USDA Onaje.Johnston@ars.usda.gov DRUPAL GOVERNMENT DAYS 2013
  3. 3. Topics  - Benefits of using Zen 5 as a base theme  - Benefits of Zen Grids, and how to get started  - Example of a responsive theme created using Zen 5 and Zen Grids DRUPAL GOVERNMENT DAYS 2013
  4. 4. Reaching Zen  By way of Omega and other themes.  The mission - create a responsive Drupal 7 website.  Background research indicated Omega would probably the best choice.  Downloaded and installed Omega and started experimenting on first sub theme.  Stumbling block – non standard customizations not included in Omega. DRUPAL GOVERNMENT DAYS 2013
  5. 5. Zen  One of the most downloaded and the most installed Drupal themes. Quickly build responsive sites. Zen is also a good theme for beginners.  Zen comes in two variations, a strict XHTML compliant version and a HTML5 version. *The HTML5 version is responsive.*  The theme has SASS/Compass integration and uses the Zen Grids framework.  Built in responsive 2, 3, and 5 column fluid grid design and can be extended. DRUPAL GOVERNMENT DAYS 2013
  6. 6. Zen  Reasons to use Zen:  Zen is especially suited to creating responsive sites that do not follow the standard navigation pattern built into most responsive themes.  It is a great starting point if you find yourself having to remove and replace multiple features if you planned to use one of the other popular responsive base themes.  Makes theme creation easier because it has a smaller number of files you could potentially edit when creating a new theme.  The addition of Zen Grids to Zen 5 makes working with media query breakpoints and positioning elements a very easy process. DRUPAL GOVERNMENT DAYS 2013
  7. 7. Syntactically Awesome Style Sheets What is SASS & Compass  “SASS is a framework for writing CSS in a more efficient and logical way.”  Compass – CSS authoring framework that streamlines the creation and maintenance of CSS - a HUGE library of mixins built on Sass  You must have Ruby installed  Run:  Compass requires Sass; it will install Sass as part of its installation. ~$ gem install compass DRUPAL GOVERNMENT DAYS 2013
  8. 8. Creating a Zen sub theme  Download Zen 5  Copy STARTERKIT folder in the Zen theme folder [sites/all/themes/zen] to main themes folder [sites/all/themes]  Rename the folder to the name of your new sub-theme  Go into the folder, rename the STARTERKIT.info.txt file to name_of_theme.info  STARTERKIT.info.txt -> demo.info  Edit the theme info file, look for a line that has the name and description  Give your theme a name and optionally edit the description DRUPAL GOVERNMENT DAYS 2013
  9. 9. Creating a Zen sub theme  Define new theme regions or other customizations as needed in the theme info file.  Edit template.php and theme-settings.php to use proper function names (if needed). Replace ALL occurrences of "STARTERKIT" with the name of your sub-theme.  To create a custom tpl for the frontpage, copy the page.tpl.php from the main Zen templates folder into the templates folder for the subtheme.  Save a copy of the page.tpl.php file to page--front.tpl.php.  Edit the file to include the HTML and PHP that will render the regions you defined in your theme .info file.  "Enable and set default" for your sub theme.  1. Info File  2. Template Files .tlp.php  3. Functions and variables. DRUPAL GOVERNMENT DAYS 2013
  10. 10. Creating a Zen sub theme  Run 'compass watch' in your theme folder.  Compass monitors the sub-theme folder for changes to the *.scss files  Updates the *.css files when it detects a change DRUPAL GOVERNMENT DAYS 2013
  11. 11. Creating a Zen sub theme  By default your new sub-theme is using a responsive layout.  Open scss/layouts/responsive-sidebars.scss  This file determines where your content moves to on the page as it is resized!  Look for line 'Containers for grid items and flow items.'  Reference the grid items defined in your template files.  Divs with ids or classes. • The names/locations of files have changed from zen-7.x-5.1 • In zen-7.x-5.3 it is scss/layouts/_responsive.scss DRUPAL GOVERNMENT DAYS 2013
  12. 12. Creating a Zen sub theme  Open scss/navigation.scss  Make any customizations for navigation links here  Open scss/pages.scss  Give document body a background color  Give page div a background color  Give footer a background color  Define styles for image grid page  Open scss/views-styles.scss  styling for views  i.e. views slideshow In zen-7.x-5.3 there 4 CSS files you will probably edit. They include the styles previously included in separate files. - styles.css - normalize.css - layout-responsive.css - modular-styles.css DRUPAL GOVERNMENT DAYS 2013
  13. 13. Content Hierarchy  What content is most important?  Give it emphasis through size and order.  At smaller sizes, what shows up first? The goal for a responsive theme is to gracefully shift visible content, layout, and styling as the browser size changes. DRUPAL GOVERNMENT DAYS 2013
  14. 14. Defined Regions regions[header] = Header regions[navigation] = Navigation bar regions[content] = Content regions[container_1_left] = Container 1 left regions[container_1_right] = Container 1 right regions[container_2_left] = Container 2 left regions[container_2_right] = Container 2 right regions[sidebar_first] = First sidebar regions[sidebar_second] = Second sidebar regions[footer] = Footer DRUPAL GOVERNMENT DAYS 2013
  15. 15. Zen sub theme  Regular view  Wireframe view DRUPAL GOVERNMENT DAYS 2013
  16. 16. Zen Grids – Grid columns  Zen Grids gives you the power to create fluid, percentage-based grids on the fly.  Specify how many columns you want use and the spacing calculations are done for you. Zen Grids does the clear, float, and sizing CSS calculations required to make a grid.  The $zen-column-count will give every grid item called after it a percentage width of 1/$zen-column-count  Example:  $zen-column-count = 3 = width:33.33% DRUPAL GOVERNMENT DAYS 2013
  17. 17. Zen Grids – Grid containers  Your grid of n columns will be applied to one or more containers.  Include the zen-grid-container mixin on the parts of your page that will contain grid items.  /* Containers for grid items and flow items. */  #header,  #main,  #content,  #navigation,  #footer {  @include zen-grid-container();  } DRUPAL GOVERNMENT DAYS 2013
  18. 18. Zen Grids – Grid items  /* Apply the shared properties of grid items in a single, efficient ruleset. */  #header,  #main,  #content,  .content_1_left,  .content_1_right,  #content_bottom,  .content_2_left,  .content_2_right,  .region-sidebar-first,  .region-sidebar-second,  #navigation,  #footer {  @include zen-grid-item-base();  } DRUPAL GOVERNMENT DAYS 2013
  19. 19. Zen Grids: Flowing grid items @include zen-grid-item($column-span, $column-position); The zen-grid-item() mixins specify size and placement of individual grid items. Example - place a sidebar to the right that spans one column and a content area to the left that spans two columns in a 3 column grid. $zen-column-count = 3; .sidebar-second { #content { /* Span 2 columns, starting in 1st column from left. */ @include zen-grid-item(2, 1); } .region-sidebar-second { /* Span 1 column, starting in 3rd column from left. */ @include zen-grid-item(1, 3); } } The first number determines how many columns the item will span. The second number determines the starting grid column position of the item. DRUPAL GOVERNMENT DAYS 2013
  20. 20. Zen Grids: Nesting grid items @include zen-nested-container() Apply this to any grid item that is also a grid container element for a nested grid. It must be applied after the zen- grid-item() mixin is applied. /* The layout when there are no sidebars. */ .no-sidebars { #content { /* Span 5 columns, starting in 1st column from left. */ @include zen-grid-item(5, 1); } #content_top{ @include zen-grid-item(5, 1); @include zen-nested-container(); .content_1_left { @include zen-clear(left); @include zen-grid-item(3, 1); } .content_1_right { @include zen-grid-item(2, 4); } } #content_bottom { @include zen-clear(left); @include zen-grid-item(5, 1); @include zen-nested-container(); .content_2_left { @include zen-clear(left); @include zen-grid-item(3, 1); } .content_2_right { @include zen-grid-item(2, 4); } } <div id="content" class="column nosidesplain" role="main"> <div id="content_top"> <div class="content_1_left"> </div> <div class="content_1_right"> </div> </div> <div id="content_bottom"> <div class="content_2_left"> </div> <div class="content_2_right"> </div> </div> </div><!-- /#content --> DRUPAL GOVERNMENT DAYS 2013
  21. 21. DRUPAL GOVERNMENT DAYS 2013 Zen Grids: Clearing grid items @include zen-clear(); Apply this mixin to start a new row. /* The layout when there are no sidebars. */ .no-sidebars { #content { /* Span 3 columns, starting in 1st column from left. */ @include zen-grid-item(3, 1); } #content_top { .content_1_left { @include zen-clear(left); @include zen-grid-item(3, 1); } .content_1_right { @include zen-clear(left); @include zen-grid-item(3, 1); } } #content_bottom { @include zen-clear(left); @include zen-grid-item(3, 1); @include zen-nested-container(); .content_2_left { @include zen-clear(left); @include zen-grid-item(3, 1); } .content_2_right { @include zen-clear(left); @include zen-grid-item(3, 1); } } } <div id="content" class="column nosidesplain" role="main"> <div id="content_top"> <div class="content_1_left"> </div> <div class="content_1_right"> </div> </div> <div id="content_bottom"> <div class="content_2_left"> </div> <div class="content_2_right"> </div> </div> </div><!-- /#content -->
  22. 22. Zen Grids – Sidebar Code  All layout code is located in the layout/responsive-sidebars.scss file within your sub-theme. The sidebar code in responsive-sidebars.scss allows you to have different layouts for different sidebar scenarios. Zen gives the <div> that surrounds your content and sidebar(s) a class.  <div class=”DYNAMIC-CLASS”>  [First Sidebar Div] [Content Div] [Second Sidebar Div]  </div>  If the first column exists, Zen generates a „sidebar-first‟ class. If the second column exist Zen generates a „sidebar-second‟ class, if BOTH columns exist Zen generates a „sidebar-both‟ class. If no sidebars are present, Zen generates a „no-sidebars‟ class.  .sidebar-first { LAYOUT-CODE }  .sidebar-second { LAYOUT-CODE }  .two-sidebars { LAYOUT-CODE }  .no-sidebars { LAYOUT-CODE } • The names/locations of files have changed from zen-7.x-5.1 • In zen-7.x-5.3 it is scss/layouts/_responsive.scss DRUPAL GOVERNMENT DAYS 2013
  23. 23. Zen Grids – Sidebar Code  If you want different layouts for different sidebar/display scenarios, your layout code can become complicated, especially if you want different column counts on each display.  You can repeat these layout rules throughout your responsive-sidebars.scss file to match any display or sidebar scenario you can imagine.  Setup media query breakpoints for various viewport sizes:  @media all and (min-width: 320px) and (max-width: 599px) { }  @media all and (min-width: 600px) and (max-width: 799px) { }  @media all and (min-width: 800px) and (max-width: 979px) { }  @media all and (min-width: 980px) { } • The names/locations of files have changed from zen-7.x-5.1 • In zen-7.x-5.3 it is scss/layouts/_responsive.scss DRUPAL GOVERNMENT DAYS 2013
  24. 24. Zen Grids – Sidebar Code @media all and (min-width: 320px) and (max-width: 599px) { /* Use 3 grid columns for smaller screens. */ $zen-column-count: 3; /* The layout when there is only one sidebar, the left one. */ .sidebar-first { } /* The layout when there is only one sidebar, the right one. */ .sidebar-second { } /* The layout when there are two sidebars. */ .two-sidebars { } /* The layout when there are no sidebars. */ .no-sidebars { } } @media all and (min-width: 600px) and (max-width: 799px) { … } * Rinse and repeat for other breakpoints. * DRUPAL GOVERNMENT DAYS 2013
  25. 25. Zen Grids – Sidebar Code Left sidebar Right sidebar Two sidebars DRUPAL GOVERNMENT DAYS 2013
  26. 26. Zen Grids – Sidebar Code Image grid @ 800 Image grid @ 480 Image grid @ 320 Grid content type controlled by node--grid.tpl.php and CSS in stylesheet(s). DRUPAL GOVERNMENT DAYS 2013
  27. 27. DRUPAL GOVERNMENT DAYS 2013 Zen sub theme Demo  Demo site  @ http://onaje.com/demo/

×