stratum 0.2.4 → 0.3.0

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

@@ -0,0 +1,83 @@
+@import "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) {
+  @extend %-clearfix;
+  @include box-sizing(content-box);
+  width: $width;
+  margin: {
+    left: auto;
+    right: auto;
+  }
+}
+
+
+// Grid row
+// $type: pixel | fluid
+@mixin grid-row($type: $grid-type) {
+  @extend %-clearfix;
+  @include grid-gutters($type, row);
+  clear: both;
+}
+
+
+// Make grid column
+@mixin grid-column {
+  @include box-sizing(border-box);
+  min-height: 1px;
+  float: left;
+}
+
+
+// Grid gutters
+// $element: column | row
+@mixin grid-gutters($type: $grid-type, $element: column) {
+  $-gutter: 0;
+  $-modifier: if($element == column, 1, -1);
+
+  @if $type == fluid {
+    $-gutter: grid-percentage($grid-half-gutter * $-modifier);
+  } @else if $type == pixel {
+    $-gutter: $grid-half-gutter * $-modifier;
+  }
+
+  margin-left:  $-gutter;
+  margin-right: $-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, $total-columns: $grid-total-columns) {
+  width: grid-columns-width($span, $grid-column, $gutter, $type, $total-columns);
+}
+
+
+// Offset column
+@mixin grid-column-offset($direction, $span: 1, $grid-type: $grid-type) {
+  $-offset: grid-columns-width($span, $type: $grid-type);
+  $-gutter: $grid-gutter;
+
+  // Fluid grid
+  @if $grid-type == fluid {
+    $-gutter: grid-percentage($-gutter);
+  }
+
+  #{$direction}: -($-offset + $-gutter);
+}
+
+
+// INTERNAL
+// Clearfix
+%-clearfix {
+  @include group;
+}

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

@@ -0,0 +1,5 @@
+@import "semantics/core";
+@import "semantics/overrides";
+@import "semantics/subdivisions";
+@import "semantics/offsets";
+@import "semantics/nested";

data/assets/stylesheets/layout/grid/semantics/_core.scss

@@ -0,0 +1,96 @@
+// Grid core components
+// --------------------
+
+// These placeholder selectors 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.
+
+// You should think about this file as an API for grid mixins and functions.
+// As long as correct grid elements are used, defined in this file, building
+// grid-based layout should be a painless process.
+
+// For examples of usage of these components see `layout/scaffolding.scss`
+
+// 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-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 gutterless
+// %l-gutterless          –  Convert grid row into gutterless (no column margins)
+//
+// %l-col                 –  Column: unit of the grid
+// %l-col-<$i>            –  Column size (e.g. `%l-col-4` spans four single columns, including three gutters)
+//
+// %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).
+
+
+// Grid anatomy
+%l-container {
+  @include grid-container;
+
+  %l-container { width: auto    }
+
+  %l-row { @include grid-row    }
+  %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 & {
+    float: right;
+  }
+}
+
+
+// Defines column margins
+// Only applied to descendants of rows
+%l-row %l-col {
+  @include grid-gutters;
+}
+
+
+// Column sizes
+@for $i from 1 through $grid-total-columns {
+  %l-col-#{$i} {
+    // Columns with gutters
+    %l-row & {
+      @include grid-column-width($i, $grid-type);
+    }
+
+    // Columns without gutters
+    %l-container &,
+    %l-gutterless & {
+      @include grid-column-width($i, $grid-type, $gutter: 0);
+    }
+  }
+}
+
+
+%l-container {
+  // Gutterless row
+  %l-gutterless,
+  %l-gutterless %l-row {
+    @extend %-drop-margins;
+  }
+
+  // Gutterless columns
+  %l-gutterless %l-col {
+    @extend %-drop-margins;
+  }
+}
+
+
+// INTERNAL
+// Placeholder for gutterless columns
+%-drop-margins {
+  @include grid-gutters(none);
+}

data/assets/stylesheets/layout/grid/semantics/_nested.scss

@@ -0,0 +1,34 @@
+// Nested grids
+// ------------
+
+
+$grid-nested-grids: true;
+
+%l-container {
+  // Always set nested grids to fluid
+  &%l-container %l-container %l-row {
+    @include grid-row(fluid);
+  }
+}
+
+
+// Column sizes (within columns)
+@for $i from 1 through $grid-total-columns {
+  %l-col-#{$i} {
+    %l-grid-fluid & {
+      @for $n from 1 through $grid-total-columns {
+        %l-row %l-col-#{$n} {
+          @include grid-column-width($n, fluid, $total-columns: $i);
+          @include grid-gutters(fluid);
+        }
+      }
+    }
+    @if $grid-type == fluid {
+      @for $n from 1 through $grid-total-columns {
+        %l-row %l-col-#{$n} {
+          @include grid-column-width($n, fluid, $total-columns: $i);
+        }
+      }
+    }
+  }
+}

data/assets/stylesheets/layout/grid/semantics/_offsets.scss

