zen-grids 2.0.0.beta.4 → 2.0.0

data/sass/zen-grids/_functions.scss

@@ -1,14 +1,35 @@
+// Helper functions module
 //
-// Helper functions for the Zen Grids system.
+// Helper functions for the Zen Grids mixins.
 //
+// Style guide: functions
 
 
 @import "./variables";
 
 
+// zen-half-gutter()
 //
-// Returns a half gutter width. @see http://next.zengrids.com/reference/functions/#zen-half-gutter
+// Returns a half gutter width.
 //
+// If the gutter width is in pixels and is an odd number, then `$gutter-side: left` will return half of the gutter rounded down to a whole pixel; `$gutter-side: right` will return half of the gutter rounded up to a whole pixel. The `$gutter-side` defaults to [`$zen-direction`](#zen-direction).
+//
+// Common usage:
+// ```
+// .ex {
+//   property: zen-half-gutter();
+//   // or:
+//   property: zen-half-gutter($gutter-side: [left or right]);
+// }
+// ```
+//
+// $gutters - Defaults to `$zen-gutters`
+// $gutter-side - Defaults to `$zen-direction`
+// $direction - Defaults to `$zen-direction`
+//
+// weight: -1
+//
+// Style guide: functions.zen-half-gutter
 @function zen-half-gutter(
   $gutters          : $zen-gutters,
   $gutter-side      : $zen-direction,
@@ -27,9 +48,11 @@
   @return $half-gutter;
 }
 
+// zen-compare-units()
 //
-// Warns if the gutter and grid width units are not comparable.
+// Internal function. Warns if the gutter and grid width units are not comparable. It does not throw an `@error` because the line following the call to `zen-compare-units()` will cause a Sass math error with the a line number that is more useful than if it were to fail here.
 //
+// No style guide
 @function zen-compare-units(
   $feature,
   $gutters        : $zen-gutters,
@@ -44,9 +67,25 @@
   @return true;
 }
 
+// zen-unit-width()
+//
+// Returns the unit width of a single column in the grid.
 //
-// Calculates the unit width of a column. @see http://next.zengrids.com/reference/functions/#zen-unit-width
+// Common usage:
+// ```
+// .ex {
+//   property: zen-unit-width();
+// }
+// ```
 //
+// $columns - Defaults to `$zen-columns`
+// $gutters - Defaults to `$zen-gutters`
+// $gutter-method - Defaults to `$zen-gutter-method`
+// $grid-width - Defaults to `$zen-grid-width`
+//
+// weight: -1
+//
+// Style guide: functions.zen-unit-width
 @function zen-unit-width(
   $columns        : $zen-columns,
   $gutters        : $zen-gutters,
@@ -73,10 +112,25 @@
   @return $unit-width;
 }
 
+// zen-grid-item-width()
+//
+// Common usage:
+// ```
+// .ex {
+//   property: zen-grid-item-width([number]);
+// }
+// ```
 //
 // Calculates the width of a grid item that spans the specified number of columns.
-// @see http://next.zengrids.com/reference/functions/#zen-grid-item-width
 //
+// $column-span - Required. The number of columns to calculate the width of.
+// $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`
+//
+// Style guide: functions.zen-grid-item-width
 @function zen-grid-item-width(
   $column-span,
   $columns        : $zen-columns,
@@ -99,10 +153,22 @@
   @return $width;
 }
 
+// zen-direction-switch()
+//
+// Common usage:
+// ```
+// .ex {
+//   property: zen-direction-switch([left or right]);
+// }
+// ```
+//
+// weight: 1
 //
 // Returns the opposite direction, given "left" or "right".
-// @see http://next.zengrids.com/reference/functions/#zen-direction-switch
 //
+// $dir - Required. The direction you want to switch.
+//
+// Style guide: functions.zen-direction-switch
 @function zen-direction-switch(
   $dir
 ) {
@@ -117,3 +183,17 @@
   }
   @return $dir;
 }
+
+// zen-support-for-ie()
+//
+// Internal function. If you've installed support-for, this function will tell you if IE 6 or IE 7 should be supported. If support-for is not installed, this function always returns false.
+//
+// No style guide
+@function zen-support-for-ie($min-version) {
+  @if function-exists('support-for') {
+    @return support-for(ie, $min-version);
+  }
+  @else {
+    @return false;
+  }
+}

data/sass/zen-grids/_grids.scss

@@ -7,8 +7,31 @@
 @import "./variables";
 // Import the helper functions.
 @import "./functions";
-@import "./internal/functions-compass-polyfill";
 
