susy 2.0.0.alpha.1 → 2.0.0.alpha.2

data/sass/susy/language/susy/_rows.scss

@@ -0,0 +1,78 @@
+// Row Start & End
+// ===============
+
+// Apply to any layout element that should force a new layout row.
+@mixin row(
+  $flow: $flow
+) {
+  $clear: $flow;
+
+  @if $flow == ltr or $flow == rtl {
+    $clear: from($flow);
+  }
+
+  clear: $clear;
+}
+
+// Cancel the row() effect, e.g. when using media queries.
+@mixin unrow {
+  clear: none;
+}
+
+// First item
+// ----------
+
+@mixin first(
+  $flow: $flow
+) {
+  @include float-first($flow);
+}
+
+@mixin alpha(
+  $flow: $flow
+) {
+  @include float-first($flow);
+}
+
+@mixin nth-first(
+  $value: first,
+  $type: child
+) {
+  &:#{format-nth($value,$type)} { @include first($flow); }
+}
+
+@mixin nth-alpha(
+  $value: first,
+  $type: child
+) {
+  @include nth-first($value, $type);
+}
+
+// Last item
+// ---------
+
+@mixin last(
+  $flow: $flow
+) {
+  @include float-last($flow);
+}
+
+@mixin omega(
+  $flow: $flow
+) {
+  @include float-last($flow);
+}
+
+@mixin nth-last(
+  $value: last,
+  $type: child
+) {
+  &:#{format-nth($value,$type)} { @include last($flow); }
+}
+
+@mixin nth-omega(
+  $value: last,
+  $type: child
+) {
+  @include nth-last($value, $type);
+}

data/sass/susy/language/susy/_span.scss

@@ -0,0 +1,204 @@
+// Span language parsing
+// =====================
+
+// Set a spanning element using shorthand syntax
+@mixin span(
+  $span
+) {
+  $span     : parse-span($span);
+  $output   : span-math($span...);
+  $box      : get-span-setting(box-sizing, $span);
+  $inside   : if(get-span-setting(gutter-placement, $span) == inside, true, false);
+
+  @if $box == border-box or $inside {
+    @include box-sizing(border-box);
+  } @else if $box == content-box {
+    @include box-sizing(content-box);
+  }
+
+  @include float-span-output($output...);
+}
+
+// Span Helpers
+// ------------
+
+// Parse the span shortcut syntax
+@function parse-span(
+  $string
+) {
+  $new-span           : false;
+  $new-location       : false;
+  $new-context        : false;
+  $new-isolate        : false;
+  $new-static         : false;
+  $new-columns        : false;
+  $new-gutters        : false;
+  $new-column-width   : false;
+  $new-flow           : false;
+  $new-gutter-place   : false;
+  $gutter-override    : false;
+
+  $is-container       : false;
+
+  $i: 1;
+
+  @while $i <= length($string) {
+    $value  : nth($string,$i);
+    $at     : false;
+    $of     : false;
+    $gutter : false;
+
+    // keywords
+    @if type-of($value) == string {
+
+      // location keywords: first | last | alpha | omega
+      @if $value == first or $value == alpha {
+        $new-location: 1;
+      } @else if $value == last or $value == omega {
+        $new-location: last;
+      }
+
+      // isolate
+      @else if $value == isolate {
+        $new-isolate: isolate;
+      } @else if $value == float {
+        $new-isolate: float;
+      }
+
+      // static | fluid
+      @else if $value == static {
+        $new-static: static;
+      } @else if $value == fluid {
+        $new-static: fluid;
+      }
+
+      // ltr | rtl
+      @else if $value == rtl {
+        $new-flow: rtl;
+      } @else if $value == ltr {
+        $new-flow: ltr;
+      }
+
+      // after | before | split | inside | no-gutters
+      @else if $value == after {
+        $new-gutter-place: after;
+      } @else if $value == before {
+        $new-gutter-place: before;
+      } @else if $value == split {
+        $new-gutter-place: split;
+      } @else if $value == inside {
+        $new-gutter-place: inside;
+      } @else if $value == no-gutters {
+        $new-gutter-place: no-gutters;
+      }
+
+      // container
+      @if $value == container {
+        $is-container: container;
+      }
+
+      // at
+      @else if $value == at {
+        $at: true;
+      }
+
+      // of
+      @else if $value == of {
+        $of: true;
+      }
+
+      // gutter
+      @else if $value == gutter or $value == gutters {
+        $gutter: true;
+      }
+
+    // span
+    } @else if not $new-span and type-of($value) == number {
+      $new-span: $value;
+    }
+
+    // location integer
+    @if $at {
+      $i: $i + 1;
+      $new-location: nth($string, $i);
+    }
+
+    // gutter override
+    @if $gutter {
+      $i: $i + 1;
+      $gutter-override: nth($string, $i);
+    }
+
+    // context
+    @if $of {
+      $i: $i + 1;
+      $new-context: compact();
+
+      @while $of and $i <= length($string) {
+        $this: nth($string,$i);
+        @if type-of($this) != string {
+          $new-context: append($new-context, $this);
+          $i: $i + 1;
+        } @else {
+          $of: false;
+          $i: $i - 1;
+        }
+      }
+    }
+
+    $i: $i + 1;
+  }
+
+  // parse the context
+  @if $new-context {
+    $new-columns: get-setting(columns, $new-context);
+    $new-gutters: get-setting(gutters, $new-context);
+    $new-column-width: get-setting(column-width, $new-context);
+  }
+
+  // use global values for empty grid settings
+  @if not $new-columns {
+    $new-columns: $columns;
+  }
+  @if not $new-gutters {
+    $new-gutters: $gutters;
+  }
+  @if not $new-column-width {
+    $new-column-width: $column-width;
+  }
+  @if not $new-static {
+    $new-static: $static;
+  }
+  @if not $new-isolate {
+    $new-isolate: $isolate;
+  }
+  @if not $new-flow {
+    $new-flow: $flow;
+  }
+  @if not $new-gutter-place {
+    $new-gutter-place: $gutter-placement;
+  }
+
+  @return $new-span $new-location $new-columns $new-gutters $new-column-width $new-isolate $new-static $new-flow $new-gutter-place $is-container $gutter-override;
+}
+
+// Return one particular span setting from a list
+@function get-span-setting(
+  $setting,
+  $span,
+  $parse: false
+) {
+  $options  : span location columns gutters column-width isolate static flow gutter-placement is-container gutter-override;
+  $key      : index($options, $setting);
+  $value    : false;
+
+  @if $parse {
+    $span: parse-span($span);
+  }
+
+  @if $key {
+    $value: nth($span, $key);
+  }
+
+  @return $value;
+}

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

