zen-grids 1.0.rc.1 → 1.0.rc.2

data/README.txt

@@ -22,13 +22,13 @@ to a 12 column grid.
     @include zen-grid-container;
   }
   .sidebar1 {
-    @include zen-grid(3, 1);  // 3 col. wide sidebar starting in the 1st column
+    @include zen-grid-item(3, 1);  // Span 3 columns starting in 1st column
   }
   .content {
-    @include zen-grid(6, 4);  // 6 col. wide element starting in the 4th column
+    @include zen-grid-item(6, 4);  // Span 6 columns starting in 4th column
   }
   .sidebar2 {
-    @include zen-grid(3, 10); // 3 col. wide sidebar starting in the 10th column
+    @include zen-grid-item(3, 10); // Span 3 columns starting in 10th column
   }
 
 Within the .container element, the .sidebar1, .sidebar2 and .content elements

data/stylesheets/_zen.scss

@@ -1,3 +1,3 @@
-// Import the partial for Zen Grids, but not for Zen Columns.
+// Import the partial for Zen Grids.
 
 @import "zen/grids";

data/stylesheets/zen/_grids.scss

@@ -33,16 +33,6 @@ $zen-box-sizing: border-box !default;
 $legacy-support-for-ie7: false !default;
 $legacy-support-for-ie6: false !default;
 
-// Specify the method to add IE legacy support; can be hack or class. Setting
-// this to class will result in generated CSS rules using html/body classes
-// specified in $default-legacy-ie*-class variables, like those used in HTML5
-// Boilerplate.
-$default-legacy-ie-approach: hack !default;
-
-// The html/body classes to use when $default-legacy-ie-approach equals class.
-$default-legacy-ie6-class: lt-ie7;
-$default-legacy-ie7-class: lt-ie8;
-
 // Specify the default floating direction for zen's mixins.
 $zen-float-direction: left !default;
 
@@ -154,11 +144,10 @@ $zen-reverse-all-floats: false !default;
   @if $reverse-all-flows {
     $dir: zen-direction-flip($dir);
   }
-  $rev: zen-direction-flip($dir);
 
   padding: {
-    left: zen-half-gutter($gutter-width, $dir);
-    right: zen-half-gutter($gutter-width, $rev);
+    left: zen-half-gutter($gutter-width, left, $dir);
+    right: zen-half-gutter($gutter-width, right, $dir);
   }
   // Specify the border-box properties.
   @if $box-sizing == border-box {
@@ -175,38 +164,20 @@ $zen-reverse-all-floats: false !default;
   overflow: visible;
   word-wrap: break-word; // A very nice CSS3 property.
 
-  @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) and $box-sizing == border-box and $box-sizing-polyfill-path == "" {
-    @warn "IE legacy support is on, but $box-sizing is set to #{$box-sizing} and the $box-sizing-polyfill-path is empty.";
-  }
-  @else {
-    @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
-      @if $box-sizing-polyfill-path {
-        @if $default-legacy-ie-approach == hack {
-          *behavior: url($box-sizing-polyfill-path);
-        }
-        @else {
-          #{$default-legacy-ie7-class} & {
-            behavior: url($box-sizing-polyfill-path);
-          }
-        }
-      }
-      @if $legacy-support-for-ie6 {
-        @if $default-legacy-ie-approach == hack {
-          _display: inline; // display inline or double your floated margin! [1]
-          _overflow: hidden; // in IE6, overflow auto is broken [2] and so is overflow visible [3]
-          _overflow-y: visible;
-        }
-        @else {
-          #{$default-legacy-ie6-class} & {
-            display: inline; // display inline or double your floated margin! [1]
-            overflow: hidden; // in IE6, overflow auto is broken [2] and so is overflow visible [3]
-            overflow-y: visible;
-          }
-        }
-        // 1. http://www.positioniseverything.net/explorer/doubled-margin.html
-        // 2. http://browservulsel.blogspot.com/2005/04/ie-overflow-auto-scrollbar-overlap.html
-        // 3. http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B
-      }
+  @if ($legacy-support-for-ie6 or $legacy-support-for-ie7) {
+    @if $box-sizing == border-box and $box-sizing-polyfill-path == "" {
+      @warn "IE legacy support is on, but $box-sizing is set to #{$box-sizing} and the $box-sizing-polyfill-path is empty.";
+    }
+    @if $box-sizing-polyfill-path != "" {
+      *behavior: url($box-sizing-polyfill-path);
+    }
+    @if $legacy-support-for-ie6 {
+      _display: inline; // display inline or double your floated margin! [1]
+      _overflow: hidden; // in IE6, overflow auto is broken [2] and so is overflow visible [3]
+      _overflow-y: visible;
+      // 1. http://www.positioniseverything.net/explorer/doubled-margin.html
+      // 2. http://browservulsel.blogspot.com/2005/04/ie-overflow-auto-scrollbar-overlap.html
+      // 3. http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B
     }
   }
 }

data/templates/project/manifest.rb

@@ -7,9 +7,7 @@ stylesheet 'styles.scss', :media => 'all'
 html 'example.html'
 
 help %Q{
-The Zen Grids system is an easy-to-use responsive grid system. It's immune to
-browser rounding errors and its source order is mostly independent from display
-order. To learn more, visit:
+Zen Grids includes a fluid responsive grid system with an intuitive, flexible layout mechanism that leverages the natural source order of your content. With an easy-to-use Sass mixin set, the Zen Grids system can be applied to an infinite number of layouts, including adaptive and fixed-width layouts. To learn more, visit:
 
   http://zengrids.com
 }
@@ -20,6 +18,5 @@ how to use the system at:
 
   http://zengrids.com
 
-It's easy! And (bonus!) you'll find pre-made responsive layouts you can
-customize and start using on your website today.
+It's easy!
 }

data/templates/unit-tests/README.txt

