zen-grids 1.5 → 2.0.0.alpha.1

data/README.txt

@@ -16,13 +16,13 @@ USAGE
 Here's a simple example: a content column with a sidebar on each side, aligned
 to a 12 column grid.
 
-  @import "zen";
+  @import "zen-grids";
 
   $zen-gutter-width: 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.
+    @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
@@ -31,13 +31,13 @@ to a 12 column grid.
 
   @media all and (min-width: 50em) {
     .sidebar1 {
-      @include zen-grid-item(3, 1);   // Span 3 columns starting in 1st column.
+      @include zen-grid-item(3, 1);  // Span 3 columns starting in 1st column
     }
     .content {
-      @include zen-grid-item(6, 4);   // Span 6 columns starting in 4th column.
+      @include zen-grid-item(6, 4);  // Span 6 columns starting in 4th column
     }
     .sidebar2 {
-      @include zen-grid-item(3, 10);  // Span 3 columns starting in 10th column.
+      @include zen-grid-item(3, 10); // Span 3 columns starting in 10th column
     }
   }
 
@@ -70,16 +70,14 @@ line:
 You can then start using Zen Grids in your Sass files. Just add this line to one
 of your .sass or .scss files and start creating!
 
-  @import "zen";
+  @import "zen-grids";
 
 
 REQUIREMENTS
 ------------
 
-- Sass 3.2 or later
-
-For the zen/background module only:
-- Compass 0.12 or later
+- Sass 3.1 or later
+- Compass 0.11 or later
 
 
 LICENSE

data/_zen-grids.scss

@@ -0,0 +1,3 @@
+// Import the partials for Zen Grids.
+
+@import "zen-grids/grids";

data/component.json

@@ -0,0 +1,26 @@
+{
+  "name": "zen-grids",
+  "version": "2.0.0-alpha.1",
+  "author": ["John Albin Wilkins"],
+  "homepage": "http://zengrids.com/",
+  "styles": [
+    "_zen-grids.scss",
+    "zen-grids/_background.scss",
+    "zen-grids/_flow.scss",
+    "zen-grids/_grids.scss"
+  ],
+  "main": [
+    "_zen-grids.scss",
+    "zen-grids/_background.scss",
+    "zen-grids/_flow.scss",
+    "zen-grids/_grids.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JohnAlbin/compass-zen-grids.git"
+  },
+  "licenses": {
+    "type": "GPLv2",
+    "url": "http://www.gnu.org/licenses/gpl-2.0.html"
+  }
+}

data/lib/zen-grids.rb

@@ -1,3 +1,12 @@
 require 'compass'
-extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
-Compass::Frameworks.register('zen-grids', :path => extension_path)
+
+project_path     = File.join(File.dirname(__FILE__), '..')
+stylesheets_path = File.join(project_path)
+templates_path   = File.join(project_path, 'templates')
+
+Compass::Frameworks.register(
+  'zen-grids',
+  :path => project_path,
+  :stylesheets_directory => stylesheets_path,
+  :templates_directory => templates_path
+)

data/templates/project/_init.scss

@@ -16,6 +16,7 @@ $zen-auto-include-item-base : false;
 //
 // Import our modules.
 //
-@import "zen";
-@import "zen/background";
+@import "zen-grids";
+@import "zen-grids/background";
+@import "zen-grids/flow";
 @import "visually-hidden";

data/templates/unit-tests/manifest.rb

@@ -6,7 +6,6 @@ stylesheet 'sass/function-zen-half-gutter.scss',     :media => 'all', :to => 'fu
 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'
@@ -19,7 +18,6 @@ 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-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-flip.scss

@@ -3,7 +3,7 @@
  * Test zen-direction-flip()
  */
 
-@import "zen";
+@import "zen-grids";
 
 #test-zen-direction-flip {
   /* Test zen-direction-flip(left) */

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

@@ -3,7 +3,7 @@
  * Test zen-grid-item-width()
  */
 
