susy 2.0.0.alpha.4 → 2.0.0.alpha.5

checksums.yaml

@@ -1,7 +1,7 @@
---- 
-SHA1: 
-  metadata.gz: 46be92875abbfabd5a08c7190610555dbaca91ae
-  data.tar.gz: fe798a70237e5369c6a007550753af7a95523044
-SHA512: 
-  metadata.gz: 3e4c356738b99d6148a9b2d4af4664ee6c51e3600e59e6747b02536b481b2d35ed7af1b3d633e32a77d3d90cda1782d9e08ef6e0aaec6b4912200bdbb6757c30
-  data.tar.gz: caf82262dd8131a8384fda277375fc6393a18cbdf60686ba15afc2666b53b89edf52e2f4911eb6d51990813719dce2b18b103818d1caba7ed565615a7b07b062
+---
+SHA1:
+  metadata.gz: e517f778e7f713696b11510f0a423df0e9a063f9
+  data.tar.gz: e914949051598b83a963cd9ffea85270b3afab05
+SHA512:
+  metadata.gz: 144fcea1e2eb1b17bc1903c741f7b7824e412f6f99218a0da4614f7c5913d50da46abb821bf48624faf4baed70bddcc1e076ee8c77a84971739dcb9c13b3d506
+  data.tar.gz: e4e421fc81b114835a68e5003fc69c72529cac96140fdfa9fad74a71443e12340d802796449cdb68ec1ba30261108bf35049a44452ea5f38cdb0825c66e353ef

data/README.md

