stratum 0.2.3 → 0.2.4

data/assets/stylesheets/_stratum.scss

@@ -8,11 +8,17 @@ $grid-total-columns:        12        !default;
 $grid-desired-gutter:       20px      !default;
 $grid-baseline:             18px      !default;
 
-@import "utils/vendor-prefix";
-@import "utils/group";
+@import "addons/vendor-prefix";
+@import "addons/group";
+@import "addons/position";
+@import "addons/dimensions";
 
 // CSS3 mixins
+@import "css3/animation";
+@import "css3/border-radius";
 @import "css3/box-sizing";
+@import "css3/transform";
+@import "css3/transition";
 
 // Layout
 @import "layout/grid";

data/assets/stylesheets/addons/_dimensions.scss

@@ -0,0 +1,14 @@
+// Dimensions helpers
+// ------------------
+
+// Box element
+// <width>, <height>
+// If one parameter is specified, make square
+@mixin box($length...) {
+  @if length($length) < 3 {
+    width: nth($length, 1);
+    height: nth($length, length($length));
+  } @else {
+    @warn "box mixin only takes 1 or 2 arguments"
+  }
+}

data/assets/stylesheets/addons/_position.scss

@@ -0,0 +1,48 @@
+// Position shorthand
+// ------------------
+
+// Accepts values with units or auto
+// If `0` or `none` is specified, the value is omitted.
+
+// Standard CSS shorthand rules applied, e.g. `0px 20px` resolves to `top: 0px; left: 20px; right: 20px` etc.
+
+// `@include position(absolute, 0px 0 0 auto);`
+
+// Resolves to:
+
+// ```
+//   position: absolute;
+//   top: 0px;
+//   left: auto;
+// ```
+
+@mixin position($position, $values) {
+  // shortcut to fill viewport (0px 0px 0px 0px)
+  $values: if($values == fill, 0px 0px 0px 0px, $values);
+
+  // top/bottom left/right
+  @if length($values) == 2 {
+    $values: append($values, nth($values, 1));
+    $values: append($values, nth($values, 2));
+  }
+  // top left/right bottom
+  @if length($values) == 3 {
+    $values: append($values, nth($values, 2));
+  }
+
+  $v-pairs:
+    top    nth($values, 1),
+    right  nth($values, 2),
+    bottom nth($values, 3),
+    left   nth($values, 4);
+
+  position: $position;
+
+  @each $pair in $v-pairs {
+    $v-pos: nth($pair, 1);
+    $v-val: nth($pair, 2);
+    @if $v-val == auto or ($v-val != none and not unitless($v-val)) {
+      #{$v-pos}: $v-val;
+    }
+  }
+}

data/assets/stylesheets/css3/_animation.scss

@@ -0,0 +1,90 @@
+// animation
+// ---------
+
+// Vendor prefixes:
+// - Firefox: 5-15
+// - Chrome
+// - Safari 5+
+
+// No prefixes
+// - IE 10+
+// - Firefox 16+
+// - Opera 12+
+
+// Shorthand
+@mixin animation($value...) {
+  @include vendor-prefix(animation, $value, webkit moz spec);
+}
+
+// <IDENT> | `none` e.g. fade, -special, anim_02
+@mixin animation-name($ident...) {
+  @include vendor-prefix(animation-name, $ident, webkit moz spec);
+}
+
+// <time> e.g. 200ms, 4s
+@mixin animation-duration($time...) {
+  @include vendor-prefix(animation-duration, $time, webkit moz spec);
+}
+
+// <timing-function> e.g. ease, ease-in, ease-in-out, linear, cubic-bezier(0.1, 0.7, 1.0, 0.1), step-start, step-stop, steps(3, start), steps(3, end)
+@mixin animation-timing-function($timing-function...) {
+  @include vendor-prefix(animation-timing-function, $timing-function, webkit moz spec);
+}
+
+// <time> e.g. 100ms, 5s
+@mixin animation-delay($time...) {
+  @include vendor-prefix(animation-delay, $time, webkit moz spec);
+}
+
+// <number> | `infinite`
+@mixin animation-iteration-count($number...) {
+  @include vendor-prefix(animation-iteration-count, $number, webkit moz spec);
+}
+
+// `normal` | `reverse` | `alternate` | `alternate-reverse`
+@mixin animation-direction($direction...) {
+  @include vendor-prefix(animation-direction, $direction, webkit moz spec);
+}
+
+// `none` | `forwards` | `backwards` | `both`
+@mixin animation-fill-mode($mode...) {
+  @include vendor-prefix(animation-fill-mode, $mode, webkit moz spec);
+}
+
+// `running` | `paused`
+@mixin animation-play-state($state...) {
+  @include vendor-prefix(animation-play-state, $state, webkit moz spec);
+}
+
+// keyframes
+// ---------
+
+// Vendor prefixes:
+// - Firefox: 5-16
+// - Chrome
+// - Opera 12
+// - Safari 4+
+// - Android 2.1+
+// - Blackberry 7+
+// - iOS 3.2+
+
+// No prefixes
+// - IE 10+
+// - Firefox 16+
+// - Opera 12.1+
+
+// `from` (0%), `to` (100%), <percentage>
+@mixin keyframes($ident) {
+  @-webkit-keyframes #{$ident} {
+    @content;
+  }
+  @-moz-keyframes #{$ident} {
+    @content;
+  }
+  @-o-keyframes #{$ident} {
+    @content;
+  }
+  @keyframes #{$ident} {
+    @content;
+  }
+}

