stratum 0.1.1

data/.gitignore

@@ -0,0 +1,3 @@
+*gem
+*swp
+.sass-cache

data/assets/stylesheets/_stratum.scss

@@ -0,0 +1,26 @@
+@charset "utf-8";
+
+// © 2012 Tyom Semonov <mail@tyom.net>
+// Inspired by Zurb's Foundation & Gridulator.
+
+// -----------------------------------------------------------------------------
+// Stratum settings
+// -----------------------------------------------------------------------------
+//
+// Grid
+//
+// $grid-medium:         940px;
+// $grid-large:          1200px;
+// $grid-guides:               true;
+// $grid-guides-color:         blue;
+// $grid-guides-opacity:       .1;
+// $grid-guides-position:      front;
+$grid-total-columns:        12;
+$grid-desired-gutter:       20px;
+// $grid-baseline:             30px;
+// $grid-type:                 flexible;
+// -----------------------------------------------------------------------------
+
+@import "layout/grid";
+@import "layout/scaffolding";
+// @import "layout/grid-debug";

data/assets/stylesheets/layout/_functions.scss

@@ -0,0 +1,60 @@
+// -----------------------------------------------------------------------------
+// • Functions                                      Tyom Semonov <mail@tyom.net>
+// -----------------------------------------------------------------------------
+// » grid-column-span-width($column-span, $column-width, $column-gutter)
+//   calculate merged columns with (including gutter)
+//    $column-span: <integer>    - number of columns
+//    $column-width              - with of single column
+//    $column-gutter             - column gutter
+//
+// » grid-single-column-width($grid-width, $total-columns, $gutter)
+//   calculate single column width for given container width and gutter width
+//    $row-width                 - width of columns container
+//    $total-columns: <integer>  - number of total columns
+//    $gutter                    - column gutter width
+//
+// » grid-column-gutter($grid-width, $desired)
+//   calculate gutter width from total grid width and desired approximate gutter width
+//    $grid-width                - total grid width
+//    $grid-gutter               - desired gutter width (will return closest)
+//
+// » number-to-word($number)
+//   return word for requested number
+//    $number <integer>          - number to convert
+// -----------------------------------------------------------------------------
+
+// $column-span, $column-width, $column-gutter
+// $container-margin is a multiplier. Set to 0 to exclude gutters from calculation
+@function grid-column-span-width($column-span, $column-width, $column-gutter) {
+  @return ceil($column-span * $column-width + ($column-span - 1) * $column-gutter);
+}
+
+// $grid-width, $total-columns, $gutter
+@function grid-single-column-width($grid-width, $total-columns, $gutter) {
+  @return ($grid-width - (($total-columns - 1) * $gutter)) / $total-columns;
+}
+
+// $grid-width, $desired
+@function grid-column-gutter($grid-width, $desired) {
+  $gutter: 0px;
+  $column: 1;
+  // Find a round gutter width
+  @while $column > $gutter {
+    $column: grid-single-column-width($grid-width, $grid-total-columns, $gutter);
+
+    @if $column % 1 == 0 {
+      $range-from:  $desired - 6;
+      $range-to:    $desired + 20;
+      $within-range: $gutter >= $range-from and $gutter <= $range-to;
+      // Find gutter within desired range
+      @if $within-range {
+        @return $gutter;
+      }
+    }
+    $gutter: $gutter + 1;
+  }
+}
+
+@function grid-calculate-percentage($width, $grid-width: ($grid-medium + $grid-gutter-medium)) {
+  @return percentage($width / $grid-width);
+}

data/assets/stylesheets/layout/_grid.scss

