neat 1.9.1 → 2.0.0.alpha.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 91868c40d6ef8e7fb48584bdfd850b726cb3ece9
-  data.tar.gz: 66e2145a8765ef24a20636cf025dd13e4c8c6f96
+  metadata.gz: 110fa26ad3c105db28d667bf2258b342e374db69
+  data.tar.gz: bdd7576a1b0f4d0a0f0bbc18988366711115a587
 SHA512:
-  metadata.gz: 34cca7868e28afff897994c557da2ca4fec1456d1787975bc64f8e88e8c1197f2bb823dc54cf66a61645086f2c029f535ea58dc70ac30fe3fa656478493d015d
-  data.tar.gz: 003fdd0fa6be8d75e5c398be588c2ec5e6dd89df5467d271223640a75d80c1ff5c5b7a4dfb94681582bb2cdb14672d329bdd61ee4a36aea1aba3d858b532c639
+  metadata.gz: 0b9b5db6ca0f9db09b2570c80a4c3e3f99bc5e181ce9e01d303940273460a4a8c0fe167c459a44e122a536ec789c45453afc18fb710e8102ac83642bedce99bd
+  data.tar.gz: 46bc3ad0014c093d8679044070a0e720996056a2e082dfa708e4989c943cb258185b18f454269a08f1db38b7a55d580b1f224c9e3f9055c3f9c44f9e450f35c3

data/.gitignore

@@ -1,9 +1,9 @@
-.DS_store
-.sass-cache
 *gem
 *swp
+.DS_store
+.sass-cache
+contrib/*.css
 Gemfile.lock
+node_modules
 public
 tmp
-contrib/*.css
-node_modules

data/.hound.yml

@@ -0,0 +1,5 @@
+ruby:
+  enabled: true
+scss:
+  config_file: .scss-lint.yml
+  enabled: true

data/.npmignore

@@ -1,8 +1,6 @@
 .gitignore
-.rspec
 .sass-cache
 .scss-lint.yml
-.travis.yml
 _site
 bin/
 bower.json
@@ -14,6 +12,4 @@ neat.gemspec
 NEWS.md
 pkg/
 Rakefile
-sache.json
 spec/
-test/

data/.scss-lint.yml

@@ -1,5 +1,7 @@
 scss_files: "**/*.scss"
 
+severity: warning
+
 linters:
   BangFormat:
     enabled: true
@@ -147,7 +149,7 @@ linters:
     max_depth: 2
 
   SelectorFormat:
-    enabled: false
+    enabled: true
     convention: hyphenated_BEM
 
   Shorthand:

data/CHANGELOG.md

@@ -1,34 +1,57 @@
-## [1.9.1] - 2018-09-11
+# Change Log
 
