stratum 0.2.4 → 0.3.0

data/.editorconfig

@@ -0,0 +1,7 @@
+# editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2

data/.gitignore

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

data/assets/stylesheets/_css3.scss

@@ -0,0 +1,7 @@
+// CSS3 mixins
+@import "css3/animation";
+@import "css3/border-radius";
+@import "css3/box-sizing";
+@import "css3/transform";
+@import "css3/transition";
+@import "css3/user-select";

data/assets/stylesheets/_helpers.scss

@@ -0,0 +1,7 @@
+// Helper mixins
+@import "helpers/vendor-prefix";
+@import "helpers/group";
+@import "helpers/icons";
+@import "helpers/position";
+@import "helpers/box";
+@import "helpers/triangle";

data/assets/stylesheets/_stratum.scss

@@ -1,28 +1,25 @@
 // Grid settings
-$grid-guides-color:         #8aa8c0   !default;
-$grid-guides-opacity:       .2        !default;
-$grid-guides-position:      front     !default;
 $grid-type:                 fluid     !default;
 $grid-size:                 980px     !default;
 $grid-total-columns:        12        !default;
 $grid-desired-gutter:       20px      !default;
 $grid-baseline:             18px      !default;
 
-@import "addons/vendor-prefix";
-@import "addons/group";
-@import "addons/position";
-@import "addons/dimensions";
+// Grid guides
+$grid-guides-class:         false     !default;   // Adds `.m-show-guides` and `.m-show-guides.m-front` to scaffolding
+$grid-guides-color:         #8aa8c0   !default;
+$grid-guides-opacity:       .2        !default;
+$grid-guides-position:      front     !default;
 
-// CSS3 mixins
-@import "css3/animation";
-@import "css3/border-radius";
-@import "css3/box-sizing";
-@import "css3/transform";
-@import "css3/transition";
+// Scaffolding
+$scaffolding-debug:         true      !default;  // Highlight disabled features that are used
 
-// Layout
+@import "css3";
+@import "helpers";
 @import "layout/grid";
-// @import "layout/responsive";
 
 // Forms
 @import "forms/input-placeholder";
+
+// Icons
+$stratum-icons:             $stratum-dingbats !default;

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

@@ -22,8 +22,8 @@
 // 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);
