stratum 0.1.1 → 0.2.0

data/.gitignore

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

data/.gitmodules

@@ -0,0 +1,4 @@
+[submodule "demo/vendor/livereload-js"]
+	path = demo/vendor/livereload-js
+	url = git@github.com:tyom/livereload-js.git
+    dirty = ignore

data/LICENSE

@@ -0,0 +1,21 @@
+Copyright (c) 2013 Tyom Semonov
+
+The MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/assets/stylesheets/_stratum.scss

@@ -9,18 +9,24 @@
 //
 // Grid
 //
-// $grid-medium:         940px;
-// $grid-large:          1200px;
-// $grid-guides:               true;
-// $grid-guides-color:         blue;
+$grid-guides-color:         #8aa8c0;
 // $grid-guides-opacity:       .1;
 // $grid-guides-position:      front;
+$grid-type:                 pixel;
 $grid-total-columns:        12;
 $grid-desired-gutter:       20px;
 // $grid-baseline:             30px;
-// $grid-type:                 flexible;
 // -----------------------------------------------------------------------------
 
+@import "utils/vendor-prefix";
+@import "utils/group";
+
+// CSS3 mixins
+@import "css3/box-sizing";
+
+// Layout
 @import "layout/grid";
-@import "layout/scaffolding";
-// @import "layout/grid-debug";
+// @import "layout/responsive";
+
+// Forms
+@import "forms/input-placeholder";

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

@@ -0,0 +1,8 @@
+@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/forms/_input-placeholder.scss

@@ -0,0 +1,14 @@
+// Form related mixins
+// ============================================================================
+
+@mixin input-placeholder {
+  &::-webkit-input-placeholder {
+    @content;
+  }
+  &:-moz-placeholder {
+    @content;
+  }
+  &:-ms-input-placeholder {
+    @content;
+  }
+}

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

@@ -0,0 +1,54 @@
+// # Calculate column gutter from desired value
+
+// This function will find the nearest round number that
+// fits well with number of columns and total width specified
+
+// All parameters are optional (use grid defaults)
+
+@function grid-column-gutter($grid-size: $grid-size, $desired: $grid-desired-gutter) {
+  $v-gutter: 0px;
+  $column: 1;
+
+  // Find a round gutter width
+  @while $column > $v-gutter {
+    $column: grid-column-width($grid-size, $grid-total-columns, $v-gutter);
+
+    @if $column % 1 == 0 {
+      $range-from:  $desired - 6;
+      $range-to:    $desired + 20;
+      $within-range: $v-gutter >= $range-from and $v-gutter <= $range-to;
+      // Find gutter within desired range
+      @if $within-range {
+        @return $v-gutter;
+      }
+    }
+    $v-gutter: $v-gutter + 1;
+  }
+  @warn "Couldn't find suitable gutter close to your desired value. Try a different one.";
+}
+
+// # Calcuate the width of a single column
+// All parameters are optional (use grid defaults)
+@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);
+  }
+  @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) {
+  @if $column-width == auto {
+    $column-width: grid-column-width();
+  }
+  @if $gutter == auto {
+    $gutter: grid-column-gutter($grid-size, $grid-desired-gutter);
+  }
+  @return ceil($column-span * $column-width + ($column-span - 1) * $gutter);
+}
+
+// # Convert percentage of width relative to the total width
+@function grid-percentage($width, $grid-size: ($grid-size + $grid-gutter)) {
+  @return percentage($width / $grid-size);
+}

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

@@ -0,0 +1,84 @@
+// Grid debugging tools: Guides
+// ============================================================================
+
+// Guides rely on `::before` pseudo element so the will only work on elements
+// that don't already use it (e.g. not `group(true)`)
+
+// Draws grid guides
+@mixin grid-render-guides($grid-size: $grid-size, $grid-type: $grid-type) {
+
+  $v-block-size: 8;
+
+  // Pixel grid default values
+  $v-column-gutter: grid-column-gutter();
+  $v-column-width:  grid-column-width();
+  $v-column-relative-width: grid-column-gutter() + grid-column-width();
+
+  @if $grid-type == fluid {
+    // Calculate gutter to column ratio
+    $v-gutter-ratio: $v-column-gutter / ($v-column-width + $v-column-gutter);
+    // Calculate column to grid width ratio
+    $v-column-ratio: ($v-column-width + $v-column-gutter) / $grid-size;
+
+    // Reset column size with percentages
+    $v-column-gutter: percentage($v-gutter-ratio);
+    $v-column-width: 100 - percentage($v-gutter-ratio);
+    $v-column-relative-width: percentage($v-column-ratio);
+  }
+
+  $v-column-gutter:  $v-column-width + $v-column-gutter;
+  $v-block-height: (($grid-baseline + 1) * $v-block-size) + $grid-baseline;
+
+  position: relative;
+
+  &:before {
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    background:
+      // Baseline (v-rhythm)
+      -webkit-linear-gradient(
+        transparent $grid-baseline,
+        rgba(white, $grid-guides-opacity) $grid-baseline),
+      // Columns
+      -webkit-linear-gradient(left,
+        rgba($grid-guides-color, $grid-guides-opacity),
+        rgba($grid-guides-color, $grid-guides-opacity) $v-column-width,
+        transparent $v-column-width,
+        transparent $v-column-gutter),
+      // Blocks
+      -webkit-linear-gradient(
+        transparent ($v-block-height - $grid-baseline),
+        rgba(white, $grid-guides-opacity / 1.2) $grid-baseline),
+      // Base colour
+      -webkit-linear-gradient(
+        rgba($grid-guides-color, $grid-guides-opacity),
+        rgba($grid-guides-color, $grid-guides-opacity));
+
+    background-size:
+      $v-column-gutter $grid-baseline + 1,     // v-rhythm
+      $v-column-relative-width 10px,           // column
+      $v-column-gutter ($v-block-height + 1);  // block
+
+    // Grid placement (back by default)
+    @if $grid-guides-position == front {
+      z-index: 999;
+    } @else {
+      z-index: -1;
+    }
+  }
+}
+
+// Currently only global for all grids
+@mixin GRID-GUIDES {
+  %l-container > %l-row {
+    @include grid-render-guides($grid-size);
+    &::before {
+      margin: 0 $grid-half-gutter;
+    }
+  }
+}

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

@@ -0,0 +1,96 @@
+@import "grid-functions";
+
+// Grid initialisation
+// -------------------
+$grid-gutter:         grid-column-gutter();
+$grid-half-gutter:    $grid-gutter / 2;
+$grid-column:         grid-column-width();
+
+
+// Mixins
+// ------
+
+// Grid container to set grid bounds
+@mixin grid-container($width: $grid-size) {
+  min-width: $width;
+  max-width: 100%;
+  width: $width;
+  margin: {
+    left: auto;
+    right: auto;
+  }
+}
+
+// Grid row
+// $type: <pixel|fluid>
+@mixin grid-row($type: $grid-type) {
+  @include grid-column-margins($type, -1);
+}
+
+// Converts into grid column
+// $variation - can be normal, last, end, inner or centered
+@mixin grid-column($type: $grid-type) {
+  @include box-sizing(border-box);
+  min-height: 1px;
+  float: left;
+}
+
+// Column margins
+// $modifier: 1   - normal (column) margins
+// $modifier: -1  - negative (row) margins
+@mixin grid-column-margins($type: $grid-type, $modifier: 1) {
+  $v-gutter:   auto;
+
+  @if($type == fluid) {
+    $v-gutter: grid-percentage($grid-half-gutter * $modifier);
+  } @else if ($type == pixel) {
+    $v-gutter: $grid-half-gutter * $modifier;
+  }
+
+  margin-left:  $v-gutter;
+  margin-right: $v-gutter;
+}
+
+// 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) {
+  $v-col-width: auto;
+
+  @if($type == pixel) {
+    $v-col-width: grid-columns-width($span);
+  } @else if($type == fluid) {
+    $v-col-width: grid-percentage(grid-columns-width($span));
+  } @else if($type == marginless) {
+    $v-col-width: grid-percentage(grid-columns-width($span, $grid-column + $gutter, 0));
+  }
+
+  width: $v-col-width;
+}
+
+
+// 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: 0px;
+  $v-gutter: $grid-gutter;
+
+  // Grid with rows (outer margins)
+  @if $grid-type != marginless {
+    $v-gutter: $v-gutter * 1.5; // half gutter from row offset
+  }
+
+  // Pixel grid
+  @if $grid-type == pixel {
+    $v-offset: grid-columns-width($span);
+  }
+  // Fluid grid
+  @if $grid-type == fluid or $grid-type == marginless {
+    $v-gutter: grid-percentage($v-gutter);
+    $v-offset: grid-percentage(grid-columns-width($span));
+  }
+
+  // Negative offset
+  @if $flow == negative {
+    $v-offset: -$v-offset + $v-gutter;
+  }
+
+  margin-#{$direction}: $v-offset + $v-gutter;
+}

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

