susy 2.0.0.beta.1 → 2.0.0.beta.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d45ed731ca80458ec4677b2342c82c1a37198052
-  data.tar.gz: 0a6a3b6f31a87c8f49cebe66576e89524e85982f
+  metadata.gz: 9db5246394497a4752238d5b432ce4e2e173995a
+  data.tar.gz: 06daf5683a28b569dcbca57308e3c07f5ed918ed
 SHA512:
-  metadata.gz: 0f0e5475bf46aa863ff545b072b261a76dfd4a4eb4bdd83d56a81c6ad0fbfc1849f99f1be1fd13865009381a2b71d5dce27896a07855b2b30606c1d090c81557
-  data.tar.gz: 227b2172872f3ec60db0c1c82b3d585fd5d299d5efc1e57905aa1f4ea5313e53b9c08fbfaee7759b77e6bb80bdc5e6c4cea174dddcd5f99421744c44e2ebea8b
+  metadata.gz: 21cf7cb67d634c0ed2a87819416148bbf9708b3b12b0ecf17e44b4675289a812522cb465f25f29101fe72b7d706ca7435a229ad14cffa80294f36bdd8e2562da
+  data.tar.gz: 39670449c17c8edbb172a4fc284627d0e3657c2efef048258c18f6a5f08260c31b92f4d7122369f9d45df89440e2facd831e82f72630b78eacdbb14f3ab05b4b

data/VERSION

@@ -1 +1 @@
-2.0.0.beta.0
+2.0.0.beta.1

data/docs/changelog.rst

@@ -2,7 +2,48 @@ Changelog
 =========
 
 
-2.0.0.beta.1 — Dec 25 2013
+2.0.0.beta.2 — Jan 6 2014
+-------------------------
+
+- Allow nesting of Susy settings.
+- ``show-grid`` mixin can output either background or overlay grids.
+- Add ``isolate`` function to return isolation offset width.
+- Fix a bug with ``last`` output for ``split``-gutter layouts.
+- Fix a bug with split-gutter ``span()``, and ``narrow``/``wider`` keywords.
+- Fix a bug with ``bleed`` and ``null``+``inside`` gutters.
+- ``bleed`` output uses TRBL shorthand when possible.
+- Clean up and document the core math functions.
+- Document upgrade path, core-math, and DIY grids.
+
+BREAKING:
+
+- Move debug settings into ``$susy: (debug: (<settings>));``.
+- Replace ``show-grid`` setting with new ``debug: image`` setting.
+- Add ``debug: output`` setting and keywords
+  to toggle between ``background`` and ``overlay`` grid images.
+- Remove ``grid-overlay`` mixin.
+
+  + Becomes part of ``show-grid`` mixin.
+  + Doesn't take ``$selector`` argument — should be nested instead.
+  + Can still be used multiple times.
+
+- ``isolate`` mixin now interprets span argument as location,
+  unless location is otherwise specified.
+
+  + ``isolate(2)`` is the same as ``isolate(at 2)``.
+  + ``isolate(25%)`` will isolate *at* ``25%``.
+
+- Rename setting controls for consistency.
+
+  + ``set-grid`` => ``layout``
+  + ``use-grid`` => ``with-layout``
+
+- ``pad`` and ``squish`` use RL shorthand for shared context.
+
+  + ``pad(1, 3 of 12)`` => ``pad(1 3 of 12)``
+
+
+2.0.0.beta.1 — Dec 24 2013
 --------------------------
 
 - Add ``susy-breakpoint`` mixin for basic integration with `Breakpoint`_.

data/sass/susy/_math.scss

@@ -3,5 +3,4 @@
 
 @import "math/settings";
 @import "math/validation";
-@import "math/container";
 @import "math/columns";

data/sass/susy/language/_shared.scss

@@ -0,0 +1,4 @@
+// Shared Language
+// ===============
+
+@import "shared/maps";

data/sass/susy/language/_susy.scss

