STARTERKIT/Gemfile

+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

STARTERKIT/README.txt

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

STARTERKIT/config.rb

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

STARTERKIT/css/README.txt

@@ -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.

STARTERKIT/css/components/misc-rtl.css

@@ -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.
  */

STARTERKIT/css/components/misc.css

@@ -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 */
 }
 
 /**

STARTERKIT/css/normalize.css

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

STARTERKIT/css/print.css

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

STARTERKIT/sass-extensions/zen-grids/DO_NOT_MODIFY

@@ -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.

STARTERKIT/sass/README.txt

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

STARTERKIT/sass/_normalize.scss

@@ -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;
+    }
   }
 }
 

STARTERKIT/sass/components/_misc-rtl.scss

@@ -109,6 +109,16 @@ span.field-label {
   }
 }
 
+/**
+ * Comments.
+ */
+
+/* Nested comments are indented. */
+.indented {
+  margin-left: 0;
+  margin-right: $indent-amount;
+}
+
 /**
  * Forms.
  */

STARTERKIT/sass/components/_misc.scss

@@ -521,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. */
@@ -571,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 */
 }
 
 /**

STARTERKIT/sass/layouts/_fixed.scss

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

STARTERKIT/sass/layouts/_responsive.scss

@@ -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,7 +72,7 @@ $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.

panels-layouts/zen-no-wrapper/zen_no_wrapper.inc

@@ -29,7 +29,7 @@ function zen_no_wrapper_settings_form(&$display, $layout, $settings) {
   $form['layout_settings'] = array(
     '#type' => 'fieldset',
     '#title' => t('Layout settings'),
-    '#description' => t('Note: if this setting is used, a wrapper div will be added to accomodate the needed classes.'),
+    '#description' => t('Note: if this setting is used, a wrapper div will be added to accommodate the needed classes.'),
     '#collapsible' => TRUE,
     '#collapsed' => TRUE,
   );

template.php

@@ -24,7 +24,7 @@ if (theme_get_setting('zen_rebuild_registry') && !defined('MAINTENANCE_MODE')) {
  * Implements HOOK_theme().
  */
 function zen_theme(&$existing, $type, $theme, $path) {
-  include_once './' . drupal_get_path('theme', 'zen') . '/zen-internals/template.theme-registry.inc';
+  include_once DRUPAL_ROOT . '/' . drupal_get_path('theme', 'zen') . '/zen-internals/template.theme-registry.inc';
   return _zen_theme($existing, $type, $theme, $path);
 }
 
