Skip to content
This repository
Browse code

Merge branch 'v2.1.0'

  • Loading branch information...
commit a03c0773573368bc189c20e8a3dbe5266d0abe44 2 parents 0853a3b + 4367888
Harry Roberts authored March 27, 2013
1  CHANGELOG.md
Source Rendered
@@ -16,3 +16,4 @@
16 16
 * **1.8.2**     Ensure `.grid__item`s in `.grid--center` have normal text-alignment restored
17 17
 * **1.9**       Allow users to use a non-markup fix for `inline-block` whitespace removal
18 18
 * **2.0.0**     Tighten up use of modifier (`--`) syntax.
  19
+* **2.1.0**     Make distinction between right-aligning and reversing grids, provide a way to do both.
22  README.md
Source Rendered
@@ -155,7 +155,7 @@ might look like this:
155 155
             @extend %desk--one-third;
156 156
         }
157 157
 
158  
-### Reversed grids
  158
+### Reversed grids (`.grid--rev{}`)
159 159
 
160 160
 csswizardry-grids has the option to reverse a set of grids; this means that the
161 161
 order you write your source and the order it renders are total opposites, for
@@ -177,7 +177,7 @@ This is handy if you want to lay out your page a certain way visually but it
177 177
 would be advantageous to order the source differently, for example to aid
178 178
 accessibility (getting a screenreader to read more important content first).
179 179
 
180  
-### Gutterless grids
  180
+### Gutterless grids (`.grid--full{}`)
181 181
 
182 182
 It may be desirable at times to have no gutter between your grid items; with
183 183
 csswizardry-grids this is as simple as:
@@ -194,7 +194,23 @@ csswizardry-grids this is as simple as:
194 194
 
195 195
     </div>
196 196
 
197  
-### Centred grids
  197
+### Right-aligned grids (`.grid--right{}`)
  198
+
  199
+Keep grids in their correct order, but have them flush right instead of left:
  200
+
  201
+    <div class="grid--right">
  202
+
  203
+        <div class="grid__item  one-quarter">
  204
+            I render first but start in the middle of the page.
  205
+        </div><!--
  206
+
  207
+     --><div class="grid__item  one-quarter">
  208
+            I render second and appear at the very right edge of the page.
  209
+        </div>
  210
+
  211
+    </div>
  212
+
  213
+### Centred grids (`.grid--center{}`)
198 214
 
199 215
 You can centrally align your grids by simply using the `.grid--center` modifier:
200 216
 
15  csswizardry-grids.scss
@@ -260,7 +260,7 @@ $class-type:            unquote(".");
260 260
 #{$class-type}grid--rev{
261 261
     @extend #{$class-type}grid;
262 262
     direction:rtl;
263  
-    text-align:right;
  263
+    text-align:left;
264 264
 
265 265
     > #{$class-type}grid__item{
266 266
         direction:ltr;
@@ -283,6 +283,19 @@ $class-type:            unquote(".");
283 283
 
284 284
 
285 285
 /**
  286
+ * Align the entire grid to the right.
  287
+ */
  288
+#{$class-type}grid--right{
  289
+    @extend #{$class-type}grid;
  290
+    text-align:right;
  291
+
  292
+    > #{$class-type}grid__item{
  293
+        text-align:left;
  294
+    }
  295
+}
  296
+
  297
+
  298
+/**
286 299
  * Centered grids align grid items centrally without needing to use push or pull
287 300
  * classes.
288 301
  */

0 notes on commit a03c077

Please sign in to comment.
Something went wrong with that request. Please try again.