responsive zen

Responsive ZenUSING DRUPAL'S ZEN 5 THEME WITH ZEN GRIDS TO CREATE A RESPONSIVE WEBSITE

DRUPAL GOVERNMENT DAYS 2013

Who am I?

Onaje Johnston PhD

Information Technology Specialist

@

National Agriculture Library

USDA

[email protected]


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


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.


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.


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.


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


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



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.



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



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



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


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.


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


Zen sub theme

Regular view Wireframe view


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%


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();

}


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();

}

This applies a set of base styles to the specified grid items; things such as gutter width and box sizing.


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.


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);


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


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

DRUPAL GOVERNMENT DAYS 2013Zen Grids:

Clearing grid items@include zen-clear();

Apply this mixin to start a new row.


.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> <div id="content_bottom">


</div></div>

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



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



@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 { }


.no-sidebars { }

}

@media all and (min-width: 600px) and (max-width: 799px) {

…

}

* Rinse and repeat for other breakpoints. *



Left sidebar Right sidebar Two sidebars



Image grid @ 800 Image grid @ 480 Image grid @ 320Grid content type controlled bynode--grid.tpl.php and CSS in stylesheet(s).


DRUPAL GOVERNMENT DAYS 2013Zen sub theme Demo

Demo site

@ http://onaje.com/demo/

http://onaje.com/demo/

http://onaje.com/demo/

responsive zen

Design