-@import "zen";
+@import "zen-grids";
 
 #test-zen-grid-item-width {
   /* Test zen-grid-item-width(1) with default $zen-column-count: 1 */

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

@@ -3,7 +3,7 @@
  * Test zen-half-gutter()
  */
 
-@import "zen";
+@import "zen-grids";
 
 #test-zen-half-gutter {
   /* Test zen-half-gutter() with default $zen-gutter-width: 20px */

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

@@ -3,7 +3,7 @@
  * Test zen-unit-width()
  */
 
-@import "zen";
+@import "zen-grids";
 
 #test-zen-unit-width {
   /* Test zen-unit-width() with default $zen-column-count: 1 */

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

@@ -3,7 +3,7 @@
  * Test zen-clear()
  */
 
-@import "zen";
+@import "zen-grids";
 
 #test-zen-clear {
   /* Test zen-clear() */

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

@@ -3,7 +3,7 @@
  * Test zen-float()
  */
 
-@import "zen";
+@import "zen-grids/flow";
 
 #test-zen-float {
   /* Test zen-float() */

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

@@ -3,7 +3,7 @@
  * Test zen-grid-background()
  */
 
-@import "zen/background";
+@import "zen-grids/background";
 
 #test-zen-grid-background {
   /* Test zen-grid-background() with 1 column grid and 20px gutter */

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

@@ -3,7 +3,7 @@
  * Test zen-grid-container()
  */
 
-@import "zen";
+@import "zen-grids";
 
 #test-zen-grid-container {
   /* Test zen-grid-container() */

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

@@ -3,7 +3,7 @@
  * Test zen-grid-flow-item()
  */
 
-@import "zen";
+@import "zen-grids/flow";
 
 #test-zen-grid-flow-item {
   /* Test zen-grid-flow-item(1) without setting $column-count */

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

@@ -3,7 +3,7 @@
  * Test zen-grid-item-base()
  */
 
-@import "zen";
+@import "zen-grids";
 
 #test-zen-grid-item-base {
   /* Test zen-grid-item-base() */

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

@@ -3,7 +3,7 @@
  * Test zen-grid-item()
  */
 
-@import "zen";
+@import "zen-grids";
 
 #test-zen-grid-item {
   /* Test zen-grid-item(6, 4) with 12 column grid and 20px gutter */

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

@@ -3,7 +3,7 @@
  * Test zen-nested-container()
  */
 
-@import "zen";
+@import "zen-grids";
 
 #test-zen-nested-container {
   /* Test zen-nested-container() */

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

@@ -7,7 +7,7 @@
   float: left;
   width: 50%;
   margin-left: 25%;
-  margin-right: -75%;
+  margin-right: -100%;
   padding-left: 10px;
   padding-right: 10px;
   -moz-box-sizing: border-box;
@@ -50,10 +50,10 @@
   float: left;
   width: 60%;
   margin-left: 30%;
