Permalink
Browse files

separate order of grid items from alignment

When the order of grid items is reversed, the desired behaviour is not
necessarily to align the entire grid to the right. It can be seen when
grid items widths don't add up to 1 (for example, they add up to three
quarters). Better to separate concepts of order and alignment.

 - removed `text-align:right` from `grid--rev` and added
`text-align:left`
 - added `grid--right` modifier to manage right aligment of grid;
  • Loading branch information...
1 parent 0853a3b commit f5d7ea4cc6b164716bc2a34596d7f3be5fafdf1d Oksana Khristenko committed with Mar 26, 2013
Showing with 14 additions and 1 deletion.
  1. +14 −1 csswizardry-grids.scss
View
@@ -260,7 +260,7 @@ $class-type: unquote(".");
#{$class-type}grid--rev{
@extend #{$class-type}grid;
direction:rtl;
- text-align:right;
+ text-align:left;
> #{$class-type}grid__item{
direction:ltr;
@@ -283,6 +283,19 @@ $class-type: unquote(".");
/**
+ * Align the entire grid to the right
+ */
+#{$class-type}grid--right{
+ @extend #{$class-type}grid;
+ text-align:right;
+
+ > #{$class-type}grid__item{
+ text-align:left;
+ }
+}
+
+
+/**
* Centered grids align grid items centrally without needing to use push or pull
* classes.
*/

0 comments on commit f5d7ea4

Please sign in to comment.