shelves 0.6.0 → 1.0.0

data/scss/shelves/_mixins.scss

@@ -1,4 +1,6 @@
-@import "shelves/mixins/base";
-@import "shelves/mixins/modifiers";
-@import "shelves/mixins/resets";
+@import "shelves/mixins/utils";
+@import "shelves/mixins/context";
+@import "shelves/mixins/media";
+@import "shelves/mixins/row";
+@import "shelves/mixins/column";
 @import "shelves/mixins/generators";

data/scss/shelves/_variables.scss

@@ -0,0 +1,98 @@
+// Default Grid Settings
+$shelves-width: 1060px !default;
+$shelves-max-width: $shelves-width !default;
+$shelves-columns: 12 !default;
+$shelves-margin: 20px !default;
+$shelves-gutter: 20px !default;
+$shelves-tablet-breakpoint: 800px !default;
+$shelves-mobile-breakpoint: 480px !default;
+$shelves-context: null;
+
+// Convert the gutter to a percentage if necessary.
+@if unit($shelves-gutter) != "%" {
+  $shelves-gutter: percentage($shelves-gutter / $shelves-max-width);
+}
+
+// Default Mobile Settings
+$shelves-mobile-columns: 4 !default;
+$shelves-mobile-gutter: $shelves-gutter * 2.375 !default;
+
+// Default Tablet Settings
+$shelves-tablet-columns: 6 !default;
+$shelves-tablet-gutter: $shelves-gutter * 1.5 !default;
+
+// Default Desktop Settings
+$shelves-desktop-columns: $shelves-columns !default;
+$shelves-desktop-gutter: $shelves-gutter !default;
+
+// Default Naming Conventions
+$shelves-separator: "-" !default;
+$shelves-desktop-name: "desktop" !default;
+$shelves-tablet-name: "tablet" !default;
+$shelves-mobile-name: "mobile" !default;
+$shelves-row-name: "row" !default;
+$shelves-column-name: "column" !default;
+$shelves-prefix-name: "prefix" !default;
+$shelves-suffix-name: "suffix" !default;
+$shelves-push-name: "push" !default;
+$shelves-pull-name: "pull" !default;
+$shelves-first-name: "first" !default;
+$shelves-center-name: "center" !default;
+$shelves-visible-name: "visible" !default;
+$shelves-hidden-name: "hidden" !default;
+
+// Default Class Names
+// (Note the lack of the preceding ".")
+$shelves-mobile-column-name: class-name($shelves-mobile-name $shelves-column-name) !default;
+$shelves-tablet-column-name: class-name($shelves-tablet-name $shelves-column-name) !default;
+$shelves-desktop-column-name: $shelves-column-name !default;
+$shelves-mobile-prefix-name: class-name($shelves-mobile-name $shelves-prefix-name) !default;
+$shelves-tablet-prefix-name: class-name($shelves-tablet-name $shelves-prefix-name) !default;
+$shelves-desktop-prefix-name: $shelves-prefix-name !default;
+$shelves-mobile-suffix-name: class-name($shelves-mobile-name $shelves-suffix-name) !default;
+$shelves-tablet-suffix-name: class-name($shelves-tablet-name $shelves-suffix-name) !default;
+$shelves-desktop-suffix-name: $shelves-suffix-name !default;
+$shelves-mobile-push-name: class-name($shelves-mobile-name $shelves-push-name) !default;
+$shelves-tablet-push-name: class-name($shelves-tablet-name $shelves-push-name) !default;
+$shelves-desktop-push-name: $shelves-push-name !default;
+$shelves-mobile-pull-name: class-name($shelves-mobile-name $shelves-pull-name) !default;
+$shelves-tablet-pull-name: class-name($shelves-tablet-name $shelves-pull-name) !default;
+$shelves-desktop-pull-name: $shelves-pull-name !default;
+$shelves-first-mobile-column-name: class-name($shelves-first-name $shelves-mobile-column-name) !default;
+$shelves-first-tablet-column-name: class-name($shelves-first-name $shelves-tablet-column-name) !default;
+$shelves-first-desktop-column-name: class-name($shelves-first-name $shelves-desktop-column-name) !default;
+$shelves-center-column-name: class-name($shelves-center-name $shelves-column-name) !default;
+$shelves-visible-desktop-name: class-name($shelves-visible-name $shelves-desktop-name) !default;
+$shelves-visible-tablet-name: class-name($shelves-visible-name $shelves-tablet-name) !default;
+$shelves-visible-mobile-name: class-name($shelves-visible-name $shelves-mobile-name) !default;
+$shelves-hidden-desktop-name: class-name($shelves-hidden-name $shelves-desktop-name) !default;
+$shelves-hidden-tablet-name: class-name($shelves-hidden-name $shelves-tablet-name) !default;
+$shelves-hidden-mobile-name: class-name($shelves-hidden-name $shelves-mobile-name) !default;
+
+// Default options for the grid generator
+$shelves-responsive-base: true !default;
+$shelves-visibility: true !default;
+$shelves-center: true !default;
+$shelves-nested-columns: true !default;
+$shelves-prefixes: true !default;
+$shelves-suffixes: true !default;
+$shelves-pushes: true !default;
+$shelves-pulls: true !default;
+$shelves-nested-prefixes: false !default;
+$shelves-nested-suffixes: false !default;
+$shelves-nested-pushes: false !default;
+$shelves-nested-pulls: false !default;
+$shelves-tablet-prefixes: false !default;
+$shelves-tablet-suffixes: false !default;
+$shelves-tablet-pushes: false !default;
+$shelves-tablet-pulls: false !default;
+$shelves-mobile-prefixes: false !default;
+$shelves-mobile-suffixes: false !default;
+$shelves-mobile-pushes: false !default;
+$shelves-mobile-pulls: false !default;
+
+// Support IE7
+$legacy-support-for-ie7: true !default;
+$legacy-support-for-ie8: true !default;
+$shelves-ie7-support: $legacy-support-for-ie7 !default;
+$shelves-ie8-support: $legacy-support-for-ie8 !default;