@@ -0,0 +1,228 @@
+// -----------------------------------------------------------------------------
+// • Stratum Grid Mixins                            Tyom Semonov <mail@tyom.net>
+// -----------------------------------------------------------------------------
+// » grid-row($type: outer)
+//   Converts into grid row
+//    $type: outer       - first outer containing row
+//    $type: inner       - inner container rows
+//
+// » grid-column($variation: normal)
+//   Converts into grid column (generic for any size)
+//    $column: last      - flushed right,
+//    $column: end       - last but follows previous columns
+//    $column: inner     - column in inner row
+//    $column: centered  - centered column
+//
+// » grid-column-width($span: 1)
+//   Renders column width (specific size)
+// » grid-offset-by-column($span: 1, $direction: left)
+//   Calculates column offset by $span columns
+//    $span: <integer>    - span number of columns
+//    $direction: left    - offset from left
+//    $direction: right   - offset from right
+//
+// » grid-column-borders($color: rgba(black, .2))
+//   Renders borders on descendent columns
+//    $color: value       - border color (#hex or Sass colour function)
+//
+// -----------------------------------------------------------------------------
+
+@import "functions";
+@import "responsive";
+@import "../misc/clearfix";
+
+// Grid defaults
+// --------------
+
+$grid-medium:         980px       !default;
+$grid-large:          1200px      !default;
+
+$grid-type:           pixel       !default;
+$grid-total-columns:  12          !default;
+$grid-baseline:       20px        !default;
+$grid-desired-gutter: 20px        !default;
+
+$grid-gutter-medium:  grid-column-gutter($grid-medium, $grid-desired-gutter);
+$grid-gutter-large:   grid-column-gutter($grid-large, $grid-desired-gutter);
+$grid-half-gutter-m:  $grid-gutter-medium / 2;
+$grid-half-gutter-l:  $grid-gutter-large / 2;
+$grid-column-medium:  grid-single-column-width($grid-medium, $grid-total-columns, $grid-gutter-medium);
+$grid-column-large:   grid-single-column-width($grid-large, $grid-total-columns, $grid-gutter-large);
+
+$grid-column: $grid-column-medium  !default;
+
+$grid-guides:            false     !default;
+$grid-guides-color:      #c84e5b   !default;
+$grid-guides-opacity:    .2        !default;
+$grid-guides-position:   back      !default;
+
+// @debug "gutter medium:" $grid-gutter-large;
+// @debug "column medium:" $grid-column-large;
+
+// Mixins
+// ------
+
+// Grid container to set grid bounds
+@mixin grid-container($width: $grid-medium) {
+  @include clearfix;
+  @if $grid-type != flexible {
+    width: $width;
+    min-width: $width;
+    max-width: 100%;
+    @include large-screen {
+      width: $grid-large;
+    }
+  }
+  margin: {
+    left: auto;
+    right: auto;
+  }
+}
+
+// Converts element into grid row
+@mixin grid-row($variant: inner) {
+  @include clearfix;
+  @include grid-column-margins($variant, -1);
+}
+
+// Converts into grid column
+// $variation - can be normal, last, end, inner or centered
+@mixin grid-column($variation: normal) {
+  @if $variation == last {
+    float: right;
+  } @else if $variation == end {
+    float: left;
+  } @else if $variation == centered {
+    float: none;
+  } @else {
+    min-height: 1px;
+    float: left;
+  }
+  @include grid-column-margins($variation);
+}
+
+// Apply column margins
+@mixin grid-column-margins($variation, $modifier: 1) {
+  @if $variation != collapse {
+    @if $variation == centered {
+      margin-left:  auto;
+      margin-right: auto;
+    } @else if $variation == flexible {
+      margin-left:  grid-calculate-percentage($grid-half-gutter-m * $modifier);
+      margin-right: grid-calculate-percentage($grid-half-gutter-m * $modifier);
+    } @else {
+      @if $variation == inner {
+        @if $grid-type == flexible {
+          margin-left:  grid-calculate-percentage($grid-half-gutter-m * $modifier);
+          margin-right: grid-calculate-percentage($grid-half-gutter-m * $modifier);
+        } @else {
+          margin-left:  $grid-half-gutter-m * $modifier;
+          margin-right: $grid-half-gutter-m * $modifier;
+
+          @include large-screen {
+            margin-left:  $grid-half-gutter-l * $modifier;
+            margin-right: $grid-half-gutter-l * $modifier;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Calculate single column width (in pixels) multipled by number of columns it spans (indluding gutters)
+@mixin grid-column-width($span: 1) {
+    width: grid-column-span-width($span, $grid-column-medium, $grid-gutter-medium);
+    @include large-screen {
+      width: grid-column-span-width($span, $grid-column-large, $grid-gutter-large);
+    }
+}
+
+// Calculate single column width in percent
+@mixin grid-column-width-flexi($span: 1, $collapse-margins: false) {
+  // Calculate width in percentages from the total grid width and gutter (based on medium),
+  // offset by provided gutter width
+  @if $collapse-margins {
+    width: grid-calculate-percentage(grid-column-span-width($span, $grid-column-medium + $grid-gutter-medium, 0));
+  } @else {
+    width: grid-calculate-percentage(grid-column-span-width($span, $grid-column-medium, $grid-gutter-medium));
+  }
+}
+
+
+// Calculate offset width based on number of columns it spans (including gutters)
+// $span <number>, $direction: <left/right>, $type <positive/negative>
+@mixin grid-offset-by-column($span: 1, $direction: left, $type: positive, $first: false) {
+  $offset: 0;
+
+  @if $type == positive {
+    // normal offset
+    $offset: grid-column-span-width($span, $grid-column-medium, $grid-gutter-medium) + ($grid-gutter-medium * 3 / 2);
+  } @else {
+    // negative offset
+    // left
+    @if $direction == left {
+      $offset: -(grid-column-span-width($span, $grid-column-medium, $grid-gutter-medium) + ($grid-gutter-medium));
+      @if $first {
+        $offset: $offset + $grid-gutter-medium / 2;
+      }
+    // right
+    } @else {
+      $offset: -(grid-column-span-width($span, $grid-column-medium, $grid-gutter-medium) + ($grid-gutter-medium / 2));
+      margin-left: abs($offset) + $grid-gutter-medium * 3 / 2;
+    }
+  }
+  margin-#{$direction}: $offset;
+
+  @include large-screen {
+    @if $type == positive {
+      // normal offset
+      $offset: grid-column-span-width($span, $grid-column-large, $grid-gutter-large) + ($grid-gutter-large * 3 / 2);
+    } @else {
+      // negative offset
+      // left
+      @if $direction == left {
+        $offset: -(grid-column-span-width($span, $grid-column-large, $grid-gutter-large) + ($grid-gutter-large * $span));
+        @if $first {
+          $offset: $offset + $grid-gutter-large / 2;
+        }
+      // right
+      } @else {
+        $offset: -(grid-column-span-width($span, $grid-column-large, $grid-gutter-large) + ($grid-gutter-large / 2));
+        margin-left: abs($offset) + ($grid-gutter-large * 2) + ($grid-gutter-large / 2);
+      }
+    }
+    margin-#{$direction}: $offset;
+  }
+
+  @if $grid-type == flexible {
+    $offset: grid-calculate-percentage(grid-column-span-width($span, $grid-column-medium, $grid-gutter-medium) + ($grid-gutter-medium * 3 / 2));
+  }
+}
+
+
+// Renders borders between columns (except the first and the last ones)
+// $grid-size, $color
+@mixin grid-column-borders($column-gutter, $color: #ccc, $style: solid, $size: 1px) {
+  .col {
+    position: relative;
+  }
+  .col:before, .col:after {
+    content: "";
+    position: absolute;
+    width: 1px;
+    top: 0;
+    bottom: 0;
+    border: 0 $style $color;
+  }
+  .col:before {
+    border-left-width: $size;
+    left: -$column-gutter/2 - $size/2 - 1;
+  }
+  .col:after {
+    border-right-width: $size;
+    right: -$column-gutter/2 - $size/2 - 1;
+  }
+  .col:first-child:before, .col:last-child:after {
+    display: none;
+  }
+}

data/assets/stylesheets/layout/_responsive.scss

@@ -0,0 +1,50 @@
+@mixin smartphone {
+  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+    @content;
+  }
+}
+@mixin smartphone-landscape {
+  @media only screen and (min-width : 321px) {
+    @content;
+  }
+}
+@mixin smartphone-portrait {
+  @media only screen and (max-width : 320px) {
+    @content;
+  }
+}
+@mixin tablet {
+  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
+    @content;
+  }
+}
+@mixin tablet-landscape {
+  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: landscape) {
+    @content;
+  }
+}
+@mixin tablet-portrait {
+  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: portrait) {
+    @content;
+  }
+}
+@mixin retina {
+  @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
+    @content;
+  }
+}
+@mixin medium-screen {
+  @media only screen and (min-width : 1024px) {
+    @content;
+  }
+}
+@mixin large-screen {
+  @media only screen and (min-width : 1300px) {
+    @content;
+  }
+}
+@mixin x-large-screen {
+  @media only screen and (min-width : 1824px) {
+    @content;
+  }
+}

data/assets/stylesheets/layout/grid-debug.scss

@@ -0,0 +1,92 @@
+// -----------------------------------------------------------------------------
+// • Pixel Grid Guides Mixins  (Tyom Semonov <mail@tyom.net>)
+// -----------------------------------------------------------------------------
+// » grid-show-guides($col-width: $grid-column, $block-size: 9, $color: $grid-guides-color, $opacity: .8, $position: $grid-guides-position)
+//   Renders grid guides
+//    $column-width       - width of columns
+//    $block-size         - height of module blocks
+//    $color              - grid colour (#hex or Sass colour function)
+//    $opacity            - grid opacity
+//    $position:back      - place grid behind page elements
+//    $position:front     - place grid in front of page elements
+// -----------------------------------------------------------------------------
+
+// Draws grid guides
+// $grid-size, $block-size,$color, $opacity, $position
+@mixin grid-show-guides($grid-size: $grid-medium, $block-size: 9, $color: $grid-guides-color, $opacity: $grid-guides-opacity, $position: $grid-guides-position, $grid-type: pixel) {
+
+  $column-gutter: grid-column-gutter($grid-size, $grid-desired-gutter);
+  $column-width:  grid-single-column-width($grid-size, $grid-total-columns, $column-gutter);
+
+  @if $grid-type == flexible {
+    $column-gutter: grid-calculate-percentage($column-gutter);
+    $column-width:  grid-calculate-percentage($column-width);
+  }
+
+  $combined-width:  $column-width + $column-gutter;
+  $block-height: (($grid-baseline + 1) * $block-size) + $grid-baseline;
+
+  position: relative;
+
+  &:before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    @include background(
+     // Baseline (v-rhythm)
+        linear-gradient(transparent $grid-baseline, rgba(white, $opacity) $grid-baseline),
+     // Columns
+        linear-gradient(left, rgba($color, $opacity),
+                              rgba($color, $opacity) $column-width,
+                              transparent $column-width,
+                              transparent $combined-width
+                              ),
+     // Blocks
+        linear-gradient(transparent ($block-height - $grid-baseline), rgba(white, $opacity / 1.2) $grid-baseline),
+     // Base colour
+        linear-gradient(rgba($color, $opacity), rgba($color, $opacity))
+    );
+    background-size: $combined-width $grid-baseline + 1,  // v-rhythm
+                     $combined-width 10px,                // column
+                     $combined-width ($block-height + 1); // block
+
+    @if $grid-type == flexible {
+      // Offset column by half gutter
+      background-position: 0 0, -($column-gutter/4) 0, 0 0;
+    }
+
+    // Grid placement (back by default)
+    @if $position == front {
+      z-index: 999;
+    } @else {
+      z-index: -1;
+    }
+  }
+}
+
+// Grid debugging
+.show-grid {
+  @include grid-show-guides($grid-medium);
+
+  @include large-screen {
+    @include grid-show-guides($grid-large);
+  }
+  &.flexible {
+    @include grid-show-guides($grid-type: flexible);
+  }
+  &.front:before {
+    z-index: auto;
+  }
+}
+
+// Show grid on .container if enabled
+@if $grid-guides {
+  .container {
+    @extend .show-grid;
+    .row:before {
+      display: none;
+    }
+  }
+}

