Install bourbon neat

Gemfile

@@ -4,3 +4,4 @@ source "https://rubygems.org"
 
 gem "bourbon", "~> 4.0"
 gem "bitters"
+gem "neat"

Gemfile.lock

@@ -8,6 +8,9 @@ GEM
     bourbon (4.3.2)
       sass (~> 3.4)
       thor (~> 0.19)
+    neat (1.8.0)
+      sass (>= 3.3)
+      thor (~> 0.19)
     sass (3.4.23)
     thor (0.19.4)
 
@@ -17,6 +20,7 @@ PLATFORMS
 DEPENDENCIES
   bitters
   bourbon (~> 4.0)
+  neat
 
 BUNDLED WITH
    1.12.5

web/static/css/app.scss

@@ -1,5 +1,6 @@
 @import "bourbon/bourbon";
 @import "base/base";
+@import "neat/neat";
 @import "variables";
 @import "game-board";
 

web/static/css/neat/_neat-helpers.scss

@@ -0,0 +1,11 @@
+// Mixins
+@import "mixins/clearfix";
+
+// Functions
+@import "functions/private";
+@import "functions/new-breakpoint";
+
+// Settings
+@import "settings/grid";
+@import "settings/visual-grid";
+@import "settings/disable-warnings";

web/static/css/neat/_neat.scss

@@ -0,0 +1,23 @@
+// Neat 1.8.0
+// http://neat.bourbon.io
+// Copyright 2012-2015 thoughtbot, inc.
+// MIT License
+
+// Helpers
+@import "neat-helpers";
+
+// Grid
+@import "grid/private";
+@import "grid/box-sizing";
+@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";
+@import "grid/display-context";
+@import "grid/direction-context";

web/static/css/neat/functions/_new-breakpoint.scss

@@ -0,0 +1,49 @@
+@charset "UTF-8";
+
+/// 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 is-even(length($query)) {
+    $query: append($query, $total-columns);
+  }
+
+  @if is-not(belongs-to($query, $visual-grid-breakpoints)) {
+    $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global;
+  }
+
+  @return $query;
+}

web/static/css/neat/functions/_private.scss

@@ -0,0 +1,114 @@
+// Not function for Libsass compatibility
+// https://github.com/sass/libsass/issues/368
+@function is-not($value) {
+  @return if($value, false, true);
+}
+
+// Checks if a number is even
+@function is-even($int) {
+  @return $int % 2 == 0;
+}
+
+// Checks if an element belongs to a list or not
+@function belongs-to($tested-item, $list) {
+  @return is-not(not-belongs-to($tested-item, $list));
+}
+
+@function not-belongs-to($tested-item, $list) {
+  @return is-not(index($list, $tested-item));
+}
+
+// Contains display value
+@function contains-display-value($query) {
+  @return belongs-to(table, $query)
+       or belongs-to(block, $query)
+       or belongs-to(inline-block, $query)
+       or belongs-to(inline, $query);
+}
+
+// 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;
+  }
+
+  @return $grid-columns;
+}
+
+@function container-shift($shift: $shift) {
+  $parent-columns: $grid-columns !default !global;
+
+  @if length($shift) == 3 {
+    $container-columns: nth($shift, 3);
+    @return $container-columns;
+  } @else if length($shift) == 2 {
+    $container-columns: nth($shift, 2);
+    @return $container-columns;
+  }
+
+  @return $parent-columns;
+}
+
+// Generates a striped background
+@function gradient-stops($grid-columns, $color: $visual-grid-color) {
+  $transparent: transparent;
+
+  $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, comma);
+      $values: append($values, $color $column-offset, comma);
+      $column-offset: $column-offset + $column-width;
+    } @else {
+      $values: append($values, $color $column-offset, comma);
+      $values: append($values, $transparent $column-offset, comma);
+      $column-offset: $column-offset + $gutter-width;
+    }
+  }
+
+  @return $values;
+}
+
+// Layout direction
+@function get-direction($layout, $default) {
+  $direction: null;
+
+  @if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" {
+    $direction: direction-from-layout($layout);
+  } @else {
+    $direction: direction-from-layout($default);
+  }
+
+  @return $direction;
+}
+
+@function direction-from-layout($layout) {
+  $direction: null;
+
+  @if to-upper-case($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;
+}

web/static/css/neat/grid/_box-sizing.scss

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+@if $border-box-sizing == true {
+  html { // http://bit.ly/1qk2tVR
+    box-sizing: border-box;
+  }
+
+  * {
+    &,
+    &::after,
+    &::before {
+      box-sizing: inherit;
+    }
+  }
+}

web/static/css/neat/grid/_direction-context.scss

@@ -0,0 +1,33 @@
+@charset "UTF-8";
+
+/// Changes the direction property used by other mixins called in the code block argument.
+///
+/// @param {String} $direction [left-to-right]
+///   Layout direction to be used within the block. Can be `left-to-right` or `right-to-left`.
+///
+/// @example scss - Usage
+///   @include direction-context(right-to-left) {
+///    .right-to-left-block {
+///      @include span-columns(6);
+///     }
+///   }
+///
+/// @example css - CSS Output
+///   .right-to-left-block {
+///     float: right;
+///      ...
+///   }
+
+@mixin direction-context($direction: left-to-right) {
+  $scope-direction: $layout-direction;
+
+  @if to-lower-case($direction) == "left-to-right" {
+    $layout-direction: LTR !global;
+  } @else if to-lower-case($direction) == "right-to-left" {
+    $layout-direction: RTL !global;
+  }
+
+  @content;
+
+  $layout-direction: $scope-direction !global;
+}

web/static/css/neat/grid/_display-context.scss

@@ -0,0 +1,28 @@
+@charset "UTF-8";
+
+/// Changes the display property used by other mixins called in the code block argument.
+///
+/// @param {String} $display [block]
+///   Display value to be used within the block. Can be `table` or `block`.
+///
+/// @example scss
+///   @include display-context(table) {
+///    .display-table {
+///      @include span-columns(6);
+///     }
+///   }
+///
+/// @example css
+///   .display-table {
+///      display: table-cell;
+///      ...
+///   }
+
+@mixin display-context($display: block) {
+  $scope-display: $container-display-table;
+  $container-display-table: $display == table !global;
+
+  @content;
+
+  $container-display-table: $scope-display !global;
+}

web/static/css/neat/grid/_fill-parent.scss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+
+/// Forces the element to fill its parent container.
+///
+/// @example scss - Usage
+///   .element {
+///     @include fill-parent;
+///   }
+///
+/// @example css - CSS Output
+///   .element {
+///     width: 100%;
+///     box-sizing: border-box;
+///   }
+
+@mixin fill-parent() {
+  width: 100%;
+
+  @if $border-box-sizing == false {
+    box-sizing: border-box;
+  }
+}