@@ -0,0 +1,16 @@
+UNIT TESTS FOR ZEN GRIDS
+------------------------
+
+To run the unit tests for Zen Grids:
+
+1. Create a "tests" Compass project using the unit-tests pattern:
+
+   compass create tests -r zen-grids --using=zen-grids/unit-tests
+
+2. From inside the "tests" project, compare the compiled stylesheets to the
+   previous unit test results in the test-results directory:
+
+   diff -r test-results/ stylesheets/
+
+   If the unit tests were successful, the above command should report no
+   differences.

data/templates/unit-tests/manifest.rb

@@ -0,0 +1,31 @@
+description "Unit tests for the Zen Grids system."
+
+stylesheet 'sass/function-zen-direction-flip.scss', :media => 'all', :to => 'function-zen-direction-flip.scss'
+stylesheet 'sass/function-zen-half-gutter.scss',    :media => 'all', :to => 'function-zen-half-gutter.scss'
+stylesheet 'sass/zen-clear.scss',                   :media => 'all', :to => 'zen-clear.scss'
+stylesheet 'sass/zen-grid-container.scss',          :media => 'all', :to => 'zen-grid-container.scss'
+stylesheet 'sass/zen-grid-flow-item.scss',          :media => 'all', :to => 'zen-grid-flow-item.scss'
+stylesheet 'sass/zen-grid-item-base.scss',          :media => 'all', :to => 'zen-grid-item-base.scss'
+stylesheet 'sass/zen-grid-item.scss',               :media => 'all', :to => 'zen-grid-item.scss'
+stylesheet 'sass/zen-nested-container.scss',        :media => 'all', :to => 'zen-nested-container.scss'
+
+file 'test-results/function-zen-direction-flip.css'
+file 'test-results/function-zen-half-gutter.css'
+file 'test-results/zen-clear.css'
+file 'test-results/zen-grid-container.css'
+file 'test-results/zen-grid-flow-item.css'
+file 'test-results/zen-grid-item-base.css'
+file 'test-results/zen-grid-item.css'
+file 'test-results/zen-nested-container.css'
+
+file 'README.txt'
+
+help %Q{
+To run the unit tests, simply run "compass compile" and compare the generated
+CSS to those in the results directory.
+  diff -r results css
+}
+
+welcome_message %Q{
+You rock! The unit tests for the Zen Grids system are now installed.
+}

data/templates/unit-tests/sass/function-zen-direction-flip.scss

@@ -0,0 +1,23 @@
+/**
+ * @file
+ * Test zen-direction-flip()
+ */
+
+@import "zen";
+
+#test-zen-direction-flip {
+  /* Test zen-direction-flip(left) */
+  float: zen-direction-flip(left);
+
+  /* Test zen-direction-flip(right) */
+  float: zen-direction-flip(right);
+
+  /* Test zen-direction-flip(both) */
+  float: zen-direction-flip(both);
+
+  /* Test zen-direction-flip(none) */
+  float: zen-direction-flip(none);
+
+  /* Test zen-direction-flip(invalid) */
+  float: zen-direction-flip(invalid);
+}

data/templates/unit-tests/sass/function-zen-half-gutter.scss

@@ -0,0 +1,37 @@
+/**
+ * @file
+ * Test zen-half-gutter()
+ */
+
+@import "zen";
+
+#test-zen-half-gutter {
+  /* Test zen-half-gutter() with default $zen-gutter-width: 20px */
+  padding-left: zen-half-gutter();
+
+  /* Test zen-half-gutter() with $zen-gutter-width: 30px */
+  $zen-gutter-width: 30px;
+  padding-left: zen-half-gutter();
+
+  /* Test zen-half-gutter(10em) */
+  padding-left: zen-half-gutter(10em);
+
+  /* Test zen-half-gutter(11em) */
+  padding-left: zen-half-gutter(11em);
+
+  /* Test zen-half-gutter(10px) */
+  padding-left: zen-half-gutter(10px);
+
+  /* Test zen-half-gutter(11px) */
+  padding-left: zen-half-gutter(11px);
+
+  /* Test zen-half-gutter(11px, right) */
+  padding-left: zen-half-gutter(11px, right);
+
+  /* Test zen-half-gutter(11px) with $zen-float-direction: right */
+  $zen-float-direction: right;
+  padding-left: zen-half-gutter(11px);
+
+  /* Test zen-half-gutter(11px, left) with $zen-float-direction: right */
+  padding-left: zen-half-gutter(11px, left);
+}

data/templates/unit-tests/sass/zen-clear.scss

@@ -0,0 +1,26 @@
+/**
+ * @file
+ * Test zen-clear()
+ */
+
+@import "zen";
+
+#test-zen-clear {
+  /* Test zen-clear() */
+  @include zen-clear();
+
+  /* Test zen-clear() with $zen-float-direction: right */
+  $zen-float-direction: right;
+  @include zen-clear();
+  $zen-float-direction: left;
+
+  /* Test zen-clear(left) */
+  @include zen-clear(left);
+
+  /* Test zen-clear(left, $reverse-all-floats: TRUE) */
+  @include zen-clear(left, $reverse-all-floats: TRUE);
+
+  /* Test zen-clear(left) with: $zen-reverse-all-floats: TRUE; */
+  $zen-reverse-all-floats: TRUE;
+  @include zen-clear(left);
+}

data/templates/unit-tests/sass/zen-grid-container.scss

@@ -0,0 +1,11 @@
+/**
+ * @file
+ * Test zen-grid-container()
+ */
+
+@import "zen";
+
+#test-zen-grid-container {
+  /* Test zen-grid-container() */
+  @include zen-grid-container();
+}

data/templates/unit-tests/sass/zen-grid-flow-item.scss

@@ -0,0 +1,118 @@
+/**
+ * @file
+ * Test zen-grid-flow-item()
+ */
+
+@import "zen";
+
+#test-zen-grid-flow-item {
+  /* Test zen-grid-flow-item(1) without setting $column-count */
+  @include zen-grid-flow-item(1);
+
+  /* Test zen-grid-flow-item(1, 4) with 12 column grid and 20px gutter */
+  @include zen-grid-flow-item(1, 4);
+
+  /* Test zen-grid-flow-item(1, 4) with 15px gutter */
+  $zen-gutter-width: 15px;
+  @include zen-grid-flow-item(1, 4);
+  $zen-gutter-width: 20px;
+
+  /* Test zen-grid-flow-item(1, 4) with 15px gutter and $zen-float-direction: right */
+  $zen-gutter-width: 15px;
+  $zen-float-direction: right;
+  @include zen-grid-flow-item(1, 4);
+  $zen-gutter-width: 20px;
+  $zen-float-direction: left;
+
+  /* Test zen-grid-flow-item(1, 4) with 15px gutter and $alpha-gutter: true */
+  $zen-gutter-width: 15px;
+  @include zen-grid-flow-item(1, 4, $alpha-gutter: true);
+  $zen-gutter-width: 20px;
+
+  /* Test zen-grid-flow-item(1, 4) with 15px gutter and $omega-gutter: false */
+  $zen-gutter-width: 15px;
+  @include zen-grid-flow-item(1, 4, $omega-gutter: false);
+  $zen-gutter-width: 20px;
+
+  /* Test zen-grid-flow-item(1, 4) with 15px gutter, $zen-float-direction: right and $alpha-gutter: true */
+  $zen-gutter-width: 15px;
+  $zen-float-direction: right;
+  @include zen-grid-flow-item(1, 4, $alpha-gutter: true);
+  $zen-gutter-width: 20px;
+  $zen-float-direction: left;
+
+  /* Test zen-grid-flow-item(1, 4) with $zen-box-sizing: content-box and 10% gutter */
+  $zen-gutter-width: 10%;
+  $zen-box-sizing: content-box;
+  @include zen-grid-flow-item(1, 4);
+  $zen-gutter-width: 20px;
+  $zen-box-sizing: border-box;
+
+  /* Test zen-grid-flow-item(1, 4) with $zen-auto-include-flow-item-base: false */
+  $zen-auto-include-flow-item-base: false;
+  @include zen-grid-flow-item(1, 4);
+}
+
+
+@mixin zen-grid-flow-item (
+  $column-span,
+  $parent-column-count: false,
+  $alpha-gutter: false,
+  $omega-gutter: true,
+  $flow-direction: $zen-float-direction,
+  $column-count: $zen-column-count,
+  $gutter-width: $zen-gutter-width,
+  $grid-width: $zen-grid-width,
+  $box-sizing: $zen-box-sizing,
+  $reverse-all-flows: $zen-reverse-all-floats,
+  $auto-include-flow-item-base: $zen-auto-include-flow-item-base
+) {
+
+  $columns: $column-count;
+  @if unit($grid-width) == "%" {
+    @if $parent-column-count == false {
+      @warn "For responsive layouts with a percentage-based grid width, you must set the $column-count to the number of columns that the parent element spans.";
+    }
+    @else {
+      $columns: $parent-column-count;
+    }
+  }
+
+  $dir: $flow-direction;
+  @if $reverse-all-flows {
+    $dir: zen-direction-flip($dir);
+  }
+  $rev: zen-direction-flip($dir);
+
+  // Ensure the HTML item either has a full gutter or no gutter on each side.
+  @if $alpha-gutter {
+    margin-#{$dir}: zen-half-gutter($gutter-width, $rev);
+  }
+  @else {
+    margin-#{$dir}: -(zen-half-gutter($gutter-width, $dir));
+  }
+  @if $omega-gutter {
+    margin-#{$rev}: zen-half-gutter($gutter-width, $dir);
+  }
+  @else {
+    margin-#{$rev}: -(zen-half-gutter($gutter-width, $rev));
+  }
+
+  // Calculate the unit width.
+  $unit-width: $grid-width / $columns;
+  $width: $column-span * $unit-width;
+  @if $box-sizing == content-box {
+    @if not comparable($width, $gutter-width) {
+      $units-gutter: unit($gutter-width);
+      $units-grid: unit($grid-width);
+      @warn "The layout cannot be calculated correctly; when using box-sizing: content-box, the units of the gutter (#{$units-gutter} did not match the units of the grid width (#{$units-grid}).";
+    }
+    $width: $width - $gutter-width;
+  }
+  width: $width;
+
+  // Auto-apply the unit base mixin.
+  @if $auto-include-flow-item-base {
+    @include zen-grid-item-base($gutter-width, $box-sizing);
+  }
+}

data/templates/unit-tests/sass/zen-grid-item-base.scss

@@ -0,0 +1,54 @@
+/**
+ * @file
+ * Test zen-grid-item-base()
+ */
+
+@import "zen";
+
+#test-zen-grid-item-base {
+  /* Test zen-grid-item-base() */
+  @include zen-grid-item-base();
+
+  /* Test zen-grid-item-base() with $zen-box-sizing: content-box */
+  $zen-box-sizing: content-box;
+  @include zen-grid-item-base();
+  $zen-box-sizing: border-box;
+
+  /* Test zen-grid-item-base() with $legacy-support-for-ie7: true */
+  $legacy-support-for-ie7: true;
+  @include zen-grid-item-base();
+  $legacy-support-for-ie7: false;
+
+  /* Test zen-grid-item-base() with $box-sizing-polyfill-path: "/boxsizing.htc" and $legacy-support-for-ie7: true */
+  $box-sizing-polyfill-path: "/boxsizing.htc";
+  $legacy-support-for-ie7: true;
+  @include zen-grid-item-base();
+  $box-sizing-polyfill-path: "";
+  $legacy-support-for-ie7: false;
+
+  /* Test zen-grid-item-base() with $box-sizing-polyfill-path: "/boxsizing.htc" and $legacy-support-for-ie6: true */
+  $box-sizing-polyfill-path: "/boxsizing.htc";
+  $legacy-support-for-ie6: true;
+  @include zen-grid-item-base();
+  $box-sizing-polyfill-path: "";
+  $legacy-support-for-ie6: false;
+
+  /* Test zen-grid-item-base() with $zen-gutter-width: 15px */
+  $zen-gutter-width: 15px;
+  @include zen-grid-item-base();
+  $zen-gutter-width: 20px;
+
+  /* Test zen-grid-item-base() with $zen-gutter-width: 15px and $zen-float-direction: right */
+  $zen-gutter-width: 15px;
+  $zen-float-direction: right;
+  @include zen-grid-item-base();
+  $zen-gutter-width: 20px;
+  $zen-float-direction: left;
+
+  /* Test zen-grid-item-base() with $zen-gutter-width: 15px and $zen-reverse-all-floats: true */
+  $zen-gutter-width: 15px;
+  $zen-reverse-all-floats: true;
+  @include zen-grid-item-base();
+  $zen-gutter-width: 20px;
+  $zen-reverse-all-floats: false;
+}

