RubyGems - susy - Versions diffs - 2.0.0.alpha.4 → 2.0.0.alpha.5 - Mend

susy 2.0.0.alpha.4 → 2.0.0.alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (167) hide show

checksums.yaml +7 -7
data/README.md +2 -0
data/VERSION +1 -0
data/lib/compass-susy.rb +1 -0
data/lib/susy.rb +12 -4
data/sass/susy/_helpers.scss +2 -0
data/sass/susy/_settings.scss +7 -20
data/sass/susy/api/_float.scss +2 -0
data/sass/susy/api/float/_container.scss +4 -6
data/sass/susy/api/float/_end.scss +7 -11
data/sass/susy/api/float/_isolate.scss +1 -1
data/sass/susy/api/float/_span.scss +2 -8
data/sass/susy/api/shared/_background.scss +24 -36
data/sass/susy/api/shared/_container.scss +7 -13
data/sass/susy/api/shared/_margins.scss +1 -1
data/sass/susy/api/shared/_padding.scss +1 -1
data/sass/susy/helpers/_box-sizing.scss +16 -0
data/sass/susy/helpers/_clearfix.scss +15 -0
data/sass/susy/helpers/_direction.scss +7 -10
data/sass/susy/helpers/_nth.scss +2 -6
data/sass/susy/language/_shared.scss +0 -1
data/sass/susy/language/_susy.scss +4 -1
data/sass/susy/language/shared/_settings.scss +55 -249
data/sass/susy/language/susy/_background.scss +304 -90
data/sass/susy/language/susy/_bleed.scss +109 -0
data/sass/susy/language/susy/_container.scss +21 -40
data/sass/susy/language/susy/_context.scss +34 -0
data/sass/susy/language/susy/_gallery.scss +53 -39
data/sass/susy/language/susy/_gutters.scss +105 -83
data/sass/susy/language/susy/_isolate.scss +24 -31
data/sass/susy/language/susy/_margins.scss +17 -71
data/sass/susy/language/susy/_padding.scss +13 -29
data/sass/susy/language/susy/_rows.scss +61 -33
data/sass/susy/language/susy/_settings.scss +41 -0
data/sass/susy/language/susy/_span.scss +125 -278
data/sass/susy/math/_columns.scss +25 -50
data/sass/susy/math/_container.scss +12 -27
data/sass/susy/math/_location.scss +10 -22
data/templates/project/README.md +3 -3
metadata +44 -176
data/docs/BUGS.md +0 -2
data/docs/Gemfile.lock +0 -142
data/docs/README.md +0 -54
data/docs/config.rb +0 -120
data/docs/lib/guide_helpers.rb +0 -19
data/docs/source/apple-touch-icon-114x114-precomposed.png +0 -0
data/docs/source/apple-touch-icon-144x144-precomposed.png +0 -0
data/docs/source/apple-touch-icon-72x72-precomposed.png +0 -0
data/docs/source/apple-touch-icon-precomposed.png +0 -0
data/docs/source/demos/grid-types.html.md +0 -263
data/docs/source/demos/index.html.md +0 -23
data/docs/source/demos/magic.html.md +0 -320
data/docs/source/favicon.ico +0 -0
data/docs/source/fonts/@Font-Face License.txt +0 -18
data/docs/source/fonts/Baskerville-amp-webfont.eot +0 -0
data/docs/source/fonts/Baskerville-amp-webfont.svg +0 -241
data/docs/source/fonts/Baskerville-amp-webfont.ttf +0 -0
data/docs/source/fonts/Baskerville-amp-webfont.woff +0 -0
data/docs/source/fonts/CenturyOldStyle-Bold-webfont.eot +0 -0
data/docs/source/fonts/CenturyOldStyle-Bold-webfont.svg +0 -240
data/docs/source/fonts/CenturyOldStyle-Bold-webfont.ttf +0 -0
data/docs/source/fonts/CenturyOldStyle-Bold-webfont.woff +0 -0
data/docs/source/fonts/CenturyOldStyle-Italic-webfont.eot +0 -0
data/docs/source/fonts/CenturyOldStyle-Italic-webfont.svg +0 -240
data/docs/source/fonts/CenturyOldStyle-Italic-webfont.ttf +0 -0
data/docs/source/fonts/CenturyOldStyle-Italic-webfont.woff +0 -0
data/docs/source/fonts/CenturyOldStyle-Regular-webfont.eot +0 -0
data/docs/source/fonts/CenturyOldStyle-Regular-webfont.svg +0 -240
data/docs/source/fonts/CenturyOldStyle-Regular-webfont.ttf +0 -0
data/docs/source/fonts/CenturyOldStyle-Regular-webfont.woff +0 -0
data/docs/source/fonts/CenturyOldStyleCaps-Regular-webfont.eot +0 -0
data/docs/source/fonts/CenturyOldStyleCaps-Regular-webfont.svg +0 -240
data/docs/source/fonts/CenturyOldStyleCaps-Regular-webfont.ttf +0 -0
data/docs/source/fonts/CenturyOldStyleCaps-Regular-webfont.woff +0 -0
data/docs/source/fonts/FranklinGothic-Book-webfont.eot +0 -0
data/docs/source/fonts/FranklinGothic-Book-webfont.svg +0 -240
data/docs/source/fonts/FranklinGothic-Book-webfont.ttf +0 -0
data/docs/source/fonts/FranklinGothic-Book-webfont.woff +0 -0
data/docs/source/fonts/FranklinGothic-BookIt-webfont.eot +0 -0
data/docs/source/fonts/FranklinGothic-BookIt-webfont.svg +0 -240
data/docs/source/fonts/FranklinGothic-BookIt-webfont.ttf +0 -0
data/docs/source/fonts/FranklinGothic-BookIt-webfont.woff +0 -0
data/docs/source/fonts/FranklinGothic-Cd-webfont.eot +0 -0
data/docs/source/fonts/FranklinGothic-Cd-webfont.svg +0 -240
data/docs/source/fonts/FranklinGothic-Cd-webfont.ttf +0 -0
data/docs/source/fonts/FranklinGothic-Cd-webfont.woff +0 -0
data/docs/source/fonts/FranklinGothic-CdIt-webfont.eot +0 -0
data/docs/source/fonts/FranklinGothic-CdIt-webfont.svg +0 -240
data/docs/source/fonts/FranklinGothic-CdIt-webfont.ttf +0 -0
data/docs/source/fonts/FranklinGothic-CdIt-webfont.woff +0 -0
data/docs/source/fonts/FranklinGothic-Med-webfont.eot +0 -0
data/docs/source/fonts/FranklinGothic-Med-webfont.svg +0 -240
data/docs/source/fonts/FranklinGothic-Med-webfont.ttf +0 -0
data/docs/source/fonts/FranklinGothic-Med-webfont.woff +0 -0
data/docs/source/fonts/FranklinGothic-MedCd-webfont.eot +0 -0
data/docs/source/fonts/FranklinGothic-MedCd-webfont.svg +0 -240
data/docs/source/fonts/FranklinGothic-MedCd-webfont.ttf +0 -0
data/docs/source/fonts/FranklinGothic-MedCd-webfont.woff +0 -0
data/docs/source/fonts/FranklinGothic-MedCdIt-webfont.eot +0 -0
data/docs/source/fonts/FranklinGothic-MedCdIt-webfont.svg +0 -240
data/docs/source/fonts/FranklinGothic-MedCdIt-webfont.ttf +0 -0
data/docs/source/fonts/FranklinGothic-MedCdIt-webfont.woff +0 -0
data/docs/source/fonts/FranklinGothic-MedIt-webfont.eot +0 -0
data/docs/source/fonts/FranklinGothic-MedIt-webfont.svg +0 -240
data/docs/source/fonts/FranklinGothic-MedIt-webfont.ttf +0 -0
data/docs/source/fonts/FranklinGothic-MedIt-webfont.woff +0 -0
data/docs/source/fonts/License.txt +0 -77
data/docs/source/fonts/susy.eot +0 -0
data/docs/source/fonts/susy.svg +0 -69
data/docs/source/fonts/susy.ttf +0 -0
data/docs/source/fonts/susy.woff +0 -0
data/docs/source/guides/getting-started.html.md +0 -277
data/docs/source/guides/reference.html.md +0 -658
data/docs/source/guides/upgrade-1-0.html.md +0 -286
data/docs/source/humans.txt +0 -45
data/docs/source/images/splash-iphone.png +0 -0
data/docs/source/images/splash-iphone4.png +0 -0
data/docs/source/images/splash-landscape.png +0 -0
data/docs/source/images/splash-portrait.png +0 -0
data/docs/source/index.html.md +0 -87
data/docs/source/javascripts/jquery-1.7.1.min.js +0 -4
data/docs/source/javascripts/jqwidont.js +0 -5
data/docs/source/javascripts/modernizr-2.5.3.min.js +0 -4
data/docs/source/javascripts/modernizr.selectors.js +0 -55
data/docs/source/javascripts/viewport.js +0 -9
data/docs/source/layouts/grid-types.haml +0 -22
data/docs/source/layouts/layout.haml +0 -34
data/docs/source/layouts/magic.haml +0 -28
data/docs/source/partials/_contentinfo.haml +0 -47
data/docs/source/partials/_demonav.haml +0 -2
data/docs/source/partials/_google_analytics.haml +0 -5
data/docs/source/partials/_head.haml +0 -22
data/docs/source/partials/_javascripts.haml +0 -4
data/docs/source/partials/_navigation.haml +0 -15
data/docs/source/sites-using-susy.html.md +0 -29
data/docs/source/stylesheets/_base/_base.scss +0 -23
data/docs/source/stylesheets/_base/_colors.scss +0 -47
data/docs/source/stylesheets/_base/_size.scss +0 -49
data/docs/source/stylesheets/_base/_type.scss +0 -19
data/docs/source/stylesheets/_demos/_demo.scss +0 -28
data/docs/source/stylesheets/_demos/magic/_layout.scss +0 -39
data/docs/source/stylesheets/_demos/magic/_style.scss +0 -104
data/docs/source/stylesheets/_demos/types/_layouts.scss +0 -88
data/docs/source/stylesheets/_demos/types/_template.scss +0 -57
data/docs/source/stylesheets/_general/_century-oldstyle.scss +0 -70
data/docs/source/stylesheets/_general/_font-license.scss +0 -23
data/docs/source/stylesheets/_general/_fonts.scss +0 -26
data/docs/source/stylesheets/_general/_franklin-gothic.scss +0 -112
data/docs/source/stylesheets/_general/_icons.scss +0 -86
data/docs/source/stylesheets/_general/_root.scss +0 -79
data/docs/source/stylesheets/_general/_type.scss +0 -114
data/docs/source/stylesheets/_layout.scss +0 -48
data/docs/source/stylesheets/_modules/_ag-test.scss +0 -59
data/docs/source/stylesheets/_modules/_banner.scss +0 -61
data/docs/source/stylesheets/_modules/_contentinfo.scss +0 -41
data/docs/source/stylesheets/_modules/_intro.scss +0 -53
data/docs/source/stylesheets/_modules/_nav.scss +0 -44
data/docs/source/stylesheets/_modules/_pages.scss +0 -5
data/docs/source/stylesheets/_modules/_secondary.scss +0 -22
data/docs/source/stylesheets/_modules/_toggle.scss +0 -40
data/docs/source/stylesheets/_vendor/pygments/solarized.scss +0 -65
data/docs/source/stylesheets/grid-types.css.scss +0 -6
data/docs/source/stylesheets/magic.css.scss +0 -6
data/docs/source/stylesheets/site.css.scss +0 -27
data/sass/susy/language/_susy1.scss +0 -9
data/sass/susy/language/shared/_context.scss +0 -36
data/sass/susy/language/susy1/_settings.scss +0 -50

