neat 2.0.0.alpha.1 → 2.0.0.beta.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 110fa26ad3c105db28d667bf2258b342e374db69
-  data.tar.gz: bdd7576a1b0f4d0a0f0bbc18988366711115a587
+  metadata.gz: c3787ca54822b2cc33778821496950fa92f8b8d7
+  data.tar.gz: f521238ccd45444adcd4d66fe39e5d3667d91ea2
 SHA512:
-  metadata.gz: 0b9b5db6ca0f9db09b2570c80a4c3e3f99bc5e181ce9e01d303940273460a4a8c0fe167c459a44e122a536ec789c45453afc18fb710e8102ac83642bedce99bd
-  data.tar.gz: 46bc3ad0014c093d8679044070a0e720996056a2e082dfa708e4989c943cb258185b18f454269a08f1db38b7a55d580b1f224c9e3f9055c3f9c44f9e450f35c3
+  metadata.gz: 266dbbb6933f76906bcd329300ab318bf8e77ec544848f6b237b4ec7c22defbe5331dfde6d3cebe7baf59d2bf70cfc646d8a01d1696d122f7969ca1b5605a33b
+  data.tar.gz: 2f015d7aabf6bd4d69f5b2514cf3a8701e8825dc7d791d1dbece56a976abb7286c925a204060c18a028fd7ac03cafeb1e8e0b922c9cc608e27479a601a763369

data/CHANGELOG.md

@@ -14,6 +14,7 @@ project adheres to [Semantic Versioning](http://semver.org).
 - 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
 

data/bower.json

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

data/contrib/index.html

@@ -64,6 +64,19 @@
           <h3>Grid Media Queries</h3>
         </div>
         <div class="grid-column--media-3-to-6 box"></div>
+        <div class="grid__column--full">
+          <h3>Grid collapse</h3>
+        </div>
+        <div class="grid__column--thirds box"></div>
+        <div class="grid__column--thirds">
+            <div class="grid-collapse">
+              <div class="grid__column--thirds box"></div>
+              <div class="grid__column--thirds box"></div>
+              <div class="grid__column--thirds box"></div>
+            </div>
+        </div>
+        <div class="grid__column--thirds box"></div>
+        <div class="grid__column--full">
       </div>
     </main>
   </body>

data/contrib/patterns/_grid-collapse.scss

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

data/contrib/styles.scss

@@ -6,6 +6,7 @@
 @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";

data/core/_neat.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-// Neat 2.0.0-alpha.1
+// Neat 2.0.0-beta.1
 // http://neat.bourbon.io
 // Copyright 2012 thoughtbot, inc.
 // MIT License
@@ -13,6 +13,7 @@
 @import "neat/functions/neat-parse-columns";
 @import "neat/functions/neat-parse-media";
 
+@import "neat/mixins/grid-collapse";
 @import "neat/mixins/grid-column";
 @import "neat/mixins/grid-container";
 @import "neat/mixins/grid-media";

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

@@ -0,0 +1,36 @@
+@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 used to determine gutter size.
+///
+/// @example scss
+///   .element {
+///     @include grid-collapse;
+///   }
+///
+/// @example css
+///   .element {
+///     float: left;
+///     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.";
+  }
+
+  float: left;
+  margin-left: -($_grid-gutter);
+  margin-right: -($_grid-gutter);
+  width: calc(100% + #{($_grid-gutter * 2)});
+}

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

@@ -1,6 +1,10 @@
 @charset "UTF-8";
 /// Creates Neat a grid column of requested size.
 ///
+/// @group features
+///
+/// @name Grid column
+///
 /// @argument {number (unitless)} $columns [null]
 ///
 /// @argument {map} $grid [$neat-grid]

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

@@ -1,6 +1,10 @@
 @charset "UTF-8";
 /// Creates a Neat grid container with clearfix.
 ///
+/// @group features
+///
+/// @name Grid containter
+///
 /// @argument {map} $grid [$neat-grid]
 ///   The type of grid for this column.
 ///

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

@@ -4,6 +4,10 @@
 /// you would like to scope to. If  only a number is defined, it is assumed this
 /// is a `min-with` value. Your custom grid can then be passed to the mixin.
 ///
+/// @group features
+///
+/// @name Grid media
+///
 /// @argument {map} $grid
 ///   The grid used to generate the column.
 ///

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

