zen-grids 2.0.0.beta.3 → 2.0.0.beta.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8583a6425123fc8672fa50a06b101ed73999eaa6
-  data.tar.gz: bb2addbe8d5e1faa50a630f50f373e2b96c423d6
+  metadata.gz: 640e160d3d90ce3d3a930b5740266c31d022cbd0
+  data.tar.gz: cf59ab172bb8f008b606da496e1f02e6d31a0093
 SHA512:
-  metadata.gz: a587bf7b7969ef1b6e7eaf9414efc3450ac58a95a0ff7c08c61c3f3bfc246ab3647eb773cc88f34dc7074f8d1f9e565d4b7b8f37d3882a190df11e4a81e020db
-  data.tar.gz: 84832d4948dfcc4799cd6e810d99c076efc98f194d0ab7b7ad0799cf9620ab17af565011d82ce619761b32f29ec7a1648c4b307f2ea09cd95452a0cb6becdfe0
+  metadata.gz: 45d2429e4d3cda23119af1b68449a56d0ed2e0184b75e70380945fbd49a6502e7ed5b21389aee9bfe69b9c7b63c34526762d98427d3679a16b30af70934e6346
+  data.tar.gz: 874e8c1b4eb80ed77f8ea8cfb9a001b0d38eb1f512ea05a88ca24a8319cb8a4049ea4c15adeae811804331d5c5224a59aeb17a9073c9c50d981f3d855db7a04a

data/README.md

@@ -50,7 +50,7 @@ Zen Grids has built-in support for the Box-sizing Polyfill which adds `box-sizin
 Zen grids is distributed as a Ruby Gem. On your computer, simply run:
 
 ```sh