data/assets/stylesheets/layout/scaffolding.scss

@@ -0,0 +1,114 @@
+@import "grid";
+
+// = Rows
+.l-container {
+  @include grid-container;
+  .l-row {
+    @include grid-row;
+  }
+  // Flexible rows
+  .m-flexible, .m-flexible .l-row {
+    min-width: 0;
+    @include grid-row(flexible);
+  }
+}
+
+
+// = Columns
+.l-col {
+  @include grid-column;
+}
+// Centred column
+.l-col.m-centered, .l-col.centered:last-child {
+  @include grid-column(centered);
+}
+// Last column
+.l-col + .l-col:last-child, .l-col.m-last {
+  @include grid-column(last);
+}
+// Ending column (follows others)
+.l-col + .l-col.m-end {
+  @include grid-column(end);
+}
+// Columns in the inner row
+.l-row .m-col {
+  @include grid-column-margins(inner);
+}
+// Flexible columns
+.m-flexible .l-col {
+  @include grid-column-margins(flexible);
+}
+// Flexible columns with no margins
+.m-collapse .l-col, .l-container > .l-col {
+  @include grid-column-margins(flexible, 0);
+}
+
+
+// = Column sizes
+@for $i from 1 through $grid-total-columns {
+  .m-#{$i} {
+    @if $grid-type == pixel {
+      @include grid-column-width($i);
+    } @else {
+      @include grid-column-width-flexi($i);
+    }
+  }
+  // Ad hoc flexible grid
+  .l-flexible .m-#{$i} {
+    @include grid-column-width-flexi($i, false);
+  }
+  .m-flexible.m-collapse .m-#{$i},
+  .l-container > .m-#{$i} {
+    @include grid-column-width-flexi($i, true);
+  }
+}
+
+
+// = Offsets:
+@for $i from 1 through $grid-total-columns {
+  // From left
+  .l-row .l-col.m-#{$i}-from-left,
+  .l-row .l-col.m-#{$i}-from-left.m-end {
+    @include grid-offset-by-column($i, left);
+  }
+  // To left
+  .l-row .l-col.m-#{$i}-to-left,
+  .l-row .l-col.m-#{$i}-to-left.m-end {
+    @include grid-offset-by-column($i, left, negative);
+    &:first-child {
+      @include grid-offset-by-column($i, left, negative, $first: true);
+    }
+  }
+  // From right
+  .l-row .l-col.m-#{$i}-from-right,
+  .l-row .l-col.m-#{$i}-from-right.m-end,
+  .l-row .l-col.m-#{$i}-from-right.m-last {
+    @include grid-offset-by-column($i, right);
+  }
+  // To right
+  .l-row .l-col.m-#{$i}-to-right,
+  .l-row .l-col.m-#{$i}-to-right.m-end {
+    @include grid-offset-by-column($i, right, negative);
+  }
+}
+
+
+// Borders
+.m-column-borders {
+  @include grid-column-borders($grid-gutter-medium);
+
+  @include large-screen {
+    @include grid-column-borders($grid-gutter-large);
+  }
+  // Remove borders within row with borders
+  .m-no-borders {
+    margin: {
+      left: 0;
+      right: 0;
+    };
+    :before, :after {
+      border: 0;
+    }
+  }
+}
+

