zen-grids 2.0.0.beta.4 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 640e160d3d90ce3d3a930b5740266c31d022cbd0
-  data.tar.gz: cf59ab172bb8f008b606da496e1f02e6d31a0093
+  metadata.gz: 8bda392f20e20968fade42052a73cedbc99eaaea
+  data.tar.gz: bf6d195eb10faf1b3577e57ebc1c120b9d58af07
 SHA512:
-  metadata.gz: 45d2429e4d3cda23119af1b68449a56d0ed2e0184b75e70380945fbd49a6502e7ed5b21389aee9bfe69b9c7b63c34526762d98427d3679a16b30af70934e6346
-  data.tar.gz: 874e8c1b4eb80ed77f8ea8cfb9a001b0d38eb1f512ea05a88ca24a8319cb8a4049ea4c15adeae811804331d5c5224a59aeb17a9073c9c50d981f3d855db7a04a
+  metadata.gz: 5c2b044056fddca6254df441e6f83ce6c1d0432efb882109bbdcd5eb58ddc347d6d016e757e078b6db68651b53d6f6c30f35d9a5daff214891fb7d75b24ba920
+  data.tar.gz: d51d6512a419e1eba488c899d124c9cb216901a17f77ac7a932d30d97281848afecfef3e3e4be8bd166437dc1141a6cc5f1735413e5d37349f42c6921aeb4e6a

data/README.md

@@ -2,8 +2,7 @@
 
 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.
 
-More information can be found at http://next.zengrids.com
-
+More information can be found at http://zengrids.com
 
 ## USAGE
 
@@ -38,26 +37,15 @@ Here's a simple example: a content column with a sidebar on each side, aligned t
 
 Within the `.container` element, the `.sidebar1`, `.sidebar2` and `.content` elements can be in any order.
 
-Zen Grids has built-in support for the Box-sizing Polyfill which adds `box-sizing: border-box` support to IE7 and earlier.
-
-* Download the polyfill at https://github.com/Schepp/box-sizing-polyfill
-* Place the `boxsizing.htc` file in your website.
-* Set Zen Grids' `$box-sizing-polyfill-path` variable to the absolute path to the boxsizing.htc file on your website. For example: `$box-sizing-polyfill-path: "/scripts/polyfills/boxsizing.htc";`
-
-
 ## INSTALLATION
 
-Zen grids is distributed as a Ruby Gem. On your computer, simply run:
-
-```sh
-gem install zen-grids
-```
+Install using one of the following methods:
 
