From 40585b2bbbcdd97c8e8bab0b59ab4804723b25ef Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Mon, 8 Jul 2013 11:32:08 -0400
Subject: [PATCH] Added neat grid framework

http://neat.bourbon.io/
---
 Gemfile                                       |   1 +
 common/static/sass/neat/_neat-helpers.scss    |   8 ++
 common/static/sass/neat/_neat.scss            |  21 ++++
 .../sass/neat/functions/_new-breakpoint.scss  |  16 +++
 .../static/sass/neat/functions/_private.scss  | 107 ++++++++++++++++++
 .../static/sass/neat/functions/_px-to-em.scss |   3 +
 .../static/sass/neat/grid/_fill-parent.scss   |   7 ++
 common/static/sass/neat/grid/_grid.scss       |   5 +
 common/static/sass/neat/grid/_media.scss      |  51 +++++++++
 common/static/sass/neat/grid/_omega.scss      |  79 +++++++++++++
 .../sass/neat/grid/_outer-container.scss      |   8 ++
 common/static/sass/neat/grid/_pad.scss        |   8 ++
 common/static/sass/neat/grid/_private.scss    |  21 ++++
 common/static/sass/neat/grid/_reset.scss      |  12 ++
 common/static/sass/neat/grid/_row.scss        |  17 +++
 common/static/sass/neat/grid/_shift.scss      |  10 ++
 .../static/sass/neat/grid/_span-columns.scss  |  45 ++++++++
 .../static/sass/neat/grid/_to-deprecate.scss  |  57 ++++++++++
 .../static/sass/neat/grid/_visual-grid.scss   |  41 +++++++
 common/static/sass/neat/settings/_grid.scss   |   7 ++
 .../sass/neat/settings/_visual-grid.scss      |   5 +
 21 files changed, 529 insertions(+)
 create mode 100644 common/static/sass/neat/_neat-helpers.scss
 create mode 100644 common/static/sass/neat/_neat.scss
 create mode 100644 common/static/sass/neat/functions/_new-breakpoint.scss
 create mode 100644 common/static/sass/neat/functions/_private.scss
 create mode 100644 common/static/sass/neat/functions/_px-to-em.scss
 create mode 100644 common/static/sass/neat/grid/_fill-parent.scss
 create mode 100644 common/static/sass/neat/grid/_grid.scss
 create mode 100644 common/static/sass/neat/grid/_media.scss
 create mode 100644 common/static/sass/neat/grid/_omega.scss
 create mode 100644 common/static/sass/neat/grid/_outer-container.scss
 create mode 100644 common/static/sass/neat/grid/_pad.scss
 create mode 100644 common/static/sass/neat/grid/_private.scss
 create mode 100644 common/static/sass/neat/grid/_reset.scss
 create mode 100644 common/static/sass/neat/grid/_row.scss
 create mode 100644 common/static/sass/neat/grid/_shift.scss
 create mode 100644 common/static/sass/neat/grid/_span-columns.scss
 create mode 100644 common/static/sass/neat/grid/_to-deprecate.scss
 create mode 100644 common/static/sass/neat/grid/_visual-grid.scss
 create mode 100644 common/static/sass/neat/settings/_grid.scss
 create mode 100644 common/static/sass/neat/settings/_visual-grid.scss

diff --git a/Gemfile b/Gemfile
index fcbe49181f..8a6a2c8ccc 100644
--- a/Gemfile
+++ b/Gemfile
@@ -2,6 +2,7 @@ source 'https://rubygems.org'
 gem 'rake', '~> 10.0.3'
 gem 'sass', '3.2.9'
 gem 'bourbon', '~> 3.1.8'
+gem 'neat', '~> 1.3.0'
 gem 'colorize', '~> 0.5.8'
 gem 'launchy', '~> 2.1.2'
 gem 'sys-proctable', '~> 0.9.3'
