neat 0.4.2 → 1.0.0.pre

data/.gitignore

@@ -11,4 +11,5 @@ images/
 css/
 _config.yml
 index.html
-
+pkg
+Gemfile.lock

data/README.md

@@ -13,24 +13,18 @@ Requirements:
 - Sass 3.2+
 - Bourbon 2.1+
 
+Put the `/neat` folder in your Sass directory and import it right below Bourbon in your stylesheets:
 
-Gemfile contents:
-
-    gem 'bourbon'
-    gem 'neat'
-
-After running `bundle install` you will be able to use bourbon and neat together. Within your application.css.scss file place the following:
-
-    @import "bourbon";
-    @import "neat";
+    @import "bourbon/bourbon";
+    @import "neat/neat";
 
 
 Using the grid
 ===
-The default grid uses 12 columns (a setting that can be easily overridden as detailed further down).
+The default grid uses 12 columns, a setting that can be easily overridden as detailed [further down](https://github.com/thoughtbot/neat#changing-the-defaults).
 
 ### Containers
-Include the ```outer-container``` mixin in the topmost container (to which the ```max-width``` setting will be applied):
+Include the `outer-container` mixin in the topmost container (to which the `max-width` setting will be applied):
 
       div.container {
         @include outer-container;
@@ -40,13 +34,13 @@ Include the ```outer-container``` mixin in the topmost container (to which the `
 You can include this mixin in more than one element in the same page.
 
 ### Columns
-Use the ```span-columns``` mixin to specify the number of columns an element should span: 
+Use the `span-columns` mixin to specify the number of columns an element should span: 
 
     @include span-columns($span: $columns of $container-columns, $display: block) 
 
-  * ```columns``` is the number of columns you wish this element to span.
-  * ```container-columns``` (optional) is the number of columns the container spans, defaults to the total number of columns in the grid.
-  * ```display``` (optional) changes the display type of the grid. Use ```block```—the default—for floated layout, ```table``` for table-cell layout, and ```inline-block``` for an inline block layout.
+  * `columns` is the number of columns you wish this element to span.
+  * `container-columns` (optional) is the number of columns the container spans, defaults to the total number of columns in the grid.
+  * `display` (optional) changes the display type of the grid. Use `block`—the default—for floated layout, `table` for table-cell layout, and `inline-block` for an inline block layout.
 
 eg. Element that spans across 6 columns (out of the default 12):
 
@@ -69,7 +63,7 @@ If the element's parent isn't the top-most container, you need to add the number
       }
     }
 
-To use a table-cell layout, add ```table``` as the ```display``` argument:
+To use a table-cell layout, add `table` as the `display` argument:
 
     @include span-columns(6 of 8, table)
 
@@ -85,44 +79,44 @@ The following syntaxes would also work:
 
 
 ### Rows
-In order to clear floated or table-cell columns, use the ```row``` mixin:
+In order to clear floated or table-cell columns, use the `row` mixin:
 
     @include row($display);
 
-  * ```display``` takes either ```block```—the default—or ```table```.
+  * `display` takes either `block`—the default—or `table`.
 
 
 ### Shifting columns
 
 
-To move an element to the left or right by a number of columns, use the ```shift``` mixin:
+To move an element to the left or right by a number of columns, use the `shift` mixin:
 
     @include shift(2); // Move 2 columns to the right
     @include shift(-3); // Move 3 columns to the left
 
-Please note that the ```shift()``` mixin is incompatible with display ```table```.
+Please note that the `shift()` mixin is incompatible with display `table`.
 
 
 ### Padding columns
 
-To add padding around the entire column use ```pad()```. By default it adds the same value as the grid's gutter but can take any unit value.
+To add padding around the entire column use `pad()`. By default it adds the same value as the grid's gutter but can take any unit value.
 
     @include pad; // Adds a padding equivalent to the grid's gutter
-    @extend pad(20px); // Adds a padding of 20px
+    @include pad(20px); // Adds a padding of 20px
 
-The ```pad()``` mixin works particularly well with ```span-columns(x, y, table)``` by adding the necessary padding without breaking your table-based grid layout.
+The `pad()` mixin works particularly well with `span-columns(x, table)` by adding the necessary padding without breaking your table-based grid layout.
 
 ### Removing gutter
 
-Neat automatically removes the last columns's gutter. However, if you are queueing more than one row of columns within the same parent element, you need to specify which columns are considered last in their row to preserve the layout. Use the ```omega``` mixin to achieve this:
+Neat automatically removes the last columns's gutter. However, if you are queueing more than one row of columns within the same parent element, you need to specify which columns are considered last in their row to preserve the layout. Use the `omega` mixin to achieve this:
 
     @include omega; // Removes right gutter
 
-You can also use ```nth-omega``` to remove the gutter of a specific column or set of columns:
+You can also use `nth-omega` to remove the gutter of a specific column or set of columns:
 
     @include nth-omega(nth-child);
 
-  * ```nth-child``` takes any valid :nth-child value. See [https://developer.mozilla.org/en-US/docs/CSS/:nth-child](Mozilla's :nth-child documentation)
+  * `nth-child` takes any valid :nth-child value. See [https://developer.mozilla.org/en-US/docs/CSS/:nth-child](Mozilla's :nth-child documentation)
 
 eg. Remove every 3rd gutter using:
 
@@ -136,12 +130,12 @@ This makes sure that the child fills 100% of its parent:
 
 ### Breakpoints
 
-The ```breakpoint()``` mixin allows you to use media-queries to modify both the grid and the layout. It takes two arguments:
+The `breakpoint()` mixin allows you to use media-queries to modify both the grid and the layout. It takes two arguments:
 
     @include breakpoint($query:$feature $value, $total-columns: $grid-columns)
 
-* ```query``` contains the media feature (min-width, max-width, etc.) and the value (481px, 30em, etc.). If you specify the value only, ```min-width``` will be used by default (ideal if you follow a mobile-first approach). You can also change the default feature in the settings (see section below).
-* ```total-columns``` (optional) is the total number of columns to be used inside this media query. Changing the total number of columns will change the width, padding and margin percentages obtained using the ```span-column``` mixin.
+* `query` contains the media feature (min-width, max-width, etc.) and the value (481px, 30em, etc.). If you specify the value only, `min-width` will be used by default (ideal if you follow a mobile-first approach). You can also change the default feature in the settings (see section below).
+* `total-columns` (optional) is the total number of columns to be used inside this media query. Changing the total number of columns will change the width, padding and margin percentages obtained using the `span-column` mixin.
 
 ##### Example 1
 
@@ -220,9 +214,45 @@ The ```breakpoint()``` mixin allows you to use media-queries to modify both the
         }
     }
 
-For convenience, you can create a list variable to hold your media context (breakpoint/column-count) and use it throughout your code:
+##### Example 5
+
+    .my-class {
+        @include breakpoint(min-width 320px max-width 480px) {
+          font-size: 1.2em;
+        }
+    }
+
+    // Compiled CSS
+
+    @media screen and (min-width: 320px) and (max-width: 480px) {
+        .my-class {
+          font-size: 1.2em;
+        }
+    }
+
+You can also use two ```@media``` features at the same time.
+
+Here is a summary of possible argument combinations: 
+
+    // YAY
+    @include breakpoint(480px);
+    @include breakpoint(max-width 480px);
+    @include breakpoint(min-width 320px max-width 480px);
+    @include breakpoint(480px, 4);
+    @include breakpoint(max-width 480px, 4);
+    @include breakpoint(min-width 320px max-width 480px, 4);
+    @include breakpoint(max-width 480px 4); // Shorthand syntax
+    @include breakpoint(min-width 320px max-width 480px 4); // Shorthand syntax
+
+    // NAY
+    @include breakpoint(480px 4);
+    @include breakpoint(max-width 4);
+    @include breakpoint(max-width, 4);
+    @include breakpoint(320px max-width 480px);
+    
+ For convenience, you can create a new media context (breakpoint/column-count) with the help of the`new-breakpoint` mixin and use it throughout your code:
 
-    $mobile: max-width 480px 4; // Use a 4 column grid in mobile devices (requires all three arguments to work)
+    $mobile: new-breakpoint(max-width 480px 4); // Use a 4 column grid in mobile devices
 
     .my-class {
       @include breakpoint($mobile) {
@@ -243,37 +273,57 @@ For convenience, you can create a list variable to hold your media context (brea
         margin-right: 0;
       }
     }
+ The `new-breakpoint` takes the same arguments as `breakpoint`.
 
-Here is a summary of possible argument combinations: 
+### Visual grid
 
-    // YAY
-    @include breakpoint(480px);
-    @include breakpoint(max-width 480px);
-    @include breakpoint(480px, 4);
-    @include breakpoint(max-width 480px, 4);
-    @include breakpoint(max-width 480px 4); // Shorthand syntax
-
-    // NAY
-    @include breakpoint(480px 4);
-    @include breakpoint(max-width 4);
-    @include breakpoint(max-width, 4);
+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 gridlines 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.
 
+The visual grid reflects the changes applied to the grid via the `new-breakpoint()` mixin.
 
 ### Changing the defaults
 
-All the default settings can be overridden, including ```$grid-columns``` and ```$max-width```. The complete list of settings can be found in the ```/settings``` subfolder. In order to override any of these settings, redefine the variable in your site-wide ```_variables.scss``` and make sure to import it *before* Neat (failing to do so will cause Neat to use the default values):
+All the default settings can be overridden in your site-wide `_variables.scss`. Make sure to import this file *before* Neat (failing to do so will cause Neat to use the default values):
 
     @import "bourbon/bourbon";
     @import "variables";
     @import "neat/neat";
+    
+Here is the list of the available settings:
+
+#### Grid settings
+
+- `$column`: The width of a single column in `px` or `em`.
+- `$gutter`: Space between each two columns in `px` or `em`.
+- `$grid-columns`: Total number of columns in the base grid. Defaults to 12.
+- `$max-width`: The maximum width of the outer container in `px` or `em`.
+
+#### Visual grid settings
+
+- `$visual-grid`: Show the base grid. Defaults to `false`.
+- `$visual-grid-color`: Visual grid color. Defaults to `#EEEEEE`.
+- `$visual-grid-index`: If set to `front`, the grid is overlaid on the content.
+- `$visual-grid-opacity`: Visual grid opacity.
+
+#### Other settings
+
+- `$border-box-sizing`: Makes all elements have a `border-box` layout. Defaults to `true`.
+- `$default-feature`: Default `@media` feature for the `breakpoint()` mixin. Defaults to `min-width`.
 
+### 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 `breakpoint()` support)
 
 Credits
 ===
 
 ![thoughtbot](http://thoughtbot.com/images/tm/logo.png)
 
-Bourbon is maintained and funded by [thoughtbot, inc](http://thoughtbot.com/community). Tweet your questions or suggestions at [Kyle](https://twitter.com/kylefiedler) / [Reda](https://twitter.com/kaishin).
+Bourbon is maintained and funded by [thoughtbot, inc](http://thoughtbot.com/community). Tweet your questions or suggestions at [@kaishin](https://twitter.com/kaishin) and [@kylefiedler](https://twitter.com/kylefiedler).
 
 License
 ===

data/Rakefile

@@ -0,0 +1,2 @@
+require 'bundler'
+Bundler::GemHelper.install_tasks

data/app/assets/stylesheets/_neat.scss

@@ -3,16 +3,15 @@
 // Copyright (c) 2011 thoughtbot, inc.
 
 // Custom Functions
-@import "functions/line-height";
 @import "functions/px-to-em";
 @import "functions/grid";
+@import "functions/helpers";
 
 // Default Settings
 @import "settings/grid";
-@import "settings/typography";
+@import "settings/visual-grid";
 
 // The Grid
+@import "grid/global-variables";
 @import "grid/grid";
-
-// Typography
-@import "typography/typography";
+@import "grid/visual-grid";

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

@@ -0,0 +1,34 @@
+@function is-even($int) {
+  @if $int%2 == 0   {
+    @return true;
+  }
+
+  @return false;
+}
+
+@function belongs-to($tested-item, $list) {
+  @each $item in $list {
+    @if $item == $tested-item {
+      @return true;
+    }
+  }
+
+  @return false;
+}
+
+@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 or length($query) == 4 {
+    $query: append($query, $total-columns);
+  }
+
+  @if not belongs-to($query, $visual-grid-breakpoints) {
+    $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma);
+  }
+
+  @return $query;
+}

data/app/assets/stylesheets/grid/_global-variables.scss

@@ -0,0 +1 @@
+$parent-columns: $grid-columns !default;

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

@@ -26,6 +26,10 @@ $fg-max-width: $max-width;
   $columns: nth($span, 1);
   $container-columns: container-span($span);
 
+  @if $container-columns != $grid-columns {
+    $parent-columns: $container-columns;
+  }
+
   @if $display == table {
     display: table-cell;
     padding-right: flex-gutter($container-columns);
@@ -72,7 +76,7 @@ $fg-max-width: $max-width;
 
 // Shift
 @mixin shift($n-columns: 1) {
-  margin-left: $n-columns * flex-grid(1) + $n-columns * flex-gutter();
+  margin-left: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
 }
 
 
@@ -145,8 +149,25 @@ $fg-max-width: $max-width;
     }
   }
 
+  @else if length($query) == 4 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 5 {
+    @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 5);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
   @else {
     @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
   }
 }
-

data/app/assets/stylesheets/grid/_visual-grid.scss

@@ -0,0 +1,66 @@
+@mixin grid-column-gradient($values...) {
+  background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values);
+  background-image:  -webkit-linear-gradient(left, $values);
+  background-image:     -moz-linear-gradient(left, $values);
+  background-image:      -ms-linear-gradient(left, $values);
+  background-image:       -o-linear-gradient(left, $values);
+  background-image: unquote("linear-gradient(left, #{$values})");
+}
+
+@function gradient-stops($grid-columns, $color: $visual-grid-color) {
+  $transparent: rgba(0,0,0,0);
+
+  $column-width: flex-grid(1, $grid-columns);
+  $gutter-width: flex-gutter($grid-columns);
+  $column-offset: $column-width;
+
+  $values: ($transparent 0, $color 0);
+
+  @for $i from 1 to $grid-columns*2 {
+    @if is-even($i) {
+      $values: append($values, $transparent $column-offset);
+      $values: append($values, $color $column-offset);
+      $column-offset: $column-offset + $column-width;
+    }
+
+    @else {
+      $values: append($values, $color $column-offset);
+      $values: append($values, $transparent $column-offset);
+      $column-offset: $column-offset + $gutter-width;
+    }
+  }
+
+  @return $values;
+}
+
+@if $visual-grid == true {
+  body:before {
+    content: '';
+    display: inline-block;
+    @include grid-column-gradient(gradient-stops($grid-columns));
+    height: 100%;
+    left: 0;
+    margin: 0 auto;
+    max-width: $max-width;
+    opacity: $visual-grid-opacity;
+    position: fixed;
+    right: 0;
+    width: 100%;
+
+    @if $visual-grid-index == back {
+      z-index: -1;
+    }
+
+    @else if $visual-grid-index == front {
+      z-index: 9999;
+    }
+
+    @each $breakpoint in $visual-grid-breakpoints {
+      @if $breakpoint != nil {
+        @include breakpoint($breakpoint) {
+          @include grid-column-gradient(gradient-stops($grid-columns));
+        }
+      }
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
-$column: golden-ratio(1em, 3) !default;
-$gutter: golden-ratio(1em, 1) !default;
-$grid-columns: 12 !default;
-$max-width: golden-ratio(1em, 9) !default;
-$border-box-sizing: true !default; // Makes all elements have border-box layout
-$default-feature: min-width;
+$column: golden-ratio(1em, 3) !default; // Column width
+$gutter: golden-ratio(1em, 1) !default; // Gutter between each two columns
+$grid-columns: 12 !default; // Total number of columns in the grid
+$max-width: em(1088) !default; // Max-width of the outer container
+$border-box-sizing: true !default; // Makes all elements have a border-box layout
+$default-feature: min-width; // Default @media feature for the breakpoint() mixin

data/app/assets/stylesheets/settings/_visual-grid.scss

@@ -0,0 +1,5 @@
+$visual-grid: false !default; // Display the base grid
+$visual-grid-color: #EEE !default;
+$visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front)
+$visual-grid-opacity: 0.4 !default;
+$visual-grid-breakpoints: nil !default;

data/lib/neat/version.rb

@@ -1,3 +1,3 @@
 module Neat
-  VERSION = '0.4.2'
+  VERSION = '1.0.0.pre'
 end

data/neat.gemspec

@@ -11,7 +11,7 @@ Gem::Specification.new do |s|
   s.homepage    = "https://github.com/thoughtbot/neat"
   s.summary     = "A fluid grid framework on top of Bourbon"
   s.description = <<-DESC
-Neat is an open source fluid grid framework built on top of Bourbon with the aim of being easy enough to use out of the box and flexible enough to customize down the road.
+Neat is an open source grid framework built on top of Bourbon with the aim of being easy enough to use out of the box and flexible enough to customize down the road.
   DESC
 
   s.rubyforge_project = "neat"

metadata

@@ -1,8 +1,8 @@
 --- !ruby/object:Gem::Specification
 name: neat
 version: !ruby/object:Gem::Version
-  version: 0.4.2
-  prerelease: 
+  version: 1.0.0.pre
+  prerelease: 6
 platform: ruby
 authors:
 - Kyle Fiedler
@@ -11,7 +11,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-08-31 00:00:00.000000000 Z
+date: 2012-10-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -77,8 +77,8 @@ dependencies:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: '0'
-description: ! 'Neat is an open source fluid grid framework built on top of Bourbon
-  with the aim of being easy enough to use out of the box and flexible enough to customize
+description: ! 'Neat is an open source grid framework built on top of Bourbon with
+  the aim of being easy enough to use out of the box and flexible enough to customize
   down the road.
 
 '
@@ -92,14 +92,16 @@ files:
 - Gemfile
 - LICENSE
 - README.md
+- Rakefile
 - app/assets/stylesheets/_neat.scss
 - app/assets/stylesheets/functions/_grid.scss
-- app/assets/stylesheets/functions/_line-height.scss
+- app/assets/stylesheets/functions/_helpers.scss
 - app/assets/stylesheets/functions/_px-to-em.scss
+- app/assets/stylesheets/grid/_global-variables.scss
 - app/assets/stylesheets/grid/_grid.scss
+- app/assets/stylesheets/grid/_visual-grid.scss
 - app/assets/stylesheets/settings/_grid.scss
-- app/assets/stylesheets/settings/_typography.scss
-- app/assets/stylesheets/typography/_typography.scss
+- app/assets/stylesheets/settings/_visual-grid.scss
 - lib/neat.rb
 - lib/neat/engine.rb
 - lib/neat/version.rb
@@ -120,13 +122,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
-  - - ! '>='
+  - - ! '>'
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubyforge_project: neat
-rubygems_version: 1.8.22
+rubygems_version: 1.8.24
 signing_key: 
 specification_version: 3
 summary: A fluid grid framework on top of Bourbon
 test_files: []
+has_rdoc: 

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

@@ -1,3 +0,0 @@
-$body-font-size: 1em !default;
-$body-line-height: golden-ratio(1em, 1) !default;
-$body-font-family: $helvetica !default;

data/app/assets/stylesheets/typography/_typography.scss

@@ -1,4 +0,0 @@
-body {
-  font: $body-font-size $body-font-family;
-  line-height: $body-line-height;
-}