-  margin-right: -90%;
+  margin-right: -100%;
   /* 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;
+  margin-right: -100%;
 }

data/zen-grids.gemspec

@@ -7,24 +7,25 @@ Gem::Specification.new do |s|
   s.description = %q{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. With an easy-to-use Sass mixin set, the Zen Grids system can be applied to an infinite number of layouts, including responsive, adaptive, fluid and fixed-width layouts.}
 
   s.homepage    = 'http://zengrids.com'
-  s.license     = 'GPL-2'
   s.rubyforge_project =
 
-  s.version     = '1.5'
-  s.date        = '2015-09-04'
+  s.version     = '2.0.0.alpha.1'
+  s.date        = '2013-02-19'
 
   s.authors     = ['John Albin Wilkins']
   s.email       = 'virtually.johnalbin@gmail.com'
 
-  s.add_runtime_dependency('sass', '>= 3.1', '< 3.4')
+  s.add_runtime_dependency('sass', ">= 3.1")
 
   s.files       = %w[
+    component.json
     LICENSE.txt
     README.txt
     lib/zen-grids.rb
-    stylesheets/_zen.scss
-    stylesheets/zen/_background.scss
-    stylesheets/zen/_grids.scss
+    _zen-grids.scss
+    zen-grids/_background.scss
+    zen-grids/_flow.scss
+    zen-grids/_grids.scss
     templates/project/_init.scss
     templates/project/_layout.scss
     templates/project/_modules.scss

data/{stylesheets/zen → zen-grids}/_background.scss

@@ -78,7 +78,6 @@ $zen-grid-number-images   : ()                  !default;
   $grid-width           : $zen-grid-width,
   $grid-color           : $zen-grid-color,
   $grid-numbers         : $zen-grid-numbers,
-  $float-direction      : $zen-float-direction,
   $reverse-all-floats   : $zen-reverse-all-floats
 ) {
 
@@ -98,7 +97,7 @@ $zen-grid-number-images   : ()                  !default;
   $half-unit-width      : zen-unit-width(2 * $column-count, $grid-width);
 
   // Determine the float direction.
-  $dir                  : $float-direction;
+  $dir                  : left;
   @if $reverse-all-floats {
     $dir                : zen-direction-flip($dir);
   }

data/zen-grids/_flow.scss

@@ -0,0 +1,121 @@
+@import "grids";
+
+//
+// Mixins for the Zen Grids system.
+//
+
+// @see http://zengrids.com/help/#zen-auto-include-item-base
+$zen-auto-include-flow-item-base  : true        !default;
+
+
+//
+// Apply this to an HTML item that is in the normal flow of a document to help
+// align it to the grid. @see http://zengrids.com/help/#zen-float
+//
+@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 $parent-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);
+
+  // Auto-apply the unit base mixin.
+  @if $auto-include-flow-item-base {
+    @include zen-grid-item-base($gutter-width, $box-sizing);
+  }
+
+  // Calculate the item's width.
+  $width: zen-grid-item-width($column-span, $columns, $gutter-width, $grid-width, $box-sizing);
+
+  @if unit($grid-width) == "%" {
+    // Our percentage $width is off if the parent has $gutter-width padding.
+    // Calculate an adjusted gutter to fix the width.
+    $adjusted-gutter: ($columns - $column-span) * $gutter-width / $columns;
+
+    width: $width;
+
+    // Ensure the HTML item either has a full gutter or no gutter on each side.
+    padding-#{$dir}: 0;
+    @if $alpha-gutter {
+      margin-#{$dir}: $gutter-width;
+    }
+    padding-#{$rev}: $adjusted-gutter;
+    @if $omega-gutter {
+      margin-#{$rev}: $gutter-width - $adjusted-gutter;
+    }
+    @else {
+      margin-#{$rev}: -($adjusted-gutter);
+    }
+  }
+  @else {
+    @if $alpha-gutter and $omega-gutter {
+      width: $width;
+      @if $gutter-width != 0 {
+        margin: {
+          #{$dir}: zen-half-gutter($gutter-width, left, $dir);
+          #{$rev}: zen-half-gutter($gutter-width, right, $dir);
+        }
+      }
+    }
+    @else if not $alpha-gutter and not $omega-gutter {
+      width: if($box-sizing == border-box, ($width - $gutter-width), $width);
+      @if $gutter-width != 0 {
+        padding: {
+          left: 0;
+          right: 0;
+        }
+      }
+    }
+    @else {
+      width: $width;
+      @if $omega-gutter {
+        padding-#{$dir}: 0;
+        padding-#{$rev}: $gutter-width;
+      }
+      @else {
+        padding-#{$dir}: $gutter-width;
+        padding-#{$rev}: 0;
+      }
+    }
+  }
+}
+
+//
+// Apply this to flow items that need to be floated.
+// @see http://zengrids.com/help/#zen-float
+//
+@mixin zen-float(
+  $float-direction      : $zen-float-direction,
+  $reverse-all-floats   : $zen-reverse-all-floats
+) {
+  // Determine the float direction.
+  $dir: $float-direction;
+  @if $reverse-all-floats {
+    $dir: zen-direction-flip($dir);
+  }
+  float: $dir;
+}
+