stratum 0.2.2 → 0.2.3

data/.gitignore

@@ -1,6 +1,7 @@
 *gem
 *swp
 .sass-cache
-demo/_site/
 vendor/
+css/
+_site/
 stratum/

data/.gitmodules

@@ -1,7 +1,3 @@
-[submodule "demo/vendor/livereload-js"]
-	path = demo/vendor/livereload-js
+[submodule "tests/vendor/livereload-js"]
+	path = tests/vendor/livereload-js
 	url = git@github.com:tyom/livereload-js.git
-    dirty = ignore
-[submodule "tests"]
-	path = tests
-	url = https://github.com/tyom/stratum

data/assets/stylesheets/layout/_grid-functions.scss

@@ -32,38 +32,28 @@
 @function grid-column-width($grid-size: $grid-size, $total-columns: $grid-total-columns, $gutter: auto) {
   @if $gutter == auto {
     $gutter: grid-column-gutter($grid-size, $grid-desired-gutter);
+  } @else {
+    $gutter: $gutter;
   }
   @return ($grid-size - (($total-columns - 1) * $gutter)) / $total-columns;
 }
 
 // # Calculate the total width of number of columns including gutters
 // `$column-width` & `$gutter` are optional (use grid defaults)
-@function grid-columns-width($column-span, $column-width: auto, $gutter: auto, $type: $grid-type, $has-row: true) {
-  @if $column-width == auto {
-    $column-width: grid-column-width();
-  }
-  @if $gutter == auto {
-    $gutter: grid-column-gutter($grid-size, $grid-desired-gutter);
-  } @else if $gutter == 0 {
-    // Adjust gutter width to exclude two half gutters on each side of grid container
-    // TODO simplify this bit and make it more obvious what's going on here (why pixel and fluid affect gutterless column behaviour)
-    // 1 is required to remove 1 gutter width from total width due to "rowed" columns adding extra gutter width
-    // FIXME This modifiers logic should be reviewed soon. Need to extract the ratios somewhere globally and apply them
-    // where they are needed (e.g. grid guides)
-    // It only affects m-pixel/m-fluid container modifiers of "rowless" grids
-    // e.g. .m-gutterless.m-pixel (on global fluid grid)
-    $v-mod: if($grid-type == pixel, 0, 1);
-    @if $has-row {
-      $v-mod: if($grid-type == pixel, 1, 0);
-    }
-    $v-gutter-width-adjusted: ($grid-gutter * ($grid-total-columns - $v-mod)) / $grid-total-columns;
-    $column-width: $column-width + $v-gutter-width-adjusted;
+@function grid-columns-width($column-span, $column-width: auto, $gutter: auto, $type: $grid-type, $total-columns: $grid-total-columns) {
+  $v-gutter: grid-column-gutter($grid-size, $grid-desired-gutter);
+
+  @if $gutter == 0 {
+    $v-gutter: 0;
+    $column-width: grid-column-width($total-columns: $total-columns, $gutter: 0) * $column-span;
+  } @else {
+    $column-width: ceil($column-span * grid-column-width($total-columns: $total-columns) + (($column-span - 1) * $v-gutter));
   }
 
-  $column-width: ceil($column-span * $column-width + ($column-span - 1) * $gutter);
+  $v-grid-size: $grid-size + $v-gutter;
 
   @if $type == fluid {
-    $column-width: grid-percentage($column-width);
+    $column-width: grid-percentage($column-width, $v-grid-size);
   }
 
   @return $column-width;

data/assets/stylesheets/layout/_grid-mixins.scss

@@ -12,7 +12,8 @@ $grid-column:         grid-column-width();
 
 // Grid container to set grid bounds
 @mixin grid-container($width: $grid-size) {
-  min-width: $width;
+  @include box-sizing(content-box);
+  @include group;
   max-width: 100%;
   width: $width;
   margin: {
@@ -24,7 +25,9 @@ $grid-column:         grid-column-width();
 // Grid row
 // $type: <pixel|fluid>
 @mixin grid-row($type: $grid-type) {
+  @include group;
   @include grid-column-margins($type, -1);
+  clear: both;
 }
 
 // Converts into grid column
@@ -54,11 +57,10 @@ $grid-column:         grid-column-width();
 }
 
 // Calculate single column width (in pixels) multipled by number of columns it spans (indluding gutters)
-@mixin grid-column-width($span: 1, $type: $grid-type, $gutter: $grid-gutter, $has-row: true) {
-  width: grid-columns-width($span, $grid-column, $gutter, $type, $has-row);
+@mixin grid-column-width($span: 1, $type: $grid-type, $gutter: $grid-gutter, $total-columns: $grid-total-columns) {
+  width: grid-columns-width($span, $grid-column, $gutter, $type, $total-columns);
 }
 
-
 // Calculate offset width based on number of columns it spans (including gutters)
 @mixin grid-offset-by-column($span: 1, $direction: left, $flow: positive, $grid-type: $grid-type) {
   $v-offset: grid-columns-width($span, $type: $grid-type);
@@ -71,7 +73,6 @@ $grid-column:         grid-column-width();
 
   // Negative offset
   @if $flow == negative {
-    // @debug $v-offset, $v-gutter, $v-gutter / 2;
     margin-#{$direction}: -$v-offset - ($v-gutter / 2);
   } @else {
     margin-#{$direction}: $v-offset + ($v-gutter * 1.5);

data/assets/stylesheets/layout/_grid-semantics.scss

@@ -1,11 +1,15 @@
 // Semantic grid components
 // ========================
 
-// These class placeholders can be used to convert any element into
+// These placeholder selectors can be used to convert any element into
 // grid component. To use extend element with appropriate placeholder.
 // It will automatically take care of the parent and descending components
 // as long as the correct grid components are used.
 
+// You should think about this file as mapping between your styles and
+// grid mixins and functions that calculate your individual grid elements
+// from parameters you provide. It doesn't contain any values.
+
 // The structure of the grid is as follows:
 
 // %l-container           –  A grid is always contained in one of these
@@ -20,11 +24,7 @@
 //
 // %l-col                 –  Column, the unit of the grid
 //    %l-col-<$i>         –  Column size (e.g. `%l-col-4` spans four single columns, including three gutters)
-//    %l-col-full         –  100% width
-//    %l-col-half         –  50% width
-//    %l-col-quarter      –  25% width
-//    %l-col-eighth       –  12.5% width
-//    %l-col-sixteenth    –  6.25% width
+//    %l-col-<n>-of-<n>   -  Fractional column size of parent total (e.g. 2-of-8 is 2/8 and equals 25%)
 //    %l-col-center       -  Center column
 //
 // l-col-from-left-<$i>   –  Offset column by <column size> from left
@@ -45,19 +45,15 @@
 // Grid container
 %l-container {
   @include grid-container;
-  @include box-sizing(content-box);
-  @include group;
 
   // Defines inner grid container (nested grid)
   %l-container {
-    min-width: 0;
-    width: 100%;
+    width: auto;
   }
 
   // Defines grid row
   %l-row {
     @include grid-row;
-    @include group;
   }
 
   // Defines grid row of forced fluid grid
@@ -96,6 +92,7 @@
   }
 }
 
+
 // Float last column to right if `%l-last-col-right` extended
 // Applied to `%l-container`
 %l-col + %l-col:last-child {
@@ -122,53 +119,34 @@
       @include grid-column-margins(fluid);
     }
 
-    // Forced grid type and gutterless
-    %l-grid-pixel %l-gutterless & {
-      @include grid-column-width($i, pixel, 0);
-    }
-    %l-grid-fluid %l-gutterless & {
-      @include grid-column-width($i, fluid, 0, false);
-    }
-
     // Force gutterless grid
     %l-gutterless &,
     // Apply gutterless grid on columns without rows
     %l-container > & {
-      @include grid-column-width($i, $grid-type, 0);
+      @include grid-column-width($i, $grid-type, $gutter: 0);
       @include grid-column-margins(0);
     }
 
-    // Force gutterless when row is absent
-    %l-grid-pixel > & {
-      @include grid-column-width($i, pixel, 0, false);
+    %l-grid-pixel > &,
+    %l-grid-pixel %l-gutterless & {
+      @include grid-column-width($i, pixel, $gutter: 0);
       @include grid-column-margins(0);
     }
-    %l-grid-fluid > & {
-      @include grid-column-width($i, fluid, 0, false);
+    %l-grid-fluid > &,
+    %l-grid-fluid %l-gutterless & {
+      @include grid-column-width($i, fluid, $gutter: 0);
       @include grid-column-margins(0);
     }
   }
 }
 
-
-// Fluid grid subdivisions
-%l-col-full {
-  width: 100%;
-}
-%l-col-half {
-  width: 50%;
-}
-%l-col-third {
-  width: 33.33333%;
-}
-%l-col-quarter {
-  width: 25%;
-}
-%l-col-eighth {
-  width: 12.5%;
-}
-%l-col-sixteenth {
-  width: 6.25%;
+// Column spans for custom grids
+@for $i from 1 through $grid-total-columns {
+  @for $n from 1 through $grid-total-columns {
+    %l-col-#{$i}-of-#{$n} {
+      @include grid-column-width($i, fluid, $gutter: 0, $total-columns: $n);
+    }
+  }
 }
 
 
@@ -196,7 +174,6 @@
 // Column offsets
 %l-container {
   @for $i from 1 through $grid-total-columns {
-
     // ## Grid with margins
     // Default grid offsets
     & > %l-row %l-col {

data/assets/stylesheets/layout/scaffolding.scss

@@ -61,16 +61,23 @@
   }
 }
 
-// Generic column modifiers
-.l-col {
-  // Centre column
-  &.m-centered {
-    @extend %l-col-center;
-  }
-  // Grid column subdivisions
-  @each $word in full, half, quarter, eighth, sixteenth {
-    &.m-#{$word} {
-      @extend %l-col-#{$word};
+// fractional column modifiers
+@for $total from 1 through $grid-total-columns {
+  .l-col {
+    &.m-1-of-#{$total} {
+      @extend %l-col-1-of-#{$total};
+    }
+    @for $col from 1 through $total {
+      &.m-#{$col}-of-#{$total} {
+        @if $total > $col {
+          @extend %l-col-#{$col}-of-#{$total};
+        }
+      }
     }
   }
 }
+
+// Centre column
+.l-col.m-centered {
+  @extend %l-col-center;
+}

data/lib/version.rb

@@ -1,3 +1,3 @@
 module Stratum
-	VERSION = "0.2.2"
+	VERSION = "0.2.3"
 end

data/tests/Gemfile

@@ -0,0 +1,6 @@
+source 'https://rubygems.org'
+
+gem 'rb-fsevent', '~> 0.9.1'
+gem 'guard-sass', :require => false
+gem 'guard-livereload'
+gem 'jekyll'

data/tests/Gemfile.lock

@@ -0,0 +1,63 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.3.2)
+    classifier (1.3.3)
+      fast-stemmer (>= 1.0.0)
+    coderay (1.0.8)
+    directory_watcher (1.4.1)
+    em-websocket (0.3.8)
+      addressable (>= 2.1.1)
+      eventmachine (>= 0.12.9)
+    eventmachine (1.0.0)
+    fast-stemmer (1.0.1)
+    guard (1.6.1)
+      listen (>= 0.6.0)
+      lumberjack (>= 1.0.2)
+      pry (>= 0.9.10)
+      thor (>= 0.14.6)
+    guard-livereload (1.1.3)
+      em-websocket (>= 0.2.0)
+      guard (>= 1.5.0)
+      multi_json (~> 1.0)
+    guard-sass (1.0.1)
+      guard (>= 1.1.0)
+      sass (>= 3.1)
+    jekyll (0.12.0)
+      classifier (~> 1.3)
+      directory_watcher (~> 1.1)
+      kramdown (~> 0.13.4)
+      liquid (~> 2.3)
+      maruku (~> 0.5)
+      pygments.rb (~> 0.3.2)
+    kramdown (0.13.8)
+    liquid (2.4.1)
+    listen (0.7.2)
+    lumberjack (1.0.2)
+    maruku (0.6.1)
+      syntax (>= 1.0.0)
+    method_source (0.8.1)
+    multi_json (1.5.0)
+    posix-spawn (0.3.6)
+    pry (0.9.11.4)
+      coderay (~> 1.0.5)
+      method_source (~> 0.8)
+      slop (~> 3.4)
+    pygments.rb (0.3.7)
+      posix-spawn (~> 0.3.6)
+      yajl-ruby (~> 1.1.0)
+    rb-fsevent (0.9.3)
+    sass (3.2.5)
+    slop (3.4.3)
+    syntax (1.0.0)
+    thor (0.16.0)
+    yajl-ruby (1.1.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  guard-livereload
+  guard-sass
+  jekyll
+  rb-fsevent (~> 0.9.1)

data/tests/Guardfile

@@ -0,0 +1,11 @@
+guard 'sass',
+	:load_paths => ['../assets/stylesheets'],
+  # :debug_info => true,
+  :input => 'scss',
+  :output => 'css'
+
+guard 'livereload' do
+  # watch(%r{../assets/stylesheets/.+\.(scss)})
+  watch(%r{grid/.+\.(html)})
+  watch(%r{scss/.+\.(scss)})
+end

data/tests/_config.yml

@@ -0,0 +1,5 @@
+server:     true
+auto:       true
+baseurl:    /stratum
+exclude:    Gemfile, Gemfile.lock, Guardfile, node_modules, test, scss
+include:    css

data/tests/_includes/menu-grids.html

@@ -0,0 +1,8 @@
+<header id="masthead">
+    <ul class="nav">
+        <li {% if page.id == "pixel" %} class="active"{% endif %}><a href="{{site.baseurl}}/grid/pixel.html">Pixel Grid</a></li>
+        <li {% if page.id == "fluid" %} class="active"{% endif %}><a href="{{site.baseurl}}/grid/fluid.html">Fluid Grid</a></li>
+        <li {% if page.id == "bbc" %} class="active"{% endif %}><a href="{{site.baseurl}}/grid/bbc.html">BBC Homepage Example</a></li>
+        <li {% if page.id == "arstechnica" %} class="active"{% endif %}><a href="{{site.baseurl}}/grid/arstechnica.html">Arstechnica Layout Example</a></li>
+    </ul>
+</header>

data/tests/_includes/shared-grid-samples.html

@@ -0,0 +1,58 @@
+<h2>Normal</h2>
+<div class="l-row">
+    <div class="l-col m-3">
+        <span>.l-col.m-3</span>
+    </div>
+    <div class="l-col m-3">
+        <span>.l-col.m-3</span>
+    </div>
+    <div class="l-col m-3">
+        <span>.l-col.m-3</span>
+    </div>
+    <div class="l-col m-3">
+        <span>.l-col.m-3</span>
+    </div>
+</div>
+
+<h2>Offsets</h2>
+<div class="l-row">
+    <div class="l-col m-4 m-to-left-1 m-from-right-1">
+        <span>.l-col.m-to-left-1.m-from-right-1</span>
+    </div>
+    <div class="l-col m-4">
+        <span>.l-col.m-4</span>
+    </div>
+    <div class="l-col m-4 m-to-right-1 m-from-left-1">
+        <span>.l-col.m-to-right-1.m-from-left-1</span>
+    </div>
+</div>
+
+<header>
+    <h2>No column gutters</h2>
+    <code>.l-row.m-gutterless</code>
+</header>
+<div class="l-row m-gutterless">
+    <div class="l-col m-6">
+        <span>.l-col.m-6</span>
+    </div>
+    <div class="l-col m-3">
+        <span>.l-col.m-3</span>
+    </div>
+    <div class="l-col m-3">
+        <span>.l-col.m-3</span>
+    </div>
+</div>
+
+<header>
+    <h2>No row</h2>
+    identical to <code>.l-row.m-gutterless</code>
+</header>
+<div class="l-col m-6">
+    <span>.l-col.m-6</span>
+</div>
+<div class="l-col m-3">
+    <span>.l-col.m-3</span>
+</div>
+<div class="l-col m-3">
+    <span>.l-col.m-3</span>
+</div>

data/tests/_layouts/default.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <title>{{ page.title }}</title>
+        <meta name="viewport" content="width=device-width">
+        <link rel="stylesheet" href="{{site.baseurl}}/css/main.css">
+        {% for stylesheet in page.css %}
+            <link rel="stylesheet" href="{{site.baseurl}}/css/{{ stylesheet }}.css">
+        {% endfor %}
+        <script src="{{site.baseurl}}/vendor/livereload-js/dist/livereload.js?host=localhost"></script>
+    </head>
+    <body>
+        {% if page.menu == 'grids' %}
+            {% include menu-grids.html %}
+        {% endif %}
+
+        {{ content }}
+    </body>
+</html>

data/tests/grid/arstechnica.html

@@ -0,0 +1,56 @@
+---
+layout: default
+title:  Arstechnica Layout Demo
+id:     arstechnica
+css:    arstechnica
+menu:   grids
+---
+
+<div class="reference">
+    <img src="{{site.baseurl}}/images/arstechnica.png" alt="">
+</div>
+
+<div id="page" class="l-container">
+    <div class="masthead"></div>
+    <nav></nav>
+    <div class="content l-container m-fluid">
+        <div class="head"></div>
+        <div class="l-row">
+            <div class="content l-col">
+                <div class="l-container">
+                    <div class="p-title"></div>
+                    <div class="p-meta"></div>
+                    <div class="p-image"></div>
+                    <div class="p-text"></div>
+
+                    <div class="related l-row">
+                        <div class="p-title l-col m-1-of-1"></div>
+                        <div class="l-col m-1-of-4"></div>
+                        <div class="l-col m-1-of-4"></div>
+                        <div class="l-col m-1-of-4"></div>
+                        <div class="l-col m-1-of-4"></div>
+                        <div class="l-col m-1-of-4"></div>
+                        <div class="l-col m-1-of-4"></div>
+                        <div class="l-col m-1-of-4"></div>
+                        <div class="l-col m-1-of-4"></div>
+                    </div>
+                </div>
+            </div>
+            <aside class="sidebar l-col"></aside>
+        </div>
+    </div>
+    <footer class="mastfoot l-row m-gutterless">
+        <div class="l-col m-2">
+            <span>2 columns</span>
+        </div>
+        <div class="l-col m-2">
+            <span>2 columns</span>
+        </div>
+        <div class="l-col m-2">
+            <span>2 columns</span>
+        </div>
+        <div class="l-col m-2">
+            <span>2 columns</span>
+        </div>
+    </footer>
+</div>

data/tests/grid/bbc.html

@@ -0,0 +1,74 @@
+---
+layout: default
+title:  BBC Layout Demo
+id:     bbc
+css:    bbc
+menu:   grids
+---
+
+<div class="reference">
+    <img src="{{site.baseurl}}/images/bbc.png" alt="">
+</div>
+
+<div id="page">
+    <div class="top-banner"></div>
+
+    <div class="nav">
+        <div class="l-container">
+            <div class="l-row">
+                <div class="l-col m-8">
+                    <span>8 columns</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="hero l-container">
+        <div class="head l-row">
+            <div class="p-title l-col m-4">
+                <span>4 columns</span>
+            </div>
+            <div class="p-weather l-col m-4">
+                <span>4 columns</span>
+            </div>
+        </div>
+        <div class="dashboard l-row m-gutterless">
+            <div class="l-col m-left m-4">
+                <div class="p-item l-col m-1-of-1">
+                    <span>4 columns</span>
+                </div>
+                <div class="p-item l-col m-1-of-2">
+                    <span>2 columns</span>
+                </div>
+                <div class="p-item l-col m-1-of-2">
+                    <span>2 columns</span>
+                </div>
+            </div>
+            <div class="l-col m-right m-4">
+                <div class="p-item l-col m-1-of-2">
+                    <span>2 columns</span>
+                </div>
+                <div class="p-item l-col m-1-of-2">
+                    <span>2 columns</span>
+                </div>
+            </div>
+        </div>
+        <nav class="l-col m-7 m-centered">
+            <span>7 columns</span>
+        </nav>
+    </div>
+
+    <div class="content l-container">
+        <div class="l-col m-3">
+            <span>3 columns</span>
+        </div>
+        <div class="l-col m-3">
+            <span>3 columns</span>
+        </div>
+        <div class="l-col m-2">
+            <span>2 columns</span>
+        </div>
+    </div>
+
+    <div class="footer l-container"></div>
+</div>

data/tests/grid/fluid.html

@@ -0,0 +1,56 @@
+---
+layout: default
+title:  Fluid Grid Examples
+id:     fluid
+css:    fluid-grid
+menu:   grids
+---
+
+<div id="page">
+    <div class="l-container">
+        {% include shared-grid-samples.html %}
+    </div>
+
+    <div class="l-container m-pixel">
+        <header>
+            <h2>Forced pixel grid</h2>
+            <code>.l-container.m-pixel</code> with no row
+        </header>
+
+        <div class="l-col m-6">
+            <span>.l-col-m-6</span>
+        </div>
+        <div class="l-col m-3">
+            <span>.l-col-m-6</span>
+        </div>
+        <div class="l-col m-3">
+            <span>.l-col-m-6</span>
+        </div>
+
+        <div class="l-row m-gutterless">
+            <div class="l-col m-9">
+                <div class="l-container">
+                    <span>.l-col-m-9</span>
+                    <h2>Nested grid 6 columns in a 9 column cell</h2>
+                    <div class="l-row">
+                        <div class="l-col m-2-of-8">
+                            <span>.l-col-m-2-of-6</span>
+                        </div>
+                        <div class="l-col m-2-of-8">
+                            <span>.l-col-m-2-of-6</span>
+                        </div>
+                        <div class="l-col m-2-of-8">
+                            <span>.l-col-m-2-of-6</span>
+                        </div>
+                        <div class="l-col m-2-of-8">
+                            <span>.l-col-m-2-of-6</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="l-col m-3">
+                <span>.l-col-m-3</span>
+            </div>
+        </div>
+    </div>
+</div>

data/tests/grid/index.html

@@ -0,0 +1,5 @@
+---
+layout: default
+title:  Grid and Layout Demos
+menu:   grids
+---

data/tests/grid/pixel.html

@@ -0,0 +1,29 @@
+---
+layout: default
+title:  Pixel Grid Examples
+id:     pixel
+css:    pixel-grid
+menu:   grids
+---
+
+<div id="page">
+    <div class="l-container">
+        {% include shared-grid-samples.html %}
+    </div>
+
+    <div class="l-container m-fluid">
+        <header>
+            <h2>No row (gutterless), forced-fluid</h2>
+            <code>.m-fluid</code>
+        </header>
+        <div class="l-col m-6">
+            <span>6 columns</span>
+        </div>
+        <div class="l-col m-3">
+            <span>3 columns</span>
+        </div>
+        <div class="l-col m-3">
+            <span>3 columns</span>
+        </div>
+    </div>
+</div>

data/tests/images/capture.js

@@ -0,0 +1,15 @@
+var page = require('webpage').create(),
+		system = require('system'),
+    address, output;
+
+if(system.args.lengt < 2) {
+    console.log('Usage: capture.js URL filename');
+} else {
+	address = system.args[1];
+	output = system.args[2];
+
+	page.open(address, function() {
+		page.render(output);
+		phantom.exit();
+	});
+}

data/tests/scss/_mock-block.scss

@@ -0,0 +1,71 @@
+// Mock block
+
+@mixin block($color: #333, $height: 100px, $padding: 0) {
+  $v-guides-color: desaturate(darken($color, 10), 40);
+
+  -webkit-transition: 400ms;
+  background-color: rgba($color, .4);
+  position: relative;
+  min-height: $height;
+  -webkit-transition: box-shadow 800ms ease, background 500ms ease;
+  -webkit-transition-delay: 600ms 0;
+
+  span {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    color: rgba(white, .8);
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+    margin: -15px auto 0;
+    max-width: 210px;
+    background: $v-guides-color;
+    z-index: 2;
+    opacity: 0;
+    cursor: default;
+    font-size: 10px;
+    -webkit-transition: 300ms;
+    -webkit-border-radius: 20px;
+    text-transform: uppercase;
+  }
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    content: "";
+    background: rgba(white, .25);
+    margin: $padding;
+  }
+
+  &.l-col::after {
+    opacity: 0;
+    -webkit-transition: 300ms ease;
+    -webkit-transition-delay: 300ms;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    right: 50%;
+    border-top: 1px solid $v-guides-color;
+    content: "";
+  }
+
+  &:hover {
+    background-color: rgba($color, .7);
+    box-shadow: inset 0 0 0px 1px $v-guides-color, 0 1px 5px rgba(black, .3);
+
+    span {
+      opacity: 1;
+    }
+
+    &::after {
+      opacity: 1;
+      left: 0;
+      right: 0;
+    }
+  }
+}

data/tests/scss/arstechnica.scss

@@ -0,0 +1,111 @@
+// Grid settings
+$grid-guides-color:         #8aa8c0;
+$grid-guides-opacity:       .2;
+
+$grid-type:                 pixel;
+$grid-size:                 1020px;
+$grid-total-columns:        8;
+$grid-desired-gutter:       40px;
+$grid-baseline:             19px;
+
+@import "stratum";
+@import "layout/scaffolding";
+
+@import "mock-block";
+
+// @include GRID-GUIDES;
+
+body {
+  font: 12px/1.36 Helvetica, Arial, sans-serif;
+  color: #444;
+  background: #eaeaea;
+  padding: 0;
+  margin: 0;
+}
+
+// Reference
+
+.reference {
+  position: absolute;
+  left: 0;
+  right: 0;
+  opacity: .35;
+  z-index: -1;
+
+  img {
+    margin: 0 auto;
+    display: block;
+  }
+}
+
+// Layout
+
+#page {
+  padding: 0;
+
+  .masthead {
+    @include block($height: 125px);
+  }
+
+  > nav {
+    @include block(blue, $height: 30px);
+  }
+
+  > .content {
+    padding: 0 19px;
+    min-width: 0;
+    width: auto;
+
+    > .head {
+      @include block($height: 58px);
+      margin: 15px 0;
+    }
+
+    .content,
+    .sidebar {
+      @include block(#baaf32, $height: 2438px);
+    }
+
+    .l-container {
+      @include grid-container(640px);
+    }
+
+    > .p-title {
+      @include block($height: 85px);
+      margin-bottom: 10px
+    }
+    .p-meta {
+      @include block($height: 35px);
+      margin-bottom: 15px
+    }
+    .p-image {
+      @include block($height: 415px);
+      margin-bottom: 15px
+    }
+    .p-text {
+      @include block($height: 1265px);
+    }
+
+    .sidebar {
+      width: 300px;
+    }
+
+    .related {
+      .l-col.p-title {
+        @include block(purple, $height: 33px);
+        margin: 95px 0 0;
+      }
+      .l-col {
+        @include block(green, $height: 255px);
+        margin: 0 0 10px;
+      }
+    }
+  }
+
+  .mastfoot {
+    background: rgba(#222, .2);
+    .l-col {
+      @include block(#444, $height: 337px);
+    }
+  }
+}

data/tests/scss/bbc.scss

@@ -0,0 +1,93 @@
+// Grid settings
+$grid-guides-color:         #8aa8c0;
+$grid-guides-opacity:       .2;
+
+$grid-type:                 pixel;
+$grid-size:                 976px;
+$grid-total-columns:        8;
+$grid-desired-gutter:       20px;
+$grid-baseline:             19px;
+
+@import "stratum";
+@import "layout/scaffolding";
+
+@import "mock-block";
+
+// @include GRID-GUIDES;
+
+body {
+  font: 12px/1.36 Helvetica, Arial, sans-serif;
+  color: #444;
+  background: #eaeaea;
+  padding: 0;
+  margin: 0;
+}
+
+// Reference
+
+.reference {
+  position: absolute;
+  left: 0;
+  right: 0;
+  opacity: .35;
+  z-index: -1;
+
+  img {
+    margin: 0 auto;
+    display: block;
+  }
+}
+
+// Layout
+
+#page {
+  padding: 0;
+
+  .top-banner {
+    @include block($height: 96px);
+  }
+
+  .nav {
+    @include block(blue, $height: 39px);
+
+    .l-container .l-col {
+      @include block(navy, $height: 39px);
+    }
+  }
+
+  .hero {
+    > .head,
+    > .dashboard,
+    > nav {
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+
+    > .head .l-col {
+      @include block(green, $height: 75px);
+    }
+
+    > .dashboard {
+      .p-item {
+        @include block(purple, $height: 217px, $padding: 7px);
+      }
+
+      .m-right .p-item {
+        height: 434px;
+      }
+    }
+
+    > nav {
+      @include block($height: 63px);
+    }
+  }
+
+  .content .l-col {
+    @include block(#baaf32, $height: 511px, $padding: $grid-gutter/2);
+  }
+
+  .footer {
+    @include block(#444, $height: 105px, $padding: $grid-gutter/2);
+    margin-top: 10px;
+  }
+}

data/tests/scss/fluid-grid.scss

@@ -0,0 +1,44 @@
+$grid-type: fluid;
+
+@import "stratum";
+@import "layout/scaffolding";
+
+@import "mock-block";
+
+@include GRID-GUIDES;
+
+
+.l-container {
+  width: 80%;
+  min-width: 0;
+
+  &.m-pixel {
+    width: $grid-size;
+    min-width: $grid-size;
+  }
+}
+.l-container .l-col {
+  @include block($height: 120px, $padding: $grid-gutter/2);
+
+  &.m-12 {
+    @include block(#777, $height: 150px);
+  }
+}
+
+
+.l-container .l-container {
+  position: relative;
+  @include group(true);
+
+  h2 {
+    margin: 20px $grid-gutter 10px;
+  }
+
+  .l-col {
+    @include block(#ba5232, $height: 150px, $padding: $grid-gutter/2);
+
+    &:hover {
+      z-index: 10;
+    }
+  }
+}

data/tests/scss/main.scss

@@ -0,0 +1,90 @@
+@import "stratum";
+
+body {
+  font: 12px/1.36 Helvetica, Arial, sans-serif;
+  color: #444;
+  background: #eee;
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2 {
+  margin: ($grid-baseline * 2) 0 $grid-baseline;
+}
+
+.l-container {
+  > h2,
+  > header {
+    border-top: 1px solid rgba(black, .2);
+    padding-top: $grid-baseline;
+    margin-top: $grid-baseline;
+
+    h2 {
+      margin-top: 0;
+    }
+
+    &:first-child,
+    .l-col & {
+      border: none;
+    }
+  }
+}
+
+#page {
+  padding: 20px 0;
+}
+
+#masthead {
+  background: #444;
+  font-size: 13px;
+  box-shadow: 0 1px 3px rgba(black, .6);
+
+  ul {
+    @extend %l-container;
+    @include group;
+    list-style: none;
+    margin: 0 auto;
+    padding: 0;
+  }
+
+  li {
+    float: left;
+  }
+
+  a {
+    color: #ddd;
+    float: left;
+    padding: 8px 10px;
+    text-decoration: none;
+  }
+
+  .active a,
+  a:hover {
+    background: #363636;
+    color: white;
+  }
+
+  .active a {
+    background: #222;
+  }
+}
+
+header {
+  font-size: 1.5em;
+  color: #777;
+
+  h2 {
+    display: inline-block;
+    font-size: 1em;
+    color: #333;
+  }
+
+  code {
+    border-radius: 4px;
+    margin: 0 5px;
+    padding: 3px;
+    background: rgba(#eee, .5);
+    color: #ba5232;
+    font-size: .9em;
+  }
+}

data/tests/scss/pixel-grid.scss

@@ -0,0 +1,14 @@
+$grid-type: pixel;
+
+
+@import "stratum";
+@import "layout/scaffolding";
+
+@import "mock-block";
+
+@include GRID-GUIDES;
+
+
+.l-container .l-col {
+  @include block($height: 120px, $padding: $grid-gutter/2);
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stratum
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.2.3
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-01-28 00:00:00.000000000 Z
+date: 2013-02-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: thor
-  requirement: &70285764166840 !ruby/object:Gem::Requirement
+  requirement: &70294002783300 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,7 +21,7 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70285764166840
+  version_requirements: *70294002783300
 description: Stratum is a collection of SASS mixins and utilities for your web development
   needs.
 email: tyom@semonov.com
@@ -50,6 +50,27 @@ files:
 - lib/stratum.rb
 - lib/version.rb
 - stratum.gemspec
+- tests/Gemfile
+- tests/Gemfile.lock
+- tests/Guardfile
+- tests/_config.yml
+- tests/_includes/menu-grids.html
+- tests/_includes/shared-grid-samples.html
+- tests/_layouts/default.html
+- tests/grid/arstechnica.html
+- tests/grid/bbc.html
+- tests/grid/fluid.html
+- tests/grid/index.html
+- tests/grid/pixel.html
+- tests/images/arstechnica.png
+- tests/images/bbc.png
+- tests/images/capture.js
+- tests/scss/_mock-block.scss
+- tests/scss/arstechnica.scss
+- tests/scss/bbc.scss
+- tests/scss/fluid-grid.scss
+- tests/scss/main.scss
+- tests/scss/pixel-grid.scss
 homepage: http://rubygems.org/gems/stratum
 licenses: []
 post_install_message: