susy 1.0.9 → 2.0.0.alpha.1

data/sass/susy/_api.scss

@@ -0,0 +1,39 @@
+@mixin grid-span($span, $location, $context: false, $gutter: false, $output-style: $output) {
+
+  @if $output-style == 'float' {
+    @include output-float($span, $location, $context, $gutter);
+  }
+  @else if $output-style == 'isolation' {
+    @include output-isolation($span, $location, $context, $gutter);
+  }
+}
+
+@mixin push($span, $location, $context: false, $gutter: false, $output-style: $output) {
+
+  @if $output-style == 'float' {
+    @include push-float($span, $location, $context, $gutter);
+  }
+  @else if $output-style == 'isolation' {
+    @include push-isolation($span, $location, $context, $gutter);
+  }
+}
+
+@mixin pull($span, $location, $context: false, $gutter: false, $output-style: $output) {
+
+  @if $output-style == 'float' {
+    @include pull-float($span, $location, $context, $gutter);
+  }
+  @else if $output-style == 'isolation' {
+    @include pull-isolation($span, $location, $context, $gutter);
+  }
+}
+
+@mixin isolate($span, $location, $context: false, $gutter: false, $output-style: $output) {
+
+  @if $output-style == 'float' {
+    @include isolate-float($span, $location, $context, $gutter);
+  }
+}
+
+@import "api/float";
+@import "api/isolation";

data/sass/susy/_grids.scss

@@ -0,0 +1,2 @@
+@import "grids/add";
+@import "grids/find";

data/sass/susy/_gutters.scss

@@ -0,0 +1,2 @@
+@import "gutters/add";
+@import "gutters/find";

data/sass/susy/_helpers.scss

@@ -0,0 +1,14 @@
+//////////////////////////////
+// Code Helpers
+//////////////////////////////
+@import "helpers/find";
+@import "helpers/sass-lists";
+@import "helpers/columns";
+@import "helpers/clearfix";
+@import "helpers/box-sizing";
+@import "helpers/span-shared";
+
+//////////////////////////////
+// UI Helpers
+//////////////////////////////
+@import "helpers/background-grid";

data/sass/susy/_language.scss

@@ -0,0 +1,3 @@
+@import "language/parse-list";
+@import "language/parse-add";
+@import "language/span";

data/sass/susy/_math.scss

@@ -0,0 +1,3 @@
+@import "math/columns";
+@import "math/gutters";
+@import "math/context";

data/sass/susy/api/_float.scss

@@ -0,0 +1,72 @@
+@mixin output-float($span, $location, $columns, $gutter) {
+
+  $location-holder: $location;
+
+  @if type-of($location) == string {
+    @if end-row($span, $location, $columns) {
+      $grid-length: length(find-grid($columns));
+      $location-holder: $grid-length - $span;
+    }
+    @else {
+      $location-holder: 1;
+    }
+  }
+
+  $gutter: find-gutter($gutter);
+
+  width: column-span($span, $location-holder, $columns, $gutter);
+  clear: right;
+  // @include clearfix;
+
+  @if end-row($span, $location, $columns) {
+    float: right;
+  }
+  @else {
+    float: left;
+    margin-right: gutter-span($gutter, $columns);
+  }
+
+  @include span-shared;
+}
+
+@mixin push-float($span, $location, $columns: false, $gutter: false) {
+
+  @if type-of($location) == string {
+    $location: 1;
+  }
+
+  // Find the columns and gutters
+  $columns: find-grid($columns);
+  $gutter: find-gutter($gutter);
+
+  // Combine the columns and gutters
+  $gutter: column-span($span, $location, $columns, $gutter) + gutter-span($gutter, $columns);
+
+  margin-left: $gutter;
+}
+
+@mixin pull-float($span, $location, $columns: false, $gutter: false) {
+
+  @if type-of($location) == string {
+    $location: 1;
+  }
+
+  // Find the columns and gutters
+  $columns: find-grid($columns);
+  $gutter: find-gutter($gutter);
+
+  // Combine the columns and gutters
+  $gutter: (column-span($span, $location, $columns, $gutter) + gutter-span($gutter, $columns)) * -1;
+
+  margin-left: $gutter;
+}
+
+@mixin isolate-float($span, $location, $columns: false, $gutter: false) {
+
+  // Find the columns and gutters
+  $columns: find-grid($columns);
+  $gutter: find-gutter($gutter);
+
+  @include push-float($span, $location, $columns, $gutter);
+  margin-right: -100%;
+}

data/sass/susy/api/_isolation.scss

@@ -0,0 +1,16 @@
+@mixin output-isolation($span, $location, $columns, $gutter) {
+  @include output-float($span, $location, $columns, $gutter);
+
+  @if not end-row($span, $location, $columns) {
+    @include isolate-float($location - 1, 1, $columns, $gutter);
+  }
+
+}
+
+@mixin push-isolation($span, $location, $columns: false, $gutter: false) {
+  @include push-float($span, $location, $columns, $gutter);
+}
+
+@mixin pull-isolation($span, $location, $columns: false, $gutter: false) {
+  @include pull-float($span, $location, $columns, $gutter);
+}

