stratum 0.2.4 → 0.3.0

data/tests/grid/pixel.html

@@ -1,29 +0,0 @@
----
-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

@@ -1,15 +0,0 @@
-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

@@ -1,68 +0,0 @@
-// 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, .3);
-  position: relative;
-  min-height: $height;
-  -webkit-transition: box-shadow 800ms, background 500ms;
-  overflow: hidden;
-
-  > span {
-    -webkit-transition: 300ms;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 50%;
-    color: rgba(black, .6);
-    text-align: center;
-    margin: -10px auto 0;
-    z-index: 2;
-    opacity: 0;
-    cursor: default;
-    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 {
-    @include position(absolute, fill);
-    content: "";
-    background: rgba(white, .25);
-    margin: $padding;
-  }
-
-  &:hover {
-    background-color: rgba($color, .5);
-    box-shadow: inset 0 0 0px 1px $v-guides-color, 0 1px 8px rgba(black, .3);
-
-    > span {
-      opacity: 1;
-
-      &::before,
-      &::after {
-        width: 98%;
-      }
-      &::before {
-        margin-left: -100%;
-      }
-    }
-  }
-}

data/tests/scss/arstechnica.scss

@@ -1,106 +0,0 @@
-// 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;
-    }
-
-    .sidebar {
-      @include block(#baaf32, $height: 2418px);
-      margin-bottom: 20px;
-    }
-
-    .l-container {
-      @include grid-container(640px);
-    }
-
-    .p-article {
-      @include block(#baaf32, $height: 1773px);
-      margin-bottom: 10px
-    }
-
-    .sidebar {
-      width: 300px;
-    }
-
-    .related {
-      .l-col {
-        padding: 0 10px;
-        margin: 10px 0;
-      }
-      .item {
-        @include block(purple, $height: 245px);
-      }
-      .l-col.p-title {
-        margin: 57px 0 0;
-
-        .item {
-          min-height: 33px;
-        }
-      }
-    }
-  }
-
-  .mastfoot {
-    background: rgba(#222, .2);
-    .l-col {
-      @include block(#777, $height: 223px, $padding: 20px);
-    }
-  }
-}

data/tests/scss/bbc.scss

@@ -1,93 +0,0 @@
-// 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

@@ -1,50 +0,0 @@
-$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 {
-  @include group(true);
-
-  h2 {
-    margin: 20px $grid-gutter 10px;
-  }
-
-  .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

@@ -1,219 +0,0 @@
-// 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;
-  }
-}

data/tests/scss/main.scss

@@ -1,90 +0,0 @@
-@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

@@ -1,14 +0,0 @@
-$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);
-}