flint-gs 2.3.6 → 2.3.7

data/stylesheets/flint/mixins/lib/_clearfix.scss

@@ -1,29 +1,29 @@
-///
-/// Micro flint-clearfix
-///
-/// @access private
-///
-/// @link http://nicolasgallagher.com/micro-clearfix-hack/
-///
-/// @requires {Mixin} clearfix - local mixin if available
-///
-/// @group Internal Mixins
-///
-@mixin flint-clearfix {
-    @if mixin-exists("clearfix") {
-        @include clearfix;
-    } @else {
-        zoom: 1;
-
-        &:before, &:after {
-            content: "\0020";
-            display: block;
-            height: 0;
-            overflow: hidden;
-        }
-
-        &:after {
-            clear: both;
-        }
-    }
-}
+///
+/// Micro flint-clearfix
+///
+/// @access private
+///
+/// @link http://nicolasgallagher.com/micro-clearfix-hack/
+///
+/// @requires {Mixin} clearfix - local mixin if available
+///
+/// @group Internal Mixins
+///
+@mixin flint-clearfix {
+    @if mixin-exists("clearfix") {
+        @include clearfix;
+    } @else {
+        zoom: 1;
+
+        &:before, &:after {
+            content: "\0020";
+            display: block;
+            height: 0;
+            overflow: hidden;
+        }
+
+        &:after {
+            clear: both;
+        }
+    }
+}

data/stylesheets/flint/mixins/lib/_container.scss

@@ -1,45 +1,45 @@
-///
-/// Container
-///
-/// @access private
-///
-/// @param {String} $key [null] - alias of individual breakpoint
-/// @param {Number} $i   [null] - index number if called from loop
-///
-/// @group Internal Mixins
-///
-@mixin flint-container($key: null, $i: null) {
-
-    // Check if inside of loop, and if so only output for default
-    @if $i == null or flint-is-default(flint-steal-key($i)) {
-        float: none;
-
-        @if $key {
-            width: flint-calc-width($key, "container");
-        }
-
-        @if flint-get-value("settings", "max-width") {
-            @if flint-is-number(flint-get-value("settings", "max-width")) {
-                max-width: flint-get-value("settings", "max-width");
-            } @else {
-                max-width: max(flint-get-all-breakpoints()...);
-            }
-        }
-
-        @if flint-get-value("settings", "center-container") {
-            margin-right: auto;
-            margin-left: auto;
-        } @else {
-            margin-right: 0;
-            margin-left: 0;
-        }
-
-    // Inside of loop, so only output width
-    } @else {
-        @if $key {
-            width: flint-calc-width($key, "container");
-        }
-    }
-
-    @content;
-}
+///
+/// Container
+///
+/// @access private
+///
+/// @param {String} $key [null] - alias of individual breakpoint
+/// @param {Number} $i   [null] - index number if called from loop
+///
+/// @group Internal Mixins
+///
+@mixin flint-container($key: null, $i: null) {
+
+    // Check if inside of loop, and if so only output for default
+    @if $i == null or flint-is-default(flint-steal-key($i)) {
+        float: none;
+
+        @if $key {
+            width: flint-calc-width($key, "container");
+        }
+
+        @if flint-get-value("settings", "max-width") {
+            @if flint-is-number(flint-get-value("settings", "max-width")) {
+                max-width: flint-get-value("settings", "max-width");
+            } @else {
+                max-width: max(flint-get-all-breakpoints()...);
+            }
+        }
+
+        @if flint-get-value("settings", "center-container") {
+            margin-right: auto;
+            margin-left: auto;
+        } @else {
+            margin-right: 0;
+            margin-left: 0;
+        }
+
+    // Inside of loop, so only output width
+    } @else {
+        @if $key {
+            width: flint-calc-width($key, "container");
+        }
+    }
+
+    @content;
+}

data/stylesheets/flint/mixins/lib/_grid-overlay.scss

@@ -1,73 +1,73 @@
-///
-/// Create encoded SVG grid overlay
-///
-/// @access private
-///
-/// @param {String} $key        - breakpoint alias
-/// @param {Number} $breakpoint - breakpoint value
-/// @param {Number} $columns    - breakpoint column count
-/// @param {Number} $gutter     - gutter value
-///
-/// @group Internal Mixins
-///
-@mixin flint-svg-grid($key, $breakpoint, $columns, $gutter) {
-  $svg: "<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>";
-  $svg: $svg + "<defs>";
-  $svg: $svg + "<linearGradient id='gr' x1='0%' y1='0%' x2='100%' y2='0%'>";
-  $svg: $svg + "<stop offset='0%' style='stop-color: #{$flint-overlay-color};' />";
-  $svg: $svg + "<stop offset='100%' style='stop-color: #{lighten($flint-overlay-color, 10%)};' />";
-  $svg: $svg + "</linearGradient>";
-  $svg: $svg + "</defs>";
-
-  @for $i from 1 through $columns {
-    $x: flint-fluid-width(((($breakpoint / $columns) * ($i - 1)) + $gutter), $breakpoint);
-    $span: flint-fluid-width(((($breakpoint) / $columns)) - ($gutter * 2), $breakpoint);
-    $svg: $svg + "<rect x='#{$x}' fill='url(#gr)' width='#{$span}' height='100%'/>";
-  }
-
-  $svg: $svg + "</svg>";
-
-  @include _($key) {
-    max-width: $breakpoint;
-    background: {
-      image: url("data:image/svg+xml," + flint-html-encode($svg));
-      size: 100% 100%;
-      position: 0 0;
-    }
-  }
-}
-
-///
-/// Apply SVG grid overlay
-///
-/// @access private
-///
-/// @group Internal Mixins
-///
-@mixin flint-overlay-grid {
-  @at-root html {
-    position: relative;
-
-    &:after {
-      transform: translateX(-50%);
-      content: " ";
-      position: absolute;
-      display: block;
-      top: 0;
-      left: 50%;
-      bottom: 0;
-      right: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0.25;
-      z-index: 9999;
-      pointer: {
-        events: none;
-      }
-
-      @each $key, $settings in flint-get-value("breakpoints") {
-        @include flint-svg-grid($key, map-get($settings, "breakpoint"), map-get($settings, "columns"), flint-get-gutter());
-      }
-    }
-  }
-}
+///
+/// Create encoded SVG grid overlay
+///
+/// @access private
+///
+/// @param {String} $key        - breakpoint alias
+/// @param {Number} $breakpoint - breakpoint value
+/// @param {Number} $columns    - breakpoint column count
+/// @param {Number} $gutter     - gutter value
+///
+/// @group Internal Mixins
+///
+@mixin flint-svg-grid($key, $breakpoint, $columns, $gutter) {
+  $svg: "<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>";
+  $svg: $svg + "<defs>";
+  $svg: $svg + "<linearGradient id='gr' x1='0%' y1='0%' x2='100%' y2='0%'>";
+  $svg: $svg + "<stop offset='0%' style='stop-color: #{$flint-overlay-color};' />";
+  $svg: $svg + "<stop offset='100%' style='stop-color: #{lighten($flint-overlay-color, 10%)};' />";
+  $svg: $svg + "</linearGradient>";
+  $svg: $svg + "</defs>";
+
+  @for $i from 1 through $columns {
+    $x: flint-fluid-width(((($breakpoint / $columns) * ($i - 1)) + $gutter), $breakpoint);
+    $span: flint-fluid-width(((($breakpoint) / $columns)) - ($gutter * 2), $breakpoint);
+    $svg: $svg + "<rect x='#{$x}' fill='url(#gr)' width='#{$span}' height='100%'/>";
+  }
+
+  $svg: $svg + "</svg>";
+
+  @include _($key) {
+    max-width: $breakpoint;
+    background: {
+      image: url("data:image/svg+xml," + flint-html-encode($svg));
+      size: 100% 100%;
+      position: 0 0;
+    }
+  }
+}
+
+///
+/// Apply SVG grid overlay
+///
+/// @access private
+///
+/// @group Internal Mixins
+///
+@mixin flint-overlay-grid {
+  @at-root html {
+    position: relative;
+
+    &:after {
+      transform: translateX(-50%);
+      content: " ";
+      position: absolute;
+      display: block;
+      top: 0;
+      left: 50%;
+      bottom: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0.25;
+      z-index: 9999;
+      pointer: {
+        events: none;
+      }
+
+      @each $key, $settings in flint-get-value("breakpoints") {
+        @include flint-svg-grid($key, map-get($settings, "breakpoint"), map-get($settings, "columns"), flint-get-gutter());
+      }
+    }
+  }
+}

data/stylesheets/flint/mixins/lib/_main.scss