@@ -1,6 +1,10 @@
 @charset "UTF-8";
 /// Push or pull a Neat grid column by manipulating its left margin.
 ///
+/// @group features
+///
+/// @name Grid push
+///
 /// @argument {number (unitless)} $push [false]
 ///
 /// @argument {map} $grid [$neat-grid]

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

@@ -2,6 +2,10 @@
 /// Shift columns and reorder them within their container using relative
 /// positioning.
 ///
+/// @group features
+///
+/// @name Grid shift
+///
 /// @argument {number (unitless)} $shift [false]
 ///
 /// @argument {map} $grid [$neat-grid]

data/core/neat/settings/_settings.scss

@@ -1,13 +1,17 @@
 @charset "UTF-8";
 /// Neat’s default grid.
 ///
+/// @group settings
+///
 /// @type map
 ///
+/// @name Default settings
+///
 /// @property {number (unitless)} columns [12]
-///   Deefault number of grid columns.
+///   Default number of the total grid columns.
 ///
 /// @property {number (with unit)} gutter [20px]
-///   Default grid gutter width.
+///   Default grid gutter width between columns.
 ///
 /// @property {string | number (with unit)} gutter [null]
 ///   Grid media query.
@@ -21,16 +25,20 @@ $_neat-grid-defaults: (
 );
 
 /// This variable is a sass map that overrides Neat's default grid settings.
-/// Use this to define your project's grid properties incluting gutters, and
+/// Use this to define your project's grid properties incluting gutters and
 /// total column count.
 ///
 /// @type map
 ///
+/// @group settings
+///
+/// @name Neat grid
+///
 /// @property {number (unitless)} columns [12]
-///   Number of grid columns.
+///   Number of the total grid columns.
 ///
 /// @property {number (with unit)} gutter [20px]
-///   Grid gutter width.
+///   Grid gutter width between columns.
 ///
 /// @example scss
 ///   $neat-grid: (
