span-column() refactor

.gitignore

@@ -3,4 +3,12 @@
 *.scssc
 /stylesheets/.sass-cache/
 _site/
+_includes/
+_layouts/
+_sass/
+examples/
+images/
+css/
+_config.yml
+index.html
 

README.md

@@ -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

_neat.scss

@@ -1,6 +1,7 @@
 // Custom Functions
 @import "functions/line-height";
 @import "functions/px-to-em";
+@import "functions/grid";
 
 // Default Settings
 @import "settings/grid";

functions/_grid.scss

@@ -0,0 +1,15 @@
+@function container-span($span: $span) {
+  @if length($span) == 3 {
+    $container-columns: nth($span, 3);
+    @return $container-columns;
+  }
+
+  @else if length($span) == 2 {
+    $container-columns: nth($span, 2);
+    @return $container-columns;
+  }
+
+  @else {
+    @return $grid-columns;
+  }
+}

grid/_grid.scss

@@ -21,7 +21,10 @@ $fg-max-width: $max-width;
 }
 
 // Grid span columns
-@mixin span-columns($columns, $container-columns: $fg-max-columns, $display: block) {
+@mixin span-columns($span: $columns of $container-columns, $display: block) {
+
+  $columns: nth($span, 1);
+  $container-columns: container-span($span);
 
   @if $display == table {
     display: table-cell;