neat 1.7.0.pre → 1.7.0.rc

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0e635b5420b471f2183b97fb89b6a5085bacd7da
-  data.tar.gz: 1d5b344bbab66a83e193c33fde8da949107cac33
+  metadata.gz: b996a39a49ee89437c9c66930f7fd860660e166e
+  data.tar.gz: 0e1980f94876d7b98af734c6fb440e15a276a402
 SHA512:
-  metadata.gz: 2f86479acc7c2051ff5d3cc355f8eedc7fe63bb9e95284cd7ab5d8f279373100b1e5909f1eaca5b4023e4efb5a74a151216abe6d4065efbe776d52a9f8cf737b
-  data.tar.gz: aa5789266491eae3174386a3624272c712c1f7dc7d79215625632d594888b7ae496f7a290b1c2e4ef2af5c76eb96b84a68f33dcd34498e00d52f682faf6407f4
+  metadata.gz: 0a3492e5b9833cd55345dfd0637328b8321ee1990940f78a3467f149c06de28504f25240ffc94d4486cfe7386d8f7540dd59f0b8fa18b1d33dab056da627a38d
+  data.tar.gz: 4c2cda58fd79e13d074f61133304433bbc61ca19234d9193b400027dc6e822a18656c7130417f85cd7b1d661568c48291185e9feb80321980b1d1abd5fd3b2e2

data/.gitignore

@@ -1,15 +1,7 @@
 .DS_store
-.sass-cache/
-*.scssc
-/stylesheets/.sass-cache/
-_site/
-_includes/
-_layouts/
-_sass/
-examples/
-images/
-css/
-_config.yml
-index.html
-pkg
+.sass-cache
+*gem
+*swp
 Gemfile.lock
+public
+tmp

data/README.md

