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.
2. Who am I?
Onaje Johnston PhD
Information Technology Specialist
@
National Agriculture Library
USDA
Onaje.Johnston@ars.usda.gov
DRUPAL
GOVERNMENT DAYS 2013
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Zen sub theme
Regular view Wireframe view
DRUPAL
GOVERNMENT DAYS 2013
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. 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. 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. 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. 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. 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. 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. 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. 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. Zen Grids – Sidebar Code
Left sidebar Right sidebar Two sidebars
DRUPAL
GOVERNMENT DAYS 2013
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