diff --git a/common/static/sass/neat/_neat-helpers.scss b/common/static/sass/neat/_neat-helpers.scss
new file mode 100644
index 0000000000..86021b1bff
--- /dev/null
+++ b/common/static/sass/neat/_neat-helpers.scss
@@ -0,0 +1,8 @@
+// Functions
+@import "functions/private";
+@import "functions/new-breakpoint";
+@import "functions/px-to-em";
+
+// Settings
+@import "settings/grid";
+@import "settings/visual-grid";
diff --git a/common/static/sass/neat/_neat.scss b/common/static/sass/neat/_neat.scss
new file mode 100644
index 0000000000..cb5876b82d
--- /dev/null
+++ b/common/static/sass/neat/_neat.scss
@@ -0,0 +1,21 @@
+// Bourbon Neat
+// MIT Licensed
+// Copyright (c) 2012-2013 thoughtbot, inc.
+
+// Helpers
+@import "neat-helpers";
+
+// Grid
+@import "grid/private";
+@import "grid/reset";
+@import "grid/grid";
+@import "grid/omega";
+@import "grid/outer-container";
+@import "grid/span-columns";
+@import "grid/row";
+@import "grid/shift";
+@import "grid/pad";
+@import "grid/fill-parent";
+@import "grid/media";
+@import "grid/to-deprecate";
+@import "grid/visual-grid";
diff --git a/common/static/sass/neat/functions/_new-breakpoint.scss b/common/static/sass/neat/functions/_new-breakpoint.scss
new file mode 100644
index 0000000000..d89dcd101b
--- /dev/null
+++ b/common/static/sass/neat/functions/_new-breakpoint.scss
@@ -0,0 +1,16 @@
+@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;
+}
diff --git a/common/static/sass/neat/functions/_private.scss b/common/static/sass/neat/functions/_private.scss
new file mode 100644
index 0000000000..136a6ff3a1
--- /dev/null
+++ b/common/static/sass/neat/functions/_private.scss
@@ -0,0 +1,107 @@
+// Checks if a number is even
+@function is-even($int) {
+  @if $int%2 == 0   {
+    @return true;
+  }
+
+  @return false;
+}
+
+// Checks if an element belongs to a list
+@function belongs-to($tested-item, $list) {
+  @each $item in $list {
+    @if $item == $tested-item {
+      @return true;
+    }
+  }
+
+  @return false;
+}
+
+// Contains display value
+@function contains-display-value($query) {
+  @if belongs-to(table, $query) or belongs-to(block, $query) or belongs-to(inline-block, $query) or belongs-to(inline, $query) {
+    @return true;
+  }
+
+  @return false;
+}
+
+// Parses the first argument of span-columns()
+@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;
+  }
+}
+
+// Generates a striped background
+@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;
+}
+
+// Layout direction
+@function get-direction($layout, $default) {
+  $direction: nil;
+  
+  @if $layout == LTR or $layout == RTL {
+    $direction: direction-from-layout($layout);
+  } @else {
+    $direction: direction-from-layout($default);
+  }
+
+  @return $direction;
+}
+
+@function direction-from-layout($layout) {
+  $direction: nil;
+
+  @if $layout == LTR {
+    $direction: right;
+  } @else {
+    $direction: left;
+  }
+
+  @return $direction;
+}
+
+@function get-opposite-direction($direction) {
+  $opposite-direction: left;
+
+  @if $direction == left {
+    $opposite-direction: right;
+  }
+
+  @return $opposite-direction;
+}
diff --git a/common/static/sass/neat/functions/_px-to-em.scss b/common/static/sass/neat/functions/_px-to-em.scss
new file mode 100644
index 0000000000..058e51e8b5
--- /dev/null
+++ b/common/static/sass/neat/functions/_px-to-em.scss
@@ -0,0 +1,3 @@
+@function em($pxval, $base: 16) {
+  @return ($pxval / $base) * 1em;
+}
diff --git a/common/static/sass/neat/grid/_fill-parent.scss b/common/static/sass/neat/grid/_fill-parent.scss
new file mode 100644
index 0000000000..859c97790b
--- /dev/null
+++ b/common/static/sass/neat/grid/_fill-parent.scss
@@ -0,0 +1,7 @@
+@mixin fill-parent() {
+  width: 100%;
+
+  @if $border-box-sizing == false {
+    @include box-sizing(border-box);
+  }
+}
diff --git a/common/static/sass/neat/grid/_grid.scss b/common/static/sass/neat/grid/_grid.scss
new file mode 100644
index 0000000000..e074b6c536
--- /dev/null
+++ b/common/static/sass/neat/grid/_grid.scss
@@ -0,0 +1,5 @@
+@if $border-box-sizing == true {
+  * {
+    @include box-sizing(border-box);
+  }
+}
diff --git a/common/static/sass/neat/grid/_media.scss b/common/static/sass/neat/grid/_media.scss
new file mode 100644
index 0000000000..7c9872fb52
--- /dev/null
+++ b/common/static/sass/neat/grid/_media.scss
@@ -0,0 +1,51 @@
+@mixin media($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 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.";
+  }
+}
diff --git a/common/static/sass/neat/grid/_omega.scss b/common/static/sass/neat/grid/_omega.scss
new file mode 100644
index 0000000000..902459bcbc
--- /dev/null
+++ b/common/static/sass/neat/grid/_omega.scss
@@ -0,0 +1,79 @@
+// Remove last element gutter
+@mixin omega($query: block, $direction: default) {
+  $table: if(belongs-to(table, $query), true, false);
+  $auto: if(belongs-to(auto, $query), true, false);
+
+  @if $direction != default {
+    @warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead."
+  } @else {
+    $direction: get-direction($layout-direction, $default-layout-direction);
+  }
+
+  @if length($query) == 1 {
+    @if $auto {
+      &:last-child {
+        margin-#{$direction}: 0;
+      }
+    }
+
+    @else if contains-display-value($query) {
+      @if $table {
+        padding-#{$direction}: 0;
+      }
+
+      @else {
+        margin-#{$direction}: 0;
+      }
+    }
+
+    @else {
+      @include nth-child($query, $direction);
+    }
+  }
+
+  @else if length($query) == 2 {
+    @if $table {
+      @if $auto {
+        &:last-child {
+          padding-#{$direction}: 0;
+        }
+      }
+
+      @else {
+        &:nth-child(#{nth($query, 1)}) {
+          padding-#{$direction}: 0;
+        }
+      }
+    }
+
+    @else {
+      @if $auto {
+        &:last-child {
+          margin-#{$direction}: 0;
+        }
+      }
+
+      @else {
+        @include nth-child(nth($query, 1), $direction);
+      }
+    }
+  }
+
+  @else {
+    @warn "Too many arguments passed to the omega() mixin."
+  }
+}
+
+@mixin nth-child($query, $direction) {
+  $opposite-direction: get-opposite-direction($direction);
+
+  &:nth-child(#{$query}) {
+    margin-#{$direction}: 0;
+  }
+
+  @if type-of($query) == number {
+    &:nth-child(#{$query}+1) {
+      clear: $opposite-direction;
+    }
+  }
+}
diff --git a/common/static/sass/neat/grid/_outer-container.scss b/common/static/sass/neat/grid/_outer-container.scss
new file mode 100644
index 0000000000..22c541f455
--- /dev/null
+++ b/common/static/sass/neat/grid/_outer-container.scss
@@ -0,0 +1,8 @@
+@mixin outer-container {
+  @include clearfix;
+  max-width: $max-width;
+  margin: {
+    left: auto;
+    right: auto;
+  }
+}
diff --git a/common/static/sass/neat/grid/_pad.scss b/common/static/sass/neat/grid/_pad.scss
new file mode 100644
index 0000000000..3ef5d80e45
--- /dev/null
+++ b/common/static/sass/neat/grid/_pad.scss
@@ -0,0 +1,8 @@
+@mixin pad($padding: flex-gutter()) {
+  $padding-list: null;
+  @each $value in $padding {
+    $value: if($value == 'default', flex-gutter(), $value);
+    $padding-list: join($padding-list, $value);
+  }
+  padding: $padding-list;
+}
diff --git a/common/static/sass/neat/grid/_private.scss b/common/static/sass/neat/grid/_private.scss
new file mode 100644
index 0000000000..acd1b5b74d
--- /dev/null
+++ b/common/static/sass/neat/grid/_private.scss
@@ -0,0 +1,21 @@
+$parent-columns: $grid-columns !default;
+$fg-column: $column;
+$fg-gutter: $gutter;
+$fg-max-columns: $grid-columns;
+$container-display-table: false !default;
+$layout-direction: nil !default;
+
+@function flex-grid($columns, $container-columns: $fg-max-columns) {
+  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($width / $container-width);
+}
+
+@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
+  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
+  @return percentage($gutter / $container-width);
+}
+
+@function grid-width($n) {
+  @return $n * $gw-column + ($n - 1) * $gw-gutter;
+}
diff --git a/common/static/sass/neat/grid/_reset.scss b/common/static/sass/neat/grid/_reset.scss
new file mode 100644
index 0000000000..f670019e4b
--- /dev/null
+++ b/common/static/sass/neat/grid/_reset.scss
@@ -0,0 +1,12 @@
+@mixin reset-display {
+  $container-display-table: false;
+}
+
+@mixin reset-layout-direction {
+  $layout-direction: $default-layout-direction;
+}
+
+@mixin reset-all {
+  @include reset-display;
+  @include reset-layout-direction;
+}
diff --git a/common/static/sass/neat/grid/_row.scss b/common/static/sass/neat/grid/_row.scss
new file mode 100644
index 0000000000..582603dd01
--- /dev/null
+++ b/common/static/sass/neat/grid/_row.scss
@@ -0,0 +1,17 @@
+@mixin row($display: block, $direction: $default-layout-direction) {
+  @include clearfix;
+  $layout-direction: $direction;
+
+  @if $display == table {
+    display: table;
+    @include fill-parent;
+    table-layout: fixed;
+    $container-display-table: true;
+  }
+
+  @else {
+    display: block;
+    $container-display-table: false;
+  }
+}
+
diff --git a/common/static/sass/neat/grid/_shift.scss b/common/static/sass/neat/grid/_shift.scss
new file mode 100644
index 0000000000..e39208ef0d
--- /dev/null
+++ b/common/static/sass/neat/grid/_shift.scss
@@ -0,0 +1,10 @@
+@mixin shift($n-columns: 1) {
+
+  $direction: get-direction($layout-direction, $default-layout-direction);
+  $opposite-direction: get-opposite-direction($direction);
+
+  margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
+
+  // Reset nesting context
+  $parent-columns: $grid-columns;
+}
diff --git a/common/static/sass/neat/grid/_span-columns.scss b/common/static/sass/neat/grid/_span-columns.scss
new file mode 100644
index 0000000000..97902d62c4
--- /dev/null
+++ b/common/static/sass/neat/grid/_span-columns.scss
@@ -0,0 +1,45 @@
+@mixin span-columns($span: $columns of $container-columns, $display: block) {
+
+  $columns: nth($span, 1);
+  $container-columns: container-span($span);
+  $display-table: false;
+
+  $direction: get-direction($layout-direction, $default-layout-direction);
+  $opposite-direction: get-opposite-direction($direction);
+
+  @if $container-columns != $grid-columns {
+    $parent-columns: $container-columns;
+  } @else {
+    $parent-columns: $grid-columns;
+  }
+
+  @if $container-display-table == true {
+    $display-table: true;
+  } @else if $display == table {
+    $display-table: true;
+  } @else {
+    $display-table: false;
+  }
+
+  @if $display-table  {
+    display: table-cell;
+    padding-#{$direction}: flex-gutter($container-columns);
+    width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
+
+    &:last-child {
+      width: flex-grid($columns, $container-columns);
+      padding-#{$direction}: 0;
+    }
+  }
+
+  @else {
+    display: block;
+    float: #{$opposite-direction};
+    margin-#{$direction}: flex-gutter($container-columns);
+    width: flex-grid($columns, $container-columns);
+
+    &:last-child {
+      margin-#{$direction}: 0;
+    }
+  }
+}
diff --git a/common/static/sass/neat/grid/_to-deprecate.scss b/common/static/sass/neat/grid/_to-deprecate.scss
new file mode 100644
index 0000000000..d0a681fd12
--- /dev/null
+++ b/common/static/sass/neat/grid/_to-deprecate.scss
@@ -0,0 +1,57 @@
+@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
+  @warn "The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump.";
+
+  @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 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.";
+  }
+}
+
+@mixin nth-omega($nth, $display: block, $direction: default) {
+  @warn "The nth-omega() mixin is deprecated. Please use omega() instead.";
+  @include omega($nth $display, $direction);
+}
diff --git a/common/static/sass/neat/grid/_visual-grid.scss b/common/static/sass/neat/grid/_visual-grid.scss
new file mode 100644
index 0000000000..1c822fd322
--- /dev/null
+++ b/common/static/sass/neat/grid/_visual-grid.scss
@@ -0,0 +1,41 @@
+@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})");
+}
+
+@if $visual-grid == true or $visual-grid == yes {
+  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%;
+    pointer-events: none;
+
+    @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 media($breakpoint) {
+          @include grid-column-gradient(gradient-stops($grid-columns));
+        }
+      }
+    }
+  }
+}
diff --git a/common/static/sass/neat/settings/_grid.scss b/common/static/sass/neat/settings/_grid.scss
new file mode 100644
index 0000000000..f1dcda4780
--- /dev/null
+++ b/common/static/sass/neat/settings/_grid.scss
@@ -0,0 +1,7 @@
+$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
+$default-layout-direction: LTR !default;
diff --git a/common/static/sass/neat/settings/_visual-grid.scss b/common/static/sass/neat/settings/_visual-grid.scss
new file mode 100644
index 0000000000..611c2b3727
--- /dev/null
+++ b/common/static/sass/neat/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: () !default;