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

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

@@ -1,33 +1,21 @@
-// ---------------------------------------------------------------------------
-// Sass List Helpers
-//
-// - list-sum()
-// - query-list()
-
-// ---------------------------------------------------------------------------
-// Functions
+// List helpers
+// ============
 
 // Return the sum of all items in a list.
-//
-// list-sum($list)
-// - $list  : <list>
-@function list-sum($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,
@@ -35,37 +23,68 @@
 ) {
   $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) {
+@function reverse(
+  $list
+) {
   $length: length($list);
   $return: ();
+
   @for $i from 0 to $length {
     $return: append($return, nth($list, $length - $i), comma);
   }
+
   @return $return;
-}
+}
+
+// Return a list with specific items removed
+@function filter(
+  $list,
+  $target
+) {
+  $clean: compact();
+
+  @if index($list, $target) {
+    @each $item in $list {
+      $clean: if($item == $target, $clean, append($clean, $item));
+    }
+  } @else {
+    $clean: $list;
+  }
+
+  @return $clean;
+}
+
+@function nth-filter(
+  $list,
+  $index
+) {
+  $clean: compact();
+
+  @each $item in $list {
+    $clean: if(index($list, $item) == $index, $clean, append($clean, $item));
+  }
+
+  @return $clean;
+}
+

data/sass/susy/language/_shared.scss

@@ -0,0 +1,6 @@
+// Shared Language
+// ===============
+
+@import "shared/settings";
+@import "shared/context";
+

data/sass/susy/language/_susy.scss

@@ -0,0 +1,16 @@
+// Language partials
+// =================
+
+@import "../core";
+@import "../api/shared";
+@import "../api/float";
+
+@import "shared";
+@import "susy/math";
+@import "susy/functions";
+@import "susy/background";
+@import "susy/container";
+@import "susy/span";
+@import "susy/isolate";
+@import "susy/gallery";
+@import "susy/rows";

data/sass/susy/language/_susy1.scss

@@ -0,0 +1,9 @@
+// Susy 1.0 Translation
+// ====================
+
+@import "../core";
+@import "../api/shared";
+@import "../api/float";
+
+@import "shared";
+@import "susy1/settings";

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

@@ -0,0 +1,35 @@
+// Context syntax
+// ==============
+//
+// Functions:
+// - nested()
+//
+// Mixins:
+// - nested()
+
+// return the subset grid for nested context
+@function nested(
+  $context
+) {
+  $context: parse-span($context);
+
+  $this-span          : get-span-setting(span, $context);
+  $this-location      : get-span-setting(location, $context);
+  $this-columns       : get-span-setting(columns, $context);
+
+  $this-columns       : if($this-columns, $this-columns, $columns);
+
+  @return get-columns($this-span, $this-location, $this-columns);
+}
+
+// use the subset grid for a nested context
+@mixin nested(
+  $context
+) {
+  $old-columns: get-setting(columns);
+  $columns: nested($context);
+
+  @content;
+
+  $columns: $old-columns;
+}

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