data/sass/susy/language/susy/_background.scss CHANGED

@@ -1,137 +1,267 @@
 // Background Grid Syntax
 // ======================
-@import "compass/css3/border-radius";
-@import "compass/css3/box-shadow";
-@import "compass/layout/stretching";
+$debug-defaults: (
+  color: rgba(#66f, .25),
+  toggle: top right,
+);
-// The overlay is painted over your container's ::after pseudo-element,
-// so we must give position to the container itself.
-// If relative doesn't suit your layout, it can be replaced by absolute/fixed.
-$overlay-position       : relative        !default;
-// Set the location of the switch.
-$grid-toggle-position   : left bottom     !default;
-// Set the color of background grids.
-$grid-color             : rgba(#66f, .25) !default;
-// Grid Background
-// ---------------
+// Show Grid
+// ---------
 // Show a grid background on any element.
 // - [$grid]  : <settings>
-@mixin background-grid(
-  $grid: get-grid()
+@mixin show-grid(
+  $grid: $susy
 ) {
-  $grid         : get-adjusted-grid($grid);
+  $output: get-background($grid);
-  $this-flow    : get-setting(flow, $grid);
-  $this-show    : get-setting(show-grids, $grid);
+  @if length($output) > 0 {
+    $flow: susy-get(flow, $grid);
-  $stops        : get-grid-color-stops($grid);
+    $image: ();
+    @each $name, $layer in map-get($output, image) {
+      $direction: if($name == baseline, to bottom, to to($flow));
+      $image: append($image, linear-gradient($direction, $layer...), comma);
+    }
+    $output: map-merge($output, (image: $image));
+    @include background-grid-output($output...);
+  }
+}
-  @include background-grid-output($stops, $show: $this-show, $flow: $this-flow);
+@mixin show-grids(
+  $grid: $susy
+) {
+  @include show-grid($grid);
 }
 // Grid Overlay
 // ------------
 // Generate an icon to trigger grid-overlays on any given elements.
 // $grids...  : <selector> [<settings>] [, <selector>]*
-@mixin overlay-grid (
+@mixin grid-overlay (
   $grids...
 ) {
-  $vert: nth($grid-toggle-position, 1);
-  $horz: nth($grid-toggle-position, 2);
   head {
-    @include border-radius(.25em);
+    @include overlay-head;
+    &:hover {
+      @include overlay-backgrounds($grids...);
+    }
+  }
+}
+// [Private] Overlay Head
+// ----------------------
+// <head> styles to create grid overlay toggle
+@mixin overlay-head {
+  $toggle: debug-get(toggle);
+  $horz: null;
+  $vert: null;
+  @each $side in $toggle {
+    $horz: if($side == left or $side == right, $side, $horz);
+    $vert: if($side == top or $side == bottom, $side, $vert);
+  }
+  display: block;
+  position: fixed;
+  #{$horz}: 10px;
+  #{$vert}: 10px;
+  z-index: 999;
+  color: #333;
+  background: rgba(white, .25);
+  &::before {
+    content: "|||";
     display: block;
-    position: fixed;
-    #{$horz}: 10px;
-    #{$vert}: 10px;
-    z-index: 999;
-    color: #333;
-    text-shadow: 0 0 3px #fff;
-    &::before {
-      content: "|||";
-      display: block;
-      padding: 10px 14px;
-      letter-spacing: -1;
-      font: {
-        family: sans-serif;
-        size: 26px;
-        weight: bold;
-      }
+    padding: 5px 10px;
+    font: {
+      family: sans-serif;
+      size: 16px;
+      weight: bold;
     }
-    &:hover {
-      @include box-shadow(0 0 3px rgba(#333,.5));
-      background: rgba(white,.5);
-      @each $grid in $grids {
-        $selector: nth($grid, 1);
-        $grid: if(length($grid) > 1, nth($grid, 2), get-grid());
-        ~ #{$selector},
-        ~ body #{$selector} {
-          position: unquote($overlay-position);
-          &::before {
-            @extend %grid-overlay-base;
-            @include background-grid($grid);
-          }
-        }
+  }
+  &:hover {
+    box-shadow: 0 0 1px rgba(#333,.5);
+    background: rgba(white, .5);
+  }
+}
+// [Private] Overlay Backgrounds
+// -----------------------------
+// Parse and apply backgrounds for overlay-grid
+@mixin overlay-backgrounds(
+  $grids...
+) {
+  @each $grid in $grids {
+    $selector: nth($grid, 1);
+    $grid: if(length($grid) > 1, nth($grid, 2), $susy);
+    ~ #{$selector},
+    ~ body #{$selector} {
+      position: relative;
+      &::before {
+        @extend %grid-overlay-base;
+        @include show-grid($grid);
       }
     }
   }
 }
+// [Private] Grid Overlay Base
+// ---------------------------
+// Base styles for generating a grid overlay
 %grid-overlay-base {
-  @include stretch;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
   content: " ";
   z-index: 998;
 }
-// Grid Color-Stops
-// ----------------
-// Calculate the color-stops needed for a particular grid.
-// - $grid  : <settings>
-@function get-grid-color-stops(
-  $grid: parse-grid()
+// Get Symmetrical Background
+// --------------------------
+// - $grid: <map>
+@function get-background-sym(
+  $grid
+) {
+  $grid           : parse-grid($grid);
+  $gutters        : susy-get(gutters, $grid);
+  $column-width   : susy-get(column-width, $grid);
+  $math           : susy-get(layout-math, $grid);
+  $color          : debug-get(color);
+  $trans          : transparent;
+  $light          : lighten($color, 15%);
+  $end            : 1 + $gutters;
+  $after          : percentage(1/$end);
+  $stops          : ();
+  @if is-inside($grid) {
+    $stops: $color, $light;
+  } @else if is-split($grid) {
+    $split: $gutters/2;
+    $before: percentage($split/$end);
+    $after: percentage((1 + $split)/$end);
+    $stops: $trans $before, $color $before, $light $after, $trans $after;
+  } @else {
+    $stops: $color, $light $after, $trans $after;
+  }
+  $background: (
+    image: (columns: $stops),
+    size: if($math == static, $column-width * $end, span(1 $grid wide)),
+  );
+  @return $background;
+}
+// Get Asymmetrical Inside
+// -----------------------
+// - $grid: <settings>
+@function get-asym-inside(
+  $grid
 ) {
-  $stops  : ();
-  $color  : $grid-color;
-  $trans  : transparent;
-  $light  : lighten($color, 15%);
+  $grid     : parse-grid($grid);
+  $columns  : susy-get(columns, $grid);
-  $this-columns           : get-setting(columns, $grid);
-  $this-gutters           : get-setting(gutters, $grid);
-  $this-column-width      : get-setting(column-width, $grid);
-  $this-layout-math       : get-setting(layout-math, $grid);
-  $this-gutter-position   : get-setting(gutter-position, $grid);
+  $color    : debug-get(color);
+  $light    : lighten($color, 15%);
+  $stops    : ();
-  @for $location from 1 through column-count($this-columns) {
-    $this-stop: compact();
+  @for $location from 1 through column-count($columns) {
+    $this-stop: ();
     @if $location == 1 {
       $this-stop: append($this-stop, $color, comma);
     } @else {
-      $start: get-isolation(1, $location, $this-columns, $this-gutters, $this-column-width, $this-layout-math);
+      $start: parse-span(1 at $location $grid);
+      $start: get-isolation($start);
       $this-stop: append($this-stop, $color $start, comma);
     }
-    @if $location == column-count($this-columns) {
+    @if $location == column-count($columns) {
       $this-stop: append($this-stop, $light, comma);
     } @else {
-      $end-color: $light;
-      $inside: if($this-gutter-position == inside or $this-gutter-position == inside-static, true, false);
-      @if not $inside {
-        $gutter: get-span-width($location, 1, $this-columns, $this-gutters, $this-column-width, $this-layout-math, $this-gutter-position);
-        $this-stop: append($this-stop, $light $gutter, comma);
-        $this-stop: append($this-stop, $trans $gutter, comma);
-        $end-color: $trans;
-      }
+      $end: parse-span(1 at ($location + 1) $grid);
+      $end: get-isolation($end);
+      $this-stop: append($this-stop, $light $end, comma);
+    }
+    $stops: join($stops, $this-stop, comma);
+  }
+  @return $stops;
+}
+// Get Asymmetrical Split
+// ----------------------
+// - $grid: <settings>
+@function get-asym-split(
+  $grid
+) {
+  $grid     : parse-grid($grid);
+  $columns  : susy-get(columns, $grid);
+  $color    : debug-get(color);
+  $light    : lighten($color, 15%);
+  $stops    : ();
+  @for $location from 1 through column-count($columns) {
+    $this-stop: ();
+    $start: parse-span(1 at $location $grid);
+    $start: get-isolation($start);
+    $this-stop: append($this-stop, transparent $start, comma);
+    $this-stop: append($this-stop, $color $start, comma);
-      $end: get-isolation(1, $location + 1, $this-columns, $this-gutters, $this-column-width, $this-layout-math);
-      $this-stop: append($this-stop, $end-color $end, comma);
+    $end: $start + span(1 at $location $grid);
+    $this-stop: append($this-stop, $light $end, comma);
+    $this-stop: append($this-stop, transparent $end, comma);
+    $stops: join($stops, $this-stop, comma);
+  }
+  @return $stops;
+}
+// Get Asymmetrical Outside
+// ------------------------
+// - $grid: <settings>
+@function get-asym-outside(
+  $grid
+) {
+  $grid     : parse-grid($grid);
+  $columns  : susy-get(columns, $grid);
+  $color    : debug-get(color);
+  $light    : lighten($color, 15%);
+  $trans    : transparent;
+  $stops    : ();
+  @for $location from 1 through column-count($columns) {
+    $this-stop: ();
+    @if $location == 1 {
+      $this-stop: append($this-stop, $color, comma);
+    } @else {
+      $start: parse-span(1 at $location $grid);
+      $start: get-isolation($start);
+      $this-stop: append($this-stop, $color $start, comma);
+    }
+    @if $location == column-count($columns) {
+      $this-stop: append($this-stop, $light, comma);
+    } @else {
+      $gutter: get-span-width(first $location $grid);
+      $end: parse-span(1 at ($location + 1) $grid);
+      $end: get-isolation($end);
+      $gutter: $light $gutter, $trans $gutter, $trans $end;
+      $this-stop: join($this-stop, $gutter, comma);
     }
     $stops: join($stops, $this-stop, comma);
@@ -139,3 +269,87 @@ $grid-color             : rgba(#66f, .25) !default;
   @return $stops;
 }
+// Get Asymmetrical Background
+// ---------------------------
+// - $grid: <settings>
+@function get-background-asym(
+  $grid
+) {
+  $stops: ();
+  @if is-inside($grid) {
+    $stops: get-asym-inside($grid);
+  } @else if is-split($grid) {
+    $stops: get-asym-split($grid);
+  } @else {
+    $stops: get-asym-outside($grid);
+  }
+  @return (image: (columns: $stops));
+}
+// Get Background
+// --------------
+// - $grid: <settings>
+@function get-background(
+  $grid
+) {
+  $grid     : parse-grid($grid);
+  $show     : susy-get(show-grids, $grid);
+  $return   : ();
+  @if $show and $show != hide {
+    $line-height: variable-exists(base-line-height);
+    $line-height: if($line-height, $base-line-height, false);
+    $columns: susy-get(columns, $grid);
+    @if $show != show-baseline {
+      $sym: is-symmetrical($columns);
+      $return: if($sym, get-background-sym($grid), get-background-asym($grid));
+      $return: map-merge($return, (clip: content-box));
+    } @else if not $line-height {
+      @warn 'Please provide $base-line-height in order to see baseline grids.';
+    }
+    @if $line-height {
+      @if $show != show-columns {
+        $color: variable-exists(grid-background-baseline-color);
+        $color: if($color, $grid-background-baseline-color, black);
+        $image: map-get($return, image);
+        $size: map-get($return, size);
+        $baseline: (baseline: ($color 5%, rgba($color, 0) 5%));
+        $baseline-size: 100% $line-height;
+        $return: map-merge($return, (
+          image: if($image, map-merge($image, $baseline), $baseline),
+          size: if($size, append($size, $baseline-size, comma), $baseline-size),
+        ));
+      }
+      @if $show == show {
+        $clip: map-get($return, clip);
+        $return: map-merge($return, (clip: join($clip, border-box, comma)));
+      }
+    }
+  }
+  @if map-get($return, image) {
+    $return: map-merge($return, (flow: susy-get(flow, $grid)));
+  }
+  @return $return;
+}
+// Get Debug
+// ---------
+// Return the value of a debug setting
+// - $key: <setting>
+@function debug-get(
+  $key
+) {
+  $user: variable-exists(debug);
+  $map: if($user, map-merge($debug-defaults, $debug), $debug-defaults);
+  @return map-get($map, $key);
+}

data/sass/susy/language/susy/_bleed.scss ADDED

@@ -0,0 +1,109 @@
+// Bleed Syntax
+// ============
+// Bleed
+// -----
+// Add negative margins, and equal positive padding to create bleed.
+// - $span  : <span>
+@mixin bleed(
+  $bleed: 0 gutter()
+) {
+  $bleed    : parse-bleed($bleed);
+  $context  : get-span-context($bleed);
+  $trbl     : span-get(span, $bleed);
+  $spans    : (top: 0, right: 0, bottom: 0, left: 0);
+  $i: 1;
+  @each $span in $trbl {
+    $span: span(map-merge($bleed, (span: $span)));
+    @if $i == 1 {
+      $spans: map-merge($spans, (top: $span, right: $span, bottom: $span, left: $span));
+    } @else if $i == 2 {
+      $spans: map-merge($spans, (right: $span, left: $span));
+    } @else if $i == 3 {
+      $spans: map-merge($spans, (bottom: $span));
+    } @else if $i == 4 {
+      $spans: map-merge($spans, (left: $span));
+    }
+    $i: $i + 1;
+  }
+  @each $side, $span in $spans {
+    $padding: $span;
+    @if is-inside($bleed) and ($side == right or $side == left) {
+      $gutter: gutter($context);
+      $padding: if(comparable($padding, $gutter), $padding + $gutter, $padding);
+    }
+    margin-#{$side}: if($span != 0, 0 - $span, null);
+    padding-#{$side}: if($padding != 0, $padding, null);
+  }
+  @include susy-box-sizing(content-box);
+}
+@mixin bleed-x(
+  $bleed: gutter()
+) {
+  $bleed  : parse-bleed($bleed);
+  $trbl   : span-get(span, $bleed);
+  @if length($trbl) == 1 {
+    $bleed: map-merge($bleed, (span: 0 nth($trbl, 1)));
+  } @else if length($trbl) == 2 {
+    $bleed: map-merge($bleed, (span: 0 nth($trbl, 2) 0 nth($trbl, 1)));
+  } @else {
+    @warn 'bleed-x only takes 2 lengths, but #{length($trbl)} were passed.';
+  }
+  @include bleed($bleed);
+}
+@mixin bleed-y(
+  $bleed: if(function-exists(rhythm), rhythm(1), 1em)
+) {
+  $bleed  : parse-bleed($bleed);
+  $trbl   : span-get(span, $bleed);
+  @if length($trbl) == 1 {
+    $bleed: map-merge($bleed, (span: nth($trbl, 1) 0));
+  } @else if length($trbl) == 2 {
+    $bleed: map-merge($bleed, (span: nth($trbl, 1) 0 nth($trbl, 2) 0));
+  } @else {
+    @warn 'bleed-y only takes 2 lengths, but #{length($trbl)} were passed.';
+  }
+  @include bleed($bleed);
+}
+// Parse Bleed
+// -----------
+// Parse the bleed syntax, returning a TRBL list of spans
+// - $bleed: <bleed>
+@function parse-bleed(
+  $bleed
+) {
+  $return: $bleed;
+  @if type-of($bleed) != map {
+    $return: parse-span($bleed);
+    $span-list: ();
+    $keywords: false;
+    $i: 1;
+    @while not $keywords and $i <= length($bleed) {
+      $item: nth($bleed, $i);
+      @if type-of($item) == number {
+        $span-list: append($span-list, $item);
+      } @else {
+        $keywords: true;
+      }
+      $i: $i + 1;
+    }
+    $return: map-merge($return, (span: $span-list));
+  }
+  @return map-merge($return, (spread: wide));
+}