data/assets/stylesheets/misc/_clearfix.scss

@@ -0,0 +1,7 @@
+@mixin clearfix {
+  &:after {
+    content: " ";
+    display: table;
+    clear: both;
+  }
+}

data/assets/stylesheets/misc/_forms.scss

@@ -0,0 +1,12 @@
+@mixin placeholder-color($color: #999) {
+  &::-webkit-input-placeholder {
+    color: $color;
+    -webkit-font-smoothing: antialiased;
+  }
+  &:-moz-placeholder {
+    color: $color;
+  }
+  &:-ms-input-placeholder {
+    color: $color;
+  }
+}

data/bin/stratum

@@ -0,0 +1,5 @@
+#!/usr/bin/env ruby
+
+require_relative '../lib/stratum.rb'
+
+Stratum::Generator.start

data/lib/stratum.rb

@@ -0,0 +1,45 @@
+require_relative 'version.rb'
+require 'pathname'
+require 'fileutils'
+require 'thor'
+require 'pry'
+
+module Stratum
+	class Generator < Thor
+		map ['-v', '--version'] => :version
+
+		desc 'install', 'Install Stratum into current directory'
+		method_options :path => :string
+		def install
+			copy_files
+			puts "Stratum installed to #{install_path}"
+		end
+
+		desc 'version', 'Show Stratum version'
+		def version
+			say "Stratum #{Stratum::VERSION}"
+		end
+
+		private
+
+		def install_path
+			@install_path ||= if options[:path]
+				Pathname.new(File.join(options[:path], 'stratum'))
+			else
+				Pathname.new('stratum')
+			end
+		end
+
+		def copy_files
+			FileUtils.mkdir_p(install_path)
+			FileUtils.cp_r(stratum_stylesheets, install_path)
+		end
+
+		def stratum_stylesheets
+			current_dir = File.dirname(File.dirname(__FILE__))
+			stylesheets = File.join(current_dir, "assets", "stylesheets")
+
+			Dir["#{stylesheets}/*"]
+		end
+	end
+end

