stratum 0.2.0 → 0.2.1

data/.gitignore

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

data/README.md

@@ -0,0 +1,69 @@
+Stratum
+=======
+
+Stratum is a Sass toolkit for Web Developers. Its goal is to get you started on a project in seconds and do all the heavy lifting, while you concentrate on the fun stuff.
+
+Stratum is installed from command line:
+
+`gem install stratum`
+
+Once you install gem you can install/update Stratum in directly in your project. Remember, Stratum is just a collection of Sass mixins and utilities. No external dependencies. Just drop it in your project and start using.
+
+---
+
+Command line
+------------
+
+The following commands are available:
+
+```
+stratum help        Show help on specific commands (e.g. stratum help install)
+
+stratum install     Install Stratum in `./stratum`
+	-p [--path=./]	   Installation path (current directory if omitted)
+	-f [--force]	   Force installation into existing directory
+
+stratum update      Update `./stratum` in the current directory
+
+stratum remove      Removed `./stratum` in the current directory
+
+stratum version     Show gem version
+    -v [--version]
+```
+
+Sass components
+---------------
+
+Stratum is written in SCSS version of Sass syntax. It consists of several main components and a number of utilities and helpers.
+
+* **Layout** – grids, scaffolding responsiveness
+* **Forms** - form elements
+* **CSS3** - mixins for cross-browser support of CSS3 properties
+* **Utils** - various utilities and helpers
+
+### Layout
+
+Stratum features a powerful grid system which comes with semantic definitions and scaffolding. Grid is available in fluid and pixel variants and can be mixed on the same page.
+
+#### The Grid
+
+Stratum's grid system is quite unique in that it doesn't expect you to calculate and define all its parameters (grid size, number of columns, column width and gutter width). Instead, it asks for only two concrete values *grid size* and *column count*. The third value, *gutter width* is a desired number, meaning that the exact round value will be calculated to fit the columns and gutters right within the specified width.
+
+For example, if you want to produce a standard **980px** grid with **12** columns:
+
+| Parameters      | Requirements   | Pixel         | Fluid
+|-----------------|----------------|---------------|-------------
+| gutter          | 20px (desired) | 16px (actual) | 6.72691%
+| column width    | --             | 67px          | 1.60642%
+
+Formula: *(col-number * col-width) + ((col-number - 1) * gutter-width)*  
+Result: *(12 * 67) + (11 * 16) = 980*
+
+Column and gutter widths are variable where grid width and column count are constant. Stratum adjusts the variables until they fit the requirement.
+
+Let's try another one, **11** columns in **934px** container.
+
+| Parameters      | Requirements   | Pixel         | Fluid
+|-----------------|----------------|---------------|-------------
+| gutter          | 13px (desired) | 12px (actual) | 7.82241%
+| column width    | --             | 74px          | 1.2685%

data/assets/stylesheets/_stratum.scss

@@ -1,22 +1,12 @@
-@charset "utf-8";
-
-// © 2012 Tyom Semonov <mail@tyom.net>
-// Inspired by Zurb's Foundation & Gridulator.
-
-// -----------------------------------------------------------------------------
-// Stratum settings
-// -----------------------------------------------------------------------------
-//
-// Grid
-//
-$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 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 "utils/vendor-prefix";
 @import "utils/group";

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

@@ -38,14 +38,35 @@
 
 // # 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) {
+@function grid-columns-width($column-span, $column-width: auto, $gutter: auto, $type: $grid-type, $has-row: true) {
   @if $column-width == auto {
     $column-width: grid-column-width();
   }
   @if $gutter == auto {
     $gutter: grid-column-gutter($grid-size, $grid-desired-gutter);
+  } @else if $gutter == 0 {
+    // Adjust gutter width to exclude two half gutters on each side of grid container
+    // TODO simplify this bit and make it more obvious what's going on here (why pixel and fluid affect gutterless column behaviour)
+    // 1 is required to remove 1 gutter width from total width due to "rowed" columns adding extra gutter width
+    // FIXME This modifiers logic should be reviewed soon. Need to extract the ratios somewhere globally and apply them
+    // where they are needed (e.g. grid guides)
+    // It only affects m-pixel/m-fluid container modifiers of "rowless" grids
+    // e.g. .m-gutterless.m-pixel (on global fluid grid)
+    $v-mod: if($grid-type == pixel, 0, 1);
+    @if $has-row {
+      $v-mod: if($grid-type == pixel, 1, 0);
+    }
+    $v-gutter-width-adjusted: ($grid-gutter * ($grid-total-columns - $v-mod)) / $grid-total-columns;
+    $column-width: $column-width + $v-gutter-width-adjusted;
   }
-  @return ceil($column-span * $column-width + ($column-span - 1) * $gutter);
+
+  $column-width: ceil($column-span * $column-width + ($column-span - 1) * $gutter);
+
+  @if $type == fluid {
+    $column-width: grid-percentage($column-width);
+  }
+
+  @return $column-width;
 }
 
 // # Convert percentage of width relative to the total width

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

@@ -18,7 +18,8 @@
     // 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;
