Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Remove Sass extends in favour of classes in markup.

  • Loading branch information...
commit 74b8b91b5f685016de18781a0d759a2d47c266fe 1 parent de0390c
@csswizardry authored
Showing with 8 additions and 11 deletions.
  1. +4 −4 README.md
  2. +4 −7 csswizardry-grids.scss
View
8 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,7 +214,7 @@ 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!
View
11 csswizardry-grids.scss
@@ -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{
Please sign in to comment.
Something went wrong with that request. Please try again.