zen-grids 2.0.0.beta.1 → 2.0.0.beta.2

data/templates/project/example.html

@@ -11,30 +11,55 @@
 <a href="#main-menu" class="skip-link__link">Jump to main menu</a>
 </p>
 
-<div class="centered">
+<div class="l-basic">
 
-  <header class="header">
+  <header class="l-basic__header">
+    <p class="meta">
+      <span class="meta__heading">Header</span>
+      <span class="meta__data">HTML source order: 1</span>
+    </p>
     <h1 class="header__title">Zen Grids: sample usage</h1>
   </header>
 
-  <div class="main">
+  <div class="l-basic__main">
 
-    <article class="grid-item grid-item__content" role="main">
-      <header>
-        <h1>Main content</h1>
-        <p>Source order: 1</p>
+    <article class="l-basic__content" role="main">
+      <header class="meta">
+        <h1 class="meta__heading">Main content</h1>
+        <p class="meta__data">HTML source order: 2</p>
       </header>
-      <aside class="pull-quote">‘There’s no such thing!’</aside>
       <p>Alice did not quite know what to say to this: so she helped herself to some tea and bread-and-butter, and then turned to the Dormouse, and repeated her question. ‘Why did they live at the bottom of a well?’</p>
-      <p>The Dormouse again took a minute or two to think about it, and then said, ‘It was a treacle-well.’</p>
-      <p>‘There’s no such thing!’ Alice was beginning very angrily, but the Hatter and the March Hare went ‘Sh! sh!’ and the Dormouse sulkily remarked, ‘If you can’t be civil, you’d better finish the story for yourself.’</p>
+      <aside class="pull-quote">
+        <span class="meta">
+          <span class="meta__heading">Pull quote</span>
+          <span class="meta__data">HTML source order: 2.1</span>
+        </span>
+        ‘There’s no such thing!’
+      </aside>
+      <p>The Dormouse again took a minute or two to think about it, and then said, ‘It was a treacle-well.’ ‘There’s no such thing!’ Alice was beginning very angrily, but the Hatter and the March Hare went ‘Sh! sh!’ and the Dormouse sulkily remarked, ‘If you can’t be civil, you’d better finish the story for yourself.’</p>
+      <div class="l-basic__columns">
+        <p class="l-basic__col1">
+          <span class="meta">
+            <span class="meta__heading">Nested column 1</span>
+            <span class="meta__data">HTML source order: 2.2.1</span>
+          </span>
+          At some breakpoints, this is a nested grid. At some breakpoints, this is a nested grid. At some breakpoints, this is a nested grid. At some breakpoints, this is a nested grid.
+        </p>
+        <p class="l-basic__col2">
+          <span class="meta">
+            <span class="meta__heading">Nested column 2</span>
+            <span class="meta__data">HTML source order: 2.2.2</span>
+          </span>
+          At some breakpoints, this is a nested grid. At some breakpoints, this is a nested grid.
+        </p>
+      </div>
       <p>‘No, please go on!’ Alice said very humbly; ‘I won’t interrupt again. I dare say there may be ONE.’</p>
     </article>
 
-    <nav class="grid-item grid-item__menu" role="navigation" id="main-menu">
-      <header>
-        <h2>Menu</h2>
-        <p>Source order: 2</p>
+    <nav class="l-basic__menu" role="navigation" id="main-menu">
+      <header class="meta">
+        <h2 class="meta__heading">Menu</h2>
+        <p class="meta__data">HTML source order: 3</p>
       </header>
       <a href="#">Alice</a> ★
       <a href="#">Mad Hatter</a> ★
@@ -42,18 +67,18 @@
       <a href="#">Tom Petty</a>
     </nav>
 
-    <aside class="grid-item grid-item__aside1">
-      <header>
-        <h2>Aside</h2>
-        <p>Source order: 3</p>
+    <aside class="l-basic__aside1">
+      <header class="meta">
+        <h2 class="meta__heading">Aside</h2>
+        <p class="meta__data">HTML source order: 4</p>
       </header>
       <p>‘Have some wine,’ the March Hare said in an encouraging tone.</p>
     </aside>
 
-    <aside class="grid-item grid-item__aside2">
-      <header>
-        <h2>Aside</h2>
-        <p>Source order: 4</p>
+    <aside class="l-basic__aside2">
+      <header class="meta">
+        <h2 class="meta__heading">Aside</h2>
+        <p class="meta__data">HTML source order: 5</p>
       </header>
       <p>‘Please would you tell me,’ said Alice, a little timidly, for she was not quite sure whether it was good manners for her to speak first, ‘why your cat grins like that?’</p>
       <p>‘It’s a Cheshire cat,’ said the Duchess, ‘and that’s why. Pig!’</p>