+    // not entirely sure where $v-column-gutter/3 magic number comes from, but it's necessary to make it work
+    $v-column-ratio: ($v-column-width + $v-column-gutter) / ($grid-size - $v-column-gutter / 3);
 
     // Reset column size with percentages
     $v-column-gutter: percentage($v-gutter-ratio);
@@ -63,22 +64,30 @@
       $v-column-gutter $grid-baseline + 1,     // v-rhythm
       $v-column-relative-width 10px,           // column
       $v-column-gutter ($v-block-height + 1);  // block
+  }
+}
+
+// Show grid guides on all grid containers
+@mixin GRID-GUIDES($position: back) {
+  %l-container {
+    @include show-grid-guides($position);
+  }
+}
+
+// Show grid guide on element
+@mixin show-grid-guides($position: back) {
+  @include grid-render-guides($grid-size);
 
+  &::before {
     // Grid placement (back by default)
-    @if $grid-guides-position == front {
+    @if $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;
-    }
+  %l-container::before {
+    content: none;
   }
 }

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

@@ -39,12 +39,14 @@ $grid-column:         grid-column-width();
 // $modifier: 1   - normal (column) margins
 // $modifier: -1  - negative (row) margins
 @mixin grid-column-margins($type: $grid-type, $modifier: 1) {
-  $v-gutter:   auto;
+  $v-gutter: 0;
 
-  @if($type == fluid) {
+  @if $type == fluid {
     $v-gutter: grid-percentage($grid-half-gutter * $modifier);
-  } @else if ($type == pixel) {
+  } @else if $type == pixel {
     $v-gutter: $grid-half-gutter * $modifier;
+  } @else if $type == center {
+    $v-gutter: auto;
   }
 
   margin-left:  $v-gutter;
@@ -52,45 +54,26 @@ $grid-column:         grid-column-width();
 }
 
 // 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;
+@mixin grid-column-width($span: 1, $type: $grid-type, $gutter: $grid-gutter, $has-row: true) {
+  width: grid-columns-width($span, $grid-column, $gutter, $type, $has-row);
 }
 
 
 // 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-offset: grid-columns-width($span, $type: $grid-type);
   $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 {
+  @if $grid-type == fluid {
     $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;
+    // @debug $v-offset, $v-gutter, $v-gutter / 2;
+    margin-#{$direction}: -$v-offset - ($v-gutter / 2);
+  } @else {
+    margin-#{$direction}: $v-offset + ($v-gutter * 1.5);
   }
-
-  margin-#{$direction}: $v-offset + $v-gutter;
 }

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

@@ -12,14 +12,20 @@
 //                           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-gutterless       –  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
+//                           in which case the grid with no `%l-row` becomes gutterless
 //
 // %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-full         –  100% width
+//    %l-col-half         –  50% width
+//    %l-col-quarter      –  25% width
+//    %l-col-eighth       –  12.5% width
+//    %l-col-sixteenth    –  6.25% width
+//    %l-col-center       -  Center column
 //
 // 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)
@@ -68,11 +74,13 @@
     @include grid-row(fluid);
   }
 
-  // Defines row of marginless grid
-  &%l-marginless > %l-row {
-    margin: {
-      left: 0;
-      right: 0;
+  // Defines row of gutterless grid
+  %l-gutterless {
+    &, %l-row {
+      margin: {
+        left: 0;
+        right: 0;
+      }
     }
   }
 }
@@ -81,8 +89,12 @@
 // Defines columns
 %l-col {
   @include grid-column;
-}
 
+  %l-gutterless & {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
 
 // Float last column to right if `%l-last-col-right` extended
 // Applied to `%l-container`
@@ -94,38 +106,73 @@
 }
 
 
-// Defines column sizes
+// Column spans
 @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);
-    }
+    @include grid-column-width($i, $grid-type);
 
     // Force pixel grid