@@ -56,7 +56,7 @@ function zen_breadcrumb($variables) {
 
     // Return the breadcrumb with separators.
     if (!empty($breadcrumb)) {
-      $breadcrumb_separator = theme_get_setting('zen_breadcrumb_separator');
+      $breadcrumb_separator = filter_xss_admin(theme_get_setting('zen_breadcrumb_separator'));
       $trailing_separator = $title = '';
       if (theme_get_setting('zen_breadcrumb_title')) {
         $item = menu_get_item();
@@ -127,15 +127,15 @@ function zen_preprocess_html(&$variables, $hook) {
   );
 
   // Send X-UA-Compatible HTTP header to force IE to use the most recent
-  // rendering engine or use Chrome's frame rendering engine if available.
+  // rendering engine.
   // This also prevents the IE compatibility mode button to appear when using
   // conditional classes on the html tag.
   if (is_null(drupal_get_http_header('X-UA-Compatible'))) {
-    drupal_add_http_header('X-UA-Compatible', 'IE=edge,chrome=1');
+    drupal_add_http_header('X-UA-Compatible', 'IE=edge');
   }
 
-  $variables['skip_link_anchor'] = theme_get_setting('zen_skip_link_anchor');
-  $variables['skip_link_text'] = theme_get_setting('zen_skip_link_text');
+  $variables['skip_link_anchor'] = check_plain(theme_get_setting('zen_skip_link_anchor'));
+  $variables['skip_link_text']   = check_plain(theme_get_setting('zen_skip_link_text'));
 
   // Return early, so the maintenance page does not call any of the code below.
   if ($hook != 'html') {
@@ -221,8 +221,13 @@ function zen_process_html_tag(&$variables) {
   $tag = &$variables['element'];
 
   if ($tag['#tag'] == 'style' || $tag['#tag'] == 'script') {
-    // Remove redundant type attribute and CDATA comments.
-    unset($tag['#attributes']['type'], $tag['#value_prefix'], $tag['#value_suffix']);
+    // Remove redundant CDATA comments.
+    unset($tag['#value_prefix'], $tag['#value_suffix']);
+
+    // Remove redundant type attribute.
+    if (isset($tag['#attributes']['type']) && $tag['#attributes']['type'] !== 'text/ng-template') {
+      unset($tag['#attributes']['type']);
+    }
 
     // Remove media="all" but leave others unaffected.
     if (isset($tag['#attributes']['media']) && $tag['#attributes']['media'] === 'all') {
@@ -254,7 +259,7 @@ function zen_preprocess_page(&$variables, $hook) {
   $secondary_links = variable_get('menu_secondary_links_source', 'user-menu');
   if ($secondary_links) {
     $menus = function_exists('menu_get_menus') ? menu_get_menus() : menu_list_system_menus();
-    $variables['secondary_menu_heading'] = $menus[$secondary_links];
+    $variables['secondary_menu_heading'] = isset($menus[$secondary_links]) ? $menus[$secondary_links] : '';
   }
   else {
     $variables['secondary_menu_heading'] = '';
@@ -306,6 +311,9 @@ function zen_preprocess_node(&$variables, $hook) {
   // Add $unpublished variable.
   $variables['unpublished'] = (!$variables['status']) ? TRUE : FALSE;
 
+  // Set preview variable to FALSE if it doesn't exist.
+  $variables['preview'] = isset($variables['preview']) ? $variables['preview'] : FALSE;
+
   // Add pubdate to submitted variable.
   $variables['pubdate'] = '<time pubdate datetime="' . format_date($variables['node']->created, 'custom', 'c') . '">' . $variables['date'] . '</time>';
   if ($variables['display_submitted']) {
@@ -618,7 +626,27 @@ function zen_menu_local_task($variables) {
  * Implements hook_preprocess_menu_link().
  */
 function zen_preprocess_menu_link(&$variables, $hook) {
-  foreach ($variables['element']['#attributes']['class'] as $key => $class) {
+  // Normalize menu item classes to be an array.
+  if (empty($variables['element']['#attributes']['class'])) {
+    $variables['element']['#attributes']['class'] = array();
+  }
+  $menu_item_classes =& $variables['element']['#attributes']['class'];
+  if (!is_array($menu_item_classes)) {
+    $menu_item_classes = array($menu_item_classes);
+  }
+
+  // Normalize menu link classes to be an array.
+  if (empty($variables['element']['#localized_options']['attributes']['class'])) {
+    $variables['element']['#localized_options']['attributes']['class'] = array();
+  }
+  $menu_link_classes =& $variables['element']['#localized_options']['attributes']['class'];
+  if (!is_array($menu_link_classes)) {
+    $menu_link_classes = array($menu_link_classes);
+  }
+
+  // Add BEM-style classes to the menu item classes.
+  $extra_classes = array('menu__item');
+  foreach ($menu_item_classes as $key => $class) {
     switch ($class) {
       // Menu module classes.
       case 'expanded':
@@ -627,28 +655,31 @@ function zen_preprocess_menu_link(&$variables, $hook) {
       case 'active':
       // Menu block module classes.
       case 'active-trail':
-        array_unshift($variables['element']['#attributes']['class'], 'is-' . $class);
+        $extra_classes[] = 'is-' . $class;
         break;
       case 'has-children':
-        array_unshift($variables['element']['#attributes']['class'], 'is-parent');
+        $extra_classes[] = 'is-parent';
         break;
     }
   }
-  array_unshift($variables['element']['#attributes']['class'], 'menu__item');
-  if (empty($variables['element']['#localized_options']['attributes']['class'])) {
-    $variables['element']['#localized_options']['attributes']['class'] = array();
+  $menu_item_classes = array_merge($extra_classes, $menu_item_classes);
+
+  // Add BEM-style classes to the menu link classes.
+  $extra_classes = array('menu__link');
+  if (empty($menu_link_classes)) {
+    $menu_link_classes = array();
   }
   else {
-    foreach ($variables['element']['#localized_options']['attributes']['class'] as $key => $class) {
+    foreach ($menu_link_classes as $key => $class) {
       switch ($class) {
         case 'active':
         case 'active-trail':
-          array_unshift($variables['element']['#localized_options']['attributes']['class'], 'is-' . $class);
+          $extra_classes[] = 'is-' . $class;
           break;
       }
     }
   }
-  array_unshift($variables['element']['#localized_options']['attributes']['class'], 'menu__link');
+  $menu_link_classes = array_merge($extra_classes, $menu_link_classes);
 }
 
 /**
@@ -671,12 +702,12 @@ function zen_status_messages($variables) {
     if (count($messages) > 1) {
       $output .= " <ul class=\"messages__list\">\n";
       foreach ($messages as $message) {
-        $output .= '  <li class=\"messages__item\">' . $message . "</li>\n";
+        $output .= '  <li class="messages__item">' . $message . "</li>\n";
       }
       $output .= " </ul>\n";
     }
     else {
-      $output .= $messages[0];
+      $output .= reset($messages);
     }
     $output .= "</div>\n";
   }

templates/html.tpl.php

@@ -22,7 +22,7 @@
     <meta name="HandheldFriendly" content="true">
     <meta name="viewport" content="width=device-width">
   <?php endif; ?>
-  <meta http-equiv="cleartype" content="on">
+  <!--[if IEMobile]><meta http-equiv="cleartype" content="on"><![endif]-->
 
   <?php print $styles; ?>
   <?php print $scripts; ?>

templates/maintenance-page.tpl.php

@@ -22,7 +22,7 @@
     <meta name="HandheldFriendly" content="true">
     <meta name="viewport" content="width=device-width">
   <?php endif; ?>
-  <meta http-equiv="cleartype" content="on">
+  <!--[if IEMobile]><meta http-equiv="cleartype" content="on"><![endif]-->
 
   <?php print $styles; ?>
   <?php print $scripts; ?>

templates/panels-pane.tpl.php

@@ -8,12 +8,14 @@
  */
 ?>
 <?php print $pane_prefix; ?>
-<div class="<?php print $classes; ?>" <?php print $id; ?>>
+<div class="<?php print $classes; ?>" <?php print $id; ?> <?php print $attributes; ?>>
   <?php print $admin_links; ?>
 
   <?php print render($title_prefix); ?>
   <?php if ($title): ?>
-    <h2<?php print $title_attributes; ?>><?php print $title; ?></h2>
+    <<?php print $title_heading; ?><?php print $title_attributes; ?>>
+      <?php print $title; ?>
+    </<?php print $title_heading; ?>>
   <?php endif; ?>
   <?php print render($title_suffix); ?>