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

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

@@ -0,0 +1,100 @@
+// Container Syntax
+// ================
+
+// Set a container element
+@mixin container(
+  $container: get-container()
+) {
+  $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);
+
+  @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%;
+    }
+  }
+
+  @if $show and $show != hide {
+    @include grid-background($grid);
+  }
+
+  @if $box == border-box {
+    @include box-sizing(border-box);
+  } @else if $box == content-box {
+    @include box-sizing(content-box);
+  }
+
+  @include float-container($width, $justify, $show);
+}
+
+// Container Helpers
+// -----------------
+
+// Get the current container-related settings
+@function get-container(
+) {
+  $show: false;
+
+  // Create keyword for show-grids setting
+  @if $show-grids and $show-grids != "hide" {
+    $show: show;
+  } @else {
+    $show: hide;
+  }
+
+  @return get-grid() $container-position $show;
+}
+
+// parse the container shorthand syntax, and return an ordered list
+@function parse-container(
+  $container: get-container()
+) {
+  $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);
+  }
+
+  // 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;
+  }
+
+  @return $grid $justify $show;
+}

data/sass/susy/language/susy/_functions.scss

@@ -0,0 +1,58 @@
+// Math Functions
+// ==============
+
+// Return the width of a span
+@function span(
+  $span: 1
+) {
+  $span               : parse-span($span);
+
+  $width              : get-span-setting(span, $span);
+
+  $this-location      : get-span-setting(location, $span);
+  $this-columns       : get-span-setting(columns, $span);
+  $this-gutters       : get-span-setting(gutters, $span);
+  $this-column-width  : get-span-setting(column-width, $span);
+  $this-static        : get-span-setting(static, $span);
+
+  $this-location      : if($this-location, $this-location, 1);
+  $this-columns       : if($this-columns, $this-columns, $columns);
+  $this-gutters       : if($this-gutters, $this-gutters, $gutters);
+  $this-column-width  : if($this-column-width, $this-column-width, $column-width);
+  $this-static        : if($this-static, $this-static, $static);
+
+  $width: get-span-width($width, $this-location, $this-columns, $this-gutters, $this-column-width, $this-static);
+
+  @return $width;
+}
+
+// Return the width of a gutter
+@function gutter(
+  $context: get-grid()
+) {
+  $context            : parse-grid($context);
+
+  $this-columns       : get-setting(columns, $context);
+  $this-gutters       : get-setting(gutters, $context);
+  $this-column-width  : get-setting(column-width, $context);
+  $this-static        : get-setting(static, $context);
+
+  $this-columns       : if($this-columns, $this-columns, $columns);
+  $this-gutters       : if($this-gutters, $this-gutters, $gutters);
+  $this-column-width  : if($this-column-width, $this-column-width, $column-width);
+  $this-static        : if($this-static, $this-static, $static);
+
+  $width: get-gutter-width($this-columns, $this-gutters, $this-column-width, $this-static);
+
+  @return $width;
+}
+
+// Return the width of a span, plus any attached gutters
+@function outer-span(
+  $span: 1
+) {
+  $width    : span($span);
+  $gutter   : gutter($span);
+
+  @return $width + $gutter;
+}

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

@@ -0,0 +1,94 @@
+// Gallery Syntax
+// ==============
+
+// Create a gallery
+@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);
+  }
+}
+
+// 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; }
+      }
+    }
+  }
+}
+
+// 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);
+  }
+
+  @include float-span-output($width, $from, null, -100%, null, null, $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: if(is-symmetrical($columns), null, $width);
+      $before: get-isolation($span, $location, $this-columns, $this-gutters, $this-column-width, $this-static);
+
+      @include float-span-output($width, null, $before, null, null, null, $this-flow);
+
+      @if $location == 1 { clear: $from; }
+      $location: $location + $span;
+      @if $location > $context { $location: 1; }
+    }
+  }
+}

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

@@ -0,0 +1,51 @@
+// Isolation Syntax
+// ================
+
+// Isolation Override
+@mixin isolate(
+  $input
+) {
+  $input              : parse-span($input);
+
+  $span               : get-span-setting(span, $input);
+  $location           : get-span-setting(location, $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);
+
+  $push: get-isolation($span, $location, $columns, $gutters, $column-width, $static);
+
+  @include isolate-output($push,$this-flow);
+}
+
+// Isolation Helpers
+// -----------------
+
+// Return the isolation position
+@function get-isolation(
+  $span,
+  $location,
+  $columns        : $columns,
+  $gutters        : $gutters,
+  $column-width   : $column-width,
+  $static         : $static,
+  $gutter-place   : $gutter-placement
+) {
+  $context  : column-sum($columns, $gutters);
+  $width    : null;
+
+  @if type-of($location) == number and not unitless($location) {
+    $width: $location;
+  } @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);
+    } @else {
+      $width: null;
+    }
+  }
+
+  @return $width;
+}