+// zen-rtl()
+//
+// Includes inline Right-To-Left language support if the `$zen-rtl-selector` variable is set to `[dir="rtl"]` or some other useful CSS selector.
+//
+// Since `$zen-rtl-selector` defaults to `false`, inline Right-To-Left language support is off by default.
+//
+// $selector - Defaults to $zen-rtl-selector.
+//
+// Style guide: grids.zen-rtl
+
+@mixin zen-rtl($selector: $zen-rtl-selector) {
+  @if $selector {
+    @if & {
+      #{$selector} & {
+        @content;
+      }
+    }
+    @else {
+      #{$selector} {
+        @content;
+      }
+    }
+  }
+}
 
 //
 // Apply this to create a grid container element.
@@ -19,7 +42,8 @@
   $gutters            : $zen-gutters,
   $gutter-method      : $zen-gutter-method,
   $direction          : $zen-direction,
-  $switch-direction   : $zen-switch-direction
+  $switch-direction   : $zen-switch-direction,
+  $rtl-selector       : $zen-rtl-selector
 ) {
 
   $dir: $direction;
@@ -37,20 +61,21 @@
   }
 
   // @TODO: This is a pre-IE8 line of code; don't remember why its needed.
-  @if zen-support-for(ie, "7") {
+  @if zen-support-for-ie(7) {
     *position: relative;
   }
 
-  // We use the "micro clearfix", instead of Compass' clearfix or pie-clearfix.
-  &:before,
-  &:after {
+  // We use the "micro clearfix", optimized to reduce the number of &.
+  &:before {
     content: "";
     display: table;
   }
   &:after {
+    content: "";
+    display: table;
     clear: both;
   }
-  @if zen-support-for(ie, "7") {
+  @if zen-support-for-ie(7) {
     *zoom: 1;
   }
 
@@ -60,6 +85,16 @@
       left: -(zen-half-gutter($gutters, left, $dir));
       right: -(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));
+        }
+      }
+    }
   }
 
   // Prevent any padding from messing up the alignment of the nested grid.
@@ -85,6 +120,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-grid-item-base
 ) {
 
@@ -113,18 +149,29 @@
     #{$dir}: $margin;
     #{$rev}: -100%;
   }
-  @if zen-support-for(ie, "7") {
-    *margin-#{$rev}: -99.9%;
+  @if zen-support-for-ie(7) {
+    // @TODO: This interpolation fails on libsass 3.3.0: *margin-#{$rev}: -99.9%;
+    #{'*margin-' + $rev}: -99.9%;
+  }
+  @include zen-rtl($rtl-selector) {
+    margin: {
+      #{$rev}: $margin;
+      #{$dir}: -100%;
+    }
+    @if zen-support-for-ie(7) {
+      // @TODO: This interpolation fails on libsass 3.3.0: *margin-#{$rev}: -99.9%;
+      #{'*margin-' + $dir}: -99.9%;
+    }
   }
 
   // Include the grid item base mixin.
   @if $include-base {
-    @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);
   }
   // If the $gutters parameter has been used, set the gutters even if
   // $include-base is false.
   @else if $gutters != $zen-gutters and $gutter-method == padding {
-    @include zen-apply-gutter-padding($gutters, $direction, $switch-direction);
+    @include zen-apply-gutter-padding($gutters, $direction, $switch-direction, $rtl-selector);
   }
 }
 
@@ -137,19 +184,19 @@
   $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
 ) {
 
   // Specify the padding if the gutter method uses padding.
   @if $gutter-method == padding {
-    @include zen-apply-gutter-padding($gutters, $direction, $switch-direction);
+    @include zen-apply-gutter-padding($gutters, $direction, $switch-direction, $rtl-selector);
   }
 
   // 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 left/right borders since they'll break the layout with content-box.
@@ -166,14 +213,14 @@
     }
   }
 
