singularitygs 0.0.16 → 0.0.17

data/lib/singularitygs.rb

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

data/stylesheets/_singularitygs.scss

@@ -15,10 +15,6 @@ $gutter: .25 !default;
 // Grid padding can be any type of unit
 $padding: 0 !default;
 
-// Grid structure
-// Only option is float at the moment
-$grid-structure: float !default;
-
 // Layout direction?
 // options are ltr, rtl, both
 $dir: ltr !default;
@@ -41,6 +37,12 @@ $container-to-ems: false !default;
 // Base Font Size
 $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";
+
 // Helpers return think like list sums and column counts
 @import "singularitygs/helpers";
 
@@ -56,9 +58,6 @@ $base-font-size: 1em !default;
 // Grid math combines column and gutter math
 @import "singularitygs/grid";
 
-// Structural templates for grid
-@import "singularitygs/grid-structure";
-
 // Mixins to write
 @import "singularitygs/mixins";
 
@@ -66,7 +65,4 @@ $base-font-size: 1em !default;
 @import "singularitygs/grid-test";
 
 // Mixins to write
-@import "singularitygs/background-grid";
-
-// Gridsets
-@import "singularitygs/gridsets";
+@import "singularitygs/background-grid";

data/stylesheets/singularitygs/_helpers.scss

@@ -1,43 +1,3 @@
-// Calculate the total sum of a list (context)
-@function list-sum($list) {
-  // zero out the initial sum
-  $sum: 0;
-  // loop through each value in the list adding it to $list-sum
-  @for $i from 1 through length($list) {
-    $sum: $sum + nth(nth($list, $i), 1);
-  }
-  @return nth($sum, 1);
-}
-
-// Find column count
-@function column-count($columns) {
-  @if type-of($columns) == number {
-    @return $columns;
-  }
-  @if type-of($columns) == list {
-    @return length($columns);
-  }
-}
-
-// Context of gutters
-@function gutter-context($gutter, $context) {
-  @return $gutter * 100% / $context;
-}
-
-@function repeat($count, $repeat) {
-  $list: $repeat;
-  @for $i from 2 through $count {
-    $list: join($repeat, $list);
-  }
-  @return $list;
-}
-
-// Reverses direction of a list
-@function reverse($list) {
-  $length: length($list);
-  $return: ();
-  @for $i from 0 to $length {
-    $return: append($return, nth($list, $length - $i), comma);
-  }
-  @return $return;
-}
+@import "helpers/lists";
+@import "helpers/grids";
+@import "helpers/gridsets";

data/stylesheets/singularitygs/_mixins.scss

@@ -1,222 +1,7 @@
-// Converted old Grid Span into Grid Build
-// It a piece of cake to make a pretty grid, CAKE!
-@mixin grid-build($span, $location, $columns, $gutter, $padding) {
-  @include box-sizing(border-box);
-  *behavior: url('../behaviors/box-sizing/boxsizing.php');
-  width: grid-span($span, $location, $columns, $gutter);
-  @if $grid-structure == float {
-    @include structure-float($span, $location, $columns, $gutter);
-  }
-  // add special left 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;
-    }
-  }
-  @else if $padding != 0 {
-    padding: 0 $padding;
-  }
-  // bump up the counter
-  $grid-counter: $location + $span;
-  @if $grid-counter > column-count($columns) {
-    $grid-counter: 1;
-  }
-}
-
-// This writes classes, IDs, or silent objects for you to extend or use in your HTML. They can be written to different breakpoints to extend or call into your HTML as needed.
-@mixin grid-objects($prefix: a, $columns: $columns, $gutter: $gutter, $padding: $padding, $selector: "%") {
-  $grouped-styles: true;
-  // counter keeps track of the starting position
-  $count: 0;
-  %#{$prefix}column {
-    @if $dir == ltr or $dir == both {
-      margin-right: -100%;
-      float: left;
-    }
-    @if $dir == rtl {
-      margin-left: -100%;
-      float: right;
-    }
-    @if $dir == both {
-      #{$rtl-selector} & {
-        margin-left: -100%;
-        float: right;
-      }
-    }
-    float: left;
-    @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 1 through (column-count($columns) - $count) {
-      #{$selector}#{$prefix}#{$n}-#{$count + 1} {
-        @extend %#{$prefix}column;
-        @include grid-span($n, $count + 1, $columns, $gutter);
-      }
-    }
-    $count: $count + 1;
-  }
-}
-
-// Add padding to an object on the grid.
-@mixin grid-padding($padding) {
-  @if $padding != 0 {
-    padding: 0 $padding;
-    @include box-sizing(border-box);
-    *behavior: url('../behaviors/box-sizing/boxsizing.php');
-  }
-}
-
-//////////////////////////////
-// Container Mixin
-//////////////////////////////
-@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 {
-            max-width: base-conversion(nth(nth($containers, $i), 1)) / base-conversion($bfs-holder) * 1em;;
-          }
-          @else {
-            max-width: nth(nth($containers, $i), 1);
-          }
-        }
-      }
-    }
-    @if unit(nth($containers, 1)) != '%' {
-      max-width: breakpoint-to-base-em(nth($containers, 1), nth($bfs, 1));
-    }
-    @else {
-      max-width: nth($containers, 1);
-    }
-  }
-  @else {
-    @if unit($max-width) != '%' and $container-to-ems == true {
-      max-width: base-conversion($max-width) / base-conversion($bfs) * 1em;
-    }
-    @else {
-      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");
-  }
-  /* non-JS fallback */
-  *zoom: 1;
-}
-
-//////////////////////////////
-// Base Font Size in HTML tag
-// NOT DONE YET!
-//////////////////////////////
-@mixin base-font-sizing($bfs: $base-font-size) {
-  $bfs-length: length($base-font-size);
-  $query: 'min-width';
-  @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)) {
-          font-size: nth(nth($bfs, $i), 1);
-        }
-      }
-    }
-  }
-}
-
-////////////////////////////////
-//// Find Base Font Size
-////////////////////////////////
-@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 {
-        @if nth($size, 2) < $context {
-          @return nth($size, 1);
-        }
-      }
-      @else {
-        @return nth($base-font-size, 1);
-      }
-    }
-  }
-  @else if $query == "max-width" and $context != false {
-    @each $size in $reverse {
-      @if length($size) == 2 {
-        @if nth($size, 2) > $context {
-          @return nth($size, 1);
-        }
-      }
-      @else {
-        @return nth($base-font-size, 1);
-      }
-    }
-  }
-  @else {
-    @return nth($base-font-size, 1);
-  }
-}
+@import 'mixins/grid-span';
+@import 'mixins/base-font-size';
+@import 'mixins/grid-build';
+@import 'mixins/container';
+@import 'mixins/grid-objects';
+@import 'mixins/grid-padding';
+@import "mixins/push-pull";

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

