stratum 0.1.1 → 0.2.0

data/assets/stylesheets/layout/_grid.scss

@@ -1,228 +1,26 @@
-// -----------------------------------------------------------------------------
-// • 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)
-//
-// -----------------------------------------------------------------------------
+// Grid defaults settings
+// ----------------------
 
-@import "functions";
-@import "responsive";
-@import "../misc/clearfix";
+// Set these settings in `stratum.scss`
 
-// Grid defaults
-// --------------
+$grid-responsive:       false       !default;
 
-$grid-medium:         980px       !default;
-$grid-large:          1200px      !default;
+$grid-size:             980px       !default;
 
-$grid-type:           pixel       !default;
-$grid-total-columns:  12          !default;
-$grid-baseline:       20px        !default;
-$grid-desired-gutter: 20px        !default;
+$grid-type:             fluid       !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);
+// Debug settings
+$grid-guides:           true        !default;
+$grid-guides-color:     #c84e5b     !default;
+$grid-guides-opacity:   .2          !default;
+$grid-guides-position:  back        !default;
 
-$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;
+@import "grid-functions";
 
-// @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;
-  }
-}
+@import "grid-mixins";
+@import "grid-semantics";
+@import "grid-guides";

data/assets/stylesheets/layout/_responsive.scss

@@ -1,3 +1,5 @@
+$grid-responsive: true;
+
 @mixin smartphone {
   @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
     @content;

data/assets/stylesheets/layout/scaffolding.scss

@@ -1,114 +1,51 @@
-@import "grid";
+// # Scaffolding stylesheet
+// Exports `l-` prefixed classes useful for prototyping layouts
 
-// = Rows
+// Grid container & 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);
-  }
-}
-
+  @extend %l-container;
+  @extend %l-last-col-right;
 
-// = 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);
-}
+  > .l-row {
+    @extend %l-row;
+  }
 
+  &.m-pixel {
+    @extend %l-grid-pixel;
+  }
 
-// = 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);
-    }
+  &.m-fluid {
+    @extend %l-grid-fluid;
   }
-  // Ad hoc flexible grid
-  .l-flexible .m-#{$i} {
-    @include grid-column-width-flexi($i, false);
+
+  .l-col {
+    @extend %l-col;
   }
-  .m-flexible.m-collapse .m-#{$i},
-  .l-container > .m-#{$i} {
-    @include grid-column-width-flexi($i, true);
+
+  &.m-marginless {
+    @extend %l-marginless;
   }
 }
 
-
-// = Offsets:
+// Grid columns
 @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);
+  .l-col {
+    &.m-#{$i} {
+      @extend %l-col-#{$i};
     }
-  }
-  // 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);
+    &.m-from-left-#{$i} {
+      @extend %l-col-from-left-#{$i};
+    }
+    &.m-to-left-#{$i} {
+      @extend %l-col-to-left-#{$i};
+    }
 
-  @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;
+    &.m-from-right-#{$i} {
+      @extend %l-col-from-right-#{$i};
+    }
+    &.m-to-right-#{$i} {
+      @extend %l-col-to-right-#{$i};
     }
   }
 }
-

data/assets/stylesheets/utils/_group.scss

@@ -0,0 +1,19 @@
+// Group floats (clearfix)
+// ============================================================================
+
+// `$prevent-margin-collapse` adds `::before` pseudo element
+// which prevents margins from collapsing (much like `overflow: hidden`)
+
+@mixin group($prevent-margin-collapse: false) {
+  @if $prevent-margin-collapse {
+    &::before {
+      content: " ";
+      display: table;
+    }
+  }
+  &::after {
+    content: " ";
+    display: table;
+    clear: both;
+  }
+}

data/assets/stylesheets/utils/_vendor-prefix.scss

@@ -0,0 +1,18 @@
+@mixin vendor-prefix($property, $value, $prefixes) {
+  $allowed-prefixes: moz, webkit, ms, o, spec;
+
+  @each $prefix in $prefixes {
+    $result: invalid;
+
+    @each $allowed-prefix in $allowed-prefixes {
+      @if $prefix == $allowed-prefix {
+        $result: if($prefix == "spec", "", "-#{$prefix}-");
+      }
+    }
+    @if($result != invalid) {
+      #{$result}#{$property}: $value;
+    } @else {
+      @warn("Prefix '-#{$prefix}' is invalid");
+    }
+  }
+}

data/lib/stratum.rb

@@ -2,17 +2,41 @@ 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
+		desc 'install', 'Install Stratum (./stratum); `stratum help install` for options'
+		option :path, :type => :string, :aliases => '-p', :banner => './', :desc => 'Installation path'
+		option :force, :aliases => '-f', :type => :boolean, :desc => 'Force installation (overwrite existing)'
 		def install
-			copy_files
-			puts "Stratum installed to #{install_path}"
+			if install_path.exist? && !options[:force]
+				puts "Stratum installation already exists. Use -f to force"
+			else
+				copy_files
+				puts "Stratum installed to #{install_path}"
+			end
+		end
+
+		desc 'update', 'Update Stratum'
+		def update
+			remove(true)
+		end
+
+		desc 'remove', 'Remove Stratum'
+		def remove(replace = false)
+			if stratum_exists?
+				FileUtils.rm_rf("stratum")
+				if replace
+					copy_files
+					puts "Stratum updated"
+				else
+					puts "Stratum has been removed"
+				end
+			else
+				puts "Stratum installation is not found in current directory"
+			end
 		end
 
 		desc 'version', 'Show Stratum version'
@@ -22,6 +46,10 @@ module Stratum
 
 		private
 
+		def stratum_exists?
+			install_path.exist?
+		end
+
 		def install_path
 			@install_path ||= if options[:path]
 				Pathname.new(File.join(options[:path], 'stratum'))
@@ -32,10 +60,10 @@ module Stratum
 
 		def copy_files
 			FileUtils.mkdir_p(install_path)
-			FileUtils.cp_r(stratum_stylesheets, install_path)
+			FileUtils.cp_r(assets_stylesheets, install_path)
 		end
 
-		def stratum_stylesheets
+		def assets_stylesheets
 			current_dir = File.dirname(File.dirname(__FILE__))
 			stylesheets = File.join(current_dir, "assets", "stylesheets")