-    %l-grid-pixel > %l-row > & {
+    %l-grid-pixel & {
       @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 > & {
+    %l-grid-fluid & {
       @include grid-column-width($i, fluid);
       @include grid-column-margins(fluid);
     }
+
+    // Force gutterless grid
+    %l-gutterless &,
+    // Apply gutterless grid on columns without rows
+    %l-container > & {
+      @include grid-column-width($i, $grid-type, 0);
+      @include grid-column-margins(0);
+    }
+
+    // Force gutterless when row is absent
+    %l-grid-pixel > & {
+      @include grid-column-width($i, pixel, 0, false);
+      @include grid-column-margins(0);
+    }
+    %l-grid-fluid > & {
+      @include grid-column-width($i, fluid, 0, false);
+      @include grid-column-margins(0);
+    }
+  }
+}
+
+
+// Fluid grid subdivisions
+%l-col-full {
+  width: 100%;
+}
+%l-col-half {
+  width: 50%;
+}
+%l-col-third {
+  width: 33.33333%;
+}
+%l-col-quarter {
+  width: 25%;
+}
+%l-col-eighth {
+  width: 12.5%;
+}
+%l-col-sixteenth {
+  width: 6.25%;
+}
+
+
+// Centre column
+%l-col-center {
+  %l-container &,
+  %l-grid-pixel &,
+  %l-grid-fluid &,
+  %l-gutterless & {
+    float: none;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
@@ -138,7 +185,7 @@
 
 
 // TODO Improve
-// Defines column offsets
+// Column offsets
 %l-container {
   @for $i from 1 through $grid-total-columns {
 
@@ -212,27 +259,26 @@
       }
     }
 
-    // ## Marginless grid
-    & > %l-col,
-    &%l-marginless %l-col {
+    // ## gutterless grid
+    %l-gutterless %l-col {
       // From left
       &%l-col-from-left-#{$i} {
-        @include grid-offset-by-column($i, left, positive, marginless);
+        @include grid-offset-by-column($i, left, positive, gutterless);
       }
 
       // To left
       &%l-col-to-left-#{$i} {
-        @include grid-offset-by-column($i, left, negative, marginless);
+        @include grid-offset-by-column($i, left, negative, gutterless);
       }
 
       // From right
       &%l-col-from-right-#{$i} {
-        @include grid-offset-by-column($i, right, positive, marginless);
+        @include grid-offset-by-column($i, right, positive, gutterless);
       }
 
       // To right
       &%l-col-to-right-#{$i} {
-        @include grid-offset-by-column($i, right, negative, marginless);
+        @include grid-offset-by-column($i, right, negative, gutterless);
       }
     }
   }

data/assets/stylesheets/layout/_grid.scss

@@ -1,7 +1,7 @@
 // Grid defaults settings
 // ----------------------
 
-// Set these settings in `stratum.scss`
+// Set these settings in `stratum.scss` unless imported directly as `layout/grid`
 
 $grid-responsive:       false       !default;
 

data/assets/stylesheets/layout/scaffolding.scss

@@ -1,33 +1,44 @@
-// # Scaffolding stylesheet
+// Scaffolding stylesheet
+// ============================================================================
 // Exports `l-` prefixed classes useful for prototyping layouts
 
+
 // Grid container & rows
 .l-container {
   @extend %l-container;
   @extend %l-last-col-right;
 
-  > .l-row {
+  .l-row {
     @extend %l-row;
   }
+  .l-col {
+    @extend %l-col;
+  }
 
+  // # Modifiers
+
+  // Grid types
+  .l-row.m-gutterless {
+    @extend %l-gutterless;
+  }
   &.m-pixel {
     @extend %l-grid-pixel;
   }
-
   &.m-fluid {
     @extend %l-grid-fluid;
   }
 
-  .l-col {
-    @extend %l-col;
-  }
+  // Grid guides
+  &.m-show-guides {
+    @include show-grid-guides;
 
-  &.m-marginless {
-    @extend %l-marginless;
+    &.m-front {
+      @include show-grid-guides(front);
+    }
   }
 }
 
-// Grid columns
+// Span-based column modifiers
 @for $i from 1 through $grid-total-columns {
   .l-col {
     &.m-#{$i} {
@@ -49,3 +60,17 @@
     }
   }
 }
+
+// Generic column modifiers
+.l-col {
+  // Centre column
+  &.m-centered {
+    @extend %l-col-center;
+  }
+  // Grid column subdivisions
+  @each $word in full, half, quarter, eighth, sixteenth {
+    &.m-#{$word} {
+      @extend %l-col-#{$word};
+    }
+  }
+}

data/lib/version.rb

@@ -1,3 +1,3 @@
 module Stratum
-	VERSION = "0.2.0"
+	VERSION = "0.2.1"
 end

data/stratum.gemspec

@@ -16,6 +16,5 @@ Gem::Specification.new do |s|
 
   s.require_paths = ["lib"]
 
-  s.add_dependency('sass', '>= 3.2.0')
   s.add_dependency('thor')
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stratum
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
   prerelease: 
 platform: ruby
 authors:
@@ -9,22 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-01-26 00:00:00.000000000 Z
+date: 2013-01-27 00:00:00.000000000 Z
 dependencies:
-- !ruby/object:Gem::Dependency
-  name: sass
-  requirement: &70244371334840 !ruby/object:Gem::Requirement
-    none: false
-    requirements:
-    - - ! '>='
-      - !ruby/object:Gem::Version
-        version: 3.2.0
-  type: :runtime
-  prerelease: false
-  version_requirements: *70244371334840
 - !ruby/object:Gem::Dependency
   name: thor
-  requirement: &70244371334180 !ruby/object:Gem::Requirement
+  requirement: &70124016369060 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -32,7 +21,7 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70244371334180
+  version_requirements: *70124016369060
 description: Stratum is a collection of SASS mixins and utilities for your web development
   needs.
 email: tyom@semonov.com
@@ -44,6 +33,7 @@ files:
 - .gitignore
 - .gitmodules
 - LICENSE
+- README.md
 - assets/stylesheets/_stratum.scss
 - assets/stylesheets/css3/_box-sizing.scss
 - assets/stylesheets/forms/_input-placeholder.scss