SlideShare uma empresa Scribd logo
1 de 27
Baixar para ler offline
Responsive Zen
USING 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
Onaje.Johnston@ars.usda.gov
DRUPAL
GOVERNMENT DAYS 2013
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
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
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
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
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
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
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
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
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
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
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
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
Zen sub theme
 Regular view  Wireframe view
DRUPAL
GOVERNMENT DAYS 2013
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
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
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
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
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
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 -->
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
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
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
Zen Grids – Sidebar Code
Left sidebar Right sidebar Two sidebars
DRUPAL
GOVERNMENT DAYS 2013
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
DRUPAL
GOVERNMENT DAYS 2013
Zen sub theme Demo
 Demo site
 @ http://onaje.com/demo/

Mais conteúdo relacionado

Semelhante a Responsive Zen

DrupalTour. Vinnytsia — SASS and Drupal themes (Olexander Kuzava, InternetDev...
DrupalTour. Vinnytsia — SASS and Drupal themes (Olexander Kuzava, InternetDev...DrupalTour. Vinnytsia — SASS and Drupal themes (Olexander Kuzava, InternetDev...
DrupalTour. Vinnytsia — SASS and Drupal themes (Olexander Kuzava, InternetDev...Drupaltour
 
AUTOMATIZAR SET HOJAS AUTOCAD_Final_EN.pdf
AUTOMATIZAR SET HOJAS AUTOCAD_Final_EN.pdfAUTOMATIZAR SET HOJAS AUTOCAD_Final_EN.pdf
AUTOMATIZAR SET HOJAS AUTOCAD_Final_EN.pdfssuser05d704
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgRachel Andrew
 
April 2016 - MiniCamp Atlanta - SMACSS - Preparing Drupal 8 CSS Organization
April 2016 - MiniCamp Atlanta - SMACSS - Preparing Drupal 8 CSS OrganizationApril 2016 - MiniCamp Atlanta - SMACSS - Preparing Drupal 8 CSS Organization
April 2016 - MiniCamp Atlanta - SMACSS - Preparing Drupal 8 CSS OrganizationEric Sembrat
 
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style GuidesAdvanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style GuidesAidan Foster
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeAcquia
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRachel Andrew
 
Key Scopes in DITA 1.3
Key Scopes in DITA 1.3Key Scopes in DITA 1.3
Key Scopes in DITA 1.3IXIASOFT
 
7 Theming in Drupal
7 Theming in Drupal7 Theming in Drupal
7 Theming in DrupalWingston
 
Broward drupal d7-omega
Broward drupal d7-omegaBroward drupal d7-omega
Broward drupal d7-omegaJay Epstein
 
Customization of the new Boost theme
Customization of the new Boost themeCustomization of the new Boost theme
Customization of the new Boost themeRaul Roig
 
Styleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentStyleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentJohn Albin Wilkins
 
SynapseIndia drupal presentation on drupal best practices
SynapseIndia drupal  presentation on drupal best practicesSynapseIndia drupal  presentation on drupal best practices
SynapseIndia drupal presentation on drupal best practicesSynapseindiappsdevelopment
 
LESS(CSS Pre Processor) introduction
LESS(CSS Pre Processor) introductionLESS(CSS Pre Processor) introduction
LESS(CSS Pre Processor) introductionrushi7567
 
Less(CSS Pre Processor) Introduction
Less(CSS Pre Processor) IntroductionLess(CSS Pre Processor) Introduction
Less(CSS Pre Processor) Introductionrushi7567
 
2D Page Layout
2D Page Layout2D Page Layout
2D Page LayoutUnfold UI
 

Semelhante a Responsive Zen (20)

Module 3 - Intro to Bootstrap
Module 3 - Intro to BootstrapModule 3 - Intro to Bootstrap
Module 3 - Intro to Bootstrap
 
DrupalTour. Vinnytsia — SASS and Drupal themes (Olexander Kuzava, InternetDev...
DrupalTour. Vinnytsia — SASS and Drupal themes (Olexander Kuzava, InternetDev...DrupalTour. Vinnytsia — SASS and Drupal themes (Olexander Kuzava, InternetDev...
DrupalTour. Vinnytsia — SASS and Drupal themes (Olexander Kuzava, InternetDev...
 
SCSS Styleguide
SCSS StyleguideSCSS Styleguide
SCSS Styleguide
 
AUTOMATIZAR SET HOJAS AUTOCAD_Final_EN.pdf
AUTOMATIZAR SET HOJAS AUTOCAD_Final_EN.pdfAUTOMATIZAR SET HOJAS AUTOCAD_Final_EN.pdf
AUTOMATIZAR SET HOJAS AUTOCAD_Final_EN.pdf
 
Laying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf FreiburgLaying out the future with grid & flexbox - Smashing Conf Freiburg
Laying out the future with grid & flexbox - Smashing Conf Freiburg
 
April 2016 - MiniCamp Atlanta - SMACSS - Preparing Drupal 8 CSS Organization
April 2016 - MiniCamp Atlanta - SMACSS - Preparing Drupal 8 CSS OrganizationApril 2016 - MiniCamp Atlanta - SMACSS - Preparing Drupal 8 CSS Organization
April 2016 - MiniCamp Atlanta - SMACSS - Preparing Drupal 8 CSS Organization
 
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style GuidesAdvanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
Advanced Front End Architecture in D8: Sass, Gulp, & Living Style Guides
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
 
Render Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout TodayRender Conf: Start using CSS Grid Layout Today
Render Conf: Start using CSS Grid Layout Today
 
Key Scopes in DITA 1.3
Key Scopes in DITA 1.3Key Scopes in DITA 1.3
Key Scopes in DITA 1.3
 
7 Theming in Drupal
7 Theming in Drupal7 Theming in Drupal
7 Theming in Drupal
 
Broward drupal d7-omega
Broward drupal d7-omegaBroward drupal d7-omega
Broward drupal d7-omega
 
Customization of the new Boost theme
Customization of the new Boost themeCustomization of the new Boost theme
Customization of the new Boost theme
 
vitepress-en.pdf
vitepress-en.pdfvitepress-en.pdf
vitepress-en.pdf
 
Styleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web DevelopmentStyleguide-Driven Development: The New Web Development
Styleguide-Driven Development: The New Web Development
 
SynapseIndia drupal presentation on drupal best practices
SynapseIndia drupal  presentation on drupal best practicesSynapseIndia drupal  presentation on drupal best practices
SynapseIndia drupal presentation on drupal best practices
 
Drupal - Introduction to Drupal Creating Modules
Drupal - Introduction to Drupal Creating ModulesDrupal - Introduction to Drupal Creating Modules
Drupal - Introduction to Drupal Creating Modules
 
LESS(CSS Pre Processor) introduction
LESS(CSS Pre Processor) introductionLESS(CSS Pre Processor) introduction
LESS(CSS Pre Processor) introduction
 
Less(CSS Pre Processor) Introduction
Less(CSS Pre Processor) IntroductionLess(CSS Pre Processor) Introduction
Less(CSS Pre Processor) Introduction
 
2D Page Layout
2D Page Layout2D Page Layout
2D Page Layout
 

Último

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 

Último (18)

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 

Responsive Zen

  • 1. Responsive Zen USING DRUPAL'S ZEN 5 THEME WITH ZEN GRIDS TO CREATE A RESPONSIVE WEBSITE DRUPAL GOVERNMENT DAYS 2013
  • 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
  • 27. DRUPAL GOVERNMENT DAYS 2013 Zen sub theme Demo  Demo site  @ http://onaje.com/demo/