singularitygs 1.0.1 → 1.0.2

data/lib/singularitygs.rb

@@ -4,6 +4,6 @@ require 'breakpoint'
 Compass::Frameworks.register("singularitygs", :path => "#{File.dirname(__FILE__)}/..")
 
 module SingularityGS
-  VERSION = "1.0.1"
-  DATE = "2013-04-02"
+  VERSION = "1.0.2"
+  DATE = "2013-04-03"
 end

data/stylesheets/_singularitygs.scss

@@ -17,7 +17,7 @@ $gutters: () !default;
 $mobile-first: true;
 
 // Default output style.
-$output: 'float' !default;
+$output: 'isolation' !default;
 
 // Direction for your grid. Can be ltr, rtl, or both
 $direction: 'ltr' !default;

data/stylesheets/singularitygs/_math.scss

@@ -1,3 +1,4 @@
 @import "math/columns";
 @import "math/gutters";
-@import "math/context";
+@import "math/context";
+@import "math/span";

data/stylesheets/singularitygs/api/_float.scss

@@ -14,6 +14,8 @@
 
   $gutter: find-gutter($gutter);
   $end-row: end-row($span, $location, $columns);
+  $start-row: start-row($location);
+
 
   width: column-span($span, $location-holder, $columns, $gutter);
 
@@ -31,7 +33,13 @@
     }
     @else {
       float: $dir;
-      margin-#{$opp}: gutter-span($gutter, $columns);
+
+      @if $start-row {
+        margin-#{$dir}: 0%;
+      }
+      @else {
+        margin-#{$opp}: gutter-span($gutter, $columns);
+      }
     }
   }
 
@@ -51,6 +59,14 @@
       }
       @else {
         float: $dir;
+
+        @if $start-row {
+          margin-#{$dir}: 0%;
+        }
+        @else {
+          margin-#{$opp}: gutter-span($gutter, $columns);
+        }
+
         margin-#{$dir}: 0;
         margin-#{$opp}: gutter-span($gutter, $columns);
       }
@@ -90,4 +106,36 @@
   $gutter: (column-span($span, $location, $columns, $gutter) + gutter-span($gutter, $columns)) * -1;
 
   margin-left: $gutter;
+}
+
+//////////////////////////////
+// Happy Syntax for Float
+//
+// Makes working with Float easier, as it allows you to walk the grid for symmetric grids and easy applying of 'last' and 'first', as well as automatically building the verbose grid-span mixin call
+//////////////////////////////
+@mixin float-span($span, $location: false, $columns: false, $gutter: false) {
+  $grid: find-grid($columns);
+  $gutter: find-gutter($gutter);
+  $row: false;
+
+  @if type-of($grid) == 'number' or length($grid) == 1 {
+    @if $location == 'last' or $location == 'omega' {
+      $location: length($grid) - $span + 1;
+    }
+    @else {
+      @if $location == 'first' or $location == 'alpha' {
+        $row: true;
+      }
+      $location: 1;
+    }
+
+    @include grid-span($span, $location, $grid, $gutter, 'float');
+
+    @if $row {
+      clear: both;
+    }
+  }
+  @else {
+    @warn 'Asymmetric Grids need a Location value as well as a span value in order to know where on the grid you are! Please include a location value!';
+  }
 }

data/stylesheets/singularitygs/api/_isolation.scss

