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

data/lib/susy.rb

@@ -1,5 +1,4 @@
 require 'compass'
-require 'breakpoint'
 Compass::Frameworks.register('susy',
                              :stylesheets_directory => File.join(File.dirname(__FILE__), '..', 'sass'),
                              :templates_directory => File.join(File.dirname(__FILE__), '..', 'templates'))

data/sass/_susy.scss

@@ -1,55 +1,4 @@
-//////////////////////////////
-// Import Required Extensions
-//////////////////////////////
-@import "breakpoint";
+// Susy partials
+// =============
 
-//////////////////////////////
-// Default Variables
-//////////////////////////////
-
-// The grids being used
-$grids: () !default;
-
-// The gutters of the inner columns of the grid
-$gutters: () !default;
-
-// Specifies whether or not you're building mobile-first grids. Defaults to true
-// $mobile-first: true;
-
-// Default output style.
-$output: 'float' !default;
-
-// Whether or not to include border-box or clearfix with all spans
-$include-border-box:  false !default;
-$include-clearfix:    false !default;
-$include-clear:       true  !default;
-
-//////////////////////////////
-// Import General Helpers
-//////////////////////////////
-@import "susy/helpers";
-
-//////////////////////////////
-// Import Language Helpers
-//////////////////////////////
-@import "susy/language";
-
-//////////////////////////////
-// Import Math
-//////////////////////////////
-@import "susy/math";
-
-//////////////////////////////
-// Import Grid Helpers
-//////////////////////////////
-@import "susy/grids";
-
-//////////////////////////////
-// Import Gutters Helpers
-//////////////////////////////
-@import "susy/gutters";
-
-//////////////////////////////
-// Import APIs
-//////////////////////////////
-@import "susy/api";
+@import "susy/language/susy";

data/sass/susy/_core.scss

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

data/sass/susy/_helpers.scss

@@ -1,14 +1,6 @@
-//////////////////////////////
-// Code Helpers
-//////////////////////////////
-@import "helpers/find";
-@import "helpers/sass-lists";
-@import "helpers/columns";
-@import "helpers/clearfix";
-@import "helpers/box-sizing";
-@import "helpers/span-shared";
+// Helper partials
+// ===============
 
-//////////////////////////////
-// UI Helpers
-//////////////////////////////
-@import "helpers/background-grid";
+@import "helpers/sass-lists";
+@import "helpers/direction";
+@import "helpers/nth";

data/sass/susy/_math.scss

@@ -1,3 +1,6 @@
+// Math partials
+// =============
+
+@import "math/container";
 @import "math/columns";
-@import "math/gutters";
-@import "math/context";
+@import "math/location";

data/sass/susy/_settings.scss

@@ -0,0 +1,52 @@
+// Settings
+// ========
+
+// Grid basics
+// -----------
+
+$columns              : 4         !default;
+$gutters              : .25       !default;
+
+
+// Grid widths [optional]
+// ----------------------
+//
+// - Set EITHER $column-width OR $container
+// - 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;

data/sass/susy/api/_float.scss

@@ -1,72 +1,7 @@
-@mixin output-float($span, $location, $columns, $gutter) {
+// Float api partials
+// ==================
 
-  $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%;
-}
+@import "float/container";
+@import "float/span";
+@import "float/end";
+@import "float/isolate";

data/sass/susy/api/_shared.scss

@@ -0,0 +1,7 @@
+// Shared partials
+// ===============
+
+@import "shared/grid-background";
+@import "shared/container";
+@import "shared/margins";
+@import "shared/padding";

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

@@ -0,0 +1,12 @@
+// Float container
+// ===============
+
+// Output a know float container
+@mixin float-container(
+  $width        : $container,
+  $justify      : $container-position,
+  $show-grids   : $show-grids
+) {
+  @include pie-clearfix;
+  @include container-output($width, $justify, $show-grids);
+}

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

