neat 1.7.0 → 4.0.0

data/README.md

@@ -1,282 +1,206 @@
-<img src="http://neat.bourbon.io/images/logotype.svg" width="250" />
+[<img src="http://images.thoughtbot.com/bourbon/neat-logo-v2.svg" width="200" alt="Neat logo">][Neat]
 
-[![Gem Version](http://img.shields.io/gem/v/neat.svg?style=flat)](https://rubygems.org/gems/neat) [![Travis](http://img.shields.io/travis/thoughtbot/neat.svg?style=flat)](https://travis-ci.org/thoughtbot/neat)
-[![Code Climate](http://img.shields.io/codeclimate/github/thoughtbot/neat.svg?style=flat)](https://codeclimate.com/github/thoughtbot/neat)
-[![IRC](http://img.shields.io/badge/freenode-%23bourbon--neat-ae3dd2.svg?style=flat)](#)
-[![Stack Overflow](http://img.shields.io/badge/stack%20overflow-neat-ae3dd2.svg?style=flat)](http://stackoverflow.com/questions/tagged/neat)
+[![Reviewed by Hound](https://img.shields.io/badge/Reviewed_by-Hound-8E64B0.svg)](https://houndci.com)
 
-***
+## A lightweight and flexible Sass grid
 
-## A lightweight, semantic grid framework built on top of Bourbon
+[Neat] is a fluid grid framework with the aim of being easy enough to
+use out of the box and flexible enough to customize down the road.
 
-Neat is a fluid grid framework built on [Bourbon](http://bourbon.io) with the aim of being easy enough to use out of the box and flexible enough to customize down the road.
+  [Neat]: https://neat.bourbon.io/
 
-#### [Documentation & Demo](http://neat.bourbon.io)
+### Helpful Links
 
-#### [Changelog](https://github.com/thoughtbot/neat/releases)
+- [Demos](https://neat.bourbon.io/examples/)
+- [Documentation](https://neat.bourbon.io/docs/latest/)
+- [Change log](CHANGELOG.md)
+- [Twitter](https://twitter.com/bourbonsass)
+- [Stack Overflow](https://stackoverflow.com/questions/tagged/neat)
+- [Neat 2.0 Building the future of floated Sass grids](https://robots.thoughtbot.com/building-the-future-of-floated-css-grids) by [@whmii](http://social.mcmahan.me)
+- [Getting started with Neat 2.0, a lightweight and flexible Sass grid](https://robots.thoughtbot.com/the-release-of-neat-2-0-a-lightweight-and-flexible-sass-grid) by [@whmii](http://social.mcmahan.me)
 
-## Requirements
-
-- [Sass](https://github.com/sass/sass) 3.3+ ([Use Neat
-1.5.1](#installing-older-versions-of-neat) if you are still tied to Sass 3.2)
-- [Bourbon](https://github.com/thoughtbot/bourbon) 3.1+
-
-## Installation
-
-Neat uses the [RubyGems](https://rubygems.org) package manager to easily generate a `neat` directory with all of the necessary files.
-
-1. Install the Neat gem:
-
-  ```bash
-  gem install neat
-  ```
-
-2. Install or update Neat’s dependencies:
-
-  ```bash
-  gem install sass # or gem update sass
-  ```
-  ```bash
-  gem install bourbon # or gem update bourbon
-  ```
-
-3. Install the Neat library into the current directory:
+## Table of Contents
 
-  ```bash
-  bourbon install # if not already installed
-  ```
-  ```bash
-  neat install
-  ```
+- [Requirements](#requirements)
+- [Installation](#installation)
+- [Command Line Interface](#command-line-interface)
+- [The Bourbon Family](#the-bourbon-family)
+- [Contributing](#contributing)
+- [License](#license)
+- [About](#about)
 
-4. Import Neat in your stylesheet, after Bourbon:
-
-  ```scss
-  @import "bourbon/bourbon";
-  @import "neat/neat";
-  ```
-
-  It’s not recommended to add or modify the Neat files so that you can update them easily.
-
-## Installation for Ruby on Rails
-
-1. Add Neat to your Gemfile:
-
-  ```ruby
-  gem 'neat'
-  ```
-
-2. Then run:
-
-  ```bash
-  bundle install
-  ```
+## Requirements
 
-  If you see the error `Bundler could not find compatible versions for gem "sass"`, run:
+- [Sass] 3.4+ or [LibSass] 3.3+
 
-  ```bash
-  bundle update sass
-  ```
+  [Sass]: https://github.com/sass/sass
+  [LibSass]: https://github.com/sass/libsass
 
-3. Import Neat in your `application.css.scss`, after Bourbon:
+## Installation
 
-  ```scss
-  @import "bourbon";
-  @import "neat";
-  ```
+1. Install the Neat gem using the [RubyGems] package manager:
 
-## Installing older versions of Neat
+   ```bash
+   gem install neat
+   ```
 
-1. Uninstall any Neat gem versions you already have:
+1. Install or update Neat’s dependencies:
 
-  ```bash
-  gem uninstall neat
-  ```
+   ```bash
+   gem install sass # or gem update sass
+   ```
 
-2. Reinstall the Neat gem, using the `-v` flag to specify the version you need:
+   **Pro Tip:** You can target installation into a specific directory using the
+   `path` flag:
 
-  ```bash
-  gem install neat -v 1.7.0
-  ```
+   ```bash
+   neat install --path my/custom/path/
+   ```
 
-3. Follow the [instructions above](#installation) to install Neat into your project.
+1. Install the Neat library into the current directory:
 
-## Command line interface
+   ```bash
+   neat install
+   ```
 
-```bash
-neat install
-neat update
-neat remove
-```
+1. Import Neat in your stylesheet:
 
-More information can be found in the [wiki](https://github.com/thoughtbot/neat/wiki/Command-Line-Interface).
+   ```scss
+   @import "neat/neat";
+   ```
 
-## Using Neat
+   It’s not recommended to add or modify the Neat files so that you can update
+   them easily.
 
-First off, if you are planning to override the default grid settings (12 columns), it is recommended to create a `_grid-settings.scss` file for that purpose. Make sure to import it right *before* importing Neat:
+[RubyGems]: https://rubygems.org
 
-```scss
-@import "bourbon/bourbon"; // or "bourbon" when in Rails
-@import "grid-settings";
-@import "neat/neat"; // or "neat" when in Rails
-```
+### Installation for Ruby on Rails 4.2+
 
-In your newly created  `_grid-settings.scss`, import `neat-helpers` if you are planning to use `new-breakpoint()`, then define your new variables:
+1. Add Neat to your Gemfile:
 
-```scss
-@import "neat/neat-helpers"; // or "neat-helpers" when in Rails
+   ```ruby
+   gem "neat"
+   ```
 
-// Change the grid settings
-$column: 90px;
-$gutter: 30px;
-$grid-columns: 10;
-$max-width: em(1088);
+1. Then run:
 
-// Define your breakpoints
-$tablet: new-breakpoint(max-width 768px 8);
-$mobile: new-breakpoint(max-width 480px 4);
-```
+   ```bash
+   bundle install
+   ```
 
-See the [docs](http://neat.bourbon.io/docs/#variables) for a full list of settings.
+   If you see the error `Bundler could not find compatible versions for gem
+   "sass"`, run:
 
-Next, include the `outer-container` mixin in the topmost container (to which the `max-width` setting will be applied):
+   ```bash
+   bundle update sass
+   ```
 
-```scss
-div.container {
-  @include outer-container;
-}
-```
+1. Import Neat in your `application.scss`:
 
-Then use `span-columns` on any element to specify the number of columns it should span:
+   ```scss
+   @import "neat";
+   ```
 
-```scss
-div.element {
-  @include span-columns(6);
-}
-```
+   It should be noted that `@import` rules are not compatible with Sprockets
+   directives. You need to use one or the other.
 
-If the element’s parent isn’t the top-most container, you need to add the number of columns of the parent element to keep the right proportions:
+### Installing with npm and using a Node-based asset pipeline
 
-```scss
-div.container {
-  @include outer-container;
+1. Add Neat as a dependency:
 
-  div.parent-element {
-    @include span-columns(8);
+   ```bash
+   npm install --save bourbon-neat
+   ```
 
-    div.element {
-      @include span-columns(6 of 8);
-    }
-  }
-}
-```
+1. If you’re using [eyeglass], skip to Step 3. Otherwise, you’ll need to add
+   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.
 
-To make your layout responsive, use the `media()` mixin to modify both the grid and the layout:
-
-```scss
-.my-class {
-  @include media($mobile) { // As defined in _grid-settings.scss
-    @include span-columns(2);
-  }
-}
-
-// Compiled CSS
-@media screen and (max-width: 480px) {
-  .my-class {
-    display: block;
-    float: left;
-    margin-right: 7.42297%;
-    width: 46.28851%; // 2 columns of the total 4 in this media context
-  }
-  .my-class:last-child {
-    margin-right: 0;
-  }
-}
-```
+1. Import Neat into your Sass files:
 
-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.
+   ```scss
+   @import "neat";
+   ```
 
-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.
+[eyeglass]: http://eyeglass.rocks
 
-## FAQ
+### Installing older versions of Neat
 
-#### How do I use `omega()` in a mobile-first workflow?
+1. Uninstall any Neat gem versions you already have:
 
-Using `omega()` with an `nth-child` pseudo selector in a mobile-first workflow will cause the style to be applied to wider-viewport media queries as well. That
-is the cascading nature of CSS.
+   ```bash
+   gem uninstall neat
+   ```
 
-One solution would be to provide an `omega-reset()` mixin that negates the effect of `omega()` on that specific `nth-child` pseudo selector. While this is
-often the most suggested solution, it is also a lazy hack that outputs ugly code and can quickly get out of hand in complex layouts. As a general rule, having to *undo* CSS styles is a sign of poor stylesheet architecture (more about [CSS code smells](http://csswizardry.com/2012/11/code-smells-in-css/)).
+1. Reinstall the Neat gem, using the `-v` flag to specify the version you need:
 
-The other, more elegant, solution is to use mutually exclusive media queries, also referred to as [media-query
-splitting](http://simurai.com/blog/2012/08/29/media-query-splitting). This would guarantee that `omega()` styles are only applied where desired.
+   ```bash
+   gem install neat -v 1.8.1
+   ```
 
-```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));
+1. Follow the [instructions above](#installation) to install Neat into your
+   project.
 
-.element {
-  @include media($medium-viewport) {
-    @include span-columns(6);
-    @include omega(2n);
-  }
+## Command Line Interface
 
-  @include media($large-viewport) {
-    @include span-columns(4);
-    @include omega(3n);
-  }
-}
+```bash
+neat [options]
 ```
 
-If, for some reason, you still think that `omega-reset` is the only way you want to go, check out Josh Fry’s [omega-reset](http://joshfry.me/blog/2013/05/13/omega-reset-for-bourbon-neat).
-
-#### Why are the elements not properly aligned with the visual grid?
-
-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.
+### Options
 
-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.
+| Option            | Description               |
+| :---------------- | :------------------------ |
+| `-h`, `--help`    | Show help                 |
+| `-v`, `--version` | Show the version number   |
+| `--path`          | Specify a custom path     |
+| `--force`         | Force install (overwrite) |
 
-At this point, writing an internal rounding mechanism is not high priority.
+### Commands
 
-#### Framework X has this feature that Neat seems to be missing. Can you add it?
+| Command        | Description                                        |
+| :------------- | :------------------------------------------------- |
+| `neat install` | Install Neat into the current directory            |
+| `neat update`  | Overwrite and update Neat in the current directory |
+| `neat remove`  | Removes Neat from the current directory            |
+| `neat help`    | Show help                                          |
+| `neat version` | Show the version number                            |
 
-Unless you [open a pull request](https://github.com/thoughtbot/neat/compare/), the answer is most likely going to be no. Neat is lightweight and simple compared to other grid frameworks, and strives to remain so. We have plans for adding new features in future versions of the framework, but these will be most likely to support new ways of working with layouts on the Web, not patches to existing ones.
+## The Bourbon family
 
-## Documentation
+- [Bourbon]: A lightweight Sass tool set
+- [Bitters]: Scaffold styles, variables and structure for Bourbon projects
 
-- [Full documentation](http://thoughtbot.github.io/neat-docs/latest/) (latest)
-- Neat documentation is now available by default in [Dash](http://kapeli.com/dash)
+  [Bourbon]: https://github.com/thoughtbot/bourbon
+  [Bitters]: https://github.com/thoughtbot/bitters
 
-## Links
+## Contributing
 
-- Ask questions on [Stack Overflow](http://stackoverflow.com/questions/tagged/neat). Don’t forget to tag them `bourbon` and `neat`.
-- Suggest features or file bugs in [Issues](https://github.com/thoughtbot/neat/issues).
-- Join `#bourbon-neat` on `irc.freenode.net`.
+See the [contributing] document. Thank you, [contributors]!
 
-## Browser support
+  [contributing]: CONTRIBUTING.md
+  [contributors]: https://github.com/thoughtbot/neat/graphs/contributors
 
-- Chrome 4.0+
-- Firefox 3.5+
-- Internet Explorer 9+ (visual grid is IE 10 only)
-- Internet Explorer 8 with [selectivizr](http://selectivizr.com) (no `media()` support)
-- Opera 9.5+
-- Safari 4.0+
+## License
 
-## The Bourbon family
+Neat is copyright © 2012 [thoughtbot, inc.][thoughtbot] It is free software, and
+may be redistributed under the terms specified in the [license].
 
-- [Bourbon](http://bourbon.io): A simple and lightweight mixin library for Sass
-- [Neat](http://neat.bourbon.io): A lightweight semantic grid framework for Sass and Bourbon
-- [Bitters](http://bitters.bourbon.io): Scaffold styles, variables and structure for Bourbon projects
-- [Refills](http://refills.bourbon.io): Prepackaged patterns and components, built on top of Bourbon, Bitters & Neat
+  [license]: LICENSE.md
 
-## Credits
+## About
 
-![thoughtbot](http://thoughtbot.com/images/tm/logo.png)
+Neat is maintained by the thoughtbot design team. It is funded by
+[thoughtbot, inc.][thoughtbot] and the names and logos for thoughtbot are
+trademarks of thoughtbot, inc.
 
-Neat is maintained and funded by [thoughtbot, inc](http://thoughtbot.com). Tweet your questions or suggestions to [@bourbonsass](https://twitter.com/bourbonsass) and while you’re at it follow us too.
+[![thoughtbot logo](https://presskit.thoughtbot.com/images/thoughtbot-logo-for-readmes.svg)][thoughtbot]
 
-## License
+We love open-source software! See [our other projects][community] or
+[hire us][hire] to design, develop, and grow your product.
 
-Copyright © 2012–2014 [thoughtbot, inc](http://thoughtbot.com). Neat is free software, and may be redistributed under the terms specified in the [license](LICENSE.md).
+  [thoughtbot]: https://thoughtbot.com?utm_source=github
+  [community]: https://thoughtbot.com/community?utm_source=github
+  [hire]: https://thoughtbot.com/hire-us?utm_source=github

data/RELEASING.md

@@ -0,0 +1,27 @@
+# Releasing
+
+1. Update the version number in these places:
+  - `lib/neat/version.rb`
+  - `core/_neat.scss`
+  - `package.json`
+
+1. Update `CHANGELOG.md`
+
+1. Commit changes. Use the convention “Neat vX.X.X” in your commit message.
+   There shouldn’t be code changes, and thus CI doesn’t need to run.
+
+1. Run `bundle exec rake release`, which tags the release, pushes the tag to GitHub, and
+   pushes the gem to RubyGems.org.
+
+1. Run `npm publish`, which pushes the new version to npm’s registry (if
+   releasing a pre-release, run `npm publish --tag beta`).
+
+1. Draft a [new GitHub release].
+
+1. Re-generate and publish the [documentation website].
+
+1. Announce the new release, making sure to say “thank you” to the contributors
+   who helped shape this version!
+
+[new GitHub release]: https://github.com/thoughtbot/neat/releases/new
+[documentation website]: https://github.com/thoughtbot/neat.bourbon.io

data/Rakefile

@@ -1,22 +1,8 @@
-require 'rubygems'
-require 'bundler'
-require 'rspec/core/rake_task'
+require "bundler"
+require "rspec/core/rake_task"
+
 Bundler::GemHelper.install_tasks
 
 RSpec::Core::RakeTask.new(:spec)
 
 task :default => :spec
-
-task :test do
-  puts "Creating a Bourbon directory..."
-  `bourbon install --path test`
-  puts "Generating CSS..."
-  `sass -I . --watch test:css/ --style expanded`
-end
-
-task :clean do
-  puts "Deleting Bourbon directory..."
-  `rm -rf test/bourbon`
-  puts "Deleting generated CSS..."
-  `rm -rf css/`
-end

data/bin/neat

@@ -1,5 +1,5 @@
 #!/usr/bin/env ruby
 
-require "neat"
+require File.dirname(__FILE__) + "/../lib/neat.rb"
 
-Neat::Generator.new(ARGV).run
+Neat::Generator.start

data/contrib/base/_variables.scss

@@ -0,0 +1,8 @@
+$color-neat-blue: #53aee0;
+$color-neat-orange: #ff7c56;
+$color-white: #fff;
+
+$neat-grid: (
+  columns: 12,
+  gutter: 20px,
+);

data/contrib/index.html

@@ -0,0 +1,90 @@
+<!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 role="banner">
+      <h1>
+        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>
+    </header>
+    <main role="main">
+      <div class="grid grid-visual">
+        <div class="grid__column--full">
+          <h3>Basic Floated Grid</h3>
+        </div>
+        <div class="grid__column box"></div>
+        <div class="grid__column box"></div>
+        <div class="grid__column box"></div>
+        <div class="grid__column box"></div>
+        <div class="grid__column box"></div>
+        <div class="grid__column box"></div>
+        <div class="grid__column box"></div>
+        <div class="grid__column box"></div>
+        <div class="grid__column box"></div>
+        <div class="grid__column box"></div>
+        <div class="grid__column box"></div>
+        <div class="grid__column box"></div>
+        <div class="grid__column--full">
+          <h3>RTL Grid</h3>
+        </div>
+        <div class="grid--rtl__column--thirds box">&nbsp;First</div>
+        <div class="grid--rtl__column--thirds box">&nbsp;Second</div>
+        <div class="grid--rtl__column--thirds box">&nbsp;Third</div>
+        <div class="grid__column--full">
+          <h3>Nested Grid</h3>
+        </div>
+        <div class="grid__column--thirds grid--nested">
+          <div class="grid--nested__column box--alt"></div>
+          <div class="grid--nested__column box--alt"></div>
+          <div class="grid--nested__column box--alt"></div>
+        </div>
+        <div class="grid__column--thirds box"></div>
+        <div class="grid__column--thirds box"></div>
+        <div class="grid__column--full">
+          <h3>Push Grid</h3>
+        </div>
+        <div class="grid__column--thirds grid-push--3 box"></div>
+        <div class="grid__column box"></div>
+        <div class="grid__column--thirds box"></div>
+        <div class="grid__column--full">
+          <h3>Shift Grid</h3>
+        </div>
+        <div class="grid__column--8 grid-shift--4 box">&nbsp;First</div>
+        <div class="grid__column--4 grid-shift--neg-8 box">&nbsp;Second</div>
+        <div class="grid__column--full">
+          <h3>Shorthand Sub-Grid</h3>
+        </div>
+        <div class="grid__column--3-of-5 box"></div>
+        <div class="grid__column--2-of-5 box"></div>
+        <div class="grid__column--3-of-5 box grid-push--2-of-5"></div>
+        <div class="grid__column--full">
+          <h3>Grid Media Queries</h3>
+        </div>
+        <div class="grid-column--media-3-to-6 box"></div>
+        <div class="grid__column--full">
+          <h3>Grid collapse</h3>
+        </div>
+        <div class="grid__column--thirds box"></div>
+        <div class="grid__column--thirds">
+            <div class="grid-collapse">
+              <div class="grid__column--thirds box"></div>
+              <div class="grid__column--thirds box"></div>
+              <div class="grid__column--thirds box"></div>
+            </div>
+        </div>
+        <div class="grid__column--thirds box"></div>
+      </div>
+    </main>
+  </body>
+</html>

data/contrib/patterns/_box.scss

@@ -0,0 +1,11 @@
+.box {
+  background-color: $color-neat-blue;
+  margin-bottom: 10px;
+  min-height: 30px;
+  padding: 0.5rem;
+}
+
+.box--alt {
+  @extend .box;
+  border: 2px solid $color-neat-orange;
+}

data/contrib/patterns/_global.scss

@@ -0,0 +1,32 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Avenir Next",
+    "Avenir",
+    "Segoe UI",
+    "Lucida Grande",
+    "Helvetica Neue",
+    "Helvetica",
+    "Fira Sans",
+    "Roboto",
+    "Noto",
+    "Droid Sans",
+    "Cantarell",
+    "Oxygen",
+    "Ubuntu",
+    "Franklin Gothic Medium",
+    "Century Gothic",
+    "Liberation Sans",
+     sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-weight: 400;
+}

data/contrib/patterns/_grid-collapse.scss

@@ -0,0 +1,3 @@
+.grid-collapse {
+  @include grid-collapse;
+}