@@ -1,10 +1,11 @@
 @mixin output-isolation($span, $location, $columns, $gutter, $options: false) {
 
-  @if $options == false {
-    $options: 'right';
-  }
-
   $gutter: find-gutter($gutter);
+  $end-row: end-row($span, $location, $columns);
+  $start-row: start-row($location);
+
+  // @debug $options;
+
 
   @if $direction == 'ltr' or $direction == 'both' {
     // Set the CSS direction to ltr
@@ -14,10 +15,35 @@
     $opp: opposite-direction($dir);
 
     width: column-span($span, $location, $columns);
-    margin-#{$dir}: column-span($location - 1, 1, $columns);
-    margin-#{$opp}: -100%;
-    float: $dir;
-    clear: unquote($options);
+
+
+
+    // If we are at the last item in the row, we float it the opposite direction
+    @if ($end-row) {
+      float: $opp;
+      margin-#{$dir}: 0;
+      margin-#{$opp}: 0;
+    }
+    @else {
+      float: $dir;
+      margin-#{$opp}: -100%;
+
+      @if $start-row {
+        margin-#{$dir}: 0%;
+      }
+      @else {
+        margin-#{$dir}: column-span(($location - 1), 1, $columns) + gutter-span($gutter, $columns);
+      }
+
+    }
+
+    // If options are set, we clear to that option, otherwise no clear!
+    @if ($options) {
+      clear: unquote($options);
+    }
+    @else {
+      clear: none;
+    }
   }
 
   @if $direction == 'rtl' or $direction == 'both' {
@@ -28,10 +54,29 @@
     $opp: opposite-direction($dir);
 
     [dir="#{$cssdir}"] & {
-      margin-#{$dir}: column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns);
-      margin-#{$opp}: -100%;
-      float: $dir;
-      clear: unquote($options);
+      // If we are at the last item in the row, we float it the opposite direction
+      @if ($end-row) {
+        float: $opp;
+      }
+      @else {
+        float: $dir;
+        margin-#{$opp}: -100%;
+
+        @if $start-row {
+          margin-#{$dir}: 0%;
+        }
+        @else {
+          margin-#{$dir}: column-span(($location - 1), 1, $columns) + gutter-span($gutter, $columns);
+        }
+      }
+
+      // If options are set, we clear to that option, otherwise no clear!
+      @if ($options) {
+        clear: unquote($options);
+      }
+      @else {
+        clear: none;
+      }
     }
   }
 
@@ -45,4 +90,16 @@
 
 @mixin pull-isolation($span, $location, $columns: false, $gutter: false) {
   @include pull-float($span, $location, $columns, $gutter);
+}
+
+//////////////////////////////
+// Happy Syntax for Isolation
+//
+// Makes working with Isolation easier, as it moves Clear to a 1st class citizen of the mixin, and automatically builds the verbose grid-span mixin call
+//////////////////////////////
+@mixin isolation-span($span, $location, $clear: false, $columns: false, $gutter: false) {
+  $grid: find-grid($columns);
+  $gutter: find-gutter($gutter);
+
+  @include grid-span($span, $location, $grid, $gutter, 'isolation', $clear);
 }

data/stylesheets/singularitygs/helpers/_background-grid.scss

@@ -120,67 +120,114 @@ $overlay-switch-position: left bottom !default;
 @mixin background-grid(
   $columns: false,
   $gutter: false,
-  $color: rgba(Chocolate, .5)
+  $color: Chocolate
 ) {
 
   $background-length: length($grids);
 
-  @if not ($columns) {
-    @for $i from 1 through $background-length {
-      @if $i == 1 {
-        @include background-build($columns, $gutter, $color);
-      }
-      @else {
+  @if (not $columns) {
+    $grid: find-grid($columns);
+    @include background-build($grid, $gutter, $color);
+    @if ($grid != $grids) {
+      @for $i from 2 through $background-length {
         $mq: nth(nth($grids, $i), 2);
-
         $grid: nth(nth($grids, $i), 1);
+
         @include breakpoint($mq) {
           @include background-build($grid, $gutter, $color);
         }
       }
     }
   }
+  @else {
+    @include background-build($columns, $gutter, $color);
+  }
 }
 
 @mixin background-build($columns, $gutter, $color) {
   $columns: find-grid($columns);
   $gutter: find-gutter($gutter);
 
-  $stops: background-gradient-stops($columns, $gutter, $color);
+  $widths: ();
+  $colors: ();
 
-  @include background(
-    linear-gradient(
-      left, $stops
-    )
-  );
-}
+  $length: length($columns);
+  $symmetric: false;
+  @if type-of($columns) == 'number' or $length == 1 {
+    $symmetric: true;
+    $length: nth($columns, 1);
+  }
 
-//////////////////////////////
-// Get the stops of the gradient
-//////////////////////////////
-@function background-gradient-stops($columns, $gutter, $color) {
-  $bkg: ();
-  $count: column-count($columns);
 
-  @for $i from 1 through column-count($columns) {
-    $bkg: join($bkg, background-column-gradient($i, $columns, $gutter, $color), comma);
+  @for $i from 1 through $length {
+    $column-span: column-span($i, 1, $columns);
+    $gutter-span: $column-span + gutter-span($gutter, $columns);
+
+    @if $i != $columns {
+      $widths: append($widths, $column-span);
+      $colors: append($colors, rgba($color, .5));
+      $widths: append($widths, $gutter-span);
+      $colors: append($colors, rgba($color, .25));
+    }
+    @else {
+      $widths: append($widths, $column-span);
+      $colors: append($colors, rgba($color, .5));
+    }
   }
 
-  @return $bkg;
+  @include background-gradient-generate($widths, $colors);
+
 }
 
 //////////////////////////////
 // Get the columns
 //////////////////////////////
-@function background-column-gradient($location, $columns, $gutter, $color) {
+@mixin background-gradient-generate($widths, $colors, $direction: left) {
+  @if (length($widths) != length($colors)) and (length($widths) != length($colors) - 1)  {
+    @warn 'You either need an equal number of widths and colors or one less width than color, in which case it is assumed that the last width goes to 100%. Please provide the correct amount of widths and colors.';
+  }
+  @else {
+    $stops: ();
+
+    @if length($widths) == (length($colors) - 1) {
+      $widths: append($widths, 100%);
+    }
+
+    $i: 1;
+
+    @each $width in $widths {
+      $width: nth($widths, $i);
+      $color: nth($colors, $i);
 
-  @if $location == 1 {
-    @return lighten($color, 5%) 0%, darken($color, 5%) column-span(1, 1, $columns), lighten($color, 30%) column-span(1, 1, $columns);
+      @if $i == 1 {
+        $stops: join($stops, build-gradient-piece($width, $color), comma);
+      }
+      @else {
+        $position: nth($widths, $i - 1);
+        $stops: join($stops, build-gradient-piece($width, $color, $position), comma);
+      }
+
+      $i: $i + 1;
+    }
+
+    // @debug $stops;
+
+
+
+    @include background-image(
+      linear-gradient($direction, $stops)
+    );
   }
-  @if $location == column-count($columns) {
-    @return lighten($color, 30%) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), lighten($color, 5%) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), darken($color, 5%) 100%;
+}
+
+@function build-gradient-piece($width, $color, $position: false) {
+  @if ($position == 'last') {
+    @return ($color $width);
   }
-  @if $location > 1 {
-    @return lighten($color, 30%) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), lighten($color, 5%) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), darken($color, 5%) column-span($location, 1, $columns), lighten($color, 30%) column-span($location, 1, $columns);
+  @else if ($position != false) {
+    @return $color $position, $color $width;
   }
-}
+  @else {
+    @return $color, $color $width;
+  }
+}

data/stylesheets/singularitygs/helpers/_columns.scss

@@ -12,4 +12,13 @@
       @return false;
     }
   }
+}
+
+@function start-row($location) {
+  @if $location == 1 {
+    @return true;
+  }
+  @else {
+    @return false;
+  }
 }

data/stylesheets/singularitygs/helpers/_find.scss

@@ -11,61 +11,70 @@
     @return $user-object;
   }
   @else if $length > 1 {
-    $query-min: breakpoint-get-context('min-width');
-    $query-max: breakpoint-get-context('max-width');
+    //////////////////////////////
+    // @TODO! REplace with Native Sass Fucntion when vailable!
+    // https://github.com/nex3/sass/pull/689
+    //////////////////////////////
+    @if (is-breakpoint-list($haystack) != false) {
+      $query-min: breakpoint-get-context('min-width');
+      $query-max: breakpoint-get-context('max-width');
 
-    // If we've got a min-width or max-width
-    @if $query-min or $query-max {
-      // Reverse the grid so we can step through it
-      $reverse-haystack: ();
-      @for $i from 2 through $length {
-        $reverse-haystack: append($reverse-haystack, nth($haystack, $i), comma);
-      }
-      $reverse-haystack: reverse($reverse-haystack);
-      $rg-length: $length - 1;
+      // If we've got a min-width or max-width
+      @if $query-min or $query-max {
+        // Reverse the grid so we can step through it
+        $reverse-haystack: ();
+        @for $i from 2 through $length {
+          $reverse-haystack: append($reverse-haystack, nth($haystack, $i), comma);
+        }
+        $reverse-haystack: reverse($reverse-haystack);
+        $rg-length: $length - 1;
 
-      // Grab the largest and smallest MQs
-      $smallest: nth(nth($haystack, 2), 2);
-      $largest: nth(nth($reverse-haystack, 1), 2);
-      $context: $query-min;
+        // Grab the largest and smallest MQs
+        $smallest: nth(nth($haystack, 2), 2);
+        $largest: nth(nth($reverse-haystack, 1), 2);
+        $context: $query-min;
 
-      @if not ($mobile-first) {
-        $context: $query-max;
-      }
+        @if not ($mobile-first) {
+          $context: $query-max;
+        }
 
 
-      // If it's smallest than the smallest MQ, use the 1st grid
-      @if $context < $smallest {
-        @return nth($haystack, 1);
-      }
-      // If it's larger than or equal to the largest MQ, use the last grid
-      @else if $context >= $largest {
-        @return nth(nth($reverse-haystack, 1), 1);
-      }
-      // If it's in between the smallest and largest, go run a check.
-      @else {
-        // Loop through each MQ.
-        @for $j from 1 through $rg-length {
-          $query: nth(nth($reverse-haystack, $j), 2);
+        // If it's smallest than the smallest MQ, use the 1st grid
+        @if $context < $smallest {
+          @return nth($haystack, 1);
+        }
+        // If it's larger than or equal to the largest MQ, use the last grid
+        @else if $context >= $largest {
+          @return nth(nth($reverse-haystack, 1), 1);
+        }
+        // If it's in between the smallest and largest, go run a check.
+        @else {
+          // Loop through each MQ.
+          @for $j from 1 through $rg-length {
+            $query: nth(nth($reverse-haystack, $j), 2);
 
-          // If the MQ is greather than or equal to the the MQ in question, use it! (mobile first)
-          @if ($mobile-first) {
-            @if $context >= $query {
-              @return nth(nth($reverse-haystack, $j), 1);
+            // If the MQ is greather than or equal to the the MQ in question, use it! (mobile first)
+            @if ($mobile-first) {
+              @if $context >= $query {
+                @return nth(nth($reverse-haystack, $j), 1);
+              }
             }
-          }
-          // If the MQ is less than or equal to the the MQ in question, use it! (not mobile first)
-          @else {
-            @if $context <= $query {
-              @return nth(nth($reverse-haystack, $j), 1);
+            // If the MQ is less than or equal to the the MQ in question, use it! (not mobile first)
+            @else {
+              @if $context <= $query {
+                @return nth(nth($reverse-haystack, $j), 1);
+              }
             }
           }
         }
       }
+      // All else fails, return the first grid
+      @else {
+        @return nth($haystack, 1);
+      }
     }
-    // All else fails, return the first grid
     @else {
-      @return nth($haystack, 1);
+      @return $haystack;
     }
   }
   // All else fails, return the first grid

data/stylesheets/singularitygs/math/_columns.scss

@@ -7,26 +7,36 @@
   $columns: find-grid($columns);
   $gutter: find-gutter($gutter);
 
+  // @debug $columns;
+  // @debug $gutter;
+
   // Combine the columns and gutters
   $columns-and-gutters: column-sum($columns, $gutter);
 
+  // @debug $columns-and-gutters;
+
   // Equal width columns are easy! Deal with them!
   @if type-of($columns) == 'number' or length($columns) == 1 {
-    $span-and-gutters: $span + (($span - 1) * nth($gutter, 1));
+    $span-and-gutters: $span + $gutter * ($span - 1);
     @return $span-and-gutters / $columns-and-gutters * 100%;
   }
   // Asymmetric lists are harder, so we're going to treat them as their own columns
   @else if type-of($columns) == 'list' or length($columns) > 1 {
-    // Build a fake column set
-    $sum: 0;
-    $holder: ();
+    $span-and-gutters: 0;
 
-    @for $i from $location to ($location + $span) {
-      $holder: append($holder, nth(nth($columns, $i), 1), comma);
+    @if $location == 1 and $span >= 1 {
+      @for $i from 1 through $span {
+        $span-and-gutters: $span-and-gutters + nth($columns, $i) + $gutter;
+      }
+    }
+    @else {
+      $total: $location + $span - 1;
+      @for $i from $location through $total {
+        $span-and-gutters: $span-and-gutters + nth($columns, $i) + $gutter;
+      }
     }
+    $span-and-gutters: $span-and-gutters - $gutter;
 
-    // Get sub-column sum
-    $span-and-gutters: column-sum($holder, $gutter);
     @return $span-and-gutters / $columns-and-gutters * 100%;
   }
   @else {

data/stylesheets/singularitygs/math/_span.scss

@@ -0,0 +1,3 @@
+@function grid-span($span, $location, $grid: false, $gutter: false) {
+  @return column-span($span, $location, $grid, $gutter) + gutter-span($gutter, $grid);
+}

metadata

@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
   segments: 
   - 1
   - 0
-  - 1
-  version: 1.0.1
+  - 2
+  version: 1.0.2
 platform: ruby
 authors: 
 - Scott Kellum
@@ -15,7 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2013-04-02 00:00:00 -04:00
+date: 2013-04-03 00:00:00 -04:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -99,6 +99,7 @@ files:
 - stylesheets/singularitygs/math/_columns.scss
 - stylesheets/singularitygs/math/_context.scss
 - stylesheets/singularitygs/math/_gutters.scss
+- stylesheets/singularitygs/math/_span.scss
 - templates/box-sizing/behaviors/box-sizing/boxsizing.htc
 - templates/box-sizing/behaviors/box-sizing/boxsizing.php
 - templates/box-sizing/manifest.rb