@samhammer/bourbon-neat - npm Package Compare versions

Comparing version 2.1.1 to 3.0.0

.circleci/config.yml

+version: 2
+
+jobs:
+  build:
+    docker:
+      - image: circleci/ruby:2.5.1-node
+
+    steps:
+      - checkout
+
+      - restore_cache:
+          keys:
+            - neat-{{ arch }}-{{ checksum "neat.gemspec" }}
+
+      - run:
+          name: Install Ruby dependencies
+          command: bundle install --path vendor/bundle
+
+      - run:
+          name: Install SassDoc
+          command: sudo npm install -g sassdoc@2.5.0
+
+      - save_cache:
+          key: neat-{{ arch }}-{{ checksum "neat.gemspec" }}
+          paths:
+            - vendor/bundle
+
+      - run:
+          name: Run the tests
+          command: bundle exec rake
+
+      - run:
+          name: Parse SassDoc comments
+          command: sassdoc core/ --parse --verbose --strict

CHANGELOG.md

@@ -10,2 +10,6 @@ # Change Log
 
+## [3.0.0] - 2018-06-29
+
+- Extend grid-media to accept multiple custom grids
+
 ## [2.1.0] - 2017-06-27
@@ -361,3 +365,4 @@
 
-[unreleased]: https://github.com/thoughtbot/neat/compare/v2.1.0...HEAD
+[unreleased]: https://github.com/thoughtbot/neat/compare/v3.0.0...HEAD
+[3.0.0]: https://github.com/thoughtbot/neat/compare/v2.1.0...v3.0.0
 [2.1.0]: https://github.com/thoughtbot/neat/compare/v2.0.0...v2.1.0
@@ -364,0 +369,0 @@ [2.0.0]: https://github.com/thoughtbot/neat/compare/v2.0.0.beta.2...v2.0.0

core/_neat.scss

 @charset "UTF-8";
-// Neat 2.1.0
+// Neat 3.0.0
 // http://neat.bourbon.io
@@ -4,0 +4,0 @@ // Copyright 2012 thoughtbot, inc.

core/neat/mixins/_grid-media.scss

@@ -16,13 +16,18 @@ @charset "UTF-8";
 /// @argument {map} $grid
-///   The grid to be used within the scope of the block.
-///   This grid should include the `media` property to determine the expression
+///   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 the override the default grid with the
-///   attributes of the custom grid. This change is scoped to within the mixin
-///   block, and once the mixin has ended the default grid will revert to its
-///   original state as defined by `$neat-grid`. This allows for different
+///   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
@@ -32,2 +37,8 @@ ///   $custom-neat-grid: (
 ///     gutter: 50px,
+///     media: "screen and (max-width: 999px)",
+///   );
+///
+///   $custom-neat-grid-2: (
+///     columns: 12,
+///     gutter: 70px,
 ///     media: 1000px,
@@ -39,3 +50,3 @@ ///   );
 ///
-///     @include grid-media($custom-neat-grid){
+///     @include grid-media($custom-neat-grid, $custom-neat-grid-2){
 ///       @include grid-column(6);
@@ -52,3 +63,3 @@ ///     }
 ///
-///   @media only screen and (min-width: 1000px) {
+///   @media only screen and (max-width: 999px) {
 ///     .element {
@@ -60,13 +71,23 @@ ///       width: calc(50% - 75px);
 ///   }
+///
+///   @media only screen and (min-width: 1000px) {
+///     .element {
+///       width: calc(50% - 75px);
+///       float: left;
+///       margin-left: 70px;
+///     }
+///   }
 
-@mixin grid-media($grid) {
-  $_media: _retrieve-neat-setting($grid, media);
-  $_query: _neat-parse-media($_media);
+@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;
+    @media #{$_query} {
+      $_default-neat-grid: $neat-grid;
+      $neat-grid: map-merge($neat-grid, $_grid) !global;
+      @content;
+      $neat-grid: $_default-neat-grid !global;
+    }
   }
 }

package.json

 {
   "name": "@samhammer/bourbon-neat",
-  "version": "2.1.1",
-  "description": "A fork of the original neat but still a lightweight, semantic grid framework",
+  "version": "3.0.0",
+  "description": "A lightweight, semantic grid framework",
   "keywords": [
@@ -38,6 +38,5 @@ "columns",
   "devDependencies": {
-    "gulp": "^3.9",
-    "gulp-autoprefixer": "^3.1",
-    "gulp-connect": "^5.0",
-    "gulp-sass": "^3.1"
+    "browser-sync": "^2.24.6",
+    "gulp": "^4.0.0",
+    "gulp-sass": "^4.0.1"
   },
@@ -44,0 +43,0 @@ "eyeglass": {

README.md

 [<img src="http://images.thoughtbot.com/bourbon/neat-logo-v2.svg" width="200" alt="Neat logo">][Neat]
 
+[![Reviewed by Hound](https://img.shields.io/badge/Reviewed_by-Hound-8E64B0.svg)](https://houndci.com)
+
 ## A lightweight and flexible Sass grid
@@ -180,7 +182,5 @@
 - [Bitters]: Scaffold styles, variables and structure for Bourbon projects
-- [Refills]: Components and patterns built with Bourbon and Neat
 
   [Bourbon]: https://github.com/thoughtbot/bourbon
   [Bitters]: https://github.com/thoughtbot/bitters
-  [Refills]: https://github.com/thoughtbot/refills
 
@@ -187,0 +187,0 @@ ## Contributing

No alert changes

Improved metrics

Total package byte prevSize

37052

4.41%

Dev dependency count

3

-25%

Number of package files

28

7.69%

No dependency changes