Add custom gutter sizing

README.md

@@ -32,9 +32,9 @@ article
 #### API
 Be sure to check out [Jeet's website](http://jeet.gs) for [CodePen](http://codepen.io) examples of all this stuff.
 
-- **`column(ratios = 1, offset = 0, cycle = 0, uncycle = 0)`** - `column` (also aliased as `col`) is perhaps the strongest feature of any grid system on the market. You specify an initial ratio, either as fractions or decimals, then pass the parent container's context ratio to maintain consistent gutters as you nest. Offsetting is made trivial as well. Just specify a ratio to make your offset have a margin-left. Make it negative to give it a margin-right instead. E.g. `column(1/4, offset: 1/4)` would create a column the quarter of the size of it's container and push it to the right a quarter. `cycle` and `uncycle` are pretty awesome in their own right as well. Want to make a gallery but don't want to specify a row every 4 pictures? `column(1/4, cycle: 4)` - done. Want to change it up when you get down to mobile? Maybe just show 2 images per row? `uncycle` your 4-item cycle then... `column(1/2, uncycle: 4, cycle: 2)` - done.
+- **`column(ratios = 1, offset = 0, cycle = 0, uncycle = 0, gutter = jeet-gutter)`** - `column` (also aliased as `col`) is perhaps the strongest feature of any grid system on the market. You specify an initial ratio, either as fractions or decimals, then pass the parent container's context ratio to maintain consistent gutters as you nest. Offsetting is made trivial as well. Just specify a ratio to make your offset have a margin-left. Make it negative to give it a margin-right instead. E.g. `column(1/4, offset: 1/4)` would create a column the quarter of the size of it's container and push it to the right a quarter. `cycle` and `uncycle` are pretty awesome in their own right as well. Want to make a gallery but don't want to specify a row every 4 pictures? `column(1/4, cycle: 4)` - done. Want to change it up when you get down to mobile? Maybe just show 2 images per row? `uncycle` your 4-item cycle then... `column(1/2, uncycle: 4, cycle: 2)` - done. Need to adjust column gutters for a specific container? `col(1/4, gutter: .5)`
 - **`span(ratio = 1, offset = 0)`** - Need a grid without the gutters? For instance, for a horizontal navigation where you want buttons touching. Do so like: `span(1/5)`. No need to pass more than one ratio since we don't need to worry about the math involved with gutters and all that.
-- **`shift(ratios = 0, col_or_span = column)`** - Source ordering works in Jeet by assigning `position: relative` and then a `left` offset equal to the ratio passed. You can specify if this is a column or span shift to include gutters or not. This works similar to `offset` in that it can accept negative values to shift the other direction. Again, `shift` can accept multiple context ratios to maintain perfect sizing.
+- **`shift(ratios = 0, col_or_span = column, gutter = jeet-gutter)`** - Source ordering works in Jeet by assigning `position: relative` and then a `left` offset equal to the ratio passed. You can specify if this is a column or span shift to include gutters or not. This works similar to `offset` in that it can accept negative values to shift the other direction. Again, `shift` can accept multiple context ratios to maintain perfect sizing. `shift` also accepts custom gutter sizing, just make sure your gutter sizes match the gutter sizes of your original elements.
 - **`unshift()`** - Accepts no values but isn't a block closer either. `unshift()` is a great helper function to quickly disable whatever source ordering you've done to an element.
 - **`edit()`** - Edit mode assigns a light gray, semi-transparent, background to every element on the page. It's a little trick picked up over the years that makes visualizing the structure of your site trivial.
 - **`center(max-width = 1410px, pad = 0)`** - This is a shortcut to easily center containers. The pad variable sets padding on the left and right.

jeet/_functions.styl

@@ -1,11 +1,11 @@
 -get_span(ratio = 1)
   return ratio * 100
 
--get_column(ratios = 1, g = jeet-gutter)
+-get_column(ratios = 1, gutter = jeet-gutter)
   ratios = -reverse(ratios) unless jeet-parent-first is true
   w = 100
   for ratio in ratios
-    g = g / w * 100
+    g = gutter / w * 100
     w = 100 * ratio - g + ratio * g
   return w g
 

jeet/_grid.styl

@@ -1,7 +1,7 @@
 // Columns with Gutters
-column(ratios = 1, offset = 0, cycle = 0, uncycle = 0)
+column(ratios = 1, offset = 0, cycle = 0, uncycle = 0, gutter = jeet-gutter)
   side = -get_layout_direction()
-  column_widths = -get_column(ratios)
+  column_widths = -get_column(ratios, gutter)
   margin_l = margin_last = 0
   margin_r = column_widths[1]
   unless offset == 0
@@ -59,12 +59,12 @@ span(ratio = 1, offset = 0)
   margin-{opposite-position(side)}: (margin_r)%
 
 // Source Ordering
-shift(ratios = 0, col_or_span = column)
+shift(ratios = 0, col_or_span = column, gutter = jeet-gutter)
   side = -get_layout_direction()
   if side == right
     ratios = -replace_nth(ratios, 0, ratios[0] * -1)
   if col_or_span == column or col_or_span == col or col_or_span == c
-    column_widths = -get_column(ratios)
+    column_widths = -get_column(ratios, gutter)
     translate = column_widths[0] + column_widths[1]
   else
     translate = -get_span(ratios)