data/assets/stylesheets/css3/_border-radius.scss

@@ -0,0 +1,31 @@
+// border-radius
+// -------------
+
+// Vendor prefixes:
+// - Android < 1.6
+// - iOS 1-3.2
+// - Safari 3-4
+
+// No prefixes
+// - Chrome
+// - Firefox 4+
+// - Opera 10.50+
+// - IE 9+
+// - iOS 4+
+// - Safari 5+
+// - Android 2.1+
+
+// Optional second parameter `clip` can be passed to clip background to padding box
+// allowing transparency in borders overlayed over container background.
+
+// Due to Sass parsing values surrounded by parentheses 2 radii
+// values (such as 30px/60px) need to be quoted: "30px/30px"
+
+@mixin border-radius($value...) {
+  $v-value: nth($value, 1);
+  @include vendor-prefix(border-radius, unquote($v-value), webkit spec);
+
+  @if length($value) > 1 and nth($value, 2) == clip {
+    @include vendor-prefix(background-clip, padding-box, webkit spec);
+  }
+}

data/assets/stylesheets/css3/_box-sizing.scss

@@ -1,8 +1,17 @@
+// box-sizing
+// ----------
+
+// Vendor prefixes:
+// - Firefox: 1+
+// - Android < 3
+// - iOS < 4.3
+
+// No prefixes
+// - Chrome
+// - Opera
+// - IE 8+
+// - Safari 5.1+
+
 @mixin box-sizing($value) {
-  //  Use vendor prefixes for:
-  //  - Firefox: all versions
-  //  - iOS Safari: 3.2-4.3
-  //  - Android: 2.1-3.0
-  //  - Blackberry: 7.0
   @include vendor-prefix(box-sizing, $value, moz webkit spec);
 }

data/assets/stylesheets/css3/_transform.scss

@@ -0,0 +1,47 @@
+// transform
+// ---------
+
+// Vendor prefixes:
+// - Firefox: 3.5-15
+// - Chrome
+// - Safari 3.1+
+// - IE 9
+// - Opera 10.50-12.00
+
+// No prefixes
+// - IE 10+
+// - Firefox 16+
+// - Opera 12.50+
+
+@mixin transform($value...) {
+  @include vendor-prefix(transform, $value, webkit moz ms o spec);
+}
+
+@mixin transform-origin($value...) {
+  @include vendor-prefix(transform-origin, $value, webkit moz ms o spec);
+}
+
+// Not supported in Opera
+// Pass optional $origin parameter to set perspective origin
+@mixin perspective($length, $origin...) {
+  @include vendor-prefix(perspective, $length, webkit moz ms spec);
+
+  @if $origin {
+    @include perspective-origin($origin);
+  }
+}
+
+// Not supported in Opera
+@mixin perspective-origin($position...) {
+  @include vendor-prefix(perspective-origin, $position, webkit moz ms spec);
+}
+
+// Not supported in Opera
+@mixin backface-visibility($visibility) {
+  @include vendor-prefix(backface-visibility, $visibility, webkit moz ms spec);
+}
+
+// Not supported in Opera & IE
+@mixin transform-style($style) {
+  @include vendor-prefix(transform-style, $style, webkit moz spec);
+}

