Skip to content
Commits on Source (38)
......@@ -64,20 +64,20 @@ ONLINE READING
--------------
Full documentation on the Zen theme can be found in Drupal's Handbook:
http://drupal.org/documentation/theme/zen
https://drupal.org/documentation/theme/zen
Excellent documentation on Drupal theming can be found in the Theme Guide:
http://drupal.org/theme-guide
https://drupal.org/theme-guide
INSTALLATION
------------
1. Download Zen from http://drupal.org/project/zen
1. Download Zen from https://drupal.org/project/zen
2. Unpack the downloaded file, take the entire zen folder and place it in your
Drupal installation under sites/all/themes. (Additional installation folders
can be used; see http://drupal.org/getting-started/install-contrib/themes
can be used; see https://drupal.org/getting-started/install-contrib/themes
for more information.)
For more information about acceptable theme installation directories, read
......
source 'https://rubygems.org'
group :frontend do
gem 'compass', '<= 0.13'
# Build compass sprites faster with oily_png.
gem 'oily_png', '~> 1.1'
gem 'sass', '~> 3.2.0'
gem 'sass-globbing', '~> 1.1'
gem 'zen-grids', '~> 1.5'
end
......@@ -9,7 +9,7 @@ installed in sites/all/themes/, but any valid theme directory is acceptable
(read the sites/default/default.settings.php for more info.)
Why? To learn why you shouldn't modify any of the files in the zen/ folder,
see http://drupal.org/node/245802
see https://drupal.org/node/245802
*** IMPORTANT NOTE ***
......@@ -18,7 +18,7 @@ installed in sites/all/themes/, but any valid theme directory is acceptable
* functions should be called. This means that if you add a new theme,
* preprocess or process function to your template.php file or add a new template
* (.tpl.php) file to your sub-theme, you will need to rebuild the "theme
* registry." See http://drupal.org/node/173880#theme-registry
* registry." See https://drupal.org/node/173880#theme-registry
*
* Drupal 7 also stores a cache of the data in .info files. If you modify any
* lines in your sub-theme's .info file, you MUST refresh Drupal 7's cache by
......@@ -53,7 +53,7 @@ installed in sites/all/themes/, but any valid theme directory is acceptable
Why? The .info file describes the basic things about your theme: its
name, description, features, template regions, CSS files, and JavaScript
files. See the Drupal 7 Theme Guide for more info:
http://drupal.org/node/171205
https://drupal.org/node/171205
Then, visit your site's Appearance page at admin/appearance to refresh
Drupal 7's cache of .info file data.
......@@ -61,19 +61,19 @@ installed in sites/all/themes/, but any valid theme directory is acceptable
3. Choose your preferred page layout method or grid system.
By default your new sub-theme is using a responsive layout. If you want a
fixed layout for your theme, delete the unneeded responsive-sidebars and
responsive-sidebars-rtl css/sass files and edit your sub-theme's styles.css
or styles.scss file and replace the reference to responsive-sidebars with
fixed-width.
fixed layout for your theme, delete the unneeded "responsive" and
"responsive-rtl" css/sass files and edit your sub-theme's styles.css
or styles.scss file and replace the reference to "responsive" with
"fixed".
For example, edit foo/sass/styles.scss and change this line:
@import "layouts/responsive-sidebars";
@import "layouts/responsive";
to:
@import "layouts/fixed-width";
@import "layouts/fixed";
Alternatively, if you are more familiar with a different CSS layout method,
such as GridSetApp or 960.gs, etc., you can replace the
"layouts/responsive-sidebars" line in your styles.scss file with a line
"layouts/responsive" line in your styles.scss file with a line
pointing at your choice of layout CSS file.
Then, visit your site's Appearance page at admin/appearance to refresh
......@@ -115,17 +115,17 @@ Optional steps:
the theme registry.
You can find a full list of Drupal templates that you can override in the
templates/README.txt file or http://drupal.org/node/190815
templates/README.txt file or https://drupal.org/node/190815
Why? In Drupal 7 theming, if you want to modify a template included by a
module, you should copy the template file from the module's directory to
your sub-theme's template directory and then rebuild the theme registry.
See the Drupal 7 Theme Guide for more info: http://drupal.org/node/173880
See the Drupal 7 Theme Guide for more info: https://drupal.org/node/173880
8. Further extend your sub-theme.
Discover further ways to extend your sub-theme by reading Zen's
documentation online at:
http://drupal.org/documentation/theme/zen
https://drupal.org/documentation/theme/zen
and Drupal 7's Theme Guide online at:
http://drupal.org/theme-guide
https://drupal.org/theme-guide
......@@ -13,7 +13,7 @@
screenshot = screenshot.png
name = Zen Sub-theme Starter Kit
description = Read the <a href="http://drupal.org/node/873778">online docs</a> or the included README.txt on how to create a theme with Zen.
description = Read the <a href="https://drupal.org/node/873778">online docs</a> or the included README.txt on how to create a theme with Zen.
......@@ -59,7 +59,7 @@ stylesheets[all][] = css/styles.css
; http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
;
; If you still wish to use conditional stylesheets, you must install the
; conditional stylesheets module: http://drupal.org/project/conditional_styles
; conditional stylesheets module: https://drupal.org/project/conditional_styles
;stylesheets-conditional[lte IE 8][all][] = css/ie8.css
......@@ -109,7 +109,7 @@ regions[page_bottom] = Page bottom
; admin/appearance config page. This is useful for suppressing check boxes
; for elements not used by your sub-theme. To suppress a check box, omit the
; entry for it below. See the Drupal 7 Theme Guide for more info:
; http://drupal.org/node/171205#features
; https://drupal.org/node/171205#features
features[] = logo
features[] = name
......@@ -143,5 +143,5 @@ settings[zen_wireframes] = 0
;settings[shortcut_module_link] = 1
; To add a Panels layout (which can also be used by Display Suite), uncomment
; the line below and see the documentation at: http://drupal.org/node/495654
; the line below and see the documentation at: https://drupal.org/node/495654
;plugins[panels][layouts] = panels-layouts
......@@ -11,7 +11,20 @@
environment = :development
#environment = :production
# In development, we can turn on the FireSass-compatible debug_info.
# If in development (set above), we can turn on the sourcemap file generation.
# Requires sass 3.3+ and compass 1.0.1+
# Determine version from command line: sass --version && compass --version
sourcemap = false
#sourcemap = true
# Alternative development debugging methods
# If in development (above), we can enable line_comments for FireCompass plugin.
# Requires Firebug plugin and FireCompass plugin
firecompass = false
#firecompass = true
# If in development (above), we can enable debug_info for the FireSass plugin.
# Requires Firebug plugin and Firesass plugin
firesass = false
#firesass = true
......@@ -54,3 +67,11 @@ relative_assets = true
# Pass options to sass. For development, we turn on the FireSass-compatible
# debug_info if the firesass config variable above is true.
sass_options = (environment == :development && firesass == true) ? {:debug_info => true} : {}
# Pass options to sass. For development, we turn on the FireCompass-compatible
# line_comments if the firecompass config variable above is true.
sass_options = (environment == :development && firecompass == true) ? {:line_comments => true} : sass_options
# Pass options to sass. For development and sourcemap variable is true (above),
# then pass the "--sourcemap" option flag to compass/sass.
sass_options = (environment == :development && sourcemap == true) ? {:sourcemap => true} : sass_options
......@@ -3,22 +3,20 @@ ZEN'S STYLESHEETS
Don't panic!
There are 13 CSS files in this sub-theme, but it's not as bad as it first seems:
- There are 6 CSS files whose names end in "-rtl.css". Those are CSS files
There are 11 CSS files in this sub-theme, but it's not as bad as it first seems:
- There are 5 CSS files whose names end in "-rtl.css". Those are CSS files
needed to style content written in Right-to-Left languages, such as Arabic and
Hebrew. If your website doesn't use such languages, you can safely delete all
of those CSS files.
- There are 2 example layout stylesheets named beginning with "layout-",
but only one of them is used at any time.
- One is global state rules, that apply only during certain states of the page
and have a JavaScript dependency.
- There are 2 example layout stylesheets inside the "layouts" folder,
"responsive.css" and "fixed.css", but only one of them is used at any time.
- One is just a print stylesheet!
That leaves just 4 CSS files!
- styles.css
- normalize.css
- layout-responsive.css
- modular-styles.css
- layouts/responsive.css
- components/misc.css
Now go look in the styles.css file. That file simply includes (via @import) the
other files. It also shows how the files in your sub-theme can be categorized
......@@ -73,14 +71,14 @@ theming Drupal websites.
you set all the styles for all HTML elements after you reset them. In SMACSS,
this file contains all the "base rules". http://smacss.com/book/type-base
- layout-responsive.css:
- layouts/responsive.css:
Zen's default layout is based on the Zen Grids layout method. Despite the
name, it is an independent project from the Zen theme. Zen Grids is an
intuitive, flexible grid system that leverages the natural source order of
your content to make it easier to create fluid responsive designs. You can
learn more about Zen Grids at http://zengrids.com
The layout-responsive.css file is used by default, but these files are
The responsive.css file is used by default, but these files are
designed to be easily replaced. If you are more familiar with a different CSS
layout method, such as GridSetApp, 960.gs, etc., you can replace the default
layout with your choice of layout CSS file.
......@@ -88,7 +86,7 @@ theming Drupal websites.
In SMACSS, this file contains the "layout rules".
http://smacss.com/book/type-layout
- layout-fixed.css:
- layouts/fixed.css:
This layout is based on the Zen Grids layout method, but uses a fixed pixel
width. It is not included by default in your theme's .info file, but is
provided as an option.
......@@ -96,8 +94,8 @@ theming Drupal websites.
In SMACSS, this file contains the "layout rules".
http://smacss.com/book/type-layout
- modular-styles.css:
This file contains some common modular styles needed for Drupal, such as:
- components/misc.css:
This file contains some common component styles needed for Drupal, such as:
- Tabs: contains actual styling for Drupal tabs, a common Drupal element that
is often neglected by site designers. Zen provides some basic styling which
you are free to use or to rip out and replace.
......@@ -122,7 +120,7 @@ theming Drupal websites.
In these stylesheets, we have included just the classes and IDs needed to apply
a minimum amount of styling. To learn many more useful Drupal core selectors,
check Zen's online documentation: http://drupal.org/node/1707736
check Zen's online documentation: https://drupal.org/node/1707736
STYLES FOR INTERNET EXPLORER
......@@ -145,7 +143,7 @@ that applies to both IE6 and IE7, use ".lt-ie8 ":
Many CSS authors prefer using IE "conditional stylesheets", which are
stylesheets added via conditional comments. If you would prefer that method, you
should check out the Conditional Stylesheets module:
http://drupal.org/project/conditional_styles
https://drupal.org/project/conditional_styles
DRUPAL CORE'S STYLESHEETS
......
......@@ -8,12 +8,12 @@
*/
/* Wrapping link for logo. */
.header--logo {
.header__logo {
float: right;
}
/* The secondary menu (login, etc.) */
.header--secondary-menu {
.header__secondary-menu {
float: left;
}
......@@ -37,9 +37,9 @@
* Messages.
*/
.messages,
.messages-status,
.messages-warning,
.messages-error {
.messages--status,
.messages--warning,
.messages--error {
padding: 10px 50px 10px 10px;
background-position: 99% 8px;
}
......@@ -47,10 +47,10 @@
/**
* Tabs.
*/
.tabs-primary--tab,
.tabs-primary--tab-active,
.tabs-secondary--tab,
.tabs-secondary--tab-active {
.tabs-primary__tab,
.tabs-primary__tab.is-active,
.tabs-secondary__tab,
.tabs-secondary__tab.is-active {
float: right;
}
......@@ -87,11 +87,21 @@ span.field-label {
/**
* Menus.
*/
.menu--collapsed {
.menu__item.is-collapsed {
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAQMAAAD+nMWQAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAABNJREFUCB1j4GASYFJgcmD+A4IADUIDfIUMT4wAAAAASUVORK5CYII=');
*list-style-image: url('../../images/menu-collapsed-rtl.png');
}
/**
* Comments.
*/
/* Nested comments are indented. */
.indented {
margin-left: 0;
margin-right: 30px;
}
/**
* Forms.
*/
......
......@@ -5,7 +5,7 @@
* Adds modular sets of styles.
*
* Additional useful selectors can be found in Zen's online documentation.
* http://drupal.org/node/1707736
* https://drupal.org/node/1707736
*/
/**
......@@ -40,8 +40,8 @@
/* element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
.element-invisible,
.element-focusable,
#navigation .block-menu .block--title,
#navigation .block-menu-block .block--title {
#navigation .block-menu .block__title,
#navigation .block-menu-block .block__title {
position: absolute !important;
height: 1px;
width: 1px;
......@@ -81,52 +81,52 @@
*/
/* Wrapping link for logo. */
.header--logo {
.header__logo {
float: left; /* LTR */
margin: 0;
padding: 0;
}
/* Logo image. */
.header--logo-image {
.header__logo-image {
vertical-align: bottom;
}
/* Wrapper for website name and slogan. */
.header--name-and-slogan {
.header__name-and-slogan {
float: left;
}
/* The name of the website. */
.header--site-name {
.header__site-name {
margin: 0;
font-size: 2em;
line-height: 1.5em;
}
/* The link around the name of the website. */
.header--site-link:link,
.header--site-link:visited {
.header__site-link:link,
.header__site-link:visited {
color: #000;
text-decoration: none;
}
.header--site-link:hover,
.header--site-link:focus {
.header__site-link:hover,
.header__site-link:focus {
text-decoration: underline;
}
/* The slogan (or tagline) of a website. */
.header--site-slogan {
.header__site-slogan {
margin: 0;
}
/* The secondary menu (login, etc.) */
.header--secondary-menu {
.header__secondary-menu {
float: right; /* LTR */
}
/* Wrapper for any blocks placed in the header region. */
.header--region {
.header__region {
/* Clear the logo. */
clear: both;
}
......@@ -175,12 +175,12 @@
/**
* Titles.
*/
.page--title, /* The title of the page. */
.node--title, /* Title of a piece of content when it is given in a list of content. */
.block--title, /* Block title. */
.comments--title, /* Comment section heading. */
.comments--form-title, /* Comment form heading. */
.comment--title { /* Comment title. */
.page__title, /* The title of the page. */
.node__title, /* Title of a piece of content when it is given in a list of content. */
.block__title, /* Block title. */
.comments__title, /* Comment section heading. */
.comments__form-title, /* Comment form heading. */
.comment__title { /* Comment title. */
margin: 0;
}
......@@ -188,9 +188,9 @@
* Messages.
*/
.messages,
.messages-status,
.messages-warning,
.messages-error {
.messages--status,
.messages--warning,
.messages--error {
margin: 1.5em 0;
padding: 10px 10px 10px 50px; /* LTR */
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAD6UlEQVR42s2WX0xbVRzH3YwmC4k+GF/0ZS/S267/bmnX9nL7bwstZlnbjTDYyoC5GCbB0ZW5pdJCe6swbLFA6bpWIGuRMWVjKGP+21QW3SZBSAjGh4XEaTZTH82Cm/3ztS2xs7mw4KLRk3xyzj33/H6fe5Pz7zEA/yr/vUDukj9FH6drqTaqT8EoPs/UV+nX6TD1BlUh9AqLHlmgPKLcRHmoCOWmElK/FOKTYpS8UwLJkASiUyLI3pKhlClN0g46qj+qL/pbArlbrlO1q25JeiSgR2iYJ8ywXLSg/qP6LNl2ro8+Q4MMkKCd9K2t3q3KdQnkXXIF5aISkgEJzONm1F2qW52pDJN1MI2bUBIuAdVOJWSMTPNQgX6/vkjVpvpREpag6oMqWCYta1IzbsHh9ga0RJtzY8URMdRO9U/KSuWmNQUqh2pY3CtG+fvlqJyofMAFNrZAE+7e/RWR4X4cD9tgOGsA2U2CdtMDqwqyMyIzQ5KKqAKmcyaYxkzYd3YvjGNGFtXRPRj58DT+LOemRrFnrBLyITmUDmUyO/NYgu2d26ukHVJo3tXAMGpAs+cQmh0NeClan30uwN7TgnQ6nRd4r3thOGOAJqYB2UVC79AfZAnKHGUxQa8A2tNaNLW/jKvXv8Dyb8s4yryKA4O10A3roIvpUB+swTdz1/LJZ27PQBvT5lBH1RD4BChzlQ2wBNtc22aE/ULQgzRCl4P5BPcT93GMOYz9wb2QhCRgAq35d8u/L2PXe7tADVGgBlcQ+AXQtmlvsP/gzbJZvp8PMkJCFBYh8m0knyiVSsHe0YIGZz1+/uVOvt8z7QGvnwf+ST5EIRHIUyR4fh50rbp5lsDcYR4ReAXgBrng9q/Qfa0bfy035r7Ot2dvz4IX4IEIEAXwvDzscOw4zxJUd1YfEXlE4Aa4BQHMlwzSSBeI7iXvoTxWDqKPYCFsFaKmr+YVliB0JfS89DVpiuhlB9k/tSOZTuYFvq98yI7L0/MAsVWcGp0bfW61hbahwltxSeARsIKyWKesSKQSWIwvYkvvllwfx88pgOvhwthu/AzAxlVX8vz385tLbaVxwpcLZtEw0QDjsBGctzksiE4CimZFfHp++oWHbnbuUfdB0komMgHsRN1r0MWBsEmYODF5onY92/UTwcvBxuzXcN1ccHycVSn2FaPYWwzCQUDWKIt7z3utAJ5c74Hz+OLSomynY+cVfiM/xW3JiDyZpB3FuZrj4oCwE+Ad4qWMjPHjpTtL0mzMoxyZz9yM39Q7Y85Ok930icqm+k59TL2wm9l90dZv8y/8sPAigGf/iUN/Q4anM2zOsdLe+L+4VfwBVVjDs2rTYx0AAAAASUVORK5CYII=');
......@@ -199,41 +199,41 @@
background-repeat: no-repeat;
border: 1px solid #be7;
}
.messages-warning {
.messages--warning {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACuElEQVRIiWP4//8/Ay0xSYqntTpnT252zqeJBf0Njhsykrz/pyd6/e9vcNpGVQv6q2wlm0qc/r0+IPD/3UG+/61l9v9mdrjIUc2C7hqHUzc3S///eZwBjO9tF/vfWe1wjioWTKixVm8otPn38wQT3IKfxxn/t5Va/utpsNSg2ILWcttrNzdJgQ3+dpQRjEHs+9tE/zeXWt+gyILOamuTqlxrsOtPLub+7+emBsSq/88v5wL7oqHQ9H9nmbkF2RbUF1rev7lJEuziuU3i/90ddcB4UZsoJC62ifyvK7R4QJYFrcUGrmUZ5v9hYb9hosh/bzcDMN42VRgeF9W5hv8bi/XdSbagKtfs2c1NEvCIPbaQ/7+/pwkYn17Ki0hR24T/l2eZPCfJgsZ83dCiNOP/yCnn7iau/8G+5mD8aBsHSoqqyNL9X5erHUm0BcVpRm9ubhZHMoTh/4eDzP/DA23+RwTZ/P96hAlF7t5Wof8FyfpvibKgNk8noyDZ4D9quofg1Bjr/1kJlhjiIF+Upmn/r83RzCJoQXaC3qcbm8SwGMLwvybP/H8jMGlik7u7VeB/Zqz2J7wWVGdr1uTG62J1PQgfWST1/+hiCaxyIF8UJqv9r8hQrcVpQVqkzrcbG0WwGvB2H/P/lnx5MAaxsam5vYn3f2KY+jesFpSlqfZnxWjidP2OGWL/g/0swBjExu4Lhv958Ur/i5KU+lEsCA1lYI4JUv95bZ0gTo2Pt3P+z0myBmMQG5e6mxu4/kf4Kf8EmQm3oCRNebKrvSawIGPBqRG9sMOp5hjjfwdrlf/58bKT4RaUpWvtcLZV/39iscD/H0AFP46jYwYiMeP/44u4/9tbKQODSXUH3II9G7v18hI0n8YGKv+IDVT6joxj/BVx4mgcOCde/SnITPRUJAHEGlTCEkQV19TAAN8FC67hZdFXAAAAAElFTkSuQmCC');
*background-image: url('../../images/message-24-warning.png');
border-color: #ed5;
}
.messages-error {
.messages--error {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAACpElEQVR42rWWTUgbQRiGQ0Tx4MWDeFM8eBA9iKAoggiCoCiiIiL4L3oQV1CJB0UEf6iRYFpK7UniTw9VSqL2kvQsVDBpSZrtRo35czVNW3oprRf17exSl4yzu1ikAy9h59vvedhkMrMGAGoxknAk2w8MJ/WosXThiZkZt9jdLeglPjn5ATc3mhJNuNjbK0QbG3ExMICL/n6IfX0gcxB7ekDAELu6IHZ2IlJbi1hLS1BLogmPtbUhMTv7oMSamzUlqnByMxLT0/8STQkDj9TV4ZLj5OysrODl8jIu5Gs68dFR7JG6dWkJ0fFx+TpSX89IDMnwcHU1yKec12Yz3rlc4HkeLwjkXJpPip3U3+7vIx6P4ymph4eG5PlwTQ0lMdytlmBxMWKtrXLeT0zA5XTibvj9fjxfXETkb/3N/Dz2dneVuiTZtliU/rPSUsQ5ziuxZYG03IIlJdKKUPJjdRUAKMmzuTnskB/VYbdTtd9HR4g2NCi9Z2VliDY1BSnBaUEBzsrLqXyzWCiQ9HU5HA4afniIUFWV0hOqqMBpURErOM7NxWlhIZOvCwvA7S3Uxq+DA5AnZ3pO8vJYQSArC8c5Oeqx2Rj4udeLQH6+6v2B7GxW8DkjA0JmJpONwUHY7XZGIAgCzCYTeJUewmIFfqMRfEoKlQ2yJbza2oLWcLvdeDI2hk/3+iQWKzAYkJzNjg5srq9TwJ9OJ76YTNScx+ORJT66X1/grKyEbW2NgfPp6XKd/JMZySrHaQsSU1Oe+0/w3WpVgyu5HBlR6lc+H8gioevDwz6JrWwV5+3txyoSFk5DcOX1MnCyJ4Vwfb1zt1UY9SR8aioDpuppaVpwZbPTl+hHF04dOKzk8XBF8DgJC3/woU/W/EciOtELOWi8DDwp//215Q+p7kiKh2lQSAAAAABJRU5ErkJggg==');
*background-image: url('../../images/message-24-error.png');
border-color: #ed541d;
}
.messages--list {
.messages__list {
margin: 0;
}
.messages--item {
.messages__item {
list-style-image: none;
}
/* Core/module installation error messages. */
.messages-error p.error {
.messages--error p.error {
color: #333;
}
/* System status report. */
.ok,
.messages-status {
.messages--status {
background-color: #f8fff0;
color: #234600;
}
.warning,
.messages-warning {
.messages--warning {
background-color: #fffce5;
color: #840;
}
.error,
.messages-error {
.messages--error {
background-color: #fef5f1;
color: #8c2e0b;
}
......@@ -259,17 +259,17 @@
padding: 0 2px;
white-space: nowrap;
}
.tabs-primary--tab,
.tabs-primary--tab-active,
.tabs-secondary--tab,
.tabs-secondary--tab-active {
.tabs-primary__tab,
.tabs-primary__tab.is-active,
.tabs-secondary__tab,
.tabs-secondary__tab.is-active {
float: left; /* LTR */
margin: 0 3px;
}
a.tabs-primary--tab-link,
a.tabs-primary--tab-link-active,
a.tabs-secondary--tab-link,
a.tabs-secondary--tab-link-active {
a.tabs-primary__tab-link,
a.tabs-primary__tab-link.is-active,
a.tabs-secondary__tab-link,
a.tabs-secondary__tab-link.is-active {
border: 1px solid #e9e9e9;
border-right: 0;
border-bottom: 0;
......@@ -279,8 +279,8 @@ a.tabs-secondary--tab-link-active {
}
/* Primary tabs. */
.tabs-primary--tab,
.tabs-primary--tab-active {
.tabs-primary__tab,
.tabs-primary__tab.is-active {
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
......@@ -293,11 +293,11 @@ a.tabs-secondary--tab-link-active {
/* IE 9 and earlier don't understand gradients. */
border-bottom: 0 \0/ie;
}
.tabs-primary--tab-active {
.is-active.tabs-primary__tab {
border-bottom-color: white;
}
a.tabs-primary--tab-link,
a.tabs-primary--tab-link-active {
a.tabs-primary__tab-link,
a.tabs-primary__tab-link.is-active {
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
border-top-left-radius: 4px;
......@@ -314,13 +314,13 @@ a.tabs-primary--tab-link-active {
padding: 0 1em;
text-align: center;
}
a.tabs-primary--tab-link:hover,
a.tabs-primary--tab-link:focus {
a.tabs-primary__tab-link:hover,
a.tabs-primary__tab-link:focus {
background-color: #e9e9e9;
border-color: #f2f2f2;
}
a.tabs-primary--tab-link:active,
a.tabs-primary--tab-link-active {
a.tabs-primary__tab-link:active,
a.tabs-primary__tab-link.is-active {
background-color: transparent;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE9E9E9', endColorstr='#00E9E9E9');
......@@ -338,12 +338,12 @@ a.tabs-primary--tab-link-active {
/* Collapse bottom margin of ul.primary. */
margin-top: -1.5em;
}
.tabs-secondary--tab,
.tabs-secondary--tab-active {
.tabs-secondary__tab,
.tabs-secondary__tab.is-active {
margin: 0.75em 3px;
}
a.tabs-secondary--tab-link,
a.tabs-secondary--tab-link-active {
a.tabs-secondary__tab-link,
a.tabs-secondary__tab-link.is-active {
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
-ms-border-radius: 0.75em;
......@@ -358,14 +358,14 @@ a.tabs-secondary--tab-link-active {
color: #666;
padding: 0 .5em;
}
a.tabs-secondary--tab-link:hover,
a.tabs-secondary--tab-link:focus {
a.tabs-secondary__tab-link:hover,
a.tabs-secondary__tab-link:focus {
background-color: #dedede;
border-color: #999;
color: #333;
}
a.tabs-secondary--tab-link:active,
a.tabs-secondary--tab-link-active {
a.tabs-secondary__tab-link:active,
a.tabs-secondary__tab-link.is-active {
text-shadow: 1px 1px 0 #333333;
background-color: #666;
border-color: #000;
......@@ -448,21 +448,21 @@ span.field-label {
/**
* Menus.
*/
.menu--expanded {
.menu__item.is-leaf {
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHBAMAAAA2fErgAAAAD1BMVEX///+/v7+Li4sAAADAwMBFvsw8AAAAAXRSTlMAQObYZgAAAB1JREFUCFtjYAADYwMGBmYVZSDhKAwkFJWhYiAAAB2+Aa/9ugeaAAAAAElFTkSuQmCC');
*list-style-image: url('../../images/menu-leaf.png');
list-style-type: square;
}
.menu__item.is-expanded {
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAQMAAAD+nMWQAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAABJJREFUeJxj+MdQw2DBIMAABgAUsAHD3c3BpwAAAABJRU5ErkJggg==');
*list-style-image: url('../../images/menu-expanded.png');
list-style-type: circle;
}
.menu--collapsed {
.menu__item.is-collapsed {
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHAQMAAAD+nMWQAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAABFJREFUCB1jVmCGQClmEWYOAAZ8AMy3HPLXAAAAAElFTkSuQmCC'); /* LTR */
*list-style-image: url('../../images/menu-collapsed.png'); /* LTR */
list-style-type: disc;
}
.menu--leaf {
list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHBAMAAAA2fErgAAAAD1BMVEX///+/v7+Li4sAAADAwMBFvsw8AAAAAXRSTlMAQObYZgAAAB1JREFUCFtjYAADYwMGBmYVZSDhKAwkFJWhYiAAAB2+Aa/9ugeaAAAAAElFTkSuQmCC');
*list-style-image: url('../../images/menu-leaf.png');
list-style-type: square;
}
/* The active item in a Drupal menu. */
.menu a.active {
......@@ -534,7 +534,7 @@ span.field-label {
/* Nested comments are indented. */
.indented {
/* Drupal core uses a 25px left margin. */
margin-left: 30px;
margin-left: 30px; /* LTR */
}
/**
......
/**
* @file
* Positioning for responsive layout .
* Positioning for a responsive layout.
*
* Define CSS classes to create a table-free, 3-column, 2-column, or single
* column layout depending on whether blocks are enabled in the left or right
* columns.
* Define CSS classes to create a fluid grid layout with optional sidebars
* depending on whether blocks are placed in the left or right sidebars.
*
* This layout uses the Zen Grids plugin for Compass: http://zengrids.com
*/
......
......@@ -4,7 +4,7 @@
*
* This file is a slight fork of these original sources:
* - normalize.css v2.1.2 | MIT License | git.io/normalize
* - normalize.scss v2.1.2 | MIT/GPLv2 License | bit.ly/normalize-with-compass
* - normalize.scss v2.1.2 | MIT/GPLv2 License | bit.ly/normalize-scss
*
* It's suggested that you read the normalize.scss file and customise it to meet
* your needs, rather then including the file in your project and overriding the
......
......@@ -18,8 +18,8 @@
}
/* Don't underline header. */
a:link.header--site-link,
a:visited.header--site-link {
a:link.header__site-link,
a:visited.header__site-link {
text-decoration: none !important;
}
......
......@@ -8,7 +8,7 @@
// JavaScript should be made compatible with libraries other than jQuery by
// wrapping it with an "anonymous closure". See:
// - http://drupal.org/node/1446420
// - https://drupal.org/node/1446420
// - http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
(function ($, Drupal, window, document, undefined) {
......
......@@ -12,6 +12,6 @@ idea at the time, but in a few months, you'll probably regret it.
In the future, if you take an update of this framework, you'll need to run
compass unpack zen-grids
bundle exec compass unpack zen-grids
again or remove this unpacked extension.
ABOUT SASS AND COMPASS
----------------------
This directory includes Sass versions of Zen's CSS files. (If you are wondering
how these Sass files are organized, read the css/README.txt file.)
This directory includes Sass versions of Zen's CSS files.
Sass is a language that is just normal CSS plus some extra features, like
variables, nested rules, math, mixins, etc. If your stylesheets are written in
......@@ -21,22 +20,47 @@ To learn more about Compass, visit: http://compass-style.org
DEVELOPING WITH SASS AND COMPASS
--------------------------------
Zen 7.x-5.0 was developed with the latest version of Sass and Compass (at the
time!) Newer versions are not compatible with Zen's Sass files. To ensure you
are using the correct version of Sass and Compass, you will need to use the
"bundle" command which will read Zen's Gemfile to ensure the proper versions are
used when compiling your CSS. To install the correction versions of Sass and
Compass, go to the root directory of your sub-theme and type:
bundle install
You will also need to prefix any compass commands with "bundle exec". For
example, type "bundle exec compass compile" instead of just "compass compile".
To automatically generate the CSS versions of the scss while you are doing theme
development, you'll need to tell Compass to "watch" the sass directory so that
any time a .scss file is changed it will automatically place a generated CSS
file into your sub-theme's css directory:
any time a .scss file is changed it will automatically generate a CSS file in
your sub-theme's css directory:
compass watch <path to your sub-theme's directory>
bundle exec compass watch <path to your sub-theme's directory>
If you are already in the root of your sub-theme's directory, you can simply
type: compass watch
type: bundle exec compass watch
While using generated CSS with Firebug, the line numbers it reports will not
match the .scss file, since it references the generated CSS file's lines, not
the line numbers of the "source" sass files. How then do we debug? Sourcemaps to
the rescue! To find the oringial, newer browsers have support for sourcemap
files (*.map). These files are used by the built-in development tools of newer
browsers to map the generated line to the SCSS source. When in development mode,
Zen can be set to generate sourcemap files. Edit config.rb, and uncomment:
sourcemap=true
Enabling and using sourcemap files (*.map) in your browser
In short, Open Developer tools, go to settings, and enable an option to the
effect of: 'view original sources' or 'Enable CSS source maps'.
While using generated CSS with Firebug, the line numbers it reports will be
wrong since it will be showing the generated CSS file's line numbers and not the
line numbers of the source Sass files. To correct this problem, you can install
the FireSass plug-in into Firefox and then edit your sub-theme's config.rb file
to set: firesass = true
https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
* Firefox: https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/
* Chrome: https://developer.chrome.com/devtools/docs/css-preprocessors#toc-enabling-css-source-maps
* IE: http://msdn.microsoft.com/en-US/library/ie/dn255007%28v=vs.85%29#source_maps
MOVING YOUR CSS TO PRODUCTION
......@@ -49,10 +73,10 @@ will only generate CSS for .scss files that have recently changed; in order to
force it to regenerate all the CSS files, you can use the Compass' clean command
to delete all the generated CSS files.
- Delete all CSS files by running: compass clean
- Delete all CSS files by running: bundle exec compass clean
- Edit the config.rb file in your theme's directory and uncomment this line by
deleting the "#" from the beginning:
#environment = :production
- Regenerate all the CSS files by running: compass compile
- Regenerate all the CSS files by running: bundle exec compass compile
And don't forget to turn on Drupal's CSS aggregation. :-)
......@@ -4,7 +4,7 @@
*
* This file is a slight fork of these original sources:
* - normalize.css v2.1.2 | MIT License | git.io/normalize
* - normalize.scss v2.1.2 | MIT/GPLv2 License | bit.ly/normalize-with-compass
* - normalize.scss v2.1.2 | MIT/GPLv2 License | bit.ly/normalize-scss
*
* It's suggested that you read the normalize.scss file and customise it to meet
* your needs, rather then including the file in your project and overriding the
......@@ -81,7 +81,7 @@ audio:not([controls]) {
* used in any ruleset using a property like this: font-family: Example, serif;
*
* Since we're using Sass, you'll need to declare your font faces here, then you
* can add them to the font variables in the _base.scss partial.
* can add them to the font variables in the _init.scss partial.
*/
/*
@font-face {
......@@ -353,8 +353,10 @@ img {
max-width: 100%;
height: auto;
@if $legacy-support-for-ie8 {
/* Correct IE 8 not scaling image height when resized. */
width: auto;
.lt-ie9 & {
/* Correct IE 8 not scaling image height when resized. */
width: auto;
}
}
}
......
......@@ -17,7 +17,7 @@
text-decoration: underline !important;
/* Don't underline header. */
&.header--site-link {
&.header__site-link {
text-decoration: none !important;
}
}
......
......@@ -8,12 +8,12 @@
*/
/* Wrapping link for logo. */
.header--logo {
.header__logo {
float: right;
}
/* The secondary menu (login, etc.) */
.header--secondary-menu {
.header__secondary-menu {
float: left;
}
......@@ -42,31 +42,31 @@
padding: 10px 50px 10px 10px;
background-position: 99% 8px;
}
.messages-status {
.messages--status {
@extend .messages;
}
.messages-warning {
.messages--warning {
@extend .messages;
}
.messages-error {
.messages--error {
@extend .messages;
}
/**
* Tabs.
*/
%tabs--tab {
%tabs__tab {
float: right;
}
.tabs-primary--tab {
@extend %tabs--tab;
.tabs-primary__tab {
@extend %tabs__tab;
}
.tabs-primary--tab-active {
@extend .tabs-primary--tab;
.tabs-primary__tab.is-active {
@extend .tabs-primary__tab;
}
.tabs-secondary--tab,
.tabs-secondary--tab-active {
@extend %tabs--tab;
.tabs-secondary__tab,
.tabs-secondary__tab.is-active {
@extend %tabs__tab;
}
/**
......@@ -102,13 +102,23 @@ span.field-label {
/**
* Menus.
*/
.menu--collapsed {
.menu__item.is-collapsed {
list-style-image: inline-image("menu-collapsed-rtl.png");
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
*list-style-image: image-url("menu-collapsed-rtl.png");
}
}
/**
* Comments.
*/
/* Nested comments are indented. */
.indented {
margin-left: 0;
margin-right: $indent-amount;
}
/**
* Forms.
*/
......
......@@ -5,7 +5,7 @@
* Adds modular sets of styles.
*
* Additional useful selectors can be found in Zen's online documentation.
* http://drupal.org/node/1707736
* https://drupal.org/node/1707736
*/
/**
......@@ -78,30 +78,30 @@
*/
/* Wrapping link for logo. */
.header--logo {
.header__logo {
float: left; /* LTR */
margin: 0;
padding: 0;
}
/* Logo image. */
.header--logo-image {
.header__logo-image {
vertical-align: bottom;
}
/* Wrapper for website name and slogan. */
.header--name-and-slogan {
.header__name-and-slogan {
float: left;
}
/* The name of the website. */
.header--site-name {
.header__site-name {
margin: 0;
@include adjust-font-size-to( $h1-font-size );
}
/* The link around the name of the website. */
.header--site-link {
.header__site-link {
&:link,
&:visited {
color: #000;
......@@ -115,17 +115,17 @@
}
/* The slogan (or tagline) of a website. */
.header--site-slogan {
.header__site-slogan {
margin: 0;
}
/* The secondary menu (login, etc.) */
.header--secondary-menu {
.header__secondary-menu {
float: right; /* LTR */
}
/* Wrapper for any blocks placed in the header region. */
.header--region {
.header__region {
/* Clear the logo. */
clear: both;
}
......@@ -141,8 +141,8 @@
margin-bottom: 0;
}
.block-menu .block--title,
.block-menu-block .block--title {
.block-menu .block__title,
.block-menu-block .block__title {
@extend %element-invisible;
}
......@@ -182,12 +182,12 @@
/**
* Titles.
*/
.page--title, /* The title of the page. */
.node--title, /* Title of a piece of content when it is given in a list of content. */
.block--title, /* Block title. */
.comments--title, /* Comment section heading. */
.comments--form-title, /* Comment form heading. */
.comment--title { /* Comment title. */
.page__title, /* The title of the page. */
.node__title, /* Title of a piece of content when it is given in a list of content. */
.block__title, /* Block title. */
.comments__title, /* Comment section heading. */
.comments__form-title, /* Comment form heading. */
.comment__title { /* Comment title. */
margin: 0;
}
......@@ -205,11 +205,11 @@
background-repeat: no-repeat;
border: 1px solid #be7;
}
.messages-status {
.messages--status {
@extend .messages;
@extend %ok;
}
.messages-warning {
.messages--warning {
@extend .messages;
@extend %warning;
background-image: inline-image("message-24-warning.png");
......@@ -218,7 +218,7 @@
}
border-color: #ed5;
}
.messages-error {
.messages--error {
@extend .messages;
@extend %error;
background-image: inline-image("message-24-error.png");
......@@ -228,15 +228,15 @@
border-color: #ed541d;
}
.messages--list {
.messages__list {
margin: 0;
}
.messages--item {
.messages__item {
list-style-image: none;
}
/* Core/module installation error messages. */
.messages-error p.error {
.messages--error p.error {
color: #333;
}
......@@ -272,11 +272,11 @@
padding: 0 2px;
white-space: nowrap;
}
%tabs--tab {
%tabs__tab {
float: left; /* LTR */
margin: 0 3px;
}
%tabs--tab-link {
%tabs__tab-link {
border: 1px solid #e9e9e9;
border-right: 0;
border-bottom: 0;
......@@ -289,8 +289,8 @@
.tabs-primary {
@extend %tabs;
}
.tabs-primary--tab {
@extend %tabs--tab;
.tabs-primary__tab {
@extend %tabs__tab;
@include border-top-radius(4px);
@include single-text-shadow(#fff, 1px, 1px, 0);
border: 1px solid $tabs-border;
......@@ -298,14 +298,14 @@
/* IE 9 and earlier don't understand gradients. */
border-bottom: 0 \0/ie;
}
.tabs-primary--tab-active {
@extend .tabs-primary--tab;
.tabs-primary__tab.is-active {
@extend .tabs-primary__tab;
border-bottom-color: $tabs-container-bg;
}
// We use 3 placeholder styles to prevent @extend from going selector crazy.
%tabs-primary--tab-link {
@extend %tabs--tab-link;
%tabs-primary__tab-link {
@extend %tabs__tab-link;
@include border-top-radius(4px);
@include transition(background-color 0.3s);
color: #333;
......@@ -314,31 +314,31 @@
padding: 0 1em;
text-align: center;
}
%tabs-primary--tab-link-hover {
%tabs-primary__tab-link-is-hover {
background-color: #e9e9e9;
border-color: #f2f2f2;
}
%tabs-primary--tab-link-active {
%tabs-primary__tab-link-is-active {
background-color: transparent;
@include filter-gradient(rgba(#e9e9e9, 1), rgba(#e9e9e9, 0));
@include background-image(linear-gradient(rgba(#e9e9e9, 1), rgba(#e9e9e9, 0)));
border-color: #fff;
}
a.tabs-primary--tab-link {
@extend %tabs-primary--tab-link;
a.tabs-primary__tab-link {
@extend %tabs-primary__tab-link;
&:hover,
&:focus {
@extend %tabs-primary--tab-link-hover;
@extend %tabs-primary__tab-link-is-hover;
}
&:active {
@extend %tabs-primary--tab-link-active;
@extend %tabs-primary__tab-link-is-active;
}
}
a.tabs-primary--tab-link-active {
@extend %tabs-primary--tab-link;
@extend %tabs-primary--tab-link-active;
a.tabs-primary__tab-link.is-active {
@extend %tabs-primary__tab-link;
@extend %tabs-primary__tab-link-is-active;
}
/* Secondary tabs. */
......@@ -348,15 +348,15 @@ a.tabs-primary--tab-link-active {
/* Collapse bottom margin of ul.primary. */
margin-top: -(rhythm(1));
}
.tabs-secondary--tab,
.tabs-secondary--tab-active {
@extend %tabs--tab;
.tabs-secondary__tab,
.tabs-secondary__tab.is-active {
@extend %tabs__tab;
margin: rhythm(1)/2 3px;
}
// We use 3 placeholder styles to prevent @extend from going selector crazy.
%tabs-secondary--tab-link {
@extend %tabs--tab-link;
%tabs-secondary__tab-link {
@extend %tabs__tab-link;
@include border-radius(.75em);
@include transition(background-color 0.3s);
@include single-text-shadow(#fff, 1px, 1px, 0);
......@@ -364,32 +364,32 @@ a.tabs-primary--tab-link-active {
color: #666;
padding: 0 .5em;
}
%tabs-secondary--tab-link-focus {
%tabs-secondary__tab-link-is-focus {
background-color: #dedede;
border-color: #999;
color: #333;
}
%tabs-secondary--tab-link-active {
%tabs-secondary__tab-link-is-active {
@include single-text-shadow(#333, 1px, 1px, 0);
background-color: #666;
border-color: #000;
color: #fff;
}
a.tabs-secondary--tab-link {
@extend %tabs-secondary--tab-link;
a.tabs-secondary__tab-link {
@extend %tabs-secondary__tab-link;
&:hover,
&:focus {
@extend %tabs-secondary--tab-link-focus;
@extend %tabs-secondary__tab-link-is-focus;
}
&:active {
@extend %tabs-secondary--tab-link-active;
@extend %tabs-secondary__tab-link-is-active;
}
}
a.tabs-secondary--tab-link-active {
@extend %tabs-secondary--tab-link;
@extend %tabs-secondary--tab-link-active;
a.tabs-secondary__tab-link.is-active {
@extend %tabs-secondary__tab-link;
@extend %tabs-secondary__tab-link-is-active;
}
/**
......@@ -442,8 +442,7 @@ span.field-label {
padding: 0;
text-align: center;
}
%pager-item {
%pager__item {
display: inline;
padding: 0 0.5em;
list-style-type: none;
......@@ -456,12 +455,12 @@ span.field-label {
.pager-next, /* The next page's list item. */
.pager-last, /* The last page's list item. */
.pager-ellipsis { /* A concatenation of several list items using an ellipsis. */
@extend %pager-item;
@extend %pager__item;
}
/* The current page's list item. */
.pager-current {
@extend %pager-item;
@extend %pager__item;
font-weight: bold;
}
......@@ -477,27 +476,27 @@ span.field-label {
/**
* Menus.
*/
.menu--expanded {
.menu__item.is-leaf {
list-style-image: inline-image("menu-leaf.png");
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
*list-style-image: image-url("menu-leaf.png");
}
list-style-type: square;
}
.menu__item.is-expanded {
list-style-image: inline-image("menu-expanded.png");
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
*list-style-image: image-url("menu-expanded.png");
}
list-style-type: circle;
}
.menu--collapsed {
.menu__item.is-collapsed {
list-style-image: inline-image("menu-collapsed.png"); /* LTR */
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
*list-style-image: image-url("menu-collapsed.png"); /* LTR */
}
list-style-type: disc;
}
.menu--leaf {
list-style-image: inline-image("menu-leaf.png");
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
*list-style-image: image-url("menu-leaf.png");
}
list-style-type: square;
}
/* The active item in a Drupal menu. */
.menu a.active {
......@@ -522,6 +521,7 @@ span.field-label {
/* The word "Unpublished" displayed underneath the content. */
.unpublished {
display: block;
height: 0;
overflow: visible;
/* Remove background highlighting from <mark> in normalize. */
......@@ -572,7 +572,7 @@ span.field-label {
/* Nested comments are indented. */
.indented {
/* Drupal core uses a 25px left margin. */
margin-left: $indent-amount;
margin-left: $indent-amount; /* LTR */
}
/**
......
......@@ -15,7 +15,7 @@ $zen-column-count: 5;
$zen-gutter-width: 20px;
$zen-grid-width: 980px;
// If you need IE6/7 support for box-sizing: border-box (default), see _base.scss
// If you need IE6/7 support for box-sizing: border-box (default), see _init.scss
// Since the same CSS unit for grid width and gutter width are set here
// we can use box-sizing: content-box; without worrying about polyfills.
$zen-box-sizing: content-box;
......
......@@ -13,7 +13,7 @@
$zen-column-count: 1;
$zen-gutter-width: 20px;
// If you need IE6/7 support for box-sizing: border-box (default), see _base.scss
// If you need IE6/7 support for box-sizing: border-box (default), see _init.scss
//$zen-box-sizing: content-box;
// You can generate more efficient CSS if you manually apply the
......@@ -21,7 +21,8 @@ $zen-gutter-width: 20px;
$zen-auto-include-item-base: false;
// $zen-auto-include-flow-item-base: false;
// Suppress this section of CSS for RTL layouts since it contains no LTR-specific styles.
// Suppress this section of CSS for RTL layouts since it contains no CSS that
// needs RTL-specific overrides.
@if $zen-reverse-all-floats == false {
/**
......@@ -71,15 +72,15 @@ $zen-auto-include-item-base: false;
}
}
} // End of @if $zen-reverse-all-floats == true
} // End of @if $zen-reverse-all-floats == false
/**
* Use 3 grid columns for smaller screens.
*/
$zen-column-count: 3;
@media all and (min-width: 480px) and (max-width: 959px) {
$zen-column-count: 3;
/**
* The layout when there is only one sidebar, the left one.
*/
......@@ -154,10 +155,10 @@ $zen-column-count: 3;
/**
* Use 5 grid columns for larger screens.
*/
$zen-column-count: 5;
@media all and (min-width: 960px) {
$zen-column-count: 5;
/**
* The layout when there is only one sidebar, the left one.
*/
......