singularitygs 1.0.alpha.0 → 1.0.alpha.1

data/lib/singularitygs.rb

@@ -5,6 +5,6 @@ require 'breakpoint'
 Compass::Frameworks.register("singularitygs", :path => "#{File.dirname(__FILE__)}/..")
 
 module SingularityGS
-  VERSION = "1.0.alpha.0"
+  VERSION = "1.0.alpha.1"
   DATE = "2012-11-06"
 end

data/stylesheets/_singularitygs.scss

@@ -38,10 +38,10 @@ $container-to-ems: false !default;
 $base-font-size: 1em !default;
 
 // Structural templates for grid
-$grouped-styles: false !default;
 $output: 'isolation' !default;
-@import "singularitygs/grid-structure/isolation";
-@import "singularitygs/grid-structure/float";
+
+
+@import "singularitygs/grid-structure";
 
 // Helpers return think like list sums and column counts
 @import "singularitygs/helpers";

data/stylesheets/singularitygs/_grid-structure.scss

@@ -0,0 +1,14 @@
+@import "grid-structure/float";
+@import "grid-structure/isolation";
+
+// main structure mixin
+@mixin grid-structure($output, $span, $location, $columns, $gutter, $padding, $grid-output-block: both) {
+
+  @if $output == float {
+    @include float-structure($span, $location, $columns, $gutter, $padding, $grid-output-block)
+  }
+
+  @if $output == isolation {
+    @include isolation-structure($span, $location, $columns, $gutter, $padding, $grid-output-block)
+  }
+}

data/stylesheets/singularitygs/_gutter.scss

@@ -8,7 +8,7 @@
   }
   @else {
     @each $column in $columns {
-      $resolution: $resolution + $column;
+      $resolution: $resolution + nth($column, 1);
     }
   }
 

data/stylesheets/singularitygs/grid-structure/_float.scss

