neat 1.9.1 → 2.0.0.alpha.1

data/contrib/patterns/_grid-nested.scss

@@ -0,0 +1,7 @@
+.grid--nested {
+  @include grid-container($grid--nested);
+}
+
+.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.scss

@@ -0,0 +1,31 @@
+.grid {
+  @include grid-container;
+}
+
+.grid__column {
+  @include grid-column(1);
+}
+
+.grid__column--thirds {
+  @include grid-column(4);
+}
+
+.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

@@ -1,293 +1,12 @@
-$visual-grid: true !global;
-
-// Grid Settings
-$column: 90px;
-$gutter: 30px;
-$grid-columns: 12;
-$max-width: 1200px;
-
-// Media
-$medium-screen: 600px;
-$large-screen: 900px;
-
-@import "../app/assets/stylesheets/neat";
-
-$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
-$large-screen-up: new-breakpoint(min-width $large-screen 8);
-
-// Base
-$base-line-height: 1.625;
-$base-spacing: $base-line-height * 1em;
-
-// Visual Grid
-
-$visual-grid-color: #e6f6ff;
-$visual-grid-opacity: 0.4;
-
-// Colors
-$white: #fafafa;
-$lightblue: #d5eefb;
-$blue: #aadbf5;
-$darkblue: #41a8df;
-$darkerblue: #072f44;
-
-// Base
-// ============================================
-
-body {
-  color: $darkerblue;
-  font-family: sans-serif;
-  line-height: $base-line-height;
-  margin: 0 0 (1.5rem * 2);
-  text-align: center;
-}
-
-h3 {
-  margin: 1em;
-}
-
-a,
-a:visited {
-  color: inherit;
-}
-
-pre {
-  line-height: 1.6em;
-}
-
-code {
-  display: block;
-}
-
-// Header
-// ============================================
-
-.container {
-  margin: 0 auto;
-  max-width: 500px;
-  padding: 0 $gutter;
-  position: relative;
-}
-
-.welcome-message {
-  @include clearfix();
-  background-color: $blue;
-  margin-bottom: 1.5rem;
-  padding: $base-spacing 0;
-  text-align: center;
-}
-
-.welcome-message-title {
-  font-weight: 200;
-  line-height: 1;
-}
-
-// ============================================
-
-.code {
-  @include outer-container();
-  background-color: $lightblue;
-  padding: 0.5em;
-  text-align: center;
-}
-
-.page-section {
-  @include outer-container;
-  background-color: $lightblue;
-  line-height: $base-line-height * 1.5;
-  margin-bottom: 3em;
-  text-align: center;
-}
-
-.page-section-inner {
-  background-color: $blue;
-  font-size: 0.8em;
-  height: $base-line-height * 4rem;
-  line-height: $base-line-height;
-  margin-bottom: 2em;
-  padding: 1em;
-  text-align: left;
-}
-
-// Zero
-// ============================================
-
-.zero-alpha,
-.zero-beta {
-  @include span-columns(6);
-  height: $base-line-height * 4rem;
-  line-height: $base-line-height;
-  padding: 1em;
-  text-align: left;
-}
-
-// First
-// ============================================
-
-.first-alpha {
-  @include span-columns(1);
-}
-
-.first-beta {
-  @include span-columns(11);
-}
-
-.first-gamma {
-  @include span-columns(2);
-}
-
-.first-delta {
-  @include span-columns(10);
-}
-
-.first-epsilon {
-  @include span-columns(3);
-}
-
-.first-zeta {
-  @include span-columns(9);
-}
-
-.first-eta {
-  @include span-columns(4);
-}
-
-.first-theta {
-  @include span-columns(8);
-}
-
-.first-iota {
-  @include span-columns(5);
-}
-
-.first-kappa {
-  @include span-columns(7);
-}
-
-.first-lambda {
-  @include span-columns(6);
-}
-
-.first-mu {
-  @include span-columns(6);
-}
-
-.first-beta,
-.first-delta,
-.first-zeta,
-.first-theta,
-.first-kappa,
-.first-mu {
-  @include omega;
-}
-
-// Second
-// ============================================
-
-.second-alpha {
-  @include span-columns(4);
-}
-
-.second-beta {
-  @include span-columns(8);
-  line-height: $base-line-height * 2;
-  padding: 0;
-  text-align: center;
-}
-
-.second-beta-alpha,
-.second-beta-beta {
-  @include span-columns(4 of 8);
-  background-color: $lightblue;
-  height: 84%;
-  padding: 1em;
-}
-
-// Third
-// ===================================
-
-.third-dummy {
-  border-bottom: 0;
-  height: 5.5em;
-  text-align: center;
-}
-
-.third-alpha {
-  @include fill-parent();
-  @include row(table);
-  margin-bottom: 0;
-  padding: 0;
-}
-
-.third-alpha-alpha {
-  @include span-columns(4);
-  border-right: 1px solid rgba($white, 0.5);
-}
-
-.third-alpha-beta {
-  @include reset-display;
-  @include span-columns(8);
-  height: 20em;
-}
-
-// Fourth
-// ===================================
-
-.fourth {
-
-  .fourth-alpha {
-    @include span-columns(6);
-    @include shift(3);
-    height: 20em;
-    text-align: center;
-  }
-}
-
-// Fifth
-// ===================================
-
-.fifth-box {
-  @include omega(4n);
-  @include span-columns(3);
-  font-size: 0.78em;
-  height: 8em;
-  margin-top: 2em;
-}
-
-// Fifth
-// ===================================
-
-.sixth {
-  @include media($medium-screen) {
-    font-size: 0.9em;
-    line-height: 1.5em;
-  }
-
-  pre {
-    padding: 10px 0;
-  }
-}
-
-.sixth-alpha,
-.sixth-beta {
-  line-height: 2em;
-  min-height: 20em;
-  padding: 1em;
-  text-align: left;
-}
-
-.sixth-alpha {
-  @include span-columns(4);
-
-  @include media($medium-screen) {
-    @include span-columns(3);
-  }
-}
-
-.sixth-beta {
-  @include span-columns(8);
-
-  @include media($medium-screen) {
-    @include span-columns(3);
-  }
-}
+@import "../core/neat";
+
+@import "base/grids";
+@import "base/variables";
+
+@import "patterns/box";
+@import "patterns/global";
+@import "patterns/grid";
+@import "patterns/grid-nested";
+@import "patterns/grid-push";
+@import "patterns/grid-shift";
+@import "patterns/grid-media";

data/core/_neat.scss

@@ -0,0 +1,20 @@
+@charset "UTF-8";
+// Neat 2.0.0-alpha.1
+// 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-parse-columns";
+@import "neat/functions/neat-parse-media";
+
+@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";

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 detirmine 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}");
+  }
+}