neat 2.0.0.beta.1 → 2.0.0.beta.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c3787ca54822b2cc33778821496950fa92f8b8d7
-  data.tar.gz: f521238ccd45444adcd4d66fe39e5d3667d91ea2
+  metadata.gz: 0244ce326d07ed8e5a37123b8560c95683526b34
+  data.tar.gz: 1749d9865aeb8be2230fa47754ee2a55ae9d5a5f
 SHA512:
-  metadata.gz: 266dbbb6933f76906bcd329300ab318bf8e77ec544848f6b237b4ec7c22defbe5331dfde6d3cebe7baf59d2bf70cfc646d8a01d1696d122f7969ca1b5605a33b
-  data.tar.gz: 2f015d7aabf6bd4d69f5b2514cf3a8701e8825dc7d791d1dbece56a976abb7286c925a204060c18a028fd7ac03cafeb1e8e0b922c9cc608e27479a601a763369
+  metadata.gz: ceac4186355f6d0945795cdd97f61ac39fe07ff0e1148f1ee95eb77c6eee5301096eaadf8dd2bcc1cab0df1cd192488d281f23c8e18a7d20912611ad2d6a121b
+  data.tar.gz: e13819e5b69fddc15afe7d260f366725f48c047af3733ea4681a87f0afd60426715b7f032c64ae0264a9272d0894de8d532d16c6177003ca88d12a3de0b3c489

data/.ruby-version

@@ -0,0 +1 @@
+2.3.1

data/CHANGELOG.md

