shelves 0.1.0 → 0.2.0

data/lib/shelves.rb

@@ -16,6 +16,8 @@ if defined? ::Rails
   require 'shelves/extensions/rails'
 elsif defined? ::Sprockets::Plugin
   require 'shelves/extensions/sprockets'
+elsif defined? ::Sprockets && Sprockets.respond_to?(:append_path)
+  Sprockets.append_path Shelves.stylesheets_path
 else
   require 'shelves/extensions/compass'
 end

data/lib/shelves/version.rb

@@ -1,3 +1,3 @@
 module Shelves
-  VERSION = '0.1.0'
+  VERSION = '0.2.0'
 end

data/scss/shelves/_functions.scss

@@ -3,14 +3,32 @@
 // width relative to that number of columns.
 //
 //   $context - The number of columns encapsulating the column.
-//              Defaults to the full width of the grid.
+//              Defaults to the the value of $total.
+//   $total   - The total number of columns in the grid.
+//              Defaults to the value of $shelves-columns. 
+//   $gutter  - The width of the gutter in the root context (in %).
+//              Defaults to the value of $shelves-gutter.
 //
-@function column-width($context: $shelves-columns) {
-  @if $context >= $shelves-columns {
-    @return $shelves-column-width;
+@function column-width(
+  $context: nil,
+  $total:   $shelves-columns,
+  $gutter:  $shelves-gutter
+) {
+  @if type-of($context) != 'number' or $context > $total {
+    $context: $total;
+  }
+  
+  @if $context <= 1 {
+    @return 100%;
+  }
+  @else if $context >= $total {
+    $column-gutter: column-gutter($total: $total, $gutter: $gutter);
+    @return (100% - ($total - 1) * $column-gutter) / $total;
   }
   @else {
-    @return $shelves-column-width * (100% / columns-width($context));
+    $column-width: column-width($total: $total, $gutter: $gutter);
+    $context-width: columns-width($n: $context, $total: $total, $gutter: $gutter);
+    @return $column-width * (100% / $context-width);
   }
 }
 
@@ -18,14 +36,30 @@
 // this returns the gutter width relative to that number of columns.
 //
 //   $context - The number of columns encapsulating the gutter.
-//              Defaults to the full width of the grid.
+//              Defaults to the the value of $total.
+//   $total   - The total number of columns in the grid.
+//              Defaults to the value of $shelves-columns. 
+//   $gutter  - The width of the gutter in the root context (in %).
+//              Defaults to the value of $shelves-gutter.
 //
-@function column-gutter($context: $shelves-columns) {
-  @if $context >= $shelves-columns {
-    @return $shelves-gutter;
+@function column-gutter(
+  $context: nil,
+  $total:   $shelves-columns,
+  $gutter:  $shelves-gutter
+) {
+  @if type-of($context) != 'number' or $context > $total {
+    $context: $total;
+  }
+  
+  @if $context <= 1 {
+    @return 0%;
+  }
+  @else if $context >= $total {
+    @return $gutter;
   }
   @else {
-    @return $shelves-gutter * (100% / columns-width($context));
+    $context-width: columns-width($n: $context, $total: $total);
+    @return $gutter * (100% / $context-width);
   }
 }
 
@@ -35,22 +69,34 @@
 //
 //   $n       - The number of columns to measure.
 //   $context - The number of columns encapsulating the columns.
-//              Defaults to the full width of the grid.
+//              Defaults to the the value of $total.
+//   $total   - The total number of columns in the grid.
+//              Defaults to the value of $shelves-columns. 
+//   $gutter  - The width of the gutter in the root context (in %).
+//              Defaults to the value of $shelves-gutter.
 //
-@function columns-width($n, $context: $shelves-columns) {
-  @if $n >= $shelves-columns {
-    @return 100%;
+@function columns-width(
+  $n,
+  $context: nil,
+  $total:   $shelves-columns,
+  $gutter:  $shelves-gutter
+) {
+  @if type-of($context) != 'number' or $context > $total {
+    $context: $total;
   }
   
-  $column-width: $shelves-column-width;
-  $column-gutter: $shelves-gutter;
-  
-  @if $context < $shelves-columns {
-    $column-width: column-width($context);
-    $column-gutter: column-gutter($context);
+  @if $n <= 1 {
+    @return column-width($context, $total, $gutter);
+  }
+  @else if $n >= $context {
+    @return 100%;
+  }
+  @else {
+    $column-width: column-width($context, $total, $gutter);
+    $column-gutter: column-gutter($context, $total, $gutter);
+    
+    @return $column-width * $n + $column-gutter * ($n - 1);
   }
-  
-  @return $column-width * $n + $column-gutter * ($n - 1);
 }
 
 // Returns the total distance to shift a column the given
@@ -59,10 +105,19 @@
 //
 //   $n       - The number of columns to measure.
 //   $context - The number of columns encapsulating the columns.
-//              Defaults to the full width of the grid.
+//              Defaults to the the value of $total.
+//   $total   - The total number of columns in the grid.
+//              Defaults to the value of $shelves-columns. 
+//   $gutter  - The width of the gutter in the root context (in %).
+//              Defaults to the value of $shelves-gutter.
 //
-@function columns-distance($n, $context: $shelves-columns) {
-  @return columns-width($n, $context) + column-gutter($context);
+@function columns-distance(
+  $n,
+  $context: nil,
+  $total:   $shelves-columns,
+  $gutter:  $shelves-gutter
+) {
+  @return columns-width($n, $context, $total, $gutter) + column-gutter($context, $total, $gutter);
 }
 
 // Returns a column selector with the given class name,
@@ -79,26 +134,13 @@
   @return ".#{$class-name}#{$separator}#{$index}";
 }
 
-// Returns a list consisting of a range of numbers leading up to
-// the last number.
-//
-//   range(1, 6); // 1, 2, 3, 4, 5
-//   range(1, 6, $step: 2); // 1, 3, 5
-//
-// Arguments:
+// Returns a selector that will select all columns with the given prefix.
 //
-//   $start - The start of the range.
-//   $end   - The end of the range. This is exclusive, so this
-//            number will not be in the returned range.
-//   $step  - Step by the given number to create the range.
-//            Defaults to 1.
+//   $class-name - The class name to build the selector from.
+//                 It should NOT have a preceding ".".
+//   $separator  - The separator between the class name and index.
+//                 Defaults to $shelves-separator.
 //
-@function range($start, $end, $step: 1) {
-  $list: $start;
-  $i: $start + $step;
-  @while $i < $end {
-    $list: join($list, $i);
-    $i: $i + $step;
-  }
-  @return $list;
+@function columns-selector($class-name, $separator: $shelves-separator) {
+  @return "[class*=\"#{$class-name}#{$separator}\"]";
 }

data/scss/shelves/_settings.scss

@@ -1,17 +1,25 @@
 // Default Grid Settings
-$shelves-width:          1140px !default;
+$shelves-width:          1040px !default;
 $shelves-max-width:      $shelves-width !default;
 $shelves-min-width:      767px !default;
 $shelves-columns:        12 !default;
-$shelves-mobile-columns: 4 !default;
-$shelves-margin:         20px !default;
-$shelves-gutter:         20px !default;
+$shelves-margin:         32px !default;
+$shelves-gutter:         24px !default;
 
-// Calculate the column width and gutter
+// Convert the gutter to a percentage if necessary.
 @if unit($shelves-gutter) != "%" {
   $shelves-gutter: percentage($shelves-gutter / $shelves-max-width);
 }
-$shelves-column-width: (100% - ($shelves-columns - 1) * $shelves-gutter) / $shelves-columns !default;
+
+// Default Tablet Settings
+$shelves-tablet-columns: 6 !default;
+$shelves-tablet-margin:  $shelves-margin * 0.75 !default;
+$shelves-tablet-gutter:  $shelves-gutter * 1.5 !default;
+
+// Default Mobile Settings
+$shelves-mobile-columns: 4 !default;
+$shelves-mobile-margin:  $shelves-margin * 0.5 !default;
+$shelves-mobile-gutter:  $shelves-gutter * 2.375 !default;
 
 // Default Class Names
 // (Note the lack of the preceding ".")
@@ -23,5 +31,5 @@ $shelves-suffix-name:        "suffix" !default;
 $shelves-push-name:          "push" !default;
 $shelves-pull-name:          "pull" !default;
 $shelves-separator:          "-" !default;
+$shelves-tablet-column-name: "tablet-column" !default;
 $shelves-mobile-column-name: "mobile-column" !default;
-$shelves-columns-selector:   "[class*=\"#{$shelves-column-name}#{$shelves-separator}\"]" !default;

data/scss/shelves/mixins/_base.scss

@@ -11,34 +11,44 @@
 // Includes the styles for the row element. This includes
 // a clearfix, widths, and centering.
 //
-//   $max-width    - The max width of the row element. If this is
-//                   false, the row is completely fluid. Defaults
-//                   to $shelves-max-width.
-//   $min-width    - The min width, for browsers that don't support
-//                   media queries. Defaults to $shelves-min-width.
-//   $mobile-reset - Include styles for resetting the row at
-//                   mobile sizes. Defaults to true.
+//   $max-width       - The max width of the row element. If this is
+//                      false, the row is completely fluid. Defaults
+//                      to $shelves-max-width.
+//   $min-width       - The min width, for browsers that don't support
+//                      media queries. Defaults to $shelves-min-width.
+//   $reset-if-tablet - Include styles for resetting the row at
+//                      tablet sizes. Defaults to true.
+//   $reset-if-mobile - Include styles for resetting the row at
+//                      mobile sizes. Defaults to false.
 //
-@mixin row($max-width: $shelves-max-width, $min-width: $shelves-min-width, $mobile-reset: true) {
+@mixin row(
+  $max-width:       $shelves-max-width,
+  $min-width:       $shelves-min-width,
+  $reset-if-tablet: true,
+  $reset-if-mobile: false
+) {
   @include pie-clearfix;
   width: 100%;
   
-  @if $max-width != false {
+  @if type-of($max-width) == 'number' {
     max-width: $max-width;
     margin-left: auto;
     margin-right: auto;
   }
-  
-  @if $min-width != false {
+  @if type-of($min-width) == 'number' {
     min-width: $min-width;
     
     .#{$shelves-row-name} {
       min-width: 0;
     }
   }
-  
-  @if $mobile-reset != false {
-    @media screen and (max-width: 767px) {
+  @if $reset-if-tablet {
+    @media screen and (max-width: 800px) {
+      @include reset-row;
+    }
+  }
+  @if $reset-if-mobile {
+    @media screen and (max-width: 480px) {
       @include reset-row;
     }
   }
@@ -47,37 +57,58 @@
 // Creates a column that spans the given number of
 // grid columns.
 //
-//   $n            - The number of columns the element should span.
-//   $context      - The number of columns encapsulating the element.
-//                   Defaults to the full width of the grid.
-//   $mobile-reset - Include styles for resetting the column at
-//                   mobile sizes. Defaults to true.
+//   $n               - The number of columns the element should span.
+//   $context         - The number of columns encapsulating the element.
+//                      Defaults to the the value of $total.
+//   $total           - The total number of columns in the grid.
+//                      Defaults to the value of $shelves-columns. 
+//   $gutter          - The width of the gutter in the root context (in %).
+//                      Defaults to the value of $shelves-gutter.
+//   $reset-if-tablet - Include styles for resetting the column at
+//                      tablet sizes. Defaults to true.
+//   $reset-if-mobile - Include styles for resetting the column at
+//                      mobile sizes. Defaults to false.
 //
-@mixin column($n, $context: $shelves-columns, $mobile-reset: true) {
-  @include column-base($mobile-reset);
-  @include column-gutter($context);
-  @include columns-width($n, $context);
+@mixin column(
+  $n,
+  $context:         nil,
+  $total:           $shelves-columns,
+  $gutter:          $shelves-gutter,
+  $reset-if-tablet: true,
+  $reset-if-mobile: false
+) {
+  @include column-base($reset-if-tablet, $reset-if-mobile);
+  @include column-gutter($context, $total, $gutter);
+  @include columns-width($n, $context, $total, $gutter);
 }
 
 // Sets up an element to be a column in the grid system.
 // This is used internally to generate grids, Use column($n)
 // instead to create fully functioning columns.
 //
-//   $mobile-reset - Include styles for resetting the column at
-//                   mobile sizes. Defaults to true.
+//   $reset-if-tablet - Include styles for resetting the column at
+//                      tablet sizes. Defaults to true.
+//   $reset-if-mobile - Include styles for resetting the column at
+//                      mobile sizes. Defaults to false.
 //
-@mixin column-base($mobile-reset: true) {
+@mixin column-base($reset-if-tablet: true, $reset-if-mobile: false) {
   display: block;
   float: left;
   min-height: 1px;
   position: relative;
   
   @if $legacy-support-for-ie7 {
+    // IE6-7 incorrectly rounds up percentage widths (breaking layouts)
+    // http://ejohn.org/blog/sub-pixel-problems-in-css/
     *margin-right: -1px;
   }
-  
-  @if $mobile-reset != false {
-    @media screen and (max-width: 767px) {
+  @if $reset-if-tablet {
+    @media screen and (max-width: 800px) {
+      @include reset-column;
+    }
+  }
+  @if $reset-if-mobile {
+    @media screen and (max-width: 480px) {
       @include reset-column;
     }
   }
@@ -87,23 +118,41 @@
 //
 //   $n       - The number of columns the element should span.
 //   $context - The number of columns encapsulating the element.
-//              Defaults to the full width of the grid.
+//              Defaults to the the value of $total.
+//   $total   - The total number of columns in the grid.
+//              Defaults to the value of $shelves-columns. 
+//   $gutter  - The width of the gutter in the root context (in %).
+//              Defaults to the value of $shelves-gutter.
 //
-@mixin columns-width($n, $context: $shelves-columns) {
-  width: columns-width($n, $context);
+@mixin columns-width(
+  $n,
+  $context: nil,
+  $total:   $shelves-columns,
+  $gutter:  $shelves-gutter
+) {
+  width: columns-width($n, $context, $total, $gutter);
 }
 
 // Includes the gutter for a column on the grid.
 //
-//   $context              - The number of columns encapsulating the element.
-//                           Defaults to the full width of the grid.
-//   $include-first-column - Includes the styles for removing the gutter
-//                           on the first column in a row. Defaults to true.
+//   $context     - The number of columns encapsulating the element.
+//                  Defaults to the the value of $total.
+//   $total       - The total number of columns in the grid.
+//                  Defaults to the value of $shelves-columns. 
+//   $gutter      - The width of the gutter in the root context (in %).
+//                  Defaults to the value of $shelves-gutter.
+//   $reset-first - Removes the gutter for the first column in a row.
+//                  Defaults to true.
 //
-@mixin column-gutter($context: $shelves-columns, $include-first-column: true) {
-  margin-left: column-gutter($context);
+@mixin column-gutter(
+  $context:     nil,
+  $total:       $shelves-columns,
+  $gutter:      $shelves-gutter,
+  $reset-first: true
+) {
+  margin-left: column-gutter($context, $total, $gutter);
   
-  @if $include-first-column == true {
+  @if $reset-first {
     &:first-child {
       @include reset-column-gutter;
     }

data/scss/shelves/mixins/_generators.scss

@@ -1,96 +1,178 @@
 // Generates the entire grid, made up of reusable classes for a modular OOCSS
 // approach to using the grid. All of the class names can be customized.
 //
-//   $include-nested-columns - Include nested columns in the default grid.
-//                             Defaults to true.
-//   $include-mobile-resets  - Include mobile resets (remove grid for mobile
-//                             sizes). Defaults to true.
-//   $include-mobile-columns - Include mobile columns (special column classes
-//                             for mobile sizes). Defaults to true.
-//   $include-prefix         - Include prefix classes. Deafults to true.
-//   $include-suffix         - Include suffix classes. Deafults to true.
-//   $include-push           - Include push classes. Deafults to true.
-//   $include-pull           - Include pull classes. Deafults to true.
-//   $include-nested-prefix  - Include prefix classes for neseted columns.
-//                             Defaults to true.
-//   $include-nested-suffix  - Include suffix classes  for neseted columns.
-//                             Defaults to true.
-//   $include-nested-push    - Include push classes for neseted columns.
-//                             Defaults to false.
-//   $include-nested-pull    - Include pull classes for neseted columns.
-//                             Defaults to false.
+//   $prefixes        - Include prefix classes. Deafults to true.
+//   $suffixes        - Include suffix classes. Deafults to true.
+//   $pushes          - Include push classes. Deafults to true.
+//   $pulls           - Include pull classes. Deafults to true.
+//   $nested          - Include nested columns in the default grid.
+//                      Defaults to true.
+//   $nested-prefixes - Include prefix classes for neseted columns.
+//                      Defaults to true.
+//   $nested-suffixes - Include suffix classes  for neseted columns.
+//                      Defaults to true.
+//   $nested-pushes   - Include push classes for neseted columns.
+//                      Defaults to false.
+//   $nested-pulls    - Include pull classes for neseted columns.
+//                      Defaults to false.
+//   $tablet          - Include tablet columns & resets. Defaults to true.
+//   $tablet-prefixes - Include prefix classes for tablet columns.
+//                      Defaults to false.
+//   $tablet-suffixes - Include suffix classes  for tablet columns.
+//                      Defaults to false.
+//   $tablet-pushes   - Include push classes for tablet columns.
+//                      Defaults to false.
+//   $tablet-pulls    - Include pull classes for tablet columns.
+//                      Defaults to false.
+//   $mobile          - Include mobile columns & resets. Defaults to true.
+//   $mobile-prefixes - Include prefix classes for mobile columns.
+//                      Defaults to false.
+//   $mobile-suffixes - Include suffix classes  for mobile columns.
+//                      Defaults to false.
+//   $mobile-pushes   - Include push classes for mobile columns.
+//                      Defaults to false.
+//   $mobile-pulls    - Include pull classes for mobile columns.
+//                      Defaults to false.
 //
 @mixin shelves(
-  $include-nested-columns: true,
-  $include-mobile-resets:  true,
-  $include-mobile-columns: true,
-  $include-prefix:         true,
-  $include-suffix:         true,
-  $include-push:           true,
-  $include-pull:           true,
-  $include-nested-prefix:  true,
-  $include-nested-suffix:  true,
-  $include-nested-push:    false,
-  $include-nested-pull:    false
+  $prefixes:         true,
+  $suffixes:         true,
+  $pushes:           true,
+  $pulls:            true,
+  $nested:           true,
+  $nested-prefixes:  true,
+  $nested-suffixes:  true,
+  $nested-pushes:    false,
+  $nested-pulls:     false,
+  $tablet:           true,
+  $tablet-prefixes:  false,
+  $tablet-suffixes:  false,
+  $tablet-pushes:    false,
+  $tablet-pulls:     false,
+  $mobile:           true,
+  $mobile-prefixes:  false,
+  $mobile-suffixes:  false,
+  $mobile-pushes:    false,
+  $mobile-pulls:     false
 ) {
   
-  @include shelves-base;
+  @include shelves-base($reset-if-tablet: false, $reset-if-mobile: false);
   @include shelves-columns(
-    $include-column-gutter: false,
-    $include-prefix:        $include-prefix,
-    $include-suffix:        $include-suffix,
-    $include-push:          $include-push,
-    $include-pull:          $include-pull
+    $prefixes: $prefixes,
+    $suffixes: $suffixes,
+    $pushes:   $pushes,
+    $pulls:    $pulls
   );
   
-  @if $include-nested-columns == true {
+  @if $nested {
     @for $i from 1 to $shelves-columns - 1  {
       // Loop background through the columns
       // to cascade the nested column properties.
       $i: $shelves-columns - $i;
     
       #{column-selector($shelves-column-name, $i)} {
+        #{columns-selector($shelves-column-name)} {
+          @include column-gutter($i, $reset-first: false);
+        }
+        
         @include shelves-columns(
-          $start:                 1,
-          $end:                   $i,
-          $context:               $i,
-          $include-column-gutter: true,
-          $include-prefix:        $include-nested-prefix,
-          $include-suffix:        $include-nested-suffix,
-          $include-push:          $include-nested-push,
-          $include-pull:          $include-nested-pull
+          $context:  $i,
+          $prefixes: $nested-prefixes,
+          $suffixes: $nested-suffixes,
+          $pushes:   $nested-pushes,
+          $pulls:    $nested-pulls
         );
       } 
     }
   }
   
-  @media screen and (max-width: 767px) {
-    @if $include-mobile-resets == true {
+  @if $tablet {
+    @media screen and (max-width: 800px) {
+      @if $shelves-tablet-margin != $shelves-margin {
+        .#{$shelves-container-name} {
+          @include container($shelves-tablet-margin);
+        }
+      }
+      
       @include shelves-resets;
+      
+      // Use the extra specificity from the row class
+      // to apply tablet column properties even when nested
+      .#{$shelves-row-name} {
+        #{columns-selector($shelves-tablet-column-name)} {
+          @include column-base($reset-if-tablet: false, $reset-if-mobile: false);
+          @include column-gutter($total: $shelves-tablet-columns, $gutter: $shelves-tablet-gutter);
+        }
+        
+        @include shelves-columns(
+          $column-name: $shelves-tablet-column-name,
+          $total:       $shelves-tablet-columns,
+          $gutter:      $shelves-tablet-gutter,
+          $prefixes:    $tablet-prefixes,
+          $suffixes:    $tablet-suffixes,
+          $pushes:      $tablet-pushes,
+          $pulls:       $tablet-pulls 
+        );
+      }
     }
-    @if $include-mobile-columns == true {
-      @include shelves-mobile-columns;
+  }
+  
+  @if $mobile {
+    @media screen and (max-width: 480px) {
+      @if $shelves-mobile-margin != if($tablet, $shelves-margin, $shelves-tablet-margin) {
+        .#{$shelves-container-name} {
+          @include container($shelves-mobile-margin);
+        }
+      }
+      
+      @include shelves-resets($reset-row: $tablet == false);
+    
+      // Use the extra specificity from the row class
+      // to apply mobile column properties even when nested
+      .#{$shelves-row-name} {
+        #{columns-selector($shelves-mobile-column-name)} {
+          @include column-base($reset-if-tablet: false, $reset-if-mobile: false);
+          @include column-gutter($total: $shelves-mobile-columns, $gutter: $shelves-mobile-gutter);
+        }
+      
+        @include shelves-columns(
+          $column-name: $shelves-mobile-column-name,
+          $total:       $shelves-mobile-columns,
+          $gutter:      $shelves-mobile-gutter,
+          $prefixes:    $mobile-prefixes,
+          $suffixes:    $mobile-suffixes,
+          $pushes:      $mobile-pushes,
+          $pulls:       $mobile-pulls
+        );
+      }
     }
   }
 }
 
 // Generates the grid's base classes, namely the
 // the row and container elements.
-@mixin shelves-base {
+//
+//   $reset-if-tablet - Include styles for resetting the grid at
+//                      tablet sizes. Defaults to true.
+//   $reset-if-mobile - Include styles for resetting the grid at
+//                      mobile sizes. Defaults to false.
+//
+@mixin shelves-base($reset-if-tablet: true, $reset-if-mobile: false) {
   .#{$shelves-container-name} {
     @include container;
   }
   
   .#{$shelves-row-name} {
-    @include row($mobile-reset: false);
+    @include row($reset-if-tablet: $reset-if-tablet, $reset-if-mobile: $reset-if-mobile);
   }
   
-  #{$shelves-columns-selector}, {
-    @include column-base($mobile-reset: false);
-    @include column-gutter($include-first-column: false);
-    
-    &,
-    & #{$shelves-columns-selector} {
+  #{columns-selector($shelves-column-name)} {
+    @include column-base($reset-if-tablet: $reset-if-tablet, $reset-if-mobile: $reset-if-mobile);
+    @include column-gutter($reset-first: false);
+  }
+  
+  .#{$shelves-row-name} {
+    #{columns-selector($shelves-column-name)} {
       &:first-child {
         @include reset-column-gutter;
       }
@@ -102,67 +184,70 @@
 // the columns. This can be used in different contexts, varying
 // the number of columns if necessary.
 //
-//   $start                 - Index to start the loop at. Defaults to 1.
-//   $end                   - Where to end the loop. Defaults to $shelves-columns.
-//   $context               - The context of generated classes.
-//                            Defaults to $shelves-columns.
-//   $include-column-gutter - Include generic column gutter for the given context.
-//                            Defaults to true.
-//   $include-prefix        - Include prefix classes. Deafults to true.
-//   $include-suffix        - Include suffix classes. Deafults to true.
-//   $include-push          - Include push classes. Deafults to true.
-//   $include-pull          - Include pull classes. Deafults to true.
+//   $column-name - The name of the column to generate widths for.
+//                  Defaults to $shelves-column-name
+//   $start       - Where to start the loop. Defaults to 1.
+//   $end         - Where to end the loop.
+//                  Defaults to the value of $total.
+//   $context     - The context of generated classes.
+//                  Defaults to the value of $total.
+//   $total       - The total number of columns in the grid.
+//                  Defaults to the value of $shelves-columns. 
+//   $gutter      - The width of the gutter in the root context (in %).
+//                  Defaults to the value of $shelves-gutter.
+//   $prefixes    - Include prefix classes. Deafults to true.
+//   $suffixes    - Include suffix classes. Deafults to true.
+//   $pushes      - Include push classes. Deafults to true.
+//   $pulls       - Include pull classes. Deafults to true.
 //
 @mixin shelves-columns(
-  $start:                 1,
-  $end:                   $shelves-columns,
-  $context:               $shelves-columns,
-  $include-column-gutter: true,
-  $include-prefix:        true,
-  $include-suffix:        true,
-  $include-push:          true,
-  $include-pull:          true
+  $column-name: $shelves-column-name,
+  $start:       1,
+  $end:         nil,
+  $context:     nil,
+  $total:       $shelves-columns,
+  $gutter:      $shelves-gutter,
+  $prefixes:    true,
+  $suffixes:    true,
+  $pushes:      true,
+  $pulls:       true
 ) {
-  @if $include-column-gutter {
-    #{$shelves-columns-selector} {
-      @include column-gutter($context, false);
-    }
+  @if type-of($context) != 'number' or $context > $total {
+    $context: $total;
+  }
+  @if type-of($end) != 'number' or $end > $context {
+    $end: $context;
   }
-
   @for $i from $start to $end  {
-    #{column-selector($shelves-column-name, $i)} {
-      @include columns-width($i, $context);
+    #{column-selector($column-name, $i)} {
+      @include columns-width($i, $context, $total, $gutter);
     }
   }
-    
-  @if $include-prefix == true {
+  @if $prefixes {
     @for $i from $start to $end  {
       #{column-selector($shelves-prefix-name, $i)} {
-        @include column-prefix($i, $context);
+        @include column-prefix($i, $context, $total, $gutter);
       }
     }
   }
-    
-  @if $include-suffix == true {
+  @if $suffixes {
     @for $i from $start to $end  {
       #{column-selector($shelves-suffix-name, $i)} {
-        @include column-suffix($i, $context);
+        @include column-suffix($i, $context, $total, $gutter);
       }
     }
   }
-    
-  @if $include-push == true {
+  @if $pushes {
     @for $i from $start to $end  {
       #{column-selector($shelves-push-name, $i)} {
-        @include column-push($i, $context);
+        @include column-push($i, $context, $total, $gutter);
       }
     }
   }
-    
-  @if $include-pull == true {
+  @if $pulls {
     @for $i from $start to $end  {
       #{column-selector($shelves-pull-name, $i)} {
-        @include column-pull($i, $context);
+        @include column-pull($i, $context, $total, $gutter);
       }
     }
   }
@@ -171,29 +256,19 @@
 // Resets the row and column elements so they take up
 // the full width of their parent element. All modifying
 // effects are removed from columns as well.
-@mixin shelves-resets {
+//
+//   $reset-row     - Reset the row. Defaults to true.
+//   $reset-columns - Reset columns (including nested columns).
+//                    Defaults to true
+//
+@mixin shelves-resets($reset-row: true, $reset-columns: true) {
   .#{$shelves-row-name} {
-    @include reset-row;
-  }
-  
-  #{$shelves-columns-selector} {
-    &,
-    & #{$shelves-columns-selector} {
-      @include reset-column;
+    @if $reset-row {
+      @include reset-row;
     }
-  }
-}
-
-// Generates the classes for columns on mobile devices.
-@mixin shelves-mobile-columns {
-  .#{$shelves-mobile-column-name} {
-    @include column-base($mobile-reset: false);
-    @include column-gutter($include-first-column: false);
-    
-    $mobile-step: floor($shelves-columns / $shelves-mobile-columns);
-    @each $i in range($start: $mobile-step, $end: $shelves-columns, $step: $mobile-step) {
-      &#{column-selector($shelves-column-name, $i)} {
-        @include columns-width($i);
+    @if $reset-columns {
+      #{columns-selector($shelves-column-name)} {
+        @include reset-column;
       }
     }
   }

data/scss/shelves/mixins/_modifiers.scss

@@ -3,10 +3,19 @@
 //
 //   $n       - The number of columns to pad.
 //   $context - The number of columns encapsulating the element.
-//              Defaults to the full width of the grid.
+//              Defaults to the the value of $total.
+//   $total   - The total number of columns in the grid.
+//              Defaults to the value of $shelves-columns. 
+//   $gutter  - The width of the gutter in the root context (in %).
+//              Defaults to the value of $shelves-gutter.
 //
-@mixin column-prefix($n, $context: $shelves-columns) {
-  padding-left: columns-distance($n, $context);
+@mixin column-prefix(
+  $n,
+  $context: nil,
+  $total:   $shelves-columns,
+  $gutter:  $shelves-gutter
+) {
+  padding-left: columns-distance($n, $context, $total, $gutter);
 }
 
 // Adds a padding suffix (which shifts the column to the left)
@@ -14,10 +23,19 @@
 //
 //   $n       - The number of columns to pad.
 //   $context - The number of columns encapsulating the element.
-//              Defaults to the full width of the grid.
+//              Defaults to the the value of $total.
+//   $total   - The total number of columns in the grid.
+//              Defaults to the value of $shelves-columns. 
+//   $gutter  - The width of the gutter in the root context (in %).
+//              Defaults to the value of $shelves-gutter.
 //
-@mixin column-suffix($n, $context: $shelves-columns) {
-  padding-right: columns-distance($n, $context);
+@mixin column-suffix(
+  $n,
+  $context: nil,
+  $total:   $shelves-columns,
+  $gutter:  $shelves-gutter
+) {
+  padding-right: columns-distance($n, $context, $total, $gutter);
 }
 
 // Reorder the content by shifting the column to the right. This
@@ -25,10 +43,19 @@
 //
 //   $n       - The number of columns to shift.
 //   $context - The number of columns encapsulating the element.
-//              Defaults to the full width of the grid.
+//              Defaults to the the value of $total.
+//   $total   - The total number of columns in the grid.
+//              Defaults to the value of $shelves-columns. 
+//   $gutter  - The width of the gutter in the root context (in %).
+//              Defaults to the value of $shelves-gutter.
 //
-@mixin column-push($n, $context: $shelves-columns) {
-  left: columns-distance($n, $context);
+@mixin column-push(
+  $n,
+  $context: nil,
+  $total:   $shelves-columns,
+  $gutter:  $shelves-gutter
+) {
+  left: columns-distance($n, $context, $total, $gutter);
 }
 
 // Reorder the content by shifting the column to the left. This
@@ -36,8 +63,17 @@
 //
 //   $n       - The number of columns to shift.
 //   $context - The number of columns encapsulating the element.
-//              Defaults to the full width of the grid.
+//              Defaults to the the value of $total.
+//   $total   - The total number of columns in the grid.
+//              Defaults to the value of $shelves-columns. 
+//   $gutter  - The width of the gutter in the root context (in %).
+//              Defaults to the value of $shelves-gutter.
 //
-@mixin column-pull($n, $context: $shelves-columns) {
-  right: columns-distance($n, $context);
+@mixin column-pull(
+  $n,
+  $context: nil,
+  $total:   $shelves-columns,
+  $gutter:  $shelves-gutter
+) {
+  right: columns-distance($n, $context, $total, $gutter);
 }

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: shelves
 version: !ruby/object:Gem::Version 
-  hash: 27
+  hash: 23
   prerelease: 
   segments: 
   - 0
-  - 1
+  - 2
   - 0
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors: 
 - Pete Browne
@@ -15,7 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-03-22 00:00:00 Z
+date: 2012-03-29 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: sass