-If you are using Compass (and you should!) then you can add it to an existing project by editing the project's configuration file, config.rb, and adding this line:
-
-```ruby
-require 'zen-grids'
-```
+* Install with [npm](http://npmjs.org/): `npm install --save zen-grids`
+* Install with [Bower](http://bower.io/): `bower install --save zen-grids`
+* Install with [Ruby Gem](https://rubygems.org/gems/zen-grids): `gem install zen-grids`<br>
+  and, if using Compass, add `require "zen-grids"` to your config.rb file.
+* Install with [Bundler](http://bundler.io/) and Ruby Gem: `bundle inject zen-grids '~> 2.0'`
 
 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!
 
@@ -65,14 +53,9 @@ You can then start using Zen Grids in your Sass files. Just add this line to one
 @import "zen-grids";
 ```
 
-
 ## REQUIREMENTS
 
-* Sass 3.3.0 or later
-
-For the zen-grids/background module only:
-* Compass 1.0.0 or later
-
+Now works with **libSass** or Ruby Sass!
 
 ## LICENSE
 

data/bower.json

@@ -0,0 +1,27 @@
+{
+  "name": "zen-grids",
+  "description": "Zen Grids is an intuitive, flexible grid system to create responsive, adaptive, fluid and fixed-width layouts.",
+  "main": [
+    "sass/_zen-grids.scss"
+  ],
+  "authors": [
+    "John Albin Wilkins <virtually.johnalbin@gmail.com> (http://john.albin.net/)"
+  ],
+  "license": "GPL-2.0",
+  "keywords": [
+    "sass",
+    "layout",
+    "grid",
+    "rwd",
+    "responsive-web-design"
+  ],
+  "homepage": "http://zengrids.com",
+  "ignore": [
+    "**/.*",
+    "lib",
+    "node_modules",
+    "sache.json",
+    "test",
+    "zen-grids.gemspec"
+  ]
+}

data/lib/zen-grids.rb

@@ -1,10 +1,17 @@
-require 'compass'
-
 project_path     = File.join(File.dirname(__FILE__), '..')
 stylesheets_path = File.join(project_path, 'sass')
 
-Compass::Frameworks.register(
-  'zen-grids',
-  :path => project_path,
-  :stylesheets_directory => stylesheets_path
-)
+if (defined? Compass)
+  Compass::Frameworks.register(
+    'zen-grids',
+    :path => project_path,
+    :stylesheets_directory => stylesheets_path
+  )
+else
+  # Compass not defined, register the Sass path via an environment variable.
+  if ENV.has_key?('SASS_PATH')
+    ENV['SASS_PATH'] = ENV['SASS_PATH'] + File::PATH_SEPARATOR + stylesheets_path
+  else
+    ENV['SASS_PATH'] = stylesheets_path
+  end
+end

data/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "zen-grids",
+  "version": "2.0.0",
+  "description": "Zen Grids is an intuitive, flexible grid system to create responsive, adaptive, fluid and fixed-width layouts.",
+  "homepage": "https://github.com/JohnAlbin/zen-grids",
+  "bugs": {
+    "url": "https://github.com/JohnAlbin/zen-grids/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/JohnAlbin/zen-grids.git"
+  },
+  "author": "John Albin Wilkins <virtually.johnalbin@gmail.com> (http://john.albin.net/)",
+  "keywords": [
+    "sass",
+    "layout",
+    "grid",
+    "rwd",
+    "responsive-web-design"
+  ],
+  "main": "sass/_zen-grids.scss",
+  "style": "sass/_zen-grids.scss",
+  "eyeglass": {
+    "exports": "eyeglass-exports.js"
+  },
+  "directories": {
+    "lib": "sass",
+    "test": "test"
+  },
+  "scripts": {
+    "test": "mocha",
+    "posttest": "eslint test"
+  },
+  "license": "GPL-2.0",
+  "devDependencies": {
+    "chai": "^3.4.1",
+    "eslint": "^1.9.0",
+    "eyeglass": "^0.6.3",
+    "kss": "^2.1.0",
+    "mocha": "^2.3.4",
+    "node-sass-import-once": "^1.2.0",
+    "sassy-test": "^2.0.0",
+    "support-for": "^1.0.0"
+  }
+}

data/sass/zen-grids/_background.scss

@@ -1,19 +1,45 @@
+// Background module
 //
-// "Background grid image" module for the Zen Grids system.
+// During site development, it’s often useful to have a background image that shows the columns of the grid. The "Background grid image" module for the Zen Grids system provides a mixin to set this background image.
 //
+// Note: This module is not automatically loaded with `@import "zen-grids";`. Before using it, you must first import the module with:
+// ```
+// @import "zen-grids/background";
+// ```
+//
+// Style guide: background
 
-
-@import "./functions";
+@import "./grids";
 // Add the default set of background images.
 @import "./internal/variables-background";
-// Unlike the rest of Zen Grids, this module requires Compass.
-@import "compass/css3/images";
 
 
+// zen-grid-background()
+//
+// Adds a background grid image to an element’s background.
+//
+// Common usage:
+// ```
+// @include zen-grid-background();
+// ```
 //
-// Add a background grid image to an element's background.
-// @see http://next.zengrids.com/reference/background/#zen-grid-background
+// Since the mixins of Zen Grids use the `$column-position` for placement of grid items, the background grid image produced by this mixin numbers all of the columns. The `$grid-numbers` parameter specifies how to place the column numbers in the background grid image. By default, column numbers are displayed across the top of the background grid image and then displayed in reverse order along the bottom of the background grid image. `$grid-numbers` can be set to: `both` (the default), `top` (don’t display the bottom numbers), `bottom` (don’t display the top numbers), or `none` (don’t display any column numbers.)
 //
+// Note: when the `$direction` is set to `right` (for RTL languages), the column numbers are displayed right-to-left along the top and left-to-right along the bottom.
+//
+// The easiest way to align this background grid image to the actual grid is to apply this mixin to the same element that `zen-grid-container()` is applied to.
+//
+// $columns          - Defaults to `$zen-columns`
+// $gutters          - Defaults to `$zen-gutters`
+// $gutter-method    - Defaults to `$zen-gutter-method`
+// $grid-width       - Defaults to `$zen-grid-width`
+// $grid-color       - Defaults to `$zen-grid-color`
+// $grid-numbers     - Defaults to `$zen-grid-numbers`
+// $direction        - Defaults to `$zen-direction`
+// $switch-direction - Defaults to `$zen-switch-direction`
+// $rtl-selector     - Defaults to `$zen-rtl-selector`
+//
+// Style guide: background.zen-grid-background
 @mixin zen-grid-background(
   $columns              : $zen-columns,
   $gutters              : $zen-gutters,
@@ -22,7 +48,8 @@
   $grid-color           : $zen-grid-color,
   $grid-numbers         : $zen-grid-numbers,
   $direction            : $zen-direction,
-  $switch-direction     : $zen-switch-direction
+  $switch-direction     : $zen-switch-direction,
+  $rtl-selector         : $zen-rtl-selector
 ) {
 
   // Check if the global variable is turning off background images.
@@ -128,14 +155,28 @@
 
     // Last, add the gradient (or gradient halves) to the background images list.
     @if $gutter-method == margin or comparable($gutters, $grid-width) {
-      $bg-images  : append($bg-images, linear-gradient(left, $gradient) left top no-repeat, comma);
+      $bg-images  : append($bg-images, linear-gradient(to right, $gradient) left top no-repeat, comma);
     }
     @else {
-      $bg-images  : append($bg-images, linear-gradient(left, $left-half-gradient) zen-half-gutter($gutters) top no-repeat, comma);
-      $bg-images  : append($bg-images, linear-gradient(left, $right-half-gradient) (-(zen-half-gutter($gutters))) top no-repeat, comma);
+      $bg-images  : append($bg-images, linear-gradient(to right, $left-half-gradient) zen-half-gutter($gutters) top no-repeat, comma);
+      $bg-images  : append($bg-images, linear-gradient(to right, $right-half-gradient) (-(zen-half-gutter($gutters))) top no-repeat, comma);
     }
 
     // Apply the full list of background images.
-    @include background($bg-images);
+    background: $bg-images;
+
+    @include zen-rtl($rtl-selector) {
+      @include zen-grid-background(
+        $columns              : $zen-columns,
+        $gutters              : $zen-gutters,
+        $gutter-method        : $zen-gutter-method,
+        $grid-width           : $zen-grid-width,
+        $grid-color           : $zen-grid-color,
+        $grid-numbers         : $zen-grid-numbers,
+        $direction            : zen-direction-switch($zen-direction),
+        $switch-direction     : $zen-switch-direction,
+        $rtl-selector         : false
+      );
+    }
   }
 }

data/sass/zen-grids/_flow.scss

@@ -1,15 +1,68 @@
+// Flow module
 //
-// "Flow" module for the Zen Grids system.
+// In your grid system, some HTML elements are grid containers and some HTML elements are grid items. Most of your content will be inside a grid item. According to CSS terminology, the unpositioned HTML elements inside a grid item are in the “normal flow” of a document.
 //
-
+// The "Flow" module for the Zen Grids system allows an item in the normal flow of a document to be aligned to the grid, e.g. an image can be aligned to the grid.
+//
+// Style guide: flow
 
 @import "./grids";
 
 
+// zen-flow-item-width()
+//
+// Common usage:
+// ```
+// @include zen-flow-item-width(
+//   [column-span],
+//   $parent-column-span: [integer]
+// );
+// ```
+// or:
+// ```
+// @include zen-flow-item-width(
+//   [column-span],
+//   $parent-column-span: [integer],
+//   $alpha-gutter: [boolean],
+//   $omega-gutter: [boolean]
+// );
+// ```
+// or for fixed length (em, px, etc.) layouts:
+// ```
+// @include zen-flow-item-width(
+//   [column-span]
+// );
+// ```
+// or:
+// ```
+// @include zen-flow-item-width(
+//   [column-span],
+//   $alpha-gutter: [boolean],
+//   $omega-gutter: [boolean]
+// );
+// ```
+//
+// Apply this to an HTML item that is in the normal flow of a document to help align it to the grid. Set the `$column-span` to the number of columns that the HTML element should span. For responsive layouts with a percentage-based grid width, set the `$parent-column-span` to the number of columns that the parent element spans; fixed-unit layouts using px, em, etc. do not need to specify this.
 //
-// Apply this to an HTML item that is in the normal flow of a document to help
-// align it to the grid. @see http://next.zengrids.com/reference/flow/#zen-float
+// Unlike the `zen-grid-item()` mixin, this mixin does not float the HTML item; see the related `zen-float()` mixin. This mixin also does not have a half-gutter on each side. By default, it has no gutter in the "alpha position" (the left side) and a full gutter in the "omega position" (the right side.) You can turn on or off the alpha and omega gutters by setting the `$alpha-gutter` and `$omega-gutter` parameters to `true` or `false`.
 //
+// Note: when the `$direction` is set to `right` (for RTL languages), the alpha position is on the right and the omega position is on the left.
+//
+// $column-span         - Required. The number of columns the flow item will span.
+// $parent-column-span  - Required for %-based layouts, but not for fixed-width layouts. The number of columns the parent grid item spans.
+// $alpha-gutter        - Whether the flow item should have a gutter on its left (or, for RTL layouts, on its right.) Defaults to `false`.
+// $omega-gutter        - Whether the flow item should have a gutter on its right (or, for RTL layouts, on its left.) Defaults to `true`.
+// $direction           - Defaults to `$zen-direction`
+// $columns             - Defaults to `$zen-columns`
+// $gutters             - Defaults to `$zen-gutters`
+// $gutter-method       - Defaults to `$zen-gutter-method`
+// $grid-width          - Defaults to `$zen-grid-width`
+// $box-sizing          - Defaults to `$zen-box-sizing`
+// $switch-direction    - Defaults to `$zen-switch-direction`
+// $rtl-selector        - Defaults to `$zen-rtl-selector`
+// $include-base        - Defaults to `$zen-auto-include-flow-item-base`
+//
+// Style guide: flow.zen-flow-item-width
 @mixin zen-flow-item-width(
   $column-span,
   $parent-column-span   : false,
@@ -22,6 +75,7 @@
   $grid-width           : $zen-grid-width,
   $box-sizing           : $zen-box-sizing,
   $switch-direction     : $zen-switch-direction,
+  $rtl-selector         : $zen-rtl-selector,
   $include-base         : $zen-auto-include-flow-item-base
 ) {
 
@@ -39,8 +93,7 @@
     @else {
       // If we don't know the number of columns the parent element spans, then
       // warn the user and force the flow item to span 100% of the parent.
-      @warn "For responsive layouts with a percentage-based grid width, you must set the $parent-column-span to the number of columns that the parent element spans.";
-      $column-span: $columns;
+      @error "For responsive layouts with a percentage-based grid width, you must set the $parent-column-span to the number of columns that the parent element spans.";
     }
     // We want our inner grid to span the entire width of the parent.
     $grid-width: 100%;
@@ -63,7 +116,7 @@
 
   // Include the flow item base mixin.
   @if $include-base {
-    @include zen-flow-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
+    @include zen-flow-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction, $rtl-selector);
   }
 
   // Calculate the item's width.
@@ -80,6 +133,18 @@
     @if $omega-gutter {
       margin-#{$rev}: $gutters;
     }
+    @if not ($omega-gutter and $omega-gutter) {
+      @include zen-rtl($rtl-selector) {
+        @if $alpha-gutter {
+          margin-#{$dir}: 0;
+          margin-#{$rev}: $gutters;
+        }
+        @else if $omega-gutter {
+          margin-#{$rev}: 0;
+          margin-#{$dir}: $gutters;
+        }
+      }
+    }
   }
   @else if unit($grid-width) == "%" {
     // Our percentage $width is off since the parent has $main-gutters padding.
@@ -98,6 +163,19 @@
     @else {
       margin-#{$rev}: -($adjusted-gutter);
     }
+    @include zen-rtl($rtl-selector) {
+      padding-#{$rev}: 0;
+      @if $alpha-gutter {
+        margin-#{$rev}: $gutters;
+      }
+      padding-#{$dir}: $adjusted-gutter;
+      @if $omega-gutter {
+        margin-#{$dir}: $gutters - $adjusted-gutter;
+      }
+      @else {
+        margin-#{$dir}: -($adjusted-gutter);
+      }
+    }
   }
   @else {
     @if $alpha-gutter and $omega-gutter {
@@ -106,6 +184,15 @@
           #{$dir}: zen-half-gutter($gutters, left, $dir);
           #{$rev}: zen-half-gutter($gutters, right, $dir);
         }
+        // If $gutters is an odd number of pixels, we need special RTL handling.
+        @if zen-half-gutter($gutters, left, $dir) != zen-half-gutter($gutters, right, $dir) {
+          @include zen-rtl($rtl-selector) {
+            margin: {
+              left: zen-half-gutter($gutters, right, $dir);
+              right: zen-half-gutter($gutters, left, $dir);
+            }
+          }
+        }
       }
     }
     @else if not $alpha-gutter and not $omega-gutter {
@@ -119,41 +206,74 @@
     @else if $omega-gutter {
       padding-#{$dir}: 0;
       padding-#{$rev}: $gutters;
+      @include zen-rtl($rtl-selector) {
+        padding-#{$rev}: 0;
+        padding-#{$dir}: $gutters;
+      }
     }
     @else {
       padding-#{$dir}: $gutters;
       padding-#{$rev}: 0;
+      @include zen-rtl($rtl-selector) {
+        padding-#{$rev}: $gutters;
+        padding-#{$dir}: 0;
+      }
     }
   }
 }
 
