neat 0.4.2

data/.gitignore

@@ -0,0 +1,14 @@
+.DS_store
+.sass-cache/
+*.scssc
+/stylesheets/.sass-cache/
+_site/
+_includes/
+_layouts/
+_sass/
+examples/
+images/
+css/
+_config.yml
+index.html
+

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in neat.gemspec
+gemspec

data/LICENSE

@@ -0,0 +1,23 @@
+LICENSE
+
+The MIT License
+
+Copyright (c) 2011 thoughtbot, inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,283 @@
+[![Bourbon Neat](http://thoughtbot.com/neat/images/logotype.svg)](http://thoughtbot.com/neat)
+
+**Neat** is an open source fluid grid framework built on top of [Bourbon](http://thoughtbot.com/bourbon) with the aim of being easy enough to use out of the box and flexible enough to customize down the road.
+
+Learn more about Neat and why we built it [here](http://thoughtbot.com/neat/).
+
+
+Getting started
+===
+
+Requirements:
+
+- Sass 3.2+
+- Bourbon 2.1+
+
+
+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";
+
+
+Using the grid
+===
+The default grid uses 12 columns (a setting that can be easily overridden as detailed further down).
+
+### Containers
+Include the ```outer-container``` mixin in the topmost container (to which the ```max-width``` setting will be applied):
+
+      div.container {
+        @include outer-container;
+      }
+
+
+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: 
+
+    @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.
+
+eg. Element that spans across 6 columns (out of the default 12):
+
+    div.element {
+        @include span-columns(6);
+    }
+
+
+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:
+
+    div.container {
+      @include outer-container;
+
+      div.parent-element {
+        @include span-columns(8);
+
+        div.element {
+          @include span-columns(6 of 8);
+        }
+      }
+    }
+
+To use a table-cell layout, add ```table``` as the ```display``` argument:
+
+    @include span-columns(6 of 8, table)
+
+
+Likewise for inline-block:
+
+    @include span-columns(6 of 8, inline-block)
+
+The following syntaxes would also work:
+
+    @include span-columns(6 / 8,inline-block);
+    @include span-columns(6 8,inline-block);
+
+
+### Rows
+In order to clear floated or table-cell columns, use the ```row``` mixin:
+
+    @include row($display);
+
+  * ```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:
+
+    @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```.
+
+
+### 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.
+
+    @include pad; // Adds a padding equivalent to the grid's gutter
+    @extend 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.
+
+### 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:
+
+    @include omega; // Removes right gutter
+
+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)
+
+eg. Remove every 3rd gutter using:
+
+    @include nth-omega(3n);
+
+### Filling parent elements
+
+This makes sure that the child fills 100% of its parent:
+
+    @include fill-parent;
+
+### Breakpoints
+
+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.
+
+##### Example 1
+
+    .my-class {
+        @include breakpoint(481px) {
+          font-size: 1.2em;
+        }
+    }
+
+    // Compiled CSS
+
+    @media screen and (min-width: 481px) {
+        .my-class {
+          font-size: 1.2em;
+        }
+    }
+
+##### Example 2
+
+    .my-class {
+        @include breakpoint(max-width 769px) {
+          float: none;
+        }
+    }
+
+    // Compiled CSS
+
+    @media screen and (max-width: 769px) {
+        .my-class {
+          float: none;
+        }
+    }
+
+##### Example 3
+
+    .my-class {
+        @include breakpoint(max-width 769px) {
+          @include span-columns(6);
+        }
+    }
+
+    // Compiled CSS
+
+    @media screen and (max-width: 769px) {
+        .my-class {
+          display: block;
+          float: left;
+          margin-right: 2.35765%;
+          width: 48.82117%; // That's 6 columns of the total 12
+        }
+
+        .my-class:last-child {
+          margin-right: 0;
+        }
+    }
+
+##### Example 4
+
+    .my-class {
+        @include breakpoint(max-width 769px, 6) { // Use a 6 column grid (instead of the default 12)
+          @include span-columns(6);
+        }
+    }
+
+    // Compiled CSS
+
+    @media screen and (max-width: 769px) {
+        .my-class {
+          display: block;
+          float: left;
+          margin-right: 4.82916%;
+          width: 100%; // That's 6 columns of the total 6 specified for this media query
+        }
+        .my-class:last-child {
+          margin-right: 0;
+        }
+    }
+
+For convenience, you can create a list variable to hold your media context (breakpoint/column-count) 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)
+
+    .my-class {
+      @include breakpoint($mobile) {
+        @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;
+      }
+    }
+
+Here is a summary of possible argument combinations: 
+
+    // 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);
+
+
+### 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):
+
+    @import "bourbon/bourbon";
+    @import "variables";
+    @import "neat/neat";
+
+
+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).
+
+License
+===
+
+Bourbon Neat is Copyright © 2012 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.
+
+

data/app/assets/stylesheets/_neat.scss

@@ -0,0 +1,18 @@
+// Bourbon Neat 0.9 beta
+// MIT Licensed
+// Copyright (c) 2011 thoughtbot, inc.
+
+// Custom Functions
+@import "functions/line-height";
+@import "functions/px-to-em";
+@import "functions/grid";
+
+// Default Settings
+@import "settings/grid";
+@import "settings/typography";
+
+// The Grid
+@import "grid/grid";
+
+// Typography
+@import "typography/typography";

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

@@ -0,0 +1,15 @@
+@function container-span($span: $span) {
+  @if length($span) == 3 {
+    $container-columns: nth($span, 3);
+    @return $container-columns;
+  }
+
+  @else if length($span) == 2 {
+    $container-columns: nth($span, 2);
+    @return $container-columns;
+  }
+
+  @else {
+    @return $grid-columns;
+  }
+}

data/app/assets/stylesheets/functions/_px-to-em.scss

@@ -0,0 +1,3 @@
+@function em($pxval, $base: 16) {
+  @return #{$pxval / $base}em;
+}

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

@@ -0,0 +1,152 @@
+@if $border-box-sizing == true {
+  * {
+    @include box-sizing(border-box);
+  }
+}
+
+$fg-column: $column;
+$fg-gutter: $gutter;
+$fg-max-columns: $grid-columns;
+$fg-max-width: $max-width;
+
+// outer wrapper center container
+@mixin outer-container() {
+  @include clearfix;
+  max-width: $fg-max-width;
+  text-align: left;
+  margin: {
+    left: auto;
+    right: auto;
+  }
+}
+
+// Grid span columns
+@mixin span-columns($span: $columns of $container-columns, $display: block) {
+
+  $columns: nth($span, 1);
+  $container-columns: container-span($span);
+
+  @if $display == table {
+    display: table-cell;
+    padding-right: flex-gutter($container-columns);
+    width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
+
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+
+  @else if $display == inline-block {
+    @include inline-block;
+    margin-right: flex-gutter($container-columns);
+    width: flex-grid($columns, $container-columns);
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  @else {
+    display: block;
+    float: left;
+    margin-right: flex-gutter($container-columns);
+    width: flex-grid($columns, $container-columns);
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+// Clearfix / row container
+@mixin row($display: block) {
+  @include clearfix;
+  @if $display == table {
+    display: table;
+  }
+
+  @else {
+    display: block;
+  }
+}
+
+// Shift
+@mixin shift($n-columns: 1) {
+  margin-left: $n-columns * flex-grid(1) + $n-columns * flex-gutter();
+}
+
+
+// Pad
+@mixin pad($padding: flex-gutter()) {
+  padding: $padding;
+}
+
+// Remove element gutter
+@mixin omega($display: block, $direction: right) {
+  @if $display == table {
+    padding-#{$direction}: 0;
+  }
+
+  @else {
+    margin-#{$direction}: 0;
+  }
+}
+
+@mixin nth-omega($nth, $display: block, $direction: right) {
+  @if $display == table {
+    &:nth-child(#{$nth}) {
+      padding-#{$direction}: 0;
+    }
+  }
+
+  @else {
+    &:nth-child(#{$nth}) {
+      margin-#{$direction}: 0;
+    }
+  }
+}
+
+// Fill 100% of parent
+@mixin fill-parent() {
+  width: 100%;
+
+  @if $border-box-sizing == false {
+    @include box-sizing(border-box);
+  }
+}
+
+// Breakpoints
+@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
+
+  @if length($query) == 1 {
+    @media screen and ($default-feature: nth($query, 1)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 2 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: $total-columns;
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else if length($query) == 3 {
+    @media screen and (nth($query, 1): nth($query, 2)) {
+      $default-grid-columns: $grid-columns;
+      $grid-columns: nth($query, 3);
+      @content;
+      $grid-columns: $default-grid-columns;
+    }
+  }
+
+  @else {
+    @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
+  }
+}
+

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

@@ -0,0 +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;

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

@@ -0,0 +1,3 @@
+$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

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

data/lib/neat/engine.rb

@@ -0,0 +1,5 @@
+module Neat
+  class Engine < Rails::Engine
+    # auto wire
+  end
+end

data/lib/neat/version.rb

@@ -0,0 +1,3 @@
+module Neat
+  VERSION = '0.4.2'
+end

data/lib/neat.rb

@@ -0,0 +1,15 @@
+module Neat
+  if defined?(Rails) && defined?(Rails::Engine)
+    class Engine < ::Rails::Engine
+      require 'neat/engine'
+    end
+
+    module Rails
+      class Railtie < ::Rails::Railtie
+        rake_tasks do
+          load "tasks/install.rake"
+        end
+      end
+    end
+  end
+end

data/lib/tasks/install.rake

@@ -0,0 +1,23 @@
+# Needed for pre-3.1.
+
+require "fileutils"
+require "find"
+
+namespace :bourbon do
+  namespace :neat do
+    desc "Copy Neat's files to the Rails assets directory."
+    task :install, [:sass_path] do |t, args|
+      args.with_defaults(:sass_path => 'public/stylesheets/sass')
+      source_root = File.expand_path(File.join(File.dirname(__FILE__), '..', '..'))
+      FileUtils.mkdir_p("#{Rails.root}/#{args.sass_path}/neat")
+      FileUtils.cp_r("#{source_root}/app/assets/stylesheets/.", "#{Rails.root}/#{args.sass_path}/neat", { :preserve => true })
+
+      Find.find("#{Rails.root}/#{args.sass_path}/neat") do |path|
+        if path.end_with?(".css.scss")
+          path_without_css_extension = path.gsub(/\.css\.scss$/, ".scss")
+          FileUtils.mv(path, path_without_css_extension)
+        end
+      end
+    end
+  end
+end

data/neat.gemspec

@@ -0,0 +1,29 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path('../lib', __FILE__)
+require 'neat/version'
+
+Gem::Specification.new do |s|
+  s.name        = "neat"
+  s.version     = Neat::VERSION
+  s.platform    = Gem::Platform::RUBY
+  s.authors     = ["Kyle Fiedler", "Reda Lemeden", "Joel Oliveira"]
+  s.email       = ["support@thoughtbot.com"]
+  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.
+  DESC
+
+  s.rubyforge_project = "neat"
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+
+  s.add_dependency('sass', '>= 3.2')
+  s.add_dependency('bourbon', '>= 2.1')
+
+  s.add_development_dependency('aruba', '~> 0.4')
+  s.add_development_dependency('rake')
+end

metadata

@@ -0,0 +1,132 @@
+--- !ruby/object:Gem::Specification
+name: neat
+version: !ruby/object:Gem::Version
+  version: 0.4.2
+  prerelease: 
+platform: ruby
+authors:
+- Kyle Fiedler
+- Reda Lemeden
+- Joel Oliveira
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-08-31 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '3.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '3.2'
+- !ruby/object:Gem::Dependency
+  name: bourbon
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '2.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '2.1'
+- !ruby/object:Gem::Dependency
+  name: aruba
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '0.4'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '0.4'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !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
+  down the road.
+
+'
+email:
+- support@thoughtbot.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Gemfile
+- LICENSE
+- README.md
+- app/assets/stylesheets/_neat.scss
+- app/assets/stylesheets/functions/_grid.scss
+- app/assets/stylesheets/functions/_line-height.scss
+- app/assets/stylesheets/functions/_px-to-em.scss
+- app/assets/stylesheets/grid/_grid.scss
+- app/assets/stylesheets/settings/_grid.scss
+- app/assets/stylesheets/settings/_typography.scss
+- app/assets/stylesheets/typography/_typography.scss
+- lib/neat.rb
+- lib/neat/engine.rb
+- lib/neat/version.rb
+- lib/tasks/install.rake
+- neat.gemspec
+homepage: https://github.com/thoughtbot/neat
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: neat
+rubygems_version: 1.8.22
+signing_key: 
+specification_version: 3
+summary: A fluid grid framework on top of Bourbon
+test_files: []