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

data/sass/susy/language/susy/_container.scss

@@ -1,100 +1,80 @@
 // Container Syntax
 // ================
 
+// Container [mixin]
+// -----------------
 // Set a container element
+// - [$grid]  : <settings>
 @mixin container(
-  $container: get-container()
+  $grid: get-grid()
 ) {
-  $container  : parse-container($container);
-  $grid       : parse-grid(nth($container,1));
-  $justify    : nth($container,2);
-  $show       : nth($container,3);
-  $box        : get-setting(box-sizing, $grid);
-
-  // if there is a container width, use it
-  $width      : get-setting(container, $grid);
+  $grid                   : get-adjusted-grid($grid);
 
-  @if not $width {
-    // if we have a column width, calculate container from that
-    $column-width-setting: get-setting(column-width, $grid);
-
-    @if $column-width-setting {
-      $columns-setting: get-setting(columns, $grid);
-      $gutters-setting: get-setting(gutters, $grid);
-      $outer: if(get-setting(gutter-placement, $grid) == inside, true, false);
-
-      $width: calculate-container-width($columns-setting, $gutters-setting, $column-width-setting, $outer);
-    } @else {
-      // if we have nothing, default to 100%
-      $width: 100%;
-    }
-  }
+  $this-container         : get-setting(container, $grid);
+  $this-column-width      : get-setting(column-width, $grid);
+  $this-columns           : get-setting(columns, $grid);
+  $this-gutters           : get-setting(gutters, $grid);
+  $this-gutter-position   : get-setting(gutter-position, $grid);
+  $this-layout-math       : get-setting(layout-math, $grid);
 
-  @if $show and $show != hide {
-    @include grid-background($grid);
-  }
+  $width      : get-container-width($this-container, $this-column-width, $this-columns, $this-gutters, $this-gutter-position);
+  $justify    : get-setting(container-position, $grid);
+  $box        : get-setting(box-sizing, $grid);
 
-  @if $box == border-box {
-    @include box-sizing(border-box);
-  } @else if $box == content-box {
-    @include box-sizing(content-box);
+  @if $box {
+    @include box-sizing($box);
   }
 
-  @include float-container($width, $justify, $show);
+  @include float-container($width, $justify, $this-layout-math);
+  @include grid-background($grid);
 }
 
-// Container Helpers
-// -----------------
-
-// Get the current container-related settings
-@function get-container(
+// Container [function]
+// --------------------
+// Return container width
+// - [$grid]  : <settings>
+@function container(
+  $grid: get-grid()
 ) {
-  $show: false;
+  $grid                   : get-adjusted-grid($grid);
 
-  // Create keyword for show-grids setting
-  @if $show-grids and $show-grids != "hide" {
-    $show: show;
-  } @else {
-    $show: hide;
-  }
+  $this-container         : get-setting(container, $grid);
+  $this-column-width      : get-setting(column-width, $grid);
+  $this-columns           : get-setting(columns, $grid);
+  $this-gutters           : get-setting(gutters, $grid);
+  $this-gutter-position   : get-setting(gutter-position, $grid);
 
-  @return get-grid() $container-position $show;
+  $width: get-container-width($this-container, $this-column-width, $this-columns, $this-gutters, $this-gutter-position);
+
+  @return $width;
 }
 
-// parse the container shorthand syntax, and return an ordered list
-@function parse-container(
-  $container: get-container()
+// Get Container Width
+// -------------------
+// Calculate the container width
+// - [$container]         : <length> | false
+// - [$column-width]      : <length> | false
+// - [$columns]           : <columns>
+// - [$gutters]           : <ratio>
+// - [$gutter-position]   : before | after | split | inside
+@function get-container-width(
+  $container        : $container,
+  $column-width     : $column-width,
+  $columns          : $columns,
+  $gutters          : $gutters,
+  $gutter-position  : $gutter-position
 ) {
-  $grid     : false;
-  $justify  : $container-position;
-  $show     : $show-grids;
-
-  // justify: left | center | right
-  @if index($container, left) {
-    $justify: left;
-    $container: filter($container, left);
-  } @else if index($container, center) {
-    $justify: center;
-    $container: filter($container, center);
-  } @else if index($container, right) {
-    $justify: right;
-    $container: filter($container, right);
-  }
+  $width: $container;
 
-  // show-grids: show | hide
-  @if index($container, show) {
-    $show: true;
-    $container: filter($container, show);
-  } @else if index($container, hide) {
-    $show: false;
-    $container: filter($container, hide);
-  }
-
-  @if length($container) == 1 {
-    $grid: nth($container,1);
-  } @else {
-    $grid: $container;
+  @if not $width or $width == auto {
+    @if $column-width {
+      $outer: if($gutter-position == inside, true, false);
+      $width: calculate-container-width($columns, $gutters, $column-width, $outer);
+    } @else {
+      // if we have nothing, default to 100%
+      $width: 100%;
+    }
   }
 
-  @return $grid $justify $show;
+  @return $width;
 }

data/sass/susy/language/susy/_gallery.scss

@@ -1,92 +1,71 @@
 // Gallery Syntax
 // ==============
 
-// Create a gallery
+// Gallery
+// -------
+// Create an isolated gallery
+// - $input       : <span>
+// - [$selector]  : child | of-type
 @mixin gallery(
   $input,
   $selector: child
 ) {
-  $this-isolate: get-span-setting(isolate, $input, parse);
-
-  @if $this-isolate {
-    @include isolate-gallery($input);
-  } @else {
-    @include nth-gallery($input);
+  $input                  : parse-span($input);
+  $width                  : null;
+  $location               : 1;
+
+  $span                   : get-span-setting(span, $input);
+  $this-columns           : get-span-setting(columns, $input);
+  $this-gutters           : get-span-setting(gutters, $input);
+  $this-column-width      : get-span-setting(column-width, $input);
+  $this-layout-math       : get-span-setting(layout-math, $input);
+  $this-gutter-position   : get-span-setting(gutter-position, $input);
+  $this-flow              : get-span-setting(flow, $input);
+
+  $box                    : get-span-setting(box-sizing, $input);
+  $inside                 : if(get-span-setting(gutter-position, $input) == inside, true, false);
+
+  $from                   : from($this-flow);
+  $context                : column-count($this-columns);
+  $line                   : floor($context / $span);
+
+  $padding-before         : null;
+  $padding-after          : null;
+
+  @if $inside {
+    $inside-gutter: get-gutters($this-columns, $this-gutters, $this-column-width, $this-layout-math, $this-gutter-position);
+    $padding-before: nth($inside-gutter, 1);
+    $padding-after: nth($inside-gutter, 2);
   }
-}
-
-// Gallery Helpers
-// ---------------
-
-// Create a floated gallery
-@mixin nth-gallery(
-  $input,
-  $selector: child
-) {
-  $this-input         : parse-span($input);
-
-  $span               : get-span-setting(span, $this-input);
-  $this-columns       : get-span-setting(columns, $this-input);
-  $context            : column-count($this-columns);
-  $line               : floor($context / $span);
-
-  @if is-symmetrical($this-columns) {
-    @include span($input);
-    @include nth-first('#{$line}n + 1');
-    @include nth-last('#{$line}n');
-  } @else {
-    $location           : 1;
-
-    @for $item from 1 through $line {
-      $nth: '#{$line}n + #{$item}';
-      &:#{format-nth($nth,$selector)} {
-        $location-input: join($input, at $location);
-
-        @include span($location-input);
 
-        $location: $location + $span;
-        @if $location > $context { $location: 1; }
-      }
-    }
+  @if $box == border-box or $inside {
+    @include box-sizing(border-box);
+  } @else if $box == content-box {
+    @include box-sizing(content-box);
   }
-}
-
-// Create an isolated gallery
-@mixin isolate-gallery(
-  $input,
-  $selector: child
-) {
-  $input              : parse-span($input);
-  $width              : null;
-  $location           : 1;
-
-  $span               : get-span-setting(span, $input);
-  $this-columns       : get-span-setting(columns, $input);
-  $this-gutters       : get-span-setting(gutters, $input);
-  $this-column-width  : get-span-setting(column-width, $input);
-  $this-static        : get-span-setting(static, $input);
-  $this-flow          : get-span-setting(flow, $input);
-
-  $from               : from($this-flow);
-  $context            : column-count($this-columns);
-  $line               : floor($context / $span);
 
   @if is-symmetrical($this-columns) {
-    $width: get-span-width($span, $location, $this-columns, $this-gutters, $this-column-width, $this-static);
+    $width: get-span-width($span, $location, $this-columns, $this-gutters, $this-column-width, $this-layout-math);
   }
 
-  @include float-span-output($width, $from, null, -100%, null, null, $this-flow);
+  @include float-span-output($width, from, null, -100%, $padding-before, $padding-after, $this-flow);
 
   @for $item from 1 through $line {
     $nth: '#{$line}n + #{$item}';
     &:#{format-nth($nth,$selector)} {
-      $width: get-span-width($span, $location, $this-columns, $this-gutters, $this-column-width, $this-static);
+      $width: get-span-width($span, $location, $this-columns, $this-gutters, $this-column-width, $this-layout-math);
       $width: if(is-symmetrical($columns), null, $width);
-      $before: get-isolation($span, $location, $this-columns, $this-gutters, $this-column-width, $this-static);
+      $before: get-isolation($span, $location, $this-columns, $this-gutters, $this-column-width, $this-layout-math);
 
       @include float-span-output($width, null, $before, null, null, null, $this-flow);
 
-      @if $location == 1 { clear: $from; }
+      @if is-first($location) {
+        @include first;
+        clear: $from;
+      } @else {
+        clear: none;
+      }
+
       $location: $location + $span;
       @if $location > $context { $location: 1; }
     }

data/sass/susy/language/susy/_gutters.scss

@@ -0,0 +1,117 @@
+// Gutter Syntax
+// =============
+
+// Gutters
+// -------
+// Set gutters on an element.
+// - [$context]   : <settings>
+@mixin gutters(
+  $context: get-grid()
+) {
+  $context: get-adjusted-grid($context);
+
+  $this-columns           : get-setting(columns, $context);
+  $this-gutters           : get-setting(gutters, $context);
+  $this-column-width      : get-setting(column-width, $context);
+  $this-layout-math       : get-setting(layout-math, $context);
+  $this-gutter-position   : get-setting(gutter-position, $context);
+  $this-flow              : get-setting(flow, $context);
+
+  $from: from($this-flow);
+  $to: to($this-flow);
+
+  $this-gutters: get-gutters($this-columns, $this-gutters, $this-column-width, $this-layout-math, $this-gutter-position);
+  $property: if($this-gutter-position == inside, padding, margin);
+
+  #{$property}-#{$from}: nth($this-gutters, 1);
+  #{$property}-#{$to}: nth($this-gutters, 2);
+}
+
+// Gutter
+// ------
+// Return the width of a gutter.
+// - [$context]   : <settings>
+@function gutter(
+  $context: get-grid()
+) {
+  $context            : get-adjusted-grid($context);
+
+  $this-columns       : get-setting(columns, $context);
+  $this-gutters       : get-setting(gutters, $context);
+  $this-column-width  : get-setting(column-width, $context);
+  $this-layout-math   : get-setting(layout-math, $context);
+  $this-gutter-position   : get-setting(gutter-position, $context);
+
+  $width: get-gutter-width($this-columns, $this-gutters, $this-column-width, $this-layout-math);
+
+  @if $this-gutter-position == inside or $this-gutter-position == split {
+    $width: $width / 2;
+  }
+
+  @return $width;
+}
+
+// Get Gutter Width
+// ----------------
+// Return gutter width.
+// - [$columns]       : <number> | <list>
+// - [$gutters]       : <ratio>
+// - [$column-width]  : <length>
+// - [$layout-math]   : fluid | static
+@function get-gutter-width(
+  $columns        : $columns,
+  $gutters        : $gutters,
+  $column-width   : $column-width,
+  $layout-math    : $layout-math
+) {
+  $context  : column-sum($columns, $gutters);
+  $gutter   : null;
+
+  @if $layout-math == static {
+    $gutter: $gutters * $column-width;
+  } @else {
+    $gutter: percentage($gutters / $context);
+  }
+
+  @return $gutter;
+}
+
+// Get Gutters
+// -----------
+// Return before and after gutter values.
+// - [$columns]           : <number> | <list>
+// - [$gutters]           : <ratio>
+// - [$column-width]      : <length>
+// - [$layout-math]       : fluid | static
+// - [$gutter-position]   : before | after |split | inside
+// - [$gutter-override]   : <length>
+@function get-gutters(
+  $columns            : $columns,
+  $gutters            : $gutters,
+  $column-width       : $column-width,
+  $layout-math        : $layout-math,
+  $gutter-position    : $gutter-position,
+  $gutter-override    : false
+) {
+  $gutter   : null;
+  $before   : null;
+  $after    : null;
+
+  @if $gutter-override {
+    $gutter: $gutter-override;
+  } @else {
+    $gutter: get-gutter-width($columns, $gutters, $column-width, $layout-math);
+  }
+
+  @if $gutter-position == before {
+    $before: $gutter;
+  } @else if $gutter-position == after {
+    $after: $gutter;
+  } @else if $gutter-position == split or $gutter-position == inside {
+    $gutter: if($gutter-override, $gutter, $gutter / 2);
+    $before: $gutter;
+    $after: $gutter;
+  }
+
+  @return $before $after;
+}

data/sass/susy/language/susy/_isolate.scss

@@ -1,7 +1,10 @@
 // Isolation Syntax
 // ================
 
-// Isolation Override
+// Isolate
+// -------
+// Set isolation as an override.
+// - $input   : <span>
 @mixin isolate(
   $input
 ) {
@@ -12,26 +15,30 @@
   $this-columns       : get-span-setting(columns, $input);
   $this-gutters       : get-span-setting(gutters, $input);
   $this-column-width  : get-span-setting(column-width, $input);
-  $this-static        : get-span-setting(static, $input);
+  $this-layout-math   : get-span-setting(layout-math, $input);
   $this-flow          : get-span-setting(flow, $input);
 
-  $push: get-isolation($span, $location, $columns, $gutters, $column-width, $static);
+  $push: get-isolation($span, $location, $columns, $gutters, $column-width, $layout-math);
 
-  @include isolate-output($push,$this-flow);
+  @include isolate-output($push, $this-flow);
 }
 
-// Isolation Helpers
-// -----------------
-
-// Return the isolation position
+// Get Isolation
+// -------------
+// Return the isolation offset width
+// - $span            : <length> | <number>
+// - $location        : <number>
+// - [$columns]       : <number> | <list>
+// - [$gutters]       : <ratio>
+// - [$column-width]  : <length>
+// - [$layout-math]   : fluid | static
 @function get-isolation(
   $span,
   $location,
-  $columns        : $columns,
-  $gutters        : $gutters,
-  $column-width   : $column-width,
-  $static         : $static,
-  $gutter-place   : $gutter-placement
+  $columns            : $columns,
+  $gutters            : $gutters,
+  $column-width       : $column-width,
+  $layout-math        : $layout-math
 ) {
   $context  : column-sum($columns, $gutters);
   $width    : null;
@@ -41,7 +48,7 @@
   } @else {
     $push: get-location-position($span, $location, $columns) - 1;
     @if $push > 0 {
-      $width: get-span-width($push, 1, $columns, $gutters, $column-width, $static, $gutter-place, outer);
+      $width: get-span-width($push, 1, $columns, $gutters, $column-width, $layout-math, $outer: outer);
     } @else {
       $width: null;
     }