susy 2.0.0.alpha.2 → 2.0.0.alpha.3

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

@@ -1,52 +1,70 @@
 // Grid Syntax
 // ===========
 
+// layout math
+// - static | fluid
+$layout-math          : fluid           !default;
+
+// layout method
+// - isolate | float
+$layout-method        : float           !default;
+
+// layout direction
+// - ltr | rtl
+$flow                 : ltr             !default;
+
+// box-sizing
+// false | border-box | content-box
+$box-sizing           : false           !default;
+
+// container justification
+// - left | center | right
+$container-position   : center          !default;
+
+// gutter handling
+// - before | after | split
+$gutter-position      : after           !default;
+
+// show/hide grids
+// show | show-columns | show-baseline | hide
+$show-grids           : show-columns    !default;
+
+// Set Grid
+// --------
 // Set a new grid using a shorthand
+// - $grid      : <settings>
+// - [$clean]   : true | false (resets container, column-width, & box-sizing)
 @mixin set-grid(
   $grid,
   $clean: false
 ) {
-  $grid               : parse-grid($grid);
+
+  $grid                 : get-adjusted-grid($grid, $clean);
 
   // get values
-  $new-columns        : get-setting(columns, $grid);
-  $new-gutters        : get-setting(gutters, $grid);
-  $new-container      : get-setting(container, $grid);
-  $new-column-width   : get-setting(column-width, $grid);
-  $new-static         : get-setting(static, $grid);
-  $new-isolate        : get-setting(isolate, $grid);
-
-  $new-flow           : get-setting(flow, $grid);
-  $new-gutter-place   : get-setting(gutter-placement, $grid);
-  $new-show-grids     : get-setting(show-grids, $grid);
-  $new-box            : get-setting(box-sizing, $grid);
-
-  // fill missing values
-  @if not $clean {
-    $new-columns          : if($new-columns, $new-columns, $columns);
-    $new-gutters          : if($new-gutters, $new-gutters, $gutters);
-    $new-container        : if($new-container, $new-container, $container);
-    $new-column-width     : if($new-column-width, $new-column-width, $column-width);
-    $new-static           : if($new-static, $new-static, $static);
-    $new-isolate          : if($new-isolate, $new-isolate, $isolate);
-    $new-box              : if($new-box, $new-box, $box-sizing);
-  }
+  $columns              : get-setting(columns, $grid);
+  $gutters              : get-setting(gutters, $grid);
+  $container            : get-setting(container, $grid);
+  $column-width         : get-setting(column-width, $grid);
+  $layout-math          : get-setting(layout-math, $grid);
+  $layout-method        : get-setting(layout-method, $grid);
+
+  $flow                 : get-setting(flow, $grid);
+  $gutter-position      : get-setting(gutter-position, $grid);
+  $container-position   : get-setting(container-position, $grid);
+  $show-grids           : get-setting(show-grids, $grid);
+  $box                  : get-setting(box-sizing, $grid);
 
-  // set values
-  $columns            : $new-columns;
-  $gutters            : $new-gutters;
-  $container          : $new-container;
-  $column-width       : $new-column-width;
-  $static             : $new-static;
-  $isolate            : $new-isolate;
-  $box-sizing         : $new-box;
-
-  $flow               : if($new-flow, $new-flow, $flow);
-  $gutter-placement   : if($new-gutter-place, $new-gutter-place, $gutter-placement);
-  $show-grids         : if($new-show-grids, $new-show-grids, $show-grids);
+  $container            : get-setting(container, $grid);
+  $column-width         : get-setting(column-width, $grid);
+  $box-sizing           : get-setting(box-sizing, $grid);
 }
 
+// Use Grid
+// --------
 // Use an arbitrary grid for a section of code
+// - $grid      : <settings>
+// - [$clean]   : true | false (resets container, column-width, & box-sizing)
 @mixin use-grid(
   $grid,
   $clean: false
@@ -58,149 +76,209 @@
   @include set-grid($old-grid, $clean);
 }
 