@@ -1,3 +1,5 @@
+[![Build Status](https://travis-ci.org/ericam/susy.png?branch=susy-next)](https://travis-ci.org/ericam/susy)
+
 # Susy [a Compass plugin]
 
 Susy is a semantic CSS grid system with a responsive twist.

data/VERSION

@@ -0,0 +1 @@
+2.0.0.alpha.4

data/lib/compass-susy.rb

@@ -0,0 +1 @@
+require 'susy'

data/lib/susy.rb

@@ -1,4 +1,12 @@
-require 'compass'
-Compass::Frameworks.register('susy',
-                             :stylesheets_directory => File.join(File.dirname(__FILE__), '..', 'sass'),
-                             :templates_directory => File.join(File.dirname(__FILE__), '..', 'templates'))
+susy_stylesheets_path = File.expand_path(File.join(File.dirname(__FILE__), '..', 'sass'))
+begin
+  require 'compass'
+  Compass::Frameworks.register('susy', :stylesheets_directory => susy_stylesheets_path)
+rescue LoadError
+  # compass not found, register on the Sass path via the environment.
+  if ENV.has_key?("SASSPATH")
+    ENV["SASSPATH"] = ENV["SASSPATH"] + File::PATH_SEPARATOR + susy_stylesheets_path
+  else
+    ENV["SASSPATH"] = susy_stylesheets_path
+  end
+end

data/sass/susy/_helpers.scss

@@ -1,5 +1,7 @@
 // Helpers
 // =======
 
+@import "helpers/clearfix";
+@import "helpers/box-sizing";
 @import "helpers/direction";
 @import "helpers/nth";

data/sass/susy/_settings.scss

@@ -1,23 +1,10 @@
 // Settings
 // ========
 
-// Grid Basics
-// -----------
-
-$columns              : 4         !default;
-$gutters              : .25       !default;
-
-// Grid Widths [optional]
-// ----------------------
-// - Set EITHER $column-width OR $container
-// - Use $column-width for static layouts
-// - We can determine one from the other, but we can't resolve conflicts
-
-$column-width         : false     !default;
-$container            : auto      !default;
-
-// Last Flow
-// ---------
-// - Last/Omega float-direction, relative to the document flow
-// from | to
-$last-flow            : to        !default;
+// Default Settings
+// ----------------
+$susy-defaults: (
+  columns: 4,
+  gutters: .25,
+  column-width: false,
+);

data/sass/susy/api/_float.scss

@@ -1,6 +1,8 @@
 // Float API
 // =========
 
+@import "shared";
+
 @import "float/container";
 @import "float/span";
 @import "float/end";

data/sass/susy/api/float/_container.scss

@@ -1,18 +1,16 @@
 // Float Container API
 // ===================
 
-@import "compass/utilities/general/clearfix";
-
 // Float Container
 // ---------------
 // - [$width]         : <length>
 // - [$justify]       : left | center | right
 // - [$layout-math]   : fluid | static
 @mixin float-container(
-  $width        : $container,
-  $justify      : $container-position,
-  $layout-math  : $layout-math
+  $width        : susy-get(container),
+  $justify      : susy-get(container-position),
+  $layout-math  : susy-get(layout-math)
 ) {
-  @include pie-clearfix;
+  @include susy-clearfix;
   @include container-output($width, $justify, $layout-math);
 }

data/sass/susy/api/float/_end.scss

@@ -5,25 +5,21 @@
 // ----------
 // - [$flow]  : ltr | rtl
 @mixin float-last(
-  $flow: $flow,
-  $last-flow: $last-flow
+  $flow: susy-get(flow),
+  $last-flow: susy-get(last-flow),
+  $margin: 0
 ) {
   $to: to($flow);
 
-  @if $last-flow == to {
-    float: $to;
-  }
-
-  margin-#{$to}: 0;
+  float: if($last-flow == to, $to, null);
+  margin-#{$to}: $margin;
 }
 
 // Float First
 // -----------
 // - [$flow]  : ltr | rtl
 @mixin float-first(
-  $flow: $flow
+  $flow: susy-get(flow)
 ) {
-  $from: from($flow);
-
-  margin-#{$from}: 0;
+  margin-#{from($flow)}: 0;
 }

data/sass/susy/api/float/_isolate.scss

@@ -7,7 +7,7 @@
 // - [$flow]  : ltr | rtl
 @mixin isolate-output(
   $push,
-  $flow     : $flow
+  $flow   : susy-get(flow)
 ) {
   $to     : to($flow);
   $from   : from($flow);

data/sass/susy/api/float/_span.scss

@@ -17,19 +17,13 @@
   $margin-after     : null,
   $padding-before   : null,
   $padding-after    : null,
-  $flow             : $flow
+  $flow             : susy-get(flow)
 ) {
   $to     : to($flow);
   $from   : from($flow);
 
-  @if $float {
-    $float: if($float == to, $to, $from);
-  } @else {
-    $float: null;
-  }
-
   width: $width;
-  float: $float;
+  float: if($float == to, $to, null) or if($float == from, $from, null);
   margin-#{$from}: $margin-before;
   margin-#{$to}: $margin-after;
   padding-#{$from}: $padding-before;

data/sass/susy/api/shared/_background.scss

@@ -2,47 +2,35 @@
 // ===================
 // - Sub-pixel rounding can lead to several pixels variation between browsers.
 
-@import "compass/layout/grid-background";
-@import "compass/css3/images";
-@import "compass/css3/background-size";
-
-// Set the line height for your vertical rhythm.
-$base-line-height       : 24px            !default;
-
 // Grid Background Output
 // ----------------------
-// $stops     : <list> (gradient color-stops)
-// [$show]    : show | show-columns | show-gutters | hide
-// [$flow]    : ltr | rtl
+// - $image: background-image
+// - $size: background-size
+// - $clip: background-clip
+// - [$flow]: ltr | rtl
 @mixin background-grid-output (
-  $stops,
-  $line-height  : $base-line-height,
-  $show         : $show-grids,
-  $flow         : $flow
+  $image,
+  $size: false,
+  $clip: false,
+  $flow: susy-get(flow)
 ) {
-  $to     : to($flow);
-  $from   : from($flow);
-
-  // set the proper background gradient
-  $background: ();
-
-  @if $show and $show != hide {
-
-    @if $show != show-columns {
-      $background: append($background, get-baseline-gradient(), comma);
-    }
-
-    @if $show != show-baseline {
-      $background: append($background, linear-gradient($from, $stops...), comma);
-    }
-
-    // output styles
-    @include background($background);
+  @if mixin-exists(background-image) {
+    @include background-image($image);
+  } @else {
+    background-image: $image;
+  }
 
-    @if $show != show-columns {
-      @include background-size(100% $line-height);
-      background-position: left top;
-    }
+  @if $size {
+    -webkit-background-size: $size;
+    background-size: $size;
+  }
 
+  @if $clip {
+    -webkit-background-origin: $clip;
+    -webkit-background-clip: $clip;
+    background-origin: $clip;
+    background-clip: $clip;
   }
+
+  background-position: from($flow) top;
 }

data/sass/susy/api/shared/_container.scss

@@ -7,20 +7,14 @@
 // - [$justify]       : left | center | right
 // - [$layout-math]   : fluid | static
 @mixin container-output(
-  $width        : $container,
-  $justify      : $container-position,
-  $layout-math  : $layout-math
+  $width        : susy-get(container),
+  $justify      : susy-get(container-position),
+  $layout-math  : susy-get(layout-math)
 ) {
-  $position   : parse-container-position($justify);
   $property   : if($layout-math == static, width, max-width);
-  $left       : nth($position,1);
-  $right      : nth($position,2);
+  $justify    : parse-container-position($justify);
 
-  @if not $width {
-    $width: 100%;
-  }
-
-  #{$property}: $width;
-  margin-left: $left;
-  margin-right: $right;
+  #{$property}: $width or 100%;
+  margin-left: nth($justify, 1);
+  margin-right: nth($justify, 2);
 }

data/sass/susy/api/shared/_margins.scss

@@ -9,7 +9,7 @@
 @mixin margin-output(
   $before,
   $after,
-  $flow: $flow
+  $flow: susy-get(flow)
 ) {
   $to: to($flow);
   $from: from($flow);

data/sass/susy/api/shared/_padding.scss

@@ -9,7 +9,7 @@
 @mixin padding-output(
   $before,
   $after,
-  $flow: $flow
+  $flow: susy-get(flow)
 ) {
   $to: to($flow);
   $from: from($flow);

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

@@ -0,0 +1,16 @@
+// Box Sizing
+// ==========
+// Susy is not in the business of handling css3 prefixed feature support.
+// If you provide a mixin, we'll use yours, otherwise we provide basics.
+// If you want more powerful support handling, we recommend compass-style.org
+
+// Susy Box Sizing
+// ---------------
+// [$model]: content-box | border-box
+@mixin susy-box-sizing(
+  $model: content-box
+) {
+  -moz-box-sizing: $model;
+  -webkit-box-sizing: $model;
+  box-sizing: $model;
+}

data/sass/susy/helpers/_clearfix.scss

@@ -0,0 +1,15 @@
+// Susy Fallback Clearfix
+// ======================
+// If you provide a clearfix mixin, we'll use yours.
+// If not, we'll provide the basics.
+
+// Susy Clearfix
+// -------------
+@mixin susy-clearfix {
+  *zoom: 1;
+  &:after {
+    content    : " ";
+    display    : block;
+    clear      : both;
+  }
+}

data/sass/susy/helpers/_direction.scss

@@ -7,14 +7,11 @@
 // - [$flow]  : ltr | rtl
 // - [$key]   : from | to
 @function get-direction(
-  $flow: $flow,
+  $flow: susy-get(flow),
   $key: from
 ) {
-  $from: if($flow == rtl, right, left);
-  $to: if($flow == rtl, left, right);
-
-  @if $key == from { @return $from; }
-  @else if $key == to { @return $to; }
+  $return: if($flow == rtl, (from: right, to: left), (from: left, to: right));
+  @return map-get($return, $key);
 }
 
 // To
@@ -22,9 +19,9 @@
 // Return the 'to' direction of a flow
 // - [$flow]  : ltr | rtl
 @function to(
-  $flow: $flow
+  $flow: susy-get(flow)
 ) {
-  @return get-direction($flow,to);
+  @return get-direction($flow, to);
 }
 
 // From
@@ -32,7 +29,7 @@
 // Return the 'from' direction of a flow
 // - [$flow]  : ltr | rtl
 @function from(
-  $flow: $flow
+  $flow: susy-get(flow)
 ) {
-  @return get-direction($flow,from);
+  @return get-direction($flow, from);
 }

data/sass/susy/helpers/_nth.scss

@@ -10,10 +10,6 @@
   $n        : last,
   $selector : child
 ) {
-  @if ($n == 'last') or ($n =='first') or ($n =='only') {
-    $selector: '#{$n}-#{$selector}';
-  } @else {
-    $selector: 'nth-#{$selector}(#{$n})';
-  }
-  @return $selector;
+  $key: last first only;
+  @return if(index($key, $n), '#{$n}-#{$selector}', 'nth-#{$selector}(#{$n})');
 }

data/sass/susy/language/_shared.scss

@@ -2,4 +2,3 @@
 // =============
 
 @import "shared/settings";
-@import "shared/context";

data/sass/susy/language/_susy.scss

@@ -2,10 +2,12 @@
 // ================
 
 @import "../core";
-@import "../api/shared";
 @import "../api/float";
 
 @import "shared";
+
+@import "susy/settings";
+@import "susy/context";
 @import "susy/background";
 @import "susy/container";
 @import "susy/span";
@@ -15,3 +17,4 @@
 @import "susy/rows";
 @import "susy/margins";
 @import "susy/padding";
+@import "susy/bleed";

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

@@ -1,107 +1,36 @@
 // Grid Syntax
 // ===========
 
-// layout math
-// - static | fluid
-$layout-math          : fluid           !default;
-
-// layout method
-// - isolate | float
-$layout-method        : float           !default;
-
-// layout direction
-// - ltr | rtl
-$flow                 : ltr             !default;
-
-// box-sizing
-// false | border-box | content-box
-$box-sizing           : false           !default;
-
-// container justification
-// - left | center | right
-$container-position   : center          !default;
-
-// gutter handling
-// - before | after | split | inside | inside-static | no-gutters
-$gutter-position      : after           !default;
-
-// show/hide grids
-// show | show-columns | show-baseline | hide
-$show-grids           : show-columns    !default;
-
 // Set Grid
 // --------
 // Set a new grid using a shorthand
 // - $grid      : <settings>
-// - [$clean]   : true | false (resets container, column-width, & box-sizing)
 @mixin set-grid(
-  $grid,
-  $clean: false
+  $grid
 ) {
+  $susy: map-merge($susy, parse-grid($grid)) !global;
+}
 
-  $grid                 : get-adjusted-grid($grid, $clean);
-
-  // get values
-  $columns              : get-setting(columns, $grid);
-  $gutters              : get-setting(gutters, $grid);
-  $container            : get-setting(container, $grid);
-  $column-width         : get-setting(column-width, $grid);
-  $layout-math          : get-setting(layout-math, $grid);
-  $layout-method        : get-setting(layout-method, $grid);
-
-  $flow                 : get-setting(flow, $grid);
-  $gutter-position      : get-setting(gutter-position, $grid);
-  $container-position   : get-setting(container-position, $grid);
-  $show-grids           : get-setting(show-grids, $grid);
-  $box                  : get-setting(box-sizing, $grid);
-
-  $container            : get-setting(container, $grid);
-  $column-width         : get-setting(column-width, $grid);
-  $box-sizing           : get-setting(box-sizing, $grid);
+// Alternative syntax
+@mixin susy-set(
+  $grid
+) {
+  @include set-grid($grid);
 }
 
 // Use Grid
 // --------
 // Use an arbitrary grid for a section of code
 // - $grid      : <settings>
-// - [$clean]   : true | false (resets container, column-width, & box-sizing)
 @mixin use-grid(
-  $grid,
-  $clean: false
+  $grid
 ) {
-  $old-grid: get-grid();
+  $old: $susy;
 
-  @include set-grid($grid, $clean);
+  @include set-grid($grid);
   @content;
-  @include set-grid($old-grid, $clean);
-}
 
-// Get Grid
-// --------
-// Get the current grid settings as a shorthand list
-@function get-grid(
-) {
-  $new-gutters        : $gutters;
-  $new-show-grids     : false;
-
-  // Use units for column/gutter ratio if available
-  @if $column-width {
-    $new-gutters: $column-width $column-width * $gutters;
-  }
-
-  // Create keyword for show-grids setting
-  @if type-of($show-grids) == bool {
-    @if $show-grids {
-      $new-show-grids: show;
-    } @else {
-      $new-show-grids: hide;
-    }
-  } @else {
-    $new-show-grids: $show-grids;
-  }
-
-  // Return grid shorthand
-  @return compact($container $columns $new-gutters $layout-math $layout-method $container-position $new-show-grids $flow $gutter-position $box-sizing);
+  $susy: $old !global;
 }
 
 // Parse Grid
@@ -109,190 +38,67 @@ $show-grids           : show-columns    !default;
 // Parse a shorthand grid, and return an ordered list of settings
 // - [$grid]  : <settings>
 @function parse-grid(
-  $grid: get-grid()
+  $grid
 ) {
-  $new-columns              : false;
-  $new-gutters              : false;
-  $new-container            : false;
-  $new-column-width         : false;
-  $new-layout-math          : false;
-  $new-layout-method        : false;
-  $new-container-position   : false;
-  $new-flow                 : false;
-  $new-gutter-position      : false;
-  $new-show-grids           : false;
-  $new-box-sizing           : false;
-
-  $columns-check            : false;
+  $return: $grid;
 
-  @each $value in $grid {
-    @if type-of($value) == string {
-      // layout-math: static | fluid
-      @if $value == static {
-        $new-layout-math: static;
-      } @else if $value == fluid {
-        $new-layout-math: fluid;
-      }
+  @if type-of($grid) != map {
+    $return         : ();
+    $columns-check  : false;
 
-      // layout-method: isolate | fluid
-      @if $value == isolate {
-        $new-layout-method: isolate;
-      } @else if $value == float {
-        $new-layout-method: float;
-      }
+    @each $item in $grid {
 
-      // container-position: left | center | right
-      @if $value == left {
-        $new-container-position: left;
-      } @else if $value == right {
-        $new-container-position: right;
-      } @else if $value == center {
-        $new-container-position: center;
-      }
+      // maps
+      @if type-of($item) == map {
+        $return: map-merge($return, $item);
 
-      // flow: ltr | rtl
-      @if $value == rtl {
-        $new-flow: rtl;
-      } @else if $value == ltr {
-        $new-flow: ltr;
+      // Keywords
+      } @else if type-of($item) == string {
+        @each $key, $value in $susy-keywords {
+          @if index($value, $item) {
+            $return: map-merge($return, ($key: $item));
+          }
+        }
       }
 
-      // show-grid: show | hide
-      @if $value == show {
-        $new-show-grids: show;
-      } @else if $value == hide {
-        $new-show-grids: hide;
-      } @else if $value == show-columns {
-        $new-show-grids: show-columns;
-      } @else if $value == show-baseline {
-        $new-show-grids: show-baseline;
+      // Container, Columns, or Gutters
+      @else if type-of($item) == number {
+        @if not unitless($item) {
+          $return: map-merge($return, (container: $item));
+        } @else if not $columns-check {
+          $return: map-merge($return, (columns: $item));
+          $columns-check: true;
+        } @else {
+          $return: map-merge($return, (gutters: $item));
+        }
       }
 
-      // gutter-position: before | after | split | no-gutters
-      @if $value == before {
-        $new-gutter-position: before;
-      } @else if $value == after {
-        $new-gutter-position: after;
-      } @else if $value == split {
-        $new-gutter-position: split;
-      } @else if $value == inside {
-        $new-gutter-position: inside;
-      } @else if $value == inside-static {
-        $new-gutter-position: inside-static;
-      } @else if $value == no-gutters {
-        $new-gutter-position: no-gutters;
-      }
-
-      // box-sizing: border-box | content-box
-      @if $value == border-box {
-        $new-box-sizing: border-box;
-      } @else if $value == content-box {
-        $new-box-sizing: content-box;
-      }
-
-      // auto container
-      @if $value == auto {
-        $new-container: auto;
-      }
-    }
-
-    // container, columns, or gutters
-    @else if type-of($value) == number {
-      @if not unitless($value) {
-        $new-container: $value;
-      } @else if not $columns-check {
-        $new-columns: $value;
-        $columns-check: true;
-      } @else {
-        $new-gutters: $value;
-      }
-    }
-
-    // columns or gutters
-    @else if type-of($value) == list {
-      @if unitless(nth($value,1)) {
-        $new-columns: $value;
-        $columns-check: true;
-      } @else {
-        $new-column-width: nth($value,1);
-        $new-gutters: nth($value,2) / nth($value,1);
+      // Columns or Gutters
+      @else if type-of($item) == list {
+        @if unitless(nth($item,1)) {
+          $return: map-merge($return, (columns: $item));
+          $columns-check: true;
+        } @else {
+          $return: map-merge($return, (column-width: nth($item,1)));
+          $return: map-merge($return, (gutters: nth($item,2) / nth($item,1)));
+        }
       }
     }
   }
 
-  @return $new-columns $new-gutters $new-container $new-column-width $new-layout-math $new-layout-method $new-container-position $new-flow $new-gutter-position $new-show-grids $new-box-sizing;
-}
-
-// Get Adjusted Grid
-// -----------------
-// Fill missing grid values based on global settings
-// - $grid      : <settings>
-// - [$clean]   : true | false (resets container, column-width, & box-sizing)
-@function get-adjusted-grid(
-  $grid,
-  $clean: false
-) {
-  $grid                   : parse-grid($grid);
-
-  $new-columns            : get-setting(columns, $grid);
-  $new-gutters            : get-setting(gutters, $grid);
-  $new-layout-math        : get-setting(layout-math, $grid);
-  $new-layout-method      : get-setting(layout-method, $grid);
-  $new-flow               : get-setting(flow, $grid);
-  $new-gutter-place       : get-setting(gutter-position, $grid);
-  $new-container-position : get-setting(container-position, $grid);
-  $new-show-grids         : get-setting(show-grids, $grid);
-
-  $new-container          : get-setting(container, $grid);
-  $new-column-width       : get-setting(column-width, $grid);
-  $new-box-sizing         : get-setting(box-sizing, $grid);
-
-  // Set required values
-  $new-columns            : if($new-columns, $new-columns, $columns);
-  $new-gutters            : if($new-gutters, $new-gutters, $gutters);
-  $new-layout-math        : if($new-layout-math, $new-layout-math, $layout-math);
-  $new-layout-method      : if($new-layout-method, $new-layout-method, $layout-method);
-  $new-flow               : if($new-flow, $new-flow, $flow);
-  $new-gutter-place       : if($new-gutter-place, $new-gutter-place, $gutter-position);
-  $new-container-position : if($new-container-position, $new-container-position, $container-position);
-  $new-show-grids         : if($new-show-grids, $new-show-grids, $show-grids);
-
-  // optionally fill values based on current grid
-  @if $clean {
-    $new-container        : if($new-container, $new-container, auto);
-  } @else {
-    $new-container        : if($new-container, $new-container, $container);
-    $new-column-width     : if($new-column-width, $new-column-width, $column-width);
-    $new-box-sizing       : if($new-box-sizing, $new-box-sizing, $box-sizing);
-  }
-
-  @return $new-columns, $new-gutters, $new-container, $new-column-width, $new-layout-math, $new-layout-method, $new-container-position, $new-flow, $new-gutter-place, $new-show-grids, $new-box-sizing;
+  @return $return;
 }
 
 // Get Setting
 // -----------
-// Return one setting from a shorhand grid
-// - setting    : <keyword> (see $options below)
+// Return one setting from a grid
+// - setting    : <keyword>
 // - $grid      : <settings>
-// - [$parse]   : true | false
-@function get-setting(
-  $setting,
-  $grid   : parse-grid(),
-  $parse  : false
+@function susy-get(
+  $key,
+  $grid: map-merge($susy-defaults, $susy)
 ) {
-  $options  : columns gutters container column-width layout-math layout-method container-position flow gutter-position show-grids box-sizing;
-  $key      : index($options, $setting);
-  $value    : false;
-
-  @if $parse {
-    $grid: parse-grid($grid);
-  }
-
-  @if $key {
-    $value: nth($grid, $key);
-  } @else {
-    @warn '"#{$setting}" is not a valid grid setting.';
-  }
+  $grid: parse-grid($grid);
 
-  @return $value;
+  @return map-get($grid, $key) or map-get($susy, $key) or map-get($susy-defaults, $key);
 }