data/sass/susy/grids/_add.scss

@@ -0,0 +1,10 @@
+@function add-grid($grid-definition) {
+  $parsed: parse-add($grid-definition);
+
+  @if nth($parsed, 2) == false and length($grids) == 0 {
+    @return nth($parsed, 1);
+  }
+  @else {
+    @return append($grids, (nth($parsed, 1) nth($parsed, 2)), 'comma');
+  }
+}

data/sass/susy/grids/_find.scss

@@ -0,0 +1,10 @@
+//////////////////////////////
+// Find Grid
+//
+// Finds the grid that you are on.
+// From Singularity
+// Must be using Breakpoint to work properly
+//////////////////////////////
+@function find-grid($user-columns: false) {
+  @return find-object($grids, $user-columns);
+}

data/sass/susy/gutters/_add.scss

@@ -0,0 +1,10 @@
+@function add-gutter($gutter-definition) {
+  $parsed: parse-add($gutter-definition);
+
+  @if nth($parsed, 2) == false and length($gutters) == 0 {
+    @return nth($parsed, 1);
+  }
+  @else {
+    @return append($gutters, (nth($parsed, 1) nth($parsed, 2)), 'comma');
+  }
+}

data/sass/susy/gutters/_find.scss

@@ -0,0 +1,10 @@
+//////////////////////////////
+// Find gutter
+//
+// Finds the gutter that you are on.
+// From Singularity
+// Must be using Breakpoint to work properly
+//////////////////////////////
+@function find-gutter($user-gutter: false) {
+  @return find-object($gutters, $user-gutter);
+}

data/sass/susy/helpers/_background-grid.scss

@@ -0,0 +1,65 @@
+@import "compass/css3/images";
+
+@mixin background-grid($columns: false, $gutter: false, $color: rgba(#69aedb, .5)) {
+
+  $background-length: length($grids);
+
+  @if not ($columns) {
+    @for $i from 1 through $background-length {
+      @if $i == 1 {
+        @include background-build($columns, $gutter, $color);
+      }
+      @else {
+        $mq: nth(nth($grids, $i), 2);
+
+        $grid: nth(nth($grids, $i), 1);
+        @include breakpoint($mq) {
+          @include background-build($grid, $gutter, $color);
+        }
+      }
+    }
+  }
+}
+
+@mixin background-build($columns, $gutter, $color) {
+  $columns: find-grid($columns);
+  $gutter: find-gutter($gutter);
+
+  $stops: background-gradient-stops($columns, $gutter, $color);
+
+  @include background(
+    linear-gradient(
+      left, $stops
+    )
+  );
+}
+
+//////////////////////////////
+// Get the stops of the gradient
+//////////////////////////////
+@function background-gradient-stops($columns, $gutter, $color) {
+  $bkg: ();
+  $count: column-count($columns);
+
+  @for $i from 1 through column-count($columns) {
+    $bkg: join($bkg, background-column-gradient($i, $columns, $gutter, $color), comma);
+  }
+
+  @return $bkg;
+}
+
+//////////////////////////////
+// Get the columns
+//////////////////////////////
+@function background-column-gradient($location, $columns, $gutter, $color) {
+
+  @if $location == 1 {
+    @return $color 0%, $color column-span(1, 1, $columns), transparentize($color, 1) column-span(1, 1, $columns);
+  }
+  @if $location == column-count($columns) {
+    @return transparentize($color, 1) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color 100%;
+  }
+  @if $location > 1 {
+    @return transparentize($color, 1) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color column-span($location, 1, $columns), transparentize($color, 1) column-span($location, 1, $columns);
+  }
+}

data/sass/susy/helpers/_box-sizing.scss

@@ -0,0 +1,25 @@
+@import "compass/css3/shared";
+
+@mixin box-sizing($bs) {
+  $bs: unquote($bs);
+  @include experimental(box-sizing, $bs,
+    -moz, -webkit, not -o, not -ms, not -khtml, official
+  );
+
+  @if $bs == 'border-box' {
+    @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+      *behavior: url("../behaviors/box-sizing/boxsizing.php");
+    }
+  }
+  @else {
+    *behavior: none;
+  }
+}
+
+%border-box {
+  @include box-sizing('border-box');
+}
+
+%content-box {
+  @include box-sizing('content-box');
+}

data/sass/susy/helpers/_clearfix.scss