@@ -0,0 +1,239 @@
+// Semantic grid components
+// ========================
+
+// These class placeholders 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.
+
+// The structure of the grid is as follows:
+
+// %l-container           –  A grid is always contained in one of these
+//                           They use global grid settings and can be overriden with:
+//    %l-grid-pixel       –  Force pixel grid
+//    %l-grid-fluid       –  Force fluid grid
+//    %l-marginless       –  Collapse column margins (gutters)
+//
+// %l-row                 –  Grid consists of a number of rows
+//                           They are required for correct column margins, but can be omitted,
+//                           in which case the grid with no `%l-row` becomes marginless
+//
+// %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-from-left-<$i>   –  Offset column by <column size> from left
+// l-col-to-left-<$i>     –  Offset column by <column size> to left (negative margin)
+// l-col-from-right-<$i>  –  Offset column by <column size> from right
+// l-col-to-right-<$i>    –  Offset column by <column size> to right (negative margin)
+//
+// %l-last-col-right      –  This settings forces last column to float to right, which helps to eliminate
+//                           pixel gap caused by rounding in fluid grids and ensures first and last column
+//                           occupy full width of grid container.
+//                           Applied to grid container (@extend).
+
+// For examples of usage of these components see `scaffolding.scss` file.
+
+
+// # Individual grid components
+
+// 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%;
+  }
+
+  // Defines grid row
+  %l-row {
+    @include grid-row;
+    @include group;
+  }
+
+  // Defines grid row of forced fluid grid
+  &%l-grid-fluid > %l-row, {
+    @include grid-row(fluid);
+  }
+  // Defines grid row of forced pixel grid
+  &%l-grid-pixel > %l-row {
+    @include grid-row(pixel);
+  }
+
+  // Always set nested grids to fluid
+  &%l-container %l-container > %l-row, {
+    @include grid-row(fluid);
+  }
+
+  // Defines row of marginless grid
+  &%l-marginless > %l-row {
+    margin: {
+      left: 0;
+      right: 0;
+    }
+  }
+}
+
+
+// Defines columns
+%l-col {
+  @include grid-column;
+}
+
+
+// Float last column to right if `%l-last-col-right` extended
+// Applied to `%l-container`
+%l-col + %l-col:last-child {
+  %l-last-col-right%l-container > &,
+  %l-last-col-right%l-container > %l-row & {
+    float: right;
+  }
+}
+
+
+// Defines column sizes
+@for $i from 1 through $grid-total-columns {
+
+  // ## Spans
+
+  %l-col-#{$i} {
+    %l-row & {
+      @include grid-column-width($i, $grid-type);
+
+      %l-marginless > & {
+        @include grid-column-width($i, marginless);
+        @include grid-column-margins(fluid, 0);
+      }
+    }
+
+    // Marginless (container without row)
+    %l-container > & {
+      @include grid-column-width($i, marginless);
+    }
+
+    // Force pixel grid
+    %l-grid-pixel > %l-row > & {
+      @include grid-column-width($i, pixel);
+      @include grid-column-margins(pixel);
+    }
+    // Force fluid grid
+    %l-grid-fluid > %l-row > &,
+    // Always set nested grid to fluid
+    %l-container %l-container > %l-row > & {
+      @include grid-column-width($i, fluid);
+      @include grid-column-margins(fluid);
+    }
+  }
+}
+
+
+// Defines column margins
+// Only applied to descendants of rows
+%l-row %l-col {
+  @include grid-column-margins;
+}
+
+
+// TODO Improve
+// Defines column offsets
+%l-container {
+  @for $i from 1 through $grid-total-columns {
+
+    // ## Grid with margins
+    // Default grid offsets
+    & > %l-row %l-col {
+      // From left
+      &%l-col-from-left-#{$i} {
+        @include grid-offset-by-column($i, left, positive, $grid-type);
+      }
+
+      // To left
+      &%l-col-to-left-#{$i} {
+        @include grid-offset-by-column($i, left, negative, $grid-type);
+      }
+
+      // From right
+      &%l-col-from-right-#{$i} {
+        @include grid-offset-by-column($i, right, positive, $grid-type);
+      }
+
+      // To right
+      &%l-col-to-right-#{$i} {
+        @include grid-offset-by-column($i, right, negative, $grid-type);
+      }
+    }
+
+    // Pixel grid offsets
+    &%l-grid-pixel > %l-row %l-col {
+      // From left
+      &%l-col-from-left-#{$i} {
+        @include grid-offset-by-column($i, left, positive, pixel);
+      }
+
+      // To left
+      &%l-col-to-left-#{$i} {
+        @include grid-offset-by-column($i, left, negative, pixel);
+      }
+
+      // From right
+      &%l-col-from-right-#{$i} {
+        @include grid-offset-by-column($i, right, positive, pixel);
+      }
+
+      // To right
+      &%l-col-to-right-#{$i} {
+        @include grid-offset-by-column($i, right, negative, pixel);
+      }
+    }
+
+    // Fluid grid offsets
+    &%l-grid-fluid > %l-row %l-col {
+      // From left
+      &%l-col-from-left-#{$i} {
+        @include grid-offset-by-column($i, left, positive, fluid);
+      }
+
+      // To left
+      &%l-col-to-left-#{$i} {
+        @include grid-offset-by-column($i, left, negative, fluid);
+      }
+
+      // From right
+      &%l-col-from-right-#{$i} {
+        @include grid-offset-by-column($i, right, positive, fluid);
+      }
+
+      // To right
+      &%l-col-to-right-#{$i} {
+        @include grid-offset-by-column($i, right, negative, fluid);
+      }
+    }
+
+    // ## Marginless grid
+    & > %l-col,
+    &%l-marginless %l-col {
+      // From left
+      &%l-col-from-left-#{$i} {
+        @include grid-offset-by-column($i, left, positive, marginless);
+      }
+
+      // To left
+      &%l-col-to-left-#{$i} {
+        @include grid-offset-by-column($i, left, negative, marginless);
+      }
+
+      // From right
+      &%l-col-from-right-#{$i} {
+        @include grid-offset-by-column($i, right, positive, marginless);
+      }
+
+      // To right
+      &%l-col-to-right-#{$i} {
+        @include grid-offset-by-column($i, right, negative, marginless);
+      }
+    }
+  }
+}