shelves 0.6.0 → 1.0.0

data/README.md

@@ -1,56 +1,11 @@
-Shelves CSS Grid
-================
+Shelves CSS Grid Framework
+==========================
 
-**The only responsive, fluid CSS grid with infinitely nestable columns.**
+**The only responsive, fluid CSS grid framework with infinitely nestable columns.**
 
-[See the Demo](http://shelves.petebrowne.com/)
-
-TODO: Add longer description & Feature list.
-
-Installation
-------------
-
-### For CSS Users
-
-Download the latest distribution of [the CSS file](https://raw.github.com/petebrowne/shelves/master/css/shelves.css) and go to town.
-
-### For Sass Users (Compass & Rails)
-
-Add the shelves gem to your Gemfile and import it:
-
-``` ruby
-# ...
-gem 'shelves'
-# ...
-```
-
-``` scss
-// @import "shelves";   // Import just the mixins
-@import "shelves-grid"; // Import mixins & default grid
-```
-
-Custom CSS Build
-----------------
-
-To customize the CSS without using Sass, you can use the command line tool:
-
-``` bash
-$ gem install shelves
-$ shelves --width 1140px --columns 16 > grid.css
-```
-
-Run width `--help` to see all of the available options:
-
-``` bash
-$ shelves --help
-```
-
-Usage
------
-
-TODO...
+[Demo & Documentation](http://shelves.whoisartifex.com/)
 
 Copyright
 ---------
 
-Copyright (c) 2012 [Pete Browne](http://petebrowne.com). See LICENSE for details.
+Copyright (c) 2013 [Artifex](http://whoisartifex.com/). See LICENSE for details.

data/component.json

@@ -1,6 +1,6 @@
 {
   "name": "shelves",
-  "version": "0.6.0",
+  "version": "1.0.0",
   "main": ["css/shelves.css", "scss/shelves.scss"],
   "ignore": [
     "*.gemspec",

data/lib/shelves/cli.rb

@@ -48,6 +48,12 @@ BANNER
     desc 'Do not include nested columns.'
   end
 
+  option 'skip-desktop' do
+    short '-D'
+    long '--skip-desktop'
+    desc 'Do not include desktop columns.'
+  end
+
   option 'skip-tablet' do
     short '-T'
     long '--skip-tablet'
@@ -135,6 +141,16 @@ BANNER
   separator ''
   separator 'Advanced Options:'
 
+  option 'skip-center' do
+    long '--skip-center'
+    desc 'Do not include center column helper.'
+  end
+
+  option 'skip-visibility' do
+    long '--skip-visibility'
+    desc 'Do not include visibility helpers.'
+  end
+
   option 'skip-ie7-support' do
     long '--skip-ie7-support'
     desc 'Skip legacy support for IE7.'
@@ -146,17 +162,17 @@ BANNER
   end
 
   option 'skip-suffixes' do
-    long '--skip-suffix'
+    long '--skip-suffixes'
     desc 'Do not include suffix classes.'
   end
 
   option 'skip-pushes' do
-    long '--skip-push'
+    long '--skip-pushes'
     desc 'Do not include push classes.'
   end
 
   option 'skip-pulls' do
-    long '--skip-pull'
+    long '--skip-pulls'
     desc 'Do not include pull classes.'
   end
 
@@ -243,8 +259,7 @@ module Shelves
 <% settings.each do |setting, value| %>
 $shelves-<%= setting %>: <%= value %>;
 <% end %>
-@import "shelves";
-@include shelves;
+@import "shelves-grid";
 TEMPLATE
         template.result(binding)
       end
@@ -254,6 +269,7 @@ TEMPLATE
         settings.each do |setting, value|
           if setting =~ /^skip-(\w*)$/
             setting = $1
+            setting = "#{setting}-columns" if %w(desktop tablet mobile).include?(setting)
             value = false
           end
           normalized_settings[setting] = value

data/lib/shelves/version.rb

@@ -1,3 +1,3 @@
 module Shelves
-  VERSION = '0.6.0'
+  VERSION = '1.0.0'
 end

data/scss/shelves-grid.scss

@@ -1,2 +1,147 @@
 @import "shelves";
-@include shelves;
+
+@include shelves-base;
+
+// Mobile
+// ----------------------------------------------------------------------------
+
+@if $shelves-mobile-columns != false {
+  @include with-mobile-grid {
+    %shelves-mobile-column-base {
+      @include column-base;
+      @include column-gutter;
+
+      #{class-selector($shelves-row-name)} &:first-child {
+        @extend %shelves-mobile-first-column;
+      }
+    }
+
+    %shelves-mobile-first-column {
+      @include reset-column-gutter;
+    }
+
+    #{class-selector($shelves-first-mobile-column-name)} {
+      @extend %shelves-mobile-first-column;
+    }
+
+    @include shelves-columns(
+      $extend: "shelves-mobile-column-base",
+      $prefixes: $shelves-mobile-prefixes,
+      $suffixes: $shelves-mobile-suffixes,
+      $pushes: $shelves-mobile-pushes,
+      $pulls: $shelves-mobile-pulls,
+      $column-name: $shelves-mobile-column-name,
+      $prefix-name: $shelves-mobile-prefix-name,
+      $suffix-name: $shelves-mobile-suffix-name,
+      $push-name: $shelves-mobile-push-name,
+      $pull-name: $shelves-mobile-pull-name
+    );
+  }
+}
+
+// Tablet
+// ----------------------------------------------------------------------------
+
+@if $shelves-tablet-columns != false {
+  @include on-tablet-up {
+    %shelves-tablet-column-base {
+      @include column-base;
+      @include column-gutter;
+
+      #{class-selector($shelves-row-name)} &:first-child {
+        @extend %shelves-tablet-first-column;
+      }
+    }
+
+    %shelves-tablet-first-column {
+      @include reset-column-gutter;
+    }
+
+    #{class-selector($shelves-first-tablet-column-name)} {
+      @extend %shelves-tablet-first-column;
+    }
+
+    @include shelves-columns(
+      $extend: "shelves-tablet-column-base",
+      $prefixes: $shelves-tablet-prefixes,
+      $suffixes: $shelves-tablet-suffixes,
+      $pushes: $shelves-tablet-pushes,
+      $pulls: $shelves-tablet-pulls,
+      $column-name: $shelves-tablet-column-name,
+      $prefix-name: $shelves-tablet-prefix-name,
+      $suffix-name: $shelves-tablet-suffix-name,
+      $push-name: $shelves-tablet-push-name,
+      $pull-name: $shelves-tablet-pull-name
+    );
+  }
+}
+
+// Desktop
+// ----------------------------------------------------------------------------
+
+@if $shelves-desktop-columns != false {
+  @include on-desktop {
+    %shelves-desktop-column-base {
+      @include column-base;
+      @include column-gutter;
+
+      #{class-selector($shelves-row-name)} &:first-child {
+        @extend %shelves-first-desktop-column;
+      }
+    }
+
+    %shelves-first-desktop-column {
+      @include reset-column-gutter;
+    }
+
+    #{class-selector($shelves-first-desktop-column-name)} {
+      @extend %shelves-first-desktop-column;
+    }
+
+    @include shelves-columns(
+      $extend: "shelves-desktop-column-base",
+      $prefixes: $shelves-prefixes,
+      $suffixes: $shelves-suffixes,
+      $pushes: $shelves-pushes,
+      $pulls: $shelves-pulls
+    );
+
+    // Nested Desktop Columns
+
+    @if $shelves-nested-columns != false {
+      @for $i from 1 to $shelves-desktop-columns - 1  {
+        // Loop background through the columns
+        // to cascade the nested column properties.
+        $i: $shelves-desktop-columns - $i;
+
+        #{class-selector($shelves-desktop-column-name $i)} {
+          %shelves-nested-column-#{$i}-base {
+            @include column-gutter($i);
+          }
+
+          @include shelves-columns(
+            $extend: "shelves-nested-column-#{$i}-base",
+            $context: $i,
+            $prefixes: $shelves-nested-prefixes,
+            $suffixes: $shelves-nested-suffixes,
+            $pushes: $shelves-nested-pushes,
+            $pulls: $shelves-nested-pulls
+          );
+        }
+      }
+    }
+  }
+}
+
+@if $shelves-center {
+  #{class-selector($shelves-row-name)} #{class-selector($shelves-center-column-name)} {
+    @include center-column;
+  }
+}
+
+// Visibility Helpers
+// ----------------------------------------------------------------------------
+
+@if $shelves-visibility {
+  @include shelves-visibility-helpers;
+}