+  $-value: nth($value, 1);
+  @include vendor-prefix(border-radius, unquote($-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/_user-select.scss

@@ -0,0 +1,12 @@
+// user-select
+// -------------
+
+// Vendor prefixes:
+// - Chrome
+// - Safari
+// - Firefox
+// - IE 10+
+
+@mixin user-select($value...) {
+  @include vendor-prefix(user-select, $value, webkit moz ms spec);
+}

data/assets/stylesheets/helpers/_box.scss

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

data/assets/stylesheets/{addons → helpers}/_dimensions.scss

@@ -4,10 +4,13 @@
 // 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));
+@mixin box($args...) {
+  @if $args == center {
+    margin-left: auto;
+    margin-right: auto;
+  } @else if length($args) < 3 {
+    width: nth($args, 1);
+    height: nth($args, length($args));
   } @else {
     @warn "box mixin only takes 1 or 2 arguments"
   }

data/assets/stylesheets/helpers/_icon-map.scss

@@ -0,0 +1,11 @@
+// Unicode Dingbats
+
+// Default stratum icon set
+
+$stratum-dingbats:
+  upper-blade-scissors  "\2713",
+  heavy-checkmark       "\2714",
+  multiplication        "\2715",
+  chevron-left          "\276e",
+  chevron-right         "\276f"
+;

data/assets/stylesheets/helpers/_icons.scss

@@ -0,0 +1,177 @@
+// Icon helpers
+// ------------
+// Adds inline icon to an element
+
+// Icons are mapped to default fallback list defined in `icon-map`
+
+@import "icon-map";
+
+// Default global icons can be easily overriden by importing a new map
+// and assigning it to default `$stratum-icons` variable:
+
+// e.g.
+// ```
+// @import "font-awesome";
+// $stratum-icons: $icons-font-awesome;
+// ```
+
+// Alternatively, font icons can be provided inline for each icon
+// e.g.
+// ```
+// @include icon(music, $source: $icons-font-awesome);
+// ```
+
+// Placeholder for shared classes
+%-icon-inline {
+  line-height: 1;
+  display: inline-block;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+}
+%-icon-only {
+  display: inline-block;
+  text-indent: -100%;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+// Function to map icon name to character/image
+@function -icon-map($name, $source) {
+  @each $icon in $source {
+    @if length($icon) < 2 {
+      @warn "Icon value is missing for '#{$icon}'";
+      @return null;
+    }
+
+    $-name:  nth($icon, 1);
+    $-value: nth($icon, 2);
+
+    @if $-name == $name {
+      @return $-value;
+    }
+  }
+  @warn "Icon '#{$name}' not found";
+  @return "";
+}
+
+// Function to get font family from font map file
+// (If font family is included as the last pair in the list)
+// Expects the following format:
+// ```
+// $font-icon:
+//   ...
+//   -font        FontAwesome;
+// ```
+
+@function -icon-font($source) {
+  $-font-family: null;
+
+  @if length($source) > 1 {
+    $-last-pair: nth($source, length($source));
+
+    @if length($-last-pair) == 2 and nth($-last-pair, 1) == "-font" {
+      $-font-family: nth($-last-pair, 2);
+    } @else {
+      @warn "No font speficied";
+    }
+  }
+
+  @return $-font-family;
+}
+
+// Icon properties mixin
+// Returns inline icon styles and sets optional dimensions
+@mixin -icon-render($size, $el, $font-family, $hide-text) {
+  @extend %-icon-inline;
+
+  font-size: $size;
+  font-family: $font-family;
+
+  @if not $hide-text {
+    @if $el == after {
+      margin-left: .4em;
+    } @else {
+      margin-right: .4em;
+    }
+  }
+
+  // Vertically align if custom icon size specified
+  @if $size != inherit and not unitless($size) {
+    @include box($size);
+  }
+}
+
+// Include icon
+// Main icon mixin
+
+// Usage:
+// ```
+// @include icon(music, $source: $icons-font-awesome) {
+//   color: #444;
+//   text-shadow: 0 1px 2px #aaa;
+// }
+// ```
+// Properties inside braces are optional
+
+@mixin icon($name, $size: inherit, $el: before, $source: $stratum-icons, $hide-text: false) {
+  $-font-family: -icon-font($source);
+
+  @if $hide-text {
+    @extend %-icon-only;
+  }
+
+  @if $el == before or $el == after {
+    // Pseudo element
+    &::#{$el} {
+      @include -icon-render($size, $el, $-font-family, $hide-text);
+      content: quote(-icon-map($name, $source));
+
+      @if $hide-text {
+        text-indent: 0;
+        float: left;
+      }
+
+      @content;
+    }
+  } @else {
+    // HTML element
+    > #{$el} {
+      @include -icon-render($size, $el, $-font-family, $hide-text);
+      font-style: normal;
+
+      &::before {
+        content: quote(-icon-map($name, $source));
+      }
+
+      @if $hide-text {
+        text-indent: 0;
+        float: left;
+      }
+
+      @content;
+    }
+  }
+}
+
+// Hide text and include icon only
+@mixin icon-only($name, $size: inherit, $el: before, $source: $stratum-icons) {
+  @include icon($name, $size, $el, $source, $hide-text: true) {
+    @content;
+  }
+}
+
+// Mixin to adjust existing icon
+// @include icon-edit {
+//   color: #444;
+//   text-shadow: 0 1px 2px #aaa;
+// }
+// ```
+
+// `before` | `after` | `<el>` (direct descendant <element>)
+@mixin icon-edit($el: before) {
+  @if $el == before or $el == after {
+    &::#{$el} { @content }
+  } @else {
+    > #{$el} { @content }
+  }
+}

data/assets/stylesheets/{addons → helpers}/_position.scss

@@ -30,7 +30,7 @@
     $values: append($values, nth($values, 2));
   }
 
-  $v-pairs:
+  $-pairs:
     top    nth($values, 1),
     right  nth($values, 2),
     bottom nth($values, 3),
@@ -38,11 +38,11 @@
 
   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;
+  @each $pair in $-pairs {
+    $-pos: nth($pair, 1);
+    $-val: nth($pair, 2);
+    @if $-val == auto or ($-val != none and not unitless($-val)) {
+      #{$-pos}: $-val;
     }
   }
 }

