Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
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...
commit f5d7ea4cc6b164716bc2a34596d7f3be5fafdf1d 1 parent 0853a3b
Oksana Khristenko authored committed
Showing with 14 additions and 1 deletion.
  1. +14 −1 csswizardry-grids.scss
View
15 csswizardry-grids.scss
@@ -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.
*/
Please sign in to comment.
Something went wrong with that request. Please try again.