jekyll-theme-basically-basic 1.3.1 → 1.4.0

data/_sass/basically-basic/vendor/susy/plugins/svg-grid/_svg-settings.scss

@@ -1,14 +1,14 @@
-// SVG Settings
-// ============
-
-
-// Susy SVG Defaults
-// =================
-/// This plugin adds the `svg-grid-colors` property
-/// and default value to `$_susy-defaults` —
-/// you can override that value in `$susy`
-/// or any other grid settings map.
-/// @group plugin_svg-grid
-$_susy-defaults: map-merge((
-    'svg-grid-colors': hsla(120, 50%, 50%, 0.5) hsla(120, 50%, 75%, 0.5),
-  ), $_susy-defaults);
+// SVG Settings
+// ============
+
+
+// Susy SVG Defaults
+// =================
+/// This plugin adds the `svg-grid-colors` property
+/// and default value to `$_susy-defaults` —
+/// you can override that value in `$susy`
+/// or any other grid settings map.
+/// @group plugin_svg-grid
+$_susy-defaults: map-merge((
+    'svg-grid-colors': hsla(120, 50%, 50%, 0.5) hsla(120, 50%, 75%, 0.5),
+  ), $_susy-defaults);

data/_sass/basically-basic/vendor/susy/plugins/svg-grid/_svg-unprefix.scss

@@ -1,18 +1,18 @@
-// Unprefix Susy SVG Grid
-// ======================
-
-
-
-// SVG Grid
-// --------
-/// Un-prefixed alias for `susy-svg-grid`
-///
-/// @group plugin_svg-grid
-/// @alias susy-svg-grid
-@function svg-grid(
-  $grid: $susy,
-  $colors: susy-get('svg-grid-colors'),
-  $offset: null
-) {
-  @return susy-svg-grid($grid, $colors, $offset);
-}
+// Unprefix Susy SVG Grid
+// ======================
+
+
+
+// SVG Grid
+// --------
+/// Un-prefixed alias for `susy-svg-grid`
+///
+/// @group plugin_svg-grid
+/// @alias susy-svg-grid
+@function svg-grid(
+  $grid: $susy,
+  $colors: susy-get('svg-grid-colors'),
+  $offset: null
+) {
+  @return susy-svg-grid($grid, $colors, $offset);
+}

data/_sass/basically-basic/vendor/susy/plugins/svg-grid/_svg-utilities.scss

