Merge branch 'dev'

README.md

@@ -161,7 +161,7 @@ csswizardry-grids has the option to reverse a set of grids; this means that the
 order you write your source and the order it renders are total opposites, for
 example:
 
-    <div class="grid--rev">
+    <div class="grid  grid--rev">
 
         <div class="main-content  grid__item  two-thirds">
             I appear first in the markup, but render second in the page.
@@ -182,7 +182,7 @@ accessibility (getting a screenreader to read more important content first).
 It may be desirable at times to have no gutter between your grid items; with
 csswizardry-grids this is as simple as:
 
-    <div class="grid--full">
+    <div class="grid  grid--full">
 
         <div class="grid__item  one-half">
             Look, ma! No gutter!
@@ -198,7 +198,7 @@ csswizardry-grids this is as simple as:
 
 Keep grids in their correct order, but have them flush right instead of left:
 
-    <div class="grid--right">
+    <div class="grid  grid--right">
 
         <div class="grid__item  one-quarter">
             I render first but start in the middle of the page.
@@ -214,14 +214,48 @@ Keep grids in their correct order, but have them flush right instead of left:
 
 You can centrally align your grids by simply using the `.grid--center` modifier:
 
-    <div class="grid--center">
+    <div class="grid  grid--center">
 
         <div class="grid__item  one-half">
             I’m in the middle!
         </div>
 
     </div>
 
+### Vertically aligned grids (`.grid--[middle|bottom]{}`)
+
+You can vertically align your grids to each other by simply using the
+`.grid--[middle|bottom]` modifiers:
+
+    <div class="grid  grid--middle">
+
+        <div class="grid__item  one-half">
+            I’m in the middle!
+        </div>
+
+        <div class="grid__item  one-half">
+            I’m in the middle!
+        </div>
+
+    </div>
+
+### Different sized grids (`.grid--[narrow|wide]{}`)
+
+You can quickly alter the gutter size of your grids to half (`.grid--narrow`) or
+double (`.grid--wide`) by using the relevant modifiers.
+
+    <div class="grid  grid--narrow">
+
+        <div class="grid__item  one-half">
+            I’m a narrow-guttered grid.
+        </div>
+
+        <div class="grid__item  one-half">
+            I’m a narrow-guttered grid.
+        </div>
+
+    </div>
+
 ## Help and questions
 
 If you have any trouble setting csswizardry-grids up, or would like some help

csswizardry-grids.scss

@@ -125,7 +125,7 @@ $breakpoints: (
     'lap' '(min-width: 481px) and (max-width: 1023px)',
     'portable' '(max-width: 1023px)',
     'desk' '(min-width: 1024px)'
-);
+)!default;
 
 
 /**
@@ -138,9 +138,9 @@ $breakpoints: (
  * Push and pull shall only be used if `$push` and/or `$pull` and `$responsive`
  * have been set to ‘true’.
  */
-$breakpoint-has-widths: ('palm', 'lap', 'portable', 'desk');
-$breakpoint-has-push:   ('palm', 'lap', 'portable', 'desk');
-$breakpoint-has-pull:   ('palm', 'lap', 'portable', 'desk');
+$breakpoint-has-widths: ('palm', 'lap', 'portable', 'desk')!default;
+$breakpoint-has-push:   ('palm', 'lap', 'portable', 'desk')!default;
+$breakpoint-has-pull:   ('palm', 'lap', 'portable', 'desk')!default;
 
 
 /**
@@ -255,10 +255,9 @@ $class-type:            unquote(".");
 
 /**
  * Reversed grids allow you to structure your source in the opposite order to
- * how your rendered layout will appear.
+ * how your rendered layout will appear. Extends `.grid`.
  */
 #{$class-type}grid--rev{
-    @extend #{$class-type}grid;
     direction:rtl;
     text-align:left;
 
@@ -271,9 +270,9 @@ $class-type:            unquote(".");
 
 /**
  * Gutterless grids have all the properties of regular grids, minus any spacing.
+ * Extends `.grid`.
  */
 #{$class-type}grid--full{
-    @extend #{$class-type}grid;
     margin-left:0;
 
     > #{$class-type}grid__item{
@@ -283,10 +282,9 @@ $class-type:            unquote(".");
 
 
 /**
- * Align the entire grid to the right.
+ * Align the entire grid to the right. Extends `.grid`.
  */
 #{$class-type}grid--right{
-    @extend #{$class-type}grid;
     text-align:right;
 
     > #{$class-type}grid__item{
@@ -297,10 +295,9 @@ $class-type:            unquote(".");
 
 /**
  * Centered grids align grid items centrally without needing to use push or pull
- * classes.
+ * classes. Extends `.grid`.
  */
 #{$class-type}grid--center{
-    @extend #{$class-type}grid;
     text-align:center;
 
     > #{$class-type}grid__item{
@@ -309,6 +306,48 @@ $class-type:            unquote(".");
 }
 
 
+/**
+ * Align grid cells vertically (`.grid--middle` or `.grid--bottom`). Extends
+ * `.grid`.
+ */
+#{$class-type}grid--middle{
+
+    > #{$class-type}grid__item{
+        vertical-align:middle;
+    }
+}
+
+#{$class-type}grid--bottom{
+
+    > #{$class-type}grid__item{
+        vertical-align:bottom;
+    }
+}
+
+
+/**
+ * Create grids with narrower gutters. Extends `.grid`.
+ */
+#{$class-type}grid--narrow{
+    margin-left:-($gutter / 2);
+
+    > #{$class-type}grid__item{
+        padding-left:$gutter / 2;
+    }
+}
+
+
+/**
+ * Create grids with wider gutters. Extends `.grid`.
+ */
+#{$class-type}grid--wide{
+    margin-left:-($gutter * 2);
+
+    > #{$class-type}grid__item{
+        padding-left:$gutter * 2;
+    }
+}
+