@@ -0,0 +1,60 @@
+// Susy 1.0 Settings
+// =================
+
+$total-columns      : 12;
+$column-width       : 4em;
+$gutter-width       : 1em;
+$grid-padding       : $gutter-width;
+
+$from-direction     : left;
+$container-width    : false;
+
+$container-style    : magic;
+
+// no translation (yet)
+// --------------------
+
+// $omega-float        : opposite-position($from-direction);
+// $border-box-sizing  : false;
+
+// $breakpoint-media-output  : true;
+// $breakpoint-ie-output     : true;
+// $breakpoint-raw-output    : false;
+
+// from compass
+// ------------
+
+$show-column-grid-backgrounds: true;
+$show-grid-backgrounds: true;
+
+// translation mixin
+// -----------------
+
+@mixin translate-susy1-settings(
+) {
+  $columns: $total-columns;
+
+  $gutters: $gutter-width / $column-width;
+  $column-width: $column-width;
+  $flow: if($from-direction == right, rtl, ltr);
+
+  $isolate: false;
+  $gutter-placement: after;
+  $show-grids: $show-grid-backgrounds or $show-column-grid-backgrounds;
+
+  @if $container-style == static {
+    $static: static;
+    @if $container-width {
+      @warn "For static output, we use your $column-width setting and ignore any $container-width override.";
+    }
+  } @else {
+    $static: false;
+    $container: $container-width;
+
+    @if $container-width {
+      $column-width: false;
+    } @else if $container-style == fluid and unit($column-width) != '%' {
+      $container: 100%;
+    }
+  }
+}

data/sass/susy/math/_columns.scss