@@ -1,99 +1,130 @@
-[![Bourbon Neat](http://neat.bourbon.io/images/logotype.svg)](http://thoughtbot.com/neat)
-
--
+[![Neat](http://neat.bourbon.io/images/logotype.svg)](http://neat.bourbon.io)
 
 [![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)
 
-Neat is an open source fluid grid framework built on top of [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.
+***
 
-:warning: Neat **1.6.0** requires Sass **3.3.x**. If you are using **libsass** or **sass-rails** use **1.5.1**.
+## A lightweight, semantic grid framework built on top of Bourbon
 
-Requirements
-===
-- Sass 3.3+
-- Bourbon 3.1+
+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.
 
-Install Instructions
-===
-Install/update the dependencies first:
+#### [Documentation & Demo](http://neat.bourbon.io)
 
-```bash
-gem install sass #or gem update sass
-gem install bourbon #or gem update bourbon
-```
-Install Neat:
+#### [Changelog](https://github.com/thoughtbot/neat/releases)
 
-```bash
-gem install neat
-```
-Then `cd` to your Sass directory and run:
+## Requirements
 
-```bash
-bourbon install #If not installed
-neat install
-```
+- [Sass](https://github.com/sass/sass) 3.3+
+- [Bourbon](https://github.com/thoughtbot/bourbon) 3.1+
+- :warning: If you are using Neat with **LibSass**, **sass-rails**, **Compass**, **Foundation** or need **Sass 3.2 support**, you should [use Neat 1.5.1](#installing-older-versions-of-neat).
 
-In your main stylesheet:
+## Installation
 
-```sass
-@import 'bourbon/bourbon';
-@import 'neat/neat';
-```
+Neat uses the [RubyGems](https://rubygems.org) package manager to easily generate a `neat` directory with all of the necessary files.
 
-To update Neat files, run:
+1. Install the Neat gem:
 
-```bash
-neat update
-```
+  ```bash
+  gem install neat
+  ```
 
-and to remove them:
+2. Install or update Neat’s dependencies:
 
-```bash
-neat remove
-```
+  ```bash
+  gem install sass # or gem update sass
+  ```
+  ```bash
+  gem install bourbon # or gem update bourbon
+  ```
 
-Ruby on Rails
-===
+3. Install the Neat library into the current directory:
 
-In your Gemfile:
+  ```bash
+  bourbon install # if not already installed
+  ```
+  ```bash
+  neat install
+  ```
 
-```bash
-gem 'neat'
-```
+4. Import Neat in your stylesheet, after Bourbon:
 
-After running `bundle install` you will be able to use Bourbon and Neat together.
+  ```scss
+  @import "bourbon/bourbon";
+  @import "neat/neat";
+  ```
 
-If you see this error `Bundler could not find compatible versions for gem "sass"` run:
+  It’s not recommended to add or modify the Neat files so that you can update them easily.
 
-```bash
-bundle update sass
-```
+## Installation for Ruby on Rails
+
+1. Add Neat to your Gemfile:
+
+  ```ruby
+  gem 'neat'
+  ```
+
+2. Then run:
+
+  ```bash
+  bundle install
+  ```
+
+  If you see the error `Bundler could not find compatible versions for gem "sass"`, run:
+
+  ```bash
+  bundle update sass
+  ```
+
+3. Import Neat in your `application.css.scss`, after Bourbon:
+
+  ```scss
+  @import "bourbon";
+  @import "neat";
+  ```
+
+## Installing older versions of Neat
 
-Within your `application.css.scss` file place the following:
+1. Uninstall any Neat gem versions you already have:
 
-```sass
-@import 'bourbon';
-@import 'neat';
+  ```bash
+  gem uninstall neat
+  ```
+
+2. Reinstall the Neat gem, using the `-v` flag to specify the version you need:
+
+  ```bash
+  gem install neat -v 1.5.1
+  ```
+
+3. Follow the [instructions above](#installation) to install Neat into your project.
+
+## Command line interface
+
+```bash
+neat install
+neat update
+neat remove
 ```
 
-Getting started
-===
+More information can be found in the [wiki](https://github.com/thoughtbot/neat/wiki/Command-Line-Interface).
+
+## Using Neat
 
 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:
 
 ```scss
-@import 'bourbon/bourbon'; // or 'bourbon' when in Rails
-@import 'grid-settings';
-@import 'neat/neat'; // or 'neat' when in Rails
+@import "bourbon/bourbon"; // or "bourbon" when in Rails
+@import "grid-settings";
+@import "neat/neat"; // or "neat" when in Rails
 ```
 
 In your newly created  `_grid-settings.scss`, import `neat-helpers` if you are planning to use `new-breakpoint()`, then define your new variables:
 
 ```scss
-@import 'neat/neat-helpers'; // or 'neat-helpers' when in Rails
+@import "neat/neat-helpers"; // or "neat-helpers" when in Rails
 
 // Change the grid settings
 $column: 90px;
@@ -124,7 +155,7 @@ div.element {
 }
 ```
 
-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:
+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:
 
 ```scss
 div.container {
@@ -163,45 +194,27 @@ 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. Keep in mind that on Webkit, rounding errors in the fluid grid might result in the overlay being few pixels off.
+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.
 
 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.
 
-Browser support
-===
-- Firefox 3.5+
-- Safari 4.0+
-- Chrome 4.0+
-- Opera 9.5+
-- IE 9+ (Visual grid is IE10 only)
-- IE 8 with [selectivizr](http://selectivizr.com) (no `media()` support)
+## FAQ
 
-Frequently asked questions
-==========================
+#### How do I use `omega()` in a mobile-first workflow?
 
-##### How do I use `omega()` in a mobile-first workflow?
-
-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
+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.
 
-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/)).
+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/)).
 
-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.
+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.
 
 ```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));
+$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));
 
 .element {
@@ -217,35 +230,49 @@ $large-viewport: new-breakpoint(min-width em($second-breakpoint-value + 1));
 }
 ```
 
-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/notes/omega-reset-for-bourbon-neat/).
+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.
+
+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.
 
-##### Framework X has this feature that Neat seems to be missing. Can you add it?
+At this point, writing an internal rounding mechanism is not high priority.
 
-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.
+#### Framework X has this feature that Neat seems to be missing. Can you add it?
 
-Links
-=====
+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.
+
+## Links
 
-- Read the [online documentation](http://neat.bourbon.io/docs/).
 - Add the docset to [Dash](http://kapeli.com/dash) 1.8+ (Preferences **>** Downloads **>** + *Add Docset Feed* **>** `http://neat.bourbon.io/docset/Neat.xml`)
-- Ask questions on [Stack Overflow](http://stackoverflow.com/questions/tagged/neat). Don't forget to tag them `bourbon` and `neat`.
+- 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).
-- Read the [contribution guidelines](https://github.com/thoughtbot/neat/blob/master/CONTRIBUTING.md).
-- Say hi to [@kaishin](https://twitter.com/kaishin) and [@kylefiedler](https://twitter.com/kylefiedler).
 - Join `#bourbon-neat` on `irc.freenode.net`.
 
+## Browser support
 
-Credits & License
-=================
+- 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+
+
+## The Bourbon family
+
+- [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
+
+## Credits
 
 ![thoughtbot](http://thoughtbot.com/images/tm/logo.png)
 
-Bourbon is maintained and funded by [thoughtbot, inc](http://thoughtbot.com/). Follow [@thoughtbot](http://twitter.com/thoughtbot) on Twitter.
+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.
+
+## License
 
-Bourbon Neat is Copyright © 2012-2014 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.
+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).

data/app/assets/stylesheets/_neat.scss

@@ -1,6 +1,6 @@
 /* Neat 1.7.0.pre
  * http://neat.bourbon.io
- * Copyright 2012–2014 thoughtbot, inc.
+ * Copyright 2012-2014 thoughtbot, inc.
  * MIT License */
 
 // Helpers
@@ -19,5 +19,5 @@
 @import "grid/media";
 @import "grid/to-deprecate";
 @import "grid/visual-grid";
-@import "grid/display";
-@import "grid/direction";
+@import "grid/display-context";
+@import "grid/direction-context";

data/app/assets/stylesheets/functions/_new-breakpoint.scss

@@ -1,10 +1,40 @@
-@function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
-
+/**
+ * Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat.
+ *
+ * @param {List} $query
+ *   - A list of media query features and values. Each `$feature` should have a corresponding `$value`. If there is only a single `$value` in `$query`, `$default-feature` is going to be used. The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).
+ *
+ * @param {Number (unitless)} $total-columns ($grid-columns)
+ *   - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.
+ *
+ * @example scss - Usage
+ *   $mobile: new-breakpoint(max-width 480px 4);
+ *
+ *   .element {
+ *     @include media($mobile) {
+ *       @include span-columns(4);
+ *     }
+ *   }
+ *
+ * @example css - CSS Output
+ *   @media screen and (max-width: 480px) {
+ *     .element {
+ *       display: block;
+ *       float: left;
+ *       margin-right: 7.42297%;
+ *       width: 100%;
+ *     }
+ *     .element:last-child {
+ *       margin-right: 0;
+ *     }
+ *   }
+ */
+@function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) {
   @if length($query) == 1 {
     $query: $default-feature nth($query, 1) $total-columns;
   }
 
-  @else if length($query) % 2 == 0 {
+  @else if is-even(length($query)) {
     $query: append($query, $total-columns);
   }
 

data/app/assets/stylesheets/functions/_private.scss

@@ -3,9 +3,13 @@
   @return $int % 2 == 0
 }
 
-// Checks if an element belongs to a list
+// Checks if an element belongs to a list or not
 @function belongs-to($tested-item, $list) {
-  @return index($list, $tested-item) != false;
+  @return not not-belongs-to($tested-item, $list);
+}
+
+@function not-belongs-to($tested-item, $list) {
+  @return not index($list, $tested-item);
 }
 
 // Contains display value
@@ -21,16 +25,12 @@
   @if length($span) == 3 {
     $container-columns: nth($span, 3);
     @return $container-columns;
-  }
-
-  @else if length($span) == 2 {
+  } @else if length($span) == 2 {
     $container-columns: nth($span, 2);
     @return $container-columns;
   }
 
-  @else {
-    @return $grid-columns;
-  }
+  @return $grid-columns;
 }
 
 @function container-shift($shift: $shift) {
@@ -39,16 +39,12 @@
   @if length($shift) == 3 {
     $container-columns: nth($shift, 3);
     @return $container-columns;
-  }
-
-  @else if length($shift) == 2 {
+  } @else if length($shift) == 2 {
     $container-columns: nth($shift, 2);
     @return $container-columns;
   }
 
-  @else {
-    @return $parent-columns;
-  }
+  @return $parent-columns;
 }
 
 // Generates a striped background
@@ -66,9 +62,7 @@
       $values: append($values, $transparent $column-offset, comma);
       $values: append($values, $color $column-offset, comma);
       $column-offset: $column-offset + $column-width;
-    }
-
-    @else {
+    } @else {
       $values: append($values, $color $column-offset, comma);
       $values: append($values, $transparent $column-offset, comma);
       $column-offset: $column-offset + $gutter-width;
@@ -80,9 +74,9 @@
 
 // Layout direction
 @function get-direction($layout, $default) {
-  $direction: nil;
+  $direction: null;
 
-  @if $layout == LTR or $layout == RTL {
+  @if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" {
     $direction: direction-from-layout($layout);
   } @else {
     $direction: direction-from-layout($default);
@@ -92,9 +86,9 @@
 }
 
 @function direction-from-layout($layout) {
-  $direction: nil;
+  $direction: null;
 
-  @if $layout == LTR {
+  @if to-upper-case($layout) == "LTR" {
     $direction: right;
   } @else {
     $direction: left;
@@ -106,7 +100,7 @@
 @function get-opposite-direction($direction) {
   $opposite-direction: left;
 
-  @if $direction == left {
+  @if $direction == "left" {
     $opposite-direction: right;
   }