singularitygs 0.1.alpha → 1.0.alpha.0

data/lib/singularitygs.rb

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

data/stylesheets/_singularitygs.scss

@@ -0,0 +1,68 @@
+/*! SINGULARITY -- http://singularity.gs/ */
+@import "compass";
+@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;
+
+// Must be of the same unit type of defined columns
+$gutter: .25 !default;
+
+// Grid padding can be any type of unit
+$padding: 0 !default;
+
+// Layout direction?
+// options are ltr, rtl, both
+$dir: ltr !default;
+
+// Choose a selector for rtl layouts when using 'both'
+$rtl-selector: '[dir="rtl"]' !default;
+
+// Options for Multiple Grids
+$grids: () !default;
+$gutters: () !default;
+$paddings: () !default;
+
+$grids-mobile-first: true !default;
+
+// Container Nonsense
+$container: 100% !default;
+$containers: () !default;
+$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";
+
+// Compound grid calculation function
+@import "singularitygs/grid-plugins";
+
+// Column math is isolated
+@import "singularitygs/column";
+
+// Gutter math is isolated
+@import "singularitygs/gutter";
+
+// Grid math combines column and gutter math
+@import "singularitygs/grid";
+
+// Mixins to write
+@import "singularitygs/mixins";
+
+// Mixins to write
+@import "singularitygs/grid-test";
+
+// Mixins to write
+@import "singularitygs/background-grid";

data/stylesheets/singularitygs/_background-grid.scss

@@ -0,0 +1,49 @@
+// Write stops for single columns
+@function grid-gradient-stop($location, $columns, $gutter, $color) {
+  @if $location == 1 {
+    @return $color 0%, $color column-span(1, 1, $columns), transparentize($color, 1) column-span(1, 1, $columns);
+  }
+  @if $location == column-count($columns) {
+    @return transparentize($color, 1) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color 100%;
+  }
+  @if $location > 1 {
+    @return transparentize($color, 1) column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color column-span($location - 1, 1, $columns) + gutter-span($gutter, $columns), $color column-span($location, 1, $columns), transparentize($color, 1) column-span($location, 1, $columns);
+  }
+}
+
+// Compiling grid stops
+@function grid-gradient-stops($columns, $gutter, $color) {
+  $list: ();
+  @for $i from 1 through column-count($columns) {
+    $list: join($list, grid-gradient-stop($i, $columns, $gutter, $color), comma);
+  }
+  @return $list;
+}
+
+// Pull in grid stops to make a background gradient
+@mixin background-grid($columns: false, $gutter: false, $color: rgba(#69aedb, 0.5)) {
+  $gl: length($grids);
+  
+  @if $gl == 0 {
+    $columns: find-grid($columns);
+    $gutter: find-gutter($gutter);
+    @include background(linear-gradient(left, grid-gradient-stops($columns, $gutter, $color)));
+  }
+  @else {
+    @for $i from 1 through $gl {
+      @if $i == 1 {
+        $grid: nth($grids, 1);
+        $gutter: find-gutter($gutter);
+        @include background(linear-gradient(left, grid-gradient-stops($grid, $gutter, $color)));
+      }
+      @else {
+        $grid: nth(nth($grids, $i), 1);
+        $mq: nth(nth($grids, $i), 2);
+        @include breakpoint($mq) {
+          $gutter: find-gutter($gutter);
+          @include background(linear-gradient(left, grid-gradient-stops($grid, $gutter, $color)));
+        }
+      }
+    }
+  }
+}

data/stylesheets/singularitygs/_column.scss

@@ -0,0 +1,51 @@
+// Calculate the width spanning multiple columns
+@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);
+    @return $span-and-gutter / $columns-and-gutters * 100%;
+  }
+  // Variable width columns
+  @if type-of($columns) == list {
+      // zero out initial sum
+      $sum: 0;
+      $holder: ();
+      // from start point to end point
+      @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);
+  }
+  @else if type-of($columns) == 'list' {
+    $sum: 0;
+    @each $column in $columns {
+      $sum: $sum + nth($column, 1);
+    }
+    $sum: $sum + (column-count($columns) - 1) * $gutter;
+    @return $sum;
+  }
+}

data/stylesheets/singularitygs/_grid-plugins.scss

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

data/stylesheets/singularitygs/{_grid-test.sass → _grid-test.scss}

@@ -1,16 +1,25 @@
-=test-grid($columns: $columns, $gutter: $gutter, $padding: $padding, $prefix: a, $color: #6bb)
-  .test-grid
-    height: 200px
-    width: 100%
-  $grid-counter: 1
-  @for $i from 1 through column-count($columns)
-    .test.#{$prefix}#{$i}
-      height: 100%
-      +grid-span(1, $i, $columns: $columns, $gutter: $gutter, $padding: $padding)
-      background-color: transparentize($color, .5)
-      .inner
-        height: 100%
-        background-color: transparentize($color, .5)
+@mixin test-grid($columns: $columns, $gutter: $gutter, $padding: $padding, $prefix: a, $color: #66bbbb) {
+  .test-grid {
+    height: 200px;
+    width: 100%;
+  }
+  $grid-counter: 1;
+  @for $i from 1 through column-count($columns) {
+    .test.#{$prefix}#{$i} {
+      height: 100%;
+      @include grid-span(1, $i, $columns, $gutter, $padding);
+      // ie fallback
+      background-color: $color;
+      background-color: transparentize($color, 0.5);
+      .inner {
+        height: 100%;
+        // ie fallback
+        background-color: lighten($color, 10%);
+        background-color: transparentize($color, 0.5);
+      }
+    }
+  }
+}
 
 // Need this markup to test
 //<div class="test-grid">

data/stylesheets/singularitygs/_grid.scss

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

data/stylesheets/singularitygs/_gutter.scss

@@ -0,0 +1,45 @@
+// 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/_helpers.scss

@@ -0,0 +1,3 @@
+@import "helpers/lists";
+@import "helpers/grids";
+@import "helpers/gridsets";

data/stylesheets/singularitygs/_mixins.scss

@@ -0,0 +1,7 @@
+@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-plugins/_compound.scss

@@ -0,0 +1,49 @@
+// 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;
+  // cycle through each step in grid resolution
+  @for $i from 1 through $resolution {
+
+    // dont add a column by default
+    $add-col: false;
+
+    // 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;
 }

data/stylesheets/singularitygs/grid-structure/_display-table.scss

@@ -0,0 +1 @@
+

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);
+}