data/assets/stylesheets/css3/_transition.scss

@@ -0,0 +1,40 @@
+// transition
+// ----------
+
+// Vendor prefixes:
+// - Firefox: 4-15
+// - Chrome 1-25
+// - Safari 3.2+
+// - Opera 10.50-12.00
+
+// No prefixes
+// - Chrome 26+
+// - Opera 12.15+
+// - IE 10+
+// - Firefox 16+
+
+// Shorthand
+@mixin transition($value...) {
+  @include vendor-prefix(transition, $value, webkit moz o spec);
+}
+
+// <IDENT> | `none` | `all`  e.g. margin, background-color, opacity
+@mixin transition-property($value...) {
+  @include vendor-prefix(transition-property, $value, webkit moz o spec);
+}
+
+// <time> e.g. 200ms, 4s
+@mixin transition-duration($time...) {
+  @include vendor-prefix(transition-duration, $time, webkit moz o spec);
+}
+
+// <timing-function> e.g. ease, ease-in, ease-in-out, linear, cubic-bezier(0.1, 0.7, 1.0, 0.1), step-start, step-stop, steps(3, start), steps(3, end)
+// http://dev.w3.org/csswg/css3-transitions/#transition-timing-function-property
+@mixin transition-timing-function($timing-function...) {
+  @include vendor-prefix(transition-timing-function, $timing-function, webkit moz o spec);
+}
+
+// <time> e.g. 100ms, 5s
+@mixin transition-delay($time...) {
+  @include vendor-prefix(transition-delay, $time, webkit moz o spec);
+}

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

@@ -14,7 +14,6 @@ $grid-column:         grid-column-width();
 @mixin grid-container($width: $grid-size) {
   @include box-sizing(content-box);
   @include group;
-  max-width: 100%;
   width: $width;
   margin: {
     left: auto;

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

@@ -109,7 +109,8 @@
     @include grid-column-width($i, $grid-type);
 
     // Force pixel grid
-    %l-grid-pixel & {
+    %l-grid-pixel > &,
+    %l-grid-pixel > %l-row > & {
       @include grid-column-width($i, pixel);
       @include grid-column-margins(pixel);
     }
@@ -137,6 +138,25 @@
       @include grid-column-width($i, fluid, $gutter: 0);
       @include grid-column-margins(0);
     }
+
+    // TODO (fix inconsistent gutters betweeen pixel and fluid grids)
+    // Nested rows (for fluid grids)
+    // Since percentage value takes into account its parent container
+    // we need to adjust total column count to get the correct calculations
+    %l-grid-fluid & {
+      @for $n from 1 through $grid-total-columns {
+        %l-row %l-col-#{$n} {
+          @include grid-column-width($n, fluid, $total-columns: $i);
+        }
+      }
+    }
+    @if $grid-type == fluid {
+      @for $n from 1 through $grid-total-columns {
+        %l-row %l-col-#{$n} {
+          @include grid-column-width($n, fluid, $total-columns: $i);
+        }
+      }
+    }
   }
 }
 
@@ -170,7 +190,6 @@
 }
 
 
-// TODO Improve
 // Column offsets
 %l-container {
   @for $i from 1 through $grid-total-columns {

data/lib/version.rb

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

data/tests/_includes/menu-grids.html

@@ -4,5 +4,6 @@
         <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>
+        <li {% if page.id == "guardian" %} class="active"{% endif %}><a href="{{site.baseurl}}/grid/guardian.html">Guardian Homepage Example</a></li>
     </ul>
 </header>

data/tests/grid/arstechnica.html

@@ -18,21 +18,35 @@ menu:   grids
         <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="p-article"></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 class="p-title l-col m-1-of-1">
+                            <div class="item"></div>
+                        </div>
+                        <div class="l-col m-1-of-4">
+                            <div class="item"></div>
+                        </div>
+                        <div class="l-col m-1-of-4">
+                            <div class="item"></div>
+                        </div>
+                        <div class="l-col m-1-of-4">
+                            <div class="item"></div>
+                        </div>
+                        <div class="l-col m-1-of-4">
+                            <div class="item"></div>
+                        </div>
+                        <div class="l-col m-1-of-4">
+                            <div class="item"></div>
+                        </div>
+                        <div class="l-col m-1-of-4">
+                            <div class="item"></div>
+                        </div>
+                        <div class="l-col m-1-of-4">
+                            <div class="item"></div>
+                        </div>
+                        <div class="l-col m-1-of-4">
+                            <div class="item"></div>
+                        </div>
                     </div>
                 </div>
             </div>

data/tests/grid/fluid.html

@@ -11,6 +11,35 @@ menu:   grids
         {% include shared-grid-samples.html %}
     </div>
 
+    <div class="l-container">
+        <h2>Nested row</h2>
+        <div class="l-row">
+            <div class="l-col m-3">
+                <span>l-col m-3</span>
+            </div>
+            <div class="l-col m-6">
+                <span>l-col m-3</span>
+                <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>
+            </div>
+            <div class="l-col m-3">
+                <span>l-col m-3</span>
+            </div>
+        </div>
+    </div>
+
     <div class="l-container m-pixel">
         <header>
             <h2>Forced pixel grid</h2>
@@ -29,9 +58,9 @@ menu:   grids
 
         <div class="l-row m-gutterless">
             <div class="l-col m-9">
+                <span>.l-col-m-9</span>
                 <div class="l-container">
-                    <span>.l-col-m-9</span>
-                    <h2>Nested grid 6 columns in a 9 column cell</h2>
+                    <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>

data/tests/grid/guardian.html

@@ -0,0 +1,248 @@
+---
+layout: default
+title:  Guardian Home Layout Demo
+id:     guardian
+css:    guardian
+menu:   grids
+---
+
+<div class="reference">
+    <img src="{{site.baseurl}}/images/guardian-home.png" alt="">
+</div>
+
+<div id="page">
+
+    <div class="l-container">
+        <div class="top-bar"></div>
+        <div class="header">
+            <div class="p-info"></div>
+            <div class="p-search"></div>
+            <div class="masthead l-row">
+                <div class="p-logo l-col m-6">
+                    <span>l-col m-6</span>
+                </div>
+                <div class="p-weather l-col m-6">
+                    <span>l-col m-6</span>
+                </div>
+            </div>
+            <div class="nav">
+                <div class="p-main"></div>
+                <div class="p-sub"></div>
+            </div>
+            <div class="ticker"></div>
+        </div>
+
+        <div class="content l-row">
+            <div class="left l-col m-4">
+                <div class="item m-1">
+                    <span>l-col m4</span>
+                </div>
+                <div class="item m-2">
+                    <span>l-col m4</span>
+                </div>
+                <div class="item m-3">
+                    <span>l-col m4</span>
+                </div>
+            </div>
+            <div class="main l-col m-6">
+                <div class="item m-feat">
+                    <span>l-col m6</span>
+                </div>
+
+                <div class="l-row">
+                    <div class="l-col m-2">
+                        <div class="item m-1">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-2">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-4">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m2</span>
+                        </div>
+                        <div class="item m-5">
+                            <span>l-col m2</span>
+                        </div>
+                    </div>
+                    <div class="l-col m-4">
+                        <div class="item m-1">
+                            <span>l-col m4</span>
+                        </div>
+                        <div class="item m-2">
+                            <span>l-col m4</span>
+                        </div>
+                        <div class="item m-3">
+                            <span>l-col m4</span>
+                        </div>
+                        <div class="item m-4">
+                            <span>l-col m4</span>
+                        </div>
+                        <div class="item m-5">
+                            <span>l-col m4</span>
+                        </div>
+                        <div class="item m-6">
+                            <span>l-col m4</span>
+                        </div>
+                        <div class="item m-7">
+                            <span>l-col m4</span>
+                        </div>
+                        <div class="item m-8">
+                            <span>l-col m4</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="right l-col m-2">
+                <div class="item m-1">
+                    <span>l-col m2</span>
+                </div>
+                <div class="item m-2">
+                    <span>l-col m2</span>
+                </div>
+                <div class="item m-3">
+                    <span>l-col m2</span>
+                </div>
+                <div class="item m-4">
+                    <span>l-col m2</span>
+                </div>
+                <div class="item m-5">
+                    <span>l-col m2</span>
+                </div>
+                <div class="item m-6">
+                    <span>l-col m2</span>
+                </div>
+                <div class="item m-7">
+                    <span>l-col m2</span>
+                </div>
+                <div class="item m-8">
+                    <span>l-col m2</span>
+                </div>
+                <div class="item m-9">
+                    <span>l-col m2</span>
+                </div>
+                <div class="item m-10">
+                    <span>l-col m2</span>
+                </div>
+                <div class="item m-11">
+                    <span>l-col m2</span>
+                </div>
+                <div class="item m-12">
+                    <span>l-col m2</span>
+                </div>
+                <div class="item m-13">
+                    <span>l-col m2</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="shop">
+            <header></header>
+            <div class="l-row">
+                <div class="l-col m-2">
+                    <span>l-col m2</span>
+                </div>
+                <div class="l-col m-2">
+                    <span>l-col m2</span>
+                </div>
+                <div class="l-col m-2">
+                    <span>l-col m2</span>
+                </div>
+                <div class="l-col m-2">
+                    <span>l-col m2</span>
+                </div>
+                <div class="l-col m-2">
+                    <span>l-col m2</span>
+                </div>
+                <div class="l-col m-2">
+                    <span>l-col m2</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="simple-news">
+            <header></header>
+            <div class="l-row">
+                <div class="l-col m-2">
+                    <span>l-col m2</span>
+                </div>
+                <div class="l-col m-2">
+                    <span>l-col m2</span>
+                </div>
+                <div class="l-col m-2">
+                    <span>l-col m2</span>
+                </div>
+                <div class="l-col m-2">
+                    <span>l-col m2</span>
+                </div>
+                <div class="l-col m-2">
+                    <span>l-col m2</span>
+                </div>
+                <div class="l-col m-2">
+                    <span>l-col m2</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="mastfoot"></div>
+    </div>
+</div>

data/tests/scss/_mock-block.scss

@@ -4,68 +4,65 @@
   $v-guides-color: desaturate(darken($color, 10), 40);
 
   -webkit-transition: 400ms;
-  background-color: rgba($color, .4);
+  background-color: rgba($color, .3);
   position: relative;
   min-height: $height;
-  -webkit-transition: box-shadow 800ms ease, background 500ms ease;
-  -webkit-transition-delay: 600ms 0;
+  -webkit-transition: box-shadow 800ms, background 500ms;
+  overflow: hidden;
 
-  span {
+  > span {
+    -webkit-transition: 300ms;
     position: absolute;
     left: 0;
     right: 0;
     top: 50%;
-    color: rgba(white, .8);
-    height: 30px;
+    color: rgba(black, .6);
     text-align: center;
-    line-height: 30px;
-    margin: -15px auto 0;
-    max-width: 210px;
-    background: $v-guides-color;
+    margin: -10px auto 0;
     z-index: 2;
     opacity: 0;
     cursor: default;
-    font-size: 10px;
-    -webkit-transition: 300ms;
-    -webkit-border-radius: 20px;
-    text-transform: uppercase;
+    font-weight: bold;
+    text-shadow: 0 0 2px rgba(lighten($color, 60), .4);
+
+    &::before,
+    &::after {
+      -webkit-transition: 600ms;
+      background: $v-guides-color;
+      content: "";
+      position: absolute;
+      top: 50%;
+      height: 1px;
+    }
+    &::before {
+      margin-left: -2%;
+    }
+    &::after {
+      margin-left: 2%;
+    }
   }
 
   &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    @include position(absolute, fill);
     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);
+    background-color: rgba($color, .5);
+    box-shadow: inset 0 0 0px 1px $v-guides-color, 0 1px 8px rgba(black, .3);
 
-    span {
+    > span {
       opacity: 1;
-    }
 
-    &::after {
-      opacity: 1;
-      left: 0;
-      right: 0;
+      &::before,
+      &::after {
+        width: 98%;
+      }
+      &::before {
+        margin-left: -100%;
+      }
     }
   }
 }

data/tests/scss/arstechnica.scss

@@ -61,43 +61,38 @@ body {
       margin: 15px 0;
     }
 
-    .content,
     .sidebar {
-      @include block(#baaf32, $height: 2438px);
+      @include block(#baaf32, $height: 2418px);
+      margin-bottom: 20px;
     }
 
     .l-container {
       @include grid-container(640px);
     }
 
-    > .p-title {
-      @include block($height: 85px);
+    .p-article {
+      @include block(#baaf32, $height: 1773px);
       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;
+        padding: 0 10px;
+        margin: 10px 0;
+      }
+      .item {
+        @include block(purple, $height: 245px);
+      }
+      .l-col.p-title {
+        margin: 57px 0 0;
+
+        .item {
+          min-height: 33px;
+        }
       }
     }
   }
@@ -105,7 +100,7 @@ body {
   .mastfoot {
     background: rgba(#222, .2);
     .l-col {
-      @include block(#444, $height: 337px);
+      @include block(#777, $height: 223px, $padding: 20px);
     }
   }
 }

data/tests/scss/bbc.scss

@@ -13,7 +13,7 @@ $grid-baseline:             19px;
 
 @import "mock-block";
 
-// @include GRID-GUIDES;
+@include GRID-GUIDES;
 
 body {
   font: 12px/1.36 Helvetica, Arial, sans-serif;

data/tests/scss/fluid-grid.scss

@@ -27,7 +27,6 @@ $grid-type: fluid;
 
 
 .l-container .l-container {
-  position: relative;
   @include group(true);
 
   h2 {
@@ -36,6 +35,13 @@ $grid-type: fluid;
 
   .l-col {
     @include block(#ba5232, $height: 150px, $padding: $grid-gutter/2);
+  }
+}
+
+.l-container .l-container,
+.l-row .l-row {
+  .l-col {
+    position: relative;
 
     &:hover {
       z-index: 10;

data/tests/scss/guardian.scss

@@ -0,0 +1,219 @@
+// Grid settings
+$grid-guides-color:         #8aa8c0;
+$grid-guides-opacity:       .2;
+
+$grid-type:                 pixel;
+$grid-size:                 940px;
+$grid-total-columns:        12;
+$grid-desired-gutter:       20px;
+$grid-baseline:             15px;
+
+@import "stratum";
+@import "layout/scaffolding";
+
+@import "mock-block";
+
+// @include GRID-GUIDES;
+
+body {
+  font: 12px/1.36 Helvetica, Arial, sans-serif;
+  color: #444;
+  background: white;
+  padding: 0;
+  margin: 0;
+}
+
+// Reference
+
+.reference {
+  position: absolute;
+  left: -1px;
+  right: 0;
+  opacity: .35;
+  z-index: -1;
+
+  img {
+    margin: 0 auto;
+    display: block;
+  }
+}
+
+// Layout
+
+#page {
+  padding: 0;
+
+  .top-bar {
+    @include block(green, 30px);
+    margin-bottom: 35px;
+  }
+
+  .header .p-info,
+  .ticker {
+    @include block(#aaa, 20px);
+    margin: 5px 0;
+  }
+
+  .header {
+    .p-logo,
+    .p-weather {
+      @include block(blue, 70px);
+    }
+  }
+
+  .nav {
+    .p-main,
+    .p-sub {
+      @include block(#660e1a, 24px);
+    }
+    .p-main {
+      margin: 7px 0 6px;
+    }
+  }
+
+  .content {
+    margin-top: 25px;
+
+    .left {
+      .item {
+        @include block(#c9b480);
+        margin-bottom: 25px;
+      }
+      .m-1 {
+        min-height: 2940px;
+      }
+      .m-2 {
+        min-height: 1592px;
+      }
+      .m-3 {
+        min-height: 507px;
+      }
+    }
+
+    .main {
+      .item {
+        @include block(#bb77b1);
+        margin-bottom: 11px;
+      }
+      .m-feat {
+        min-height: 341px;
+        margin-bottom: 31px;
+      }
+
+      .l-row {
+        .m-2 {
+          .m-1 {
+            min-height: 182px;
+          }
+          .m-2 {
+            min-height: 218px;
+          }
+          .m-3 {
+            min-height: 182px;
+          }
+          .m-4 {
+            min-height: 272px;
+          }
+          .m-5 {
+            min-height: 216px;
+            margin-top: 51px;
+          }
+        }
+
+        .m-4 {
+          .item {
+            margin-bottom: 30px;
+          }
+          .m-1 {
+            min-height: 776px;
+          }
+          .m-2 {
+            min-height: 183px;
+          }
+          .m-3 {
+            min-height: 1098px;
+          }
+          .m-4 {
+            min-height: 603px;
+          }
+          .m-5 {
+            min-height: 719px;
+          }
+          .m-6 {
+            min-height: 321px;
+          }
+          .m-7 {
+            min-height: 378px;
+          }
+          .m-8 {
+            min-height: 375px;
+          }
+        }
+      }
+    }
+
+    .right {
+      .item {
+        @include block(#769cbb);
+        margin-bottom: 10px;
+      }
+      .m-1 {
+        min-height: 172px;
+      }
+      .m-2 {
+        min-height: 435px;
+      }
+      .m-3 {
+        min-height: 262px;
+      }
+      .m-4 {
+        min-height: 230px;
+      }
+      .m-5 {
+        min-height: 390px;
+      }
+      .m-6 {
+        min-height: 306px;
+      }
+      .m-7 {
+        min-height: 62px;
+      }
+      .m-8 {
+        min-height: 129px;
+      }
+      .m-9 {
+        min-height: 608px;
+      }
+      .m-10 {
+        min-height: 191px;
+      }
+      .m-11 {
+        min-height: 153px;
+      }
+      .m-12 {
+        min-height: 158px;
+      }
+      .m-13 {
+        min-height: 140px;
+      }
+    }
+  }
+
+  .shop,
+  .simple-news {
+    margin: 13px 0 20px;
+
+    header {
+      @include block(#49bb99, 50px);
+      margin-bottom: 10px;
+    }
+    .l-col {
+      @include block(#76bba6, 162px);
+    }
+  }
+
+  .mastfoot {
+    @include block($height: 52px);
+    margin-top: 25px;
+  }
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stratum
 version: !ruby/object:Gem::Version
-  version: 0.2.3
+  version: 0.2.4
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-02-04 00:00:00.000000000 Z
+date: 2013-02-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: thor
-  requirement: &70294002783300 !ruby/object:Gem::Requirement
+  requirement: &70133679732860 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,7 +21,7 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70294002783300
+  version_requirements: *70133679732860
 description: Stratum is a collection of SASS mixins and utilities for your web development
   needs.
 email: tyom@semonov.com
@@ -35,7 +35,15 @@ files:
 - LICENSE
 - README.md
 - assets/stylesheets/_stratum.scss
+- assets/stylesheets/addons/_dimensions.scss
+- assets/stylesheets/addons/_group.scss
+- assets/stylesheets/addons/_position.scss
+- assets/stylesheets/addons/_vendor-prefix.scss
+- assets/stylesheets/css3/_animation.scss
+- assets/stylesheets/css3/_border-radius.scss
 - assets/stylesheets/css3/_box-sizing.scss
+- assets/stylesheets/css3/_transform.scss
+- assets/stylesheets/css3/_transition.scss
 - assets/stylesheets/forms/_input-placeholder.scss
 - assets/stylesheets/layout/_grid-functions.scss
 - assets/stylesheets/layout/_grid-guides.scss
@@ -44,8 +52,6 @@ files:
 - assets/stylesheets/layout/_grid.scss
 - assets/stylesheets/layout/_responsive.scss
 - assets/stylesheets/layout/scaffolding.scss
-- assets/stylesheets/utils/_group.scss
-- assets/stylesheets/utils/_vendor-prefix.scss
 - bin/stratum
 - lib/stratum.rb
 - lib/version.rb
@@ -60,15 +66,18 @@ files:
 - tests/grid/arstechnica.html
 - tests/grid/bbc.html
 - tests/grid/fluid.html
+- tests/grid/guardian.html
 - tests/grid/index.html
 - tests/grid/pixel.html
 - tests/images/arstechnica.png
 - tests/images/bbc.png
 - tests/images/capture.js
+- tests/images/guardian-home.png
 - tests/scss/_mock-block.scss
 - tests/scss/arstechnica.scss
 - tests/scss/bbc.scss
 - tests/scss/fluid-grid.scss
+- tests/scss/guardian.scss
 - tests/scss/main.scss
 - tests/scss/pixel-grid.scss
 homepage: http://rubygems.org/gems/stratum