susy 2.0.0.alpha.2 → 2.0.0.alpha.3

checksums.yaml

@@ -0,0 +1,7 @@
+--- 
+SHA512: 
+  data.tar.gz: 7bc217525b1ca257b1d45a1bdd688ddc09417358c26228cc53083ba64f914ec1057154f51feefb76c0cf463a8ab52f368227219b69c978d73951cafdea5f1e9a
+  metadata.gz: 0c0f837b5286717bf4dfdcd78bddafd15b19ee4d5aa9441a63774f160490133e27a5bf09f77d617c959ae883da55b93b979d959c75286fb1e09ff96700d1be92
+SHA1: 
+  data.tar.gz: db4197b6108f2e34188ca74fa198bf0677ced5d3
+  metadata.gz: d7a5ba312e875a4172e9e391ee7cc22d9c46b21d

data/lib/susy.rb

@@ -2,13 +2,3 @@ require 'compass'
 Compass::Frameworks.register('susy',
                              :stylesheets_directory => File.join(File.dirname(__FILE__), '..', 'sass'),
                              :templates_directory => File.join(File.dirname(__FILE__), '..', 'templates'))
-
-module Sass::Script::Functions
-
-  # Convert a grid piece from strings to numbers
-  def grid_to_numbers(piece)
-    items = piece.to_s.split(' ')
-    Sass::Script::List.new(items.map{|i| Sass::Script::Number.new(i.to_f)}, :comma)
-  end
-
-end

data/sass/_susy.scss

@@ -1,4 +1,4 @@
-// Susy partials
-// =============
+// Susy
+// ====
 
 @import "susy/language/susy";

data/sass/susy/_core.scss

@@ -1,6 +1,6 @@
-// The Susy Core
-// =============
+// Susy Core
+// =========
 
 @import "settings";
 @import "helpers";
-@import "math";
+@import "math";

data/sass/susy/_helpers.scss

@@ -1,6 +1,5 @@
-// Helper partials
-// ===============
+// Helpers
+// =======
 
-@import "helpers/sass-lists";
 @import "helpers/direction";
 @import "helpers/nth";

data/sass/susy/_math.scss

@@ -1,5 +1,5 @@
-// Math partials
-// =============
+// Math
+// ====
 
 @import "math/container";
 @import "math/columns";

data/sass/susy/_settings.scss

@@ -1,52 +1,17 @@
 // Settings
 // ========
 
-// Grid basics
+// Grid Basics
 // -----------
 
 $columns              : 4         !default;
 $gutters              : .25       !default;
 
-
-// Grid widths [optional]
+// 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            : false     !default;
-
-
-// Output
-// ------
-
-// global toggle for static/fluid output
-$static               : false     !default;
-
-// global toggle for isolate/float output
-$isolate              : false     !default;
-
-// global toggle for ltr/rtl output
-$flow                 : ltr       !default;
-
-// global toggle for box-sizing
-$box-sizing           : false     !default;
-
-// Defaults
-// --------
-
-// Default container justification
-// - left | center | right
-$container-position   : center    !default;
-
-// Default gutter handling
-// - before | after | split
-$gutter-placement     : after;
-
-
-// Debug
-// -----
-
-// global toggle to show/hide grids
-$show-grids           : show      !default;
+$container            : auto      !default;

data/sass/susy/api/_float.scss

@@ -1,5 +1,5 @@
-// Float api partials
-// ==================
+// Float API
+// =========
 
 @import "float/container";
 @import "float/span";

data/sass/susy/api/_shared.scss

@@ -1,5 +1,5 @@
-// Shared partials
-// ===============
+// Shared API
+// ==========
 
 @import "shared/grid-background";
 @import "shared/container";

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

@@ -1,12 +1,16 @@
-// Float container
-// ===============
+// Float Container API
+// ===================
 
-// Output a know float container
+// Float Container
+// ---------------
+// - [$width]         : <length>
+// - [$justify]       : left | center | right
+// - [$layout-math]   : fluid | static
 @mixin float-container(
   $width        : $container,
   $justify      : $container-position,
-  $show-grids   : $show-grids
+  $layout-math  : $layout-math
 ) {
   @include pie-clearfix;
-  @include container-output($width, $justify, $show-grids);
+  @include container-output($width, $justify, $layout-math);
 }

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

@@ -1,7 +1,9 @@
-// Float ends
-// ==========
+// Float Ends API
+// ==============
 
-// Last Unit
+// Float Last
+// ----------
+// - [$flow]  : ltr | rtl
 @mixin float-last(
   $flow: $flow
 ) {
@@ -11,7 +13,9 @@
   margin-#{$to}: 0;
 }
 
