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

data/README.txt

@@ -18,16 +18,16 @@ to a 12 column grid.
 
   @import "zen-grids";
 
-  $zen-gutter-width: 40px;  // Set the gutter size. A half-gutter is used on
-                            // each side of each column.
+  $zen-gutters: 40px;  // Set the gutter size. A half-gutter is used on
+                       // each side of each column.
 
   .container {
     @include zen-grid-container();  // Define the container for your grid items.
   }
 
-  $zen-column-count: 12;  // Set the number of grid columns to use in this media
-                          // query. You'll likely want a different grid for
-                          // different screen sizes.
+  $zen-columns: 12;  // Set the number of grid columns to use in this media
+                     // query. You'll likely want a different grid for
+                     // different screen sizes.
 
   @media all and (min-width: 50em) {
     .sidebar1 {

data/bower.json

@@ -0,0 +1,25 @@
+{
+  "name"        : "zen-grids",
+  "location"    : "JohnAlbin/zen-grids",
+  "description" : "Zen Grids is an intuitive, flexible grid system to create responsive, adaptive, fluid and fixed-width layouts.",
+  "keywords"    : "Sass, Compass, grids, rwd",
+
+  "main"        : [
+    "_zen-grids.scss",
+    "zen-grids/_background.scss",
+    "zen-grids/_flow.scss",
+    "zen-grids/_grids.scss"
+  ],
+  "ignore"      : [
+    "lib",
+    "templates",
+    "zen-grids.gemspec"
+  ],
+
+  "licenses"    : {
+    "type": "GPLv2",
+    "url": "http://www.gnu.org/licenses/gpl-2.0.html"
+  }
+  "authors"     : ["John Albin Wilkins"],
+  "homepage"    : "http://zengrids.com/"
+}

data/templates/project/_init.scss

@@ -5,13 +5,13 @@
 //
 
 // Legacy browser variables for Compass.
-$legacy-support-for-ie6     : false;
-$legacy-support-for-ie7     : false;
+$legacy-support-for-ie6           : false;
+$legacy-support-for-ie7           : false;
 
 // Set up Zen Grids.
-$zen-column-count           : 1;
-$zen-gutter-width           : 20px;
-$zen-auto-include-item-base : false;
+$zen-columns                      : 1;
+$zen-gutters                      : 20px;
+$zen-auto-include-grid-item-base  : false;
 
 //
 // Import our modules.

data/templates/project/_layout.scss

@@ -32,7 +32,7 @@
 
 /* Horizontal navigation bar */
 @media all and (min-width: 444px) {
-  $zen-column-count: 1;
+  $zen-columns: 1;
   $navbar-height: 5em;
 
   .main {
@@ -46,7 +46,7 @@
 }
 
 @media all and (min-width: 444px) and (max-width: 665px) {
-  $zen-column-count: 2;
+  $zen-columns: 2;
 
   .centered {
     @include zen-grid-background();
@@ -55,7 +55,7 @@
     @include zen-grid-item(2, 1);
   }
   .grid-item__aside1 {
-    @include zen-clear(); // Clear left-floated elements (.grid-item__content)
+    @include zen-new-row(); // Clear left-floated elements (.grid-item__content)
     @include zen-grid-item(1, 1);
   }
   .grid-item__aside2 {
@@ -64,7 +64,7 @@
 }
 
 @media all and (min-width: 666px) and (max-width: 776px) {
-  $zen-column-count: 3;
+  $zen-columns: 3;
 
   .centered {
     @include zen-grid-background();
@@ -76,13 +76,13 @@
     @include zen-grid-item(1, 1, right); // Position from the right
   }
   .grid-item__aside2 {
-    @include zen-clear(); // Clear left-floated elements (.grid-item__content)
+    @include zen-new-row(); // Clear left-floated elements (.grid-item__content)
     @include zen-grid-item(2, 1);
   }
 }
 
 @media all and (min-width: 777px) and (max-width: 998px) {
-  $zen-column-count: 3;
+  $zen-columns: 3;
 
   .centered {
     @include zen-grid-background();
@@ -94,13 +94,13 @@
     @include zen-grid-item(1, 1, right); // Position from the right
   }
   .grid-item__aside2 {
-    @include zen-clear(right); // Clear right-floated elements (.grid-item__aside1)
+    @include zen-new-row(right); // Clear right-floated elements (.grid-item__aside1)
     @include zen-grid-item(1, 1, right);
   }
 }
 
 @media all and (min-width: 999px) {
-  $zen-column-count: 5;
+  $zen-columns: 5;
 
   .centered {
     @include zen-grid-background();

data/templates/unit-tests/manifest.rb

@@ -1,23 +1,24 @@
 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-grid-item-width.scss', :media => 'all', :to => 'function-zen-grid-item-width.scss'
-stylesheet 'sass/function-zen-half-gutter.scss',     :media => 'all', :to => 'function-zen-half-gutter.scss'
-stylesheet 'sass/function-zen-unit-width.scss',      :media => 'all', :to => 'function-zen-unit-width.scss'
-stylesheet 'sass/zen-clear.scss',                    :media => 'all', :to => 'zen-clear.scss'
-stylesheet 'sass/zen-float.scss',                    :media => 'all', :to => 'zen-float.scss'
-stylesheet 'sass/zen-grid-background.scss',          :media => 'all', :to => 'zen-grid-background.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/function-zen-direction-switch.scss', :media => 'all', :to => 'function-zen-direction-switch.scss'
+stylesheet 'sass/function-zen-grid-item-width.scss',  :media => 'all', :to => 'function-zen-grid-item-width.scss'
+stylesheet 'sass/function-zen-half-gutter.scss',      :media => 'all', :to => 'function-zen-half-gutter.scss'
+stylesheet 'sass/function-zen-unit-width.scss',       :media => 'all', :to => 'function-zen-unit-width.scss'
+stylesheet 'sass/zen-new-row.scss',                   :media => 'all', :to => 'zen-new-row.scss'
+stylesheet 'sass/zen-float.scss',                     :media => 'all', :to => 'zen-float.scss'
+stylesheet 'sass/zen-grid-background.scss',           :media => 'all', :to => 'zen-grid-background.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'
 
-file 'test-results/function-zen-direction-flip.css'
+file 'test-results/function-zen-direction-switch.css'
 file 'test-results/function-zen-grid-item-width.css'
 file 'test-results/function-zen-half-gutter.css'
 file 'test-results/function-zen-unit-width.css'
-file 'test-results/zen-clear.css'
+file 'test-results/zen-new-row.css'
 file 'test-results/zen-float.css'
+file 'test-results/zen-grid-background.css'
 file 'test-results/zen-grid-container.css'
 file 'test-results/zen-grid-flow-item.css'
 file 'test-results/zen-grid-item-base.css'

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

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

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

@@ -6,13 +6,13 @@
 @import "zen-grids";
 
 #test-zen-grid-item-width {
-  /* Test zen-grid-item-width(1) with default $zen-column-count: 1 */
+  /* Test zen-grid-item-width(1) with default $zen-columns: 1 */
   width: zen-grid-item-width(1);
 
-  /* Test zen-grid-item-width(2) with $zen-column-count: 5 */
-  $zen-column-count: 5;
+  /* Test zen-grid-item-width(2) with $zen-columns: 5 */
+  $zen-columns: 5;
   width: zen-grid-item-width(2);
-  $zen-column-count: 1;
+  $zen-columns: 1;
 
   /* Test zen-grid-item-width(2, 5) */
   width: zen-grid-item-width(2, 5);
@@ -33,6 +33,12 @@
   /* Test zen-grid-item-width(2, 5, $grid-width: 1000px, $box-sizing: content-box) */
   width: zen-grid-item-width(2, 5, $grid-width: 1000px, $box-sizing: content-box);
 
-  /* Test zen-grid-item-width(2, 5, $gutter-width: 10px, $grid-width: 1000px, $box-sizing: content-box) */
-  width: zen-grid-item-width(2, 5, $gutter-width: 10px, $grid-width: 1000px, $box-sizing: content-box);
+  /* Test zen-grid-item-width(2, 5, $gutters: 10px, $grid-width: 1000px, $box-sizing: content-box) */
+  width: zen-grid-item-width(2, 5, $gutters: 10px, $grid-width: 1000px, $box-sizing: content-box);
+
+  /* Test zen-grid-item-width(3, 5, $gutters: 10%, $gutter-method: margin) */
+  width: zen-grid-item-width(3, 5, $gutters: 10%, $gutter-method: margin);
+
+  /* Test zen-grid-item-width(3.5, 5, $gutters: 10%, $gutter-method: margin) */
+  width: zen-grid-item-width(3.5, 5, $gutters: 10%, $gutter-method: margin);
 }

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

@@ -6,11 +6,11 @@
 @import "zen-grids";
 
 #test-zen-half-gutter {
-  /* Test zen-half-gutter() with default $zen-gutter-width: 20px */
+  /* Test zen-half-gutter() with default $zen-gutters: 20px */
   padding-left: zen-half-gutter();
 
-  /* Test zen-half-gutter() with $zen-gutter-width: 30px */
-  $zen-gutter-width: 30px;
+  /* Test zen-half-gutter() with $zen-gutters: 30px */
+  $zen-gutters: 30px;
   padding-left: zen-half-gutter();
 
   /* Test zen-half-gutter(10em) */
@@ -28,10 +28,10 @@
   /* 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;
+  /* Test zen-half-gutter(11px) with $zen-direction: right */
+  $zen-direction: right;
   padding-left: zen-half-gutter(11px);
 
-  /* Test zen-half-gutter(11px, left) with $zen-float-direction: right */
+  /* Test zen-half-gutter(11px, left) with $zen-direction: right */
   padding-left: zen-half-gutter(11px, left);
 }

data/templates/unit-tests/sass/function-zen-unit-width.scss

@@ -6,13 +6,13 @@
 @import "zen-grids";
 
 #test-zen-unit-width {
-  /* Test zen-unit-width() with default $zen-column-count: 1 */
+  /* Test zen-unit-width() with default $zen-columns: 1 */
   width: zen-unit-width();
 
-  /* Test zen-unit-width() with $zen-column-count: 5 */
-  $zen-column-count: 5;
+  /* Test zen-unit-width() with $zen-columns: 5 */
+  $zen-columns: 5;
   width: zen-unit-width();
-  $zen-column-count: 1;
+  $zen-columns: 1;
 
   /* Test zen-unit-width(5) */
   width: zen-unit-width(5);
@@ -28,5 +28,17 @@
   $zen-grid-width: 100%;
 
   /* Test zen-unit-width(5, 100px) */
-  width: zen-unit-width(5, 100px);
+  width: zen-unit-width(5, $grid-width: 100px);
+
+  /* Test zen-unit-width() with $zen-columns: 3, $zen-gutter-method: margin, and $zen-gutters: 5% */
+  $zen-columns: 3;
+  $zen-gutter-method: margin;
+  $zen-gutters: 5%;
+  width: zen-unit-width();
+  $zen-columns: 1;
+  $zen-gutter-method: padding;
+  $zen-gutters: 20px;
+
+  /* Test zen-unit-width(3, 5px, margin, 100px) */
+  width: zen-unit-width(3, 5px, margin, 100px);
 }

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

@@ -9,18 +9,18 @@
   /* Test zen-float() */
   @include zen-float();
 
-  /* Test zen-float() with $zen-float-direction: right */
-  $zen-float-direction: right;
+  /* Test zen-float() with $zen-direction: right */
+  $zen-direction: right;
   @include zen-float();
-  $zen-float-direction: left;
+  $zen-direction: left;
 
   /* Test zen-float(left) */
   @include zen-float(left);
 
-  /* Test zen-float(left, $reverse-all-floats: TRUE) */
-  @include zen-float(left, $reverse-all-floats: TRUE);
+  /* Test zen-float(left, $switch-direction: TRUE) */
+  @include zen-float(left, $switch-direction: TRUE);
 
-  /* Test zen-float(left) with: $zen-reverse-all-floats: TRUE; */
-  $zen-reverse-all-floats: TRUE;
+  /* Test zen-float(left) with: $zen-switch-direction: TRUE; */
+  $zen-switch-direction: TRUE;
   @include zen-float(left);
 }

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

@@ -11,59 +11,70 @@
   @include zen-grid-background();
   $zen-grid-numbers: both;
 
+  /* Test zen-grid-background() with margin gutter method, 5 column grid and 5% gutter */
+  $zen-columns: 5;
+  $zen-gutters: 5%;
+  $zen-gutter-method: margin;
+  $zen-grid-numbers: top;
+  @include zen-grid-background();
+  $zen-columns: 1;
+  $zen-gutters: 20px;
+  $zen-gutter-method: padding;
+  $zen-grid-numbers: both;
+
   // Turn off numbers for all other tests.
   $zen-grid-numbers: none;
 
   /* Test zen-grid-background() with 12 column grid and 20px gutter */
-  $zen-column-count: 12;
+  $zen-columns: 12;
   @include zen-grid-background();
-  $zen-column-count: 1;
+  $zen-columns: 1;
 
   /* Test zen-grid-background(), 5 column grid, 10% gutter and black grid color */
-  $zen-column-count: 5;
-  $zen-gutter-width: 10%;
+  $zen-columns: 5;
+  $zen-gutters: 10%;
   $zen-grid-color: #000;
   @include zen-grid-background();
-  $zen-column-count: 1;
-  $zen-gutter-width: 20px;
+  $zen-columns: 1;
+  $zen-gutters: 20px;
   $zen-grid-color: rgba(#ffdede, 0.8);
 
   /* Test zen-grid-background() with 5 column grid and 40px gutter */
-  $zen-column-count: 5;
-  $zen-gutter-width: 40px;
+  $zen-columns: 5;
+  $zen-gutters: 40px;
   @include zen-grid-background();
-  $zen-column-count: 1;
-  $zen-gutter-width: 20px;
+  $zen-columns: 1;
+  $zen-gutters: 20px;
 
-  /* Test zen-grid-background(), 5 column grid and 10% gutter and $zen-reverse-all-floats */
-  $zen-column-count: 5;
-  $zen-gutter-width: 10%;
-  $zen-reverse-all-floats: true;
+  /* Test zen-grid-background(), 5 column grid and 10% gutter and $zen-switch-direction */
+  $zen-columns: 5;
+  $zen-gutters: 10%;
+  $zen-switch-direction: true;
   @include zen-grid-background();
-  $zen-column-count: 1;
-  $zen-gutter-width: 20px;
-  $zen-reverse-all-floats: false;
+  $zen-columns: 1;
+  $zen-gutters: 20px;
+  $zen-switch-direction: false;
 
-  /* Test zen-grid-background() 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;
+  /* Test zen-grid-background() with 5 column grid and 40px gutter and $zen-switch-direction */
+  $zen-columns: 5;
+  $zen-gutters: 40px;
+  $zen-switch-direction: true;
   @include zen-grid-background();
-  $zen-column-count: 1;
-  $zen-gutter-width: 20px;
-  $zen-reverse-all-floats: false;
+  $zen-columns: 1;
+  $zen-gutters: 20px;
+  $zen-switch-direction: false;
 
   /* Test zen-grid-background() with $zen-grid-width: 1000px, 5 column grid and 40px gutter */
   $zen-grid-width: 1000px;
-  $zen-column-count: 5;
-  $zen-gutter-width: 40px;
+  $zen-columns: 5;
+  $zen-gutters: 40px;
   @include zen-grid-background();
   $zen-grid-width: 100%;
-  $zen-column-count: 1;
-  $zen-gutter-width: 20px;
+  $zen-columns: 1;
+  $zen-gutters: 20px;
 
   /* Test zen-grid-background() with all 24 grid numbers */
-  $zen-column-count: 24;
+  $zen-columns: 24;
   @include zen-grid-background();
-  $zen-column-count: 1;
+  $zen-columns: 1;
 }

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

@@ -27,11 +27,18 @@
 }
 
 #test-zen-grid-container-4 {
-  /* Test zen-grid-container() with $context = 'grid-item' */
-  @include zen-grid-container('grid-item');
+  /* Test zen-grid-container() with $context: grid-item */
+  @include zen-grid-container(grid-item);
 }
 
 #test-zen-grid-container-5 {
-  /* Test zen-grid-container() with $context = 'flow' */
-  @include zen-grid-container('flow');
+  /* Test zen-grid-container() with $context: flow */
+  @include zen-grid-container(flow);
+}
+
+#test-zen-grid-container-6 {
+  /* Test zen-grid-container() with $zen-gutter-method: margin */
+  $zen-gutter-method: margin;
+  @include zen-grid-container();
+  $zen-gutter-method: padding;
 }