data/scss/shelves.scss

@@ -7,6 +7,6 @@ The only responsive, fluid CSS grid with infinitely nestable columns.
 Copyright (c) 2012, Pete Browne
 */
 
-@import "shelves/settings";
 @import "shelves/functions";
+@import "shelves/variables";
 @import "shelves/mixins";

data/scss/shelves/_functions.scss

@@ -9,8 +9,8 @@
 //   $gutter  - The width of the gutter in the root context (in %).
 //              Defaults to the value of $shelves-gutter.
 //
-@function column-width(
-    $context: null,
+@function single-column-width(
+    $context: $shelves-context,
     $total: $shelves-columns,
     $gutter: $shelves-gutter) {
   $context: $total !default;
@@ -19,74 +19,73 @@
     @return 100%;
   }
   @else if $context >= $total {
-    $column-gutter: column-gutter($total: $total, $gutter: $gutter);
+    $column-gutter: column-gutter($context: null, $total: $total, $gutter: $gutter);
     @return (100% - ($total - 1) * $column-gutter) / $total;
   }
   @else {
-    $column-width: column-width($total: $total, $gutter: $gutter);
-    $context-width: columns-width($n: $context, $total: $total, $gutter: $gutter);
+    $column-width: single-column-width($context: null, $total: $total, $gutter: $gutter);
+    $context-width: column-width($n: $context, $context: null, $total: $total, $gutter: $gutter);
     @return $column-width * (100% / $context-width);
   }
 }
 