-// Grid helpers
-// ------------
-
+// Get Grid
+// --------
 // Get the current grid settings as a shorthand list
 @function get-grid(
 ) {
-  $gutter-setting       : $gutters;
-  $static-setting       : false;
-  $isolate-setting      : false;
-  $show-grids-setting   : false;
+  $new-gutters        : $gutters;
+  $new-show-grids     : false;
 
   // Use units for column/gutter ratio if available
   @if $column-width {
-    $gutter-setting: $column-width $column-width * $gutters;
-  }
-
-  // Create keyword for static setting
-  @if $static and $static != fluid {
-    $static-setting: static;
-  } @else {
-    $static-setting: fluid;
-  }
-
-  // Create keyword for isolate setting
-  @if $isolate and $isolate != float {
-    $isolate-setting: isolate;
-  } @else {
-    $isolate-setting: float;
+    $new-gutters: $column-width $column-width * $gutters;
   }
 
   // Create keyword for show-grids setting
-  @if $show-grids and $show-grids != hide {
-    $show-grids-setting: show;
+  @if type-of($show-grids) == bool {
+    @if $show-grids {
+      $new-show-grids: show;
+    } @else {
+      $new-show-grids: hide;
+    }
   } @else {
-    $show-grids-setting: hide;
+    $new-show-grids: $show-grids;
   }
 
   // Return grid shorthand
-  @return compact($container $columns $gutter-setting $static-setting $isolate-setting $show-grids-setting $flow $gutter-placement $box-sizing);
+  @return compact($container $columns $new-gutters $layout-math $layout-method $container-position $new-show-grids $flow $gutter-position $box-sizing);
 }
 
+// Parse Grid
+// ----------
 // Parse a shorthand grid, and return an ordered list of settings
+// - [$grid]  : <settings>
 @function parse-grid(
   $grid: get-grid()
 ) {
-  $columns-setting        : false;
-  $gutters-setting        : false;
-  $container-setting      : false;
-  $column-width-setting   : false;
-  $static-setting         : false;
-  $isolate-setting        : false;
-  $flow-setting           : false;
-  $gutter-place-setting   : false;
-  $show-setting           : false;
-  $box-setting            : false;
-
-  $columns-check          : false;
+  $new-columns              : false;
+  $new-gutters              : false;
+  $new-container            : false;
+  $new-column-width         : false;
+  $new-layout-math          : false;
+  $new-layout-method        : false;
+  $new-container-position   : false;
+  $new-flow                 : false;
+  $new-gutter-position      : false;
+  $new-show-grids           : false;
+  $new-box-sizing           : false;
+
+  $columns-check            : false;
 
   @each $value in $grid {
     @if type-of($value) == string {
-      // output: static | fluid
+      // layout-math: static | fluid
       @if $value == static {
-        $static-setting: static;
+        $new-layout-math: static;
       } @else if $value == fluid {
-        $static-setting: fluid;
+        $new-layout-math: fluid;
       }
 
-      // output: isolate | fluid
+      // layout-method: isolate | fluid
       @if $value == isolate {
-        $isolate-setting: isolate;
+        $new-layout-method: isolate;
       } @else if $value == float {
-        $isolate-setting: float;
+        $new-layout-method: float;
+      }
+
+      // container-position: left | center | right
+      @if $value == left {
+        $new-container-position: left;
+      } @else if $value == right {
+        $new-container-position: right;
+      } @else if $value == center {
+        $new-container-position: center;
       }
 
       // flow: ltr | rtl
       @if $value == rtl {
-        $flow-setting: rtl;
+        $new-flow: rtl;
       } @else if $value == ltr {
-        $flow-setting: ltr;
+        $new-flow: ltr;
       }
 
       // show-grid: show | hide
       @if $value == show {
-        $show-setting: show;
+        $new-show-grids: show;
       } @else if $value == hide {
-        $show-setting: hide;
+        $new-show-grids: hide;
+      } @else if $value == show-columns {
+        $new-show-grids: show-columns;
+      } @else if $value == show-baseline {
+        $new-show-grids: show-baseline;
       }
 
-      // gutter-placement: before | after | split | no-gutters
+      // gutter-position: before | after | split | no-gutters
       @if $value == before {
-        $gutter-place-setting: before;
+        $new-gutter-position: before;
       } @else if $value == after {
-        $gutter-place-setting: after;
+        $new-gutter-position: after;
       } @else if $value == split {
-        $gutter-place-setting: split;
+        $new-gutter-position: split;
       } @else if $value == inside {
-        $gutter-place-setting: inside;
+        $new-gutter-position: inside;
       } @else if $value == no-gutters {
-        $gutter-place-setting: no-gutters;
+        $new-gutter-position: no-gutters;
       }
 
       // box-sizing: border-box | content-box
       @if $value == border-box {
-        $box-setting: border-box;
+        $new-box-sizing: border-box;
       } @else if $value == content-box {
-        $box-setting: content-box;
+        $new-box-sizing: content-box;
+      }
+
+      // auto container
+      @if $value == auto {
+        $new-container: auto;
       }
     }
 
     // container, columns, or gutters
     @else if type-of($value) == number {
       @if not unitless($value) {
-        $container-setting: $value;
+        $new-container: $value;
       } @else if not $columns-check {
-        $columns-setting: $value;
+        $new-columns: $value;
         $columns-check: true;
       } @else {
-        $gutters-setting: $value;
+        $new-gutters: $value;
       }
     }
 
     // columns or gutters
     @else if type-of($value) == list {
       @if unitless(nth($value,1)) {
-        $columns-setting: $value;
+        $new-columns: $value;
         $columns-check: true;
       } @else {
-        $column-width-setting: nth($value,1);
-        $gutters-setting: nth($value,2) / nth($value,1);
+        $new-column-width: nth($value,1);
+        $new-gutters: nth($value,2) / nth($value,1);
       }
     }
   }
 
-  @return $columns-setting $gutters-setting $container-setting $column-width-setting $static-setting $isolate-setting $flow-setting $gutter-place-setting $show-setting $box-setting;
+  @return $new-columns $new-gutters $new-container $new-column-width $new-layout-math $new-layout-method $new-container-position $new-flow $new-gutter-position $new-show-grids $new-box-sizing;
+}
+
+// Get Adjusted Grid
+// -----------------
+// Fill missing grid values based on global settings
+// - $grid      : <settings>
+// - [$clean]   : true | false (resets container, column-width, & box-sizing)
+@function get-adjusted-grid(
+  $grid,
+  $clean: false
+) {
+  $grid                   : parse-grid($grid);
+
+  $new-columns            : get-setting(columns, $grid);
+  $new-gutters            : get-setting(gutters, $grid);
+  $new-layout-math        : get-setting(layout-math, $grid);
+  $new-layout-method      : get-setting(layout-method, $grid);
+  $new-flow               : get-setting(flow, $grid);
+  $new-gutter-place       : get-setting(gutter-position, $grid);
+  $new-container-position : get-setting(container-position, $grid);
+  $new-show-grids         : get-setting(show-grids, $grid);
+
+  $new-container          : get-setting(container, $grid);
+  $new-column-width       : get-setting(column-width, $grid);
+  $new-box-sizing         : get-setting(box-sizing, $grid);
+
+  // Set required values
+  $new-columns            : if($new-columns, $new-columns, $columns);
+  $new-gutters            : if($new-gutters, $new-gutters, $gutters);
+  $new-layout-math        : if($new-layout-math, $new-layout-math, $layout-math);
+  $new-layout-method      : if($new-layout-method, $new-layout-method, $layout-method);
+  $new-flow               : if($new-flow, $new-flow, $flow);
+  $new-gutter-place       : if($new-gutter-place, $new-gutter-place, $gutter-position);
+  $new-container-position : if($new-container-position, $new-container-position, $container-position);
+  $new-show-grids         : if($new-show-grids, $new-show-grids, $show-grids);
+
+  // optionally fill values based on current grid
+  @if $clean {
+    $new-container        : if($new-container, $new-container, auto);
+  } @else {
+    $new-container        : if($new-container, $new-container, $container);
+    $new-column-width     : if($new-column-width, $new-column-width, $column-width);
+    $new-box-sizing       : if($new-box-sizing, $new-box-sizing, $box-sizing);
+  }
+
+  @return $new-columns, $new-gutters, $new-container, $new-column-width, $new-layout-math, $new-layout-method, $new-container-position, $new-flow, $new-gutter-place, $new-show-grids, $new-box-sizing;
 }
 
+// Get Setting
+// -----------
 // Return one setting from a shorhand grid
+// - setting    : <keyword> (see $options below)
+// - $grid      : <settings>
+// - [$parse]   : true | false
 @function get-setting(
   $setting,
-  $grid   : parse-grid(get-grid()),
+  $grid   : parse-grid(),
   $parse  : false
 ) {
-  $options  : columns gutters container column-width static isolate flow gutter-placement show-grids box-sizing;
+  $options  : columns gutters container column-width layout-math layout-method container-position flow gutter-position show-grids box-sizing;
   $key      : index($options, $setting);
   $value    : false;
 
@@ -208,8 +286,10 @@
     $grid: parse-grid($grid);
   }
 
-  @if $key and not ($key > length($grid)) {
+  @if $key {
     $value: nth($grid, $key);
+  } @else {
+    @warn '"#{$setting}" is not a valid grid setting.';
   }
 
   @return $value;

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

@@ -1,88 +1,43 @@
-// Background Grids
-// ================
+// Background Grid Syntax
+// ======================
+
+@import "compass/layout/stretching";
 
 // 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;
+$overlay-position       : relative        !default;
 
 // Set the location of the switch.
-$grid-toggle-position: left bottom !default;
+$grid-toggle-position   : left bottom     !default;
+
+// Set the color of background grids.
+$grid-background-color  : rgba(#66f, .25) !default;
 
-// Set the color of background grids/
-$grid-background-color: rgba(#66f, .25) !default;
+// Set the line height for your vertical rhythm.
+$base-line-height       : 24px            !default;
 
 // Grid Background
 // ---------------
-
+// Show a grid background on any element.
+// - [$grid]  : <settings>
 @mixin grid-background(
-  $grid: parse-grid()
+  $grid: get-grid()
 ) {
-  $stops  : compact();
-  $color  : $grid-background-color;
-
-  @if length($grid) == 2 and type-of(nth($grid,2)) == color {
-    $color: nth($grid,2);
-    $grid: nth($grid,1);
-  }
-
-  $trans  : transparent;
-  $light  : lighten($color, 15%);
-
-  $this-columns       : get-setting(columns, $grid);
-  $this-gutters       : get-setting(gutters, $grid);
-  $this-column-width  : get-setting(column-width, $grid);
-  $this-static        : get-setting(static, $grid);
-  $this-gutter-place  : get-setting(gutter-placement, $grid);
-  $this-flow          : get-setting(flow, $grid);
-
-  $this-static        : if($this-static and $this-static != fluid, true, false);
+  $grid         : get-adjusted-grid($grid);
 
-  @for $location from 1 through column-count($this-columns) {
-    $this-stop: compact();
+  $this-flow    : get-setting(flow, $grid);
+  $this-show    : get-setting(show-grids, $grid);
 
-    @if $location > 1 {
-      $start: get-isolation(1, $location, $this-columns, $this-gutters, $this-column-width, $this-static);
-      $this-stop: append($this-stop, $color $start, comma);
-    }
+  $stops        : get-grid-color-stops($grid);
 
-    @if $location == column-count($this-columns) {
-      $this-stop: append($this-stop, $light 100%, comma);
-    } @else {
-      $end: get-span-width($location, 1, $this-columns, $this-gutters, $this-column-width, $this-static, $this-gutter-place);
-      $gutter: get-isolation(1, $location + 1, $this-columns, $this-gutters, $this-column-width, $this-static);
-
-      $this-stop: append($this-stop, $light $end, comma);
-      $this-stop: append($this-stop, $trans $end, comma);
-      $this-stop: append($this-stop, $trans $gutter, comma);
-    }
-
-    $stops: join($stops, $this-stop, comma);
-  }
-
-  @include grid-background-output($stops, $this-flow)
+  @include grid-background-output($stops, $this-show, $this-flow);
 }
 
 // Grid Overlay
 // ------------
-
-%grid-overlay-container {
-  position: unquote($overlay-position);
-}
-
-%grid-overlay {
-  content: " ";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 100%;
-  width: 100%;
-  z-index: 998;
-  background-color: rgba(red,.25);
-}
-
+// Generate an icon to trigger grid-overlays on any given elements.
+// $grids...  : <selector> [<settings>] [, <selector>]*
 @mixin grid-overlay (
   $grids...
 ) {
@@ -90,7 +45,6 @@ $grid-background-color: rgba(#66f, .25) !default;
   $horz: nth($grid-toggle-position, 2);
 
   head {
-    @include transition(all .4s);
     @include border-radius(.25em);
     display: block;
     position: fixed;
@@ -112,21 +66,76 @@ $grid-background-color: rgba(#66f, .25) !default;
     }
     &:hover {
       @include box-shadow(0 0 3px rgba(#333,.5));
-      color: #333;
       background: rgba(white,.5);
       @each $grid in $grids {
         $selector: nth($grid, 1);
-        $grid: parse-grid(nth($grid,2));
+        $grid: if(length($grid) > 1, nth($grid, 2), get-grid());
 
+        ~ #{$selector},
         ~ body #{$selector} {
-          @extend %grid-overlay-container;
-        }
-        ~ #{$selector}::before,
-        ~ body #{$selector}::before {
-          @extend %grid-overlay;
-          @include grid-background($grid);
+          position: unquote($overlay-position);
+          &::before {
+            @extend %grid-overlay-base;
+            @include grid-background($grid);
+          }
         }
       }
     }
   }
 }
+
+%grid-overlay-base {
+  @include stretch;
+  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()
+) {
+  $stops  : ();
+  $color  : $grid-background-color;
+  $trans  : transparent;
+  $light  : lighten($color, 15%);
+
+  $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);
+
+  @for $location from 1 through column-count($this-columns) {
+    $this-stop: compact();
+
+    @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);
+      $this-stop: append($this-stop, $color $start, comma);
+    }
+
+    @if $location == column-count($this-columns) {
+      $this-stop: append($this-stop, $light, comma);
+    } @else {
+      $end-color: $light;
+
+      @if $this-gutter-position != 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: get-isolation(1, $location + 1, $this-columns, $this-gutters, $this-column-width, $this-layout-math);
+      $this-stop: append($this-stop, $end-color $end, comma);
+    }
+
+    $stops: join($stops, $this-stop, comma);
+  }
+
+  @return $stops;
+}