@@ -0,0 +1,94 @@
+@mixin float-clear($dir) {
+  @if $dir == 'left' {
+    clear: right;
+  }
+  @else if $dir == 'right' {
+    clear: left;
+  }
+  @else if $dir == 'both' {
+    clear: both;
+  }
+
+  @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-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;
+    }
+    @include float-clear('right');
+  }
+  @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');
+    }
+  }
+
+  // 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;
+    }
+  }
+}
+
+@mixin float-structure($span, $location, $columns, $gutter, $padding) {
+  // common components
+  @include float-common($columns, $gutter);
+
+  // specific styles
+  @include float-section($span, $location, $columns, $gutter);
+}

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

@@ -0,0 +1,145 @@
+@mixin isolation-clear($dir) {
+  @if $dir == 'left' {
+    clear: right;
+    @if $grouped-styles {
+      margin-right: -100%;
+      float: left;
+    }
+  }
+  @else if $dir == 'right' {
+    clear: left;
+    @if $grouped-styles {
+      margin-left: -100%;
+      float: right;
+    }
+  }
+  @else if $dir == 'both' {
+    clear: both;
+    @if $grouped-styles {
+      margin-right: -100%;
+      float: left;
+    }
+  }
+
+  @include clearfix;
+}
+
+@mixin isolation-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 isolation-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' {
+      @if $grouped-styles == false {
+        margin-right: -100%;
+        float: left;
+        @include isolation-clear('left');
+      }
+    }
+    @else if $grid-location == 'first' {
+      @if $grouped-styles == false {
+        margin-right: -100%;
+        float: left;
+        @include isolation-clear('left');
+      }
+      margin-left: 0;
+    }
+    @else if $grid-location == 'last' {
+      float: right;
+      margin-right: 0;
+      @include isolation-clear('left');
+    }
+  }
+  @if $dir == rtl {
+    @if $grid-location == 'middle' {
+      @if $grouped-styles == false {
+        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;
+      @include isolation-clear('right');
+    }
+  }
+  @if $dir == both {
+    #{$rtl-selector} & {
+      @if $grid-location == 'middle' {
+        @if $grouped-styles {
+          margin-left: -100%;
+          float: right;
+          @include isolation-clear('right');
+        }
+      }
+      @if $grid-location == 'first' {
+        @if $grouped-styles {
+          margin-left: -100%;
+          float: right;
+          @include isolation-clear('right');
+        }
+        margin-right: 0;
+      }
+      @if $grid-location == 'last' {
+        float: left;
+        margin-left: 0;
+        @include isolation-clear('right');
+      }
+    }
+  }
+  
+  @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;
+    }
+  }
+}
+
+@mixin isolation-structure($span, $location, $columns, $gutter, $padding) {
+  // common components
+  @include isolation-common($columns, $gutter);
+
+  // specific styles
+  @include isolation-section($span, $location, $columns, $gutter);
+}

data/stylesheets/singularitygs/helpers/_grids.scss

@@ -0,0 +1,34 @@
+// Find column count
+@function column-count($columns) {
+  @if type-of($columns) == number {
+    @return $columns;
+  }
+  @if type-of($columns) == list {
+    @return length($columns);
+  }
+}
+
+// Context of gutters
+@function gutter-context($gutter, $context) {
+  @return $gutter * 100% / $context;
+}
+
+// First or last column?
+$grid-location: '';
+
+@mixin grid-location($span, $location, $columns) {
+  $grid-location: '';
+  
+  @if ($span + $location) > column-count($columns) {
+    $grid-location: 'last';
+  }
+  @else if $location == 1 {
+    $grid-location: 'first';
+  }
+  @else if $location == column-count($columns) {
+    $grid-location: 'last';
+  }
+  @else {
+    $grid-location: 'middle';
+  }
+}