-// Returns the width of the gutter as a percentage. If given a $context,
-// this returns the gutter width relative to that number of columns.
+// Returns the total width (including gutters) of the given
+// number of columns. If given a $context, this returns the
+// width relative to that number of columns.
 //
-//   $context - The number of columns encapsulating the gutter.
+//   $n       - The number of columns to measure.
+//   $context - The number of columns encapsulating the columns.
 //              Defaults to the the value of $total.
 //   $total   - The total number of columns in the grid.
 //              Defaults to the value of $shelves-columns.
 //   $gutter  - The width of the gutter in the root context (in %).
 //              Defaults to the value of $shelves-gutter.
 //
-@function column-gutter(
-    $context: null,
+@function column-width(
+    $n,
+    $context: $shelves-context,
     $total: $shelves-columns,
     $gutter: $shelves-gutter) {
   $context: $total !default;
 
-  @if $context <= 1 {
-    @return 0%;
+  @if $n <= 1 {
+    @return single-column-width($context, $total, $gutter);
   }
-  @else if $context >= $total {
-    @return $gutter;
+  @else if $n >= $context {
+    @return 100%;
   }
   @else {
-    $context-width: columns-width($n: $context, $total: $total);
-    @return $gutter * (100% / $context-width);
+    $column-width: single-column-width($context, $total, $gutter);
+    $column-gutter: column-gutter($context, $total, $gutter);
+    @return $column-width * $n + $column-gutter * ($n - 1);
   }
 }
 
-// Returns the total width (including gutters) of the given
-// number of columns. If given a $context, this returns the
-// width relative to that number of columns.
+// Returns the width of the gutter as a percentage. If given a $context,
+// this returns the gutter width relative to that number of columns.
 //
-//   $n       - The number of columns to measure.
-//   $context - The number of columns encapsulating the columns.
+//   $context - The number of columns encapsulating the gutter.
 //              Defaults to the the value of $total.
 //   $total   - The total number of columns in the grid.
 //              Defaults to the value of $shelves-columns.
 //   $gutter  - The width of the gutter in the root context (in %).
 //              Defaults to the value of $shelves-gutter.
 //
-@function columns-width(
-    $n,
-    $context: null,
+@function column-gutter(
+    $context: $shelves-context,
     $total: $shelves-columns,
     $gutter: $shelves-gutter) {
   $context: $total !default;
 
-  @if $n <= 1 {
-    @return column-width($context, $total, $gutter);
+  @if $context <= 1 {
+    @return 0%;
   }
-  @else if $n >= $context {
-    @return 100%;
+  @else if $context >= $total {
+    @return $gutter;
   }
   @else {
-    $column-width: column-width($context, $total, $gutter);
-    $column-gutter: column-gutter($context, $total, $gutter);
-
-    @return $column-width * $n + $column-gutter * ($n - 1);
+    $context-width: column-width($n: $context, $context: null, $total: $total);
+    @return $gutter * (100% / $context-width);
   }
 }
 
@@ -94,43 +93,63 @@
 // number of columns. If given a $context, this returns the
 // distance relative to that number of columns.
 //
-//   $n       - The number of columns to measure.
-//   $context - The number of columns encapsulating the columns.
-//              Defaults to the the value of $total.
-//   $total   - The total number of columns in the grid.
-//              Defaults to the value of $shelves-columns.
-//   $gutter  - The width of the gutter in the root context (in %).
-//              Defaults to the value of $shelves-gutter.
+//   $n           - The number of columns to measure.
+//   $context     - The number of columns encapsulating the columns.
+//                  Defaults to the the value of $total.
+//   $total       - The total number of columns in the grid.
+//                  Defaults to the value of $shelves-columns.
+//   $gutter      - The width of the gutter in the root context (in %).
+//                  Defaults to the value of $shelves-gutter.
+//   $with-gutter - Include an extra gutter in the calculation.
+//                  Defaults to true.
 //
-@function columns-distance(
+@function column-distance(
     $n,
-    $context: null,
+    $context: $shelves-context,
     $total: $shelves-columns,
-    $gutter: $shelves-gutter) {
-  @return columns-width($n, $context, $total, $gutter) + column-gutter($context, $total, $gutter);
+    $gutter: $shelves-gutter,
+    $with-gutter: true) {
+  $distance: column-width($n, $context, $total, $gutter);
+  @if $with-gutter {
+    $distance: $distance + column-gutter($context, $total, $gutter);
+  }
+  @return $distance;
 }
 
-// Returns a column selector with the given class name,
-// appended with the given index.
+// Creates a class name by joining the parts of a list with the default
+// $shelves-separator.
 //
-//   $class-name - The class name to build the selector from.
-//                 It should NOT have a preceding ".".
-//   $index      - The index to append at the end. It will
-//                 be separated by $separator.
-//   $separator  - The separator between the class name and index.
-//                 Defaults to $shelves-separator.
+//   $list - The list of items to join.
 //
-@function column-selector($class-name, $index, $separator: $shelves-separator) {
-  @return ".#{$class-name}#{$separator}#{$index}";
+@function class-name($list) {
+  @return implode($list, $shelves-separator);
 }
 
-// Returns a selector that will select all columns with the given prefix.
+// Creates an actual class selector by prefixing it with a ".".
 //
-//   $class-name - The class name to build the selector from.
-//                 It should NOT have a preceding ".".
-//   $separator  - The separator between the class name and index.
-//                 Defaults to $shelves-separator.
+//   $name - A string or list of strings to create a class name from.
 //
-@function columns-selector($class-name, $separator: $shelves-separator) {
-  @return "[class*=\"#{$class-name}#{$separator}\"]";
+@function class-selector($name) {
+  @return ".#{class-name($name)}";
+}
+
+// Creates a string by joining the parts of a list with the given separator.
+//
+// Note: This uses the PHP-style "implode" because Sass already uses "join"
+// for concatenation.
+//
+//   $list      - The list of items to join.
+//   $separator - The string to join with. Defaults to an empty string ("").
+//
+@function implode($list, $separator: "") {
+  $length: length($list);
+  $output: nth($list, 1);
+
+  @for $i from 2 through $length {
+    $item: nth($list, $i);
+    @if $item != null {
+      $output: "#{$output}#{$separator}#{$item}";
+    }
+  }
+  @return $output;
 }