data/templates/unit-tests/sass/zen-grid-item.scss

@@ -0,0 +1,56 @@
+/**
+ * @file
+ * Test zen-grid-item()
+ */
+
+@import "zen";
+
+#test-zen-grid-item {
+  /* Test zen-grid-item(6, 4) with 12 column grid and 20px gutter */
+  @include zen-grid-item(6, 4);
+
+  /* Test zen-grid-item(3, 3) with box-sizing: content-box, 5 column grid and 10% gutter */
+  $zen-column-count: 5;
+  $zen-gutter-width: 10%;
+  $zen-box-sizing: content-box;
+  @include zen-grid-item(3, 3);
+  $zen-box-sizing: border-box;
+
+  /* Turn off $zen-auto-include-item-base */
+  $zen-auto-include-item-base: false;
+
+  /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter */
+  $zen-column-count: 5;
+  $zen-gutter-width: 40px;
+  @include zen-grid-item(3, 3);
+
+  /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter */
+  $zen-column-count: 5;
+  $zen-gutter-width: 40px;
+  @include zen-grid-item(3, 3, right);
+
+  /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter and $zen-reverse-all-floats */
+  $zen-column-count: 5;
+  $zen-gutter-width: 40px;
+  $zen-reverse-all-floats: true;
+  @include zen-grid-item(3, 3);
+  $zen-reverse-all-floats: false;
+
+  /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter and $zen-reverse-all-floats */
+  $zen-column-count: 5;
+  $zen-gutter-width: 40px;
+  $zen-reverse-all-floats: true;
+  @include zen-grid-item(3, 3, right);
+  $zen-reverse-all-floats: false;
+
+  /* Test zen-grid-item(3, 2.5) with 5 column grid and 40px gutter */
+  $zen-column-count: 5;
+  $zen-gutter-width: 40px;
+  @include zen-grid-item(3, 2.5);
+
+  /* Test zen-grid-item(3, 3) with $zen-grid-width: 1000px, 5 column grid and 40px gutter */
+  $zen-grid-width: 1000px;
+  $zen-column-count: 5;
+  $zen-gutter-width: 40px;
+  @include zen-grid-item(3, 3);
+}

data/templates/unit-tests/sass/zen-nested-container.scss

@@ -0,0 +1,11 @@
+/**
+ * @file
+ * Test zen-nested-container()
+ */
+
+@import "zen";
+
+#test-zen-nested-container {
+  /* Test zen-nested-container() */
+  @include zen-nested-container();
+}

data/templates/unit-tests/test-results/function-zen-direction-flip.css

@@ -0,0 +1,17 @@
+/**
+ * @file
+ * Test zen-direction-flip()
+ */
+/* line 8, ../sass/function-zen-direction-flip.scss */
+#test-zen-direction-flip {
+  /* Test zen-direction-flip(left) */
+  float: right;
+  /* Test zen-direction-flip(right) */
+  float: left;
+  /* Test zen-direction-flip(both) */
+  float: both;
+  /* Test zen-direction-flip(none) */
+  float: none;
+  /* Test zen-direction-flip(invalid) */
+  float: both;
+}

data/templates/unit-tests/test-results/function-zen-half-gutter.css

@@ -0,0 +1,25 @@
+/**
+ * @file
+ * Test zen-half-gutter()
+ */
+/* line 8, ../sass/function-zen-half-gutter.scss */
+#test-zen-half-gutter {
+  /* Test zen-half-gutter() with default $zen-gutter-width: 20px */
+  padding-left: 10px;
+  /* Test zen-half-gutter() with $zen-gutter-width: 30px */
+  padding-left: 15px;
+  /* Test zen-half-gutter(10em) */
+  padding-left: 5em;
+  /* Test zen-half-gutter(11em) */
+  padding-left: 5.5em;
+  /* Test zen-half-gutter(10px) */
+  padding-left: 5px;
+  /* Test zen-half-gutter(11px) */
+  padding-left: 5px;
+  /* Test zen-half-gutter(11px, right) */
+  padding-left: 6px;
+  /* Test zen-half-gutter(11px) with $zen-float-direction: right */
+  padding-left: 5px;
+  /* Test zen-half-gutter(11px, left) with $zen-float-direction: right */
+  padding-left: 6px;
+}

data/templates/unit-tests/test-results/zen-clear.css

@@ -0,0 +1,17 @@
+/**
+ * @file
+ * Test zen-clear()
+ */
+/* line 8, ../sass/zen-clear.scss */
+#test-zen-clear {
+  /* Test zen-clear() */
+  clear: left;
+  /* Test zen-clear() with $zen-float-direction: right */
+  clear: right;
+  /* Test zen-clear(left) */
+  clear: left;
+  /* Test zen-clear(left, $reverse-all-floats: TRUE) */
+  clear: right;
+  /* Test zen-clear(left) with: $zen-reverse-all-floats: TRUE; */
+  clear: right;
+}