-sudo gem install zen-grids
+gem install zen-grids
 ```
 
 If you are using Compass (and you should!) then you can add it to an existing project by editing the project's configuration file, config.rb, and adding this line:

data/lib/zen-grids.rb

@@ -1,12 +1,10 @@
 require 'compass'
 
 project_path     = File.join(File.dirname(__FILE__), '..')
-stylesheets_path = File.join(project_path, 'stylesheets')
-templates_path   = File.join(project_path, 'templates')
+stylesheets_path = File.join(project_path, 'sass')
 
 Compass::Frameworks.register(
   'zen-grids',
   :path => project_path,
-  :stylesheets_directory => stylesheets_path,
-  :templates_directory => templates_path
+  :stylesheets_directory => stylesheets_path
 )

data/sass/_zen-grids.scss

@@ -0,0 +1,6 @@
+// Import the partials for Zen Grids.
+
+@import "zen-grids/grids";
+@import "zen-grids/flow";
+@import "zen-grids/layout";
+@import "zen-grids/undo";

data/sass/zen-grids/_layout.scss

@@ -0,0 +1,361 @@
+// Layout module
+//
+// The "Layout" module for the Zen Grids system.
+//
+// When building a grid system for your site, properties (like number of columns or gutter size) will need different values at different viewport widths. In previous versions of Zen Grids, this meant changing the Zen Grids' global variables each time you wanted to build a layout at a different viewport size. With the layout module, you can instead set grid system properties that override your default global variables within the scope of the layout mixin.
+//
+// For example:
+// ```
+// $zen-columns: 1; // Default to one column for mobile layout.
+// @include zen-layout($columns: 3) {
+//   // $zen-columns is set to 3 inside this block and can be used to build a
+//   // layout for the following breakpoint.
+//   @media screen and (min-width: 777px) {
+//     .sidebar {
+//       // The sidebar will span the first column of the 3 columns defined.
+//       @include zen-grid-item(1, 1);
+//     }
+//   }
+// }
+// // $zen-columns is back to 1 after the zen-layout() block.
+// ```
+//
+// Style guide: layout
+
+@import "./grids";
+
+// zen-layout(...)
+//
+// Should be used to add a wrapping block where its parameters will override the
+// corresponding global `$zen-` variables within it.
+//
+// $layout - Specify the name of the layout from $zen-columns to use.
+// $columns - Defaults to $zen-columns.
+// $gutters - Defaults to $zen-gutters
+// $gutter-method - Defaults to $zen-gutter-method
+// $grid-width - Defaults to $zen-grid-width
+// $box-sizing - Defaults to $zen-box-sizing
+// $direction - Defaults to $zen-direction
+// $switch-direction - Defaults to $zen-switch-direction
+// $auto-include-grid-item-base - Defaults to $zen-auto-include-grid-item-base
+// $auto-include-flow-item-base - Defaults to $zen-auto-include-flow-item-base
+// $grid-color - Defaults to $zen-grid-color
+// $grid-numbers - Defaults to $zen-grid-numbers
+//
+// Style guide: layout.zen-layout
+@mixin zen-layout(
+  $layout                       : null,
+  $columns                      : null,
+  $gutters                      : null,
+  $gutter-method                : null,
+  $grid-width                   : null,
+  $box-sizing                   : null,
+  $direction                    : null,
+  $switch-direction             : null,
+  $auto-include-grid-item-base  : null,
+  $auto-include-flow-item-base  : null,
+  $grid-color                   : null,
+  $grid-numbers                 : null
+) {
+
+  // Save the previous versions of Zen's global variables.
+  $global-vars                      : (
+    'columns'                       : $zen-columns,
+    'gutters'                       : $zen-gutters,
+    'gutter-method'                 : $zen-gutter-method,
+    'grid-width'                    : $zen-grid-width,
+    'box-sizing'                    : $zen-box-sizing,
+    'direction'                     : $zen-direction,
+    'switch-direction'              : $zen-switch-direction,
+    'auto-include-grid-item-base'   : $zen-auto-include-grid-item-base,
+    'auto-include-flow-item-base'   : $zen-auto-include-flow-item-base,
+    'grid-color'                    : $zen-grid-color,
+    'grid-numbers'                  : $zen-grid-numbers
+  );
+
+  // Grab a layout from $zen-layouts while defaulting to the global values.
+  $local-defaults: $global-vars;
+  @if type-of($layout) != 'null' and map-has-key($zen-layouts, $layout) {
+    $local-defaults: map-merge($local-defaults, map-get($zen-layouts, $layout));
+  }
+
+  // Ensure our local parameters all have a value.
+  @if type-of($columns) == 'null' {
+    $columns: map-get($local-defaults, 'columns');
+  }
+  @if type-of($gutters) == 'null' {
+    $gutters: map-get($local-defaults, 'gutters');
+  }
+  @if type-of($gutter-method) == 'null' {
+    $gutter-method: map-get($local-defaults, 'gutter-method');
+  }
+  @if type-of($grid-width) == 'null' {
+    $grid-width: map-get($local-defaults, 'grid-width');
+  }
+  @if type-of($box-sizing) == 'null' {
+    $box-sizing: map-get($local-defaults, 'box-sizing');
+  }
+  @if type-of($direction) == 'null' {
+    $direction: map-get($local-defaults, 'direction');
+  }
+  @if type-of($switch-direction) == 'null' {
+    $switch-direction: map-get($local-defaults, 'switch-direction');
+  }
+  @if type-of($auto-include-grid-item-base) == 'null' {
+    $auto-include-grid-item-base: map-get($local-defaults, 'auto-include-grid-item-base');
+  }
+  @if type-of($auto-include-flow-item-base) == 'null' {
+    $auto-include-flow-item-base: map-get($local-defaults, 'auto-include-flow-item-base');
+  }
+  @if type-of($grid-color) == 'null' {
+    $grid-color: map-get($local-defaults, 'grid-color');
+  }
+  @if type-of($grid-numbers) == 'null' {
+    $grid-numbers: map-get($local-defaults, 'grid-numbers');
+  }
+
+  // Temporarily override Zen's global variables.
+  $zen-columns                      : $columns !global;
+  $zen-gutters                      : $gutters !global;
+  $zen-gutter-method                : $gutter-method !global;
+  $zen-grid-width                   : $grid-width !global;
+  $zen-box-sizing                   : $box-sizing !global;
+  $zen-direction                    : $direction !global;
+  $zen-switch-direction             : $switch-direction !global;
+  $zen-auto-include-grid-item-base  : $auto-include-grid-item-base !global;
+  $zen-auto-include-flow-item-base  : $auto-include-flow-item-base !global;
+  $zen-grid-color                   : $grid-color !global;
+  $zen-grid-numbers                 : $grid-numbers !global;
+
+  // Generate the content in the new global context.
+  @content;
+
+  // Restore Zen's global variables.
+  $zen-columns                      : map-get($global-vars, 'columns') !global;
+  $zen-gutters                      : map-get($global-vars, 'gutters') !global;
+  $zen-gutter-method                : map-get($global-vars, 'gutter-method') !global;
+  $zen-grid-width                   : map-get($global-vars, 'grid-width') !global;
+  $zen-box-sizing                   : map-get($global-vars, 'box-sizing') !global;
+  $zen-direction                    : map-get($global-vars, 'direction') !global;
+  $zen-switch-direction             : map-get($global-vars, 'switch-direction') !global;
+  $zen-auto-include-grid-item-base  : map-get($global-vars, 'auto-include-grid-item-base') !global;
+  $zen-auto-include-flow-item-base  : map-get($global-vars, 'auto-include-flow-item-base') !global;
+  $zen-grid-color                   : map-get($global-vars, 'grid-color') !global;
+  $zen-grid-numbers                 : map-get($global-vars, 'grid-numbers') !global;
+}
+
+// zen-breakpoint(...)
+//
+// Combines zen-layout() with the Breakpoint module's breakpoint() mixin.
+//
+// Instead of nesting zen-layout() with breakpoint() like this:
+// ```
+// @include zen-layout($layout: 'm') {
+//   @include breakpoint($medium) {
+//     // Do something.
+//   }
+// }
+// ```
+//
+// You can use the zen-breakpoint() mixin like this:
+// ```
+// @include zen-breakpoint($medium, $layout: 'm') {
+//   // Do something.
+// }
+// ```
+//
+// $query - This parameter is passed on to the breakpoint() mixin.
+// $no-query - This parameter is passed on to the breakpoint() mixin.
+// $layout - Specify the name of the layout from $zen-columns to use.
+// $columns - Defaults to $zen-columns.
+// $gutters - Defaults to $zen-gutters
+// $gutter-method - Defaults to $zen-gutter-method
+// $grid-width - Defaults to $zen-grid-width
+// $box-sizing - Defaults to $zen-box-sizing
+// $direction - Defaults to $zen-direction
+// $switch-direction - Defaults to $zen-switch-direction
+// $auto-include-grid-item-base - Defaults to $zen-auto-include-grid-item-base
+// $auto-include-flow-item-base - Defaults to $zen-auto-include-flow-item-base
+// $grid-color - Defaults to $zen-grid-color
+// $grid-numbers - Defaults to $zen-grid-numbers
+//
+// Style guide: layout.zen-breakpoint
+@mixin zen-breakpoint(
+  $query,
+  $no-query: false,
+  $layout                       : null,
+  $columns                      : null,
+  $gutters                      : null,
+  $gutter-method                : null,
+  $grid-width                   : null,
+  $box-sizing                   : null,
+  $direction                    : null,
+  $switch-direction             : null,
+  $auto-include-grid-item-base  : null,
+  $auto-include-flow-item-base  : null,
+  $grid-color                   : null,
+  $grid-numbers                 : null
+) {
+
+  @if not mixin-exists('breakpoint') {
+    @error 'You need to @import the breakpoint mixin before using zen-breakpoint().';
+  }
+
+  @include zen-layout(
+    $layout,
+    $columns,
+    $gutters,
+    $gutter-method,
+    $grid-width,
+    $box-sizing,
+    $direction,
+    $switch-direction,
+    $auto-include-grid-item-base,
+    $auto-include-flow-item-base,
+    $grid-color,
+    $grid-numbers
+  ) {
+    @include breakpoint($query, $no-query) {
+      @content;
+    }
+  }
+}
+
+// zen-mq(...)
+//
+// An alias for the zen-breakpoint() mixin.
+//
+// Style guide: layout.zen-mq
+@mixin zen-mq(
+  $query,
+  $no-query: false,
+  $layout                       : null,
+  $columns                      : null,
+  $gutters                      : null,
+  $gutter-method                : null,
+  $grid-width                   : null,
+  $box-sizing                   : null,
+  $direction                    : null,
+  $switch-direction             : null,
+  $auto-include-grid-item-base  : null,
+  $auto-include-flow-item-base  : null,
+  $grid-color                   : null,
+  $grid-numbers                 : null
+) {
+
+  @if not mixin-exists('mq') {
+    @error 'You need to @import the mq mixin before using zen-mq().';
+  }
+
+  @include zen-layout(
+    $layout,
+    $columns,
+    $gutters,
+    $gutter-method,
+    $grid-width,
+    $box-sizing,
+    $direction,
+    $switch-direction,
+    $auto-include-grid-item-base,
+    $auto-include-flow-item-base,
+    $grid-color,
+    $grid-numbers
+  ) {
+    @include mq($query, $no-query) {
+      @content;
+    }
+  }
+}
+
+// zen-respond-to(...)
+//
+// Combines zen-layout() with the Breakpoint module's respond-to() mixin.
+//
+// Instead of nesting zen-layout() with respond-to() like this:
+// ```
+// @include zen-layout($layout: 'm') {
+//   @include respond-to('m') {
+//     // Do something.
+//   }
+// }
+// ```
+//
+// You can use the zen-respond-to() mixin like this:
+// ```
+// @include zen-respond-to('m') {
+//   // Do something.
+// }
+// ```
+//
+// Note that the 'm' in the above example uses the same name in the
+// $breakpoints map as is used in the $zen-layouts map.
+//
+// You can use a differently-named layout by explicitly specifying the $layout
+// parameter like this:
+// ```
+// @include zen-respond-to('m', $layout: 'medium') {
+//   // Do something.
+// }
+// ```
+//
+// $layout - Specify the name of the layout from $zen-columns to use.
+// $context - This parameter is passed on to the respond-to() mixin.
+// $no-query - This parameter is passed on to the respond-to() mixin.
+// $columns - Defaults to $zen-columns.
+// $gutters - Defaults to $zen-gutters
+// $gutter-method - Defaults to $zen-gutter-method
+// $grid-width - Defaults to $zen-grid-width
+// $box-sizing - Defaults to $zen-box-sizing
+// $direction - Defaults to $zen-direction
+// $switch-direction - Defaults to $zen-switch-direction
+// $auto-include-grid-item-base - Defaults to $zen-auto-include-grid-item-base
+// $auto-include-flow-item-base - Defaults to $zen-auto-include-flow-item-base
+// $grid-color - Defaults to $zen-grid-color
+// $grid-numbers - Defaults to $zen-grid-numbers
+//
+// Style guide: layout.zen-layout
+@mixin zen-respond-to(
+  $context,
+  $no-query: false,
+  $layout                       : null,
+  $columns                      : null,
+  $gutters                      : null,
+  $gutter-method                : null,
+  $grid-width                   : null,
+  $box-sizing                   : null,
+  $direction                    : null,
+  $switch-direction             : null,
+  $auto-include-grid-item-base  : null,
+  $auto-include-flow-item-base  : null,
+  $grid-color                   : null,
+  $grid-numbers                 : null
+) {
+
+  @if not mixin-exists('respond-to') {
+    @error 'You need to @import the respond-to mixin before using zen-respond-to().';
+  }
+
+  // Allow the first parameter to control both $context and $layout.
+  @if type-of($layout) == 'null' and map-has-key($zen-layouts, $context) {
+    $layout: $context;
+  }
+
+  @include zen-layout(
+    $layout,
+    $columns,
+    $gutters,
+    $gutter-method,
+    $grid-width,
+    $box-sizing,
+    $direction,
+    $switch-direction,
+    $auto-include-grid-item-base,
+    $auto-include-flow-item-base,
+    $grid-color,
+    $grid-numbers
+  ) {
+    @include respond-to($context, $no-query) {
+      @content;
+    }
+  }
+}