@@ -61,8 +86,12 @@
 
   </div>
 
-  <footer class="footer">
-    <small>© 2013. The small print.</small>
+  <footer class="l-basic__footer">
+    <p class="meta">
+      <span class="meta__heading">Footer</span>
+      <span class="meta__data">HTML source order: 6</span>
+    </p>
+    <small>The small print.™</small>
   </footer>
 
 </div>

data/templates/project/manifest.rb

@@ -1,8 +1,9 @@
 description "The Zen Grids system."
 
 stylesheet  '_init.scss',             :media => 'all'
-stylesheet  '_layout.scss',           :media => 'all'
-stylesheet  '_modules.scss',          :media => 'all'
+stylesheet  '_base-elements.scss',    :media => 'all'
+stylesheet  '_layouts.scss',          :media => 'all'
+stylesheet  '_components.scss',       :media => 'all'
 stylesheet  '_visually-hidden.scss',  :media => 'all'
 stylesheet  'styles.scss',            :media => 'all'
 

data/templates/project/styles.scss

@@ -2,5 +2,6 @@
 @import "init";
 
 // Aggregate all the stylesheets into one file.
-@import "layout";
-@import "modules";
+@import "base-elements";
+@import "layouts";
+@import "components";

data/tests/Gemfile

@@ -0,0 +1,11 @@
+# Pull gems from RubyGems
+source 'https://rubygems.org'
+
+gem 'sass',               ">= 3.3"
+gem 'compass',            ">= 1.0.0.alpha.13", "!= 1.0.0.alpha.16", "!= 1.0.0.alpha.17"
+
+group :test do
+  gem 'rake'
+  gem "diffy", "~> 3.0.1"
+  gem "colorize", "~> 0.6.0"
+end

data/tests/README.md

