neat 1.7.0 → 4.0.0

data/contrib/patterns/_grid-media.scss

@@ -0,0 +1,36 @@
+$medium-screen: 1000px;
+
+$custom-neat-grid: (
+  columns: 12,
+  gutter: 50px,
+  media: $medium-screen,
+);
+
+$specific-neat-grid: (
+  columns: 12,
+  gutter: 80px,
+  media: "only screen and (min-width: 1000px) and (max-width: 1100px)",
+);
+
+
+$print-neat-grid: (
+  columns: 10,
+  gutter: 20px,
+  media: print,
+);
+
+.grid-column--media-3-to-6 {
+  @include grid-column(3);
+
+  &::before {
+    content: "#{map-get($neat-grid, media)}";
+  }
+
+  @include grid-media($custom-neat-grid, $specific-neat-grid, $print-neat-grid) {
+    @include grid-column(6);
+
+    &::before {
+      content: "#{map-get($neat-grid, media)}";
+    }
+  }
+}

data/contrib/patterns/_grid-nested.scss

@@ -0,0 +1,12 @@
+$grid--nested: (
+  columns: 3,
+  gutter: 0,
+);
+
+.grid--nested {
+  @include grid-container;
+}
+
+.grid--nested__column {
+  @include grid-column(1, $grid--nested);
+}

data/contrib/patterns/_grid-push.scss

@@ -0,0 +1,7 @@
+.grid-push--3 {
+  @include grid-push(3);
+}
+
+.grid-push--2-of-5 {
+  @include grid-push(2 of 5);
+}

data/contrib/patterns/_grid-shift.scss

@@ -0,0 +1,7 @@
+.grid-shift--4 {
+  @include grid-shift(4);
+}
+
+.grid-shift--neg-8 {
+  @include grid-shift(-8);
+}

data/contrib/patterns/_grid-visual.scss

@@ -0,0 +1,3 @@
+.grid-visual {
+  @include grid-visual;
+}

data/contrib/patterns/_grid.scss

@@ -0,0 +1,39 @@
+$grid--rtl: (
+  direction: rtl,
+);
+
+.grid {
+  @include grid-container;
+}
+
+.grid__column {
+  @include grid-column(1);
+}
+
+.grid__column--thirds {
+  @include grid-column(4);
+}
+
+.grid--rtl__column--thirds {
+  @include grid-column(4, $grid--rtl);
+}
+
+.grid__column--4 {
+  @include grid-column(4);
+}
+
+.grid__column--8 {
+  @include grid-column(8);
+}
+
+.grid__column--full {
+  @include grid-column(12);
+}
+
+.grid__column--3-of-5 {
+  @include grid-column(3 of 5);
+}
+
+.grid__column--2-of-5 {
+  @include grid-column(2 of 5);
+}

data/contrib/styles.scss

@@ -0,0 +1,13 @@
+@import "../core/neat";
+
+@import "base/variables";
+
+@import "patterns/box";
+@import "patterns/global";
+@import "patterns/grid";
+@import "patterns/grid-collapse";
+@import "patterns/grid-nested";
+@import "patterns/grid-push";
+@import "patterns/grid-shift";
+@import "patterns/grid-media";
+@import "patterns/grid-visual";

data/core/_neat.scss

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+// Neat 4.0.0
+// http://neat.bourbon.io
+// Copyright 2012 thoughtbot, inc.
+// MIT License
+
+@import "neat/settings/settings";
+
+@import "neat/functions/retrieve-neat-settings";
+@import "neat/functions/neat-column-default";
+@import "neat/functions/neat-column-width";
+@import "neat/functions/neat-column-ratio";
+@import "neat/functions/neat-float-direction";
+@import "neat/functions/neat-merge-defaults";
+@import "neat/functions/neat-opposite-direction";
+@import "neat/functions/neat-parse-columns";
+@import "neat/functions/neat-parse-media";
+@import "neat/functions/neat-append-grid-visual";
+
+@import "neat/mixins/grid-collapse";
+@import "neat/mixins/grid-column";
+@import "neat/mixins/grid-container";
+@import "neat/mixins/grid-media";
+@import "neat/mixins/grid-push";
+@import "neat/mixins/grid-shift";
+@import "neat/mixins/grid-visual";

data/core/neat/functions/_neat-append-grid-visual.scss

@@ -0,0 +1,21 @@
+@charset "UTF-8";
+/// Append attributes to a the `$_grid-visual` variable in `grid-visual` mixin
+///
+/// @argument {map} $grid
+///
+/// @argument {number (unitless) | null} $columns
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-column-default($neat-grid, 4)
+///
+/// @access private
+
+@function _neat-append-grid-visual($grid-visual-list, $attributes) {
+  @each $attribute in $attributes {
+    $grid-visual-list: append($grid-visual-list, $attribute, comma);
+  }
+
+  @return $grid-visual-list;
+}