@@ -0,0 +1,51 @@
+$legacy-support-for-ie6: false !default;
+$legacy-support-for-ie7: false !default;
+$legacy-support-for-mozilla: false !default;
+
+@mixin clearfix {
+  @if $legacy-support-for-ie6 and $legacy-support-for-ie7 and not $legacy-support-for-mozilla {
+    /* for IE 6/7 */
+    *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
+    /* non-JS fallback */
+    *zoom: 1;
+
+    &:before,
+    &:after {
+      content: "";
+      display: table;
+    }
+
+    &:after {
+      clear: both;
+    }
+  }
+  @else if $legacy-support-for-ie6 and $legacy-support-for-ie7 and $legacy-support-for-mozilla {
+    /* for IE 6/7 */
+    *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
+    /* non-JS fallback */
+    *zoom: 1;
+
+    &:before,
+    &:after {
+      content: ".";
+      display: block;
+      height: 0;
+      overflow: hidden;
+    }
+
+    &:after {
+      clear: both;
+    }
+  }
+  @else {
+    &:after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+  }
+}
+
+%clearfix {
+  @include clearfix;
+}

data/sass/susy/helpers/_columns.scss

@@ -0,0 +1,15 @@
+@function end-row($span, $location, $columns) {
+  $columns: find-grid($columns);
+
+  @if $location == 'last' or $location == 'omega' {
+    @return true;
+  }
+  @else {
+    @if $location + ($span - 1) == column-count($columns) {
+      @return true;
+    }
+    @else {
+      @return false;
+    }
+  }
+}

data/sass/susy/helpers/_find.scss

@@ -0,0 +1,63 @@
+//////////////////////////////
+// Find Object
+//
+// Finds relevant object
+// From Singularity
+// Must be using Breakpoint to work properly
+//////////////////////////////
+@function find-object($haystack, $user-object: false) {
+  $length: length($haystack);
+
+  @if $user-object != false {
+    @return $user-object;
+  }
+  @else if $length > 1 {
+    $query-min: breakpoint-get-context('min-width');
+    $query-max: breakpoint-get-context('max-width');
+
+    // If we've got a min-width or max-width
+    @if $query-min or $query-max {
+      // Reverse the grid so we can step through it
+      $reverse-haystack: ();
+      @for $i from 2 through $length {
+        $reverse-haystack: append($reverse-haystack, nth($haystack, $i), comma);
+      }
+      $reverse-haystack: reverse($reverse-haystack);
+      $rg-length: $length - 1;
+
+      // Grab the largest and smallest MQs
+      $smallest: nth(nth($haystack, 2), 2);
+      $largest: nth(nth($reverse-haystack, 1), 2);
+      $context: $query-min;
+
+      // @if not ($mobile-first) {
+      //   $context: $query-max;
+      // }
+
+      // If it's smallest than the smallest MQ, use the 1st grid
+      @if $context < $smallest {
+        @return nth($haystack, 1);
+      }
+      // If it's larger than or equal to the largest MQ, use the last grid
+      @else if $context >= $largest {
+        @return nth(nth($reverse-haystack, 1), 1);
+      }
+      @else {
+        // Loop through each MQ. If the MQ is greather than or equal to the the MQ in question, use it!
+        @for $j from 1 through $rg-length {
+          $query: nth(nth($reverse-haystack, $j), 2);
+          @if $context >= $query {
+            @return nth(nth($reverse-haystack, $j), 1);
+          }
+        }
+      }
+
+    }
+    @else {
+      @return nth($haystack, 1);
+    }
+  }
+  @else {
+    @return nth($haystack, 1);
+  }
+}

data/sass/susy/helpers/_sass-lists.scss

@@ -0,0 +1,71 @@
+// ---------------------------------------------------------------------------
+// Sass List Helpers
+//
+// - list-sum()
+// - query-list()
+
+// ---------------------------------------------------------------------------
+// Functions
+
+// Return the sum of all items in a list.
+//
+// list-sum($list)
+// - $list  : <list>
+@function list-sum($list) {
+  $sum: 0;
+  @each $item in $list {
+    $sum: $sum + $item;
+  }
+  @return $sum;
+}
+
+// Return list of index locations where a query appears in a list,
+// including unit queries.
+//
+// query-list($list, $query [, $mode])
+// - $list    : <list>
+// - $query   : <anything>
+// - $mode    : none | unit
+//            - "none" (default) runs a standard query.
+//            - "unit" finds all items with the same unit.
+@function query-list(
+  $list,
+  $query,
+  $mode: none
+) {
+  $return: ();
+
+  // loop through $list
+  @for $i from 1 through length($list) {
+    @if $mode == unit {
+      // if the list item matches the query, write where it is to the list.
+      @if unit(nth($list, $i)) == $query {
+        $return: append($return, $i);
+      }
+    }
+    @else {
+      // if the list item matches the query, write where it is to the list.
+      @if nth(nth($list, $i), 1) == $query {
+        $return: append($return, $i);
+      }
+    }
+  }
+
+  // if nothing matches then return false.
+  @if $return == () {
+    $return: false;
+  }
+
+  // return list.
+  @return $return;
+}
+
+// Reverses direction of a list
+@function reverse($list) {
+  $length: length($list);
+  $return: ();
+  @for $i from 0 to $length {
+    $return: append($return, nth($list, $length - $i), comma);
+  }
+  @return $return;
+}