data/scss/shelves/mixins/_column.scss

@@ -0,0 +1,226 @@
+// 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 the value of $total.
+//   $first           - Does not apply the column-gutter, because this it the
+//                      first column on the row. Defaults to false.
+//   $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(
+    $n,
+    $context: $shelves-context,
+    $first: false,
+    $total: $shelves-columns,
+    $gutter: $shelves-gutter) {
+  @include column-base;
+  @include column-width($n, $context, $total, $gutter);
+
+  @if not $first {
+    @include column-gutter($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.
+@mixin column-base {
+  display: block;
+  float: left;
+  min-height: 1px;
+  position: relative;
+
+  @if $shelves-ie7-support {
+    // IE6-7 incorrectly rounds up percentage widths (breaking layouts)
+    // http://ejohn.org/blog/sub-pixel-problems-in-css/
+    *margin-right: -1px;
+  }
+}
+
+// Sets the width of the element to the given number of columns.
+//
+//   $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.
+//
+@mixin column-width(
+    $n,
+    $context: $shelves-context,
+    $total: $shelves-columns,
+    $gutter: $shelves-gutter) {
+  width: column-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 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 false.
+//
+@mixin column-gutter(
+    $context: $shelves-context,
+    $total: $shelves-columns,
+    $gutter: $shelves-gutter) {
+  margin-left: column-gutter($context, $total, $gutter);
+}
+
+// Column Modifiers
+// ----------------------------------------------------------------------------
+
+// Centers the column by removing the float and setting the horizontal
+// margins to auto.
+@mixin center-column {
+  float: none;
+  margin-left: auto !important;
+  margin-right: auto;
+}
+
+// Adds a padding suffix (which shifts the column to the right)
+// spanning the given number of columns.
+//
+//   $n           - The number of columns to pad.
+//   $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.
+//   $with-gutter - Include an extra gutter in the calculation.
+//                  Defaults to true.
+//
+@mixin prefix-column(
+    $n,
+    $context: $shelves-context,
+    $total: $shelves-columns,
+    $gutter: $shelves-gutter,
+    $with-gutter: true) {
+  padding-left: column-distance($n, $context, $total, $gutter, $with-gutter);
+}
+
+// Adds a padding suffix (which shifts the column to the left)
+// spanning the given number of columns.
+//
+//   $n           - The number of columns to pad.
+//   $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.
+//   $with-gutter - Include an extra gutter in the calculation.
+//                  Defaults to true.
+//
+@mixin suffix-column(
+    $n,
+    $context: $shelves-context,
+    $total: $shelves-columns,
+    $gutter: $shelves-gutter,
+    $with-gutter: true) {
+  padding-right: column-distance($n, $context, $total, $gutter, $with-gutter);
+}
+
+// Reorder the content by shifting the column to the right. This
+// is often used in conjunction with column-pull($n).
+//
+//   $n           - The number of columns to shift.
+//   $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.
+//   $with-gutter - Include an extra gutter in the calculation.
+//                  Defaults to true.
+//
+@mixin push-column(
+    $n,
+    $context: $shelves-context,
+    $total: $shelves-columns,
+    $gutter: $shelves-gutter,
+    $with-gutter: true) {
+  left: column-distance($n, $context, $total, $gutter, $with-gutter);
+}
+
+// Reorder the content by shifting the column to the left. This
+// is often used in conjunction with column-push($n).
+//
+//   $n           - The number of columns to shift.
+//   $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.
+//   $with-gutter - Include an extra gutter in the calculation.
+//                  Defaults to true.
+//
+@mixin pull-column(
+    $n,
+    $context: $shelves-context,
+    $total: $shelves-columns,
+    $gutter: $shelves-gutter,
+    $with-gutter: true) {
+  right: column-distance($n, $context, $total, $gutter, $with-gutter);
+}
+
+// Column Resets
+// ----------------------------------------------------------------------------
+
+// Resets a column completely, removing margins, padding, and positioning.
+@mixin reset-column {
+  @include reset-column-width;
+  @include reset-column-gutter;
+  @include reset-column-prefix;
+  @include reset-column-suffix;
+  @include reset-column-push;
+  @include reset-column-pull;
+}
+
+// Resets a column to expand to the full width of its container.
+@mixin reset-column-width {
+  float: none;
+  width: auto;
+
+  @if $shelves-ie7-support {
+    *margin-right: 0px;
+  }
+}
+
+// Removes the gutter of a column in a grid. This is usually added
+// to the first column in a row.
+@mixin reset-column-gutter {
+  margin-left: 0;
+}
+
+// Removes the padding prefix added to a column.
+@mixin reset-column-prefix {
+  padding-left: 0;
+}
+
+// Removes the padding suffix added to a column.
+@mixin reset-column-suffix {
+  padding-right: 0;
+}
+
+// Removes the column shifting added with a column-push($n).
+@mixin reset-column-push {
+  left: auto;
+}
+
+// Removes the column shifting added with a column-pull($n).
+@mixin reset-column-pull {
+  right: auto;
+}

data/scss/shelves/mixins/_context.scss

@@ -0,0 +1,69 @@
+// Place the block of content with the given grid settings.
+//
+//   $columns - The number of columns in the grid.
+//   $gutter  - The width of the gutter in the grid.
+//              Defaults to the value of $shelves-gutter.
+//
+@mixin with-grid($columns, $gutter: $shelves-gutter) {
+  $original-shelves-columns: $shelves-columns;
+  $original-shelves-gutter: $shelves-gutter;
+  $shelves-columns: $columns;
+  $shelves-gutter: $gutter;
+  @content;
+  $shelves-columns: $original-shelves-columns;
+  $shelves-gutter: $original-shelves-gutter;
+}
+
+// Place the block of content with the given context (the current column size).
+//
+//   $context - The number of columns encapsulating the column.
+//
+@mixin with-parent-column($context) {
+  $original-shelves-contenxt: $shelves-context;
+  $shelves-context: $context;
+  @content;
+  $shelves-context: $original-shelves-contenxt;
+}
+
+// Place the block of content with the given desktop grid settings.
+//
+//   $columns - The number of columns in the grid.
+//              Defaults to the value of $shelves-columns.
+//   $gutter  - The width of the gutter in the grid.
+//              Defaults to the value of $shelves-gutter.
+//
+@mixin with-desktop-grid($columns: $shelves-columns, $gutter: $shelves-gutter) {
+  @include with-grid($columns, $gutter) {
+    @content;
+  }
+}
+
+// Place the block of content with the given tablet grid settings.
+//
+//   $columns - The number of columns in the grid.
+//              Defaults to the value of $shelves-tablet-columns.
+//   $gutter  - The width of the gutter in the grid.
+//              Defaults to the value of $shelves-tablet-gutter.
+//
+@mixin with-tablet-grid(
+    $columns: $shelves-tablet-columns,
+    $gutter: $shelves-tablet-gutter) {
+  @include with-grid($columns, $gutter) {
+    @content;
+  }
+}
+
+// Place the block of content with the given mobile grid settings.
+//
+//   $columns - The number of columns in the grid.
+//              Defaults to the value of $shelves-mobile-columns.
+//   $gutter  - The width of the gutter in the grid.
+//              Defaults to the value of $shelves-mobile-gutter.
+//
+@mixin with-mobile-grid(
+    $columns: $shelves-mobile-columns,
+    $gutter: $shelves-mobile-gutter) {
+  @include with-grid($columns, $gutter) {
+    @content;
+  }
+}

data/scss/shelves/mixins/_generators.scss

@@ -1,181 +1,56 @@
-// 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.
+// Generates the grid's base classes.
 //
-//   $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.
+//   $responsive-base - Include the responsive base styles.
+//                      Defaults to the value of $shelves-responsive-base.
 //
-@mixin shelves(
-    $prefixes: $shelves-prefixes,
-    $suffixes: $shelves-suffixes,
-    $pushes: $shelves-pushes,
-    $pulls: $shelves-pulls,
-    $nested: $shelves-nested,
-    $nested-prefixes: $shelves-nested-prefixes,
-    $nested-suffixes: $shelves-nested-suffixes,
-    $nested-pushes: $shelves-nested-pushes,
-    $nested-pulls: $shelves-nested-pulls,
-    $tablet: $shelves-tablet,
-    $tablet-prefixes: $shelves-tablet-prefixes,
-    $tablet-suffixes: $shelves-tablet-suffixes,
-    $tablet-pushes: $shelves-tablet-pushes,
-    $tablet-pulls: $shelves-tablet-pulls,
-    $mobile: $shelves-mobile,
-    $mobile-prefixes: $shelves-mobile-prefixes,
-    $mobile-suffixes: $shelves-mobile-suffixes,
-    $mobile-pushes: $shelves-mobile-pushes,
-    $mobile-pulls: $shelves-mobile-pulls) {
-  @include shelves-base($reset-if-tablet: false, $reset-if-mobile: false);
-  @include shelves-columns(
-    $prefixes: $prefixes,
-    $suffixes: $suffixes,
-    $pushes: $pushes,
-    $pulls: $pulls
-  );
-
-  @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(
-          $context: $i,
-          $prefixes: $nested-prefixes,
-          $suffixes: $nested-suffixes,
-          $pushes: $nested-pushes,
-          $pulls: $nested-pulls
-        );
-      }
-    }
+@mixin shelves-base($responsive-base: $shelves-responsive-base) {
+  @if $responsive-base {
+    @include shelves-responsive-base;
   }
 
-  @if $tablet {
-    @media screen and (max-width: $shelves-tablet-breakpoint) {
-      @if $shelves-tablet-margin != $shelves-margin {
-        .#{$shelves-row-name} {
-          @include container($shelves-tablet-margin);
-        }
-      }
-
-      @include shelves-resets;
+  #{class-selector($shelves-row-name)} {
+    @include row;
 
-      // 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
-        );
-      }
+    #{class-selector($shelves-row-name)} {
+      @include reset-row;
     }
   }
+}
 