data/lib/version.rb

@@ -0,0 +1,3 @@
+module Stratum
+	VERSION = "0.1.1"
+end

data/stratum.gemspec

@@ -0,0 +1,13 @@
+Gem::Specification.new do |s|
+  s.name        = 'stratum'
+  s.version     = '0.1.1'
+  s.date        = '2013-01-19'
+  s.summary     = "A structural layer for your SASS"
+  s.description = "Stratum is a collection of SASS mixins and utilities for your web development needs."
+  s.authors     = ["Tyom Semonov"]
+  s.email       = 'tyom@semonov.com'
+  s.files       = `git ls-files | grep -v demo`.split("\n")
+  s.executables << 'stratum'
+  s.homepage    =
+    'http://rubygems.org/gems/stratum'
+end

metadata

@@ -0,0 +1,59 @@
+--- !ruby/object:Gem::Specification
+name: stratum
+version: !ruby/object:Gem::Version
+  version: 0.1.1
+  prerelease: 
+platform: ruby
+authors:
+- Tyom Semonov
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-01-19 00:00:00.000000000 Z
+dependencies: []
+description: Stratum is a collection of SASS mixins and utilities for your web development
+  needs.
+email: tyom@semonov.com
+executables:
+- stratum
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- assets/stylesheets/_stratum.scss
+- assets/stylesheets/layout/_functions.scss
+- assets/stylesheets/layout/_grid.scss
+- assets/stylesheets/layout/_responsive.scss
+- assets/stylesheets/layout/grid-debug.scss
+- assets/stylesheets/layout/scaffolding.scss
+- assets/stylesheets/misc/_clearfix.scss
+- assets/stylesheets/misc/_forms.scss
+- bin/stratum
+- lib/stratum.rb
+- lib/version.rb
+- stratum.gemspec
+homepage: http://rubygems.org/gems/stratum
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.15
+signing_key: 
+specification_version: 3
+summary: A structural layer for your SASS
+test_files: []