@@ -1,133 +1,133 @@
-// SVG Utilities
-// =============
-
-
-
-// SVG Validate Units
-// ------------------
-/// Make sure a length is supported in svg
-///
-/// @access private
-///
-/// @param {Length} $length -
-///   The length to validate
-/// @param {String} $name [null] -
-///   Optional name of length origin,
-///   for error reporting
-///
-/// @return {Length} -
-///   An svg-validated length, or comparable valid length
-@function _susy-svg-validate-units(
-  $length,
-  $name: null
-) {
-  $_svg-units: ('em', 'ex', 'px', 'pt', 'pc', 'cm', 'mm', 'in', '%');
-  $string: type-of($length) == 'string';
-
-  @if ($length == 0) or ($string) or index($_svg-units, unit($length)) {
-    @return $length;
-  }
-
-  @return _susy-error(
-    '`#{unit($length)}` #{$name} units are not supported in SVG',
-    '_susy-svg-validate-units');
-}
-
-
-
-// SVG Rect
-// --------
-/// Build a single svg rectangle
-///
-/// @access private
-///
-/// @param {Length} $x -
-///   Horizontal position for the rectangle
-/// @param {Length} $width -
-///   Width of the rectangle
-/// @param {Length} $offset [null] -
-///   Offset the rectangle, to account for edge gutters
-///
-/// @return {String} -
-///   Escaped string representing one svg rectangle
-@function _susy-svg-rect(
-  $x,
-  $width,
-  $offset: null
-) {
-  $x: _susy-svg-validate-units($x);
-  $width: _susy-svg-validate-units($width);
-  $offset: if($offset == 0, null, $offset);
-
-  @if (type-of($offset) == 'number') and (type-of($x) == 'number') {
-    @if comparable($x, $offset) {
-      $x: $x + $offset;
-    } @else {
-      $x: 'calc(#{$x} + #{$offset})';
-    }
-  } @else if $offset and ($x != 0) {
-    $x: 'calc(#{$x} + #{$offset})';
-  } @else if $offset {
-    $x: $offset;
-  }
-
-  @return '%3Crect x="#{$x}" width="#{$width}" height="100%"/%3E';
-}
-
-
-
-// SVG Color
-// ---------
-/// Stringify colors, and escape hex symbol
-///
-/// @access private
-///
-/// @param {Color} $color -
-///   Color to stringify and escape
-///
-/// @return {String} -
-///   Escaped string value of color
-@function _susy-svg-color(
-  $color
-) {
-  $color: inspect($color); // convert to string
-
-  @if (str-index($color, '#') == 1) {
-    $color: '%23' + str-slice($color, 2);
-  }
-
-  @return $color;
-}
-
-
-
-// SVG Gradient
-// ------------
-/// Create a multi-color svg gradient
-///
-/// @access private
-///
-/// @param {List} $colors -
-///   List of colors to be equally spaced from `0%` to `100%`
-///   in each column rectangle
-///
-/// @return {String} -
-///   Escaped string representing one svg gradient
-///   (`id="susy-svg-gradient"`)
-@function _susy-svg-gradient(
-  $colors
-) {
-  $gradient: '%3Cdefs%3E%3ClinearGradient spreadMethod="pad"';
-  $gradient: '#{$gradient} id="susy-svg-gradient"';
-  $gradient: '#{$gradient} x1="0%" y1="0%" x2="100%" y2="0%"%3E';
-
-  @for $i from 1 through length($colors) {
-    $color: _susy-svg-color(nth($colors, $i));
-    $offset: percentage(($i - 1) / (length($colors) - 1));
-    $stop: '%3Cstop offset="#{$offset}" style="stop-color:#{$color};" /%3E';
-
-    $gradient: $gradient + $stop;
-  }
-
-  @return $gradient + '%3C/linearGradient%3E%3C/defs%3E';
-}
+// SVG Utilities
+// =============
+
+
+
+// SVG Validate Units
+// ------------------
+/// Make sure a length is supported in svg
+///
+/// @access private
+///
+/// @param {Length} $length -
+///   The length to validate
+/// @param {String} $name [null] -
+///   Optional name of length origin,
+///   for error reporting
+///
+/// @return {Length} -
+///   An svg-validated length, or comparable valid length
+@function _susy-svg-validate-units(
+  $length,
+  $name: null
+) {
+  $_svg-units: ('em', 'ex', 'px', 'pt', 'pc', 'cm', 'mm', 'in', '%');
+  $string: type-of($length) == 'string';
+
+  @if ($length == 0) or ($string) or index($_svg-units, unit($length)) {
+    @return $length;
+  }
+
+  @return _susy-error(
+    '`#{unit($length)}` #{$name} units are not supported in SVG',
+    '_susy-svg-validate-units');
+}
+
+
+
+// SVG Rect
+// --------
+/// Build a single svg rectangle
+///
+/// @access private
+///
+/// @param {Length} $x -
+///   Horizontal position for the rectangle
+/// @param {Length} $width -
+///   Width of the rectangle
+/// @param {Length} $offset [null] -
+///   Offset the rectangle, to account for edge gutters
+///
+/// @return {String} -
+///   Escaped string representing one svg rectangle
+@function _susy-svg-rect(
+  $x,
+  $width,
+  $offset: null
+) {
+  $x: _susy-svg-validate-units($x);
+  $width: _susy-svg-validate-units($width);
+  $offset: if($offset == 0, null, $offset);
+
+  @if (type-of($offset) == 'number') and (type-of($x) == 'number') {
+    @if comparable($x, $offset) {
+      $x: $x + $offset;
+    } @else {
+      $x: 'calc(#{$x} + #{$offset})';
+    }
+  } @else if $offset and ($x != 0) {
+    $x: 'calc(#{$x} + #{$offset})';
+  } @else if $offset {
+    $x: $offset;
+  }
+
+  @return '%3Crect x="#{$x}" width="#{$width}" height="100%"/%3E';
+}
+
+
+
+// SVG Color
+// ---------
+/// Stringify colors, and escape hex symbol
+///
+/// @access private
+///
+/// @param {Color} $color -
+///   Color to stringify and escape
+///
+/// @return {String} -
+///   Escaped string value of color
+@function _susy-svg-color(
+  $color
+) {
+  $color: inspect($color); // convert to string
+
+  @if (str-index($color, '#') == 1) {
+    $color: '%23' + str-slice($color, 2);
+  }
+
+  @return $color;
+}
+
+
+
+// SVG Gradient
+// ------------
+/// Create a multi-color svg gradient
+///
+/// @access private
+///
+/// @param {List} $colors -
+///   List of colors to be equally spaced from `0%` to `100%`
+///   in each column rectangle
+///
+/// @return {String} -
+///   Escaped string representing one svg gradient
+///   (`id="susy-svg-gradient"`)
+@function _susy-svg-gradient(
+  $colors
+) {
+  $gradient: '%3Cdefs%3E%3ClinearGradient spreadMethod="pad"';
+  $gradient: '#{$gradient} id="susy-svg-gradient"';
+  $gradient: '#{$gradient} x1="0%" y1="0%" x2="100%" y2="0%"%3E';
+
+  @for $i from 1 through length($colors) {
+    $color: _susy-svg-color(nth($colors, $i));
+    $offset: percentage(($i - 1) / (length($colors) - 1));
+    $stop: '%3Cstop offset="#{$offset}" style="stop-color:#{$color};" /%3E';
+
+    $gradient: $gradient + $stop;
+  }
+
+  @return $gradient + '%3C/linearGradient%3E%3C/defs%3E';
+}

