neat 1.7.2 → 1.7.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c6b50c07d8c966cedba1f86748bbb548de235b73
-  data.tar.gz: 369a8d7abf93b2225c286e14b952cfe7b5eab1e9
+  metadata.gz: 6d8b70193c0b73127b13475fa5eb738ac2fb7923
+  data.tar.gz: 2641b56bdc7a8a6e5a5408f0ed8dbc4d93dbc201
 SHA512:
-  metadata.gz: 9399ce5a9ea9621a8133b3ca962f4e89646e61551e59ea8b1c64480e60661581b3445e43a8e9f043f22061060433e44eb098020065eb54fc60a451900de0376e
-  data.tar.gz: 8d11fb480e5d1f7948c88eeac66312941e5150dfec9e62b32dfb019ccc69d38886c53a23d540f41d67217e45ec9399471d33e912f9f42ece3deb630096ff682c
+  metadata.gz: 49f3ff183d4038fd0a28dd27c73569a953e6eb523fbf8214cc274f21e076f3e6531b5907f0700e69b4834cfea9f8fa5de0038e82517646cd328b26d56387af2f
+  data.tar.gz: 7b8fb96a07d9e245cae2980a18bddd66cc09df1c5693a40b570ad64cf07fc997d510fe9aa02360ac8e75a7742b4b9ad0aad0152198810c0ec61d447217e6e383

data/.gitignore

@@ -5,3 +5,5 @@
 Gemfile.lock
 public
 tmp
+contrib/*.css
+node_modules

data/.npmignore

@@ -0,0 +1,19 @@
+.gitignore
+.rspec
+.sass-cache
+.scss-lint.yml
+.travis.yml
+_site
+bin/
+bower.json
+CONTRIBUTING.md
+Gemfile
+Gemfile.lock
+lib/
+neat.gemspec
+NEWS.md
+pkg/
+Rakefile
+sache.json
+spec/
+test/

data/.scss-lint.yml

@@ -1,4 +1,4 @@
-scss_files: "app/assets/stylesheets/**/*.scss"
+scss_files: "**/*.scss"
 
 linters:
   BangFormat:
@@ -6,15 +6,25 @@ linters:
     space_before_bang: true
     space_after_bang: false
 
+  BemDepth:
+    enabled: false
+
   BorderZero:
+    enabled: true
+    convention: zero
+
+  ChainedClasses:
     enabled: false
 
   ColorKeyword:
     enabled: true
-    severity: warning
+
+  ColorVariable:
+    enabled: false
 
   Comment:
     enabled: true
+    style: silent
 
   DebugStatement:
     enabled: true
@@ -22,6 +32,9 @@ linters:
   DeclarationOrder:
     enabled: true
 
+  DisableLinterReason:
+    enabled: false
+
   DuplicateProperty:
     enabled: true
 
@@ -36,12 +49,15 @@ linters:
   EmptyRule:
     enabled: true
 
+  ExtendDirective:
+    enabled: false
+
   FinalNewline:
     enabled: true
     present: true
 
   HexLength:
-    enabled: false
+    enabled: true
     style: short
 
   HexNotation:
@@ -51,7 +67,10 @@ linters:
   HexValidation:
     enabled: true
 
-  IdWithExtraneousSelector:
+  IdSelector:
+    enabled: true
+
+  ImportantRule:
     enabled: true
 
   ImportPath:
@@ -61,6 +80,7 @@ linters:
 
   Indentation:
     enabled: true
+    allow_non_nested_indentation: false
     character: space
     width: 2
 
@@ -74,44 +94,65 @@ linters:
 
   NameFormat:
     enabled: true
+    allow_leading_underscore: true
     convention: hyphenated_lowercase
 
   NestingDepth:
     enabled: true
-    max_depth: 4
-    severity: warning
+    max_depth: 3
+    ignore_parent_selectors: false
 
   PlaceholderInExtend:
+    enabled: true
+
+  PropertyCount:
     enabled: false
 
   PropertySortOrder:
     enabled: true
     ignore_unspecified: false
-    severity: warning
+    min_properties: 2
+    separate_groups: false
 
   PropertySpelling:
     enabled: true
     extra_properties: []