data/templates/unit-tests/test-results/zen-grid-container.css

@@ -0,0 +1,11 @@
+/**
+ * @file
+ * Test zen-grid-container()
+ */
+/* line 8, ../sass/zen-grid-container.scss */
+#test-zen-grid-container {
+  /* Test zen-grid-container() */
+  position: relative;
+  overflow: hidden;
+  *zoom: 1;
+}

data/templates/unit-tests/test-results/zen-grid-flow-item.css

@@ -0,0 +1,104 @@
+/**
+ * @file
+ * Test zen-grid-flow-item()
+ */
+/* line 8, ../sass/zen-grid-flow-item.scss */
+#test-zen-grid-flow-item {
+  /* Test zen-grid-flow-item(1) without setting $column-count */
+  margin-left: -10px;
+  margin-right: 10px;
+  width: 8.333%;
+  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;
+  overflow: visible;
+  word-wrap: break-word;
+  /* Test zen-grid-flow-item(1, 4) with 12 column grid and 20px gutter */
+  margin-left: -10px;
+  margin-right: 10px;
+  width: 25%;
+  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;
+  overflow: visible;
+  word-wrap: break-word;
+  /* Test zen-grid-flow-item(1, 4) with 15px gutter */
+  margin-left: -7px;
+  margin-right: 7px;
+  width: 25%;
+  padding-left: 7px;
+  padding-right: 8px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: visible;
+  word-wrap: break-word;
+  /* Test zen-grid-flow-item(1, 4) with 15px gutter and $zen-float-direction: right */
+  margin-right: -7px;
+  margin-left: 7px;
+  width: 25%;
+  padding-left: 8px;
+  padding-right: 7px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: visible;
+  word-wrap: break-word;
+  /* Test zen-grid-flow-item(1, 4) with 15px gutter and $alpha-gutter: true */
+  margin-left: 8px;
+  margin-right: 7px;
+  width: 25%;
+  padding-left: 7px;
+  padding-right: 8px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: visible;
+  word-wrap: break-word;
+  /* Test zen-grid-flow-item(1, 4) with 15px gutter and $omega-gutter: false */
+  margin-left: -7px;
+  margin-right: -8px;
+  width: 25%;
+  padding-left: 7px;
+  padding-right: 8px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: visible;
+  word-wrap: break-word;
+  /* Test zen-grid-flow-item(1, 4) with 15px gutter, $zen-float-direction: right and $alpha-gutter: true */
+  margin-right: 8px;
+  margin-left: 7px;
+  width: 25%;
+  padding-left: 8px;
+  padding-right: 7px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: visible;
+  word-wrap: break-word;
+  /* Test zen-grid-flow-item(1, 4) with $zen-box-sizing: content-box and 10% gutter */
+  margin-left: -5%;
+  margin-right: 5%;
+  width: 15%;
+  padding-left: 5%;
+  padding-right: 5%;
+  border: 0 !important;
+  overflow: visible;
+  word-wrap: break-word;
+  /* Test zen-grid-flow-item(1, 4) with $zen-auto-include-flow-item-base: false */
+  margin-left: -10px;
+  margin-right: 10px;
+  width: 25%;
+}

data/templates/unit-tests/test-results/zen-grid-item-base.css

@@ -0,0 +1,81 @@
+/**
+ * @file
+ * Test zen-grid-item-base()
+ */
+/* line 8, ../sass/zen-grid-item-base.scss */
+#test-zen-grid-item-base {
+  /* Test zen-grid-item-base() */
+  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;
+  overflow: visible;
+  word-wrap: break-word;
+  /* Test zen-grid-item-base() with $zen-box-sizing: content-box */
+  padding-left: 10px;
+  padding-right: 10px;
+  border: 0 !important;
+  overflow: visible;
+  word-wrap: break-word;
+  /* Test zen-grid-item-base() with $legacy-support-for-ie7: true */
+  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;
+  overflow: visible;
+  word-wrap: break-word;
+  /* Test zen-grid-item-base() with $box-sizing-polyfill-path: "/boxsizing.htc" and $legacy-support-for-ie7: true */
+  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;
+  overflow: visible;
+  word-wrap: break-word;
+  *behavior: url("/boxsizing.htc");
+  /* Test zen-grid-item-base() with $box-sizing-polyfill-path: "/boxsizing.htc" and $legacy-support-for-ie6: true */
+  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;
+  overflow: visible;
+  word-wrap: break-word;
+  *behavior: url("/boxsizing.htc");
+  _display: inline;
+  _overflow: hidden;
+  _overflow-y: visible;
+  /* Test zen-grid-item-base() with $zen-gutter-width: 15px */
+  padding-left: 7px;
+  padding-right: 8px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: visible;
+  word-wrap: break-word;
+  /* Test zen-grid-item-base() with $zen-gutter-width: 15px and $zen-float-direction: right */
+  padding-left: 8px;
+  padding-right: 7px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: visible;
+  word-wrap: break-word;
+  /* Test zen-grid-item-base() with $zen-gutter-width: 15px and $zen-reverse-all-floats: true */
+  padding-left: 8px;
+  padding-right: 7px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: visible;
+  word-wrap: break-word;
+}

data/templates/unit-tests/test-results/zen-grid-item.css

@@ -0,0 +1,61 @@
+/**
+ * @file
+ * Test zen-grid-item()
+ */
+/* line 8, ../sass/zen-grid-item.scss */
+#test-zen-grid-item {
+  /* Test zen-grid-item(6, 4) with 12 column grid and 20px gutter */
+  float: left;
+  width: 50%;
+  margin-left: 25%;
+  margin-right: -75%;
+  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;
+  overflow: visible;
+  word-wrap: break-word;
+  /* Test zen-grid-item(3, 3) with box-sizing: content-box, 5 column grid and 10% gutter */
+  float: left;
+  width: 50%;
+  margin-left: 40%;
+  margin-right: -100%;
+  padding-left: 5%;
+  padding-right: 5%;
+  border: 0 !important;
+  overflow: visible;
+  word-wrap: break-word;
+  /* Turn off $zen-auto-include-item-base */
+  /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter */
+  float: left;
+  width: 60%;
+  margin-left: 40%;
+  margin-right: -100%;
+  /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter */
+  float: right;
+  width: 60%;
+  margin-right: 40%;
+  margin-left: -100%;
+  /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter and $zen-reverse-all-floats */
+  float: right;
+  width: 60%;
+  margin-right: 40%;
+  margin-left: -100%;
+  /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter and $zen-reverse-all-floats */
+  float: left;
+  width: 60%;
+  margin-left: 40%;
+  margin-right: -100%;
+  /* Test zen-grid-item(3, 2.5) with 5 column grid and 40px gutter */
+  float: left;
+  width: 60%;
+  margin-left: 30%;
+  margin-right: -90%;
+  /* Test zen-grid-item(3, 3) with $zen-grid-width: 1000px, 5 column grid and 40px gutter */
+  float: left;
+  width: 600px;
+  margin-left: 400px;
+  margin-right: -1000px;
+}

data/templates/unit-tests/test-results/zen-nested-container.css

@@ -0,0 +1,13 @@
+/**
+ * @file
+ * Test zen-nested-container()
+ */
+/* line 8, ../sass/zen-nested-container.scss */
+#test-zen-nested-container {
+  /* Test zen-nested-container() */
+  position: relative;
+  overflow: hidden;
+  *zoom: 1;
+  padding-left: 0;
+  padding-right: 0;
+}

data/zen-grids.gemspec

@@ -4,13 +4,13 @@ Gem::Specification.new do |s|
   s.name        = 'zen-grids'
 
   s.summary     = %q{A Compass plugin for Zen Grids, a fluid responsive grid system}
-  s.description = %q{The Zen Grids system is a fluid responsive grid system that is immune to rounding errors and overflowing content. With an easy-to-use Sass mixin set, the Zen Grids system can be applied to an infinite number of layouts.}
+  s.description = %q{Zen Grids includes a fluid responsive grid system with an intuitive, flexible layout mechanism that leverages the natural source order of your content. With an easy-to-use Sass mixin set, the Zen Grids system can be applied to an infinite number of layouts, including adaptive and fixed-width layouts.}
 
   s.homepage    = 'http://zengrids.com'
   s.rubyforge_project =
 
-  s.version     = '1.0.rc.1'
-  s.date        = '2012-02-18'
+  s.version     = '1.0.rc.2'
+  s.date        = '2012-04-03'
 
   s.authors     = ['John Albin Wilkins']
   s.email       = 'virtually.johnalbin@gmail.com'
@@ -23,13 +23,30 @@ Gem::Specification.new do |s|
     lib/zen-grids.rb
     stylesheets/_zen.scss
     stylesheets/zen/_background-grid.scss
-    stylesheets/zen/_columns.scss
     stylesheets/zen/_grids.scss
     templates/project/example.html
     templates/project/manifest.rb
     templates/project/common.scss
     templates/project/layout.scss
     templates/project/styles.scss
+    templates/unit-tests/manifest.rb
+    templates/unit-tests/README.txt
+    templates/unit-tests/sass/function-zen-direction-flip.scss
+    templates/unit-tests/sass/function-zen-half-gutter.scss
+    templates/unit-tests/sass/zen-clear.scss
+    templates/unit-tests/sass/zen-grid-container.scss
+    templates/unit-tests/sass/zen-grid-flow-item.scss
+    templates/unit-tests/sass/zen-grid-item-base.scss
+    templates/unit-tests/sass/zen-grid-item.scss
+    templates/unit-tests/sass/zen-nested-container.scss
+    templates/unit-tests/test-results/function-zen-direction-flip.css
+    templates/unit-tests/test-results/function-zen-half-gutter.css
+    templates/unit-tests/test-results/zen-clear.css
+    templates/unit-tests/test-results/zen-grid-container.css
+    templates/unit-tests/test-results/zen-grid-flow-item.css
+    templates/unit-tests/test-results/zen-grid-item-base.css
+    templates/unit-tests/test-results/zen-grid-item.css
+    templates/unit-tests/test-results/zen-nested-container.css
     zen-grids.gemspec
   ]
 end

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: zen-grids
 version: !ruby/object:Gem::Version 
-  hash: 15424247
-  prerelease: 4
+  prerelease: true
   segments: 
   - 1
   - 0
   - rc
-  - 1
-  version: 1.0.rc.1
+  - 2
+  version: 1.0.rc.2
 platform: ruby
 authors: 
 - John Albin Wilkins
@@ -16,24 +15,23 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-02-18 00:00:00 Z
+date: 2012-04-03 00:00:00 +08:00
+default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: sass
   prerelease: false
   requirement: &id001 !ruby/object:Gem::Requirement 
-    none: false
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
-        hash: 5
         segments: 
         - 3
         - 1
         version: "3.1"
   type: :runtime
   version_requirements: *id001
-description: The Zen Grids system is a fluid responsive grid system that is immune to rounding errors and overflowing content. With an easy-to-use Sass mixin set, the Zen Grids system can be applied to an infinite number of layouts.
+description: Zen Grids includes a fluid responsive grid system with an intuitive, flexible layout mechanism that leverages the natural source order of your content. With an easy-to-use Sass mixin set, the Zen Grids system can be applied to an infinite number of layouts, including adaptive and fixed-width layouts.
 email: virtually.johnalbin@gmail.com
 executables: []
 
@@ -47,14 +45,32 @@ files:
 - lib/zen-grids.rb
 - stylesheets/_zen.scss
 - stylesheets/zen/_background-grid.scss
-- stylesheets/zen/_columns.scss
 - stylesheets/zen/_grids.scss
 - templates/project/example.html
 - templates/project/manifest.rb
 - templates/project/common.scss
 - templates/project/layout.scss
 - templates/project/styles.scss