@@ -1,1057 +1,1057 @@
-///
-/// # Main API
-///
-/// ----
-///
-/// ## Shorthand
-///
-/// ### Recursive span
-/// Use this if you want identical column spans across all breakpoints. This is of course
-/// relative to each of your breakpoint's column count, so if your lowest breakpoint has
-/// a column count of `4`, then anything above that would likely cause layout issues
-/// for that breakpoint.
-///
-///    ```scss
-///    div {
-///        @include _(2);
-///    }
-///    ```
-///
-/// ### Recursive Span With Identical Context
-/// Use this if your nested context is identical across all breakpoints. The `$context` should
-/// be the span value of the element's parent, or `auto`.
-///
-///    ```scss
-///    div {
-///        @include _(4, 2);
-///    }
-///    ```
-///
-/// ### Recursive Span With Differing Context
-/// Use this if your nested context is not identical across all breakpoints. The `$context`
-/// should be the span value of the element's parent, or `auto`.
-///
-///    ```scss
-///    div {
-///        @include _(4, 8 8 4 4);
-///    }
-///    ```
-///
-/// ### Variable Span
-/// Use this if your content needs different spans across each breakpoint. The order of
-/// operations is the order that your breakpoints are listed in your config (DESC).
-///
-///    ```scss
-///    div {
-///        @include _(8 8 4 4);
-///    }
-///    ```
-///
-/// ### Variable Span With Identical Context
-/// Use this if your nested context is identical across all breakpoints. The `$context`
-/// should be the span value of the element's parent, or `auto`.
-///
-///    ```scss
-///    div {
-///        @include _(4 4 2 2, 4);
-///    }
-///    ```
-///
-/// ### Variable Span With Differing Context
-/// Use this if your nested context is not identical across all breakpoints. The `$context`
-/// should be the span value of the element's parent, or `auto`.
-///
-///    ```scss
-///    div {
-///        @include _(8 8 4 4, 8 8 4 4);
-///    }
-///    ```
-///
-/// ----
-///
-/// ## Longhand
-///
-/// ### Span
-/// Use if you want to define each span by breakpoint `$alias`.
-///
-///    ```scss
-///    div {
-///        @include _(desktop, 2);
-///    }
-///    ```
-///
-/// ### Span With Context
-/// Use if you want to define each span by breakpoint `$alias`. The `$context` should be the span
-/// value of the element's parent, or `auto`.
-///
-///    ```scss
-///    div {
-///        @include _(desktop, 4, 2);
-///    }
-///    ```
-///
-/// ----
-///
-/// ## Automatic Context
-///
-/// You can use `$context: auto`, and Flint will calculate based on the closest parent element's
-/// width instead of the current breakpoint. When using `auto`, Flint falls back from the topmost
-/// selector until one is found that has an instance, and it will calculate its span based on that
-/// instance's width for the current breakpoint. Think of the `auto` option as a self-correcting grid.
-///
-/// When utilizing the `$context` argument, be sure to note the differences in the way the calculations
-/// happen depending on if you use a numerical value or `auto`. When using a numerical value, the span
-/// is calculated against the current breakpoint's value (example: `80em`), then it's divided by its column
-/// count (example: `16`), and then finally, it's multiplied by the passed `$context` value. When using
-/// `auto`, the span is _always_ calculated against the closest parent element's width instead
-/// of the current breakpoint's width.
-///
-/// The difference in output varies, but your gutters will be more accurate across the board if you
-/// consistently use the `auto` option. This option allows you to infinitely nest elements on both fixed
-/// and fluid grids without dealing with the inconsistencies that can be caused by nesting elements that
-/// all use a gutter value of their own. Because the parent element's actual width is always used, the
-/// gutters never become out of sync.
-///
-///    ```scss
-///    .parent {
-///        @include _(4);
-///        .child {
-///            @include _(3, 4);
-///        }
-///    }
-///
-///    // Auto will work
-///    .parent {
-///        @include _(4);
-///        .child {
-///            @include _(3, auto);
-///        }
-///    }
-///
-///    // Will also work
-///    .parent {
-///        @include _(4);
-///    }
-///    .parent .child {
-///        @include _(3, auto);
-///    }
-///
-///    // Will not work, as the child has no relation to
-///    //   the parent within the stylesheet
-///    .parent {
-///        @include _(6);
-///    }
-///    .child {
-///        @include _(3, auto);
-///    }
-///    ```
-///
-/// If you attempt to use this feature with a methodology like BEM, where selectors aren't neccassarily
-/// lists, but instead single strings, you'll notice that Flint can't find return a valid parent for the
-/// element. This is the reason for the `support-syntax` functionality. With it, Flint is able to parse
-/// selectors that are a single string, as opposed to a list, and successfully search for the passed
-/// selector's parent.
-///
-/// ----
-///
-/// ## Modifiers
-///
-/// ### Alpha
-/// Remove the left `$gutter` from the span. Other aliases for `alpha` include: `no-left` and `first`.
-///
-///    ```scss
-///    div {
-///        @include _(12 8 6 4, $gutter: alpha);
-///    }
-///    ```
-///
-/// ### Omega
-/// Remove the right `$gutter` from the span. Other aliases for `omega` include: `no-right` and `last`.
-///
-///    ```scss
-///    div {
-///        @include _(2, $gutter: omega);
-///    }
-///    ````
-///
-/// ### Row
-/// Remove both of the `$gutter` values from the span. Other aliases for `row` include: `none`.
-///
-///    ```scss
-///    div {
-///        @include _(4, $gutter: row);
-///    }
-///    ```
-///
-/// ### Center
-/// Center the current span within it's container element. Outputs auto left and right margins.
-/// This modifier will also remove any float properties on the element.
-///
-///    ```scss
-///    div {
-///        @include _(4, $gutter: center);
-///    }
-///    ```
-///
-/// ### Inside
-/// Sets both `$gutter` values on the inside of the element. Instead of deducting `$gutter*2` out
-/// of the final width, it will deduct `$gutter*4`. Useful for nesting elements inside of other
-/// elements without using `$context: auto`.
-///
-///    ```scss
-///    div {
-///        @include _(16 12 8 4, $gutter: inside);
-///    }
-///    ```
-///
-/// ### Default
-/// Argument to use the default left/right `$gutter` values. Useful for when you want to use a
-/// variable `$gutter` argument. Other aliases for `default` include: `normal` and `regular`.
-///
-///    ```scss
-///    div {
-///        @include _(4, $gutter: default);
-///    }
-///    ```
-///
-/// ### Variable Modifiers
-/// Instead of passing in a recursive `$gutter` value, you may specify a value for each breakpoint exactly
-/// like you would a `$span` argument.
-///
-///    ```scss
-///    div {
-///        @include _(10 8 6 4, $gutter: alpha omega omega default);
-///    }
-///    ```
-///
-/// ----
-///
-/// ## Queries
-///
-/// ### By Alias
-/// Use this type of query to wrap the `@content` in a single query for the specified breakpoint.
-///
-///    ```scss
-///    div {
-///        @include _(desktop) {
-///            property: value;
-///        }
-///    }
-///    ```
-///
-/// ### From, To
-/// Use this type of query to wrap the `@content` in a single query between 2 breakpoints. Make
-/// sure to pass in the breakpoints from lowest to highest.
-///
-///    ```scss
-///    div {
-///        @include _(from tablet to laptop) {
-///            property: value;
-///        }
-///    }
-///    ```
-///
-/// ### Greater Than
-/// Use this type of query to wrap the `@content` in a single query for anything above
-/// the passed breakpoint.
-///
-///    ```scss
-///    div {
-///        @include _(greater than laptop) {
-///            property: value;
-///        }
-///        @include _(5em greater than tablet) {
-///            property: value;
-///        }
-///        @include _(greater than 55em) {
-///            property: value;
-///        }
-///    }
-///    ```
-///
-/// ### Less Than
-/// Use this type of query to wrap the `@content` in a single query for anything below
-/// the passed breakpoint.
-///
-///    ```scss
-///    div {
-///        @include _(less than laptop) {
-///            property: value;
-///        }
-///        @include _(5em less than tablet) {
-///            property: value;
-///        }
-///        @include _(less than 8em) {
-///            property: value;
-///        }
-///    }
-///    ```
-///
-/// ### For
-/// Use this type of query to wrap the `@content` in a single comma delimited query
-/// for each passed `$alias`.
-///
-///    ```scss
-///    div {
-///        @include _(for mobile tablet desktop) {
-///            property: value;
-///        }
-///    }
-///    ```
-///
-/// ----
-///
-/// ## Miscellaneous
-///
-/// ### Clearfix
-/// Given that Flint is float based, you might find yourself needing to use a clearfix. Flint comes
-/// packaged with a micro-clearfix function. _Flint will attempt to use a local mixin named
-/// `clearfix`. If one is not found, it will use it's own._
-///
-///    ```scss
-///    div {
-///        @include _(clear);
-///    }
-///    ```
-///
-/// ### Foundation
-/// A foundation instance will output a global box-sizing: border-box declaration. If you selected
-/// `"border-box-sizing": true`, then it is advised to create a global foundation instance. If you
-/// don't, Flint will automatically apply a foundation instance with your first span declaration.
-/// This should be placed at the root of your stylesheet. _Flint will attempt to use a local
-/// mixin named `box-sizing`. If one is not found, it will use it's own._
-///
-///    ```scss
-///     @include _(foundation);
-///    ```
-///
-/// ### Container
-/// Containers act as a containing row for each individual breakpoint. It uses the `"max-width"`
-/// setting, if set. They do not float, so if you have `"center-container"` set, then it
-/// will also center your element using auto left and right margins. You may combine
-/// container and clear declarations, with arguments separated by a comma.
-///
-///    ```scss
-///    div {
-///        @include _(container);
-///    }
-///    ```
-///
-/// ----
-///
-/// @access public
-///
-/// @param {String|Number|List} $key     [null] - key of breakpoint, or shorthand span
-/// @param {String|Number|List} $span    [null] - value of span for column, or shorthand context
-/// @param {String|Number}      $context [null] - context value of span, or null for shorthand
-/// @param {String|List}        $gutter  [null] - alias for gutter modifier
-///
-/// @throws - Error if list lengths do not match number of breakpoints (when using variable shorthands).
-///
-/// ----
-///
-/// @example scss - Recursive shorthand with no context
-/// _(2)
-///
-/// @example scss - Recursive shorthand with identical context
-/// _(2, 4)
-///
-/// @example scss - Recursive shorthand with differing context
-/// _(1, 2 4 6 8)
-/// _(1, auto)
-///
-/// @example scss - Variable shorthand with no context
-/// _(1 2 3 4)
-///
-/// @example scss - Variable shorthand with identical context
-/// _(1 2 3 4, 4)
-/// _(1 2 3 4, auto)
-///
-/// @example scss - Variable shorthand with differing context
-/// _(4 3 2 1, 8 6 4 2)
-/// _(4 3 2 1, auto)
-///
-/// @example scss - Call by alias with no context
-/// _(desktop, 2)
-///
-/// @example scss - Call by alias with context
-/// _(desktop, 2, 4)
-/// _(desktop, 2, auto)
-///
-/// @example scss - Call $key breakpoint by alias
-/// _(desktop) { ... }
-///
-/// @example scss - From $key breakpoint to infinity
-/// _(from laptop to infinity) { ... }
-///
-/// @example scss - From $key-x breakpoint to $key-y breakpoint
-/// _(from tablet to laptop) { ... }
-///
-/// @example scss - From $num-x to $num-y
-/// _(from 20em to laptop) { ... }
-///
-/// @example scss - Greater than $key breakpoint
-/// _(greater than tablet) { ... }
-///
-/// @example scss - Greater than number
-/// _(greater than 15em) { ... }
-///
-/// @example scss - Number greater than $key breakpoint
-/// _(5em greater than mobile) { ... }
-///
-/// @example scss - Less than $key breakpoint
-/// _(less than laptop) { ... }
-///
-/// @example scss - Less than number
-/// _(less than 35em) { ... }
-///
-/// @example scss - Number less than $key breakpoint
-/// _(10em less than laptop) { ... }
-///
-/// @example scss - For $key-x $key-y $key-z...
-/// _(for mobile tablet desktop) { ... }
-///
-/// @example scss - Clear
-/// _(clear)
-///
-/// @example scss - Foundation
-/// _(foundation)
-///
-/// @example scss - Container
-/// _(container)
-///
-/// ----
-///
-/// @author Ezekiel Gabrielse
-/// @link http://flint.gs
-///
-/// @group Public API
-///
-@mixin _(
-    $key: null,
-    $span: null,
-    $context: null,
-    $gutter: null
-) {
-
-    //
-    // Get unit to modify queries with
-    //
-    $unit: null;
-
-    @if flint-get-config-unit() == "rem" {
-        $unit: flint-to-rem(1px);
-    } @else if flint-get-config-unit() == "em" {
-        $unit: flint-to-em(1px);
-    } @else {
-        $unit: 1;
-    }
-
-    //
-    // Clearfix
-    //
-    @if $key == "clear" or $span == "clear" or $context == "clear" {
-
-        //
-        // Check if key exists as breakpoint, and if so wrap
-        //   in query to not affect other breakpoints
-        //
-        @if map-has-key(map-get($flint, "breakpoints"), $key) {
-
-            @if flint-get-value("settings", "grid") == "fluid" {
-                @if flint-is-highest-breakpoint($key) {
-                    @media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + $unit) ) {
-                        @include flint-clearfix;
-                        @content;
-                    }
-                } @else {
-                    @media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + if(flint-is-lowest-breakpoint($key), 0, $unit)) ) and ( max-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
-                        @include flint-clearfix;
-                        @content;
-                    }
-                }
-            } @else if flint-get-value("settings", "grid") == "fixed" {
-                @if flint-is-highest-breakpoint($key) {
-                    @media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
-                        @include flint-clearfix;
-                        @content;
-                    }
-                } @else {
-                    @media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) and ( max-width: (flint-calc-breakpoint("prev", $key, flint-get-index($key)) - $unit) ) {
-                        @include flint-clearfix;
-                        @content;
-                    }
-                }
-            }
-
-        } @else {
-
-            @include flint-clearfix;
-            @content;
-
-        }
-    }
-
-    //
-    // Apply grid overlay if debug mode is enabled
-    //
-    @if not $flint-overlay and flint-get-value("settings", "debug-mode") {
-        $flint-overlay: true !global;
-        @include flint-overlay-grid;
-    }
-
-    //
-    // Foundation
-    //
-    @if $key == "foundation" {
-
-        // Apply global border-box-sizing if set to true
-        @if flint-get-value("settings", "border-box-sizing") {
-            $flint-foundation: true !global;
-        }
-
-        // Foundation is now globally existant
-        @if $flint-foundation {
-            @at-root *, *:before, *:after {
-                @include flint-box-sizing;
-                @content;
-            }
-        }
-
-    //
-    // Container
-    //
-    } @else if $key == "container" or $span == "container" or $context == "container" {
-
-        // Apply individually if foundation is not set globally, but is set to true in config
-        @if flint-get-value("settings", "border-box-sizing") and not $flint-foundation {
-            @include _("foundation");
-        }
-
-        // Output container for each breakpoint if fixed grid
-        @if $key == "container" and flint-get-value("settings", "grid") == "fixed" {
-
-            @for $i from 1 through length($flint-all-keys) {
-
-                // Set up variables
-                $calc-key: flint-steal-key($i);
-
-                // Key is default, no media queries
-                @if flint-is-default($calc-key) {
-
-                    @include flint-container($calc-key, $i) {
-                        @content;
-                    }
-
-                // Not default, wrap in media queries
-                } @else {
-
-                    // Highest breakpoint? No max-width
-                    @if flint-is-highest-breakpoint($calc-key) {
-
-                        @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
-                            @include flint-container($calc-key, $i) {
-                                @content;
-                            }
-                        }
-
-                    } @else {
-
-                        @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - $unit) ) {
-                            @include flint-container($calc-key, $i) {
-                                @content;
-                            }
-                        }
-
-                    }
-                }
-            }
-
-        // Output container for specific breakpoint if exists
-        } @else if map-has-key(map-get($flint, "breakpoints"), $key) and flint-get-value("settings", "grid") == "fixed" {
-
-            @if flint-is-highest-breakpoint($key) {
-
-                @media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
-                    @include flint-container($key) {
-                        @content;
-                    }
-                }
-
-            } @else {
-
-                @media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) and ( max-width: (flint-calc-breakpoint("prev", $key, flint-get-index($key)) - $unit) ) {
-                    @include flint-container($key) {
-                        @content;
-                    }
-                }
-
-            }
-        } @else if map-has-key(map-get($flint, "breakpoints"), $key) and flint-get-value("settings", "grid") == "fluid" {
-            @if flint-is-highest-breakpoint($key) {
-
-                @media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + $unit) ) {
-                    @include flint-container {
-                        @content;
-                    }
-                }
-
-            } @else {
-
-                @media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + if(flint-is-lowest-breakpoint($key), 0, $unit)) ) and ( max-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
-                    @include flint-container {
-                        @content;
-                    }
-                }
-
-            }
-        } @else {
-            @include flint-container {
-                @content;
-            }
-        }
-
-    //
-    // Create a new instance, add to global instance map
-    //
-    } @else {
-
-        // Apply individually if foundation is not set globally, but is set to true in config
-        @if flint-get-value("settings", "border-box-sizing") and not $flint-foundation {
-            @include _("foundation");
-        }
-
-        //
-        // Recursive shorthand with no context
-        //
-        @if flint-is-number($key) and length($key) == 1 and $span == null
-
-        //
-        // Recursive shorthand with identical context
-        //
-        or flint-is-number($key) and length($key) == 1 and flint-is-number($span) and length($span) == 1
-        or flint-is-number($key) and length($key) == 1 and $span == "auto"
-
-        //
-        // Recursive shorthand with differing context
-        //
-        or flint-is-number($key) and length($key) == 1 and flint-types-in-list($span, "number")
-        or flint-is-number($key) and length($key) == 1 and $span == "auto"
-
-        //
-        // Variable shorthand with no context
-        //
-        or flint-types-in-list($key, "number") and $span == null
-
-        //
-        // Variable shorthand with identical context
-        //
-        or flint-types-in-list($key, "number") and flint-is-number($span) and length($span) == 1
-        or flint-types-in-list($key, "number") and $span == "auto"
-
-        //
-        // Variable shorthand with differing context
-        //
-        or flint-types-in-list($key, "number") and flint-types-in-list($span, "number")
-        or flint-types-in-list($key, "number") and $span == "auto" {
-
-            // Emit erroring for invalid argument lengths
-            @if flint-types-in-list($key, "number") and length($key) != length($flint-all-keys) {
-                @if not $flint-development-mode {
-                    @error "Invalid argument length of #{length($key)} for span. Please provide an argument for each breakpoint in your config (#{length($flint-all-keys)}). Your argument was: #{$key}";
-                }
-            } @else if flint-types-in-list($span, "number") and length($span) != length($flint-all-keys) {
-                @if not $flint-development-mode {
-                    @error "Invalid argument length of #{length($span)} for context. Please provide an argument for each breakpoint in your config (#{length($flint-all-keys)}). Your argument was: #{$span}";
-                }
-            } @else {
-
-                @for $i from 1 through length($flint-all-keys) {
-
-                    $calc-key: flint-steal-key($i);
-                    $calc-span: $key;
-                    $calc-context: $span;
-                    $calc-gutter: $gutter;
-
-                    @if flint-is-default($calc-key) {
-
-                        @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $i) {
-                            @content;
-                        }
-
-                    } @else {
-
-                        @if flint-get-value("settings", "grid") == "fluid" {
-
-                            @if flint-is-highest-breakpoint($calc-key) {
-
-                                @media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + $unit) ) {
-                                    @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $i) {
-                                        @content;
-                                    }
-                                }
-
-                            } @else {
-
-                                @media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-is-lowest-breakpoint($calc-key), 0, $unit)) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
-                                    @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $i) {
-                                        @content;
-                                    }
-                                }
-
-                            }
-
-                        } @else if flint-get-value("settings", "grid") == "fixed" {
-
-                            @if flint-is-highest-breakpoint($calc-key) {
-
-                                @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
-                                    @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $i) {
-                                        @content;
-                                    }
-                                }
-
-                            } @else {
-
-                                @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - $unit) ) {
-                                    @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $i) {
-                                        @content;
-                                    }
-                                }
-
-                            }
-
-                        } @else {
-                            @if not $flint-development-mode {
-                                @error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
-                            }
-                        }
-                    }
-                }
-            }
-
-        //
-        // Call by alias with no context
-        //
-        } @else if flint-is-string($key) and flint-is-number($span) and $context == null
-
-        //
-        // Call by alias with context
-        //
-        or flint-is-string($key) and flint-is-number($span) and flint-is-number($context)
-        or flint-is-string($key) and flint-is-number($span) and $context == "auto" {
-
-            // Throw error for invalid argument lengths
-            @if not map-has-key(map-get($flint, "breakpoints"), $key) {
-                @if not $flint-development-mode {
-                    @error "Invalid argument: #{$key}. Breakpoint does not exist. Please provide a valid argument.";
-                }
-            } @else {
-
-                $calc-key: $key;
-                $calc-span: $span;
-                $calc-context: $context;
-                $calc-gutter: $gutter;
-
-                @if flint-is-default($calc-key) {
-
-                    @include flint-calculate ($calc-key, $calc-span, $calc-context, $calc-gutter) {
-                        @content;
-                    }
-
-                } @else {
-
-                    @if flint-get-value("settings", "grid") == "fluid" {
-
-                        @if flint-is-highest-breakpoint($calc-key) {
-
-                            @media ( min-width: (flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + $unit) ) {
-                                @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter) {
-                                    @content;
-                                }
-                            }
-
-                        } @else {
-
-                            @media ( min-width: (flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-is-lowest-breakpoint($calc-key), 0, $unit)) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) {
-                                @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter) {
-                                    @content;
-                                }
-                            }
-
-                        }
-
-                    } @else if flint-get-value("settings", "grid") == "fixed" {
-
-                        @if flint-is-highest-breakpoint($calc-key) {
-
-                            @media ( min-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) {
-                                @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter) {
-                                    @content;
-                                }
-                            }
-
-                        } @else {
-
-                            @media ( min-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, flint-get-index($calc-key)) - $unit) ) {
-                                @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter) {
-                                    @content;
-                                }
-                            }
-
-                        }
-
-                    } @else {
-                        @if not $flint-development-mode {
-                            @error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
-                        }
-                    }
-                }
-            }
-
-        //
-        // Wrap content in media query
-        //
-        } @else if map-has-key(map-get($flint, "breakpoints"), $key) and $span == null and $context == null
-        or flint-is-list($key) and $span == null and $context == null {
-
-            //
-            // Call $key breakpoint by alias
-            //
-            @if length($key) == 1 {
-
-                @if flint-get-value("settings", "grid") == "fluid" {
-                    @if flint-is-highest-breakpoint($key) {
-                        @media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + $unit) ) {
-                            @content;
-                        }
-                    } @else {
-                        @media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + if(flint-is-lowest-breakpoint($key), 0, $unit)) ) and ( max-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
-                            @content;
-                        }
-                    }
-                } @else if flint-get-value("settings", "grid") == "fixed" {
-                    @if flint-is-highest-breakpoint($key) {
-                        @media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
-                            @content;
-                        }
-                    } @else {
-                        @media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) and ( max-width: (flint-calc-breakpoint("prev", $key, flint-get-index($key)) - $unit) ) {
-                            @content;
-                        }
-                    }
-                } @else {
-                    @if not $flint-development-mode {
-                        @error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
-                    }
-                }
-
-            //
-            // From $key breakpoint to infinity
-            //
-            } @else if flint-types-in-list($key, "string", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" and nth($key, 4) == "infinity" {
-
-                @if flint-get-value("settings", "grid") == "fluid" {
-                    @media ( min-width: (flint-calc-breakpoint("next", nth($key, 2), flint-get-index(nth($key, 2))) + if(flint-is-lowest-breakpoint(nth($key, 2)), 0, $unit)) ) {
-                        @content;
-                    }
-                } @else if flint-get-value("settings", "grid") == "fixed" {
-                    @media ( min-width: flint-calc-breakpoint("alias", nth($key, 2), flint-get-index(nth($key, 2))) ) {
-                        @content;
-                    }
-                } @else {
-                    @if not $flint-development-mode {
-                        @error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
-                    }
-                }
-
-            //
-            // From $key-x breakpoint to $key-y breakpoint
-            //
-            } @else if flint-types-in-list($key, "string", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" {
-
-                @if flint-get-value("settings", "grid") == "fluid" {
-                    @media ( min-width: (flint-calc-breakpoint("next", nth($key, 2), flint-get-index(nth($key, 2))) + if(flint-is-lowest-breakpoint(nth($key, 2)), 0, $unit)) ) and ( max-width: flint-calc-breakpoint("alias", nth($key, 4), flint-get-index(nth($key, 4))) ) {
-                        @content;
-                    }
-                } @else if flint-get-value("settings", "grid") == "fixed" {
-                     @media ( min-width: flint-calc-breakpoint("alias", nth($key, 2), flint-get-index(nth($key, 2))) ) and ( max-width: (flint-calc-breakpoint("prev", nth($key, 4), flint-get-index(nth($key, 4))) - if(flint-is-highest-breakpoint(nth($key, 4)), 0, $unit)) ) {
-                        @content;
-                    }
-                } @else {
-                    @if not $flint-development-mode {
-                        @error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
-                    }
-                }
-
-            //
-            // From $num-x to $num-y
-            //
-            } @else if flint-types-in-list($key, "string" "number" "string" "number", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" {
-                // Make sure passed units match units used in config
-                @if flint-get-config-unit() == unit(nth($key, 2)) and flint-get-config-unit() == unit(nth($key, 4)) {
-                    @media ( min-width: nth($key, 2) ) and ( max-width: nth($key, 4) ) {
-                        @content;
-                    }
-                // Throw error
-                } @else {
-                    @if not $flint-development-mode {
-                        @error "Passed units [#{unit(nth($key, 2))}, #{unit(nth($key, 4))}] do not match the unit used in your config map: #{flint-get-config-unit()}";
-                    }
-                }
-
-            //
-            // Greater than $key breakpoint
-            //
-            } @else if flint-types-in-list($key, "string", 3) and nth($key, 1) == "greater" and nth($key, 2) == "than" {
-
-                @if flint-get-value("settings", "grid") == "fluid" {
-                    @media ( min-width: (flint-calc-breakpoint("alias", nth($key, 3), flint-get-index(nth($key, 3))) + $unit) ) {
-                        @content;
-                    }
-                } @else if flint-get-value("settings", "grid") == "fixed" {
-                    @media ( min-width: flint-calc-breakpoint("prev", nth($key, 3), flint-get-index(nth($key, 3))) ) {
-                        @content;
-                    }
-                } @else {
-                    @if not $flint-development-mode {
-                        @error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
-                    }
-                }
-
-            //
-            // Greater than number
-            //
-            } @else if flint-types-in-list($key, "string" "string" "number", 3) and nth($key, 1) == "greater" and nth($key, 2) == "than" {
-
-                @if flint-get-config-unit() == unit(nth($key, 3)) {
-                    @media ( min-width: nth($key, 3) + $unit ) {
-                        @content;
-                    }
-                } @else {
-                    @if not $flint-development-mode {
-                        @error "Passed units [#{unit(nth($key, 3))}] do not match the unit used in your config map: #{flint-get-config-unit()}";
-                    }
-                }
-
-            //
-            // Number greater than $key breakpoint
-            //
-            } @else if flint-types-in-list($key, "number" "string" "string" "string", 4) and nth($key, 2) == "greater" and nth($key, 3) == "than" {
-
-                @if flint-get-config-unit() == unit(nth($key, 1)) {
-                    @media ( min-width: (flint-calc-breakpoint("alias", nth($key, 4), flint-get-index(nth($key, 4))) + nth($key, 1)) ) {
-                        @content;
-                    }
-                } @else {
-                    @if not $flint-development-mode {
-                        @error "Passed units [#{unit(nth($key, 1))}] do not match the unit used in your config map: #{flint-get-config-unit()}";
-                    }
-                }
-
-            //
-            // Less than $key breakpoint
-            //
-            } @else if flint-types-in-list($key, "string", 3) and nth($key, 1) == "less" and nth($key, 2) == "than" {
-
-                @if flint-get-value("settings", "grid") == "fluid" {
-                    @media ( max-width: flint-calc-breakpoint("next", nth($key, 3), flint-get-index(nth($key, 3))) ) {
-                        @content;
-                    }
-                } @else if flint-get-value("settings", "grid") == "fixed" {
-                    @media ( max-width: (flint-calc-breakpoint("alias", nth($key, 3), flint-get-index(nth($key, 3))) - $unit) ) {
-                        @content;
-                    }
-                } @else {
-                    @if not $flint-development-mode {
-                        @error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
-                    }
-                }
-
-            //
-            // Less than number
-            //
-            } @else if flint-types-in-list($key, "string" "string" "number", 3) and nth($key, 1) == "less" and nth($key, 2) == "than" {
-
-                @if flint-get-config-unit() == unit(nth($key, 3)) {
-                    @media ( max-width: nth($key, 3) - $unit ) {
-                        @content;
-                    }
-                } @else {
-                    @if not $flint-development-mode {
-                        @error "Passed units [#{unit(nth($key, 3))}] do not match the unit used in your config map: #{flint-get-config-unit()}";
-                    }
-                }
-
-            //
-            // Number less than $key breakpoint
-            //
-            } @else if flint-types-in-list($key, "number" "string" "string" "string", 4) and nth($key, 2) == "less" and nth($key, 3) == "than" {
-
-                @if flint-get-config-unit() == unit(nth($key, 1)) {
-                    @media ( max-width: (flint-calc-breakpoint("alias", nth($key, 4), flint-get-index(nth($key, 4))) - nth($key, 1)) ) {
-                        @content;
-                    }
-                } @else {
-                    @if not $flint-development-mode {
-                        @error "Passed units [#{unit(nth($key, 1))}] do not match the unit used in your config map: #{flint-get-config-unit()}";
-                    }
-                }
-
-            //
-            // For $key-x $key-y $key-z
-            //
-            } @else if flint-types-in-list($key, "string") and nth($key, 1) == "for" {
-                // Define empty query list
-                $query: ();
-
-                //
-                // Build out comma delimited query list for each breakpoint
-                //
-                @for $i from 1 through length($key) {
-                    $calc-key: nth($key, $i);
-
-                    @if map-has-key(map-get($flint, "breakpoints"), $calc-key) {
-                        @if flint-get-value("settings", "grid") == "fluid" {
-                            @if flint-is-highest-breakpoint($calc-key) {
-                                $query: append($query, unquote('( min-width: #{(flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + $unit)} )'), "comma");
-                            } @else {
-                                $query: append($query, unquote('( min-width: #{(flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-is-lowest-breakpoint($calc-key), 0, $unit))} ) and ( max-width: #{flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key))} )'), "comma");
-                            }
-                        } @else if flint-get-value("settings", "grid") == "fixed" {
-                            @if flint-is-highest-breakpoint($calc-key) {
-                                $query: append($query, unquote('( min-width: #{flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key))} )'), "comma");
-                            } @else {
-                                $query: append($query, unquote('( min-width: #{flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key))} ) and ( max-width: #{(flint-calc-breakpoint("prev", $calc-key, flint-get-index($calc-key)) - $unit)} )'), "comma");
-                            }
-                        } @else {
-                            @if not $flint-development-mode {
-                                @error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
-                            }
-                        }
-                    } @else {
-                        @if not $calc-key == "for" {
-                            @if not $flint-development-mode {
-                                @error "Invalid argument: #{$calc-key}. Breakpoint does not exist. Please provide a valid argument.";
-                            }
-                        }
-                    }
-                }
-
-                @media #{$query} {
-                  @content;
-                }
-            }
-
-        //
-        // Invalid argument
-        //
-        } @else {
-            @if $key != "clear" {
-                @if not $flint-development-mode {
-                    @error "Invalid argument(s). Please double check and provide a valid argument. If you're calling by alias, please provide a single span argument for your breakpoint. See documentation for additional details.";
-                }
-            }
-        }
-    }
-}
+///
+/// # Main API
+///
+/// ----
+///
+/// ## Shorthand
+///
+/// ### Recursive span
+/// Use this if you want identical column spans across all breakpoints. This is of course
+/// relative to each of your breakpoint's column count, so if your lowest breakpoint has
+/// a column count of `4`, then anything above that would likely cause layout issues
+/// for that breakpoint.
+///
+///    ```scss
+///    div {
+///        @include _(2);
+///    }
+///    ```
+///
+/// ### Recursive Span With Identical Context
+/// Use this if your nested context is identical across all breakpoints. The `$context` should
+/// be the span value of the element's parent, or `auto`.
+///
+///    ```scss
+///    div {
+///        @include _(4, 2);
+///    }
+///    ```
+///
+/// ### Recursive Span With Differing Context
+/// Use this if your nested context is not identical across all breakpoints. The `$context`
+/// should be the span value of the element's parent, or `auto`.
+///
+///    ```scss
+///    div {
+///        @include _(4, 8 8 4 4);
+///    }
+///    ```
+///
+/// ### Variable Span
+/// Use this if your content needs different spans across each breakpoint. The order of
+/// operations is the order that your breakpoints are listed in your config (DESC).
+///
+///    ```scss
+///    div {
+///        @include _(8 8 4 4);
+///    }
+///    ```
+///
+/// ### Variable Span With Identical Context
+/// Use this if your nested context is identical across all breakpoints. The `$context`
+/// should be the span value of the element's parent, or `auto`.
+///
+///    ```scss
+///    div {
+///        @include _(4 4 2 2, 4);
+///    }
+///    ```
+///
+/// ### Variable Span With Differing Context
+/// Use this if your nested context is not identical across all breakpoints. The `$context`
+/// should be the span value of the element's parent, or `auto`.
+///
+///    ```scss
+///    div {
+///        @include _(8 8 4 4, 8 8 4 4);
+///    }
+///    ```
+///
+/// ----
+///
+/// ## Longhand
+///
+/// ### Span
+/// Use if you want to define each span by breakpoint `$alias`.
+///
+///    ```scss
+///    div {
+///        @include _(desktop, 2);
+///    }
+///    ```
+///
+/// ### Span With Context
+/// Use if you want to define each span by breakpoint `$alias`. The `$context` should be the span
+/// value of the element's parent, or `auto`.
+///
+///    ```scss
+///    div {
+///        @include _(desktop, 4, 2);
+///    }
+///    ```
+///
+/// ----
+///
+/// ## Automatic Context
+///
+/// You can use `$context: auto`, and Flint will calculate based on the closest parent element's
+/// width instead of the current breakpoint. When using `auto`, Flint falls back from the topmost
+/// selector until one is found that has an instance, and it will calculate its span based on that
+/// instance's width for the current breakpoint. Think of the `auto` option as a self-correcting grid.
+///
+/// When utilizing the `$context` argument, be sure to note the differences in the way the calculations
+/// happen depending on if you use a numerical value or `auto`. When using a numerical value, the span
+/// is calculated against the current breakpoint's value (example: `80em`), then it's divided by its column
+/// count (example: `16`), and then finally, it's multiplied by the passed `$context` value. When using
+/// `auto`, the span is _always_ calculated against the closest parent element's width instead
+/// of the current breakpoint's width.
+///
+/// The difference in output varies, but your gutters will be more accurate across the board if you
+/// consistently use the `auto` option. This option allows you to infinitely nest elements on both fixed
+/// and fluid grids without dealing with the inconsistencies that can be caused by nesting elements that
+/// all use a gutter value of their own. Because the parent element's actual width is always used, the
+/// gutters never become out of sync.
+///
+///    ```scss
+///    .parent {
+///        @include _(4);
+///        .child {
+///            @include _(3, 4);
+///        }
+///    }
+///
+///    // Auto will work
+///    .parent {
+///        @include _(4);
+///        .child {
+///            @include _(3, auto);
+///        }
+///    }
+///
+///    // Will also work
+///    .parent {
+///        @include _(4);
+///    }
+///    .parent .child {
+///        @include _(3, auto);
+///    }
+///
+///    // Will not work, as the child has no relation to
+///    //   the parent within the stylesheet
+///    .parent {
+///        @include _(6);
+///    }
+///    .child {
+///        @include _(3, auto);
+///    }
+///    ```
+///
+/// If you attempt to use this feature with a methodology like BEM, where selectors aren't neccassarily
+/// lists, but instead single strings, you'll notice that Flint can't find return a valid parent for the
+/// element. This is the reason for the `support-syntax` functionality. With it, Flint is able to parse
+/// selectors that are a single string, as opposed to a list, and successfully search for the passed
+/// selector's parent.
+///
+/// ----
+///
+/// ## Modifiers
+///
+/// ### Alpha
+/// Remove the left `$gutter` from the span. Other aliases for `alpha` include: `no-left` and `first`.
+///
+///    ```scss
+///    div {
+///        @include _(12 8 6 4, $gutter: alpha);
+///    }
+///    ```
+///
+/// ### Omega
+/// Remove the right `$gutter` from the span. Other aliases for `omega` include: `no-right` and `last`.
+///
+///    ```scss
+///    div {
+///        @include _(2, $gutter: omega);
+///    }
+///    ````
+///
+/// ### Row
+/// Remove both of the `$gutter` values from the span. Other aliases for `row` include: `none`.
+///
+///    ```scss
+///    div {
+///        @include _(4, $gutter: row);
+///    }
+///    ```
+///
+/// ### Center
+/// Center the current span within it's container element. Outputs auto left and right margins.
+/// This modifier will also remove any float properties on the element.
+///
+///    ```scss
+///    div {
+///        @include _(4, $gutter: center);
+///    }
+///    ```
+///
+/// ### Inside
+/// Sets both `$gutter` values on the inside of the element. Instead of deducting `$gutter*2` out
+/// of the final width, it will deduct `$gutter*4`. Useful for nesting elements inside of other
+/// elements without using `$context: auto`.
+///
+///    ```scss
+///    div {
+///        @include _(16 12 8 4, $gutter: inside);
+///    }
+///    ```
+///
+/// ### Default
+/// Argument to use the default left/right `$gutter` values. Useful for when you want to use a
+/// variable `$gutter` argument. Other aliases for `default` include: `normal` and `regular`.
+///
+///    ```scss
+///    div {
+///        @include _(4, $gutter: default);
+///    }
+///    ```
+///
+/// ### Variable Modifiers
+/// Instead of passing in a recursive `$gutter` value, you may specify a value for each breakpoint exactly
+/// like you would a `$span` argument.
+///
+///    ```scss
+///    div {
+///        @include _(10 8 6 4, $gutter: alpha omega omega default);
+///    }
+///    ```
+///
+/// ----
+///
+/// ## Queries
+///
+/// ### By Alias
+/// Use this type of query to wrap the `@content` in a single query for the specified breakpoint.
+///
+///    ```scss
+///    div {
+///        @include _(desktop) {
+///            property: value;
+///        }
+///    }
+///    ```
+///
+/// ### From, To
+/// Use this type of query to wrap the `@content` in a single query between 2 breakpoints. Make
+/// sure to pass in the breakpoints from lowest to highest.
+///
+///    ```scss
+///    div {
+///        @include _(from tablet to laptop) {
+///            property: value;
+///        }
+///    }
+///    ```
+///
+/// ### Greater Than
+/// Use this type of query to wrap the `@content` in a single query for anything above
+/// the passed breakpoint.
+///
+///    ```scss
+///    div {
+///        @include _(greater than laptop) {
+///            property: value;
+///        }
+///        @include _(5em greater than tablet) {
+///            property: value;
+///        }
+///        @include _(greater than 55em) {
+///            property: value;
+///        }
+///    }
+///    ```
+///
+/// ### Less Than
+/// Use this type of query to wrap the `@content` in a single query for anything below
+/// the passed breakpoint.
+///
+///    ```scss
+///    div {
+///        @include _(less than laptop) {
+///            property: value;
+///        }
+///        @include _(5em less than tablet) {
+///            property: value;
+///        }
+///        @include _(less than 8em) {
+///            property: value;
+///        }
+///    }
+///    ```
+///
+/// ### For
+/// Use this type of query to wrap the `@content` in a single comma delimited query
+/// for each passed `$alias`.
+///
+///    ```scss
+///    div {
+///        @include _(for mobile tablet desktop) {
+///            property: value;
+///        }
+///    }
+///    ```
+///
+/// ----
+///
+/// ## Miscellaneous
+///
+/// ### Clearfix
+/// Given that Flint is float based, you might find yourself needing to use a clearfix. Flint comes
+/// packaged with a micro-clearfix function. _Flint will attempt to use a local mixin named
+/// `clearfix`. If one is not found, it will use it's own._
+///
+///    ```scss
+///    div {
+///        @include _(clear);
+///    }
+///    ```
+///
+/// ### Foundation
+/// A foundation instance will output a global box-sizing: border-box declaration. If you selected
+/// `"border-box-sizing": true`, then it is advised to create a global foundation instance. If you
+/// don't, Flint will automatically apply a foundation instance with your first span declaration.
+/// This should be placed at the root of your stylesheet. _Flint will attempt to use a local
+/// mixin named `box-sizing`. If one is not found, it will use it's own._
+///
+///    ```scss
+///     @include _(foundation);
+///    ```
+///
+/// ### Container
+/// Containers act as a containing row for each individual breakpoint. It uses the `"max-width"`
+/// setting, if set. They do not float, so if you have `"center-container"` set, then it
+/// will also center your element using auto left and right margins. You may combine
+/// container and clear declarations, with arguments separated by a comma.
+///
+///    ```scss
+///    div {
+///        @include _(container);
+///    }
+///    ```
+///
+/// ----
+///
+/// @access public
+///
+/// @param {String|Number|List} $key     [null] - key of breakpoint, or shorthand span
+/// @param {String|Number|List} $span    [null] - value of span for column, or shorthand context
+/// @param {String|Number}      $context [null] - context value of span, or null for shorthand
+/// @param {String|List}        $gutter  [null] - alias for gutter modifier
+///
+/// @throws - Error if list lengths do not match number of breakpoints (when using variable shorthands).
+///
+/// ----
+///
+/// @example scss - Recursive shorthand with no context
+/// _(2)
+///
+/// @example scss - Recursive shorthand with identical context
+/// _(2, 4)
+///
+/// @example scss - Recursive shorthand with differing context
+/// _(1, 2 4 6 8)
+/// _(1, auto)
+///
+/// @example scss - Variable shorthand with no context
+/// _(1 2 3 4)
+///
+/// @example scss - Variable shorthand with identical context
+/// _(1 2 3 4, 4)
+/// _(1 2 3 4, auto)
+///
+/// @example scss - Variable shorthand with differing context
+/// _(4 3 2 1, 8 6 4 2)
+/// _(4 3 2 1, auto)
+///
+/// @example scss - Call by alias with no context
+/// _(desktop, 2)
+///
+/// @example scss - Call by alias with context
+/// _(desktop, 2, 4)
+/// _(desktop, 2, auto)
+///
+/// @example scss - Call $key breakpoint by alias
+/// _(desktop) { ... }
+///
+/// @example scss - From $key breakpoint to infinity
+/// _(from laptop to infinity) { ... }
+///
+/// @example scss - From $key-x breakpoint to $key-y breakpoint
+/// _(from tablet to laptop) { ... }
+///
+/// @example scss - From $num-x to $num-y
+/// _(from 20em to laptop) { ... }
+///
+/// @example scss - Greater than $key breakpoint
+/// _(greater than tablet) { ... }
+///
+/// @example scss - Greater than number
+/// _(greater than 15em) { ... }
+///
+/// @example scss - Number greater than $key breakpoint
+/// _(5em greater than mobile) { ... }
+///
+/// @example scss - Less than $key breakpoint
+/// _(less than laptop) { ... }
+///
+/// @example scss - Less than number
+/// _(less than 35em) { ... }
+///
+/// @example scss - Number less than $key breakpoint
+/// _(10em less than laptop) { ... }
+///
+/// @example scss - For $key-x $key-y $key-z...
+/// _(for mobile tablet desktop) { ... }
+///
+/// @example scss - Clear
+/// _(clear)
+///
+/// @example scss - Foundation
+/// _(foundation)
+///
+/// @example scss - Container
+/// _(container)
+///
+/// ----
+///
+/// @author Ezekiel Gabrielse
+/// @link http://flint.gs
+///
+/// @group Public API
+///
+@mixin _(
+    $key: null,
+    $span: null,
+    $context: null,
+    $gutter: null
+) {
+
+    //
+    // Get unit to modify queries with
+    //
+    $unit: null;
+
+    @if flint-get-config-unit() == "rem" {
+        $unit: flint-to-rem(1px);
+    } @else if flint-get-config-unit() == "em" {
+        $unit: flint-to-em(1px);
+    } @else {
+        $unit: 1;
+    }
+
+    //
+    // Clearfix
+    //
+    @if $key == "clear" or $span == "clear" or $context == "clear" {
+
+        //
+        // Check if key exists as breakpoint, and if so wrap
+        //   in query to not affect other breakpoints
+        //
+        @if map-has-key(map-get($flint, "breakpoints"), $key) {
+
+            @if flint-get-value("settings", "grid") == "fluid" {
+                @if flint-is-highest-breakpoint($key) {
+                    @media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + $unit) ) {
+                        @include flint-clearfix;
+                        @content;
+                    }
+                } @else {
+                    @media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + if(flint-is-lowest-breakpoint($key), 0, $unit)) ) and ( max-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
+                        @include flint-clearfix;
+                        @content;
+                    }
+                }
+            } @else if flint-get-value("settings", "grid") == "fixed" {
+                @if flint-is-highest-breakpoint($key) {
+                    @media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
+                        @include flint-clearfix;
+                        @content;
+                    }
+                } @else {
+                    @media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) and ( max-width: (flint-calc-breakpoint("prev", $key, flint-get-index($key)) - $unit) ) {
+                        @include flint-clearfix;
+                        @content;
+                    }
+                }
+            }
+
+        } @else {
+
+            @include flint-clearfix;
+            @content;
+
+        }
+    }
+
+    //
+    // Apply grid overlay if debug mode is enabled
+    //
+    @if not $flint-overlay and flint-get-value("settings", "debug-mode") {
+        $flint-overlay: true !global;
+        @include flint-overlay-grid;
+    }
+
+    //
+    // Foundation
+    //
+    @if $key == "foundation" {
+
+        // Apply global border-box-sizing if set to true
+        @if flint-get-value("settings", "border-box-sizing") {
+            $flint-foundation: true !global;
+        }
+
+        // Foundation is now globally existant
+        @if $flint-foundation {
+            @at-root *, *:before, *:after {
+                @include flint-box-sizing;
+                @content;
+            }
+        }
+
+    //
+    // Container
+    //
+    } @else if $key == "container" or $span == "container" or $context == "container" {
+
+        // Apply individually if foundation is not set globally, but is set to true in config
+        @if flint-get-value("settings", "border-box-sizing") and not $flint-foundation {
+            @include _("foundation");
+        }
+
+        // Output container for each breakpoint if fixed grid
+        @if $key == "container" and flint-get-value("settings", "grid") == "fixed" {
+
+            @for $i from 1 through length($flint-all-keys) {
+
+                // Set up variables
+                $calc-key: flint-steal-key($i);
+
+                // Key is default, no media queries
+                @if flint-is-default($calc-key) {
+
+                    @include flint-container($calc-key, $i) {
+                        @content;
+                    }
+
+                // Not default, wrap in media queries
+                } @else {
+
+                    // Highest breakpoint? No max-width
+                    @if flint-is-highest-breakpoint($calc-key) {
+
+                        @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
+                            @include flint-container($calc-key, $i) {
+                                @content;
+                            }
+                        }
+
+                    } @else {
+
+                        @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - $unit) ) {
+                            @include flint-container($calc-key, $i) {
+                                @content;
+                            }
+                        }
+
+                    }
+                }
+            }
+
+        // Output container for specific breakpoint if exists
+        } @else if map-has-key(map-get($flint, "breakpoints"), $key) and flint-get-value("settings", "grid") == "fixed" {
+
+            @if flint-is-highest-breakpoint($key) {
+
+                @media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
+                    @include flint-container($key) {
+                        @content;
+                    }
+                }
+
+            } @else {
+
+                @media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) and ( max-width: (flint-calc-breakpoint("prev", $key, flint-get-index($key)) - $unit) ) {
+                    @include flint-container($key) {
+                        @content;
+                    }
+                }
+
+            }
+        } @else if map-has-key(map-get($flint, "breakpoints"), $key) and flint-get-value("settings", "grid") == "fluid" {
+            @if flint-is-highest-breakpoint($key) {
+
+                @media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + $unit) ) {
+                    @include flint-container {
+                        @content;
+                    }
+                }
+
+            } @else {
+
+                @media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + if(flint-is-lowest-breakpoint($key), 0, $unit)) ) and ( max-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
+                    @include flint-container {
+                        @content;
+                    }
+                }
+
+            }
+        } @else {
+            @include flint-container {
+                @content;
+            }
+        }
+
+    //
+    // Create a new instance, add to global instance map
+    //
+    } @else {
+
+        // Apply individually if foundation is not set globally, but is set to true in config
+        @if flint-get-value("settings", "border-box-sizing") and not $flint-foundation {
+            @include _("foundation");
+        }
+
+        //
+        // Recursive shorthand with no context
+        //
+        @if flint-is-number($key) and length($key) == 1 and $span == null
+
+        //
+        // Recursive shorthand with identical context
+        //
+        or flint-is-number($key) and length($key) == 1 and flint-is-number($span) and length($span) == 1
+        or flint-is-number($key) and length($key) == 1 and $span == "auto"
+
+        //
+        // Recursive shorthand with differing context
+        //
+        or flint-is-number($key) and length($key) == 1 and flint-types-in-list($span, "number")
+        or flint-is-number($key) and length($key) == 1 and $span == "auto"
+
+        //
+        // Variable shorthand with no context
+        //
+        or flint-types-in-list($key, "number") and $span == null
+
+        //
+        // Variable shorthand with identical context
+        //
+        or flint-types-in-list($key, "number") and flint-is-number($span) and length($span) == 1
+        or flint-types-in-list($key, "number") and $span == "auto"
+
+        //
+        // Variable shorthand with differing context
+        //
+        or flint-types-in-list($key, "number") and flint-types-in-list($span, "number")
+        or flint-types-in-list($key, "number") and $span == "auto" {
+
+            // Emit erroring for invalid argument lengths
+            @if flint-types-in-list($key, "number") and length($key) != length($flint-all-keys) {
+                @if not $flint-development-mode {
+                    @error "Invalid argument length of #{length($key)} for span. Please provide an argument for each breakpoint in your config (#{length($flint-all-keys)}). Your argument was: #{$key}";
+                }
+            } @else if flint-types-in-list($span, "number") and length($span) != length($flint-all-keys) {
+                @if not $flint-development-mode {
+                    @error "Invalid argument length of #{length($span)} for context. Please provide an argument for each breakpoint in your config (#{length($flint-all-keys)}). Your argument was: #{$span}";
+                }
+            } @else {
+
+                @for $i from 1 through length($flint-all-keys) {
+
+                    $calc-key: flint-steal-key($i);
+                    $calc-span: $key;
+                    $calc-context: $span;
+                    $calc-gutter: $gutter;
+
+                    @if flint-is-default($calc-key) {
+
+                        @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $i) {
+                            @content;
+                        }
+
+                    } @else {
+
+                        @if flint-get-value("settings", "grid") == "fluid" {
+
+                            @if flint-is-highest-breakpoint($calc-key) {
+
+                                @media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + $unit) ) {
+                                    @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $i) {
+                                        @content;
+                                    }
+                                }
+
+                            } @else {
+
+                                @media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-is-lowest-breakpoint($calc-key), 0, $unit)) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
+                                    @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $i) {
+                                        @content;
+                                    }
+                                }
+
+                            }
+
+                        } @else if flint-get-value("settings", "grid") == "fixed" {
+
+                            @if flint-is-highest-breakpoint($calc-key) {
+
+                                @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
+                                    @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $i) {
+                                        @content;
+                                    }
+                                }
+
+                            } @else {
+
+                                @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - $unit) ) {
+                                    @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $i) {
+                                        @content;
+                                    }
+                                }
+
+                            }
+
+                        } @else {
+                            @if not $flint-development-mode {
+                                @error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
+                            }
+                        }
+                    }
+                }
+            }
+
+        //
+        // Call by alias with no context
+        //
+        } @else if flint-is-string($key) and flint-is-number($span) and $context == null
+
+        //
+        // Call by alias with context
+        //
+        or flint-is-string($key) and flint-is-number($span) and flint-is-number($context)
+        or flint-is-string($key) and flint-is-number($span) and $context == "auto" {
+
+            // Throw error for invalid argument lengths
+            @if not map-has-key(map-get($flint, "breakpoints"), $key) {
+                @if not $flint-development-mode {
+                    @error "Invalid argument: #{$key}. Breakpoint does not exist. Please provide a valid argument.";
+                }
+            } @else {
+
+                $calc-key: $key;
+                $calc-span: $span;
+                $calc-context: $context;
+                $calc-gutter: $gutter;
+
+                @if flint-is-default($calc-key) {
+
+                    @include flint-calculate ($calc-key, $calc-span, $calc-context, $calc-gutter) {
+                        @content;
+                    }
+
+                } @else {
+
+                    @if flint-get-value("settings", "grid") == "fluid" {
+
+                        @if flint-is-highest-breakpoint($calc-key) {
+
+                            @media ( min-width: (flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + $unit) ) {
+                                @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter) {
+                                    @content;
+                                }
+                            }
+
+                        } @else {
+
+                            @media ( min-width: (flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-is-lowest-breakpoint($calc-key), 0, $unit)) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) {
+                                @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter) {
+                                    @content;
+                                }
+                            }
+
+                        }
+
+                    } @else if flint-get-value("settings", "grid") == "fixed" {
+
+                        @if flint-is-highest-breakpoint($calc-key) {
+
+                            @media ( min-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) {
+                                @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter) {
+                                    @content;
+                                }
+                            }
+
+                        } @else {
+
+                            @media ( min-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, flint-get-index($calc-key)) - $unit) ) {
+                                @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter) {
+                                    @content;
+                                }
+                            }
+
+                        }
+
+                    } @else {
+                        @if not $flint-development-mode {
+                            @error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
+                        }
+                    }
+                }
+            }
+
+        //
+        // Wrap content in media query
+        //
+        } @else if map-has-key(map-get($flint, "breakpoints"), $key) and $span == null and $context == null
+        or flint-is-list($key) and $span == null and $context == null {
+
+            //
+            // Call $key breakpoint by alias
+            //
+            @if length($key) == 1 {
+
+                @if flint-get-value("settings", "grid") == "fluid" {
+                    @if flint-is-highest-breakpoint($key) {
+                        @media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + $unit) ) {
+                            @content;
+                        }
+                    } @else {
+                        @media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + if(flint-is-lowest-breakpoint($key), 0, $unit)) ) and ( max-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
+                            @content;
+                        }
+                    }
+                } @else if flint-get-value("settings", "grid") == "fixed" {
+                    @if flint-is-highest-breakpoint($key) {
+                        @media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
+                            @content;
+                        }
+                    } @else {
+                        @media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) and ( max-width: (flint-calc-breakpoint("prev", $key, flint-get-index($key)) - $unit) ) {
+                            @content;
+                        }
+                    }
+                } @else {
+                    @if not $flint-development-mode {
+                        @error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
+                    }
+                }
+
+            //
+            // From $key breakpoint to infinity
+            //
+            } @else if flint-types-in-list($key, "string", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" and nth($key, 4) == "infinity" {
+
+                @if flint-get-value("settings", "grid") == "fluid" {
+                    @media ( min-width: (flint-calc-breakpoint("next", nth($key, 2), flint-get-index(nth($key, 2))) + if(flint-is-lowest-breakpoint(nth($key, 2)), 0, $unit)) ) {
+                        @content;
+                    }
+                } @else if flint-get-value("settings", "grid") == "fixed" {
+                    @media ( min-width: flint-calc-breakpoint("alias", nth($key, 2), flint-get-index(nth($key, 2))) ) {
+                        @content;
+                    }
+                } @else {
+                    @if not $flint-development-mode {
+                        @error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
+                    }
+                }
+
+            //
+            // From $key-x breakpoint to $key-y breakpoint
+            //
+            } @else if flint-types-in-list($key, "string", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" {
+
+                @if flint-get-value("settings", "grid") == "fluid" {
+                    @media ( min-width: (flint-calc-breakpoint("next", nth($key, 2), flint-get-index(nth($key, 2))) + if(flint-is-lowest-breakpoint(nth($key, 2)), 0, $unit)) ) and ( max-width: flint-calc-breakpoint("alias", nth($key, 4), flint-get-index(nth($key, 4))) ) {
+                        @content;
+                    }
+                } @else if flint-get-value("settings", "grid") == "fixed" {
+                     @media ( min-width: flint-calc-breakpoint("alias", nth($key, 2), flint-get-index(nth($key, 2))) ) and ( max-width: (flint-calc-breakpoint("prev", nth($key, 4), flint-get-index(nth($key, 4))) - if(flint-is-highest-breakpoint(nth($key, 4)), 0, $unit)) ) {
+                        @content;
+                    }
+                } @else {
+                    @if not $flint-development-mode {
+                        @error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
+                    }
+                }
+
+            //
+            // From $num-x to $num-y
+            //
+            } @else if flint-types-in-list($key, "string" "number" "string" "number", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" {
+                // Make sure passed units match units used in config
+                @if flint-get-config-unit() == unit(nth($key, 2)) and flint-get-config-unit() == unit(nth($key, 4)) {
+                    @media ( min-width: nth($key, 2) ) and ( max-width: nth($key, 4) ) {
+                        @content;
+                    }
+                // Throw error
+                } @else {
+                    @if not $flint-development-mode {
+                        @error "Passed units [#{unit(nth($key, 2))}, #{unit(nth($key, 4))}] do not match the unit used in your config map: #{flint-get-config-unit()}";
+                    }
+                }
+
+            //
+            // Greater than $key breakpoint
+            //
+            } @else if flint-types-in-list($key, "string", 3) and nth($key, 1) == "greater" and nth($key, 2) == "than" {
+
+                @if flint-get-value("settings", "grid") == "fluid" {
+                    @media ( min-width: (flint-calc-breakpoint("alias", nth($key, 3), flint-get-index(nth($key, 3))) + $unit) ) {
+                        @content;
+                    }
+                } @else if flint-get-value("settings", "grid") == "fixed" {
+                    @media ( min-width: flint-calc-breakpoint("prev", nth($key, 3), flint-get-index(nth($key, 3))) ) {
+                        @content;
+                    }
+                } @else {
+                    @if not $flint-development-mode {
+                        @error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
+                    }
+                }
+
+            //
+            // Greater than number
+            //
+            } @else if flint-types-in-list($key, "string" "string" "number", 3) and nth($key, 1) == "greater" and nth($key, 2) == "than" {
+
+                @if flint-get-config-unit() == unit(nth($key, 3)) {
+                    @media ( min-width: nth($key, 3) + $unit ) {
+                        @content;
+                    }
+                } @else {
+                    @if not $flint-development-mode {
+                        @error "Passed units [#{unit(nth($key, 3))}] do not match the unit used in your config map: #{flint-get-config-unit()}";
+                    }
+                }
+
+            //
+            // Number greater than $key breakpoint
+            //
+            } @else if flint-types-in-list($key, "number" "string" "string" "string", 4) and nth($key, 2) == "greater" and nth($key, 3) == "than" {
+
+                @if flint-get-config-unit() == unit(nth($key, 1)) {
+                    @media ( min-width: (flint-calc-breakpoint("alias", nth($key, 4), flint-get-index(nth($key, 4))) + nth($key, 1)) ) {
+                        @content;
+                    }
+                } @else {
+                    @if not $flint-development-mode {
+                        @error "Passed units [#{unit(nth($key, 1))}] do not match the unit used in your config map: #{flint-get-config-unit()}";
+                    }
+                }
+
+            //
+            // Less than $key breakpoint
+            //
+            } @else if flint-types-in-list($key, "string", 3) and nth($key, 1) == "less" and nth($key, 2) == "than" {
+
+                @if flint-get-value("settings", "grid") == "fluid" {
+                    @media ( max-width: flint-calc-breakpoint("next", nth($key, 3), flint-get-index(nth($key, 3))) ) {
+                        @content;
+                    }
+                } @else if flint-get-value("settings", "grid") == "fixed" {
+                    @media ( max-width: (flint-calc-breakpoint("alias", nth($key, 3), flint-get-index(nth($key, 3))) - $unit) ) {
+                        @content;
+                    }
+                } @else {
+                    @if not $flint-development-mode {
+                        @error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
+                    }
+                }
+
+            //
+            // Less than number
+            //
+            } @else if flint-types-in-list($key, "string" "string" "number", 3) and nth($key, 1) == "less" and nth($key, 2) == "than" {
+
+                @if flint-get-config-unit() == unit(nth($key, 3)) {
+                    @media ( max-width: nth($key, 3) - $unit ) {
+                        @content;
+                    }
+                } @else {
+                    @if not $flint-development-mode {
+                        @error "Passed units [#{unit(nth($key, 3))}] do not match the unit used in your config map: #{flint-get-config-unit()}";
+                    }
+                }
+
+            //
+            // Number less than $key breakpoint
+            //
+            } @else if flint-types-in-list($key, "number" "string" "string" "string", 4) and nth($key, 2) == "less" and nth($key, 3) == "than" {
+
+                @if flint-get-config-unit() == unit(nth($key, 1)) {
+                    @media ( max-width: (flint-calc-breakpoint("alias", nth($key, 4), flint-get-index(nth($key, 4))) - nth($key, 1)) ) {
+                        @content;
+                    }
+                } @else {
+                    @if not $flint-development-mode {
+                        @error "Passed units [#{unit(nth($key, 1))}] do not match the unit used in your config map: #{flint-get-config-unit()}";
+                    }
+                }
+
+            //
+            // For $key-x $key-y $key-z
+            //
+            } @else if flint-types-in-list($key, "string") and nth($key, 1) == "for" {
+                // Define empty query list
+                $query: ();
+
+                //
+                // Build out comma delimited query list for each breakpoint
+                //
+                @for $i from 1 through length($key) {
+                    $calc-key: nth($key, $i);
+
+                    @if map-has-key(map-get($flint, "breakpoints"), $calc-key) {
+                        @if flint-get-value("settings", "grid") == "fluid" {
+                            @if flint-is-highest-breakpoint($calc-key) {
+                                $query: append($query, unquote('( min-width: #{(flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + $unit)} )'), "comma");
+                            } @else {
+                                $query: append($query, unquote('( min-width: #{(flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-is-lowest-breakpoint($calc-key), 0, $unit))} ) and ( max-width: #{flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key))} )'), "comma");
+                            }
+                        } @else if flint-get-value("settings", "grid") == "fixed" {
+                            @if flint-is-highest-breakpoint($calc-key) {
+                                $query: append($query, unquote('( min-width: #{flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key))} )'), "comma");
+                            } @else {
+                                $query: append($query, unquote('( min-width: #{flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key))} ) and ( max-width: #{(flint-calc-breakpoint("prev", $calc-key, flint-get-index($calc-key)) - $unit)} )'), "comma");
+                            }
+                        } @else {
+                            @if not $flint-development-mode {
+                                @error "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid, fixed";
+                            }
+                        }
+                    } @else {
+                        @if not $calc-key == "for" {
+                            @if not $flint-development-mode {
+                                @error "Invalid argument: #{$calc-key}. Breakpoint does not exist. Please provide a valid argument.";
+                            }
+                        }
+                    }
+                }
+
+                @media #{$query} {
+                  @content;
+                }
+            }
+
+        //
+        // Invalid argument
+        //
+        } @else {
+            @if $key != "clear" {
+                @if not $flint-development-mode {
+                    @error "Invalid argument(s). Please double check and provide a valid argument. If you're calling by alias, please provide a single span argument for your breakpoint. See documentation for additional details.";
+                }
+            }
+        }
+    }
+}