+    disabled_properties: []
+
+  PropertyUnits:
+    enabled: true
+    global: [
+      'ch', 'em', 'ex', 'rem',
+      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q',
+      'vh', 'vw', 'vmin', 'vmax',
+      'deg', 'grad', 'rad', 'turn',
+      'ms', 's',
+      'Hz', 'kHz',
+      'dpi', 'dpcm', 'dppx',
+      '%']
+    properties:
+      line-height: []
+
+  PseudoElement:
+    enabled: true
 
   QualifyingElement:
     enabled: true
-    allow_with_attribute: false
-    allow_with_class: false
-    allow_with_id: false
-    severity: warning
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
 
   SelectorDepth:
     enabled: true
     max_depth: 2
-    severity: warning
 
   SelectorFormat:
-    enabled: true
-    convention: hyphenated_lowercase
+    enabled: false
+    convention: hyphenated_BEM
 
   Shorthand:
     enabled: true
-    severity: warning
+    allowed_shorthands: [1, 2, 3]
 
   SingleLinePerProperty:
     enabled: true
@@ -122,6 +163,7 @@ linters:
 
   SpaceAfterComma:
     enabled: true
+    style: one_space
 
   SpaceAfterPropertyColon:
     enabled: true
@@ -130,10 +172,17 @@ linters:
   SpaceAfterPropertyName:
     enabled: true
 
+  SpaceAfterVariableName:
+    enabled: true
+
+  SpaceAroundOperator:
+    enabled: true
+    style: one_space
+
   SpaceBeforeBrace:
     enabled: true
     style: space
-    allow_single_line_padding: false
+    allow_single_line_padding: true
 
   SpaceBetweenParens:
     enabled: true
@@ -146,8 +195,14 @@ linters:
   TrailingSemicolon:
     enabled: true
 
+  TrailingWhitespace:
+    enabled: true
+
   TrailingZero:
-    enabled: false
+    enabled: true
+
+  TransitionAll:
+    enabled: true
 
   UnnecessaryMantissa:
     enabled: true
@@ -161,15 +216,18 @@ linters:
   UrlQuotes:
     enabled: true
 
-  VendorPrefixes:
+  VariableForProperty:
+    enabled: false
+    properties: []
+
+  VendorPrefix:
     enabled: true
-    identifier_list: bourbon
-    include: []
-    exclude: []
+    identifier_list: base
+    additional_identifiers: []
+    excluded_identifiers: []
 
   ZeroUnit:
     enabled: true
-    severity: warning
 
   Compass::*:
     enabled: false

data/.travis.yml

@@ -1,5 +1,6 @@
 language: ruby
 rvm: 2.0.0
+sudo: false
 branches:
   except:
     - gh-pages

data/CONTRIBUTING.md

@@ -1,4 +1,7 @@
-We love pull requests. Here's a quick guide:
+We love pull requests from everyone. By participating in this project, you
+agree to abide by the thoughtbot [code of conduct]. Here’s a quick guide:
+
+[code of conduct]: https://thoughtbot.com/open-source-code-of-conduct
 
 1. Fork the repository.
 2. Make your changes in a topic branch.

data/Gulpfile.js

@@ -0,0 +1,33 @@
+var bourbon    = require("bourbon").includePaths,
+    autoprefix = require("gulp-autoprefixer"),
+    connect    = require("gulp-connect"),
+    gulp       = require("gulp"),
+    sass       = require("gulp-sass");
+
+var paths = {
+  scss: [
+    "./app/assets/stylesheets/**/*.scss",
+    "./contrib/styles.scss"]
+};
+
+gulp.task("sass", function () {
+  return gulp.src(paths.scss)
+    .pipe(sass({
+      includePaths: ["styles"].concat(bourbon)
+    }))
+    .pipe(autoprefix("last 2 versions"))
+    .pipe(gulp.dest("./contrib"))
+    .pipe(connect.reload());
+});
+
+gulp.task("connect", function() {
+  connect.server({
+    root: "contrib",
+    port: 8000,
+    livereload: true
+  });
+});
+
+gulp.task("default", ["sass", "connect"], function() {
+  gulp.watch(paths.scss, ["sass"]);
+});

data/README.md