+- templates/unit-tests/manifest.rb
+- templates/unit-tests/README.txt
+- templates/unit-tests/sass/function-zen-direction-flip.scss
+- templates/unit-tests/sass/function-zen-half-gutter.scss
+- templates/unit-tests/sass/zen-clear.scss
+- templates/unit-tests/sass/zen-grid-container.scss
+- templates/unit-tests/sass/zen-grid-flow-item.scss
+- templates/unit-tests/sass/zen-grid-item-base.scss
+- templates/unit-tests/sass/zen-grid-item.scss
+- templates/unit-tests/sass/zen-nested-container.scss
+- templates/unit-tests/test-results/function-zen-direction-flip.css
+- templates/unit-tests/test-results/function-zen-half-gutter.css
+- templates/unit-tests/test-results/zen-clear.css
+- templates/unit-tests/test-results/zen-grid-container.css
+- templates/unit-tests/test-results/zen-grid-flow-item.css
+- templates/unit-tests/test-results/zen-grid-item-base.css
+- templates/unit-tests/test-results/zen-grid-item.css
+- templates/unit-tests/test-results/zen-nested-container.css
 - zen-grids.gemspec
+has_rdoc: true
 homepage: http://zengrids.com
 licenses: []
 
@@ -64,20 +80,16 @@ rdoc_options: []
 require_paths: 
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement 
-  none: false
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
-      hash: 3
       segments: 
       - 0
       version: "0"
 required_rubygems_version: !ruby/object:Gem::Requirement 
-  none: false
   requirements: 
   - - ">"
     - !ruby/object:Gem::Version 
-      hash: 25
       segments: 
       - 1
       - 3
@@ -85,8 +97,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: 1.3.1
 requirements: []
 
-rubyforge_project: 1.0.rc.1
-rubygems_version: 1.8.15
+rubyforge_project: 1.0.rc.2
+rubygems_version: 1.3.6
 signing_key: 
 specification_version: 3
 summary: A Compass plugin for Zen Grids, a fluid responsive grid system

data/stylesheets/zen/_columns.scss