-  @if zen-support-for(ie, "7") {
+  @if zen-support-for-ie(7) {
     @if $box-sizing == border-box and $box-sizing-polyfill-path == "" {
-      @warn "Setting $box-sizing to #{$box-sizing} will fail for legacy IE browsers because the $box-sizing-polyfill-path is empty.";
+      @warn 'Setting $box-sizing to border-box will fail for IE 7 and earlier because the $box-sizing-polyfill-path is empty.';
     }
     @if $box-sizing-polyfill-path != "" {
       *behavior: url($box-sizing-polyfill-path);
     }
-    @if zen-support-for(ie, "6") {
+    @if zen-support-for-ie(6) {
       // Display inline or double your floated margin!
       // @see http://www.positioniseverything.net/explorer/doubled-margin.html
       _display: inline;
@@ -194,13 +241,20 @@
 //
 @mixin zen-new-row(
   $clear              : $zen-direction,
-  $switch-direction   : $zen-switch-direction
+  $switch-direction   : $zen-switch-direction,
+  $rtl-selector       : $zen-rtl-selector
 ) {
   // Determine the clearing direction.
   @if $switch-direction {
     $clear: zen-direction-switch($clear);
   }
   clear: $clear;
+
+  @if $clear == left or $clear == right {
+    @include zen-rtl($rtl-selector) {
+      clear: zen-direction-switch($clear);
+    }
+  }
 }
 
 //
@@ -210,7 +264,8 @@
 @mixin zen-apply-gutter-padding(
   $gutters            : $zen-gutters,
   $direction          : $zen-direction,
-  $switch-direction   : $zen-switch-direction
+  $switch-direction   : $zen-switch-direction,
+  $rtl-selector       : $zen-rtl-selector
 ) {
 
   $dir: $direction;
@@ -222,4 +277,14 @@
     left: zen-half-gutter($gutters, left, $dir);
     right: 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) {
+      padding: {
+        left: zen-half-gutter($gutters, right, $dir);
+        right: zen-half-gutter($gutters, left, $dir);
+      }
+    }
+  }
 }

data/sass/zen-grids/_layout.scss

@@ -29,18 +29,19 @@
 // Should be used to add a wrapping block where its parameters will override the
 // corresponding global `$zen-` variables within it.
 //
-// $layout - Specify the name of the layout from $zen-columns to use.
-// $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
-// $direction - Defaults to $zen-direction
-// $switch-direction - Defaults to $zen-switch-direction
-// $auto-include-grid-item-base - Defaults to $zen-auto-include-grid-item-base
-// $auto-include-flow-item-base - Defaults to $zen-auto-include-flow-item-base
-// $grid-color - Defaults to $zen-grid-color
-// $grid-numbers - Defaults to $zen-grid-numbers
+// $layout                      - Optionally specify the name of the layout from `$zen-layouts` to use.
+// $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`
+// $direction                   - Defaults to `$zen-direction`
+// $switch-direction            - Defaults to `$zen-switch-direction`
+// $rtl-selector                - Defaults to `$zen-rtl-selector`
+// $auto-include-grid-item-base - Defaults to `$zen-auto-include-grid-item-base`
+// $auto-include-flow-item-base - Defaults to `$zen-auto-include-flow-item-base`
+// $grid-color                  - Defaults to `$zen-grid-color`
+// $grid-numbers                - Defaults to `$zen-grid-numbers`
 //
 // Style guide: layout.zen-layout
 @mixin zen-layout(
@@ -52,6 +53,7 @@
   $box-sizing                   : null,
   $direction                    : null,
   $switch-direction             : null,
+  $rtl-selector                 : null,
   $auto-include-grid-item-base  : null,
   $auto-include-flow-item-base  : null,
   $grid-color                   : null,
@@ -67,6 +69,7 @@
     'box-sizing'                    : $zen-box-sizing,
     'direction'                     : $zen-direction,
     'switch-direction'              : $zen-switch-direction,
+    'rtl-selector'                  : $zen-rtl-selector,
     'auto-include-grid-item-base'   : $zen-auto-include-grid-item-base,
     'auto-include-flow-item-base'   : $zen-auto-include-flow-item-base,
     'grid-color'                    : $zen-grid-color,
@@ -101,6 +104,9 @@
   @if type-of($switch-direction) == 'null' {
     $switch-direction: map-get($local-defaults, 'switch-direction');
   }
+  @if type-of($rtl-selector) == 'null' {
+    $rtl-selector: map-get($local-defaults, 'rtl-selector');
+  }
   @if type-of($auto-include-grid-item-base) == 'null' {
     $auto-include-grid-item-base: map-get($local-defaults, 'auto-include-grid-item-base');
   }
@@ -122,6 +128,7 @@
   $zen-box-sizing                   : $box-sizing !global;
   $zen-direction                    : $direction !global;
   $zen-switch-direction             : $switch-direction !global;
+  $zen-rtl-selector                 : $rtl-selector !global;
   $zen-auto-include-grid-item-base  : $auto-include-grid-item-base !global;
   $zen-auto-include-flow-item-base  : $auto-include-flow-item-base !global;
   $zen-grid-color                   : $grid-color !global;
@@ -138,6 +145,7 @@
   $zen-box-sizing                   : map-get($global-vars, 'box-sizing') !global;
   $zen-direction                    : map-get($global-vars, 'direction') !global;
   $zen-switch-direction             : map-get($global-vars, 'switch-direction') !global;
+  $zen-rtl-selector                 : map-get($global-vars, 'rtl-selector') !global;
   $zen-auto-include-grid-item-base  : map-get($global-vars, 'auto-include-grid-item-base') !global;
   $zen-auto-include-flow-item-base  : map-get($global-vars, 'auto-include-flow-item-base') !global;
   $zen-grid-color                   : map-get($global-vars, 'grid-color') !global;
@@ -164,20 +172,21 @@
 // }
 // ```
 //
-// $query - This parameter is passed on to the breakpoint() mixin.
-// $no-query - This parameter is passed on to the breakpoint() mixin.
-// $layout - Specify the name of the layout from $zen-columns to use.
-// $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
-// $direction - Defaults to $zen-direction
-// $switch-direction - Defaults to $zen-switch-direction
-// $auto-include-grid-item-base - Defaults to $zen-auto-include-grid-item-base
-// $auto-include-flow-item-base - Defaults to $zen-auto-include-flow-item-base
-// $grid-color - Defaults to $zen-grid-color
-// $grid-numbers - Defaults to $zen-grid-numbers
+// $query                       - Required. This parameter is passed on to the `breakpoint()` mixin.
+// $no-query                    - This parameter is passed on to the `breakpoint()` mixin. Defaults to `false'.
+// $layout                      - Optionally specify the name of the layout from `$zen-layouts` to use.
+// $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`
+// $direction                   - Defaults to `$zen-direction`
+// $switch-direction            - Defaults to `$zen-switch-direction`
+// $rtl-selector                - Defaults to `$zen-rtl-selector`
+// $auto-include-grid-item-base - Defaults to `$zen-auto-include-grid-item-base`
+// $auto-include-flow-item-base - Defaults to `$zen-auto-include-flow-item-base`
+// $grid-color                  - Defaults to `$zen-grid-color`
+// $grid-numbers                - Defaults to `$zen-grid-numbers`
 //
 // Style guide: layout.zen-breakpoint
 @mixin zen-breakpoint(
@@ -191,6 +200,7 @@
   $box-sizing                   : null,
   $direction                    : null,
   $switch-direction             : null,
+  $rtl-selector                 : null,
   $auto-include-grid-item-base  : null,
   $auto-include-flow-item-base  : null,
   $grid-color                   : null,
@@ -210,6 +220,7 @@
     $box-sizing,
     $direction,
     $switch-direction,
+    $rtl-selector,
     $auto-include-grid-item-base,
     $auto-include-flow-item-base,
     $grid-color,
@@ -237,6 +248,7 @@
   $box-sizing                   : null,
   $direction                    : null,
   $switch-direction             : null,
+  $rtl-selector                 : null,
   $auto-include-grid-item-base  : null,
   $auto-include-flow-item-base  : null,
   $grid-color                   : null,
@@ -256,6 +268,7 @@
     $box-sizing,
     $direction,
     $switch-direction,
+    $rtl-selector,
     $auto-include-grid-item-base,
     $auto-include-flow-item-base,
     $grid-color,
@@ -298,20 +311,21 @@
 // }
 // ```
 //
-// $layout - Specify the name of the layout from $zen-columns to use.
-// $context - This parameter is passed on to the respond-to() mixin.
-// $no-query - This parameter is passed on to the respond-to() mixin.
-// $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
-// $direction - Defaults to $zen-direction
-// $switch-direction - Defaults to $zen-switch-direction
-// $auto-include-grid-item-base - Defaults to $zen-auto-include-grid-item-base
-// $auto-include-flow-item-base - Defaults to $zen-auto-include-flow-item-base
-// $grid-color - Defaults to $zen-grid-color
-// $grid-numbers - Defaults to $zen-grid-numbers
+// $context                     - This parameter is passed on to the respond-to() mixin.
+// $no-query                    - This parameter is passed on to the respond-to() mixin. Defaults to `false`.
+// $layout                      - Optionally specify the name of the layout from `$zen-layouts` to use.
+// $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`
+// $direction                   - Defaults to `$zen-direction`
+// $switch-direction            - Defaults to `$zen-switch-direction`
+// $rtl-selector                - Defaults to `$zen-rtl-selector`
+// $auto-include-grid-item-base - Defaults to `$zen-auto-include-grid-item-base`
+// $auto-include-flow-item-base - Defaults to `$zen-auto-include-flow-item-base`
+// $grid-color                  - Defaults to `$zen-grid-color`
+// $grid-numbers                - Defaults to `$zen-grid-numbers`
 //
 // Style guide: layout.zen-layout
 @mixin zen-respond-to(
@@ -325,6 +339,7 @@
   $box-sizing                   : null,
   $direction                    : null,
   $switch-direction             : null,
+  $rtl-selector                 : null,
   $auto-include-grid-item-base  : null,
   $auto-include-flow-item-base  : null,
   $grid-color                   : null,
@@ -349,6 +364,7 @@
     $box-sizing,
     $direction,
     $switch-direction,
+    $rtl-selector,
     $auto-include-grid-item-base,
     $auto-include-flow-item-base,
     $grid-color,