@@ -5,6 +5,32 @@ project adheres to [Semantic Versioning](http://semver.org).
 
 ## [Unreleased]
 
+## [2.0.0.beta.2]
+
+### Added
+
+- Added `grid-visual` to show visual grid guides
+- Added ltr/rtl support
+
+### Removed
+
+- Removed `node-sass` dependency from `package.json`
+
+## [2.0.0.beta.1]
+
+### Added
+
+- Added `grid-collapse` to allow the creation of nested layouts
+
+## [2.0.0.alpha.1]
+
+### Added
+
+- Added `grid-shift` functionality
+- Added `grid-media` to allow the creation of media queries with custom grids
+
+## [2.0.0.alpha.0]
+
 ### Added
 
 - Added `$neat-grid` map to store user defined default grid properties
@@ -12,9 +38,6 @@ project adheres to [Semantic Versioning](http://semver.org).
 - Added improved documentation and releasing information
 - Added `grid-container` for floated grid which contains a simple clearfix
 - Added `grid-push` functionality
-- Added `grid-shift` functionality
-- Added `grid-media` to allow the creation of media queries with custom grids
-- Added `grid-collapse` to allow the creation of nested layouts
 
 ### Changed
 
@@ -54,6 +77,7 @@ project adheres to [Semantic Versioning](http://semver.org).
     - `$visual-grid-index` has been removed
     - `$visual-grid-opacity` has been removed
 
+
 ## 1.8.0 - 2016-06-21
 
 ### Added
@@ -279,4 +303,8 @@ project adheres to [Semantic Versioning](http://semver.org).
 
 - Initial release
 
-[Unreleased]: https://github.com/thoughtbot/neat/compare/v1.8.0...neat-2.0.0
+[Unreleased]: https://github.com/thoughtbot/neat/compare/v2.0.0.beta.1...neat-2.0.0
+[2.0.0.beta.2]: https://github.com/thoughtbot/neat/compare/v2.0.0.beta.1...v2.0.0.beta.2
+[2.0.0.beta.1]: https://github.com/thoughtbot/neat/compare/v2.0.0.alpha.1...v2.0.0.beta.1
+[2.0.0.alpha.1]: https://github.com/thoughtbot/neat/compare/v2.0.0.alpha.0...v2.0.0.alpha.1
+[2.0.0.alpha.0]: https://github.com/thoughtbot/neat/compare/v1.8.0...v2.0.0.alpha.0

data/bower.json

@@ -1,7 +1,7 @@
 {
   "name": "neat",
   "description": "A lightweight, semantic grid framework built with Bourbon",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "main": "core/_neat.scss",
   "license": "MIT",
   "ignore": [

data/contrib/base/_grids.scss

@@ -2,3 +2,7 @@ $grid--nested: (
   columns: 3,
   gutter: 0,
 );
+
+$grid--rtl: (
+  direction: rtl,
+);

data/contrib/index.html

@@ -19,7 +19,7 @@
       </p>
     </header>
     <main role="main">
-      <div class="grid">
+      <div class="grid grid-visual">
         <div class="grid__column--full">
           <h3>Basic Floated Grid</h3>
         </div>
@@ -35,6 +35,12 @@
         <div class="grid__column box"></div>
         <div class="grid__column box"></div>
         <div class="grid__column box"></div>
+        <div class="grid__column--full">
+          <h3>RTL Grid</h3>
+        </div>
+        <div class="grid--rtl__column--thirds box">&nbsp;First</div>
+        <div class="grid--rtl__column--thirds box">&nbsp;Second</div>
+        <div class="grid--rtl__column--thirds box">&nbsp;Third</div>
         <div class="grid__column--full">
           <h3>Nested Grid</h3>
         </div>
@@ -48,7 +54,6 @@
         <div class="grid__column--full">
           <h3>Push Grid</h3>
         </div>
-        <div class="grid__column--thirds box grid-push--3"></div>
         <div class="grid__column--full">
           <h3>Shift Grid</h3>
         </div>
@@ -76,7 +81,6 @@
             </div>
         </div>
         <div class="grid__column--thirds box"></div>
-        <div class="grid__column--full">
       </div>
     </main>
   </body>

data/contrib/patterns/_grid-visual.scss

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

data/contrib/patterns/_grid.scss

@@ -10,6 +10,10 @@
   @include grid-column(4);
 }
 
+.grid--rtl__column--thirds {
+  @include grid-column(4, $grid--rtl);
+}
+
 .grid__column--4 {
   @include grid-column(4);
 }

data/contrib/styles.scss

@@ -11,3 +11,4 @@
 @import "patterns/grid-push";
 @import "patterns/grid-shift";
 @import "patterns/grid-media";
+@import "patterns/grid-visual";

data/core/_neat.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-// Neat 2.0.0-beta.1
+// Neat 2.0.0-beta.2
 // http://neat.bourbon.io
 // Copyright 2012 thoughtbot, inc.
 // MIT License
@@ -10,8 +10,11 @@
 @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-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";
@@ -19,3 +22,4 @@
 @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-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-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/mixins/_grid-collapse.scss

@@ -29,8 +29,8 @@
     @warn "`grid-collapse` is not compatible with percentage based gutters.";
   }
 
-  float: left;
-  margin-left: -($_grid-gutter);
-  margin-right: -($_grid-gutter);
+  float: _neat-float-direction($grid);
+  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

@@ -28,6 +28,6 @@
   $_grid-gutter: _retrieve-neat-setting($grid, gutter);
 
   width: calc(#{_neat-column-width($grid, $columns)});
-  float: left;
-  margin-left: $_grid-gutter;
+  float: _neat-float-direction($grid);
+  margin-#{_neat-float-direction($grid)}: $_grid-gutter;
 }

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

@@ -28,9 +28,9 @@
   @if $push {
     $_gutter-affordance: $_grid-gutter * 2;
     $_margin-value: calc(#{_neat-column-width($grid, $push)} + #{$_gutter-affordance});
-    margin-left: $_margin-value;
+    margin-#{_neat-float-direction($grid)}: $_margin-value;
   } @else {
     $_margin-value: _retrieve-neat-setting($grid, gutter);
-    margin-left: $_margin-value;
+    margin-#{_neat-float-direction($grid)}: $_margin-value;
   }
 }

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

@@ -26,9 +26,9 @@
 @mixin grid-shift($shift: false, $grid: $neat-grid) {
   @if $shift {
     $_shift-value: calc(#{_neat-column-width($grid, $shift)} + #{_retrieve-neat-setting($grid, gutter)});
-    left: $_shift-value;
+    #{_neat-float-direction($grid)}: $_shift-value;
   } @else {
-    left: auto;
+    #{_neat-float-direction($grid)}: auto;
   }
 
   position: relative;

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

@@ -0,0 +1,85 @@
+@charset "UTF-8";
+/// Creates a guide on a grid container to visualise the columns.
+///
+/// @group features
+///
+/// @name Grid visual
+///
+/// @argument {color} $color
+///   The color of the guide lines created.
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid used to determine the guide
+///
+/// @example scss
+///   .element {
+///     @include grid-visual;
+///   }
+///
+/// @example css
+///   .element {
+///     background-image: … ;
+///   }
+
+@mixin grid-visual($color: null, $grid: $neat-grid) {
+  @if not $color {
+    $color: _retrieve-neat-setting($grid, color);
+  }
+
+  $_grid-columns: _retrieve-neat-setting($grid, columns);
+  $_grid-gutter: _retrieve-neat-setting($grid, gutter);
+  $_grid-visual-object: () !default;
+  $_grid-visual:
+    $color,
+    $color 1px,
+    transparent 1px,
+    transparent $_grid-gutter,
+    $color calc(#{$_grid-gutter} + 1px),
+    transparent calc(#{$_grid-gutter} + 2px),
+  ;
+
+  @for $i from 1 to $_grid-columns {
+    $_grid-visual-local: (
+      #{$i}: "#{_neat-column-width($grid, $i)} + #{$_grid-gutter}",
+    );
+
+    $_grid-visual-object: map-merge($_grid-visual-object, $_grid-visual-local);
+  }
+
+  @each $stop, $location in $_grid-visual-object {
+    $_grid-visual-loop-list:
+      transparent calc(#{$location}),
+      $color calc(#{$location}),
+      $color calc(#{$location} + 1px),
+      transparent calc(#{$location} + 1px),
+      transparent calc(#{$location} + #{$_grid-gutter}),
+      $color calc(#{$location} + #{$_grid-gutter}),
+      $color calc(#{$location} + #{$_grid-gutter} + 1px),
+      transparent calc(#{$location} + #{$_grid-gutter} + 1px),
+    ;
+
+    $_grid-visual: _neat-append-grid-visual($_grid-visual, $_grid-visual-loop-list);
+  }
+
+  $_grid-visual-loop-list:
+    transparent calc(100% - #{$_grid-gutter}),
+    $color calc(100% - #{$_grid-gutter}),
+    $color calc(100% - #{$_grid-gutter} + 1px),
+    transparent calc(100% - #{$_grid-gutter} + 1px),
+    transparent calc(100% - 1px),
+    $color calc(100% - 1px),
+  ;
+
+  $_grid-visual: _neat-append-grid-visual($_grid-visual, $_grid-visual-loop-list);
+
+  background-image:
+    linear-gradient(to right, $_grid-visual),
+    linear-gradient(to bottom,
+      $color,
+      $color 1px,
+      transparent 1px,
+      transparent calc(100% - 1px),
+      $color calc(100% - 1px),
+      $color
+  );
+}

data/core/neat/settings/_settings.scss

@@ -16,12 +16,17 @@
 /// @property {string | number (with unit)} gutter [null]
 ///   Grid media query.
 ///
+/// @property {color} color [rgba(#00d4ff, 0.25)]
+///   Default visual grid color.
+///
 /// @access private
 
 $_neat-grid-defaults: (
   columns: 12,
   gutter: 20px,
   media: null,
+  color: rgba(#00d4ff, 0.25),
+  direction: ltr,
 );
 
 /// This variable is a sass map that overrides Neat's default grid settings.

data/lib/neat/version.rb

@@ -1,3 +1,3 @@
 module Neat
-  VERSION = "2.0.0.beta.1"
+  VERSION = "2.0.0.beta.2"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bourbon-neat",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "description": "A lightweight, semantic grid framework built with Bourbon",
   "keywords": [
     "columns",
@@ -33,9 +33,6 @@
     "contrib": "gulp",
     "test": "bundle exec rake"
   },
-  "dependencies": {
-    "node-sass": "^3.8"
-  },
   "devDependencies": {
     "gulp": "^3.9",
     "gulp-autoprefixer": "^3.1",

data/spec/fixtures/functions/neat-float-direction.scss

@@ -0,0 +1,17 @@
+@import "setup";
+
+$ltr-grid: (
+  direction: ltr,
+);
+
+$rtl-grid: (
+  direction: rtl,
+);
+
+.neat-float-direction-ltr {
+  content: _neat-float-direction($ltr-grid);
+}
+
+.neat-float-direction-rtl {
+  content: _neat-float-direction($rtl-grid);
+}

data/spec/fixtures/functions/neat-opposite-direction.scss

@@ -0,0 +1,17 @@
+@import "setup";
+
+$ltr-grid: (
+  direction: ltr,
+);
+
+$rtl-grid: (
+  direction: rtl,
+);
+
+.neat-opposite-direction-ltr {
+  content: _neat-opposite-direction($ltr-grid);
+}
+
+.neat-opposite-direction-rtl {
+  content: _neat-opposite-direction($rtl-grid);
+}

data/spec/neat/functions/neat_float_direction_spec.rb

@@ -0,0 +1,23 @@
+require "spec_helper"
+
+describe "neat-float-direction" do
+  before(:all) do
+    ParserSupport.parse_file("functions/neat-float-direction")
+  end
+
+  context "called with ltr" do
+    it "returns left" do
+      rule = "content: left"
+
+      expect(".neat-float-direction-ltr").to have_rule(rule)
+    end
+  end
+
+  context "called with rtl" do
+    it "returns right" do
+      rule = "content: right"
+
+      expect(".neat-float-direction-rtl").to have_rule(rule)
+    end
+  end
+end

data/spec/neat/functions/neat_opposite_direction_spec.rb

@@ -0,0 +1,23 @@
+require "spec_helper"
+
+describe "neat-opposite-direction" do
+  before(:all) do
+    ParserSupport.parse_file("functions/neat-opposite-direction")
+  end
+
+  context "called with ltr" do
+    it "returns right" do
+      rule = "content: right"
+
+      expect(".neat-opposite-direction-ltr").to have_rule(rule)
+    end
+  end
+
+  context "called with rtl" do
+    it "returns left" do
+      rule = "content: left"
+
+      expect(".neat-opposite-direction-rtl").to have_rule(rule)
+    end
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: neat
 version: !ruby/object:Gem::Version
-  version: 2.0.0.beta.1
+  version: 2.0.0.beta.2
 platform: ruby
 authors:
 - Joel Oliveira
@@ -14,7 +14,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-08-20 00:00:00.000000000 Z
+date: 2016-12-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: aruba
@@ -124,6 +124,7 @@ files:
 - ".gitignore"
 - ".hound.yml"
 - ".npmignore"
+- ".ruby-version"
 - ".scss-lint.yml"
 - CHANGELOG.md
 - CONTRIBUTING.md
@@ -146,12 +147,16 @@ files:
 - contrib/patterns/_grid-nested.scss
 - contrib/patterns/_grid-push.scss
 - contrib/patterns/_grid-shift.scss
+- contrib/patterns/_grid-visual.scss
 - contrib/patterns/_grid.scss
 - contrib/styles.scss
 - core/_neat.scss
+- core/neat/functions/_neat-append-grid-visual.scss
 - core/neat/functions/_neat-column-default.scss
 - core/neat/functions/_neat-column-ratio.scss
 - core/neat/functions/_neat-column-width.scss
+- core/neat/functions/_neat-float-direction.scss
+- core/neat/functions/_neat-opposite-direction.scss
 - core/neat/functions/_neat-parse-columns.scss
 - core/neat/functions/_neat-parse-media.scss
 - core/neat/functions/_retrieve-neat-settings.scss
@@ -161,6 +166,7 @@ files:
 - core/neat/mixins/_grid-media.scss
 - core/neat/mixins/_grid-push.scss
 - core/neat/mixins/_grid-shift.scss
+- core/neat/mixins/_grid-visual.scss
 - core/neat/settings/_settings.scss
 - eyeglass-exports.js
 - index.js
@@ -173,6 +179,8 @@ files:
 - spec/fixtures/_setup.scss
 - spec/fixtures/functions/neat-column-default.scss
 - spec/fixtures/functions/neat-column-width.scss
+- spec/fixtures/functions/neat-float-direction.scss
+- spec/fixtures/functions/neat-opposite-direction.scss
 - spec/fixtures/functions/neat-parse-media.scss
 - spec/fixtures/functions/retrieve-neat-settings.scss
 - spec/fixtures/mixins/grid-collapse.scss
@@ -183,6 +191,8 @@ files:
 - spec/fixtures/mixins/grid-shift.scss
 - spec/neat/functions/neat_column_default_spec.rb
 - spec/neat/functions/neat_column_width_spec.rb
+- spec/neat/functions/neat_float_direction_spec.rb
+- spec/neat/functions/neat_opposite_direction_spec.rb
 - spec/neat/functions/neat_parse_media_spec.rb
 - spec/neat/functions/retrieve_neat_settings_spec.rb
 - spec/neat/mixins/grid_collapse_spec.rb
@@ -218,7 +228,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: 1.3.1
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.1
+rubygems_version: 2.6.8
 signing_key: 
 specification_version: 4
 summary: A lightweight Sass grid framework