@@ -0,0 +1,16 @@
+# Tests
+
+The tests for this project are built using Navigator, a Ruby testing framework
+for Sass with Compass. https://github.com/Team-Sass/navigator
+
+## Building the test environment
+
+Navigator works through Ruby, so you need to be running Ruby 1.8.7 or greater, and you to install [Bundler](http://bundler.io/) with `gem install bundler` or, for Mac OS X and other systems requiring administrative privileges, `sudo gem install bundler`.
+
+Once Bundler is installed, change to the tests directory and run `bundle install` to install libraries required by this project.
+
+## Running tests
+
+Once you have everything installed, change to the tests directory and run `bundle exec rake` to run the tests. This will compile all of the files in your `tests/tests` files into CSS files and compare those files to the files in `tests/controls`. If any of your output file from your tests don't line up with your controls, you'll get a `.diff` file generated of the differences and you'll get a failed assertion. If your Sass won't compile, you'll get a failed assertion.
+
+If you're working off of a known set of good output and you'd like to generate your controls quickly, you can run `bundle exec rake compile`.

data/tests/Rakefile

@@ -0,0 +1,25 @@
+# Navigator | Copyright 2013 Team Sass | MIT License | https://github.com/Team-Sass/navigator
+
+task :default => [:test]
+
+task :test do
+  require 'fileutils'
+
+  output_dir = 'output'
+  FileUtils.mkdir_p output_dir
+  ruby 'unit_tests.rb'
+  FileUtils.rm_rf output_dir
+end
+
+desc 'Compile baseline CSS'
+task :compile do
+  require 'compass'
+  require 'compass/exec'
+
+  Compass.add_configuration 'config.rb'
+  Compass.configuration.project_path = Dir.pwd
+  # Compile into baseline directory instead of test output directory
+  Compass.configuration.css_dir = 'controls'
+  Compass.compiler.clean!
+  Compass.compiler.run
+end

data/tests/config.rb

@@ -0,0 +1,22 @@
+# Require any additional compass plugins here.
+
+# File system locations
+sass_dir              = 'tests'
+css_dir               = 'output'
+
+# If developing an extension, add your extension's stylesheets folder as an import path.
+add_import_path       '../'
+
+# Set to true for easier debugging
+line_comments         = false
+# preferred_syntax      = :sass
+
+# CSS output style - :nested, :expanded, :compact, or :compressed
+output_style          = :expanded
+
+# Determine whether Compass asset helper functions generate relative
+# or absolute paths
+relative_assets       = true
+
+# Learn more:
+#   http://compass-style.org/docs/tutorials/configuration-reference/

data/tests/controls/compass-compatibility.css

@@ -0,0 +1,112 @@
+/**
+ * @file
+ * Test zen-grid-container() and zen-grid-item() after @import compass.
+ */
+#test-zen-grid-container {
+  /* Test zen-grid-container() */
+  *position: relative;
+  *zoom: 1;
+}
+#test-zen-grid-container:before, #test-zen-grid-container:after {
+  content: "";
+  display: table;
+}
+#test-zen-grid-container:after {
+  clear: both;
+}
+
+#test-zen-grid-container-2 {
+  /* Test zen-grid-container() with IE 8 support */
+}
+#test-zen-grid-container-2:before, #test-zen-grid-container-2:after {
+  content: "";
+  display: table;
+}
+#test-zen-grid-container-2:after {
+  clear: both;
+}
+
+#test-zen-grid-container-3 {
+  /* Test zen-grid-container() with IE 7 support */
+  *position: relative;
+  *zoom: 1;
+}
+#test-zen-grid-container-3:before, #test-zen-grid-container-3:after {
+  content: "";
+  display: table;
+}
+#test-zen-grid-container-3:after {
+  clear: both;
+}
+
+#test-zen-grid-container-4 {
+  /* Test zen-grid-container() with IE 6 support */
+  *position: relative;
+  *zoom: 1;
+}
+#test-zen-grid-container-4:before, #test-zen-grid-container-4:after {
+  content: "";
+  display: table;
+}
+#test-zen-grid-container-4:after {
+  clear: both;
+}
+
+#test-zen-grid-item {
+  /* Test zen-grid-item(1, 1) */
+  float: left;
+  width: 100%;
+  margin-left: 0%;
+  margin-right: -100%;
+  *margin-right: -99.9%;
+  padding-left: 10px;
+  padding-right: 10px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  *behavior: url("/ie-box-sizing.htc");
+  *word-wrap: break-word;
+  /* Test zen-grid-item(1, 1) with IE 8 support */
+  float: left;
+  width: 100%;
+  margin-left: 0%;
+  margin-right: -100%;
+  padding-left: 10px;
+  padding-right: 10px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  /* Test zen-grid-item(1, 1) with IE 7 support */
+  float: left;
+  width: 100%;
+  margin-left: 0%;
+  margin-right: -100%;
+  *margin-right: -99.9%;
+  padding-left: 10px;
+  padding-right: 10px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  *behavior: url("/ie-box-sizing.htc");
+  *word-wrap: break-word;
+  /* Test zen-grid-item(1, 1) with IE 6 support */
+  float: left;
+  width: 100%;
+  margin-left: 0%;
+  margin-right: -100%;
+  *margin-right: -99.9%;
+  padding-left: 10px;
+  padding-right: 10px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  *behavior: url("/ie-box-sizing.htc");
+  _display: inline;
+  _overflow: hidden;
+  _overflow-y: visible;
+  *word-wrap: break-word;
+}

data/{templates/unit-tests/test-results → tests/controls}/function-zen-direction-switch.css

@@ -12,5 +12,5 @@
   /* Test zen-direction-switch(none) */
   float: none;
   /* Test zen-direction-switch(invalid) */
-  float: both;
+  float: invalid;
 }

data/{templates/unit-tests/test-results/zen-grid-flow-item.css → tests/controls/zen-flow-item-width.css}

@@ -1,163 +1,129 @@
 /**
  * @file
- * Test zen-grid-flow-item()
+ * Test zen-flow-item-width()
  */
-#test-zen-grid-flow-item {
-  /* Test zen-grid-flow-item(1) without setting $parent-column-span */
-  padding-left: 10px;
-  padding-right: 10px;
+#test-zen-flow-item-width {
+  /* Test zen-flow-item-width(1) without setting $parent-column-span */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  word-wrap: break-word;
   width: 100%;
   padding-left: 0;
   padding-right: 0px;
   margin-right: 20px;
-  /* Test zen-grid-flow-item(1, 4) with 20px gutter */
-  padding-left: 10px;
-  padding-right: 10px;
+  /* Test zen-flow-item-width(1, 4) with 20px gutter */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  word-wrap: break-word;
   width: 25%;
   padding-left: 0;
   padding-right: 15px;
   margin-right: 5px;
-  /* Test zen-grid-flow-item(1, 4) with 15px gutter */
-  padding-left: 7px;
-  padding-right: 8px;
+  /* Test zen-flow-item-width(1, 4) with 15px gutter */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  word-wrap: break-word;
   width: 25%;
   padding-left: 0;
   padding-right: 11.25px;
   margin-right: 3.75px;
