Update documentation and bump version

docs/_includes/documentation/mixins/collapse.html

@@ -0,0 +1,45 @@
+---
+
+### @mixin collapse
+
+Use as direct child of `@include span` element. Make sure there's no padding on the parent element
+
+#### Arguments
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `sides` | `string` | `both` | Choose which side(s) to collapse gutter. Defaults to 'both' |
+| `multiplier` | `number` | `1` | Defaults to `1` and can be set to any number dividable by `0.5` |
+| `fromto` | `list` | `false to false` | Set starting and stopping breakpoints. Accepts single value: `@include collapse(both, 1, $beta)` or list: `@include collapse(both, 1, $beta to $charlie)`. The second (to) value only means that Illusion is not adding more media queries. The styling is not being reset on this 'to' breakpoint |
+| `gutter` | `string` | `false` | Custom gutter value for Illusion to calculate (`calc()`) with. |
+
+#### SCSS
+
+{% highlight css %}
+.foo {
+  @include collapse();
+}
+{% endhighlight %}
+
+#### CSS
+
+{% highlight css %}
+.foo {
+  margin-right: calc((-1 * 1) * 16px);
+  margin-left: calc((-1 * 1) * 16px);
+}
+
+@media screen and (min-width: 560px) {
+  .foo {
+    margin-right: calc((-1 * 1) * 24px);
+    margin-left: calc((-1 * 1) * 24px);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .foo {
+    margin-right: calc((-1 * 1) * 32px);
+    margin-left: calc((-1 * 1) * 32px);
+  }
+}
+{% endhighlight %}

docs/_includes/documentation/mixins/container.html

@@ -8,7 +8,7 @@
 
 | Name | Type | Default | Description |
 | ---- | ---- | ------- | ----------- |
-| `flexbox` | `boolean` | `false` | Enables flexbox on container. For example `@include container(true);` will set `display: flex` and `flex-wrap: wrap` |
+| `type` | `string` | `$illusion-grid-container-type` | Choose between clearfix (for floats) or flexbox container. Defaults to clearfix container. |
 | `alignment` | `string` | `center` | Align container to left, center or right |
 
 #### Dependencies

docs/_includes/documentation/mixins/gallery.html

@@ -10,9 +10,10 @@
 | ---- | ---- | ------- | ----------- |
 | `span` | `list` | - | Set how many columns should be spanned. Accepts single value: `@include gallery(6)` or list: `@include gallery(4 of 12)`. Amount of columns defaults to `$illusion-grid-container` |
 | `fromto` | `list` | `false to false` | Set starting and stopping breakpoints. Accepts single value: `@include gallery(6, $beta)` or list: `@include gallery(6, $beta to $charlie)`. The second (to) value only means that Illusion is not adding more media queries. The styling is not being reset on this 'to' breakpoint |
-| `amount` | `number` | `1` | Gutter amount. defaults to `1` and can be set to `0.5`, `1` or `2` |
+| `multiplier` | `number` | `1` | Gutter multiplier. defaults to `1` and can be set to any number dividable by `0.5` |
 | `bottom` | `boolean` | `true` | Set to `false` if you don't want bottom gutters |
-| `defaultProperties` | `boolean` | `true` | If set to `false` the mixin won't add the `float` and `margin` property on `:first-child` and `:last-child` for cleaner code |
+| `defaults` | `boolean` | `true` | If set to `false` the mixin won't add the `float` and `margin` property on `:first-child` and `:last-child` for cleaner code |
+| `gutter` | `string` | `false` | Custom gutter value for Illusion to calculate (`calc()`) with. |
 
 #### SCSS
 
@@ -108,10 +109,10 @@
 // GOOD
 .foo {
     @include gallery(6, 0 to $beta);
-    @include gallery(4, $beta to $charlie, $defaultProperties: false);
-    @include gallery(3, $charlie to $delta, $defaultProperties: false);
+    @include gallery(4, $beta to $charlie, $defaults: false);
+    @include gallery(3, $charlie to $delta, $defaults: false);
 }
 
-// $defaultProperties set to false on all except first mixin
+// $defaults set to false on all except first mixin
 // While this is not mandatory it is adviced to minimize compiled code
 {% endhighlight %}

docs/_includes/documentation/mixins/row.html

@@ -0,0 +1,30 @@
+---
+
+### @mixin row
+
+#### Arguments
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `type` | `string` | `$illusion-grid-container-type` | Choose between clearfix (for floats) or flexbox container. Defaults to clearfix container. |
+
+#### SCSS
+
+{% highlight css %}
+.foo {
+  @include row();
+}
+{% endhighlight %}
+
+#### CSS
+
+{% highlight css %}
+.foo:before, .foo:after {
+  display: table;
+  content: " ";
+}
+
+.foo:after {
+  clear: both;
+}
+{% endhighlight %}

docs/_includes/documentation/mixins/shift.html

@@ -10,8 +10,9 @@
 | ---- | ---- | ------- | ----------- |
 | `shift` | `list` | - | Set how many columns should be shifted. Accepts single value: `@include shift(2)` or list: `@include shift(3 of 12)`. Amount of columns defaults to `$illusion-grid-container`  |
 | `fromto` | `list` | `false to false` | Set starting and stopping breakpoints. Accepts single value: `@include shift(6, $beta)` or list: `@include shift(6, $beta to $charlie)`. The second (to) value only means that Illusion is not adding more media queries. The styling is not being reset on this 'to' breakpoint |
-| `amount` | `number` | `1` | Gutter amount. defaults to `1` and can be set to `0.5`, `1` or `2` |
-| `defaultProperties` | `boolean` | `true` | If set to `false` the mixin won't add the `position` property |
+| `multiplier` | `number` | `1` | Gutter multiplier. defaults to `1` and can be set to any number dividable by `0.5` |
+| `defaults` | `boolean` | `true` | If set to `false` the mixin won't add the `position` property |
+| `gutter` | `string` | `false` | Custom gutter value for Illusion to calculate (`calc()`) with. |
 
 #### SCSS
 
@@ -58,10 +59,10 @@
 // GOOD
 .foo {
     @include shift(6, 0 to $beta);
-    @include shift(4, $beta to $charlie, $defaultProperties: false);
-    @include shift(3, $charlie to $delta, $defaultProperties: false);
+    @include shift(4, $beta to $charlie, $defaults: false);
+    @include shift(3, $charlie to $delta, $defaults: false);
 }
 
-// $defaultProperties set to false on all except first mixin
+// $defaults set to false on all except first mixin
 // While this is not mandatory it is adviced to minimize compiled code
 {% endhighlight %}

docs/_includes/documentation/mixins/spacing.html

@@ -10,7 +10,7 @@
 | ---- | ---- | ------- | ----------- |
 | `sides` | `list` | `all minus none` | Accepts `all minus [top, right, bottom, left]`, `vertical`, `horizontal`, `top`, `right`, `bottom` and `left` |
 | `type` | `text` | `padding` | Accepts `padding` or `margin` |
-| `amount` | `number` | `1` | Spacing multiplier. Accepts `0.5`, `1` and `2`. |
+| `multiplier` | `number` | `1` | Defaults to `1` and can be set to any number dividable by `0.5` |
 | `fromto` | `list` | `false to false` | Set starting and stopping breakpoints. Accepts single value: `@include spacing(6, padding, 1, $beta)` or list: `@include spacing(6, padding, 1, $beta to $charlie)`. The second (to) value only means that Illusion is not adding more media queries. The styling is not being reset on this 'to' breakpoint |
 | `lastchildnone` | `boolen` | `false` | If set to true `:last-child` will not have the set spacing |
 | `minus` | `number` | `0` | Substract an amount of pixels off of the spacing. If an element has a 2 pixel border you'd best substract 2 pixels form the spacing to stay inside the 8 pixel grid |

docs/_includes/documentation/mixins/span.html

@@ -10,10 +10,11 @@
 | ---- | ---- | ------- | ----------- |
 | `span` | `list` | - | Set how many columns should be spanned. Accepts single value: `@include span(6)` or list: `@include span(4 of 12)`. Amount of columns defaults to `$illusion-grid-container` |
 | `fromto` | `list` | `false to false` | Set starting and stopping breakpoints. Accepts single value: `@include span(6, $beta)` or list: `@include span(6, $beta to $charlie)`. The second (to) value only means that Illusion is not adding more media queries. The styling is not being reset on this 'to' breakpoint. |
-| `amount` | `number` | `1` | Gutter amount. defaults to `1` and can be set to `0.5`, `1` or `2` |
+| `multiplier` | `number` | `1` | Gutter multiplier. defaults to `1` and can be set to any number dividable by `0.5` |
 | `bottom` | `boolean` | `false` | When set to `true` it also adds a bottom gutter |
-| `defaultProperties` | `boolean` | `true` | If set to `false` the mixin won't add the `float` and `margin` property on `:first-child` and `:last-child` |
+| `defaults` | `boolean` | `true` | If set to `false` the mixin won't add the `float` and `margin` property on `:first-child` and `:last-child` |
 | `omega` | `number` | `null` | Used by the `gallery mixin` |
+| `gutter` | `string` | `false` | Custom gutter value for Illusion to calculate (`calc()`) with. |
 
 #### SCSS
 
@@ -70,10 +71,10 @@
 // GOOD
 .foo {
     @include span(6, 0 to $beta);
-    @include span(4, $beta to $charlie, $defaultProperties: false);
-    @include span(3, $charlie to $delta, $defaultProperties: false);
+    @include span(4, $beta to $charlie, $defaults: false);
+    @include span(3, $charlie to $delta, $defaults: false);
 }
 
-// $defaultProperties set to false on all except first mixin
+// $defaults set to false on all except first mixin
 // While this is not mandatory it is adviced to minimize compiled code
 {% endhighlight %}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "illusion",
   "description": "Illusion simplifies the creation of things for the web.",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "homepage": "https://illusion.timble.net",
   "author": "The Illusion Authors (https://github.com/timble/illusion/graphs/contributors)",
   "repository": {
@@ -13,7 +13,6 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "bower": "^1.8.0",
     "caniuse-db": "*",
     "grunt": "^1.0.1",
     "grunt-autoprefixer": "^3.0.*",

scss/tools/functions/_spacing.scss

@@ -4,7 +4,7 @@
 
   // Give a warning when $multiplier is not dividable by 0.5
   @if ($multiplier % 0.5 != 0) {
-    @warn 'The `amount` in the `span` mixin is designed to work best with a number dividable by 0.5';
+    @warn 'The `multiplier` in the `spacing` function is designed to work best with a number dividable by 0.5';
   }
 
   // Set default gutter to smallest one

scss/tools/mixins/_collapse.scss

@@ -7,7 +7,7 @@
 
   // Give a warning when $multiplier is not dividable by 0.5
   @if ($multiplier % 0.5 != 0) {
-    @warn 'The `amount` in the `span` mixin is designed to work best with a number dividable by 0.5';
+    @warn 'The `multiplier` in the `collapse` mixin is designed to work best with a number dividable by 0.5';
   }
 
   // Get new SCSS map

scss/tools/mixins/_shift.scss

@@ -4,7 +4,7 @@
 
   // Give a warning when $multiplier is not dividable by 0.5
   @if ($multiplier % 0.5 != 0) {
-    @warn 'The `amount` in the `span` mixin is designed to work best with a number dividable by 0.5';
+    @warn 'The `multiplier` in the `shift` mixin is designed to work best with a number dividable by 0.5';
   }
 
   // Get new SCSS map

scss/tools/mixins/_spacing.scss

@@ -6,7 +6,7 @@
 
   // Give a warning when $multiplier is not dividable by 0.5
   @if ($multiplier % 0.5 != 0) {
-    @warn 'The `amount` in the `span` mixin is designed to work best with a number dividable by 0.5';
+    @warn 'The `multiplier` in the `spacing` mixin is designed to work best with a number dividable by 0.5';
   }
 
   @if ($type != padding and $type != margin) {

scss/tools/mixins/_span.scss

@@ -4,7 +4,7 @@
 
   // Give a warning when $multiplier is not dividable by 0.5
   @if ($multiplier % 0.5 != 0) {
-    @warn 'The `amount` in the `span` mixin is designed to work best with a number dividable by 0.5';
+    @warn 'The `multiplier` in the `span` mixin is designed to work best with a number dividable by 0.5';
   }
 
   // Get new SCSS map