@@ -39,3 +47,47 @@ $_neat-grid-defaults: (
 ///   );
 
 $neat-grid: () !default;
+
+/// If you would like to have multiple grids in a single project, you can do
+/// this by defining a new map stored within a variable of your choosing. This
+/// variable can then be passed directly in to any of Neat's mixins like
+/// [`grid-span(12, $my-custom-grid)`](#grid-span).
+///
+/// Custom grids are especially useful with [`grid-media`](#grid-media). By
+/// defining a `media` attribute within your custom grid, you are able to easily
+/// define both the attributes of a grid as well as at what breakpoint this grid
+/// should activate.
+///
+/// @type map
+///
+/// @group settings
+///
+/// @name Custom grids
+///
+/// @see {mixin} Grid media
+///
+/// @property {number (unitless)} columns [12]
+///   Number of the total grid columns.
+///
+/// @property {number (with unit)} gutter [20px]
+///   Grid gutter width between columns.
+///
+/// @property {number (with unit) | string | null} media [null]
+///   The `@media` definition that is used by the [`grid-media`](#grid-media)
+///   mixin to detirmine the media properties.
+///
+/// @example scss
+///   $my-custom-grid: (
+///     columns: 12,
+///     gutter: 20px,
+///     media: 1200px,
+///   );
+///
+///   $other-custom-grid-for-print: (
+///     columns: 14,
+///     gutter: 1.5rem,
+///     media: print,
+///   );
+///
+
+$neat-custom-grid: () !default;

data/lib/neat/version.rb

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

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bourbon-neat",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-beta.1",
   "description": "A lightweight, semantic grid framework built with Bourbon",
   "keywords": [
     "columns",

data/spec/fixtures/mixins/grid-collapse.scss

@@ -0,0 +1,14 @@
+@import "setup";
+
+$custom-grid: (
+  columns: 6,
+  gutter: 4rem,
+);
+
+.grid-collapse-default {
+  @include grid-collapse;
+}
+
+.grid-collapse-custom {
+  @include grid-collapse($custom-grid);
+}

data/spec/fixtures/mixins/grid-media.scss

@@ -0,0 +1,39 @@
+@import "setup";
+
+$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-custom-neat-grid {
+  @include grid-media($custom-neat-grid) {
+    @include grid-column(3);
+  }
+}
+
+.grid-column-media-specific-neat-grid {
+  @include grid-media($specific-neat-grid) {
+    @include grid-column(6);
+  }
+}
+
+.grid-column-media-print-neat-grid {
+  @include grid-media($print-neat-grid) {
+    @include grid-column(8);
+  }
+}

data/spec/neat/mixins/grid_collapse_spec.rb

@@ -0,0 +1,28 @@
+require "spec_helper"
+
+describe "grid-collapse" do
+  before(:all) do
+    ParserSupport.parse_file("mixins/grid-collapse")
+  end
+
+  context "called with default settings" do
+    it "adds margin for just the gutter with no specified column" do
+      ruleset = "float: left; " +
+        "margin-left: -20px; " +
+        "margin-right: -20px; " +
+        "width: calc(100% + 40px);"
+      expect(".grid-collapse-default").to have_ruleset(ruleset)
+    end
+  end
+
+  context "called with custom settings" do
+    it "adds margin for just the gutter with no specified column" do
+      ruleset = "float: left; " +
+        "margin-left: -4rem; " +
+        "margin-right: -4rem; " +
+        "width: calc(100% + 8rem);"
+
+      expect(".grid-collapse-custom").to have_ruleset(ruleset)
+    end
+  end
+end

data/spec/neat/mixins/grid_media_spec.rb

@@ -0,0 +1,25 @@
+require "spec_helper"
+
+describe "@include grid-media() {...}" do
+  before(:all) do
+    ParserSupport.parse_file("mixins/grid-media")
+  end
+
+  context "with argument ($custom-neat-grid)" do
+    it "outputs @media only screen and (min-width: 1000px)" do
+      expect(".grid-column-media-custom-neat-grid").to be_contained_in("only screen and (min-width: 1000px)")
+    end
+  end
+
+  context "with argument ($specific-neat-grid)" do
+    it "outputs @media only screen and (min-width: 1000px) and (max-width: 1100px)" do
+      expect(".grid-column-media-specific-neat-grid").to be_contained_in("only screen and (min-width: 1000px) and (max-width: 1100px)")
+    end
+  end
+
+  context "with argument ($print-neat-grid)" do
+    it "outputs @media print" do
+      expect(".grid-column-media-print-neat-grid").to be_contained_in("print")
+    end
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: neat
 version: !ruby/object:Gem::Version
-  version: 2.0.0.alpha.1
+  version: 2.0.0.beta.1
 platform: ruby
 authors:
 - Joel Oliveira
@@ -14,7 +14,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-07-23 00:00:00.000000000 Z
+date: 2016-08-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: aruba
@@ -141,6 +141,7 @@ files:
 - contrib/index.html
 - contrib/patterns/_box.scss
 - contrib/patterns/_global.scss
+- contrib/patterns/_grid-collapse.scss
 - contrib/patterns/_grid-media.scss
 - contrib/patterns/_grid-nested.scss
 - contrib/patterns/_grid-push.scss
@@ -154,6 +155,7 @@ files:
 - core/neat/functions/_neat-parse-columns.scss
 - core/neat/functions/_neat-parse-media.scss
 - core/neat/functions/_retrieve-neat-settings.scss
+- core/neat/mixins/_grid-collapse.scss
 - core/neat/mixins/_grid-column.scss
 - core/neat/mixins/_grid-container.scss
 - core/neat/mixins/_grid-media.scss
@@ -173,16 +175,20 @@ files:
 - spec/fixtures/functions/neat-column-width.scss
 - spec/fixtures/functions/neat-parse-media.scss
 - spec/fixtures/functions/retrieve-neat-settings.scss
+- spec/fixtures/mixins/grid-collapse.scss
 - spec/fixtures/mixins/grid-column.scss
 - spec/fixtures/mixins/grid-container.scss
+- spec/fixtures/mixins/grid-media.scss
 - spec/fixtures/mixins/grid-push.scss
 - 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_parse_media_spec.rb
 - spec/neat/functions/retrieve_neat_settings_spec.rb
+- spec/neat/mixins/grid_collapse_spec.rb
 - spec/neat/mixins/grid_column_spec.rb
 - spec/neat/mixins/grid_container_spec.rb
+- spec/neat/mixins/grid_media_spec.rb
 - spec/neat/mixins/grid_push_spec.rb
 - spec/neat/mixins/grid_shift_spec.rb
 - spec/spec_helper.rb
@@ -212,7 +218,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: 1.3.1
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.6
+rubygems_version: 2.5.1
 signing_key: 
 specification_version: 4
 summary: A lightweight Sass grid framework