@@ -0,0 +1,216 @@
+// Grid Syntax
+// ===========
+
+// Set a new grid using a shorthand
+@mixin set-grid(
+  $grid,
+  $clean: false
+) {
+  $grid               : parse-grid($grid);
+
+  // 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);
+  }
+
+  // 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);
+}
+
+// Use an arbitrary grid for a section of code
+@mixin use-grid(
+  $grid,
+  $clean: false
+) {
+  $old-grid: get-grid();
+
+  @include set-grid($grid, $clean);
+  @content;
+  @include set-grid($old-grid, $clean);
+}
+
+// Grid helpers
+// ------------
+
+// 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;
+
+  // 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;
+  }
+
+  // Create keyword for show-grids setting
+  @if $show-grids and $show-grids != hide {
+    $show-grids-setting: show;
+  } @else {
+    $show-grids-setting: hide;
+  }
+
+  // Return grid shorthand
+  @return compact($container $columns $gutter-setting $static-setting $isolate-setting $show-grids-setting $flow $gutter-placement $box-sizing);
+}
+
+// Parse a shorthand grid, and return an ordered list of 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;
+
+  @each $value in $grid {
+    @if type-of($value) == string {
+      // output: static | fluid
+      @if $value == static {
+        $static-setting: static;
+      } @else if $value == fluid {
+        $static-setting: fluid;
+      }
+
+      // output: isolate | fluid
+      @if $value == isolate {
+        $isolate-setting: isolate;
+      } @else if $value == float {
+        $isolate-setting: float;
+      }
+
+      // flow: ltr | rtl
+      @if $value == rtl {
+        $flow-setting: rtl;
+      } @else if $value == ltr {
+        $flow-setting: ltr;
+      }
+
+      // show-grid: show | hide
+      @if $value == show {
+        $show-setting: show;
+      } @else if $value == hide {
+        $show-setting: hide;
+      }
+
+      // gutter-placement: before | after | split | no-gutters
+      @if $value == before {
+        $gutter-place-setting: before;
+      } @else if $value == after {
+        $gutter-place-setting: after;
+      } @else if $value == split {
+        $gutter-place-setting: split;
+      } @else if $value == inside {
+        $gutter-place-setting: inside;
+      } @else if $value == no-gutters {
+        $gutter-place-setting: no-gutters;
+      }
+
+      // box-sizing: border-box | content-box
+      @if $value == border-box {
+        $box-setting: border-box;
+      } @else if $value == content-box {
+        $box-setting: content-box;
+      }
+    }
+
+    // container, columns, or gutters
+    @else if type-of($value) == number {
+      @if not unitless($value) {
+        $container-setting: $value;
+      } @else if not $columns-check {
+        $columns-setting: $value;
+        $columns-check: true;
+      } @else {
+        $gutters-setting: $value;
+      }
+    }
+
+    // columns or gutters
+    @else if type-of($value) == list {
+      @if unitless(nth($value,1)) {
+        $columns-setting: $value;
+        $columns-check: true;
+      } @else {
+        $column-width-setting: nth($value,1);
+        $gutters-setting: 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 one setting from a shorhand grid
+@function get-setting(
+  $setting,
+  $grid   : parse-grid(get-grid()),
+  $parse  : false
+) {
+  $options  : columns gutters container column-width static isolate flow gutter-placement show-grids box-sizing;
+  $key      : index($options, $setting);
+  $value    : false;
+
+  @if $parse {
+    $grid: parse-grid($grid);
+  }
+
+  @if $key and not ($key > length($grid)) {
+    $value: nth($grid, $key);
+  }
+
+  @return $value;
+}

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

@@ -0,0 +1,132 @@
+// Background Grids
+// ================
+
+// 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;
+
+// Set the location of the switch.
+$grid-toggle-position: left bottom !default;
+
+// Set the color of background grids/
+$grid-background-color: rgba(#66f, .25) !default;
+
+// Grid Background
+// ---------------
+
+@mixin grid-background(
+  $grid: parse-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);
+
+  @for $location from 1 through column-count($this-columns) {
+    $this-stop: compact();
+
+    @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);
+    }
+
+    @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)
+}
+
+// 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);
+}
+
+@mixin grid-overlay (
+  $grids...
+) {
+  $vert: nth($grid-toggle-position, 1);
+  $horz: nth($grid-toggle-position, 2);
+
+  head {
+    @include transition(all .4s);
+    @include border-radius(.25em);
+    display: block;
+    position: fixed;
+    #{$horz}: 10px;
+    #{$vert}: 10px;
+    z-index: 999;
+    color: #333;
+    text-shadow: 0 0 3px #fff;
+    &::before {
+      content: "|||";
+      display: block;
+      padding: 10px 14px;
+      letter-spacing: -1;
+      font: {
+        family: sans-serif;
+        size: 26px;
+        weight: bold;
+      }
+    }
+    &: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));
+
+        ~ body #{$selector} {
+          @extend %grid-overlay-container;
+        }
+        ~ #{$selector}::before,
+        ~ body #{$selector}::before {
+          @extend %grid-overlay;
+          @include grid-background($grid);
+        }
+      }
+    }
+  }
+}