+// zen-flow-item-base()
+//
+// Common usage:
+// ```
+// @include zen-flow-item-base();
+// ```
 //
-// Applies a standard set of properites to all flow items.
-// @see http://next.zengrids.com/reference/grids/#zen-grid-item-base
+// Applies a standard set of properties to all flow items.
 //
+// $gutters          - Defaults to `$zen-gutters`
+// $gutter-method    - Defaults to `$zen-gutter-method`
+// $box-sizing       - Defaults to `$zen-box-sizing`
+// $direction        - Defaults to `$zen-direction`
+// $switch-direction - Defaults to `$zen-switch-direction`
+// $rtl-selector     - Defaults to `$zen-rtl-selector`
+//
+// Style guide: flow.zen-flow-item-base
 @mixin zen-flow-item-base(
   $gutters                  : $zen-gutters,
   $gutter-method            : $zen-gutter-method,
   $box-sizing               : $zen-box-sizing,
   $direction                : $zen-direction,
-  $switch-direction         : $zen-switch-direction
+  $switch-direction         : $zen-switch-direction,
+  $rtl-selector             : $zen-rtl-selector
 ) {
 
-  // Since we have to set padding in zen-flow-item-width(), supress extraneous
+  // Since we have to set padding in zen-flow-item-width(), suppress extraneous
   // padding declarations in the base by setting $gutter-method to none.
   @if $gutter-method == padding {
     $gutter-method: none;
   }
-  @include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction);
+  @include zen-grid-item-base($gutters, $gutter-method, $box-sizing, $direction, $switch-direction, $rtl-selector);
 }
 
+// zen-float()
 //
 // Apply this to flow items that need to be floated.
-// @see http://next.zengrids.com/reference/flow/#zen-float
 //
+// Common usage:
+// ```
+// @include zen-float();
+// ```
+//
+// $direction        - Defaults to `$zen-direction`
+// $switch-direction - Defaults to `$zen-switch-direction`
+// $rtl-selector     - Defaults to `$zen-rtl-selector`
+//
+// Style guide: flow.zen-float
 @mixin zen-float(
   $direction          : $zen-direction,
-  $switch-direction   : $zen-switch-direction
+  $switch-direction   : $zen-switch-direction,
+  $rtl-selector       : $zen-rtl-selector
 ) {
   // Determine the float direction.
   $dir: $direction;
@@ -161,5 +281,8 @@
     $dir: zen-direction-switch($dir);
   }
   float: $dir;
-}
 
+  @include zen-rtl($rtl-selector) {
+    float: zen-direction-switch($dir);
+  }
+}