@@ -0,0 +1,50 @@
+// Column offsets
+// --------------
+
+// l-col-pull-<$i>        –  Pull column to left by <column size>
+// l-col-push-<$i>        –  Push column to right by <column size>
+
+
+$grid-offsets: true;
+
+
+// Column sizes
+@for $i from 1 through $grid-total-columns {
+  %l-col-push-#{$i} {
+    @extend %-col-positioned;
+
+    %l-container & {
+      @include grid-column-offset(right, $i);
+    }
+  }
+
+  %l-col-pull-#{$i} {
+    @extend %-col-positioned;
+
+    %l-container & {
+      @include grid-column-offset(left, $i);
+    }
+  }
+
+  %l-grid-pixel %l-row %l-col-pull-#{$i} {
+    @include grid-column-offset(left, $i, pixel);
+  }
+
+  %l-grid-pixel %l-row %l-col-push-#{$i} {
+    @include grid-column-offset(right, $i, pixel);
+  }
+
+  %l-grid-fluid %l-row %l-col-pull-#{$i} {
+    @include grid-column-offset(left, $i, fluid);
+  }
+
+  %l-grid-fluid %l-row %l-col-push-#{$i} {
+    @include grid-column-offset(right, $i, fluid);
+  }
+}
+
+
+// INTERNAL
+%-col-positioned {
+  position: relative;
+}

data/assets/stylesheets/layout/grid/semantics/_overrides.scss

@@ -0,0 +1,71 @@
+// Grid overrides
+// --------------
+
+// %l-grid-pixel       –  Force pixel grid (applied to grid container)
+// %l-grid-fluid       –  Force fluid grid (applied to grid container)
+
+
+$grid-overrides: true;
+
+// Pixel
+%l-grid-pixel {
+  %l-row {
+    @include grid-gutters(pixel, row);
+
+    %l-col {
+      @include grid-gutters(pixel);
+    }
+
+    &%l-gutterless {
+      @include grid-gutters(none);
+
+      %l-col {
+        @include grid-gutters(none);
+      }
+    }
+  }
+}
+
+// Fluid
+%l-grid-fluid {
+  %l-row {
+    @include grid-gutters(fluid, row);
+
+    %l-col {
+      @include grid-gutters(fluid);
+    }
+
+    &%l-gutterless {
+      @include grid-gutters(none);
+
+      %l-col {
+        @include grid-gutters(none);
+      }
+    }
+  }
+}
+
+// Column sizes
+@for $i from 1 through $grid-total-columns {
+  %l-col-#{$i} {
+    // Pixel
+    %l-grid-pixel %l-row & {
+      @include grid-column-width($i, pixel);
+    }
+    // Pixel no gutters
+    %l-grid-pixel &,
+    %l-grid-pixel %l-gutterless & {
+      @include grid-column-width($i, pixel, $gutter: 0);
+    }
+
+    // Fluid
+    %l-grid-fluid %l-row & {
+      @include grid-column-width($i, fluid);
+    }
+    // Fluid no gutters
+    %l-grid-fluid &,
+    %l-grid-fluid %l-gutterless & {
+      @include grid-column-width($i, fluid, $gutter: 0);
+    }
+  }
+}

data/assets/stylesheets/layout/grid/semantics/_subdivisions.scss

@@ -0,0 +1,16 @@
+// Column subdivisions
+// -------------------
+
+// %l-col-<n>-of-<n>   -  column size of parent total (e.g. 2-of-8 is 2/8 and equals 25%)
+
+
+$grid-subdivisions: true;
+
+// Column size ratios
+@for $i from 1 through $grid-total-columns {
+  @for $n from 1 through $grid-total-columns {
+    %l-col-#{$i}-of-#{$n} {
+      @include grid-column-width($i, fluid, $gutter: 0, $total-columns: $n);
+    }
+  }
+}

data/assets/stylesheets/layout/scaffolding.scss

@@ -1,83 +1,136 @@
 // Scaffolding stylesheet
-// ============================================================================
+// ----------------------
+
 // Exports `l-` prefixed classes useful for prototyping layouts
 
 