@@ -0,0 +1,21 @@
+// Float ends
+// ==========
+
+// Last Unit
+@mixin float-last(
+  $flow: $flow
+) {
+  $to: to($flow);
+
+  float: $to;
+  margin-#{$to}: 0;
+}
+
+// Last Unit
+@mixin float-first(
+  $flow: $flow
+) {
+  $from: from($flow);
+
+  margin-#{$from}: 0;
+}

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

@@ -0,0 +1,14 @@
+// Float Isolation
+// ===============
+
+// Isolation Override
+@mixin isolate-output(
+  $push,
+  $flow     : $flow
+) {
+  $to     : to($flow);
+  $from   : from($flow);
+
+  margin-#{$from}: $push;
+  margin-#{$to}: -100%;
+}

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

@@ -0,0 +1,23 @@
+// Float span
+// ==========
+
+// Output span
+@mixin float-span-output(
+  $width,
+  $float            : from($flow),
+  $margin-before    : null,
+  $margin-after     : null,
+  $padding-before   : null,
+  $padding-after    : null,
+  $flow             : $flow
+) {
+  $to     : to($flow);
+  $from   : from($flow);
+
+  width: $width;
+  float: $float;
+  margin-#{$from}: $margin-before;
+  margin-#{$to}: $margin-after;
+  padding-#{$from}: $padding-before;
+  padding-#{$to}: $padding-after;
+}

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

@@ -0,0 +1,22 @@
+// Shared container output
+// =======================
+
+// Output container styles
+@mixin container-output(
+  $width        : $container,
+  $justify      : $container-position,
+  $show-grids   : $show-grids
+) {
+  $position   : parse-container-position($justify);
+  $property   : if($static, width, max-width);
+  $left       : nth($position,1);
+  $right      : nth($position,2);
+
+  @if not $width {
+    $width: 100%;
+  }
+
+  #{$property}: $width;
+  margin-left: $left;
+  margin-right: $right;
+}

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

@@ -0,0 +1,20 @@
+// -------------------------
+// Grid Overlay & Background
+//
+// Note: Sub-pixel rounding can lead to several pixels of variation between browsers.
+
+@import "compass/css3";
+
+// Grid Background Output
+// ----------------------
+
+@mixin grid-background-output (
+  $stops,
+  $flow   : $flow
+) {
+  $to     : to($flow);
+  $from   : from($flow);
+
+  @include background(linear-gradient($from, $stops...));
+  background: linear-gradient(to $to, $stops...);
+}

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

@@ -0,0 +1,15 @@
+// Margins
+// =======
+
+// Add margin before or after an element
+@mixin margin-output(
+  $before,
+  $after  : $before,
+  $flow   : $flow
+) {
+  $to: to($flow);
+  $from: from($flow);
+
+  margin-#{$from}: $before;
+  margin-#{$to}: $after;
+}

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

@@ -0,0 +1,15 @@
+// Padding
+// =======
+
+// Add padding before or after an element
+@mixin padding-output(
+  $before,
+  $after    : $before,
+  $flow     : $flow
+) {
+  $to: to($flow);
+  $from: from($flow);
+
+  padding-#{$from}: $before;
+  padding-#{$to}: $after;
+}

data/sass/susy/helpers/_direction.scss

@@ -0,0 +1,28 @@
+// Direction helpers
+// =================
+
+// Return the 'from' or 'to' direction of a ltr or rtl flow.
+@function get-direction(
+  $flow: $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 the 'to' direction of a flow
+@function to(
+  $flow: $flow
+) {
+  @return get-direction($flow,to);
+}
+
+// Return the 'from' direction of a flow
+@function from(
+  $flow: $flow
+) {
+  @return get-direction($flow,from);
+}

data/sass/susy/helpers/_nth.scss

@@ -0,0 +1,15 @@
+// Nth- helpers
+// ============
+
+// Format various nth-selectors
+@function format-nth(
+  $n        : last,
+  $selector : child
+) {
+  @if ($n == 'last') or ($n =='first') or ($n =='only') {
+    $selector: '#{$n}-#{$selector}';
+  } @else {
+    $selector: 'nth-#{$selector}(#{$n})';
+  }
+  @return $selector;
+}