@@ -1,253 +0,0 @@
-//
-// Mixins for Zen Columns layout method.
-//
-
-$zen-columns-box-sizing: content-box !default;
-$legacy-support-for-ie6: true !default;
-
-
-//
-// This mixin should be applied to a container so that the children items become
-// columns arranged with the Zen Columns layout method.
-//
-// The mixin has the following required parameters:
-// - $selectors: A list of selectors for all the columns inside the container.
-//   In this list, order the columns as you would like them to appear from
-//   left-to-right (or right-to-left when the $leading-direction is "right".)
-//   Note that the HTML for the columns can be in any order in the HTML source.
-// - $widths: A list of widths. Each one corresponds to a column specified in
-//   $selectors. e.g. The first width is for the first column. The second width
-//   is for the second column. etc.
-//
-// The mixin has the following optional parameters:
-// - $box-sizing: The type of CSS3 box model each column should use. Can be set
-//   to content-box or border-box. Defaults to content-box, but border-box is
-//   way cooler. IE 6 and 7 don't support border-box.
-// - $leading-direction: The direction the columns should float. Can be set to
-//   "left" or "right". An extremely advanced option allows you to specify a
-//   a list of directions, one direction for each column.
-// - $leading-gutters: A list of leading gutters; one per column. The leading
-//   gutter specifies the distance between the current column and the column
-//   floated just before it.
-// - $padding: A list of padding measurements; one per column. In order to
-//   specify a complex padding value like "0 4px 2px", you can use nested lists,
-//   e.g. $padding: ((0 4px 2px), (3px 0), (10px 5px 5px 10px))
-//   In order to use the same padding measurements for all columns, you can
-//   simply list one measurement total instead of one per column,
-//   e.g. $padding: ((5px 10px))
-//
-// In addition to standard columns, the mixin supports one horizontal navbar
-// that will appear (with a fixed height) above all the other columns. The
-// parameters for this optional navbar are:
-// - $navbar-selector: The selector for the navbar. It should be a child item of
-//   the container just as a normal column is.
-// - $navbar-height: The fixed height of the navbar. Required if the
-//   $navbar-selector is used.
-// - $navbar-width: The width of the navbar. Defaults to 100% of the container
-//   width.
-// - $navbar-leading-gutter: An optional leading space between the navbar and
-//   and the container's inner edge. If specified, the $navbar-width must also
-//   be specified so that the width plus leading gutter plus padding isn't
-//   greater than 100% of the container's width.
-// - $navbar-padding: An optional padding for the navbar. If specified, the
-//   $navbar-width must also be specified so that the width plus leading gutter
-//   plus padding isn't greater than 100% of the container's width.
-//
-@mixin zen-columns (
-  // Information about the columns.
-  $box-sizing: $zen-columns-box-sizing,
-  $selectors: ('.sidebar1', '.content', '.sidebar2'),
-  $widths: (),
-  $leading-direction: (),
-  $leading-gutters: (),
-  $padding: (),
-
-  // Information about the navbar.
-  $navbar-selector: false,
-  $navbar-height: 0,
-  $navbar-width: 100%,
-  $navbar-leading-gutter: 0,
-  $navbar-padding: 0
-) {
-
-  // Allow some parameters to be simple strings instead of lists.
-  @if type_of($widths) != list {
-    $widths: ($widths);
-  }
-  @if type_of($leading-direction) != list {
-    $leading-direction: ($leading-direction);
-  }
-  @if type_of($leading-gutters) != list {
-    $leading-gutters: ($leading-gutters);
-  }
-  @if type_of($padding) != list {
-    $padding: ($padding);
-  }
-  @if type_of($navbar-padding) != list {
-    $navbar-padding: ($navbar-padding);
-  }
-
-  // Declare all our variables so they can be used in any child block scope.
-  $col: 0;
-  $float: left;
-  @if length($leading-direction) > 0 {
-    $float: nth($leading-direction, 1);
-  }
-  $gutter: 0;
-  $left-fill: 0;
-  $left-reset: 0;
-  $right-fill: 0;
-  $right-reset: 0;
-  $margin: 0;
-  $padding-values: 0;
-  $padding-x: 0;
-  $navbar-padding-x: 0;
-  $navbar-padding-y: 0;
-  $navbar-reset: 0;
-  $navbar-true-height: 0;
-  $container-children: $selectors;
-
-  @if $navbar-selector {
-    // Determine the padding height and width of the navbar.
-    $navbar-padding-x: 2 * nth($navbar-padding, 1);
-    $navbar-padding-y: 2 * nth($navbar-padding, 1);
-    @if length($navbar-padding) == 4 {
-      $navbar-padding-x: nth($navbar-padding, 2) + nth($navbar-padding, 4);
-    }
-    @else if length($navbar-padding) >= 2 {
-      $navbar-padding-x: 2 * nth($navbar-padding, 2);
-    }
-    @if length($navbar-padding) >= 3 {
-      $navbar-padding-y: nth($navbar-padding, 1) + nth($navbar-padding, 3);
-    }
-    // We only keep track of the padding for content-box layouts.
-    @if $box-sizing == border-box {
-      $navbar-padding-x: 0;
-    }
-    // Determine the distance of the navbar's right edge from the container's left edge.
-    $navbar-reset: -$navbar-leading-gutter - $navbar-width - $navbar-padding-x;
-    // The columns need to know the true height of the navbar box.
-    $navbar-true-height: $navbar-height + $navbar-padding-y;
-    // Add the navbar to the list of the selectors of the container's children.
-    $container-children: append($container-children, $navbar-selector);
-  }
-
-  // #{} interpolation doesn't work when converting lists into selectors, so
-  // convert the list into an unquoted string before using it.
-  $string: false;
-  @each $child in $container-children {
-    @if $string == false {
-      $string: unquote($child);
-    }
-    @else {
-      $string: unquote($string + ', ' + $child);
-    }
-  }
-  $container-children: $string;
-
-  // Iterate over each column.
-  @each $column in $selectors {
-    // Number the columns.
-    $col: $col + 1;
-    // Find the width, floating direction and gutter of the current column.
-    $width: nth($widths, $col);
-    @if $col <= length($leading-direction) {
-      $float: nth($leading-direction, $col);
-    }
-    @if $col <= length($leading-gutters) {
-      $gutter: nth($leading-gutters, $col);
-    }
-    // Calculate the left/right padding as it affects the true width of the column.
-    @if $col <= length($padding) {
-      $padding-values: nth($padding, $col);
-      @if type_of($padding-values) != list {
-        $padding-values: ($padding-values);
-      }
-      $padding-x: 2 * nth($padding-values, 1);
-      @if length($padding-values) == 4 {
-        $padding-x: nth($padding-values, 2) + nth($padding-values, 4);
-      }
-      @else if length($padding-values) > 1 {
-        $padding-x: 2 * nth($padding-values, 2);
-      }
-    }
-    // We only keep track of the padding for content-box layouts.
-    @if $box-sizing == border-box {
-      $padding-x: 0;
-    }
-    // If the column is floating from the left, determine the distance from the
-    // container's left edge to the column's left edge ($left-fill) and to the
-    // column's right edge ($left-reset).
-    @if $float == left {
-      $left-fill: $left-fill + $gutter;
-      $left-reset: -$left-fill - $padding-x - $width;
-      $margin: $navbar-true-height $left-reset 0 $left-fill;
-      // The next column needs to know how much the previous columns have filled.
-      $left-fill: $left-fill + $width + $padding-x;
-    }
-    // If the column is floating from the right, determine the distance from the
-    // container's right edge to the column's right edge ($right-fill) and to
-    // the column's left edge ($right-reset).
-    @else {
-      $right-fill: $right-fill + $gutter;
-      $right-reset: -$right-fill - $padding-x - $width;
-      $margin: $navbar-true-height $right-fill 0 $right-reset;
-      // The next column needs to know how much the previous columns have filled.
-      $right-fill: $right-fill + $width + $padding-x;
-    }
-
-    // Apply rules to the columns.
-    #{$column} {
-      float: $float;
-      width: $width;
-      margin: $margin;
-      padding: $padding-values;
-    }
-  }
-
-  // Apply rules to the container.
-  position: relative;
-
-  // Apply rules to the navbar.
-  @if $navbar-selector {
-    #{$navbar-selector} {
-      float: $float;
-      height: $navbar-height;
-      margin: 0 $navbar-reset 0 $navbar-leading-gutter;
-      width: $navbar-width;
-      padding: $navbar-padding;
-    }
-  }
-
-  // Apply rules to navbar and columns.
-  #{$container-children} {
-    // Specify the border-box properties.
-    @if $box-sizing == border-box {
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      -ms-box-sizing: border-box;
-      box-sizing: border-box;
-    }
-    // Prevent borders since they'll break the layout with content-box.
-    @if $box-sizing == content-box {
-      border: 0 !important;
-    }
-    // Prevent overflowing content from breaking the layout.
-    overflow: visible;
-    word-wrap: break-word; // A very nice CSS3 property.
-
-    @if $legacy-support-for-ie6 and $box-sizing == content-box {
-      .ie6 & {
-        display: inline; // display inline or double your floated margin! [1]
-        overflow: hidden; // in IE6, overflow auto is broken [2] and so is overflow visible [3]
-        overflow-y: visible;
-      }
-    }
-  }
-}
-
-// REFERENCES
-//
-// 1. http://www.positioniseverything.net/explorer/doubled-margin.html
-// 2. http://browservulsel.blogspot.com/2005/04/ie-overflow-auto-scrollbar-overlap.html
-// 3. http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B