data/sass/susy/language/susy/_math.scss

@@ -0,0 +1,153 @@
+// Susy Math
+// =========
+
+// Get all the span results
+@function span-math(
+  $span,
+  $location,
+  $columns          : $columns,
+  $gutters          : $gutters,
+  $column-width     : $column-width,
+  $isolate          : $isolate,
+  $static           : $static,
+  $flow             : $flow,
+  $gutter-place     : $gutter-placement,
+  $is-container     : false,
+  $gutter-override  : false
+) {
+  $float            : from($flow);
+  $width            : $span;
+
+  $column           : null;
+  $padding-before   : null;
+  $padding-after    : null;
+  $margin-before    : null;
+  $margin-after     : null;
+
+  $static           : if($static and $static != fluid, true, false);
+  $isolate          : if($isolate and $isolate != float, true, false);
+
+  // calculations
+  $width: get-span-width($span, $location, $columns, $gutters, $column-width, $static, $gutter-place);
+
+  // gutter location
+  $gutter-location  : get-gutters($columns, $gutters, $column-width, $static, $gutter-place, $gutter-override);
+
+  @if $gutter-place == inside {
+    @if not $is-container {
+      $padding-before: nth($gutter-location,1);
+      $padding-after: nth($gutter-location,2);
+    }
+  } @else {
+    $margin-before: nth($gutter-location,1);
+    $margin-after: nth($gutter-location,2);
+  }
+
+  // special margin handling
+  @if $isolate {
+    $margin-before: get-isolation($span, $location, $columns, $gutters, $column-width, $static);
+    $margin-after: -100%;
+  } @else {
+    @if is-last($span, $location, $columns) {
+      $float: to($flow);
+      $margin-after: null;
+    } @else if is-first($location) {
+      $margin-before: null;
+    }
+  }
+
+  @return $width $float $margin-before $margin-after $padding-before $padding-after $flow;
+}
+
+// Return gutter width
+@function get-gutter-width(
+  $columns        : $columns,
+  $gutters        : $gutters,
+  $column-width   : $columns-width,
+  $static         : $static
+) {
+  $context  : column-sum($columns, $gutters);
+  $gutter   : null;
+
+  @if $static {
+    @if $column-width {
+      $gutter: $gutters * $column-width;
+    } @else {
+      @warn "Please set a $column-width to use for static output.";
+    }
+  } @else {
+    $gutter: percentage($gutters / $context);
+  }
+
+  @return $gutter;
+}
+
+@function get-gutters(
+  $columns          : $columns,
+  $gutters          : $gutters,
+  $column-width     : $column-width,
+  $static           : $static,
+  $gutter-place     : $gutter-placement,
+  $gutter-override  : false
+) {
+  $static   : if($gutter-place == inside and $column-width, true, $static);
+  $gutter   : null;
+  $before   : null;
+  $after    : null;
+
+  @if $gutter-override {
+    $gutter: $gutter-override;
+  } @else {
+    $gutter: get-gutter-width($columns, $gutters, $column-width, $static);
+  }
+
+  @if $gutter-place == before {
+    $before: $gutter;
+  } @else if $gutter-place == after {
+    $after: $gutter;
+  } @else if $gutter-place == split or $gutter-place == inside {
+    $gutter: if($gutter-override, $gutter, $gutter / 2);
+    $before: $gutter;
+    $after: $gutter;
+  }
+
+  @return $before $after;
+}
+
+// Return span width
+@function get-span-width(
+  $span,
+  $location,
+  $columns        : $columns,
+  $gutters        : $gutters,
+  $column-width   : $column-width,
+  $static         : $static,
+  $gutter-place   : $gutter-placement,
+  $outer          : null
+) {
+  $context  : null;
+  $span-sum : null;
+  $width    : null;
+
+  @if unitless($span) {
+    @if $gutter-place == inside {
+      $context: column-sum($columns, $gutters, outer);
+      $span-sum: column-sum(get-columns($span, $location, $columns), $gutters, outer);
+    } @else {
+      $context: column-sum($columns, $gutters);
+      $outer: if($outer, $gutters, 0);
+      $span-sum: get-column-span-sum($span, $location, $columns, $gutters) + $outer;
+    }
+
+    @if $static {
+      $width: $span-sum * $column-width;
+    } @else {
+      $width: percentage($span-sum / $context);
+    }
+  } @else {
+    $width: $span;
+  }
+
+  @return $width;
+}
+