data/assets/stylesheets/helpers/_triangle.scss

@@ -0,0 +1,64 @@
+// Generate CSS triangles
+// ----------------------
+
+@mixin triangle($position: top, $color: black, $size: 16px) {
+  $-dimensions: null;
+  $-colors: null;
+  $-height: nth($size, 1);
+  $-left: $-height / 1.5;
+  $-right: $-height / 1.5;
+
+  // sides width specified
+  @if length($size) == 2 {
+    $-left: nth($size, 2);
+    $-right: nth($size, 2);
+  // individual side widths specified
+  } @else if length($size) == 3 {
+    $-left: nth($size, 2);
+    $-right: nth($size, 3);
+  }
+
+  @if $position == top {
+    $-dimensions: 0 $-right $-height $-left;
+    $-colors: transparent transparent $color;
+  }
+  @if $position == top-right {
+    $-dimensions: 0 $-height $-height 0;
+    $-colors: transparent $color transparent transparent;
+  }
+  @if $position == right {
+    $-dimensions: $-left 0 $-right $-height;
+    $-colors: transparent transparent transparent $color;
+  }
+  @if $position == bottom-right {
+    $-dimensions: 0 0 $-height $-height;
+    $-colors: transparent transparent $color;
+  }
+  @if $position == bottom {
+    $-dimensions: $-height $-left 0 $-right;
+    $-colors: $color transparent transparent;
+  }
+  @if $position == bottom-left {
+    $-dimensions: $-height 0 0 $-height;
+    $-colors: transparent transparent transparent $color;
+  }
+  @if $position == left {
+    $-dimensions: $-left $-height $-right 0;
+    $-colors: transparent $color transparent transparent;
+  }
+  @if $position == top-left {
+    $-dimensions: $-height $-height 0 0;
+    $-colors: $color transparent transparent transparent;
+  }
+
+  @if $-dimensions and $-colors {
+    @include box(0px);
+    display: inline-block;
+    border-style: solid;
+    border-width: $-dimensions;
+    border-color: $-colors;
+  } @else {
+    @warn "Unrecognised position '#{$position}'. Use one of: top, top-right, right, bottom-right, bottom, bottom-left, left, top-left";
+  }
+}
+

data/assets/stylesheets/layout/_grid.scss

@@ -18,9 +18,8 @@ $grid-guides-color:     #c84e5b     !default;
 $grid-guides-opacity:   .2          !default;
 $grid-guides-position:  back        !default;
 
+@import "grid/functions";
+@import "grid/mixins";
+@import "grid/guides";
 
-@import "grid-functions";
-
-@import "grid-mixins";
-@import "grid-semantics";
-@import "grid-guides";
+@import "grid/semantics";

data/assets/stylesheets/layout/{_grid-functions.scss → grid/_functions.scss}

@@ -6,23 +6,23 @@
 // All parameters are optional (use grid defaults)
 
 @function grid-column-gutter($grid-size: $grid-size, $desired: $grid-desired-gutter) {
-  $v-gutter: 0px;
+  $-gutter: 0px;
   $column: 1;
 
   // Find a round gutter width
-  @while $column > $v-gutter {
-    $column: grid-column-width($grid-size, $grid-total-columns, $v-gutter);
+  @while $column > $-gutter {
+    $column: grid-column-width($grid-size, $grid-total-columns, $-gutter);
 
     @if $column % 1 == 0 {
       $range-from:  $desired - 6;
       $range-to:    $desired + 20;
-      $within-range: $v-gutter >= $range-from and $v-gutter <= $range-to;
+      $within-range: $-gutter >= $range-from and $-gutter <= $range-to;
       // Find gutter within desired range
       @if $within-range {
-        @return $v-gutter;
+        @return $-gutter;
       }
     }
-    $v-gutter: $v-gutter + 1;
+    $-gutter: $-gutter + 1;
   }
   @warn "Couldn't find suitable gutter close to your desired value. Try a different one.";
 }
@@ -41,19 +41,20 @@
 // # 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, $total-columns: $grid-total-columns) {
-  $v-gutter: grid-column-gutter($grid-size, $grid-desired-gutter);
+  $-gutter: grid-column-gutter($grid-size, $grid-desired-gutter);
 
   @if $gutter == 0 {
-    $v-gutter: 0;
+    $-gutter: 0;
+    // Do not round because round values are optimised for grid with gutters
     $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 * grid-column-width($total-columns: $total-columns) + (($column-span - 1) * $-gutter));
   }
 