@@ -1,8 +1,10 @@
 // Susy Next Syntax
 // ================
 
+@import "shared";
+
 @import "../math";
-@import "../api/float";
+@import "../output/float";
 
 @import "susy/settings";
 @import "susy/grids";

data/sass/susy/language/shared/_maps.scss

@@ -0,0 +1,85 @@
+// Map Toolkit
+// ===========
+
+// Truncate List
+// -------------
+// - Return a list, truncated to a given length
+@function truncate-list(
+  $list,
+  $length
+) {
+  $return: ();
+
+  @for $i from 1 through length($list) {
+    $return: if($i <= $length, append($return, nth($list, $i)), $return);
+  }
+
+  @return $return;
+}
+
+// Deep Get
+// --------
+// - Return a value deep in nested maps
+@function deep-get(
+  $map,
+  $keys...
+) {
+  $return: $map;
+
+  @each $key in $keys {
+    @if type-of($return) == map {
+      $return: map-get($return, $key);
+    }
+  }
+
+  @return $return;
+}
+
+// Deep Set
+// --------
+// - Set a value deep in nested maps
+@function deep-set(
+  $map,
+  $keys,
+  $value
+) {
+  $length: length($keys);
+  $return: ();
+
+  @for $i from 1 through $length {
+    $n: 0 - $i;
+    $level: truncate-list($keys, $length + $n);
+    $level: deep-get($map, $level...);
+    $merge: (nth($keys, $n): $value);
+    $value: if($level, map-merge($level, $merge), $merge);
+    $return: $value;
+  }
+
+  @return $return;
+}
+
+// Deep Has-Key
+// ------------
+// - Return true if a deep key exists
+@function deep-has-key(
+  $map,
+  $keys...
+) {
+  $return: null;
+  $break: false;
+
+  @each $key in $keys {
+    @if not $break {
+      $return: map-has-key($map, $key);
+    }
+
+    @if $return {
+      $map: map-get($map, $key);
+    } @else {
+      $break: true;
+    }
+  }
+
+  @return $return;
+}
+

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

@@ -1,17 +1,37 @@
 // Background Grid Syntax
 // ======================
 
-$debug-defaults: (
-  color: rgba(#66f, .25),
-  toggle: top right,
-);
+$susy-overlay-grid-head-exists: false;
 
-// Show Grid
-// ---------
-// Show a grid background on any element.
+
+// Show Grid/s
+// -----------
+// Show grid on any element using either background or overlay.
 // - [$grid]  : <settings>
 @mixin show-grid(
   $grid: $susy
+) {
+  $output: debug-get(output, $grid);
+
+  @if $output == overlay {
+    @include overlay-grid($grid);
+  } @else {
+    @include background-grid($grid);
+  }
+}
+
+@mixin show-grids(
+  $grid: $susy
+) {
+  @include show-grid($grid);
+}
+
+// Background Grid
+// ---------------
+// Show a grid background on any element.
+// - [$grid]  : <settings>
+@mixin background-grid(
+  $grid: $susy
 ) {
   $output: get-background($grid);
 
@@ -29,27 +49,34 @@ $debug-defaults: (
   }
 }
 
-@mixin show-grids(
-  $grid: $susy
-) {
-  @include show-grid($grid);
-}
 
-// Grid Overlay
+// Overlay Grid
 // ------------
 // Generate an icon to trigger grid-overlays on any given elements.
 // $grids...  : <selector> [<settings>] [, <selector>]*
-@mixin grid-overlay (
-  $grids...
+@mixin overlay-grid (
+  $grid: $susy
 ) {
-  head {
-    @include overlay-head;
-    &:hover {
-      @include overlay-backgrounds($grids...);
+  @if not $susy-overlay-grid-head-exists {
+    @at-root head { @include overlay-head; }
+    $susy-overlay-grid-head-exists: true !global;
+  }
+
+  $selector: #{&};
+
+  @at-root head:hover {
+    ~ #{$selector},
+    ~ body #{$selector} {
+      position: relative;
+      &::before {
+        @include grid-overlay-base;
+        @include background-grid($grid);
+      }
     }
   }
 }
 
+
 // [Private] Overlay Head
 // ----------------------
 // <head> styles to create grid overlay toggle
@@ -86,31 +113,11 @@ $debug-defaults: (
   }
 }
 
-// [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 {
+@mixin grid-overlay-base() {
   position: absolute;
   top: 0;
   left: 0;
@@ -120,6 +127,7 @@ $debug-defaults: (
   z-index: 998;
 }
 
+
 // Get Symmetrical Background
 // --------------------------
 // - $grid: <map>
@@ -158,6 +166,7 @@ $debug-defaults: (
   @return $background;
 }
 
+
 // Get Asymmetrical Inside
 // -----------------------
 // - $grid: <settings>
@@ -196,6 +205,7 @@ $debug-defaults: (
   @return $stops;
 }
 
+
 // Get Asymmetrical Split
 // ----------------------
 // - $grid: <settings>
@@ -227,6 +237,7 @@ $debug-defaults: (
   @return $stops;
 }
 
+
 // Get Asymmetrical Outside
 // ------------------------
 // - $grid: <settings>
@@ -270,6 +281,7 @@ $debug-defaults: (
   @return $stops;
 }
 
+
 // Get Asymmetrical Background
 // ---------------------------
 // - $grid: <settings>
@@ -289,6 +301,7 @@ $debug-defaults: (
   @return (image: (columns: $stops));
 }
 
+
 // Get Background
 // --------------
 // - $grid: <settings>
@@ -296,7 +309,7 @@ $debug-defaults: (
   $grid
 ) {
   $grid     : parse-grid($grid);
-  $show     : susy-get(show-grids, $grid);
+  $show     : susy-get(debug image, $grid);
   $return   : ();
 
   @if $show and $show != hide {
@@ -342,14 +355,15 @@ $debug-defaults: (
   @return $return;
 }
 
+
 // Get Debug
 // ---------
 // Return the value of a debug setting
 // - $key: <setting>
 @function debug-get(
-  $key
+  $key,
+  $grid: $susy
 ) {
-  $user: variable-exists(debug);
-  $map: if($user, map-merge($debug-defaults, $debug), $debug-defaults);
-  @return map-get($map, $key);
+  $key: join(debug, $key, space);
+  @return susy-get($key);
 }

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

@@ -4,44 +4,24 @@
 // Bleed
 // -----
 // Add negative margins, and equal positive padding to create bleed.
-// - $span  : <span>
+// - $bleed  : <span>
 @mixin bleed(
   $bleed: 0 gutter()
 ) {
-  $bleed    : map-merge(parse-span($bleed), (spread: wide));
-  $trbl     : susy-get(span, $bleed);
-  $spans    : (top: 0, right: 0, bottom: 0, left: 0);
-
-  $i: 1;
-  @each $span in $trbl {
-    $this: map-merge($bleed, (span: $span));
-    $span: span($this);
+  $output: get-bleed($bleed);
 
-    @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($bleed);
-      $padding: if(comparable($padding, $gutter), $padding + $gutter, $padding);
-    }
-    margin-#{$side}: if($span != 0, 0 - $span, null);
-    padding-#{$side}: if($padding != 0, $padding, null);
+  @each $property, $value in $output {
+    #{$property}: $value;
   }
 
   @include susy-box-sizing(content-box);
 }
 
+
+// Bleed-x
+// -------
+// Shortcut for horizontal bleed.
+// - $bleed  : <span>
 @mixin bleed-x(
   $bleed: gutter()
 ) {
@@ -59,6 +39,11 @@
   @include bleed($bleed);
 }
 
+
+// Bleed-y
+// -------
+// Shortcut for vertical bleed.
+// - $bleed  : <span>
 @mixin bleed-y(
   $bleed: if(function-exists(rhythm), rhythm(1), 1em)
 ) {
@@ -75,3 +60,139 @@
 
   @include bleed($bleed);
 }
+
+
+// Get Bleed
+// ---------
+// Return bleed output values
+// - $bleed: <span>
+@function get-bleed(
+  $bleed
+) {
+  $bleed    : map-merge((spread: wide), parse-span($bleed));
+  $trbl     : susy-get(span, $bleed);
+  $short    : null;
+  $output   : ();
+
+  @for $i from 1 through length($trbl) {
+    $this: nth($trbl, $i);
+    $new: ();
+    $margin: null;
+    $padding: null;
+    $padding-x: null;
+
+    @if $this > 0 {
+      $this: map-merge($bleed, (span: $this));
+      $margin: span($this);
+      $padding: $margin;
+      $padding-x: $padding;
+    }
+
+    @if $margin and $margin > 0 {
+      $margin: - $margin;
+
+      @if is-inside($this) {
+        $gutter: gutter($this);
+        $join: if($gutter and comparable($padding, $gutter), true, false);
+        $padding-x: if($join and $padding > 0, $padding + $gutter, $padding);
+      }
+    }
+
+    @if $i == 1 {
+      $new: (
+        margin-top: $margin,
+        padding-top: $padding,
+        margin-right: $margin,
+        padding-right: $padding-x,
+        margin-bottom: $margin,
+        padding-bottom: $padding,
+        margin-left: $margin,
+        padding-left: $padding-x,
+      );
+    } @else if $i == 2 {
+      $new: (
+        margin-right: $margin,
+        padding-right: $padding-x,
+        margin-left: $margin,
+        padding-left: $padding-x,
+      );
+    } @else if $i == 3 {
+      $new: (
+        margin-bottom: $margin,
+        padding-bottom: $padding,
+      );
+    } @else if $i == 4 {
+      $new: (
+        margin-left: $margin,
+        padding-left: $padding-x,
+      );
+    }
+
+    $output: map-merge($output, $new);
+  }
+
+  @each $prop, $value in $output {
+    $output: if($value == 0, map-merge($output, ($prop: null)), $output);
+  }
+
+  @return bleed-shorthand($output);
+}
+
+// Bleed Shorthand
+// ---------------
+// Convert bleed output into shorthand when possible.
+// - $bleed: <output map>
+@function bleed-shorthand(
+  $bleed
+) {
+  $margin: ();
+  $padding: ();
+  $return: ();
+
+  @each $key, $value in $bleed {
+    @if str-index($key, margin) > 0 {
+      $margin: map-merge($margin, ($key: $value));
+    } @else if str-index($key, padding) > 0 {
+      $padding: map-merge($padding, ($key: $value));
+    }
+  }
+
+  $props: (
+    margin: $margin,
+    padding: $padding,
+  );
+
+  @each $name, $map in $props {
+    $four: if(length(map-keys($map)) == 4, true, false);
+    $null: if(index(map-values($map), null), true, false);
+
+    @if $four and not $null {
+      $top: map-get($map, '#{$name}-top');
+      $right: map-get($map, '#{$name}-right');
+      $bottom: map-get($map, '#{$name}-bottom');
+      $left: map-get($map, '#{$name}-left');
+
+      $tb: if($top == $bottom, $top, null);
+      $rl: if($right == $left, $right, null);
+      $all: if($tb == $rl, $tb, null);
+
+      $new: if($all, $all, null);
+
+      @if not $new {
+        @if $tb and $rl {
+          $new: $tb $rl;
+        } @else if $rl {
+          $new: $top $rl $bottom;
+        } @else {
+          $new: $top $right $bottom $left;
+        }
+      }
+
+      $return: map-merge($return, ($name: $new));
+    } @else {
+      $return: map-merge($return, $map);
+    }
+  }
+
+  @return $return;
+}