-  /* Test zen-grid-flow-item(1) with 5 columns, 20px gutter and $zen-grid-width: 1000px */
-  padding-left: 10px;
-  padding-right: 10px;
+  /* Test zen-flow-item-width(1) with 5 columns, 20px gutter and $zen-grid-width: 1000px */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  word-wrap: break-word;
   width: 200px;
   padding-left: 0;
   padding-right: 20px;
-  /* Test zen-grid-flow-item(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px, $alpha-gutter: true and $omega-gutter: false */
-  padding-left: 10px;
-  padding-right: 10px;
+  /* Test zen-flow-item-width(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px, $alpha-gutter: true and $omega-gutter: false */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  word-wrap: break-word;
   width: 200px;
   padding-left: 20px;
   padding-right: 0;
-  /* Test zen-grid-flow-item(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px and $omega-gutter: false */
-  padding-left: 10px;
-  padding-right: 10px;
+  /* Test zen-flow-item-width(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px and $omega-gutter: false */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  word-wrap: break-word;
   width: 180px;
   padding-left: 0;
   padding-right: 0;
-  /* Test zen-grid-flow-item(1, 4) with 15px gutter and $zen-direction: right */
-  padding-left: 8px;
-  padding-right: 7px;
+  /* Test zen-flow-item-width(1, 4) with 15px gutter and $zen-direction: right */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  word-wrap: break-word;
   width: 25%;
   padding-right: 0;
   padding-left: 11.25px;
   margin-left: 3.75px;
-  /* Test zen-grid-flow-item(1, 4) with 15px gutter and $alpha-gutter: true */
-  padding-left: 7px;
-  padding-right: 8px;
+  /* Test zen-flow-item-width(1, 4) with 15px gutter and $alpha-gutter: true */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  word-wrap: break-word;
   width: 25%;
   padding-left: 0;
   margin-left: 15px;
   padding-right: 11.25px;
   margin-right: 3.75px;
-  /* Test zen-grid-flow-item(1, 4) with 15px gutter and $omega-gutter: false */
-  padding-left: 7px;
-  padding-right: 8px;
+  /* Test zen-flow-item-width(1, 4) with 15px gutter and $omega-gutter: false */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  word-wrap: break-word;
   width: 25%;
   padding-left: 0;
   padding-right: 11.25px;
   margin-right: -11.25px;
-  /* Test zen-grid-flow-item(3, 4) with 20px gutter and $alpha-gutter: true */
-  padding-left: 10px;
-  padding-right: 10px;
+  /* Test zen-flow-item-width(3, 4) with 20px gutter and $alpha-gutter: true */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  word-wrap: break-word;
   width: 75%;
   padding-left: 0;
   margin-left: 20px;
   padding-right: 5px;
   margin-right: 15px;
-  /* Test zen-grid-flow-item(3, 4) with 20px gutter and $omega-gutter: false */
-  padding-left: 10px;
-  padding-right: 10px;
+  /* Test zen-flow-item-width(3, 4) with 20px gutter and $omega-gutter: false */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  word-wrap: break-word;
   width: 75%;
   padding-left: 0;
   padding-right: 5px;
   margin-right: -5px;
-  /* Test zen-grid-flow-item(1, 4) with 15px gutter, $zen-direction: right and $alpha-gutter: true */
-  padding-left: 8px;
-  padding-right: 7px;
+  /* Test zen-flow-item-width(1, 4) with 15px gutter, $zen-direction: right and $alpha-gutter: true */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  word-wrap: break-word;
   width: 25%;
   padding-right: 0;
   margin-right: 15px;
   padding-left: 11.25px;
   margin-left: 3.75px;
-  /* Test zen-grid-flow-item(1, 4) with $zen-box-sizing: content-box and 10% gutter */
-  padding-left: 7.14286%;
-  padding-right: 7.14286%;
+  /* Test zen-flow-item-width(1, 4) with $zen-box-sizing: content-box and 10% gutter */
   border-left: 0 !important;
   border-right: 0 !important;
-  word-wrap: break-word;
   width: 10.71429%;
   padding-left: 0;
   padding-right: 10.71429%;
   margin-right: 3.57143%;
-  /* Test zen-grid-flow-item(1, 4) with $zen-auto-include-flow-item-base: false */
+  /* Test zen-flow-item-width(1, 4) with $zen-box-sizing: universal-border-box */
+  width: 25%;
+  padding-left: 0;
+  padding-right: 15px;
+  margin-right: 5px;
+  /* Test zen-flow-item-width(1, 4) with $zen-auto-include-flow-item-base: false */
   width: 25%;
   padding-left: 0;
   padding-right: 15px;