@@ -90,6 +90,23 @@ For command line help, visit our wiki page on Neat’s [command line interface](
 
   It should be noted that `@import` rules are not compatible with Sprockets directives. You need to use one or the other.
 
+## Installing with npm and using a Node-based asset pipeline
+
+1. Add Neat as a dependency:
+
+  ```bash
+  npm install --save bourbon-neat
+  ```
+
+1. If you’re using [Eyeglass](http://eyeglass.rocks), skip to Step 3. Otherwise, you’ll need to add Bourbon and Neat to your node-sass `includePaths` option. `require("bourbon-neat").includePaths` is an array of directories that you should pass to node-sass. How you do this depends on how node-sass is integrated into your project. You will also need to ensure that Bourbon is in the `includePaths` passed to node-sass.
+
+1. Import Neat into your Sass files, after Bourbon:
+
+  ```scss
+  @import "bourbon";
+  @import "neat";
+  ```
+
 ## Installing older versions of Neat
 
 1. Uninstall any Neat gem versions you already have:
@@ -125,7 +142,7 @@ In your newly created  `_grid-settings.scss`, import `neat-helpers` if you are p
 $column: 90px;
 $gutter: 30px;
 $grid-columns: 10;
-$max-width: em(1088);
+$max-width: 1200px;
 
 // Define your breakpoints
 $tablet: new-breakpoint(max-width 768px 8);
@@ -189,7 +206,11 @@ To make your layout responsive, use the `media()` mixin to modify both the grid
 }
 ```
 
-By setting `$visual-grid` to `true`, you can display the base grid in the background (default) or as an overlay. You can even change the color and opacity of the grid-lines by overriding the default settings as detailed in the section below.
+By setting `$visual-grid` to `true` in a file that is imported before
+`neat-helpers` (or prior to `neat` itself if you are using the default
+breakpoints), you can display the base grid in the background (default) or as an
+overlay. You can even change the color and opacity of the grid-lines by
+overriding the default settings as detailed in the section below.
 
 The visual grid reflects the changes applied to the grid via the `new-breakpoint()` mixin, as long as the media contexts are defined *before* importing Neat.
 
@@ -207,8 +228,8 @@ splitting](http://simurai.com/blog/2012/08/29/media-query-splitting). This would
 ```scss
 $first-breakpoint-value: 400px;
 $second-breakpoint-value: 700px;
-$medium-viewport: new-breakpoint(min-width em($first-breakpoint-value) max-width em($second-breakpoint-value));
-$large-viewport: new-breakpoint(min-width em($second-breakpoint-value + 1));
+$medium-viewport: new-breakpoint(min-width $first-breakpoint-value max-width $second-breakpoint-value);
+$large-viewport: new-breakpoint(min-width $second-breakpoint-value + 1);
 
 .element {
   @include media($medium-viewport) {
@@ -229,7 +250,7 @@ If, for some reason, you still think that `omega-reset` is the only way you want
 
 The visual grid is built using CSS gradients whose stops might contain decimal values depending on the default settings of your grid. In order to render the gradient, browsers round the pixel values since they can’t deal with pixel fractions.
 
-As a result the viusal grid might be few pixels off in some browsers. The result is also inconsistent across browsers. For best results, preview your website on Firefox as it renders closest to the expected outcome.
+As a result the visual grid might be few pixels off in some browsers. The result is also inconsistent across browsers. For best results, preview your website on Firefox as it renders closest to the expected outcome.
 
 At this point, writing an internal rounding mechanism is not high priority.
 
@@ -259,14 +280,14 @@ Copyright © 2012–2015 [thoughtbot, inc](http://thoughtbot.com). Neat is free
 
 ## About thoughtbot
 
-![thoughtbot](https://thoughtbot.com/logo.png)
+[<img src="http://thoughtbot.github.io/images/signature.svg" width="250" alt="thoughtbot logo">][hire]
 
 Neat is maintained and funded by thoughtbot, inc.
 The names and logos for thoughtbot are trademarks of thoughtbot, inc.
 
 We love open source software!
-See [our other projects][community] or
-[hire us][hire] to design, develop, and grow your product.
+See [our other projects][community]
+or [hire us][hire] to design, develop, and grow your product.
 
 [community]: https://thoughtbot.com/community?utm_source=github
 [hire]: https://thoughtbot.com/hire-us?utm_source=github

data/app/assets/stylesheets/_neat.scss

@@ -1,4 +1,4 @@
-// Neat 1.7.2
+// Neat 1.7.3
 // http://neat.bourbon.io
 // Copyright 2012-2015 thoughtbot, inc.
 // MIT License

data/app/assets/stylesheets/grid/_outer-container.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-/// Makes an element a outer container by centring it in the viewport, clearing its floats, and setting its `max-width`.
+/// Makes an element a outer container by centering it in the viewport, clearing its floats, and setting its `max-width`.
 /// Although optional, using `outer-container` is recommended. The mixin can be called on more than one element per page, as long as they are not nested.
 ///
 /// @param {Number [unit]} $local-max-width [$max-width]

data/app/assets/stylesheets/grid/_span-columns.scss

@@ -12,7 +12,7 @@
 ///   `$columns` also accepts decimals for when it's necessary to break out of the standard grid. E.g. Passing `2.4` in a standard 12 column grid will divide the row into 5 columns.
 ///
 /// @param {String} $display [block]
-///   Sets the display property of the element. By default it sets the display propert of the element to `block`.
+///   Sets the display property of the element. By default it sets the display property of the element to `block`.
 ///
 ///   If passed `block-collapse`, it also removes the margin gutter by adding it to the element width.
 ///

data/app/assets/stylesheets/settings/_grid.scss

@@ -1,12 +1,12 @@
 @charset "UTF-8";
 
-/// Sets the relative width of a single grid column. The unit used should be the same one used to define `$gutter`. To learn more about modular-scale() see [Bourbon docs](http://bourbon.io/docs/#modular-scale). Set with a `!global` flag.
+/// Sets the relative width of a single grid column. The unit used should be the same one used to define `$gutter`. To learn more about `modular-scale()` see [Bourbon docs](http://bourbon.io/docs/#modular-scale). Set with a `!global` flag.
 ///
 /// @type Number (Unit)
 
 $column: modular-scale(3, 1em, $golden) !default;
 
-/// Sets the relative width of a single grid gutter. The unit used should be the same one used to define `$column`. To learn more about modular-scale() see [Bourbon docs](http://bourbon.io/docs/#modular-scale). Set with the `!global` flag.
+/// Sets the relative width of a single grid gutter. The unit used should be the same one used to define `$column`. To learn more about `modular-scale()` see [Bourbon docs](http://bourbon.io/docs/#modular-scale). Set with the `!global` flag.
 ///
 /// @type Number (Unit)
 
@@ -18,11 +18,11 @@ $gutter: modular-scale(1, 1em, $golden) !default;
 
 $grid-columns: 12 !default;
 
-/// Sets the max-width property of the element that includes `outer-container()`. To learn more about `em()` see [Bourbon docs](http://bourbon.io/docs/#px-to-em). Set with the `!global` flag.
+/// Sets the max-width property of the element that includes `outer-container()`. Set with the `!global` flag.
 ///
 /// @type Number (Unit)
 ///
-$max-width: em(1088) !default;
+$max-width: 1200px !default;
 
 /// When set to true, it sets the box-sizing property of all elements to `border-box`. Set with a `!global` flag.
 ///

data/bower.json

@@ -1,7 +1,7 @@
 {
   "name": "neat",
   "description": "A lightweight, semantic grid framework built with Bourbon",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "main": "app/assets/stylesheets/_neat.scss",
   "license": "MIT",
   "ignore": [

data/contrib/index.html

@@ -0,0 +1,225 @@
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="utf-8">
+      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+      <meta name="viewport" content="width=device-width,initial-scale=1">
+      <title>Have fun ❤︎</title>
+      <link rel="stylesheet" href="styles.css">
+    </head>
+    <body>
+      <header class="welcome-message" role="banner">
+        <div class="container">
+          <h1 class="welcome-message-title">
+            Hey there! Thanks for contributing to
+            <a href="http://neat.bourbon.io">Neat</a>.
+          </h1>
+          <p>
+            The purpose of this page is to help contributors view and test
+            changes to Neat.
+          </p>
+        </div>
+      </header>
+      <main role="main">
+        <h3>Basic</h3>
+        <section class="page-section zero">
+        <code>@include outer-container;</code>
+          <div class="page-section-inner zero-alpha">
+            <code>@include span-columns(6);</code>
+          </div>
+          <div class="page-section-inner zero-beta">
+            <code>@include span-columns(6);</code>
+          </div>
+        </section>
+        <h3>Multiple rows</h3>
+        <section class="page-section first">
+          <code>@include outer-container;</code>
+          <div class="page-section-inner first-alpha">
+            <code>(1)</code>
+          </div>
+          <div class="page-section-inner first-beta">
+            <code>
+              @include span-columns(11);<br>
+              @include omega();
+            </code>
+          </div>
+          <div class="page-section-inner first-gamma">
+            <code>
+              @include span-columns(2);
+              </code>
+          </div>
+          <div class="page-section-inner first-delta">
+            <code>
+              @include span-columns(10);<br>
+              @include omega();
+            </code>
+          </div>
+          <div class="page-section-inner first-epsilon">
+            <code>
+              @include span-columns(3);
+            </code>
+          </div>
+          <div class="page-section-inner first-zeta">
+            <code>
+              @include span-columns(9);<br>
+              @include omega();
+            </code>
+          </div>
+          <div class="page-section-inner first-eta">
+            <code>
+              @include span-columns(4);
+            </code>
+          </div>
+          <div class="page-section-inner first-theta">
+            <code>
+              @include span-columns(8);<br>
+            @include omega();
+            </code>
+          </div>
+          <div class="page-section-inner first-iota">
+            <code>
+              @include span-columns(5);
+            </code>
+          </div>
+          <div class="page-section-inner first-kappa">
+            <code>
+              @include span-columns(7);<br>
+              @include omega();
+            </code>
+          </div>
+          <div class="page-section-inner first-lambda">
+            <code>
+              @include span-columns(6);
+            </code>
+          </div>
+          <div class="page-section-inner first-mu">
+            <code>
+              @include span-columns(6);<br>
+              @include omega();
+            </code>
+          </div>
+        </section>
+        <h3>Nesting columns</h3>
+        <section class="page-section second">
+          <code>@include outer-container;</code>
+          <div class="page-section-inner second-alpha">
+            <code>@include span-columns(4);</code>
+          </div>
+          <div class="page-section-inner second-beta">
+            <code class="block">@include span-columns(8);</code>
+            <aside class="second-beta-alpha">
+              <code>@include span-columns(4 of 8);</code>
+            </aside>
+            <article class="second-beta-beta">
+              <code>@include span-columns(4 of 8);</code>
+            </article>
+          </div>
+        </section>
+        <h3>Table grid</h3>
+        <section class="page-section third">
+          <code>@include outer-container;</code>
+          <div class="page-section-inner third-dummy">
+            <code>
+              @include fill-parent();<br>
+              @include row(table);
+            </code>
+          </div>
+          <div class="page-section-inner third-alpha">
+            <aside class="third-alpha-alpha">
+              <code>
+                @include span-columns(4);<br>
+                @include pad();
+              </code>
+            </aside>
+            <article class="third-alpha-beta">
+              <code>
+                @include span-columns(8);<br>
+                @include reset-display;
+              </code>
+            </article>
+          </div>
+        </section>
+        <h3>Shifting columns</h3>
+        <section class="page-section fourth">
+          <code>@include outer-container;</code>
+          <div class="page-section-inner fourth-alpha">
+            <code>
+              @include span-columns(6);<br>
+              @include shift(3);
+            </code>
+          </div>
+        </section>
+        <h3>Automatic rows</h3>
+        <div class="code">
+          <code>@include outer-container;</code>
+        </div>
+        <section class="page-section fifth">
+          <div class="box">
+<pre>
+  .box {
+    @include span-columns(3);
+    @include omega(4n);
+  }
+</pre>
+          </div>
+          <div class="fifth-box page-section-inner">
+             <code>.box</code>
+          </div>
+          <div class="fifth-box page-section-inner">
+             <code>.box</code>
+          </div>
+          <div class="fifth-box page-section-inner">
+             <code>.box</code>
+          </div>
+          <div class="fifth-box page-section-inner">
+             <code>.box</code>
+          </div>
+          <div class="fifth-box page-section-inner">
+             <code>.box</code>
+          </div>
+          <div class="fifth-box page-section-inner">
+             <code>.box</code>
+          </div>
+          <div class="fifth-box page-section-inner">
+            <code>.box</code>
+          </div>
+          <div class="fifth-box page-section-inner">
+             <code>.box</code>
+          </div>
+          <div class="fifth-box page-section-inner">
+             <code>.box</code>
+          </div>
+          <div class="fifth-box page-section-inner">
+             <code>.box</code>
+          </div>
+          <div class="fifth-box page-section-inner">
+             <code>.box</code>
+          </div>
+        </section>
+        <h3>Media Queries</h3>
+        <section class="page-section sixth">
+<pre>
+  @include outer-container;
+  $mobile: new-breakpoint(max-width 500px 4);
+</pre>
+          <div class="page-section-inner sixth-alpha">
+<pre>
+  @include span-columns(4);
+
+  @include media($mobile) {
+    @include span-columns(3);
+  }
+</pre>
+          </div>
+          <div class="page-section-inner sixth-beta">
+<pre>
+  @include span-columns(8);
+  @include media($mobile) {
+    @include span-columns(3);
+  }
+</pre>
+          </div>
+        </section>
+      </main>
+    </body>
+  </html>

data/contrib/styles.scss

@@ -0,0 +1,292 @@
+@import "bourbon";
+@import "../app/assets/stylesheets/neat";
+
+// Grid Settings
+$column: 90px;
+$gutter: 30px;
+$grid-columns: 12;
+$max-width: 1200px;
+
+// Media
+$medium-screen: 600px;
+$large-screen: 900px;
+
+$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
+$large-screen-up: new-breakpoint(min-width $large-screen 8);
+
+// Base
+$base-line-height: 1.625;
+$base-spacing: $base-line-height * 1em;
+
+// Visual Grid
+$visual-grid: true;
+$visual-grid-color: #e6f6ff;
+$visual-grid-opacity: 0.4;
+
+// Colors
+$white: #fafafa;
+$lightblue: #d5eefb;
+$blue: #aadbf5;
+$darkblue: #41a8df;
+$darkerblue: #072f44;
+
+// Base
+// ============================================
+
+body {
+  color: $darkerblue;
+  font-family: $helvetica;
+  line-height: $base-line-height;
+  margin: 0 0 (1.5rem * 2);
+  text-align: center;
+}
+
+h3 {
+  margin: 1em;
+}
+
+a,
+a:visited {
+  color: inherit;
+}
+
+pre {
+  line-height: 1.6em;
+}
+
+code {
+  display: block;
+}
+
+// Header
+// ============================================
+
+.container {
+  @include margin(null auto);
+  @include padding(null $gutter);
+  max-width: 500px;
+  position: relative;
+}
+
+.welcome-message {
+  @include clearfix();
+  @include padding($base-spacing null);
+  background-color: $blue;
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.welcome-message-title {
+  font-weight: 200;
+  line-height: 1;
+}
+
+// ============================================
+
+.code {
+  @include outer-container();
+  background-color: $lightblue;
+  padding: 0.5em;
+  text-align: center;
+}
+
+.page-section {
+  @include outer-container;
+  background-color: $lightblue;
+  line-height: $base-line-height * 1.5;
+  margin-bottom: 3em;
+  text-align: center;
+}
+
+.page-section-inner {
+  background-color: $blue;
+  font-size: 0.8em;
+  height: $base-line-height * 4rem;
+  line-height: $base-line-height;
+  margin-bottom: 2em;
+  padding: 1em;
+  text-align: left;
+}
+
+// Zero
+// ============================================
+
+.zero-alpha,
+.zero-beta {
+  @include span-columns(6);
+  height: $base-line-height * 4rem;
+  line-height: $base-line-height;
+  padding: 1em;
+  text-align: left;
+}
+
+// First
+// ============================================
+
+.first-alpha {
+  @include span-columns(1);
+}
+
+.first-beta {
+  @include span-columns(11);
+}
+
+.first-gamma {
+  @include span-columns(2);
+}
+
+.first-delta {
+  @include span-columns(10);
+}
+
+.first-epsilon {
+  @include span-columns(3);
+}
+
+.first-zeta {
+  @include span-columns(9);
+}
+
+.first-eta {
+  @include span-columns(4);
+}
+
+.first-theta {
+  @include span-columns(8);
+}
+
+.first-iota {
+  @include span-columns(5);
+}
+
+.first-kappa {
+  @include span-columns(7);
+}
+
+.first-lambda {
+  @include span-columns(6);
+}
+
+.first-mu {
+  @include span-columns(6);
+}
+
+.first-beta,
+.first-delta,
+.first-zeta,
+.first-theta,
+.first-kappa,
+.first-mu {
+  @include omega;
+}
+
+// Second
+// ============================================
+
+.second-alpha {
+  @include span-columns(4);
+}
+
+.second-beta {
+  @include span-columns(8);
+  line-height: $base-line-height * 2;
+  padding: 0;
+  text-align: center;
+}
+
+.second-beta-alpha,
+.second-beta-beta {
+  @include span-columns(4 of 8);
+  background-color: $lightblue;
+  height: 84%;
+  padding: 1em;
+}
+
+// Third
+// ===================================
+
+.third-dummy {
+  border-bottom: 0;
+  height: 5.5em;
+  text-align: center;
+}
+
+.third-alpha {
+  @include fill-parent();
+  @include row(table);
+  margin-bottom: 0;
+  padding: 0;
+}
+
+.third-alpha-alpha {
+  @include span-columns(4);
+  border-right: 1px solid rgba($white, 0.5);
+}
+
+.third-alpha-beta {
+  @include reset-display;
+  @include span-columns(8);
+  height: 20em;
+}
+
+// Fourth
+// ===================================
+
+.fourth {
+
+  .fourth-alpha {
+    @include span-columns(6);
+    @include shift(3);
+    height: 20em;
+    text-align: center;
+  }
+}
+
+// Fifth
+// ===================================
+
+.fifth-box {
+  @include omega(4n);
+  @include span-columns(3);
+  font-size: 0.78em;
+  height: 8em;
+  margin-top: 2em;
+}
+
+// Fifth
+// ===================================
+
+.sixth {
+  @include media($medium-screen) {
+    font-size: 0.9em;
+    line-height: 1.5em;
+  }
+
+  pre {
+    padding: 10px 0;
+  }
+}
+
+.sixth-alpha,
+.sixth-beta {
+  line-height: 2em;
+  min-height: 20em;
+  padding: 1em;
+  text-align: left;
+}
+
+.sixth-alpha {
+  @include span-columns(4);
+
+  @include media($medium-screen) {
+    @include span-columns(3);
+  }
+}
+
+.sixth-beta {
+  @include span-columns(8);
+
+  @include media($medium-screen) {
+    @include span-columns(3);
+  }
+}

data/eyeglass-exports.js

@@ -0,0 +1,7 @@
+var neat = require("./index");
+
+module.exports = function(eyeglass, sass) {
+  return {
+    sassDir: neat.includePaths[0]
+  };
+};

data/index.js

@@ -0,0 +1,7 @@
+var path = require("path");
+
+module.exports = {
+  includePaths: [
+    path.join(__dirname, "app/assets/stylesheets"),
+  ]
+};

data/lib/neat/version.rb

@@ -1,3 +1,3 @@
 module Neat
-  VERSION = '1.7.2'
+  VERSION = "1.7.3"
 end

data/neat.gemspec

@@ -26,12 +26,12 @@ enough to use out of the box and flexible enough to customize down the road.
   s.add_dependency('sass', '>= 3.3')
   s.add_dependency('bourbon', '>= 4.0')
 
+  s.add_development_dependency("scss_lint", "~> 0.43")
   s.add_development_dependency('aruba', '~> 0.5.0')
-  s.add_development_dependency('rake')
-  s.add_development_dependency('css_parser')
-  s.add_development_dependency('rspec')
-  s.add_development_dependency('rdoc')
   s.add_development_dependency('bundler')
+  s.add_development_dependency('css_parser')
+  s.add_development_dependency('rake')
   s.add_development_dependency('rb-fsevent', '~> 0.9.1')
-  s.add_development_dependency('scss-lint', '~> 0.29.0')
+  s.add_development_dependency('rdoc')
+  s.add_development_dependency('rspec')
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bourbon-neat",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "A lightweight, semantic grid framework built with Bourbon",
   "keywords": [
     "bourbon",
@@ -13,7 +13,8 @@
     "queries",
     "sass",
     "scss",
-    "semantic"
+    "semantic",
+    "eyeglass-module"
   ],
   "homepage": "http://neat.bourbon.io",
   "bugs": {
@@ -24,12 +25,27 @@
     "name": "thoughtbot",
     "url": "http://thoughtbot.com"
   },
-  "main": "app/assets/stylesheets/_neat.scss",
+  "main": "index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/thoughtbot/neat.git"
   },
   "scripts": {
     "test": "echo \"No test specified\""
+  },
+  "dependencies": {
+    "bourbon": "^4.2",
+    "node-sass": "^3.4"
+  },
+  "devDependencies": {
+    "gulp": "^3.9",
+    "gulp-autoprefixer": "^3.1",
+    "gulp-connect": "^2.3",
+    "gulp-sass": "^2.2"
+  },
+  "eyeglass": {
+    "name": "neat",
+    "needs": "*",
+    "exports": "eyeglass-exports.js"
   }
 }

data/test/_setup.scss

@@ -1,3 +1,3 @@
-@import 'bourbon/bourbon';
-@import '../app/assets/stylesheets/neat';
+@import "bourbon/bourbon";
+@import "../app/assets/stylesheets/neat";
 $disable-warnings: true !global;

data/test/default.scss

@@ -1 +1 @@
-@import 'setup';
+@import "setup";

data/test/direction-context.scss

@@ -1,4 +1,4 @@
-@import 'setup';
+@import "setup";
 
 @include direction-context() {
   .default-block {

data/test/display-context.scss

@@ -1,4 +1,4 @@
-@import 'setup';
+@import "setup";
 
 @include display-context(table) {
   .display-table-block {

data/test/media.scss

@@ -1,4 +1,4 @@
-@import 'setup';
+@import "setup";
 
 $composite: new-breakpoint(max-width 768px min-width 110px orientation portait 6);
 

data/test/new-breakpoint.scss

@@ -1,4 +1,4 @@
-@import 'setup';
+@import "setup";
 
 $tablet: new-breakpoint(max-width 768px 12);
 

data/test/omega.scss

@@ -1,4 +1,4 @@
-@import 'setup';
+@import "setup";
 
 .omega-default {
   @include omega;

data/test/outer-container.scss

@@ -1,4 +1,4 @@
-@import 'setup';
+@import "setup";
 
 $max-width: 960px;
 

data/test/pad.scss

@@ -1,4 +1,4 @@
-@import 'setup';
+@import "setup";
 
 .pad-default {
   @include pad;

data/test/row.scss

@@ -1,4 +1,4 @@
-@import 'setup';
+@import "setup";
 
 .row-default {
   @include row;

data/test/shift.scss

@@ -1,4 +1,4 @@
-@import 'setup';
+@import "setup";
 
 .shift-default {
   @include shift;

data/test/span-columns.scss

@@ -1,4 +1,4 @@
-@import 'setup';
+@import "setup";
 
 .span-columns-default {
   @include span-columns(6);

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: neat
 version: !ruby/object:Gem::Version
-  version: 1.7.2
+  version: 1.7.3
 platform: ruby
 authors:
 - Joel Oliveira
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-03-13 00:00:00.000000000 Z
+date: 2016-02-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -41,35 +41,35 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '4.0'
 - !ruby/object:Gem::Dependency
-  name: aruba
+  name: scss_lint
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.5.0
+        version: '0.43'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.5.0
+        version: '0.43'
 - !ruby/object:Gem::Dependency
-  name: rake
+  name: aruba
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 0.5.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 0.5.0
 - !ruby/object:Gem::Dependency
-  name: css_parser
+  name: bundler
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -83,7 +83,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: rspec
+  name: css_parser
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -97,7 +97,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: rdoc
+  name: rake
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -111,47 +111,47 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: bundler
+  name: rb-fsevent
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 0.9.1
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 0.9.1
 - !ruby/object:Gem::Dependency
-  name: rb-fsevent
+  name: rdoc
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 0.9.1
+        version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 0.9.1
+        version: '0'
 - !ruby/object:Gem::Dependency
-  name: scss-lint
+  name: rspec
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 0.29.0
+        version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 0.29.0
+        version: '0'
 description: |
   Neat is a fluid grid framework built with Bourbon with the aim of being easy
   enough to use out of the box and flexible enough to customize down the road.
@@ -162,11 +162,13 @@ extensions: []
 extra_rdoc_files: []
 files:
 - ".gitignore"
+- ".npmignore"
 - ".rspec"
 - ".scss-lint.yml"
 - ".travis.yml"
 - CONTRIBUTING.md
 - Gemfile
+- Gulpfile.js
 - LICENSE.md
 - NEWS.md
 - README.md
@@ -194,6 +196,10 @@ files:
 - app/assets/stylesheets/settings/_visual-grid.scss
 - bin/neat
 - bower.json
+- contrib/index.html
+- contrib/styles.scss
+- eyeglass-exports.js
+- index.js
 - lib/neat.rb
 - lib/neat/engine.rb
 - lib/neat/generator.rb
@@ -252,7 +258,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: neat
-rubygems_version: 2.2.2
+rubygems_version: 2.5.2
 signing_key: 
 specification_version: 4
 summary: A lightweight, semantic grid framework built with Bourbon
@@ -287,3 +293,4 @@ test_files:
 - test/row.scss
 - test/shift.scss
 - test/span-columns.scss
+has_rdoc: