susy 2.0.0.alpha.6 → 2.0.0.beta.1

data/lib/susy.rb

@@ -4,9 +4,9 @@ begin
   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
+  if ENV.has_key?("SASS_PATH")
+    ENV["SASS_PATH"] = ENV["SASS_PATH"] + File::PATH_SEPARATOR + susy_stylesheets_path
   else
-    ENV["SASSPATH"] = susy_stylesheets_path
+    ENV["SASS_PATH"] = susy_stylesheets_path
   end
 end

data/sass/susy/_helpers.scss

@@ -4,4 +4,3 @@
 @import "helpers/clearfix";
 @import "helpers/box-sizing";
 @import "helpers/direction";
-@import "helpers/nth";

data/sass/susy/_math.scss

@@ -1,6 +1,7 @@
 // Math
 // ====
 
+@import "math/settings";
+@import "math/validation";
 @import "math/container";
 @import "math/columns";
-@import "math/location";

data/sass/susy/api/_float.scss

@@ -3,6 +3,7 @@
 
 @import "shared";
 
+@import "float/clearfix";
 @import "float/container";
 @import "float/span";
 @import "float/end";

data/sass/susy/api/_shared.scss

@@ -1,6 +1,8 @@
 // Shared API
 // ==========
 
+@import "shared/box-sizing";
+@import "shared/direction";
 @import "shared/background";
 @import "shared/container";
 @import "shared/margins";

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

@@ -5,12 +5,12 @@
 // ---------------
 // - [$width]         : <length>
 // - [$justify]       : left | center | right
-// - [$layout-math]   : fluid | static
+// - [$math]   : fluid | static
 @mixin float-container(
-  $width        : susy-get(container),
-  $justify      : susy-get(container-position),
-  $layout-math  : susy-get(layout-math)
+  $width,
+  $justify: auto auto,
+  $property: max-width
 ) {
   @include susy-clearfix;
-  @include container-output($width, $justify, $layout-math);
+  @include container-output($width, $justify, $property);
 }

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

@@ -1,12 +1,19 @@
 // Float Ends API
 // ==============
 
+// Susy End Defaults
+// -----------------
+// - PRIVATE
+@include susy-defaults((
+  last-flow: to,
+));
+
 // Float Last
 // ----------
 // - [$flow]  : ltr | rtl
 @mixin float-last(
-  $flow: susy-get(flow),
-  $last-flow: susy-get(last-flow),
+  $flow: map-get($susy-defaults, flow),
+  $last-flow: map-get($susy-defaults, last-flow),
   $margin: 0
 ) {
   $to: to($flow);
@@ -19,7 +26,7 @@
 // -----------
 // - [$flow]  : ltr | rtl
 @mixin float-first(
-  $flow: susy-get(flow)
+  $flow: map-get($susy-defaults, flow)
 ) {
   margin-#{from($flow)}: 0;
 }

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

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

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

@@ -17,7 +17,7 @@
   $margin-after     : null,
   $padding-before   : null,
   $padding-after    : null,
-  $flow             : susy-get(flow)
+  $flow             : map-get($susy-defaults, flow)
 ) {
   $to     : to($flow);
   $from   : from($flow);

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

@@ -12,10 +12,10 @@
   $image,
   $size: false,
   $clip: false,
-  $flow: susy-get(flow)
+  $flow: map-get($susy-defaults, flow)
 ) {
   @if mixin-exists(background-image) {
-    @include background-image($image);
+    @include background-image($image...);
   } @else {
     background-image: $image;
   }

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

@@ -5,15 +5,12 @@
 // ----------------
 // - [$width]         : <length>
 // - [$justify]       : left | center | right
-// - [$layout-math]   : fluid | static
+// - [$math]          : fluid | static
 @mixin container-output(
-  $width        : susy-get(container),
-  $justify      : susy-get(container-position),
-  $layout-math  : susy-get(layout-math)
+  $width,
+  $justify: auto auto,
+  $property: max-width
 ) {
-  $property   : if($layout-math == static, width, max-width);
-  $justify    : parse-container-position($justify);
-
   #{$property}: $width or 100%;
   margin-left: nth($justify, 1);
   margin-right: nth($justify, 2);

data/sass/susy/{helpers → api/shared}/_direction.scss

@@ -1,13 +1,20 @@
 // Direction Helpers
 // =================
 
+// Susy Flow Defaults
+// ------------------
+// - PRIVATE
+@include susy-defaults((
+  flow: ltr,
+));
+
 // Get Direction
 // -------------
 // Return the 'from' or 'to' direction of a ltr or rtl flow.
 // - [$flow]  : ltr | rtl
 // - [$key]   : from | to
 @function get-direction(
-  $flow: susy-get(flow),
+  $flow: map-get($susy-defaults, flow),
   $key: from
 ) {
   $return: if($flow == rtl, (from: right, to: left), (from: left, to: right));
@@ -19,7 +26,7 @@
 // Return the 'to' direction of a flow
 // - [$flow]  : ltr | rtl
 @function to(
-  $flow: susy-get(flow)
+  $flow: map-get($susy-defaults, flow)
 ) {
   @return get-direction($flow, to);
 }
@@ -29,7 +36,7 @@
 // Return the 'from' direction of a flow
 // - [$flow]  : ltr | rtl
 @function from(
-  $flow: susy-get(flow)
+  $flow: map-get($susy-defaults, flow)
 ) {
   @return get-direction($flow, from);
 }

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

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

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

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

data/sass/susy/language/_susy.scss

@@ -1,11 +1,12 @@
 // Susy Next Syntax
 // ================
 
-@import "../core";
+@import "../math";
 @import "../api/float";
 
 @import "susy/settings";
 @import "susy/grids";
+@import "susy/box-sizing";
 @import "susy/context";
 @import "susy/background";
 @import "susy/container";
@@ -17,3 +18,4 @@
 @import "susy/margins";
 @import "susy/padding";
 @import "susy/bleed";
+@import "susy/breakpoint-plugin";

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

@@ -129,7 +129,7 @@ $debug-defaults: (
   $grid           : parse-grid($grid);
   $gutters        : susy-get(gutters, $grid);
   $column-width   : susy-get(column-width, $grid);
-  $math           : susy-get(layout-math, $grid);
+  $math           : susy-get(math, $grid);
 
   $color          : debug-get(color);
   $trans          : transparent;

data/sass/susy/language/susy/_bleed.scss

@@ -8,13 +8,15 @@
 @mixin bleed(
   $bleed: 0 gutter()
 ) {
-  $bleed    : parse-span($bleed);
+  $bleed    : map-merge(parse-span($bleed), (spread: wide));
   $trbl     : susy-get(span, $bleed);
   $spans    : (top: 0, right: 0, bottom: 0, left: 0);
 
   $i: 1;
   @each $span in $trbl {
-    $span: span(map-merge($bleed, (span: $span)));
+    $this: map-merge($bleed, (span: $span));
+    $span: span($this);
+
     @if $i == 1 {
       $spans: map-merge($spans, (top: $span, right: $span, bottom: $span, left: $span));
     } @else if $i == 2 {

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

@@ -0,0 +1,31 @@
+// Global Box Sizing
+// =================
+
+// Global Box Sizing
+// -----------------
+// Set a box model globally on all elements.
+// - [$box]: border-box | content-box
+@mixin global-box-sizing(
+  $box: susy-get(global-box-sizing)
+) {
+  *, *:before, *:after { @include susy-box-sizing($box); }
+  @include update-box-model($box);
+}
+
+// Border Box Sizing
+// -----------------
+// A legacy shortcut...
+@mixin border-box-sizing {
+  @include global-box-sizing(border-box);
+}
+
+// Update Box Model
+// ----------------
+// PRIVATE: Updates global box model setting
+@mixin update-box-model(
+  $box
+) {
+  @if $box != susy-get(global-box-sizing) {
+    @include susy-set(global-box-sizing, $box);
+  }
+}

data/sass/susy/language/susy/_breakpoint-plugin.scss

@@ -0,0 +1,26 @@
+// Breakpoint Integration
+// ======================
+// REQUIRES Breakpoint: http://breakpoint-sass.com/
+
+
+// Susy Breakpoint
+// ---------------
+// Change grids at different mediaqueries.
+// - $query     : <breakpoint $query>
+// - $layout    : <settings>
+// - $no-query  : <breakpoint $no-query>
+@mixin susy-breakpoint(
+  $query,
+  $layout,
+  $no-query: false
+) {
+  @if mixin-exists(breakpoint) {
+    @include breakpoint($query, $no-query) {
+      @include use-grid($layout) {
+        @content;
+      }
+    }
+  } @else {
+    @warn "Susy-breakpoint requires the Breakpoint plugin (http://breakpoint-sass.com/)";
+  }
+}

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

@@ -8,18 +8,19 @@
 @mixin container(
   $grid: $susy
 ) {
-  $grid: parse-grid($grid);
+  $grid       : parse-grid($grid);
 
   $width      : get-container-width($grid);
-  $justify    : susy-get(container-position, $grid);
-  $math       : susy-get(layout-math, $grid);
+  $justify    : parse-container-position(susy-get(container-position, $grid));
+  $property   : if(susy-get(math, $grid) == static, width, max-width);
+
   $box        : susy-get(box-sizing, $grid);
 
   @if $box {
     @include susy-box-sizing($box);
   }
 
-  @include float-container($width, $justify, $math);
+  @include float-container($width, $justify, $property);
   @include show-grid($grid);
 }
 
@@ -59,3 +60,20 @@
 
   @return $width;
 }
+
+// Parse Container Position
+// ------------------------
+// Parse the $container-position into margin values.
+// - [$justify]   : left | center | right | <length> [<length>]
+@function parse-container-position(
+  $justify: map-get($susy-defaults, container-position)
+) {
+  $return: if($justify == left, 0, auto) if($justify == right, 0, auto);
+
+  @if not index(left right center, $justify) {
+    $return: nth($justify, 1);
+    $return: $return if(length($justify) > 1, nth($justify, 2), $return);
+  }
+
+  @return $return;
+}

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

@@ -10,7 +10,7 @@
 ) {
   $context    : parse-span($context);
   $span       : susy-get(span, $context);
-  $location   : susy-get(location, $context);
+  $location   : get-location($context);
   $columns    : susy-get(columns, $context);
 
   @return get-columns($span, $location, $columns);

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

@@ -10,19 +10,18 @@
   $layout,
   $selector: child
 ) {
-  $layout             : parse-span($layout);
-  $layout             : map-merge($layout, (location: 1));
+  $layout       : parse-span($layout);
+  $layout       : map-merge($layout, (location: 1));
 
-  $span               : susy-get(span, $layout);
-  $columns            : susy-get(columns, $layout);
-  $context            : column-count($columns);
-  $flow               : susy-get(flow, $layout);
+  $span         : susy-get(span, $layout);
+  $columns      : susy-get(columns, $layout);
+  $context      : column-count($columns);
+  $flow         : susy-get(flow, $layout);
 
-  $box                : susy-get(box-sizing, $layout);
-  $inside             : is-inside($layout);
-  $from               : from($flow);
-  $line               : floor($context / $span);
-  $symmetrical        : is-symmetrical($columns);
+  $inside       : is-inside($layout);
+  $from         : from($flow);
+  $line         : floor($context / $span);
+  $symmetrical  : is-symmetrical($columns);
 
   $output: (
     width             : null,
@@ -46,8 +45,11 @@
     $output: map-merge($output, (width: get-span-width($layout)));
   }
 
+  $box          : susy-get(box-sizing, $layout);
+  $global-box   : if(susy-get(global-box-sizing) == 'border-box', true, false);
+
   // Collective Output
-  @if $box == border-box or $inside {
+  @if $box == border-box or ($inside and not $box and not $global-box) {
     @include susy-box-sizing(border-box);
   } @else if $box == content-box {
     @include susy-box-sizing(content-box);
@@ -57,8 +59,8 @@
 
   // Individual Loop
   @for $item from 1 through $line {
-    $nth: '#{$line}n + #{$item}';
-    &:#{format-nth($nth,$selector)} {
+    $n: '#{$line}n + #{$item}';
+    &:nth-#{$selector}(#{$n}) {
       // Individual Prep
       $output: (
         width             : if($symmetrical, null, get-span-width($layout)),
@@ -73,15 +75,15 @@
       // Individual Output
       @include float-span-output($output...);
 
-      @if is-first(susy-get(location, $layout)) {
+      @if get-edge($layout) == first {
+        @include break;
         @include first($layout);
-        clear: $from;
       } @else {
-        clear: none;
+        @include nobreak;
       }
 
       // Individual Location Increment
-      $location: susy-get(location, $layout) + $span;
+      $location: get-location($layout) + $span;
       $location: if($location > $context, 1, $location);
       $layout: map-merge($layout, (location: $location));
     }