@@ -1,70 +1,94 @@
-//////////////////////////////
-// Find width, in percentages, of the column span
-//////////////////////////////
-@function column-span($span, $location, $columns: false, $gutter: false) {
+// Column math
+// ===========
 
-  // Find the columns and gutters
-  $columns: find-grid($columns);
-  $gutter: find-gutter($gutter);
-
-  // Combine the columns and gutters
-  $columns-and-gutters: column-sum($columns, $gutter);
-
-  // Equal width columns are easy! Deal with them!
-  @if type-of($columns) == 'number' or length($columns) == 1 {
-    $span-and-gutters: $span + (($span - 1) * nth($gutter, 1));
-    @return $span-and-gutters / $columns-and-gutters * 100%;
+// Returns true if a grid is symmetrical
+@function is-symmetrical(
+  $columns: $columns
+) {
+  @if type-of($columns) == number {
+    @return $columns;
+  } @else {
+    @return null;
   }
-  // Asymmetric lists are harder, so we're going to treat them as their own columns
-  @else if type-of($columns) == 'list' or length($columns) > 1 {
-    // Build a fake column set
-    $sum: 0;
-    $holder: ();
+}
 
-    @for $i from $location to ($location + $span) {
-      $holder: append($holder, nth(nth($columns, $i), 1), comma);
-    }
+// Find the number of columns in a given layout
+@function column-count(
+  $columns: $columns
+) {
+  $count: is-symmetrical($columns);
 
-    // Get sub-column sum
-    $span-and-gutters: column-sum($holder, $gutter);
-    @return $span-and-gutters / $columns-and-gutters * 100%;
-  }
-  @else {
-    @warn "Can't find a working set of columns! That's terrible!";
-    @return false;
+  @if not $count {
+    $count: length($columns);
   }
+
+  @return $count;
 }
 
-//////////////////////////////
-// Find the total sum of the columns
-//////////////////////////////
-@function column-sum($columns, $gutter) {
-  @if type-of($columns) == 'number' or length($columns) == 1 {
-    @return nth($columns, 1) + ((column-count(nth($columns, 1)) - 1) * nth($gutter, 1));
+// Find the total sum of column-units in a layout
+@function column-sum(
+  $columns  : $columns,
+  $gutters  : $gutters,
+  $outer    : false
+) {
+  $column-sum: 0;
+  $gutter-sum: 0;
+
+  @if $outer {
+    $gutter-sum: column-count($columns) * $gutters;
+  } @else {
+    $gutter-sum: (column-count($columns) - 1) * $gutters;
   }
-  @else if type-of($columns) == 'list' {
-    $sum: 0;
+
+  @if is-symmetrical($columns) {
+    $column-sum: is-symmetrical($columns);
+  } @else {
     @each $column in $columns {
-      $sum: $sum + nth($column, 1);
+      $column-sum: $column-sum + $column;
     }
-    $sum: $sum + (column-count($columns) - 1) * nth($gutter, 1);
-    @return $sum;
   }
+
+  @return $column-sum + $gutter-sum;
 }
 
-//////////////////////////////
-// Find the number of columns
-//////////////////////////////
-@function column-count($columns) {
-  @if type-of($columns) == 'number' {
-    @return $columns;
-  }
-  @if type-of($columns) == 'list' {
-    @if length($columns) == 1 {
-      @return nth($columns, 1);
-    }
-    @else {
-      @return length($columns);
+// Return a subset of columns at a given location
+@function get-columns(
+  $span,
+  $location,
+  $columns: $columns
+) {
+  $location     : get-location-position($span, $location, $columns);
+  $sub-columns  : ();
+
+  @if is-symmetrical($columns) {
+    $sub-columns: nth($span,1);
+  } @else {
+    $location: if($location, $location, 1);
+
+    @for $i from $location to ($location + $span) {
+      $sub-columns: append($sub-columns, nth($columns, $i));
     }
   }
-}
+
+  @return $sub-columns;
+}
+
+// Find the sum of a column-span
+@function get-column-span-sum(
+  $span,
+  $location     : false,
+  $columns      : $columns,
+  $gutters      : $gutters,
+  $outer        : false
+) {
+  $span-sum : false;
+
+  @if is-symmetrical($columns) {
+    $span-sum: column-sum($span, $gutters, $outer);
+  } @else {
+    $span-columns: get-columns($span, $location, $columns);
+    $span-sum: column-sum($span-columns, $gutters, $outer);
+  }
+
+  @return $span-sum;
+}