@@ -1,4 +1,4 @@
-@mixin float-clear($dir) {
+@mixin float-clear($dir, $grid-output-block: both) {
   @if $dir == 'left' {
     clear: right;
   }
@@ -12,50 +12,47 @@
   @include clearfix;
 }
 
-@mixin float-common($columns: $columns, $gutter: $gutter, $padding: $padding, $grouped-styles: $grouped-styles) {
-  @include box-sizing(border-box);
-  *behavior: url("../behaviors/box-sizing/boxsizing.php");
-  overflow: hidden;
-  *zoom: 1;
-
-  @if $grouped-styles and $padding != 0 {
-    padding-left: $padding;
-    padding-right: $padding;
-  }
-  @if $grouped-styles == false and $padding != 0 {
+@mixin float-common($columns: $columns, $gutter: $gutter, $padding: $padding, $grid-output-block: common) {
+  @if $grid-output-block != section {
+    @include box-sizing(border-box);
+    *behavior: url("../behaviors/box-sizing/boxsizing.php");
+    overflow: hidden;
+    *zoom: 1;
 
+    @if $grid-output-block == both or $grid-output-block == common {
+      @if $padding != 0 {
+        @if type-of($padding) == 'list' {
+          padding-left: nth($padding, 1);
+        padding-right: nth($padding, 2);
+        }
+        @else {
+          padding-left: $padding;
+          padding-right: $padding;
+        }
+      }
+    }
   }
 }
 
 
 
-@mixin float-section($span, $location: $grid-counter, $columns: $columns, $gutter: $gutter, $padding: $padding, $grouped-styles: $grouped-styles) {
-  width: grid-span($span, $location, $columns, $gutter);
-  // add special left padding
-  @include grid-location($span, $location, $columns);
-  
-  @if $dir == ltr or $dir == both {
-    @if $grid-location == 'middle' or $grid-location == 'first'{
-      float: left;
-      margin-right: gutter-span($gutter, $columns);
-    }
-    @else if $grid-location == 'last' {
-      float: right;
-    }
-    @include float-clear('left');
-  }
-  @if $dir == rtl {
-    @if $grid-location == 'middle' or $grid-location == 'first' {
-      float: right;
-      margin-left: gutter-span($gutter, $columns);
-    }
-    @else if $grid-location == 'last' {
-      float: left;
+@mixin float-section($span, $location: $grid-counter, $columns: $columns, $gutter: $gutter, $padding: $padding, $grid-output-block: section) {
+  @if $grid-output-block == section or $grid-output-block == both {
+    width: grid-span($span, $location, $columns, $gutter);
+    // add special left padding
+    @include grid-location($span, $location, $columns);
+
+    @if $dir == ltr or $dir == both {
+      @if $grid-location == 'middle' or $grid-location == 'first'{
+        float: left;
+        margin-right: gutter-span($gutter, $columns);
+      }
+      @else if $grid-location == 'last' {
+        float: right;
+      }
+      @include float-clear('left');
     }
-    @include float-clear('right');
-  }
-  @if $dir == both {
-    #{$rtl-selector} & {
+    @if $dir == rtl {
       @if $grid-location == 'middle' or $grid-location == 'first' {
         float: right;
         margin-left: gutter-span($gutter, $columns);
@@ -65,30 +62,37 @@
       }
       @include float-clear('right');
     }
-  }
-
-  // Padding
-  @if type-of($columns) == list {
-    @if type-of(nth($columns, $location)) == list {
-      padding-left: nth(nth($columns, $location), 2);
-    }
-    @else if $padding != 0 {
-      padding-left: $padding;
-    }
-    // add special right padding
-    @if type-of(nth($columns, $location + $span - 1)) == list {
-      padding-right: nth(nth($columns, $location + $span - 1), 2);
-    }
-    @else if $padding != 0 {
-      padding-right: $padding;
+    @if $dir == both {
+      #{$rtl-selector} & {
+        @if $grid-location == 'middle' or $grid-location == 'first' {
+          float: right;
+          margin-left: gutter-span($gutter, $columns);
+        }
+        @else if $grid-location == 'last' {
+          float: left;
+        }
+        @include float-clear('right');
+      }
     }
   }
 }
 
-@mixin float-structure($span, $location, $columns, $gutter, $padding) {
-  // common components
-  @include float-common($columns, $gutter);
+// main structure mixin
+@mixin float-structure($span, $location, $columns, $gutter, $padding, $grid-output-block: both) {
+
+  // Full output
+  @if $grid-output-block == both {
+    @include float-common($columns, $gutter, $padding, $grid-output-block);
+    @include float-section($span, $location, $columns, $gutter, $padding, $grid-output-block);
+  }
+
+  // Only the shared components
+  @if $grid-output-block == common {
+    @include float-common($columns, $gutter, $padding, $grid-output-block);
+  }
 
-  // specific styles
-  @include float-section($span, $location, $columns, $gutter);
+  // Only the section components
+  @if $grid-output-block == section {
+    @include float-section($span, $location, $columns, $gutter, $padding, $grid-output-block);
+  }
 }

data/stylesheets/singularitygs/grid-structure/_isolation.scss

@@ -1,21 +1,21 @@
-@mixin isolation-clear($dir) {
+@mixin isolation-clear($dir, $grid-output-block: both) {
   @if $dir == 'left' {
     clear: right;
-    @if $grouped-styles {
+    @if $grid-output-block == common {
       margin-right: -100%;
       float: left;
     }
   }
   @else if $dir == 'right' {
     clear: left;
-    @if $grouped-styles {
+    @if $grid-output-block == common {
       margin-left: -100%;
       float: right;
     }
   }
   @else if $dir == 'both' {
     clear: both;
-    @if $grouped-styles {
+    @if $grid-output-block == common {
       margin-right: -100%;
       float: left;
     }
@@ -24,44 +24,66 @@
   @include clearfix;
 }
 
-@mixin isolation-common($columns: $columns, $gutter: $gutter, $padding: $padding, $grouped-styles: $grouped-styles) {
+@mixin isolation-common($columns: $columns, $gutter: $gutter, $padding: $padding, $grid-output-block: common) {
   @include box-sizing(border-box);
   *behavior: url("../behaviors/box-sizing/boxsizing.php");
   overflow: hidden;
-  *zoom: 1;
 
-  @if $grouped-styles and $padding != 0 {
-    padding-left: $padding;
-    padding-right: $padding;
+  @if $grid-output-block == both or $grid-output-block == common {
+    @if $padding != 0 {
+      @if type-of($padding) == 'list' {
+        padding-left: nth($padding, 1);
+        padding-right: nth($padding, 2);
+      }
+      @else {
+        padding-left: $padding;
+        padding-right: $padding;
+      }
+    }
   }
-  @if $grouped-styles == false and $padding != 0 {
 
+
+  @if $dir == ltr or $dir == both {
+    @if $grid-output-block == common {
+      margin-right: -100%;
+      float: left;
+      @include isolation-clear('left');
+    }
+  }
+  @if $dir == rtl {
+    @if $grid-output-block == common {
+      margin-left: -100%;
+      float: right;
+      @include isolation-clear('right');
+    }
+  }
+  @if $dir == both {
+    #{$rtl-selector} & {
+      @if $grid-output-block == common {
+        margin-left: -100%;
+        float: right;
+        @include isolation-clear('right');
+      }
+    }
   }
+
 }
 
 
 
-@mixin isolation-section($span, $location: $grid-counter, $columns: $columns, $gutter: $gutter, $padding: $padding, $grouped-styles: $grouped-styles) {
+@mixin isolation-section($span, $location: $grid-counter, $columns: $columns, $gutter: $gutter, $padding: $padding, $grid-output-block: section) {
   width: grid-span($span, $location, $columns, $gutter);
   // add special left padding
 
   @include grid-location($span, $location, $columns);
 
   @if $dir == ltr or $dir == both {
-    @if $grid-location == 'middle' {
-      @if $grouped-styles == false {
-        margin-right: -100%;
-        float: left;
-        @include isolation-clear('left');
-      }
-    }
-    @else if $grid-location == 'first' {
-      @if $grouped-styles == false {
+    @if $grid-location == 'first' or $grid-location == 'middle' {
+      @if $grid-output-block == both {
         margin-right: -100%;
         float: left;
         @include isolation-clear('left');
       }
-      margin-left: 0;
     }
     @else if $grid-location == 'last' {
       float: right;
@@ -70,21 +92,13 @@
     }
   }
   @if $dir == rtl {
-    @if $grid-location == 'middle' {
-      @if $grouped-styles == false {
+    @if grid-location == 'first' or $grid-location == 'middle' {
+      @if $grid-output-block == both {
         margin-left: -100%;
         float: right;
         @include isolation-clear('right');
       }
     }
-    @else if grid-location == 'first' {
-      @if $grouped-styles {
-        margin-left: -100%;
-        float: right;
-        @include isolation-clear('right');
-      }
-      margin-right: 0;
-    }
     @else if $grid-location == 'last' {
       float: left;
       margin-left: 0;
@@ -94,14 +108,14 @@
   @if $dir == both {
     #{$rtl-selector} & {
       @if $grid-location == 'middle' {
-        @if $grouped-styles {
+        @if $grid-output-block == both {
           margin-left: -100%;
           float: right;
           @include isolation-clear('right');
         }
       }
       @if $grid-location == 'first' {
-        @if $grouped-styles {
+        @if $grid-output-block == both {
           margin-left: -100%;
           float: right;
           @include isolation-clear('right');
@@ -115,31 +129,26 @@
       }
     }
   }
-  
+
   @include push($location - 1, 1, $columns, $gutter);
+}
 
-  // Padding
-  @if type-of($columns) == list {
-    @if type-of(nth($columns, $location)) == list {
-      padding-left: nth(nth($columns, $location), 2);
-    }
-    @else if $padding != 0 {
-      padding-left: $padding;
-    }
-    // add special right padding
-    @if type-of(nth($columns, $location + $span - 1)) == list {
-      padding-right: nth(nth($columns, $location + $span - 1), 2);
-    }
-    @else if $padding != 0 {
-      padding-right: $padding;
-    }
+// main structure mixin
+@mixin isolation-structure($span, $location, $columns, $gutter, $padding, $grid-output-block: both) {
+
+  // Full output
+  @if $grid-output-block == both {
+    @include isolation-common($columns, $gutter, $padding, $grid-output-block);
+    @include isolation-section($span, $location, $columns, $gutter, $padding, $grid-output-block);
   }
-}
 
-@mixin isolation-structure($span, $location, $columns, $gutter, $padding) {
-  // common components
-  @include isolation-common($columns, $gutter);
+  // Only the shared components
+  @if $grid-output-block == common {
+    @include isolation-common($columns, $gutter, $padding, $grid-output-block);
+  }
 
-  // specific styles
-  @include isolation-section($span, $location, $columns, $gutter);
+  // Only the section components
+  @if $grid-output-block == section {
+    @include isolation-section($span, $location, $columns, $gutter, $padding, $grid-output-block);
+  }
 }

data/stylesheets/singularitygs/helpers/_gridsets.scss

@@ -5,7 +5,7 @@
 //////////////////////////////
 @function find-grid($user-columns: false) {
   $length: length($grids);
-  
+
   @if $user-columns != false {
     @return $user-columns;
   }
@@ -19,18 +19,18 @@
     @if $query-max {
       $query-max: breakpoint-to-base-em($query-max);
     }
-    
+
     $ghr: () !default;
-    
+
     @if $query-min or $query-max {
       @for $j from 2 through $length {
         $ghr: append($ghr, nth($grids, $j), comma);
       }
-      
+
       $ghr: reverse($ghr);
-      
+
       $holder-length: length($ghr);
-      
+
       @for $i from 1 through $holder-length {
         $gridholder: nth($ghr, $i);
 
@@ -94,7 +94,7 @@
 //////////////////////////////
 @function find-gutter($user-gutter: false) {
   $length: length($grids);
-  
+
   @if $user-gutter != false {
     @return $user-gutter;
   }
@@ -108,15 +108,15 @@
     @if $query-max {
       $query-max: breakpoint-to-base-em($query-max);
     }
-    
+
     $ghr: () !default;
     $ghs: () !default;
     $gutter-length: length($gutters);
-    
+
     @if $query-min or $query-max {
       @for $j from 2 through $length {
         $ghr: append($ghr, nth($grids, $j), comma);
-        
+
         @if $gutter-length == 0 {
           $ghs: append($ghs, $gutter);
         }
@@ -127,12 +127,12 @@
           $ghs: append($ghs, nth($gutters, $j));
         }
       }
-            
+
       $ghr: reverse($ghr);
       $gthr: reverse($ghs);
-      
+
       $holder-length: length($ghr);
-      
+
       @for $i from 1 through $holder-length {
         $gridholder: nth($ghr, $i);
 
@@ -229,13 +229,39 @@
 //
 // Finds the padding that you should be using
 //////////////////////////////
-@function find-padding($user-padding: false) {
+@function find-padding($user-padding: false, $span: false, $location: false, $columns: false) {
   $length: length($grids);
-  
+
   @if $user-padding != false {
     @return $user-padding;
   }
-  @else if $length > 0 {
+
+  @if ($span and $location and $columns) {
+    @if type-of($columns) == list {
+      $padding-left: false;
+      $padding-right: false;
+
+      @if type-of(nth($columns, $location)) == 'list' {
+        $padding-left: nth(nth($columns, $location), 2);
+      }
+
+      @if type-of(nth($columns, $location + $span - 1)) == 'list' {
+        $padding-right: nth(nth($columns, $location + $span - 1), 2);
+      }
+
+      @if $padding-left and $padding-right {
+        $padding: join($padding-left, $padding-right);
+      }
+      @else if $padding-left {
+        @return $padding-left;
+      }
+      @else if $padding-right {
+        @return $padding-right;
+      }
+    }
+  }
+
+  @if $length > 0 {
     $query-min: breakpoint-get-context('min-width');
     $query-max: breakpoint-get-context('max-width');
 
@@ -245,15 +271,15 @@
     @if $query-max {
       $query-max: breakpoint-to-base-em($query-max);
     }
-    
+
     $ghr: () !default;
     $phs: () !default;
     $padding-length: length($paddings);
-    
+
     @if $query-min or $query-max {
       @for $j from 2 through $length {
         $ghr: append($ghr, nth($grids, $j), comma);
-        
+
         @if $padding-length == 0 {
           $phs: append($phs, $padding);
         }
@@ -264,12 +290,12 @@
           $phs: append($phs, nth($paddings, $j));
         }
       }
-            
+
       $ghr: reverse($ghr);
       $phr: reverse($phs);
-      
+
       $holder-length: length($ghr);
-      
+
       @for $i from 1 through $holder-length {
         $gridholder: nth($ghr, $i);
 

data/stylesheets/singularitygs/mixins/_grid-build.scss

@@ -1,12 +1,7 @@
 @mixin grid-build($span, $location, $columns, $gutter, $padding, $output) {
   
   
-  @if $output == 'isolation' {
-    @include isolation-structure($span, $location, $columns, $gutter, $padding);
-  }
-  @else if $output == 'float' {
-    @include float-structure($span, $location, $columns, $gutter, $padding);
-  }
+  @include grid-structure($output, $span, $location, $columns, $gutter, $padding);
   
   // bump up the counter
   $grid-counter: $location + $span;

data/stylesheets/singularitygs/mixins/_grid-objects.scss

@@ -6,7 +6,9 @@
   // counter keeps track of the starting position
   $count: 0;
   %#{$prefix}column {
-    @include structure-common($columns, $gutter, $padding, true);
+
+    @include grid-structure($output, 1, 1, $columns, $gutter, $padding, common);
+
   }
 
 
@@ -16,8 +18,8 @@
       #{$selector}#{$prefix}#{$n}-#{$count + 1} {
 
         @extend %#{$prefix}column;
-        
-        @include structure-section($n, $count + 1, $columns, $gutter, $padding, true);
+        @include grid-structure($output, $n, $count + 1, $columns, $gutter, $padding, section);
+
       }
     }
 

data/stylesheets/singularitygs/mixins/_grid-span.scss

@@ -1,9 +1,12 @@
-// Converted old Gridset into Grid Span.
+// The top-level mixin to use on adding elements to a grid.
+
+// This step folds in multiple grids and figures out what should
+// be loaded and figures out what breakpoint you are at.
 @mixin grid-span($span, $location, $columns: false, $gutter-span: false, $padding-span: false, $output: $output) {
-  
+
   $columns: find-grid($columns);
   $gutter-span: find-gutter($gutter-span);
-  $padding-span: find-padding($padding-span);
-  
+  $padding-span: find-padding($padding-span, $span, $location, $columns);
+
   @include grid-build($span, $location, $columns, $gutter-span, $padding-span, $output);
 }

metadata

@@ -6,8 +6,8 @@ version: !ruby/object:Gem::Version
   - 1
   - 0
   - alpha
-  - 0
-  version: 1.0.alpha.0
+  - 1
+  version: 1.0.alpha.1
 platform: ruby
 authors: 
 - Scott Kellum
@@ -16,7 +16,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-11-06 00:00:00 -08:00
+date: 2012-11-06 00:00:00 -05:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -91,6 +91,7 @@ files:
 - stylesheets/singularitygs/_background-grid.scss
 - stylesheets/singularitygs/_column.scss
 - stylesheets/singularitygs/_grid-plugins.scss
+- stylesheets/singularitygs/_grid-structure.scss
 - stylesheets/singularitygs/_grid-test.scss
 - stylesheets/singularitygs/_grid.scss
 - stylesheets/singularitygs/_gutter.scss