data/_sass/basically-basic/vendor/susy/susy/_api.scss

@@ -1,318 +1,318 @@
-/// Susy3 API Functions
-/// ===================
-/// These three functions form the core of Susy's
-/// layout-building grid API.
-///
-/// - Use `span()` and `gutter()` to return any grid-width,
-///   and apply the results wherever you need them:
-///   CSS `width`, `margin`, `padding`, `flex-basis`, `transform`, etc.
-/// - For asymmetrical-fluid grids,
-///   `slice()` can help manage your nesting context.
-///
-/// All three functions come with an unprefixed alias by default,
-/// using the `susy` import.
-/// Import the `susy-prefix` partial instead,
-/// if you only only want prefixed versions of the API.
-///
-/// This is a thin syntax-sugar shell around
-/// the "Su" core-math functions: `su-span`, `su-gutter`, and `su-slice`.
-/// If you prefer the more constrained syntax of the math engine,
-/// you are welcome to use those functions instead.
-///
-/// @group b-api
-/// @see susy-span
-/// @see susy-gutter
-/// @see susy-slice
-/// @see su-span
-/// @see su-gutter
-/// @see su-slice
-
-
-
-/// ## Shorthand
-///
-/// All functions draw on the same shorthand syntax in two parts,
-/// seperated by the word `of`.
-///
-/// ### Span Syntax: `<width>` [`<location>` `<spread>`]
-/// The first part describes the
-/// **span** width, location, and spread in any order.
-/// Only the width is required:
-///
-/// - `span(2)` will return the width of 2 columns.
-/// - `span(3 wide)` will return 3-columns, with an additional gutter.
-/// - location is only needed with asymmetrical grids,
-///   where `span(3 at 2)` will return the width of
-///   specific columns on the grid.
-///   Since these are functions, they will not handle placement for you.
-///
-/// ### Context Syntax: `[of <columns> <container-spread> <gutters>]`
-/// The second half of Susy's shorthand
-/// describes the grid-**context** –
-/// available columns, container-spread, and optional gutter override –
-/// in any order.
-/// All of these settings have globally-defined defaults:
-///
-/// - `span(2 of 6)` will set the context to
-///   a slice of 6 columns from the global grid.
-///   More details below.
-/// - `span(2 of 12 wide)` changes the container-spread
-///   as well as the column-context.
-/// - `span(2 of 12 set-gutters 0.5em)`
-///   will override the global gutters setting
-///   for this one calculation.
-///
-/// A single unitless number for `columns`
-/// will be treated as a slice of the parent grid.
-/// On a grid with `columns: susy-repeat(12, 120px)`,
-/// the shorthand `of 4` will use the parent `120px` column-width.
-/// You can also be more explicit,
-/// and say `of susy-repeat(4, 100px)`.
-/// If you are using asymmetrical grids,
-/// like `columns: (1 1 2 3 5 8)`,
-/// Susy can't slice it for you without knowing which columns you want.
-/// The `slice` function accepts exactly the same syntax as `span`,
-/// but returns a list of columns rather than a width.
-/// Use it in your context like `of slice(first 3)`.
-///
-/// @group b-api
-
-
-
-// Susy Span
-// ---------
-/// This is the primary function in Susy —
-/// used to return the width of a span across one or more columns,
-/// and any relevant gutters along the way.
-/// With the default settings,
-/// `span(3)` will return the width of 3 columns,
-/// and the 2 intermediate gutters.
-/// This can be used to set the `width` property of grid elements,
-/// or `margin` and `padding`
-/// to push, pull, and pad your elements.
-///
-/// - This is a thin syntax-sugar shell around
-///   the core-math `su-span()` function.
-/// - The un-prefixed alias `span()` is available by default.
-///
-/// @group b-api
-/// @see su-span
-/// @see $susy
-///
-/// @param {list} $span -
-///   Shorthand expression to define the width of the span,
-///   optionally containing:
-///   - a count, length, or column-list span.
-///   - `at $n`, `first`, or `last` location on asymmetrical grids,
-///     where `at 1 == first`,
-///     and `last` will calculate the proper location
-///     based on columns and span.
-///   - `narrow`, `wide`, or `wider` for optionally spreading
-///     across adjacent gutters.
-///   - `of $n <spread>` for available grid columns
-///     and spread of the container.
-///     Span counts like `of 6` are valid
-///     in the context of symmetrical grids,
-///     where Susy can safely infer a slice of the parent columns.
-///   - and `set-gutters $n` to override global gutter settings.
-///
-/// @param {map} $config [()] -
-///   Optional map of Susy grid configuration settings.
-///   See `$susy` documentation for details.
-///
-/// @return {length} -
-///   Calculated length value, using the units given,
-///   or converting to `%` for fraction-based grids,
-///   or a full `calc` function when units/fractions
-///   are not comparable outside the browser.
-///
-/// @example scss - span half the grid
-///   .foo {
-///     // the result is a bit under 50% to account for gutters
-///     width: susy-span(6 of 12);
-///   }
-///
-/// @example scss - span a specific segment of asymmetrical grid
-///   .foo {
-///     width: susy-span(3 at 3 of (1 2 3 5 8));
-///   }
-@function susy-span(
-  $span,
-  $config: ()
-) {
-  $output: susy-compile($span, $config);
-
-  @if map-get($output, 'span') {
-    @return su-call('su-span', $output);
-  }
-
-  $actual: '[#{type-of($span)}] `#{inspect($span)}`';
-  @return _susy-error(
-    'Unable to determine span value from #{$actual}.',
-    'susy-span');
-}
-
-
-
-// Susy Gutter
-// -----------
-/// The gutter function returns
-/// the width of a single gutter on your grid,
-/// to be applied where you see fit –
-/// on `margins`, `padding`, `transform`, or element `width`.
-///
-/// - This is a thin syntax-sugar shell around
-///   the core-math `su-gutter()` function.
-/// - The un-prefixed alias `gutter()` is available by default.
-///
-/// @group b-api
-/// @see su-gutter
-/// @see $susy
-///
-/// @param {list | number} $context [null] -
-///   Optional context for nested gutters,
-///   including shorthand for
-///   `columns`, `gutters`, and `container-spread`
-///   (additional shorthand will be ignored)
-///
-/// @param {map} $config [()] -
-///   Optional map of Susy grid configuration settings.
-///   See `$susy` documentation for details.
-///
-/// @return {length} -
-///   Width of a gutter as `%` of current context,
-///   or in the units defined by `column-width` when available
-///
-/// @example scss - add gutters before or after an element
-///   .floats {
-///     float: left;
-///     width: span(3 of 6);
-///     margin-left: gutter(of 6);
-///   }
-///
-/// @example scss - add gutters to padding
-///   .flexbox {
-///     flex: 1 1 span(3 wide of 6 wide);
-///     padding: gutter(of 6) / 2;
-///   }
-///
-@function susy-gutter(
-  $context: susy-get('columns'),
-  $config: ()
-) {
-  $context: susy-compile($context, $config, 'context-only');
-
-  @return su-call('su-gutter', $context);
-}
-
-
-
-// Susy Slice
-// ----------
-/// Working with asymmetrical grids (un-equal column widths)
-/// can be challenging – 
-/// expecially when they involve fluid/fractional elements.
-/// Describing a context `of (15em 6em 6em 6em 15em)` is a lot
-/// to put inside the span or gutter function shorthand.
-/// This slice function returns a sub-slice of asymmetrical columns to use
-/// for a nested context.
-/// `slice(3 at 2)` will give you a subset of the global grid,
-/// spanning 3 columns, starting with the second.
-///
-/// - This is a thin syntax-sugar shell around
-///   the core-math `su-slice()` function.
-/// - The un-prefixed alias `slice()` is available by default.
-///
-/// @group b-api
-/// @see su-slice
-/// @see $susy
-///
-/// @param {list} $span -
-///   Shorthand expression to define the subset span, optionally containing:
-///   - `at $n`, `first`, or `last` location on asymmetrical grids;
-///   - `of $n <spread>` for available grid columns
-///     and spread of the container
-///     - Span-counts like `of 6` are only valid
-///       in the context of symmetrical grids
-///     - Valid spreads include `narrow`, `wide`, or `wider`
-///
-/// @param {map} $config [()] -
-///   Optional map of Susy grid configuration settings.
-///   See `$susy` documentation for details.
-///
-/// @return {list} -
-///   Subset list of columns for use for a nested context
-///
-/// @example scss - Return a nested segment of asymmetrical grid
-///   $context: susy-slice(3 at 3 of (1 2 3 5 8));
-///   /* $context: #{$context}; */
-@function susy-slice(
-  $span,
-  $config: ()
-) {
-  $span: susy-compile($span, $config);
-
-  @return su-call('su-slice', $span);
-}
-
-
-
-/// ## Building Grids
-/// The web has come a long way
-/// since the days of double-margin-hacks
-/// and inconsistent subpixel rounding.
-/// In addition to floats and tables,
-/// we can now use much more powerful tools,
-/// like flexbox and CSS grid,
-/// to build more interesting and responsive layouts.
-///
-/// With Susy3, we hope you'll start moving in that direction.
-/// You can still build classic 12-column Grid Systems,
-/// and we'll help you get there,
-/// but Susy3 is primarily designed for a grid-math-on-demand
-/// approach to layout:
-/// applying our functions only where you really need grid math.
-/// Read the [intro article by OddBird][welcome] for more details.
-///
-/// [welcome]: http://oddbird.net/2017/06/28/susy3/
-///
-/// @group b-api
-/// @link http://oddbird.net/2017/06/28/susy3/ Article: Welcome to Susy3
-///
-/// @example scss - floats
-///   .float {
-///     width: span(3);
-///     margin-right: gutter();
-///   }
-///
-/// @example scss - flexbox
-///   .flexbox {
-///     flex: 1 1 span(3);
-///     // half a gutter on either side…
-///     padding: 0 gutter() / 2;
-///   }
-///
-/// @example scss - pushing and pulling
-///   .push-3 {
-///     margin-left: span(3 wide);
-///   }
-///
-///   .pull-3 {
-///     margin-left: 0 - span(3 wide);
-///   }
-///
-/// @example scss - building an attribute system
-///   // markup example: <div data-span="last 3"></div>
-///   [data-span] {
-///     float: left;
-///
-///     &:not([data-span*='last']) {
-///       margin-right: gutter();
-///     }
-///   }
-///
-///   @for $span from 1 through length(susy-get('columns')) {
-///     [data-span*='#{$span}'] {
-///       width: span($span);
-///     }
-///   }
+/// Susy3 API Functions
+/// ===================
+/// These three functions form the core of Susy's
+/// layout-building grid API.
+///
+/// - Use `span()` and `gutter()` to return any grid-width,
+///   and apply the results wherever you need them:
+///   CSS `width`, `margin`, `padding`, `flex-basis`, `transform`, etc.
+/// - For asymmetrical-fluid grids,
+///   `slice()` can help manage your nesting context.
+///
+/// All three functions come with an unprefixed alias by default,
+/// using the `susy` import.
+/// Import the `susy-prefix` partial instead,
+/// if you only only want prefixed versions of the API.
+///
+/// This is a thin syntax-sugar shell around
+/// the "Su" core-math functions: `su-span`, `su-gutter`, and `su-slice`.
+/// If you prefer the more constrained syntax of the math engine,
+/// you are welcome to use those functions instead.
+///
+/// @group b-api
+/// @see susy-span
+/// @see susy-gutter
+/// @see susy-slice
+/// @see su-span
+/// @see su-gutter
+/// @see su-slice
+
+
+
+/// ## Shorthand
+///
+/// All functions draw on the same shorthand syntax in two parts,
+/// seperated by the word `of`.
+///
+/// ### Span Syntax: `<width>` [`<location>` `<spread>`]
+/// The first part describes the
+/// **span** width, location, and spread in any order.
+/// Only the width is required:
+///
+/// - `span(2)` will return the width of 2 columns.
+/// - `span(3 wide)` will return 3-columns, with an additional gutter.
+/// - location is only needed with asymmetrical grids,
+///   where `span(3 at 2)` will return the width of
+///   specific columns on the grid.
+///   Since these are functions, they will not handle placement for you.
+///
+/// ### Context Syntax: `[of <columns> <container-spread> <gutters>]`
+/// The second half of Susy's shorthand
+/// describes the grid-**context** –
+/// available columns, container-spread, and optional gutter override –
+/// in any order.
+/// All of these settings have globally-defined defaults:
+///
+/// - `span(2 of 6)` will set the context to
+///   a slice of 6 columns from the global grid.
+///   More details below.
+/// - `span(2 of 12 wide)` changes the container-spread
+///   as well as the column-context.
+/// - `span(2 of 12 set-gutters 0.5em)`
+///   will override the global gutters setting
+///   for this one calculation.
+///
+/// A single unitless number for `columns`
+/// will be treated as a slice of the parent grid.
+/// On a grid with `columns: susy-repeat(12, 120px)`,
+/// the shorthand `of 4` will use the parent `120px` column-width.
+/// You can also be more explicit,
+/// and say `of susy-repeat(4, 100px)`.
+/// If you are using asymmetrical grids,
+/// like `columns: (1 1 2 3 5 8)`,
+/// Susy can't slice it for you without knowing which columns you want.
+/// The `slice` function accepts exactly the same syntax as `span`,
+/// but returns a list of columns rather than a width.
+/// Use it in your context like `of slice(first 3)`.
+///
+/// @group b-api
+
+
+
+// Susy Span
+// ---------
+/// This is the primary function in Susy —
+/// used to return the width of a span across one or more columns,
+/// and any relevant gutters along the way.
+/// With the default settings,
+/// `span(3)` will return the width of 3 columns,
+/// and the 2 intermediate gutters.
+/// This can be used to set the `width` property of grid elements,
+/// or `margin` and `padding`
+/// to push, pull, and pad your elements.
+///
+/// - This is a thin syntax-sugar shell around
+///   the core-math `su-span()` function.
+/// - The un-prefixed alias `span()` is available by default.
+///
+/// @group b-api
+/// @see su-span
+/// @see $susy
+///
+/// @param {list} $span -
+///   Shorthand expression to define the width of the span,
+///   optionally containing:
+///   - a count, length, or column-list span.
+///   - `at $n`, `first`, or `last` location on asymmetrical grids,
+///     where `at 1 == first`,
+///     and `last` will calculate the proper location
+///     based on columns and span.
+///   - `narrow`, `wide`, or `wider` for optionally spreading
+///     across adjacent gutters.
+///   - `of $n <spread>` for available grid columns
+///     and spread of the container.
+///     Span counts like `of 6` are valid
+///     in the context of symmetrical grids,
+///     where Susy can safely infer a slice of the parent columns.
+///   - and `set-gutters $n` to override global gutter settings.
+///
+/// @param {map} $config [()] -
+///   Optional map of Susy grid configuration settings.
+///   See `$susy` documentation for details.
+///
+/// @return {length} -
+///   Calculated length value, using the units given,
+///   or converting to `%` for fraction-based grids,
+///   or a full `calc` function when units/fractions
+///   are not comparable outside the browser.
+///
+/// @example scss - span half the grid
+///   .foo {
+///     // the result is a bit under 50% to account for gutters
+///     width: susy-span(6 of 12);
+///   }
+///
+/// @example scss - span a specific segment of asymmetrical grid
+///   .foo {
+///     width: susy-span(3 at 3 of (1 2 3 5 8));
+///   }
+@function susy-span(
+  $span,
+  $config: ()
+) {
+  $output: susy-compile($span, $config);
+
+  @if map-get($output, 'span') {
+    @return su-call('su-span', $output);
+  }
+
+  $actual: '[#{type-of($span)}] `#{inspect($span)}`';
+  @return _susy-error(
+    'Unable to determine span value from #{$actual}.',
+    'susy-span');
+}
+
+
+
+// Susy Gutter
+// -----------
+/// The gutter function returns
+/// the width of a single gutter on your grid,
+/// to be applied where you see fit –
+/// on `margins`, `padding`, `transform`, or element `width`.
+///
+/// - This is a thin syntax-sugar shell around
+///   the core-math `su-gutter()` function.
+/// - The un-prefixed alias `gutter()` is available by default.
+///
+/// @group b-api
+/// @see su-gutter
+/// @see $susy
+///
+/// @param {list | number} $context [null] -
+///   Optional context for nested gutters,
+///   including shorthand for
+///   `columns`, `gutters`, and `container-spread`
+///   (additional shorthand will be ignored)
+///
+/// @param {map} $config [()] -
+///   Optional map of Susy grid configuration settings.
+///   See `$susy` documentation for details.
+///
+/// @return {length} -
+///   Width of a gutter as `%` of current context,
+///   or in the units defined by `column-width` when available
+///
+/// @example scss - add gutters before or after an element
+///   .floats {
+///     float: left;
+///     width: span(3 of 6);
+///     margin-left: gutter(of 6);
+///   }
+///
+/// @example scss - add gutters to padding
+///   .flexbox {
+///     flex: 1 1 span(3 wide of 6 wide);
+///     padding: gutter(of 6) / 2;
+///   }
+///
+@function susy-gutter(
+  $context: susy-get('columns'),
+  $config: ()
+) {
+  $context: susy-compile($context, $config, 'context-only');
+
+  @return su-call('su-gutter', $context);
+}
+
+
+
+// Susy Slice
+// ----------
+/// Working with asymmetrical grids (un-equal column widths)
+/// can be challenging – 
+/// expecially when they involve fluid/fractional elements.
+/// Describing a context `of (15em 6em 6em 6em 15em)` is a lot
+/// to put inside the span or gutter function shorthand.
+/// This slice function returns a sub-slice of asymmetrical columns to use
+/// for a nested context.
+/// `slice(3 at 2)` will give you a subset of the global grid,
+/// spanning 3 columns, starting with the second.
+///
+/// - This is a thin syntax-sugar shell around
+///   the core-math `su-slice()` function.
+/// - The un-prefixed alias `slice()` is available by default.
+///
+/// @group b-api
+/// @see su-slice
+/// @see $susy
+///
+/// @param {list} $span -
+///   Shorthand expression to define the subset span, optionally containing:
+///   - `at $n`, `first`, or `last` location on asymmetrical grids;
+///   - `of $n <spread>` for available grid columns
+///     and spread of the container
+///     - Span-counts like `of 6` are only valid
+///       in the context of symmetrical grids
+///     - Valid spreads include `narrow`, `wide`, or `wider`
+///
+/// @param {map} $config [()] -
+///   Optional map of Susy grid configuration settings.
+///   See `$susy` documentation for details.
+///
+/// @return {list} -
+///   Subset list of columns for use for a nested context
+///
+/// @example scss - Return a nested segment of asymmetrical grid
+///   $context: susy-slice(3 at 3 of (1 2 3 5 8));
+///   /* $context: #{$context}; */
+@function susy-slice(
+  $span,
+  $config: ()
+) {
+  $span: susy-compile($span, $config);
+
+  @return su-call('su-slice', $span);
+}
+
+
+
+/// ## Building Grids
+/// The web has come a long way
+/// since the days of double-margin-hacks
+/// and inconsistent subpixel rounding.
+/// In addition to floats and tables,
+/// we can now use much more powerful tools,
+/// like flexbox and CSS grid,
+/// to build more interesting and responsive layouts.
+///
+/// With Susy3, we hope you'll start moving in that direction.
+/// You can still build classic 12-column Grid Systems,
+/// and we'll help you get there,
+/// but Susy3 is primarily designed for a grid-math-on-demand
+/// approach to layout:
+/// applying our functions only where you really need grid math.
+/// Read the [intro article by OddBird][welcome] for more details.
+///
+/// [welcome]: http://oddbird.net/2017/06/28/susy3/
+///
+/// @group b-api
+/// @link http://oddbird.net/2017/06/28/susy3/ Article: Welcome to Susy3
+///
+/// @example scss - floats
+///   .float {
+///     width: span(3);
+///     margin-right: gutter();
+///   }
+///
+/// @example scss - flexbox
+///   .flexbox {
+///     flex: 1 1 span(3);
+///     // half a gutter on either side…
+///     padding: 0 gutter() / 2;
+///   }
+///
+/// @example scss - pushing and pulling
+///   .push-3 {
+///     margin-left: span(3 wide);
+///   }
+///
+///   .pull-3 {
+///     margin-left: 0 - span(3 wide);
+///   }
+///
+/// @example scss - building an attribute system
+///   // markup example: <div data-span="last 3"></div>
+///   [data-span] {
+///     float: left;
+///
+///     &:not([data-span*='last']) {
+///       margin-right: gutter();
+///     }
+///   }
+///
+///   @for $span from 1 through length(susy-get('columns')) {
+///     [data-span*='#{$span}'] {
+///       width: span($span);
+///     }
+///   }