-  @if $mobile {
-    @media screen and (max-width: $shelves-mobile-breakpoint) {
-      @if $shelves-mobile-margin != if($tablet, $shelves-margin, $shelves-tablet-margin) {
-        .#{$shelves-row-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);
-        }
+// Adds some non-grid related responsive styles. It fixes IE 10's
+// "Snap Mode" and making images fluid.
+@mixin shelves-responsive-base {
+  @include fix-snap-mode;
 
-        @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
-        );
-      }
-    }
+  img {
+    @include fluid-media;
   }
 }
 
-// Generates the grid's base classes, namely the
-// the row and container elements.
-//
-//   $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-row-name} {
-    @include container;
-    @include row($reset-if-tablet: $reset-if-tablet, $reset-if-mobile: $reset-if-mobile);
-
-    .#{$shelves-row-name} {
-      @include reset-container;
-      @include reset-row;
+// Include visibility helpers for showing/hiding content based on
+// device size.
+@mixin shelves-visibility-helpers {
+  @include on-mobile {
+    #{class-selector($shelves-hidden-mobile-name)},
+    #{class-selector($shelves-visible-tablet-name)},
+    #{class-selector($shelves-visible-desktop-name)} {
+      @include force-hidden;
     }
   }
 
-  #{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);
+  @include on-tablet {
+    #{class-selector($shelves-visible-mobile-name)},
+    #{class-selector($shelves-hidden-tablet-name)},
+    #{class-selector($shelves-visible-desktop-name)} {
+      @include force-hidden;
+    }
   }
 