data/core/neat/functions/_neat-column-default.scss

@@ -0,0 +1,23 @@
+@charset "UTF-8";
+/// Determine if a column count has been given.
+/// If no columns have been given return the grid's total column count.
+///
+/// @argument {map} $grid
+///
+/// @argument {number (unitless) | null} $columns
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-column-default($neat-grid, 4)
+///
+/// @access private
+
+@function _neat-column-default($grid, $columns) {
+  @if $columns == null {
+    $_grid-columns: _retrieve-neat-setting($grid, columns);
+    @return $_grid-columns;
+  } @else {
+    @return $columns;
+  }
+}

data/core/neat/functions/_neat-column-ratio.scss

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+/// Determine the ratio of `$columns` to the total column count.
+/// If `$columns` is more than one value, they are handed to
+/// `_neat-parse-columns()` which will determine the total columns and use this
+/// value instead of `total-columns`.
+///
+/// @argument {map} $grid
+///
+/// @argument {number | list} $columns
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-column-ratio($grid, 3)
+///
+/// @access private
+
+@function _neat-column-ratio($grid, $columns) {
+  @if length($columns) > 1 {
+    @return nth($columns, 1) / _neat-parse-columns($columns);
+  } @else if $columns {
+    @return $columns / _retrieve-neat-setting($grid, columns);
+  }
+}

data/core/neat/functions/_neat-column-width.scss

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+/// Return a calulated column width that can then be passed in to a `calc()`.
+///
+/// @argument {map} $grid
+///
+/// @argument {number} $columns
+///
+/// @return {string}
+///
+/// @example scss
+///   _neat-column-width($neat-grid, 4)
+///
+/// @access private
+
+@function _neat-column-width($grid, $columns) {
+  $_column-ratio: _neat-column-ratio($grid, $columns);
+  $_gutter: _retrieve-neat-setting($grid, gutter);
+
+  @if $_gutter == 0 {
+    @return unquote("#{percentage($_column-ratio)}");
+  } @else {
+    $_gutter-affordance: $_gutter + ($_gutter * $_column-ratio);
+    @return unquote("#{percentage($_column-ratio)} - #{$_gutter-affordance}");
+  }
+}

data/core/neat/functions/_neat-float-direction.scss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+/// Return the float direction of the grid.
+///
+/// @argument {map} $grid
+///
+/// @return {string}
+///
+/// @example scss
+///   _neat-float-direction($neat-grid)
+///
+/// @access private
+
+@function _neat-float-direction($grid) {
+  $_direction: _retrieve-neat-setting($grid, direction);
+  $_float-direction: null;
+  @if $_direction == "ltr" {
+      $_float-direction: left;
+  } @else if $_direction == "rtl" {
+    $_float-direction: right;
+  }
+  @return $_float-direction;
+}

data/core/neat/functions/_neat-merge-defaults.scss

@@ -0,0 +1,23 @@
+@charset "UTF-8";
+/// Apply Neat's default properties to undefined values within a map.
+///
+/// @argument {map} $grid
+///
+/// @return {map}
+///
+/// @example scss
+///   _retrieve-neat-setting($neat-grid)
+///
+/// @access private
+
+@function _neat-merge-defaults($grid) {
+  $_merged-grid: map-merge((
+    columns: 12,
+    gutter: 20px,
+    media: null,
+    color: rgba(#00d4ff, 0.25),
+    direction: ltr,
+  ), $grid);
+
+  @return $_merged-grid;
+}

data/core/neat/functions/_neat-opposite-direction.scss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+/// Return the oppoite of the float direction of the grid.
+///
+/// @argument {map} $grid
+///
+/// @return {string}
+///
+/// @example scss
+///   _neat-opposite-direction($neat-grid)
+///
+/// @access private
+
+@function _neat-opposite-direction($grid) {
+  $_direction: _retrieve-neat-setting($grid, direction);
+  $_float-direction: null;
+  @if $_direction == "ltr" {
+      $_float-direction: right;
+  } @else if $_direction == "rtl" {
+    $_float-direction: left;
+  }
+  @return $_float-direction;
+}

data/core/neat/functions/_neat-parse-columns.scss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+/// Parse a column count like `3 of 5` and retur the total coloumn count.
+/// This is to allow a shorthand for custom grids without using a settings map.
+///
+///
+/// @argument {list} $span
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-parse-columns(3 of 5)
+///
+/// @access private
+
+@function _neat-parse-columns($span) {
+  @if length($span) == 3 {
+    $_total-columns: nth($span, 3);
+    @return $_total-columns;
+  } @else if (length($span) == 2) or (length($span) >= 3) {
+    @error "`$column` should contain 2 values, seperated by an `of`";
+  }
+}

data/core/neat/functions/_neat-parse-media.scss

@@ -0,0 +1,20 @@
+@charset "UTF-8";
+/// Parse media types. If the property is a string then return it, otherwise
+/// assume screen and min-width.
+///
+/// @argument {string | number (with unit)} $media
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-parse-media($grid, 1000px)
+///
+/// @access private
+
+@function _neat-parse-media($media) {
+  @if type-of($media) == number {
+    @return "only screen and (min-width: #{$media})";
+  } @else if type-of($media) == string {
+    @return "#{$media}";
+  }
+}

data/core/neat/functions/_retrieve-neat-settings.scss

@@ -0,0 +1,19 @@
+@charset "UTF-8";
+/// This function recives a grid map and merges it with Neat's defauls.
+/// It then returns the value of the property that has been passed to it.
+///
+/// @argument {map} $grid
+///
+/// @argument {string} $setting
+///
+/// @return {boolean | color | list | number | string}
+///
+/// @example scss
+///   _retrieve-neat-setting($neat-grid, columns)
+///
+/// @access private
+
+@function _retrieve-neat-setting($grid, $setting) {
+  $_grid-settings: map-merge(_neat-merge-defaults($neat-grid), $grid);
+  @return map-get($_grid-settings, $setting);
+}

data/core/neat/mixins/_grid-collapse.scss

@@ -0,0 +1,35 @@
+@charset "UTF-8";
+/// Creates collapsed grid object that consumes the gutters of its container,
+/// for use in nested layouts.
+///
+/// @group features
+///
+/// @name Grid collapse
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid to be used to generate the collapsed container.
+///   By default, the global `$neat-grid` will be used.
+///
+/// @example scss
+///   .element {
+///     @include grid-collapse;
+///   }
+///
+/// @example css
+///   .element {
+///     margin-left: -20px;
+///     margin-right: -20px;
+///     width: calc(100% + 40px);
+///   }
+
+@mixin grid-collapse($grid: $neat-grid) {
+  $_grid-gutter: _retrieve-neat-setting($grid, gutter);
+
+  @if unit($_grid-gutter) == "%" {
+    @warn "`grid-collapse` is not compatible with percentage based gutters.";
+  }
+
+  margin-#{_neat-float-direction($grid)}: -($_grid-gutter);
+  margin-#{_neat-opposite-direction($grid)}: -($_grid-gutter);
+  width: calc(100% + #{($_grid-gutter * 2)});
+}

data/core/neat/mixins/_grid-column.scss

@@ -0,0 +1,39 @@
+@charset "UTF-8";
+/// Creates a grid column of requested size.
+///
+/// @group features
+///
+/// @name Grid column
+///
+/// @argument {number (unitless)} $columns [null]
+///   Specifies the number of columns an element should span based on the total
+///   columns of the grid.
+///
+///   This can also be defined in a shorthand syntax which also contains the
+///   total column count such as `3 of 5`.
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid to be used to generate the column.
+///   By default, the global `$neat-grid` will be used.
+///
+/// @example scss
+///   .element {
+///     @include grid-column(3);
+///   }
+///
+/// @example css
+///   .element {
+///     width: calc(25% - 25px);
+///     float: left;
+///     margin-left: 20px;
+///   }
+
+@mixin grid-column($columns: null, $grid: $neat-grid) {
+  $columns: _neat-column-default($grid, $columns);
+  $_grid-columns: _retrieve-neat-setting($grid, columns);
+  $_grid-gutter: _retrieve-neat-setting($grid, gutter);
+
+  width: calc(#{_neat-column-width($grid, $columns)});
+  float: _neat-float-direction($grid);
+  margin-#{_neat-float-direction($grid)}: $_grid-gutter;
+}

data/core/neat/mixins/_grid-container.scss

@@ -0,0 +1,31 @@
+@charset "UTF-8";
+/// Creates a grid container with clearfix.
+///
+/// @group features
+///
+/// @name Grid container
+///
+/// @example scss
+///   .element {
+///     @include grid-container;
+///   }
+///
+/// @example css
+///   .element::after {
+///     clear: both;
+///     content: "";
+///     display: block;
+///   }
+
+@mixin grid-container($grid: $neat-grid) {
+  @if $grid != $neat-grid {
+    @warn "`grid-container` does not use grid properties. " +
+          "Custom grids do not need to be passed in to this mixin.";
+  }
+
+  &::after {
+    clear: both;
+    content: "";
+    display: block;
+  }
+}

data/core/neat/mixins/_grid-media.scss

@@ -0,0 +1,88 @@
+@charset "UTF-8";
+/// `grid-media` allows you to change your layout based on a media query.
+/// For example, an object can span 3 columns on small screens and 6 columns
+/// on large screens.
+///
+/// You can take this a step further and set different grid attributes like
+/// gutter size and total column count for each media query. So, for example,
+/// you can have a `1rem` gutter on small screens, and a `2rem` gutter on large
+/// screens.
+///
+/// @group features
+///
+/// @name Grid media
+///
+/// @argument {map} $grid
+///   The grid or grids to be used within the scope of the block.
+///   These grids should include the `media` property to determine the expression
+///   for the media query.
+///
+/// @content
+///   Grid media will temporarily override the default grid with the attributes
+///   of the custom grids. When `grid-media` is given a custom grid, it will
+///   apply that grid to any of other Neat mixins within the `grid-media` block
+///   (`{…}`). Once the mixin block has ended the default grid will revert to
+///   its original state as defined by `$neat-grid`. This allows for different
+///   gutter width and column count based on screen size or other properties.
+///
+///   If multiple grids are passed in to `grid-media`, it will loop through the
+///   contents of the block, quickly allowing you to apply multiple grids in a
+///   single mixin.
+///
+/// @example scss
+///   $custom-neat-grid: (
+///     columns: 12,
+///     gutter: 50px,
+///     media: "screen and (max-width: 999px)",
+///   );
+///
+///   $custom-neat-grid-2: (
+///     columns: 12,
+///     gutter: 70px,
+///     media: 1000px,
+///   );
+///
+///   .element {
+///     @include grid-column(3);
+///
+///     @include grid-media($custom-neat-grid, $custom-neat-grid-2){
+///       @include grid-column(6);
+///     }
+///   }
+///
+/// @example css
+///   .element {
+///     width: calc(25% - 25px);
+///     float: left;
+///     margin-left: 20px;
+///   }
+///
+///   @media only screen and (max-width: 999px) {
+///     .element {
+///       width: calc(50% - 75px);
+///       float: left;
+///       margin-left: 50px;
+///     }
+///   }
+///
+///   @media only screen and (min-width: 1000px) {
+///     .element {
+///       width: calc(50% - 75px);
+///       float: left;
+///       margin-left: 70px;
+///     }
+///   }
+
+@mixin grid-media($grids...) {
+  @each $_grid in $grids {
+    $_media: _retrieve-neat-setting($_grid, media);
+    $_query: _neat-parse-media($_media);
+
+    @media #{$_query} {
+      $_default-neat-grid: $neat-grid;
+      $neat-grid: map-merge($neat-grid, $_grid) !global;
+      @content;
+      $neat-grid: $_default-neat-grid !global;
+    }
+  }
+}

data/core/neat/mixins/_grid-push.scss

@@ -0,0 +1,37 @@
+@charset "UTF-8";
+/// Push or pull a grid column by manipulating its left margin.
+///
+/// @group features
+///
+/// @name Grid push
+///
+/// @argument {number (unitless)} $push [false]
+///   The number of columns to push the column.
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid to be used to determine how far to push the column.
+///   By default, the global `$neat-grid` will be used.
+///
+/// @example scss
+///   .element {
+///     @include grid-push(3);
+///   }
+///
+/// @example css
+///   .element {
+///     margin-left: calc(25% - 25px + 40px);
+///   }
+
+@mixin grid-push($push: false, $grid: $neat-grid) {
+  $_grid-columns: _retrieve-neat-setting($grid, columns);
+  $_grid-gutter: _retrieve-neat-setting($grid, gutter);
+
+  @if $push {
+    $_gutter-affordance: $_grid-gutter * 2;
+    $_margin-value: calc(#{_neat-column-width($grid, $push)} + #{$_gutter-affordance});
+    margin-#{_neat-float-direction($grid)}: $_margin-value;
+  } @else {
+    $_margin-value: _retrieve-neat-setting($grid, gutter);
+    margin-#{_neat-float-direction($grid)}: $_margin-value;
+  }
+}

data/core/neat/mixins/_grid-shift.scss

@@ -0,0 +1,36 @@
+@charset "UTF-8";
+/// Shift columns and reorder them within their container using relative
+/// positioning.
+///
+/// @group features
+///
+/// @name Grid shift
+///
+/// @argument {number (unitless)} $shift [false]
+///   The number of columns to shift the column.
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid to be used to determine how far to shift the column.
+///   By default, the global `$neat-grid` will be used.
+///
+/// @example scss
+///   .element {
+///     @include grid-shift(3);
+///   }
+///
+/// @example css
+///   .element {
+///     left: calc(25% - 25px + 20px);
+///     position: relative;
+///   }
+
+@mixin grid-shift($shift: false, $grid: $neat-grid) {
+  @if $shift {
+    $_shift-value: calc(#{_neat-column-width($grid, $shift)} + #{_retrieve-neat-setting($grid, gutter)});
+    #{_neat-float-direction($grid)}: $_shift-value;
+  } @else {
+    #{_neat-float-direction($grid)}: auto;
+  }
+
+  position: relative;
+}