-  $v-grid-size: $grid-size + $v-gutter;
+  $-grid-size: $grid-size + $-gutter;
 
   @if $type == fluid {
-    $column-width: grid-percentage($column-width, $v-grid-size);
+    $column-width: grid-percentage($column-width, $-grid-size);
   }
 
   @return $column-width;

data/assets/stylesheets/layout/grid/_guides.scss

@@ -0,0 +1,123 @@
+// Grid debugging tools: Guides
+// ----------------------------
+
+// ## Usage:
+
+// Apply grid guide to all grids on page
+// [optional] $element:  container | row (default - container)
+// [optional] $position: back | front (default - back)
+// `@include GRID-GUIDES($el, $position);`  // At the root of stylesheet
+
+// Apply grid guide on element
+// [optional] $position: back | front (default - back)
+// ```
+// .row {
+//   @include show-grid-guides($position);`
+// }
+
+// Guides rely on `::before` pseudo element so they 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, $column-gutter: grid-column-gutter()) {
+
+  $-block-size: 8;
+
+  // Pixel grid default values
+  $-column-width:  grid-column-width($gutter: $column-gutter);
+  $-column-combined-width: $column-gutter + $-column-width;
+
+  @if $grid-type == fluid {
+    // Calculate gutter to column ratio
+    $-gutter-ratio: $column-gutter / ($-column-width + $column-gutter);
+    // Calculate column to grid width ratio
+    // not entirely sure where $column-gutter/3 magic number comes from, but it's necessary to make it work
+    $-column-ratio: ($-column-width + $column-gutter) / ($grid-size - $column-gutter / 3);
+
+    // Reset column size with percentages
+    $column-gutter: percentage($-gutter-ratio);
+    $-column-width: 100 - percentage($-gutter-ratio);
+    $-column-combined-width: percentage($-column-ratio);
+  }
+
+  $column-gutter:  $-column-width + $column-gutter;
+  $-block-height: (($grid-baseline + 1) * $-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) $-column-width,
+        transparent $-column-width,
+        transparent $column-gutter),
+      // Blocks
+      -webkit-linear-gradient(
+        transparent ($-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:
+      $column-gutter $grid-baseline + 1,     // v-rhythm
+      $-column-combined-width 10px,           // column
+      $column-gutter ($-block-height + 1);  // block
+  }
+}
+
+
+// Show grid guides on all grid containers
+@mixin GRID-GUIDES($el: container, $position: back) {
+  %l-#{$el} {
+    @include show-grid-guides($position: $position);
+  }
+}
+
+
+// Show grid guide on element
+@mixin show-grid-guides($position: back) {
+  @include grid-render-guides;
+
+  &::before {
+    &%l-row {
+      $-offset: grid-column-gutter()/2;
+
+      @if $grid-type == fluid {
+        $-offset: grid-percentage($-offset);
+      }
+      margin: 0 $-offset;
+    }
+    &%l-gutterless {
+      margin: 0;
+    }
+
+    // Grid placement (back by default)
+    @if $position == front {
+      z-index: 999;
+    } @else {
+      z-index: -1;
+    }
+  }
+
+  &%l-container %l-container::before {
+    content: none;
+  }
+  &%l-row %l-row::before {
+    content: none;
+  }
+}