singularitygs 1.0.3 → 1.0.4

data/lib/singularitygs.rb

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

data/stylesheets/singularitygs/_math.scss

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

data/stylesheets/singularitygs/api/_float.scss

@@ -113,8 +113,8 @@
 //
 // 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);
+@mixin float-span($span, $location: false, $grid: false, $gutter: false) {
+  $grid: find-grid($grid);
   $gutter: find-gutter($gutter);
   $row: false;
 

data/stylesheets/singularitygs/api/_isolation.scss

@@ -97,6 +97,6 @@
 //
 // 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) {
-  @include grid-span($span, $location, $columns, $gutter, 'isolation', $clear);
+@mixin isolation-span($span, $location, $clear: false, $grid: false, $gutter: false) {
+  @include grid-span($span, $location, $grid, $gutter, 'isolation', $clear);
 }

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

@@ -48,11 +48,13 @@ $overlay-position: relative !default;
 // Set the position of the switch.
 $overlay-switch-position: left bottom !default;
 
+$background-grid-color: Chocolate !default;
+
 @mixin grid-overlay (
   $selector: 'body',
   $columns: false,
   $gutter: false,
-  $color: rgba(Chocolate, .5)
+  $color: $background-grid-color
 ) {
 
   $vert: nth($overlay-switch-position, 1);
@@ -106,11 +108,11 @@ $overlay-switch-position: left bottom !default;
 @mixin grid-toggle(
   $columns: false,
   $gutter: false,
-  $color: rgba(Chocolate, .5)
+  $color: $background-grid-color
   ) {
 
   [data-development-grid="show"] {
-    @include background-grid;
+    @include background-grid($columns, $gutter, $color);
   }
 }
 
@@ -120,7 +122,7 @@ $overlay-switch-position: left bottom !default;
 @mixin background-grid(
   $columns: false,
   $gutter: false,
-  $color: Chocolate
+  $color: $background-grid-color
 ) {
 
   $background-length: length($grids);

data/stylesheets/singularitygs/helpers/_box-sizing.scss

@@ -8,7 +8,7 @@
 
   @if $bs == 'border-box' {
     @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
-      *behavior: url("../behaviors/box-sizing/boxsizing.php");
+      *behavior: stylesheet-url("../behaviors/box-sizing/boxsizing.php");
     }
   }
   @else {

data/stylesheets/singularitygs/math/_columns.scss

@@ -1,80 +1,80 @@
 //////////////////////////////
 // Find width, in percentages, of the column span
 //////////////////////////////
-@function column-span($span, $location, $columns: false, $gutter: false) {
+@function column-span($span, $location, $grid: false, $gutter: false) {
 
-  // Find the columns and gutters
-  $columns: find-grid($columns);
+  // Find the grid and gutters
+  $grid: find-grid($grid);
   $gutter: find-gutter($gutter);
 
-  // @debug $columns;
+  // @debug $grid;
   // @debug $gutter;
 
-  // Combine the columns and gutters
-  $columns-and-gutters: column-sum($columns, $gutter);
+  // Combine the grid and gutters
+  $grid-and-gutters: column-sum($grid, $gutter);
 
-  // @debug $columns-and-gutters;
+  // @debug $grid-and-gutters;
 
-  // Equal width columns are easy! Deal with them!
-  @if type-of($columns) == 'number' or length($columns) == 1 {
+  // Equal width grid are easy! Deal with them!
+  @if type-of($grid) == 'number' or length($grid) == 1 {
     $span-and-gutters: $span + $gutter * ($span - 1);
-    @return $span-and-gutters / $columns-and-gutters * 100%;
+    @return $span-and-gutters / $grid-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 {
+  // Asymmetric lists are harder, so we're going to treat them as their own grid
+  @else if type-of($grid) == 'list' or length($grid) > 1 {
     $span-and-gutters: 0;
 
     @if $location == 1 and $span >= 1 {
       @for $i from 1 through $span {
-        $span-and-gutters: $span-and-gutters + nth($columns, $i) + $gutter;
+        $span-and-gutters: $span-and-gutters + nth($grid, $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 + nth($grid, $i) + $gutter;
       }
     }
     $span-and-gutters: $span-and-gutters - $gutter;
 
-    @return $span-and-gutters / $columns-and-gutters * 100%;
+    @return $span-and-gutters / $grid-and-gutters * 100%;
   }
   @else {
-    @warn "Can't find a working set of columns! That's terrible!";
+    @warn "Can't find a working set of grid! That's terrible!";
     @return false;
   }
 }
 
 //////////////////////////////
-// Find the total sum of the columns
+// Find the total sum of the grid
 //////////////////////////////
-@function column-sum($columns, $gutter) {
-  @if type-of($columns) == 'number' or length($columns) == 1 {
-    @return nth($columns, 1) + ((column-count(nth($columns, 1)) - 1) * nth($gutter, 1));
+@function column-sum($grid, $gutter) {
+  @if type-of($grid) == 'number' or length($grid) == 1 {
+    @return nth($grid, 1) + ((column-count(nth($grid, 1)) - 1) * nth($gutter, 1));
   }
-  @else if type-of($columns) == 'list' {
+  @else if type-of($grid) == 'list' {
     $sum: 0;
-    @each $column in $columns {
+    @each $column in $grid {
       $sum: $sum + nth($column, 1);
     }
-    $sum: $sum + (column-count($columns) - 1) * nth($gutter, 1);
+    $sum: $sum + (column-count($grid) - 1) * nth($gutter, 1);
     @return $sum;
   }
 }
 
 //////////////////////////////
-// Find the number of columns
+// Find the number of grid
 //////////////////////////////
-@function column-count($columns) {
-  @if type-of($columns) == 'number' {
-    @return $columns;
+@function column-count($grid) {
+  @if type-of($grid) == 'number' {
+    @return $grid;
   }
-  @if type-of($columns) == 'list' {
-    @if length($columns) == 1 {
-      @return nth($columns, 1);
+  @if type-of($grid) == 'list' {
+    @if length($grid) == 1 {
+      @return nth($grid, 1);
     }
     @else {
-      @return length($columns);
+      @return length($grid);
     }
   }
 }

data/stylesheets/singularitygs/math/_gutters.scss

@@ -1,11 +1,11 @@
-@function gutter-span($gutter: false, $columns: false) {
+@function gutter-span($gutter: false, $grid: false) {
 
   // Find the columns and gutters
-  $columns: find-grid($columns);
+  $grid: find-grid($grid);
   $gutter: find-gutter($gutter);
 
   // Combine the columns and gutters
-  $columns-and-gutters: column-sum($columns, $gutter);
+  $grid-and-gutters: column-sum($grid, $gutter);
 
-  @return (nth($gutter, 1) / $columns-and-gutters) * 100%
+  @return (nth($gutter, 1) / $grid-and-gutters) * 100%
 }

data/templates/demos/demo-float.scss

@@ -0,0 +1,159 @@
+@import "singularitygs";
+
+$break: 700px;
+$break2: 900px;
+$break3: 1200px;
+
+$grids: add-grid(2);
+$grids: add-grid(2 8 2 1 at $break);
+$grids: add-grid(12 at $break2);
+$grids: add-grid(1 3 5 7 9 at $break3);
+$gutters: add-gutter(1/3);
+// $gutters: add-gutter(.25 at $break);
+$output: 'float';
+
+body {
+  margin: 0;
+  padding: 0;
+  @include background-grid;
+}
+
+div {
+  height: 50px;
+}
+
+#foo {
+  background: red;
+  height: 30px;
+  @include grid-span(1, 2);
+
+  @include breakpoint($break) {
+    @include grid-span(1, 4);
+    clear: none;
+  }
+
+  @include breakpoint($break2) {
+    @include grid-span(2, 11);
+  }
+
+  @include breakpoint($break3) {
+    @include grid-span(1, 3);
+    @include push(2, 1);
+  }
+}
+
+#bar {
+  background: green;
+  height: 20px;
+  @include grid-span(1, 1);
+  clear: left;
+
+  @include breakpoint($break) {
+    @include grid-span(2, 2);
+    @include push(1, 1);
+    clear: none;
+  }
+
+  @include breakpoint($break2) {
+    @include grid-span(8, 3);
+    clear: none;
+  }
+
+  @include breakpoint($break3) {
+    @include grid-span(1, 1);
+    @include pull(3, 1);
+  }
+
+}
+
+#baz {
+  background: purple;
+  @include grid-span(1, 1);
+
+  @include breakpoint($break) {
+    // This piece's position is very wonky in Float, and as such we need to do some custom silliness to place it. It winds up looking similar to Isolation positioning, but in revers. Fortunately, because we have functions like column-span, gutter-span, and grid-span, we're able to build this fairly easily and have the heavy lifting of the math done for us.
+    width: column-span(1, 1);
+    float: right;
+    margin-left: -100%;
+    margin-right: grid-span(2, 2) + gutter-span();
+    clear: none;
+  }
+
+  @include breakpoint($break2) {
+    margin-right: 0;
+    @include grid-span(2, 1);
+    @include pull(10, 1);
+    clear: none;
+  }
+
+  @include breakpoint($break3) {
+    @include grid-span(1, 5);
+  }
+}
+
+#qux {
+  background: yellow;
+  @include grid-span(1, 1);
+  clear: both;
+
+  @include breakpoint($break) {
+    @include grid-span(3, 2);
+    // clear: left;
+  }
+
+  @include breakpoint($break2) {
+    @include grid-span(3, 4);
+    clear: both;
+    @include push(3, 1);
+  }
+
+  @include breakpoint($break3) {
+    @include grid-span(1, 2);
+    clear: none;
+    @include pull(2, 2);
+  }
+}
+
+#waldo {
+  background: blue;
+  height: 70px;
+
+  @include grid-span(1, 2);
+
+  @include breakpoint($break) {
+    @include grid-span(1, 1);
+    clear: left;
+  }
+
+  @include breakpoint($break2) {
+    @include grid-span(3, 1);
+    @include pull(6, 1);
+  }
+
+  @include breakpoint($break3) {
+    @include grid-span(1, 4);
+    clear: none;
+    margin-right: -100%;
+    margin-left: 0;
+  }
+}
+
+#garfield {
+  background: orange;
+
+  @include grid-span(2, 1);
+
+  @include breakpoint($break) {
+    @include float-span(4, 1);
+  }
+
+  @include breakpoint($break2) {
+    @include grid-span(5, 8);
+  }
+
+  @include breakpoint($break3) {
+    @include grid-span(2, 3);
+    clear: both;
+    @include push(2, 1);
+  }
+}

data/templates/demos/demo-isolation.scss

@@ -0,0 +1,132 @@
+@import "singularitygs";
+
+$break: 700px;
+$break2: 900px;
+$break3: 1200px;
+
+$grids: add-grid(2);
+$grids: add-grid(2 8 2 1 at $break);
+$grids: add-grid(12 at $break2);
+$grids: add-grid(1 3 5 7 9 at $break3);
+$gutters: add-gutter(1/3);
+// $gutters: add-gutter(.25 at $break);
+// $output: 'float';
+
+body {
+  margin: 0;
+  padding: 0;
+  @include background-grid;
+}
+
+div {
+  height: 50px;
+}
+
+#foo {
+  background: red;
+  height: 30px;
+  @include grid-span(1, 2);
+
+  @include breakpoint($break) {
+    @include grid-span(1, 4);
+  }
+
+  @include breakpoint($break2) {
+    @include grid-span(2, 11);
+  }
+
+  @include breakpoint($break3) {
+    @include grid-span(1, 3);
+  }
+}
+
+#bar {
+  background: green;
+  height: 20px;
+  @include grid-span(1, 1);
+
+  @include breakpoint($break) {
+    @include grid-span(2, 2);
+  }
+
+  @include breakpoint($break2) {
+    @include grid-span(8, 3)
+  }
+
+  @include breakpoint($break3) {
+    @include grid-span(1, 1);
+  }
+
+}
+
+#baz {
+  background: purple;
+  @include grid-span(1, 1, $options: 'both');
+
+  @include breakpoint($break) {
+    @include grid-span(1, 1);
+  }
+
+  @include breakpoint($break2) {
+    @include grid-span(2, 1);
+  }
+
+  @include breakpoint($break3) {
+    @include grid-span(1, 5);
+  }
+}
+
+#qux {
+  background: yellow;
+
+  @include grid-span(1, 1, $options: 'left');
+
+  @include breakpoint($break) {
+    @include grid-span(3, 2, $options: 'left');
+  }
+
+  @include breakpoint($break2) {
+    @include grid-span(3, 4, $options: 'both');
+  }
+
+  @include breakpoint($break3) {
+    @include grid-span(1, 2);
+  }
+}
+
+#waldo {
+  background: blue;
+  height: 70px;
+
+  @include grid-span(1, 2, $options: 'right');
+
+  @include breakpoint($break) {
+    @include grid-span(1, 1, $options: 'left');
+  }
+
+  @include breakpoint($break2) {
+    @include grid-span(3, 1, $options: 'right');
+  }
+
+  @include breakpoint($break3) {
+    @include grid-span(1, 4);
+  }
+}
+
+#garfield {
+  background: orange;
+
+  @include grid-span(2, 1, $options: 'left');
+
+  @include breakpoint($break) {
+    @include isolation-span(4, 1, 'both');
+  }
+
+  @include breakpoint($break2) {
+    @include grid-span(5, 8);
+  }
+
+  @include breakpoint($break3) {
+    @include grid-span(2, 3, $options: 'both');
+  }
+}

data/templates/demos/float.html

@@ -0,0 +1,17 @@
+<html>
+  <head>
+    <title>Singularity HTML Demo</title>
+    <link rel="stylesheet" href="stylesheets/demo-float.css">
+  </head>
+  <body>
+    <div id="page">
+      <div id="foo"></div>
+      <div id="bar"></div>
+      <div id="baz"></div>
+      <div id="qux"></div>
+      <div id="waldo"></div>
+      <div id="garfield"></div>
+    </div>
+
+  </body>
+</html>

data/templates/demos/isolation.html

@@ -0,0 +1,17 @@
+<html>
+  <head>
+    <title>Singularity HTML Demo</title>
+    <link rel="stylesheet" href="stylesheets/demo-isolation.css">
+  </head>
+  <body>
+    <div id="page">
+      <div id="foo"></div>
+      <div id="bar"></div>
+      <div id="baz"></div>
+      <div id="qux"></div>
+      <div id="waldo"></div>
+      <div id="garfield"></div>
+    </div>
+
+  </body>
+</html>

data/templates/demos/manifest.rb

@@ -0,0 +1,17 @@
+description "Singularity Demos"
+
+discover :stylesheets
+file 'isolation.html', :to => 'isolation.html'
+file 'float.html', :to => 'float.html'
+
+help %Q{
+  For help with Singularity, please ask a question on Stack Overflow (http://stackoverflow.com/questions/ask) tagged with "singularitygs".
+
+  To file an issue with Singularity, please use our GitHub Issue Queue (https://github.com/Team-Sass/Singularity/issues).
+}
+
+welcome_message %Q{
+  Welcome to the Singularity Demo!
+
+  These two sites, with their accompanying Sass, should give you a working example as to how Singularity works with its two out-of-the-box output styles.
+}

metadata

@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
   segments: 
   - 1
   - 0
-  - 3
-  version: 1.0.3
+  - 4
+  version: 1.0.4
 platform: ruby
 authors: 
 - Scott Kellum
@@ -98,11 +98,16 @@ files:
 - stylesheets/singularitygs/language/_span.scss
 - stylesheets/singularitygs/math/_columns.scss
 - stylesheets/singularitygs/math/_context.scss
+- stylesheets/singularitygs/math/_grid.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
+- templates/demos/demo-float.scss
+- templates/demos/demo-isolation.scss
+- templates/demos/float.html
+- templates/demos/isolation.html
+- templates/demos/manifest.rb
 - templates/project/grid.js
 - templates/project/grid.min.js
 - templates/project/manifest.rb