Permalink
Browse files

Merge branch 'dev'

  • Loading branch information...
2 parents a03c077 + bf9dd12 commit f7e85b79fd8188ae8373677da03e31374b3c0f4f @csswizardry committed May 15, 2013
Showing with 88 additions and 15 deletions.
  1. +38 −4 README.md
  2. +50 −11 csswizardry-grids.scss
View
@@ -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
View
@@ -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;
+ }
+}
+

0 comments on commit f7e85b7

Please sign in to comment.