-  .#{$shelves-row-name} {
-    #{columns-selector($shelves-column-name)} {
-      &:first-child {
-        @include reset-column-gutter;
-      }
+  @include on-desktop {
+    #{class-selector($shelves-visible-mobile-name)},
+    #{class-selector($shelves-visible-tablet-name)},
+    #{class-selector($shelves-hidden-desktop-name)} {
+      @include force-hidden;
     }
   }
 }
@@ -184,8 +59,8 @@
 // the columns. This can be used in different contexts, varying
 // the number of columns if necessary.
 //
-//   $column-name - The name of the column to generate widths for.
-//                  Defaults to $shelves-column-name
+//   $extend      - Each column will @extend this placeholder if set.
+//                  Defaults to null.
 //   $start       - Where to start the loop. Defaults to 1.
 //   $end         - Where to end the loop.
 //                  Defaults to the value of $total.
@@ -195,76 +70,73 @@
 //                  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.
+//   $prefixes    - Include prefix classes. Defaults to false.
+//   $suffixes    - Include suffix classes. Defaults to false.
+//   $pushes      - Include push classes. Defaults to false.
+//   $pulls       - Include pull classes. Defaults to false.
+//   $column-name - The name of the column to generate widths for.
+//                  Defaults to $shelves-desktop-column-name.
+//   $prefix-name - The class name of the prefix modifier.
+//                  Defaults to $shelves-desktop-prefix-name.
+//   $suffix-name - The class name of the suffix modifier.
+//                  Defaults to $shelves-desktop-suffix-name.
+//   $push-name   - The class name of the push modifier.
+//                  Defaults to $shelves-desktop-push-name.
+//   $pull-name   - The class name of the pull modifier.
+//                  Defaults to $shelves-desktop-pull-name.
 //
 @mixin shelves-columns(
-    $column-name: $shelves-column-name,
+    $extend: null,
     $start: 1,
     $end: null,
-    $context: null,
+    $context: $shelves-context,
     $total: $shelves-columns,
     $gutter: $shelves-gutter,
-    $prefixes: true,
-    $suffixes: true,
-    $pushes: true,
-    $pulls: true) {
+    $prefixes: false,
+    $suffixes: false,
+    $pushes: false,
+    $pulls: false,
+    $column-name: $shelves-desktop-column-name,
+    $prefix-name: $shelves-desktop-prefix-name,
+    $suffix-name: $shelves-desktop-suffix-name,
+    $push-name: $shelves-desktop-push-name,
+    $pull-name: $shelves-desktop-pull-name) {
   $context: $total !default;
   $end: $context !default;
 
   @for $i from $start to $end  {
-    #{column-selector($column-name, $i)} {
-      @include columns-width($i, $context, $total, $gutter);
+    #{class-selector($column-name $i)} {
+      @if $extend {
+        @extend %#{$extend};
+      }
+      @include column-width($i, $context, $total, $gutter);
     }
   }
   @if $prefixes {
     @for $i from $start to $end  {
-      #{column-selector($shelves-prefix-name, $i)} {
-        @include column-prefix($i, $context, $total, $gutter);
+      #{class-selector($prefix-name $i)} {
+        @include prefix-column($i, $context, $total, $gutter);
       }
     }
   }
   @if $suffixes {
     @for $i from $start to $end  {
-      #{column-selector($shelves-suffix-name, $i)} {
-        @include column-suffix($i, $context, $total, $gutter);
+      #{class-selector($suffix-name $i)} {
+        @include suffix-column($i, $context, $total, $gutter);
       }
     }
   }
   @if $pushes {
     @for $i from $start to $end  {
-      #{column-selector($shelves-push-name, $i)} {
-        @include column-push($i, $context, $total, $gutter);
+      #{class-selector($push-name $i)} {
+        @include push-column($i, $context, $total, $gutter);
       }
     }
   }
   @if $pulls {
     @for $i from $start to $end  {
-      #{column-selector($shelves-pull-name, $i)} {
-        @include column-pull($i, $context, $total, $gutter);
-      }
-    }
-  }
-}
-
-// 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.
-//
-//   $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} {
-    @if $reset-row {
-      @include reset-row;
-    }
-    @if $reset-columns {
-      #{columns-selector($shelves-column-name)} {
-        @include reset-column;
+      #{class-selector($pull-name $i)} {
+        @include pull-column($i, $context, $total, $gutter);
       }
     }
   }