data/{stylesheets → sass}/zen-grids/_variables.scss

@@ -46,6 +46,12 @@ $zen-switch-direction             : false       !default;
 // @see http://next.zengrids.com/reference/flow/#zen-auto-include-flow-item-base
 $zen-auto-include-flow-item-base  : true        !default;
 
+//
+// Variables used by the layout module.
+//
+
+$zen-layouts                      : ()          !default;
+
 //
 // Variables used by the background module.
 //

data/zen-grids.gemspec

@@ -9,8 +9,8 @@ Gem::Specification.new do |spec|
   spec.homepage     = 'http://zengrids.com'
   spec.rubyforge_project =
 
-  spec.version      = '2.0.0.beta.3'
-  spec.date         = '2014-09-03'
+  spec.version      = '2.0.0.beta.4'
+  spec.date         = '2015-10-26'
   spec.licenses     = ['GPL-2']
 
   spec.authors      = ['John Albin Wilkins']
@@ -18,7 +18,7 @@ Gem::Specification.new do |spec|
 
   spec.add_runtime_dependency('sass', "~> 3.3")
 
-  spec.files        = `git ls-files`.split($/).select {|f| File.exist?(f) && f =~ %r{^(lib|stylesheets|templates)/} }
+  spec.files        = `git ls-files`.split($/).select {|f| File.exist?(f) && f =~ %r{^(lib|sass)/} }
   spec.files        += %w(
     LICENSE.txt
     README.md

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: zen-grids
 version: !ruby/object:Gem::Version
-  version: 2.0.0.beta.3
+  version: 2.0.0.beta.4
 platform: ruby
 authors:
 - John Albin Wilkins
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-09-03 00:00:00.000000000 Z
+date: 2015-10-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -36,23 +36,16 @@ files:
 - LICENSE.txt
 - README.md
 - lib/zen-grids.rb
-- stylesheets/_zen-grids.scss
-- stylesheets/zen-grids/_background.scss
-- stylesheets/zen-grids/_flow.scss
-- stylesheets/zen-grids/_functions.scss
-- stylesheets/zen-grids/_grids.scss
-- stylesheets/zen-grids/_undo.scss
-- stylesheets/zen-grids/_variables.scss
-- stylesheets/zen-grids/internal/_functions-compass-polyfill.scss
-- stylesheets/zen-grids/internal/_variables-background.scss
-- templates/project/_base-elements.scss
-- templates/project/_components.scss
-- templates/project/_init.scss
-- templates/project/_layouts.scss
-- templates/project/_visually-hidden.scss
-- templates/project/example.html
-- templates/project/manifest.rb
-- templates/project/styles.scss
+- sass/_zen-grids.scss
+- sass/zen-grids/_background.scss
+- sass/zen-grids/_flow.scss
+- sass/zen-grids/_functions.scss
+- sass/zen-grids/_grids.scss
+- sass/zen-grids/_layout.scss
+- sass/zen-grids/_undo.scss
+- sass/zen-grids/_variables.scss
+- sass/zen-grids/internal/_functions-compass-polyfill.scss
+- sass/zen-grids/internal/_variables-background.scss
 - zen-grids.gemspec
 homepage: http://zengrids.com
 licenses:
@@ -73,8 +66,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubyforge_project: 2.0.0.beta.3
-rubygems_version: 2.4.1
+rubyforge_project: 2.0.0.beta.4
+rubygems_version: 2.4.8
 signing_key: 
 specification_version: 4
 summary: A Compass plugin for Zen Grids, a fluid responsive grid system

data/stylesheets/_zen-grids.scss

@@ -1,3 +0,0 @@
-// Import the partials for Zen Grids.
-
-@import "zen-grids/grids";

data/templates/project/_base-elements.scss

@@ -1,22 +0,0 @@
-/**
- * @file
- * Base HTML element styles.
- */
-
-html {
-  font-size:   $base-font-size;
-  line-height: $base-line-height;
-}
-
-body {
-  margin: 0;
-}
-
-h1,
-h2,
-p {
-  margin: {
-    top:    $vertical-rhythm;
-    bottom: $vertical-rhythm;
-  }
-}

data/templates/project/_components.scss

@@ -1,73 +0,0 @@
-/**
- * @file
- * Component styles.
- */
-
-/* Skip link styling */
-.skip-link {
-  margin: 0;
-}
-.skip-link__link {
-  display: block;
-  width: 100%;
-  padding: 2px 0 3px 0;
-  text-align: center;
-
-  &,
-  &:visited {
-    color: #fff;
-    background-color: #666;
-  }
-
-  /* The skip-link link will be completely hidden until a user tabs to the link. */
-  @media all and (min-width: 444px) {
-    @include visually-focusable();
-  }
-}
-
-/* Source-order meta info */
-.meta {
-  margin: 0 0 .5rem 0;
-  display: block;
-  + * {
-    margin-top: 0;
-  }
-  font-family: sans-serif;
-  font-size: 1rem;
-  line-height: 1rem;
-}
-%meta__child {
-  display: inline;
-  font-style: normal;
-  line-height: 1rem;
-}
-.meta__heading {
-  @extend %meta__child;
-  font-size: 1rem;
-  font-weight: bold;
-}
-.meta__data {
-  @extend %meta__child;
-  font-size: 0.8rem;
-  font-weight: normal;
-//  text-transform: uppercase;
-  color: #c00;
-}
-
-/* Pull-quotes */
-.pull-quote {
-  @include zen-float();
-  @include zen-flow-item-width(1, 2);
-
-  margin: {
-    bottom: $vertical-rhythm/2;
-  }
-
-  font-size: 1.2em;
-  font-weight: bold;
-  font-style: italic;
-
-  @media all and (min-width: 999px) {
-    @include zen-flow-item-width(1, 3);
-  }
-}

data/templates/project/_init.scss

@@ -1,32 +0,0 @@
-//
-// @file
-// This file sets up all our variables and loads all the modules we need for all
-// generated CSS in this project. To use it, simply: @import "init";
-//
-
-// Supported browsers variable for Compass.
-$browser-minimum-versions: (
-  'chrome':  null,
-  'firefox': null,
-  'ie':      "8",
-  'safari':  null,
-  'opera':   null
-);
-
-// Set up Zen Grids.
-$zen-columns                      : 1;
-$zen-gutters                      : 20px;
-$zen-auto-include-grid-item-base  : false;
-
-// Set up a unit of vertical rhythm.
-$base-font-size                   : 16px;
-$base-line-height                 : 1.5em;
-$vertical-rhythm                  : 1rem*($base-line-height/1em);
-
-//
-// Import our modules.
-//
-@import "zen-grids";
-@import "zen-grids/background";
-@import "zen-grids/flow";
-@import "visually-hidden";

data/templates/project/_layouts.scss

@@ -1,143 +0,0 @@
-/**
- * @file
- * Layout styles.
- *
- * We use example breakpoints of 27em, 41em, 49em, 63em and 69px. The right
- * breakpoints to use for your site depend on your content.
- * We use example breakpoints of 444px, 666px, 777px, 999px and 1111px. The
- * right breakpoints to use for your site depend on your content.
- */
-
-/* The container for our grid items. */
-.l-basic {
-  @include zen-grid-container();
-  @include zen-grid-background();
-  // Center the layout and ensure it doesn't grow too wide.
-  margin: {
-    left:  auto;
-    right: auto;
-  }
-  // Add some padding so we can see the grid background numbers more easily.
-  padding: {
-    top:   $vertical-rhythm;
-    bottom: $vertical-rhythm;
-  }
-  max-width: 1111px;
-}
-
-$zen-columns: 1;
-
-/* Mobile layout; all grid items are one column wide. */
-.l-basic__header,
-.l-basic__main,
-.l-basic__menu,
-.l-basic__content,
-.l-basic__aside1,
-.l-basic__aside2,
-.l-basic__footer {
-  /* Set the shared properties for all grid items. */
-  /* Note: we set $zen-auto-include-grid-item-base to false in _init.scss. */
-  @include zen-grid-item-base();
-}
-
-/* "main" is a grid-item (of .l-basic) that is also a nested grid container. */
-.l-basic__main {
-  @include zen-grid-container(grid-item);
-}
-
-/* Horizontal navigation bar */
-@media all and (min-width: 444px) {
-  $navbar-height: 5em;
-
-  .l-basic__main {
-    padding-top: $navbar-height;
-  }
-  .l-basic__menu {
-    @include zen-grid-item(1, 1);
-    margin-top: -$navbar-height;
-    height: $navbar-height;
-  }
-}
-
-$zen-columns: 2;
-@media all and (min-width: 444px) and (max-width: 665px) {
-  .l-basic {
-    @include zen-grid-background(); // Show the new 2-column background grid image.
-  }
-  .l-basic__content {
-    @include zen-grid-item(2, 1);
-  }
-  .l-basic__aside1 {
-    @include zen-new-row(); // Clear left-floated elements (.l-basic__content)
-    @include zen-grid-item(1, 1);
-  }
-  .l-basic__aside2 {
-    @include zen-grid-item(1, 2);
-  }
-}
-
-@media all and (min-width: 444px) {
-  .l-basic__columns {
-    @include zen-grid-container(flow);
-  }
-  .l-basic__col1,
-  .l-basic__col2 {
-    @include zen-grid-item-base();
-    margin: {
-      top: 0;
-      bottom: 0;
-    }
-  }
-  .l-basic__col1 {
-    @include zen-grid-item(1, 1);
-  }
-  .l-basic__col2 {
-    @include zen-grid-item(1, 2);
-  }
-}
-
-$zen-columns: 3;
-@media all and (min-width: 666px) and (max-width: 998px) {
-  .l-basic {
-    @include zen-grid-background(); // Show the new 3-column background grid image.
-  }
-  .l-basic__content {
-    @include zen-grid-item(2, 1);
-  }
-  .l-basic__aside1 {
-    @include zen-grid-item(1, 1, right); // Position from the right
-  }
-  .l-basic__aside2 {
-    @include zen-new-row(); // Clear left-floated elements (.l-basic__content)
-    @include zen-grid-item(2, 1);
-  }
-}
-
-@media all and (min-width: 777px) and (max-width: 998px) {
-  .l-basic__aside2 {
-    @include zen-new-row(right); // Clear right-floated elements (.l-basic__aside1)
-    @include zen-grid-item(1, 1, right);
-  }
-}
-
-$zen-columns: 5;
-@media all and (min-width: 999px) {
-  .l-basic {
-    @include zen-grid-background(); // Show the new 5-column background grid image.
-  }
-  .l-basic__content {
-    @include zen-grid-item(3, 2);
-  }
-  .l-basic__aside1 {
-    @include zen-grid-item(1, 1);
-  }
-  .l-basic__aside2 {
-    @include zen-grid-item(1, 5);
-  }
-  .l-basic__col1 {
-    @include zen-grid-item(2, 1, $columns: 3);
-  }
-  .l-basic__col2 {
-    @include zen-grid-item(1, 3, $columns: 3);
-  }
-}

data/templates/project/_visually-hidden.scss

@@ -1,35 +0,0 @@
-//
-// @file
-// This is an accessibility module.
-//
-
-// As defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
-@mixin visually-hidden {
-  position: absolute !important;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  @if support-legacy-browser(ie, "7") {
-    clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
-  }
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-// Turns off the visually-hidden effect.
-@mixin visually-hidden-off {
-  position: static !important;
-  clip: auto;
-  height: auto;
-  width: auto;
-  overflow: auto;
-}
-
-// Makes an element visually hidden, except when it receives focus.
-@mixin visually-focusable {
-  @include visually-hidden();
-
-  &:active,
-  &:focus {
-    @include visually-hidden-off();
-  }
-}

data/templates/project/example.html

@@ -1,100 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="utf-8">
-	<title>Zen Grids: sample usage</title>
-  <link rel="stylesheet" href="stylesheets/styles.css" media="all">
-</head>
-<body>
-
-<p class="skip-link">
-<a href="#main-menu" class="skip-link__link">Jump to main menu</a>
-</p>
-
-<div class="l-basic">
-
-  <header class="l-basic__header">
-    <p class="meta">
-      <span class="meta__heading">Header</span>
-      <span class="meta__data">HTML source order: 1</span>
-    </p>
-    <h1 class="header__title">Zen Grids: sample usage</h1>
-  </header>
-
-  <div class="l-basic__main">
-
-    <article class="l-basic__content" role="main">
-      <header class="meta">
-        <h1 class="meta__heading">Main content</h1>
-        <p class="meta__data">HTML source order: 2</p>
-      </header>
-      <p>Alice did not quite know what to say to this: so she helped herself to some tea and bread-and-butter, and then turned to the Dormouse, and repeated her question. ‘Why did they live at the bottom of a well?’</p>
-      <aside class="pull-quote">
-        <span class="meta">
-          <span class="meta__heading">Pull quote</span>
-          <span class="meta__data">HTML source order: 2.1</span>
-        </span>
-        ‘There’s no such thing!’
-      </aside>
-      <p>The Dormouse again took a minute or two to think about it, and then said, ‘It was a treacle-well.’ ‘There’s no such thing!’ Alice was beginning very angrily, but the Hatter and the March Hare went ‘Sh! sh!’ and the Dormouse sulkily remarked, ‘If you can’t be civil, you’d better finish the story for yourself.’</p>
-      <div class="l-basic__columns">
-        <p class="l-basic__col1">
-          <span class="meta">
-            <span class="meta__heading">Nested column 1</span>
-            <span class="meta__data">HTML source order: 2.2.1</span>
-          </span>
-          At some breakpoints, this is a nested grid. At some breakpoints, this is a nested grid. At some breakpoints, this is a nested grid. At some breakpoints, this is a nested grid.
-        </p>
-        <p class="l-basic__col2">
-          <span class="meta">
-            <span class="meta__heading">Nested column 2</span>
-            <span class="meta__data">HTML source order: 2.2.2</span>
-          </span>
-          At some breakpoints, this is a nested grid. At some breakpoints, this is a nested grid.
-        </p>
-      </div>
-      <p>‘No, please go on!’ Alice said very humbly; ‘I won’t interrupt again. I dare say there may be ONE.’</p>
-    </article>
-
-    <nav class="l-basic__menu" role="navigation" id="main-menu">
-      <header class="meta">
-        <h2 class="meta__heading">Menu</h2>
-        <p class="meta__data">HTML source order: 3</p>
-      </header>
-      <a href="#">Alice</a> ★
-      <a href="#">Mad Hatter</a> ★
-      <a href="#">The Queen</a> ★
-      <a href="#">Tom Petty</a>
-    </nav>
-
-    <aside class="l-basic__aside1">
-      <header class="meta">
-        <h2 class="meta__heading">Aside</h2>
-        <p class="meta__data">HTML source order: 4</p>
-      </header>
-      <p>‘Have some wine,’ the March Hare said in an encouraging tone.</p>
-    </aside>
-
-    <aside class="l-basic__aside2">
-      <header class="meta">
-        <h2 class="meta__heading">Aside</h2>
-        <p class="meta__data">HTML source order: 5</p>
-      </header>
-      <p>‘Please would you tell me,’ said Alice, a little timidly, for she was not quite sure whether it was good manners for her to speak first, ‘why your cat grins like that?’</p>
-      <p>‘It’s a Cheshire cat,’ said the Duchess, ‘and that’s why. Pig!’</p>
-    </aside>
-
-  </div>
-
-  <footer class="l-basic__footer">
-    <p class="meta">
-      <span class="meta__heading">Footer</span>
-      <span class="meta__data">HTML source order: 6</span>
-    </p>
-    <small>The small print.™</small>
-  </footer>
-
-</div>
-
-</body>
-</html>

data/templates/project/manifest.rb

@@ -1,25 +0,0 @@
-description "The Zen Grids system."
-
-stylesheet  '_init.scss',             :media => 'all'
-stylesheet  '_base-elements.scss',    :media => 'all'
-stylesheet  '_layouts.scss',          :media => 'all'
-stylesheet  '_components.scss',       :media => 'all'
-stylesheet  '_visually-hidden.scss',  :media => 'all'
-stylesheet  'styles.scss',            :media => 'all'
-
-html        'example.html'
-
-help %Q{
-Zen Grids is an intuitive, flexible grid system that leverages the natural source order of your content to make it easier to create fluid responsive designs. With an easy-to-use Sass mixin set, the Zen Grids system can be applied to an infinite number of layouts, including responsive, adaptive, fluid and fixed-width layouts. To learn more, visit:
-
-  http://zengrids.com
-}
-
-welcome_message %Q{
-You rock! The Zen Grids system is now installed on your computer. Go check out
-how to use the system at:
-
-  http://zengrids.com
-
-It's easy!
-}

data/templates/project/styles.scss

@@ -1,7 +0,0 @@
-// Import the initialization partial.
-@import "init";
-
-// Aggregate all the stylesheets into one file.
-@import "base-elements";
-@import "layouts";
-@import "components";