Permalink
Browse files

Update README to reflect the span-columns() changes

  • Loading branch information...
1 parent 0fc6931 commit e97b395f33731c79d63e0f4eb50e054d860c2129 Reda Lemeden committed Aug 23, 2012
Showing with 15 additions and 10 deletions.
  1. +15 −10 README.md
View
@@ -34,11 +34,11 @@ You can include this mixin in more than one element in the same page.
### Columns
Use the ```span-columns``` mixin to specify the number of columns an element should span:
- @include span-columns(columns, container, display type)
+ @include span-columns($span: $columns of $container-columns, $display: block)
* ```columns``` is the number of columns you wish this element to span.
- * ```container``` (optional) is the number of columns the container spans, defaults to the total number of columns in the grid.
- * ```display type``` (optional) changes the display type of the grid. Use ```block```—the default—for floated layout, ```table``` for table-cell layout, and ```inline-block``` for an inline block layout.
+ * ```container-columns``` (optional) is the number of columns the container spans, defaults to the total number of columns in the grid.
+ * ```display``` (optional) changes the display type of the grid. Use ```block```—the default—for floated layout, ```table``` for table-cell layout, and ```inline-block``` for an inline block layout.
eg. Element that spans across 6 columns (out of the default 12):
@@ -47,7 +47,7 @@ Use the ```span-columns``` mixin to specify the number of columns an element sho
}
-If the element's parent isn't the top-most container, you need to add the number of columns of the parent element to keep the right proportions:
+If the element's parent isn't the top-most container, you need to add the number of columns of the parent element to keep the right proportions:
div.container {
@include outer-container;
@@ -56,27 +56,32 @@ If the element's parent isn't the top-most container, you need to add the number
@include span-columns(8);
div.element {
- @include span-columns(6,8);
+ @include span-columns(6 of 8);
}
}
}
-To use a table-cell layout, add ```table``` as the ```display type``` argument (you need all 3 arguments for it to work):
+To use a table-cell layout, add ```table``` as the ```display``` argument:
- @include span-columns(6, 8, table)
+ @include span-columns(6 of 8, table)
Likewise for inline-block:
- @include span-columns(6, 8, inline-block)
+ @include span-columns(6 of 8, inline-block)
+
+ The following syntaxes would also work:
+
+ @include span-columns(6 / 8,inline-block);
+ @include span-columns(6 8,inline-block);
### Rows
In order to clear floated or table-cell columns, use the ```row``` mixin:
- @include row(display type);
+ @include row($display);
- * ```display type``` takes either ```block```—the default—or ```table```.
+ * ```display``` takes either ```block```—the default—or ```table```.
### Shifting columns

0 comments on commit e97b395

Please sign in to comment.