singularitygs 0.0.15.1 → 0.0.16

data/lib/singularitygs.rb

@@ -5,6 +5,6 @@ require 'breakpoint'
 Compass::Frameworks.register("singularitygs", :path => "#{File.dirname(__FILE__)}/..")
 
 module SingularityGS
-  VERSION = "0.0.15.1"
-  DATE = "2012-10-10"
+  VERSION = "0.0.16"
+  DATE = "2012-10-28"
 end

data/stylesheets/_singularitygs.scss

@@ -3,6 +3,9 @@
 @import "modular-scale";
 @import "breakpoint";
 
+// Singularity debug output
+$singularity-debug: false !default;
+
 // Can be a number or a list of non-uniform column widths
 $columns: 12 !default;
 

data/stylesheets/singularitygs/_column.scss

@@ -1,19 +1,14 @@
-// calculate the width of individual columns
-//@function list-column-width($location, $columns) {
-//  // send a warning if this is used when $columns is not a list
-//  @if type-of($columns) != list {
-//    @warn "The column-list-sum function requires the variable $columns to be a list.";
-//  }
-//  @else {
-//    // divide the column from its context
-//    @return nth(nth($columns, $location), 1) / list-sum($columns);
-//  }
-//}
-
 // Calculate the width spanning multiple columns