-// Grid container & rows
-.l-container {
-  @extend %l-container;
-  @extend %l-last-col-right;
+// Create variables
+$grid-nested-grids: null !default;
+$grid-offsets:      null !default;
+$grid-overrides:    null !default;
+$grid-subdivisions: null !default;
 
-  .l-row {
-    @extend %l-row;
-  }
-  .l-col {
-    @extend %l-col;
-  }
+$grid-scaffolding-debug:  true  !default;
 
-  // # Modifiers
+// DEBUG
 
-  // Grid types
-  .l-row.m-gutterless {
-    @extend %l-gutterless;
-  }
-  &.m-pixel {
-    @extend %l-grid-pixel;
+// Helper to warn of disabled features
+%-feature-warning {
+  position: relative !important;
+
+  &::before {
+    @include position(absolute, fill);
+    display: block !important;
+    margin: 0 !important;
+    text-shadow: 0 -1px 0 rgba(white, .4) !important;
+    background: rgba(red, .8) !important;
+    padding-top: 20px !important;
+    font-size: 20px !important;
+    text-align: center !important;
+    color: black !important;
+    z-index: 10 !important;
   }
-  &.m-fluid {
-    @extend %l-grid-fluid;
+}
+@mixin feature-warning($text) {
+  @extend %-feature-warning;
+
+  &::before {
+    content: $text !important;
   }
+}
 
-  // Grid guides
-  &.m-show-guides {
-    @include show-grid-guides;
+// SCAFFOLDING
 
-    &.m-front {
-      @include show-grid-guides(front);
-    }
-  }
+// Grid container & rows
+.l-container {
+  @extend %l-container;
+  @extend %l-last-col-right;
+
+  .l-row { @extend %l-row }
+  .l-col { @extend %l-col }
+}
+
+
+// Gutterless row
+.l-row.m-gutterless {
+  @extend %l-gutterless;
 }
 
+
 // Span-based column modifiers
 @for $i from 1 through $grid-total-columns {
-  .l-col {
-    &.m-#{$i} {
-      @extend %l-col-#{$i};
-    }
+  // Columns
+  .m-#{$i} {
+    @extend %l-col-#{$i};
+  }
 
-    &.m-from-left-#{$i} {
-      @extend %l-col-from-left-#{$i};
+  @if $grid-offsets {
+    .m-push-#{$i} {
+      @extend %l-col-push-#{$i};
     }
-    &.m-to-left-#{$i} {
-      @extend %l-col-to-left-#{$i};
+    .m-pull-#{$i} {
+      @extend %l-col-pull-#{$i};
     }
+  } @else if $grid-scaffolding-debug {
+    .m-push-#{$i},
+    .m-pull-#{$i} {
+      @include feature-warning("`$grid-offsets` is not enabled");
+    }
+  }
+}
 
-    &.m-from-right-#{$i} {
-      @extend %l-col-from-right-#{$i};
+
+// - Optional
+// Grid type overrides
+.l-container {
+  @if $grid-overrides {
+    &.m-pixel {
+      @extend %l-grid-pixel;
     }
-    &.m-to-right-#{$i} {
-      @extend %l-col-to-right-#{$i};
+    &.m-fluid {
+      @extend %l-grid-fluid;
+    }
+  } @else if $grid-scaffolding-debug {
+    &.m-pixel,
+    &.m-fluid {
+      @include feature-warning("`$grid-overrides` is not enabled");
     }
   }
 }
 
-// fractional column modifiers
-@for $total from 1 through $grid-total-columns {
-  .l-col {
-    &.m-1-of-#{$total} {
-      @extend %l-col-1-of-#{$total};
-    }
-    @for $col from 1 through $total {
-      &.m-#{$col}-of-#{$total} {
-        @if $total > $col {
-          @extend %l-col-#{$col}-of-#{$total};
+
+// - Optional
+// Column subdivisions
+@if $grid-subdivisions {
+  @for $total from 1 through $grid-total-columns {
+    .l-col {
+      &.m-1-of-#{$total} {
+        @extend %l-col-1-of-#{$total};
+      }
+      @for $col from 1 through $total {
+        &.m-#{$col}-of-#{$total} {
+          @if $total > $col {
+            @extend %l-col-#{$col}-of-#{$total};
+          }
         }
       }
     }
   }
 }
 
-// Centre column
-.l-col.m-centered {
-  @extend %l-col-center;
+
+@if $grid-scaffolding-debug and not $grid-nested-grids {
+  .l-col > .l-container {
+    @include feature-warning("`$grid-nested-grids` is not enabled");
+  }
+}
+
+
+// Grid guides
+.m-show-guides {
+  @include show-grid-guides;
+  // Bring guides to front
+  &.m-front {
+    @include show-grid-guides(front);
+  }
 }

data/bin/stratum

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

data/lib/stratum/generator.rb

@@ -0,0 +1,74 @@
+require_relative 'version'
+
+require 'pathname'
+require 'fileutils'
+require 'thor'
+
+module Stratum
+  class Generator < Thor
+    map ['-v', '--version'] => :version
+    
+    desc 'install', 'Install Stratum (./stratum); `stratum help install` for options'
+    option :path, :type => :string, :aliases => '-p', :banner => './', :desc => 'Installation path'
+    option :force, :type => :boolean, :aliases => '-f', :desc => 'Force installation (overwrite existing)'
+    def install
+      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'
+    def version
+      say "Stratum #{Stratum::VERSION}"
+    end
+
+    private
+
+    def stratum_exists?
+      install_path.exist?
+    end
+
+    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(assets_stylesheets, install_path)
+    end
+
+    def assets_stylesheets
+      current_dir = File.dirname(File.dirname(__FILE__))
+      stylesheets = File.join(current_dir, "..", "assets", "stylesheets")
+
+      Dir["#{stylesheets}/*"]
+    end
+  end
+end

data/lib/stratum/version.rb

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