-// Last Unit
+// Float First
+// -----------
+// - [$flow]  : ltr | rtl
 @mixin float-first(
   $flow: $flow
 ) {

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

@@ -1,7 +1,10 @@
-// Float Isolation
-// ===============
+// Float Isolation API
+// ===================
 
-// Isolation Override
+// Isolate Output
+// --------------
+// - $push    : <length>
+// - [$flow]  : ltr | rtl
 @mixin isolate-output(
   $push,
   $flow     : $flow
@@ -9,6 +12,7 @@
   $to     : to($flow);
   $from   : from($flow);
 
+  float: $from;
   margin-#{$from}: $push;
   margin-#{$to}: -100%;
 }

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

@@ -1,10 +1,18 @@
-// Float span
-// ==========
+// Float Span API
+// ==============
 
-// Output span
+// Float Span Output
+// -----------------
+// - $width             : <length>
+// - [$float]           : from | to
+// - [$margin-before]   : <length>
+// - [$margin-after]    : <length>
+// - [$padding-before]  : <length>
+// - [$padding-after]   : <length>
+// - [$flow]            : ltr | rtl
 @mixin float-span-output(
   $width,
-  $float            : from($flow),
+  $float            : from,
   $margin-before    : null,
   $margin-after     : null,
   $padding-before   : null,
@@ -14,6 +22,12 @@
   $to     : to($flow);
   $from   : from($flow);
 
+  @if $float {
+    $float: if($float == to, $to, $from);
+  } @else {
+    $float: null;
+  }
+
   width: $width;
   float: $float;
   margin-#{$from}: $margin-before;

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

@@ -1,14 +1,18 @@
-// Shared container output
-// =======================
+// Shared Container API
+// ====================
 
-// Output container styles
+// Container Output
+// ----------------
+// - [$width]         : <length>
+// - [$justify]       : left | center | right
+// - [$layout-math]   : fluid | static
 @mixin container-output(
   $width        : $container,
   $justify      : $container-position,
-  $show-grids   : $show-grids
+  $layout-math  : $layout-math
 ) {
   $position   : parse-container-position($justify);
-  $property   : if($static, width, max-width);
+  $property   : if($layout-math == static, width, max-width);
   $left       : nth($position,1);
   $right      : nth($position,2);
 
@@ -19,4 +23,4 @@
   #{$property}: $width;
   margin-left: $left;
   margin-right: $right;
-}
+}

data/sass/susy/api/shared/_grid-background.scss

@@ -1,20 +1,43 @@
-// -------------------------
-// Grid Overlay & Background
-//
-// Note: Sub-pixel rounding can lead to several pixels of variation between browsers.
+// Grid Background API
+// ===================
+// - Sub-pixel rounding can lead to several pixels variation between browsers.
 
 @import "compass/css3";
+@import "compass/layout/grid-background";
 
 // Grid Background Output
 // ----------------------
-
+// $stops     : <list> (gradient color-stops)
+// [$show]    : show | show-columns | show-gutters | hide
+// [$flow]    : ltr | rtl
 @mixin grid-background-output (
   $stops,
+  $show   : $show-grids,
   $flow   : $flow
 ) {
   $to     : to($flow);
   $from   : from($flow);
 
-  @include background(linear-gradient($from, $stops...));
-  background: linear-gradient(to $to, $stops...);
+  // 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 $show != show-columns {
+      @include background-size(100% $base-line-height);
+      background-position: left top;
+    }
+
+  }
 }

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

@@ -1,11 +1,15 @@
-// Margins
-// =======
+// Margins API
+// ===========
 
-// Add margin before or after an element
+// Margin Output
+// -------------
+// - $before  : <length>
+// - $after   : <length>
+// - [$flow]  : ltr | rtl
 @mixin margin-output(
   $before,
-  $after  : $before,
-  $flow   : $flow
+  $after,
+  $flow: $flow
 ) {
   $to: to($flow);
   $from: from($flow);

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

@@ -1,11 +1,15 @@
-// Padding
-// =======
+// Padding API
+// ===========
 
-// Add padding before or after an element
+// Padding Output
+// --------------
+// - $before  : <length>
+// - $after   : <length>
+// - [$flow]  : ltr | rtl
 @mixin padding-output(
   $before,
-  $after    : $before,
-  $flow     : $flow
+  $after,
+  $flow: $flow
 ) {
   $to: to($flow);
   $from: from($flow);

data/sass/susy/helpers/_direction.scss

@@ -1,7 +1,11 @@
-// Direction helpers
+// Direction Helpers
 // =================
 
+// Get Direction
+// -------------
 // Return the 'from' or 'to' direction of a ltr or rtl flow.
+// - [$flow]  : ltr | rtl
+// - [$key]   : from | to
 @function get-direction(
   $flow: $flow,
   $key: from
@@ -13,14 +17,20 @@
   @else if $key == to { @return $to; }
 }
 
+// To
+// --
 // Return the 'to' direction of a flow
+// - [$flow]  : ltr | rtl
 @function to(
   $flow: $flow
 ) {
   @return get-direction($flow,to);
 }
 
+// From
+// ----
 // Return the 'from' direction of a flow
+// - [$flow]  : ltr | rtl
 @function from(
   $flow: $flow
 ) {

data/sass/susy/helpers/_nth.scss

@@ -1,7 +1,11 @@
 // Nth- helpers
 // ============
 
+// Format Nth
+// ----------
 // Format various nth-selectors
+// - [$n]         : first | last | only | <math>
+// - [$selector]  : child | of-type | last-child | last-of-type
 @function format-nth(
   $n        : last,
   $selector : child

data/sass/susy/language/_shared.scss

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

data/sass/susy/language/_susy.scss

@@ -1,16 +1,17 @@
-// Language partials
-// =================
+// Susy Next Syntax
+// ================
 
 @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/gutters";
 @import "susy/isolate";
 @import "susy/gallery";
 @import "susy/rows";
+@import "susy/margins";
+@import "susy/padding";

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

@@ -1,13 +1,10 @@
-// Context syntax
+// Context Syntax
 // ==============
-//
-// Functions:
-// - nested()
-//
-// Mixins:
-// - nested()
 
-// return the subset grid for nested context
+// Nested [function]
+// -----------------
+// Return a subset grid for nested context.
+// - $context   : <span>
 @function nested(
   $context
 ) {
@@ -22,7 +19,11 @@
   @return get-columns($this-span, $this-location, $this-columns);
 }
 
-// use the subset grid for a nested context
+// Nested [mixin]
+// --------------
+// Use a subset grid for a nested context
+// - $context   : <span>
+// - @content   : <content>
 @mixin nested(
   $context
 ) {