-### Fixed
+All notable changes to this project will be documented in this file. This
+project adheres to [Semantic Versioning](http://semver.org).
 
-- Fix Sass warning about "&&" vs "and" ([#646])
-
-[#646]: https://github.com/thoughtbot/neat/pull/646
-
-## [1.9.0] - 2017-06-27
+## [Unreleased]
 
 ### Added
 
-- Add support for complex `nth-child` selectors in `omega()`. ([#340])
+- Added `$neat-grid` map to store user defined default grid properties
+- Added core grid functionality in `grid-column`
+- 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
 
 ### Changed
 
-- The background color for visual grid columns now alternates. ([#373])
-- Update node-sass dependency to 4.1.1. ([#520])
+- Use `core/` as the primary Neat source directory
 
-### Fixed
-
-- Removed unnecessary deprecation warning when using the `reset-display` mixin.
-  ([#456])
-- The description of the `remove` CLI command now correctly outputs "remove".
-  ([#451])
+### Removed
 
-[#340]: https://github.com/thoughtbot/neat/pull/340
-[#373]: https://github.com/thoughtbot/neat/pull/373
-[#451]: https://github.com/thoughtbot/neat/pull/451
-[#456]: https://github.com/thoughtbot/neat/pull/456
-[#520]: https://github.com/thoughtbot/neat/pull/520
+- Removed all previous Neat Sass
+  - Mixins
+    - `direction-context` has been removed
+    - `display-context` has been removed
+    - `fill-parent` has been removed
+    - `media` has been removed
+    - `omega` has been removed
+    - `outer-container` has been removed
+    - `pad` has been removed
+    - `row` has been removed
+    - `shift` has been removed
+    - `shift-in-context` has been removed
+    - `span-columns` has been removed
+    - `reset-display` has been removed
+    - `reset-layout-direction` has been removed
+    - `reset-all` has been removed
+  - Functions
+    - `new-breakpoint` has been removed
+  - Variables
+    - `$disable-warnings` has been removed
+    - `$column` has been removed
+    - `$gutter` has been removed
+    - `$grid-columns` has been removed
+    - `$max-width` has been removed
+    - `$border-box-sizing` has been removed
+    - `$default-feature` has been removed
+    - `$default-layout-direction` has been removed
+    - `$visual-grid` has been removed
+    - `$visual-grid-color` has been removed
+    - `$visual-grid-index` has been removed
+    - `$visual-grid-opacity` has been removed
 
 ## 1.8.0 - 2016-06-21
 
@@ -255,5 +278,4 @@
 
 - Initial release
 
-[1.9.1]: https://github.com/thoughtbot/neat/compare/v1.9.0...v1.9.1
-[1.9.0]: https://github.com/thoughtbot/neat/compare/v1.8.0...v1.9.0
+[Unreleased]: https://github.com/thoughtbot/neat/compare/v1.8.0...neat-2.0.0

data/CONTRIBUTING.md

@@ -36,3 +36,15 @@ Some things that will increase the chance that your pull request is accepted:
 * Declarations within a block should be ordered alphabetically.
 * Blank lines between rules.
 * No trailing whitespace. Blank lines should not have any space.
+
+**Contrib examples**
+
+For user-facing changes, please provide an example in sample page contained in
+the `./contrib` folder. Also, please put a screenshot of the changes into the
+Pull Request.
+
+To see the `./contrib` example page:
+
+1. Install node
+* Run `npm install`
+* Run `npm run contrib`

data/Gemfile

@@ -1,4 +1,3 @@
-source "http://rubygems.org"
+source "https://rubygems.org"
 
-# Specify your gem's dependencies in neat.gemspec
 gemspec

data/Gulpfile.js

@@ -1,19 +1,18 @@
-var autoprefix = require("gulp-autoprefixer"),
+var bourbon    = require("bourbon").includePaths,
+    autoprefix = require("gulp-autoprefixer"),
     connect    = require("gulp-connect"),
     gulp       = require("gulp"),
     sass       = require("gulp-sass");
 
 var paths = {
   scss: [
-    "./app/assets/stylesheets/**/*.scss",
-    "./contrib/styles.scss"]
+    "./core/**/*.scss",
+    "./contrib/**/*.scss"]
 };
 
 gulp.task("sass", function () {
   return gulp.src(paths.scss)
-    .pipe(sass({
-        sourcemaps: true
-    }))
+    .pipe(sass())
     .pipe(autoprefix("last 2 versions"))
     .pipe(gulp.dest("./contrib"))
     .pipe(connect.reload());

data/LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright © 2012–2015 [thoughtbot, inc.](http://thoughtbot.com)
+Copyright © 2012 [thoughtbot, inc.](http://thoughtbot.com)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the “Software”), to deal

data/README.md

@@ -1,9 +1,6 @@
 [![Neat](http://images.thoughtbot.com/bourbon/neat-logo.svg)](http://neat.bourbon.io)
 
-## A lightweight, semantic grid framework
-
-**Note: This branch is an archive of Neat v1. The current release is v2 on
-`master`.**
+## A lightweight grid framework
 
 Neat is a fluid grid framework with the aim of being easy enough to use out of the box and flexible enough to customize down the road.
 
@@ -17,8 +14,7 @@ for updates.
 
 ## Requirements
 
-- [Sass](https://github.com/sass/sass) 3.3+
-- :warning: If you need **Sass 3.2 support**, you should [use Neat 1.5.1](#installing-older-versions-of-neat)
+- Sass 3.4+ or LibSass 3.3+
 
 ## Installation
 
@@ -52,12 +48,12 @@ For command line help, visit our wiki page on Neat’s [command line interface](
 
   It’s not recommended to add or modify the Neat files so that you can update them easily.
 
-## Installation for Ruby on Rails
+## Installation for Ruby on Rails 4.2+
 
 1. Add Neat to your Gemfile:
 
   ```ruby
-  gem 'neat'
+  gem "neat"
   ```
 
 2. Then run:
@@ -88,11 +84,12 @@ For command line help, visit our wiki page on Neat’s [command line interface](
   npm install --save bourbon-neat
   ```
 
-1. If you’re using [Eyeglass](http://eyeglass.rocks), skip to Step 3. Otherwise, you’ll need to add Neat to your node-sass `includePaths` option. `require("bourbon-neat").includePaths` is an array of directories that you should pass to node-sass. How you do this depends on how node-sass is integrated into your project.
+1. If you’re using [Eyeglass](http://eyeglass.rocks), skip to Step 3. Otherwise, you’ll need to add Bourbon and Neat to your node-sass `includePaths` option. `require("bourbon-neat").includePaths` is an array of directories that you should pass to node-sass. How you do this depends on how node-sass is integrated into your project. You will also need to ensure that Bourbon is in the `includePaths` passed to node-sass.
 
-1. Import Neat into your Sass files:
+1. Import Neat into your Sass files, after Bourbon:
 
   ```scss
+  @import "bourbon";
   @import "neat";
   ```
 
@@ -112,149 +109,6 @@ For command line help, visit our wiki page on Neat’s [command line interface](
 
 3. Follow the [instructions above](#installation) to install Neat into your project.
 
-## Using Neat
-
-First off, if you are planning to override the default grid settings (12 columns), it is recommended to create a `_grid-settings.scss` file for that purpose. Make sure to import it right *before* importing Neat:
-
-```scss
-@import "grid-settings";
-@import "neat/neat"; // or "neat" when in Rails
-```
-
-In your newly created  `_grid-settings.scss`, import `neat-helpers` if you are planning to use `new-breakpoint()`, then define your new variables:
-
-```scss
-@import "neat/neat-helpers"; // or "neat-helpers" when in Rails
-
-// Change the grid settings
-$column: 90px;
-$gutter: 30px;
-$grid-columns: 10;
-$max-width: 1200px;
-
-// Define your breakpoints
-$tablet: new-breakpoint(max-width 768px 8);
-$mobile: new-breakpoint(max-width 480px 4);
-```
-
-See the [docs](http://thoughtbot.github.io/neat-docs/latest/#variable) for a full list of settings.
-
-Next, include the `outer-container` mixin in the topmost container (to which the `max-width` setting will be applied):
-
-```scss
-div.container {
-  @include outer-container;
-}
-```
-
-Then use `span-columns` on any element to specify the number of columns it should span:
-
-```scss
-div.element {
-  @include span-columns(6);
-}
-```
-
-If the element’s parent isn’t the top-most container, you need to add the number of columns of the parent element to keep the right proportions:
-
-```scss
-div.container {
-  @include outer-container;
-
-  div.parent-element {
-    @include span-columns(8);
-
-    div.element {
-      @include span-columns(6 of 8);
-    }
-  }
-}
-```
-
-To make your layout responsive, use the `media()` mixin to modify both the grid and the layout:
-
-```scss
-.my-class {
-  @include media($mobile) { // As defined in _grid-settings.scss
-    @include span-columns(2);
-  }
-}
-
-// Compiled CSS
-@media screen and (max-width: 480px) {
-  .my-class {
-    display: block;
-    float: left;
-    margin-right: 7.42297%;
-    width: 46.28851%; // 2 columns of the total 4 in this media context
-  }
-  .my-class:last-child {
-    margin-right: 0;
-  }
-}
-```
-
-By setting `$visual-grid` to `true` in a file that is imported before
-`neat-helpers` (or prior to `neat` itself if you are using the default
-breakpoints), you can display the base grid in the background (default) or as an
-overlay. You can even change the color and opacity of the grid-lines by
-overriding the default settings as detailed in the section below.
-
-The visual grid reflects the changes applied to the grid via the `new-breakpoint()` mixin, as long as the media contexts are defined *before* importing Neat.
-
-## FAQ
-
-#### How do I use `omega()` in a mobile-first workflow?
-
-Using `omega()` with an `nth-child` pseudo selector in a mobile-first workflow will cause the style to be applied to wider-viewport media queries as well. That is the cascading nature of CSS.
-
-One solution would be to provide an `omega-reset()` mixin that negates the effect of `omega()` on that specific `nth-child` pseudo selector. While this is often the most suggested solution, it is also a lazy hack that outputs ugly code and can quickly get out of hand in complex layouts. As a general rule, having to *undo* CSS styles is a sign of poor stylesheet architecture (more about [CSS code smells](http://csswizardry.com/2012/11/code-smells-in-css/)).
-
-The other, more elegant, solution is to use mutually exclusive media queries, also referred to as [media-query
-splitting](http://simurai.com/blog/2012/08/29/media-query-splitting). This would guarantee that `omega()` styles are only applied where desired.
-
-```scss
-$first-breakpoint-value: 400px;
-$second-breakpoint-value: 700px;
-$medium-viewport: new-breakpoint(min-width $first-breakpoint-value max-width $second-breakpoint-value);
-$large-viewport: new-breakpoint(min-width $second-breakpoint-value + 1);
-
-.element {
-  @include media($medium-viewport) {
-    @include span-columns(6);
-    @include omega(2n);
-  }
-
-  @include media($large-viewport) {
-    @include span-columns(4);
-    @include omega(3n);
-  }
-}
-```
-
-If, for some reason, you still think that `omega-reset` is the only way you want to go, check out Josh Fry’s [omega-reset](http://joshfry.me/blog/2013/05/13/omega-reset-for-bourbon-neat).
-
-#### Why are the elements not properly aligned with the visual grid?
-
-The visual grid is built using CSS gradients whose stops might contain decimal values depending on the default settings of your grid. In order to render the gradient, browsers round the pixel values since they can’t deal with pixel fractions.
-
-As a result the visual grid might be few pixels off in some browsers. The result is also inconsistent across browsers. For best results, preview your website on Firefox as it renders closest to the expected outcome.
-
-At this point, writing an internal rounding mechanism is not high priority.
-
-#### Framework X has this feature that Neat seems to be missing. Can you add it?
-
-Unless you [open a pull request](https://github.com/thoughtbot/neat/compare/), the answer is most likely going to be no. Neat is lightweight and simple compared to other grid frameworks, and strives to remain so. We have plans for adding new features in future versions of the framework, but these will be most likely to support new ways of working with layouts on the Web, not patches to existing ones.
-
-## Browser support
-
-- Chrome 10+
-- Firefox 29+
-- Internet Explorer 9+ (visual grid is IE 10 only)
-- Internet Explorer 8 with [selectivizr](http://selectivizr.com) (no `media()` support)
-- Opera 9.5+
-- Safari 5.1+
-
 ## The Bourbon family
 
 - [Bourbon](https://github.com/thoughtbot/bourbon): A simple and lightweight mixin library for Sass
@@ -262,20 +116,29 @@ Unless you [open a pull request](https://github.com/thoughtbot/neat/compare/), t
 - [Bitters](https://github.com/thoughtbot/bitters): Scaffold styles, variables and structure for Bourbon projects
 - [Refills](https://github.com/thoughtbot/refills): Prepackaged patterns and components built with Bourbon, Neat and Bitters
 
+Also check out [Proteus](https://github.com/thoughtbot/proteus), a collection of useful starter kits to help you prototype faster. Each kit comes with Bourbon, Neat and Bitters out-of-the-box.
+
+## Contributing
+
+See the [contributing] document. Thank you, [contributors]!
+
+  [contributing]: CONTRIBUTING.md
+  [contributors]: https://github.com/thoughtbot/bourbon/graphs/contributors
+
 ## License
 
-Copyright © 2012–2015 [thoughtbot, inc](http://thoughtbot.com). Neat is free software, and may be redistributed under the terms specified in the [license](LICENSE.md).
+Neat is copyright © 2012 [thoughtbot, inc.][thoughtbot] It is free software, and may be redistributed under the terms specified in the [license].
+
+  [license]: LICENSE.md
 
-## About thoughtbot
+## About
 
-[<img src="http://presskit.thoughtbot.com/images/signature.svg" width="250" alt="thoughtbot logo">][hire]
+Neat is maintained by the thoughtbot design team. It is funded by [thoughtbot, inc.][thoughtbot] and the names and logos for thoughtbot are trademarks of thoughtbot, inc.
 
-Neat is maintained and funded by thoughtbot, inc.
-The names and logos for thoughtbot are trademarks of thoughtbot, inc.
+[<img src="http://thoughtbot.github.io/images/signature.svg" width="250" alt="thoughtbot logo">][thoughtbot]
 
-We love open source software!
-See [our other projects][community]
-or [hire us][hire] to design, develop, and grow your product.
+We love open-source software! See [our other projects][community] or [hire us][hire] to design, develop, and grow your product.
 
-[community]: https://thoughtbot.com/community?utm_source=github
-[hire]: https://thoughtbot.com/hire-us?utm_source=github
+  [thoughtbot]: https://thoughtbot.com?utm_source=github
+  [community]: https://thoughtbot.com/community?utm_source=github
+  [hire]: https://thoughtbot.com/hire-us?utm_source=github