-@function column-span($span, $location: 1, $columns: $columns) {
-  $columns-and-gutters: column-sum($columns, $gutter);
+@function column-span($span, $location: 1, $columns: $columns, $gutter: $gutter) {
+  // if the gutter is a percent, convert it to a ratio
   
+  @if unit($gutter) == '%' {
+    $gutter: percentage-gutter-conversion($gutter, $columns);
+  }
+
+  // gutters are a type of column
+  $columns-and-gutters: column-sum($columns, $gutter);
+
   // Equal width columns
   @if type-of($columns) == number {
     $span-and-gutter: $span + (($span - 1) * $gutter);
@@ -28,14 +23,20 @@
       @for $i from $location to $location + $span {
         $holder: append($holder, nth(nth($columns, $i), 1), comma);
       }
-      
+
       @return column-sum($holder, $gutter) / $columns-and-gutters * 100%;
   }
-  
+
   @return 10%;
 }
 
 @function column-sum($columns: $columns, $gutter: $gutter) {
+  
+  // if the gutter is a percent, convert it to a ratio
+  @if unit($gutter) == percentage {
+    $gutter: percentage-gutter-conversion($gutter, $columns);
+  }
+
   @if type-of($columns) == 'number' {
     @return $columns + ((column-count($columns) - 1) * $gutter);
   }

data/stylesheets/singularitygs/_grid-plugins.scss

@@ -1,2 +1,3 @@
 @import "grid-plugins/compound";
+@import "grid-plugins/ratio-spiral";
 @import "grid-plugins/ratio";

data/stylesheets/singularitygs/_grid-structure.scss

@@ -1,4 +1,3 @@
 @import "grid-structure/structure-display-table";
-//@import "grid-structure/structure-clear";
 @import "grid-structure/structure-float";
 @import "grid-structure/structure-grid-layout";

data/stylesheets/singularitygs/_grid.scss

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

data/stylesheets/singularitygs/_gutter.scss

@@ -1,10 +1,44 @@
+// percentage conversion
+@function percentage-gutter-conversion($percent-gutter, $columns) {
+
+  // find the resolution of the grids
+  $resolution: 0;
+  @if length($columns) == 1 {
+    $resolution: $columns;
+  }
+  @else {
+    @each $column in $columns {
+      $resolution: $resolution + $column;
+    }
+  }
+
+  // divide the percentage gutter by 100% to get the offset
+  // then multiply be resolution for the full conversion
+  $new-gutter: ($percent-gutter / 100%) * $resolution;
+
+  @return $new-gutter;
+}
+
+
 // Gutters to be removed from columns
 @function gutter-offset($gutter, $columns) {
+
+  // if the gutter is a percent, convert it to a ratio
+  @if unit($gutter) == percentage {
+    $gutter: percentage-gutter-conversion($gutter, $columns);
+  }
+
   $gutter-sum: $gutter * (column-count($columns) - 1);
   @return $gutter-sum / column-count($columns);
 }
 
 @function gutter-span($gutter, $columns) {
+  
+  // if the gutter is a percent, convert it to a ratio
+  @if unit($gutter) == percentage {
+    $gutter: percentage-gutter-conversion($gutter, $columns);
+  }
+
   $columns-and-gutters: column-sum($columns, $gutter);
   
   @return $gutter / $columns-and-gutters * 100%;

data/stylesheets/singularitygs/_mixins.scss

@@ -57,11 +57,12 @@
     @include grid-padding($padding);
     margin-right: $gutter;
   }
+// This function now labels object prefix+span.location
   @for $i from 1 through column-count($columns) {
-    @for $n from $count + 1 through column-count($columns) {
-      #{$selector}#{$prefix}#{$count}-#{$n} {
+    @for $n from 1 through (column-count($columns) - $count) {
+      #{$selector}#{$prefix}#{$n}-#{$count + 1} {
         @extend %#{$prefix}column;
-        @include grid-span($n - $count, $count + 1, $columns, $gutter);
+        @include grid-span($n, $count + 1, $columns, $gutter);
       }
     }
     $count: $count + 1;
@@ -83,18 +84,18 @@
 @mixin container($max-width: $container, $bfs: $base-font-size) {
   $bfs-length: length($bfs);
   $bfs-counter: 1;
-  
+
   @if length($containers) != 0 {
     $query: 'min-width';
     @if $grids-mobile-first == false {
       $query: 'max-width';
     }
-    
+
     $total: length($containers);
-    
+
     @if $total > 1 {
       @for $i from 2 through $total {
-        
+
         @include breakpoint((nth(nth($containers, $i), 2) $query)) {
           $bfs-holder: bfs-finder($query);
           @if unit(nth(nth($containers, $i), 1)) != '%' and $container-to-ems == true {
@@ -121,28 +122,33 @@
       max-width: $max-width;
     }
   }
-  
+
   //////////////////////////////
   // Center Container
   //////////////////////////////
   margin: 0 auto;
   
+  //////////////////////////////
+  // Overflow: Hidden
+  //////////////////////////////
+  overflow: hidden;
+  
   //////////////////////////////
   // Border box and clearfix
   //////////////////////////////
   @include box-sizing(border-box);
   *behavior: url('../behaviors/box-sizing/boxsizing.php');
-  
+
   &:before,
   &:after {
     content: "";
     display: table;
   }
-  
+
   &:after {
     clear: both;
   }
-  
+
   @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
     /* for IE 6/7 */
     *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
@@ -161,10 +167,10 @@
   @if $grids-mobile-first == false {
     $query: 'max-width';
   }
-  
+
   html {
     font-size: nth($bfs, 1);
-    
+
     @if $bfs-length > 1 {
       @for $i from 2 through $bfs-length {
         @include breakpoint((nth(nth($bfs, $i), 2) $query)) {
@@ -181,11 +187,11 @@
 @function bfs-finder($query) {
   $context: breakpoint-get-context($query);
   $reverse: reverse($base-font-size);
-  
+
   @if $grids-mobile-first == false {
     $query: 'max-width';
   }
-  
+
   @if $query == "min-width" and $context != false {
     @each $size in $reverse {
       @if length($size) == 2 {

data/stylesheets/singularitygs/grid-plugins/_compound.scss

@@ -1,46 +1,49 @@
-@function compound($c1: 1, $c2: 1, $c3: 1, $c4: 1, $c5: 1, $c6: 1) {
-  $common-multiple: $c1 * $c2 * $c3 * $c4 * $c5 * $c6;
+// 16 arguments can be passed into this function
+// a max of 16 comma seperated grids
+@function compound($cg1: 1, $cg2: 1, $cg3: 1, $cg4: 1, $cg5: 1, $cg6: 1, $cg7: 1, $cg8: 1, $cg9: 1, $cg10: 1, $cg11: 1, $cg12: 1, $cg13: 1, $cg14: 1, $cg15: 1, $cg16: 1) {
+
+  // merge arguments into a single list.
+  $compound-grids: $cg1, $cg2, $cg3, $cg4, $cg5, $cg6, $cg7, $cg8, $cg9, $cg10, $cg11, $cg12, $cg13, $cg14, $cg15, $cg16;
+
+  // Find the base resolution of grid
+  $resolution: 1;
+  @each $item in $compound-grids {
+    $resolution: $resolution * $item;
+  }
+
   $compound-grid: ();
   $compound-counter: 1;
-  @for $i from 1 through $common-multiple {
+  // cycle through each step in grid resolution
+  @for $i from 1 through $resolution {
+
+    // dont add a column by default
     $add-col: false;
-    @if $c1 != 1 {
-      @if $i / $c1 == round($i / $c1) {
-        $add-col: true;
-      }
-    }
-    @if $c2 != 1 {
-      @if $i / $c2 == round($i / $c2) {
-        $add-col: true;
-      }
-    }
-    @if $c3 != 1 {
-      @if $i / $c3 == round($i / $c3) {
-        $add-col: true;
-      }
-    }
-    @if $c4 != 1 {
-      @if $i / $c4 == round($i / $c4) {
-        $add-col: true;
-      }
-    }
-    @if $c5 != 1 {
-      @if $i / $c5 == round($i / $c5) {
-        $add-col: true;
-      }
-    }
-    @if $c6 != 1 {
-      @if $i / $c6 == round($i / $c6) {
+
+    // cycle through all grids to see if any grids match
+    @each $grid in $compound-grids {
+
+      // if the grid divides evenly into the resolution, add a column
+      // divide the resolution by number of columns to get the column resolution
+      @if $i / ($resolution / $grid) == round($i / ($resolution / $grid)) {
         $add-col: true;
       }
     }
+
+    // add the counter value to the compound grid list, reset counter
+    // this marks where one column ends and a new one begins
     @if $add-col {
       $compound-grid: join($compound-grid, $compound-counter, comma);
       $compound-counter: 1;
     }
+    // if no column is added, bump up counter
     @else {
       $compound-counter: $compound-counter + 1;
     }
   }
+
+  @if $singularity-debug {
+    @debug "Grid compounded to #{length($compound-grid)} columns";
+  }
+
   @return $compound-grid;
-}
+}

data/stylesheets/singularitygs/grid-plugins/_ratio-spiral.scss

@@ -0,0 +1,42 @@
+// centralize spiral steps.
+@function ratio-spiral-i($i) {
+  @return (($i * 2) + 1);
+}
+
+@function ratio-spiral($depth: 5, $ratio: golden(), $invert: false) {
+  
+  // write the middle most column, a little out of step from the other columns.
+  $list: ms(ratio-spiral-i(-$depth) + 1, 100, $ratio);
+
+  // flip the direction the order columns are written in.
+  @if $invert == false {
+    @for $i from -($depth - 1) to 0 {
+      // if the number is even
+      @if $i/2 == round($i/2) {
+        // append after the list
+        $list: append($list, ms(ratio-spiral-i($i), 100, $ratio));
+      }
+      @else {
+        // append before the list
+        $list: append(ms(ratio-spiral-i($i), 100, $ratio), $list);
+      }
+    }
+  }
+
+  @else {
+    @for $i from -($depth - 1) to 0 {
+      @if $i/2 == round($i/2) {
+        $list: append(ms(ratio-spiral-i($i), 100, $ratio), $list);
+      }
+      @else {
+        $list: append($list, ms(ratio-spiral-i($i), 100, $ratio));
+      }
+    }
+  }
+
+  @if $singularity-debug {
+    @debug "Grid compounded to #{length($list)} columns";
+  }
+
+  @return $list;
+}

data/stylesheets/singularitygs/grid-plugins/_ratio.scss

@@ -16,5 +16,9 @@
     $return: reverse($return);
   }
   
+  @if $singularity-debug {
+    @debug "Grid compounded to #{length($return)} columns";
+  }
+  
   @return $return;
 }

metadata

@@ -5,9 +5,8 @@ version: !ruby/object:Gem::Version
   segments: 
   - 0
   - 0
-  - 15
-  - 1
-  version: 0.0.15.1
+  - 16
+  version: 0.0.16
 platform: ruby
 authors: 
 - Scott Kellum
@@ -16,7 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-10-10 00:00:00 -04:00
+date: 2012-10-28 00:00:00 -04:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -99,8 +98,8 @@ files:
 - stylesheets/singularitygs/_helpers.scss
 - stylesheets/singularitygs/_mixins.scss
 - stylesheets/singularitygs/grid-plugins/_compound.scss
+- stylesheets/singularitygs/grid-plugins/_ratio-spiral.scss
 - stylesheets/singularitygs/grid-plugins/_ratio.scss
-- stylesheets/singularitygs/grid-structure/_structure-clear.scss
 - stylesheets/singularitygs/grid-structure/_structure-display-table.scss
 - stylesheets/singularitygs/grid-structure/_structure-float.scss
 - stylesheets/singularitygs/grid-structure/_structure-grid-layout.scss

data/stylesheets/singularitygs/grid-structure/_structure-clear.scss

@@ -1,32 +0,0 @@
-$legacy-support-for-ie6: true !default;
-$legacy-support-for-ie7: true !default;
-
-@mixin grid-clear($clear-dir) {
-  @if $clear-dir == 'left' {
-    clear: right;
-  }
-  @else if $clear-dir == 'right' {
-    clear: left;
-  }
-  @else if $clear-dir == 'both' {
-    clear: both;
-  }
-  
-  
-  &:before,
-  &:after {
-    content: "";
-    display: table;
-  }
-  
-  &:after {
-    clear: both;
-  }
-  
-  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
-    /* for IE 6/7 */
-    *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
-  }
-  /* non-JS fallback */
-  *zoom: 1;
-}