neat 2.0.0.beta.2 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.scss-lint.yml +4 -0
- data/CHANGELOG.md +12 -2
- data/Gulpfile.js +4 -3
- data/README.md +21 -15
- data/RELEASING.md +6 -5
- data/bower.json +2 -2
- data/circle.yml +4 -1
- data/contrib/patterns/_global.scss +27 -0
- data/core/_neat.scss +2 -1
- data/core/neat/functions/_neat-merge-defaults.scss +23 -0
- data/core/neat/functions/_retrieve-neat-settings.scss +3 -2
- data/core/neat/mixins/_grid-collapse.scss +2 -2
- data/core/neat/mixins/_grid-column.scss +8 -2
- data/core/neat/mixins/_grid-container.scss +4 -3
- data/core/neat/mixins/_grid-media.scss +19 -6
- data/core/neat/mixins/_grid-push.scss +3 -2
- data/core/neat/mixins/_grid-shift.scss +2 -1
- data/core/neat/mixins/_grid-visual.scss +10 -28
- data/core/neat/settings/_settings.scss +14 -38
- data/lib/neat/generator.rb +2 -2
- data/lib/neat/version.rb +1 -1
- data/package.json +2 -2
- data/spec/neat/mixins/grid_collapse_spec.rb +2 -4
- metadata +5 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 23c144afb938b1528dc2e36a180cb80d7480ac81
|
|
4
|
+
data.tar.gz: c33ff2c82766d847ceb640c110e747f533a3e5e0
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3b17dbcc1c974e5a32c38589fee5f7a94bd3772ea1f7c17eb7e8b589c548c7159acfd0ca7cb3e3af44642a3acc4ccb5cda8e3ed4d110cc71301fbbf324ab61e5
|
|
7
|
+
data.tar.gz: a56574e2c5db7f6ed15d32ed27d042462a7a0cc972a17cd08df81470def202b08a8f52cdbfe0abe09ef3817edab84dfa37b00719016d5f30081dc55284d97c55
|
data/.scss-lint.yml
CHANGED
data/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,16 @@ project adheres to [Semantic Versioning](http://semver.org).
|
|
|
5
5
|
|
|
6
6
|
## [Unreleased]
|
|
7
7
|
|
|
8
|
+
Nothing at the moment.
|
|
9
|
+
|
|
10
|
+
## [2.0.0]
|
|
11
|
+
|
|
12
|
+
### Fixed
|
|
13
|
+
|
|
14
|
+
- Custom grids inherit undefined properties from global `$neat-grid`
|
|
15
|
+
- Fixed instillation from CLI
|
|
16
|
+
- Remove float property from `grid-collapse`
|
|
17
|
+
|
|
8
18
|
## [2.0.0.beta.2]
|
|
9
19
|
|
|
10
20
|
### Added
|
|
@@ -77,7 +87,6 @@ project adheres to [Semantic Versioning](http://semver.org).
|
|
|
77
87
|
- `$visual-grid-index` has been removed
|
|
78
88
|
- `$visual-grid-opacity` has been removed
|
|
79
89
|
|
|
80
|
-
|
|
81
90
|
## 1.8.0 - 2016-06-21
|
|
82
91
|
|
|
83
92
|
### Added
|
|
@@ -303,7 +312,8 @@ project adheres to [Semantic Versioning](http://semver.org).
|
|
|
303
312
|
|
|
304
313
|
- Initial release
|
|
305
314
|
|
|
306
|
-
[Unreleased]: https://github.com/thoughtbot/neat/compare/v2.0.0
|
|
315
|
+
[Unreleased]: https://github.com/thoughtbot/neat/compare/v2.0.0...HEAD
|
|
316
|
+
[2.0.0]: https://github.com/thoughtbot/neat/compare/v2.0.0.beta.2...v2.0.0
|
|
307
317
|
[2.0.0.beta.2]: https://github.com/thoughtbot/neat/compare/v2.0.0.beta.1...v2.0.0.beta.2
|
|
308
318
|
[2.0.0.beta.1]: https://github.com/thoughtbot/neat/compare/v2.0.0.alpha.1...v2.0.0.beta.1
|
|
309
319
|
[2.0.0.alpha.1]: https://github.com/thoughtbot/neat/compare/v2.0.0.alpha.0...v2.0.0.alpha.1
|
data/Gulpfile.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
var
|
|
2
|
-
autoprefix = require("gulp-autoprefixer"),
|
|
1
|
+
var autoprefix = require("gulp-autoprefixer"),
|
|
3
2
|
connect = require("gulp-connect"),
|
|
4
3
|
gulp = require("gulp"),
|
|
5
4
|
sass = require("gulp-sass");
|
|
@@ -12,7 +11,9 @@ var paths = {
|
|
|
12
11
|
|
|
13
12
|
gulp.task("sass", function () {
|
|
14
13
|
return gulp.src(paths.scss)
|
|
15
|
-
.pipe(sass(
|
|
14
|
+
.pipe(sass({
|
|
15
|
+
sourcemaps: true
|
|
16
|
+
}))
|
|
16
17
|
.pipe(autoprefix("last 2 versions"))
|
|
17
18
|
.pipe(gulp.dest("./contrib"))
|
|
18
19
|
.pipe(connect.reload());
|
data/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
[
|
|
1
|
+
[<img src="http://images.thoughtbot.com/bourbon/neat-logo-v2.svg" width="200" alt="Neat logo">](http://neat.bourbon.io)
|
|
2
2
|
|
|
3
|
-
## A lightweight grid
|
|
3
|
+
## A lightweight and flexible Sass grid
|
|
4
4
|
|
|
5
5
|
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.
|
|
6
6
|
|
|
@@ -12,6 +12,15 @@ Neat is a fluid grid framework with the aim of being easy enough to use out of t
|
|
|
12
12
|
Follow the [@bourbonsass](https://twitter.com/bourbonsass) Twitter account
|
|
13
13
|
for updates.
|
|
14
14
|
|
|
15
|
+
## Table of Contents
|
|
16
|
+
|
|
17
|
+
- [Requirements](#requirements)
|
|
18
|
+
- [Installation](#installation)
|
|
19
|
+
- [The Bourbon Family](#the-bourbon-family)
|
|
20
|
+
- [Contributing](#contributing)
|
|
21
|
+
- [License](#license)
|
|
22
|
+
- [About](#about)
|
|
23
|
+
|
|
15
24
|
## Requirements
|
|
16
25
|
|
|
17
26
|
- Sass 3.4+ or LibSass 3.3+
|
|
@@ -48,7 +57,7 @@ For command line help, visit our wiki page on Neat’s [command line interface](
|
|
|
48
57
|
|
|
49
58
|
It’s not recommended to add or modify the Neat files so that you can update them easily.
|
|
50
59
|
|
|
51
|
-
|
|
60
|
+
### Installation for Ruby on Rails 4.2+
|
|
52
61
|
|
|
53
62
|
1. Add Neat to your Gemfile:
|
|
54
63
|
|
|
@@ -76,7 +85,7 @@ For command line help, visit our wiki page on Neat’s [command line interface](
|
|
|
76
85
|
|
|
77
86
|
It should be noted that `@import` rules are not compatible with Sprockets directives. You need to use one or the other.
|
|
78
87
|
|
|
79
|
-
|
|
88
|
+
### Installing with npm and using a Node-based asset pipeline
|
|
80
89
|
|
|
81
90
|
1. Add Neat as a dependency:
|
|
82
91
|
|
|
@@ -84,16 +93,15 @@ For command line help, visit our wiki page on Neat’s [command line interface](
|
|
|
84
93
|
npm install --save bourbon-neat
|
|
85
94
|
```
|
|
86
95
|
|
|
87
|
-
1. If you’re using [Eyeglass](http://eyeglass.rocks), skip to Step 3. Otherwise, you’ll need to add
|
|
96
|
+
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.
|
|
88
97
|
|
|
89
|
-
1. Import Neat into your Sass files
|
|
98
|
+
1. Import Neat into your Sass files:
|
|
90
99
|
|
|
91
100
|
```scss
|
|
92
|
-
@import "bourbon";
|
|
93
101
|
@import "neat";
|
|
94
102
|
```
|
|
95
103
|
|
|
96
|
-
|
|
104
|
+
### Installing older versions of Neat
|
|
97
105
|
|
|
98
106
|
1. Uninstall any Neat gem versions you already have:
|
|
99
107
|
|
|
@@ -104,26 +112,24 @@ For command line help, visit our wiki page on Neat’s [command line interface](
|
|
|
104
112
|
2. Reinstall the Neat gem, using the `-v` flag to specify the version you need:
|
|
105
113
|
|
|
106
114
|
```bash
|
|
107
|
-
gem install neat -v 1.
|
|
115
|
+
gem install neat -v 1.8.1
|
|
108
116
|
```
|
|
109
117
|
|
|
110
118
|
3. Follow the [instructions above](#installation) to install Neat into your project.
|
|
111
119
|
|
|
112
120
|
## The Bourbon family
|
|
113
121
|
|
|
114
|
-
- [Bourbon](https://github.com/thoughtbot/bourbon): A
|
|
115
|
-
- [Neat](https://github.com/thoughtbot/neat): A lightweight
|
|
122
|
+
- [Bourbon](https://github.com/thoughtbot/bourbon): A lightweight Sass tool set
|
|
123
|
+
- [Neat](https://github.com/thoughtbot/neat): A lightweight and flexible Sass grid
|
|
116
124
|
- [Bitters](https://github.com/thoughtbot/bitters): Scaffold styles, variables and structure for Bourbon projects
|
|
117
125
|
- [Refills](https://github.com/thoughtbot/refills): Prepackaged patterns and components built with Bourbon, Neat and Bitters
|
|
118
126
|
|
|
119
|
-
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.
|
|
120
|
-
|
|
121
127
|
## Contributing
|
|
122
128
|
|
|
123
129
|
See the [contributing] document. Thank you, [contributors]!
|
|
124
130
|
|
|
125
131
|
[contributing]: CONTRIBUTING.md
|
|
126
|
-
[contributors]: https://github.com/thoughtbot/
|
|
132
|
+
[contributors]: https://github.com/thoughtbot/neat/graphs/contributors
|
|
127
133
|
|
|
128
134
|
## License
|
|
129
135
|
|
|
@@ -135,7 +141,7 @@ Neat is copyright © 2012 [thoughtbot, inc.][thoughtbot] It is free software, an
|
|
|
135
141
|
|
|
136
142
|
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.
|
|
137
143
|
|
|
138
|
-
[<img src="http://thoughtbot.
|
|
144
|
+
[<img src="http://presskit.thoughtbot.com/images/signature.svg" width="250" alt="thoughtbot logo">][thoughtbot]
|
|
139
145
|
|
|
140
146
|
We love open-source software! See [our other projects][community] or [hire us][hire] to design, develop, and grow your product.
|
|
141
147
|
|
data/RELEASING.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
1. Update the version number in these places:
|
|
4
4
|
- `lib/neat/version.rb`
|
|
5
|
-
- `core/
|
|
5
|
+
- `core/_neat.scss`
|
|
6
6
|
- `package.json`
|
|
7
7
|
- `bower.json`
|
|
8
8
|
|
|
@@ -17,11 +17,12 @@
|
|
|
17
17
|
1. Run `npm publish`, which pushes the new version to npm’s registry (if
|
|
18
18
|
releasing a pre-release, run `npm publish --tag beta`).
|
|
19
19
|
|
|
20
|
-
1.
|
|
20
|
+
1. Draft a [new GitHub release].
|
|
21
21
|
|
|
22
|
-
1. Re-generate and publish
|
|
23
|
-
the [documentation website](//github.com/thoughtbot/neat-docs),
|
|
24
|
-
using the available Gulp tasks.
|
|
22
|
+
1. Re-generate and publish the [documentation website].
|
|
25
23
|
|
|
26
24
|
1. Announce the new release, making sure to say “thank you” to the contributors
|
|
27
25
|
who helped shape this version!
|
|
26
|
+
|
|
27
|
+
[new GitHub release]: https://github.com/thoughtbot/neat/releases/new
|
|
28
|
+
[documentation website]: https://github.com/thoughtbot/neat.bourbon.io
|
data/bower.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "neat",
|
|
3
|
-
"description": "A lightweight, semantic grid framework
|
|
4
|
-
"version": "2.0.0
|
|
3
|
+
"description": "A lightweight, semantic grid framework",
|
|
4
|
+
"version": "2.0.0",
|
|
5
5
|
"main": "core/_neat.scss",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"ignore": [
|
data/circle.yml
CHANGED
|
@@ -2,4 +2,31 @@
|
|
|
2
2
|
*::before,
|
|
3
3
|
*::after {
|
|
4
4
|
box-sizing: border-box;
|
|
5
|
+
font-family:
|
|
6
|
+
-apple-system,
|
|
7
|
+
BlinkMacSystemFont,
|
|
8
|
+
"Avenir Next",
|
|
9
|
+
"Avenir",
|
|
10
|
+
"Segoe UI",
|
|
11
|
+
"Lucida Grande",
|
|
12
|
+
"Helvetica Neue",
|
|
13
|
+
"Helvetica",
|
|
14
|
+
"Fira Sans",
|
|
15
|
+
"Roboto",
|
|
16
|
+
"Noto",
|
|
17
|
+
"Droid Sans",
|
|
18
|
+
"Cantarell",
|
|
19
|
+
"Oxygen",
|
|
20
|
+
"Ubuntu",
|
|
21
|
+
"Franklin Gothic Medium",
|
|
22
|
+
"Century Gothic",
|
|
23
|
+
"Liberation Sans",
|
|
24
|
+
sans-serif;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
h1,
|
|
28
|
+
h2,
|
|
29
|
+
h3,
|
|
30
|
+
h4 {
|
|
31
|
+
font-weight: 400;
|
|
5
32
|
}
|
data/core/_neat.scss
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
-
// Neat 2.0.0
|
|
2
|
+
// Neat 2.0.0
|
|
3
3
|
// http://neat.bourbon.io
|
|
4
4
|
// Copyright 2012 thoughtbot, inc.
|
|
5
5
|
// MIT License
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
@import "neat/functions/neat-column-width";
|
|
12
12
|
@import "neat/functions/neat-column-ratio";
|
|
13
13
|
@import "neat/functions/neat-float-direction";
|
|
14
|
+
@import "neat/functions/neat-merge-defaults";
|
|
14
15
|
@import "neat/functions/neat-opposite-direction";
|
|
15
16
|
@import "neat/functions/neat-parse-columns";
|
|
16
17
|
@import "neat/functions/neat-parse-media";
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
/// Apply Neat's default properties to undefined values within a map.
|
|
3
|
+
///
|
|
4
|
+
/// @argument {map} $grid
|
|
5
|
+
///
|
|
6
|
+
/// @return {map}
|
|
7
|
+
///
|
|
8
|
+
/// @example scss
|
|
9
|
+
/// _retrieve-neat-setting($neat-grid)
|
|
10
|
+
///
|
|
11
|
+
/// @access private
|
|
12
|
+
|
|
13
|
+
@function _neat-merge-defaults($grid) {
|
|
14
|
+
$_merged-grid: map-merge((
|
|
15
|
+
columns: 12,
|
|
16
|
+
gutter: 20px,
|
|
17
|
+
media: null,
|
|
18
|
+
color: rgba(#00d4ff, 0.25),
|
|
19
|
+
direction: ltr,
|
|
20
|
+
), $grid);
|
|
21
|
+
|
|
22
|
+
@return $_merged-grid;
|
|
23
|
+
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
-
///
|
|
2
|
+
/// This function recives a grid map and merges it with Neat's defauls.
|
|
3
|
+
/// It then returns the value of the property that has been passed to it.
|
|
3
4
|
///
|
|
4
5
|
/// @argument {map} $grid
|
|
5
6
|
///
|
|
@@ -13,6 +14,6 @@
|
|
|
13
14
|
/// @access private
|
|
14
15
|
|
|
15
16
|
@function _retrieve-neat-setting($grid, $setting) {
|
|
16
|
-
$_grid-settings: map-merge(
|
|
17
|
+
$_grid-settings: map-merge(_neat-merge-defaults($neat-grid), $grid);
|
|
17
18
|
@return map-get($_grid-settings, $setting);
|
|
18
19
|
}
|
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
/// @name Grid collapse
|
|
8
8
|
///
|
|
9
9
|
/// @argument {map} $grid [$neat-grid]
|
|
10
|
-
/// The grid used to
|
|
10
|
+
/// The grid to be used to generate the collapsed container.
|
|
11
|
+
/// By default, the global `$neat-grid` will be used.
|
|
11
12
|
///
|
|
12
13
|
/// @example scss
|
|
13
14
|
/// .element {
|
|
@@ -29,7 +30,6 @@
|
|
|
29
30
|
@warn "`grid-collapse` is not compatible with percentage based gutters.";
|
|
30
31
|
}
|
|
31
32
|
|
|
32
|
-
float: _neat-float-direction($grid);
|
|
33
33
|
margin-#{_neat-float-direction($grid)}: -($_grid-gutter);
|
|
34
34
|
margin-#{_neat-opposite-direction($grid)}: -($_grid-gutter);
|
|
35
35
|
width: calc(100% + #{($_grid-gutter * 2)});
|
|
@@ -1,14 +1,20 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
-
/// Creates
|
|
2
|
+
/// Creates a grid column of requested size.
|
|
3
3
|
///
|
|
4
4
|
/// @group features
|
|
5
5
|
///
|
|
6
6
|
/// @name Grid column
|
|
7
7
|
///
|
|
8
8
|
/// @argument {number (unitless)} $columns [null]
|
|
9
|
+
/// Specifies the number of columns an element should span based on the total
|
|
10
|
+
/// columns of the grid.
|
|
11
|
+
///
|
|
12
|
+
/// This can also be defined in a shorthand syntaxt which also contains the
|
|
13
|
+
/// total column count such as `3 of 5`.
|
|
9
14
|
///
|
|
10
15
|
/// @argument {map} $grid [$neat-grid]
|
|
11
|
-
/// The grid used to generate the column.
|
|
16
|
+
/// The grid to be used to generate the column.
|
|
17
|
+
/// By default, the global `$neat-grid` will be used.
|
|
12
18
|
///
|
|
13
19
|
/// @example scss
|
|
14
20
|
/// .element {
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
-
/// Creates a
|
|
2
|
+
/// Creates a grid container with clearfix.
|
|
3
3
|
///
|
|
4
4
|
/// @group features
|
|
5
5
|
///
|
|
6
|
-
/// @name Grid
|
|
6
|
+
/// @name Grid container
|
|
7
7
|
///
|
|
8
8
|
/// @argument {map} $grid [$neat-grid]
|
|
9
|
-
/// The
|
|
9
|
+
/// The grid to be used to generate the container.
|
|
10
|
+
/// By default, the global `$neat-grid` will be used.
|
|
10
11
|
///
|
|
11
12
|
/// @example scss
|
|
12
13
|
/// .element {
|
|
@@ -1,15 +1,28 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
-
///
|
|
3
|
-
///
|
|
4
|
-
///
|
|
5
|
-
///
|
|
2
|
+
/// `grid-media` allows you to change your layout based on a media query.
|
|
3
|
+
/// For example, an object can span 3 columns on small screens and 6 columns
|
|
4
|
+
/// on large screens.
|
|
5
|
+
///
|
|
6
|
+
/// You can take this a step further and set different grid attributes like
|
|
7
|
+
/// gutter size and total column count for each media query. So, for example,
|
|
8
|
+
/// you can have a `1rem` gutter on small screens, and a `2rem` gutter on large
|
|
9
|
+
/// screens.
|
|
6
10
|
///
|
|
7
11
|
/// @group features
|
|
8
12
|
///
|
|
9
13
|
/// @name Grid media
|
|
10
14
|
///
|
|
11
15
|
/// @argument {map} $grid
|
|
12
|
-
/// The grid used
|
|
16
|
+
/// The grid to be used within the scope of the block.
|
|
17
|
+
/// This grid should include the `media` property to determine the expression
|
|
18
|
+
/// for the media query.
|
|
19
|
+
///
|
|
20
|
+
/// @content
|
|
21
|
+
/// Grid media will temporarily the override the default grid with the
|
|
22
|
+
/// attributes of the custom grid. This change is scoped to within the mixin
|
|
23
|
+
/// block, and once the mixin has ended the default grid will revert to its
|
|
24
|
+
/// original state as defined by `$neat-grid`. This allows for different
|
|
25
|
+
/// gutter width and column count based on screen size or other properties.
|
|
13
26
|
///
|
|
14
27
|
/// @example scss
|
|
15
28
|
/// $custom-neat-grid: (
|
|
@@ -47,7 +60,7 @@
|
|
|
47
60
|
|
|
48
61
|
@media #{$_query} {
|
|
49
62
|
$_default-neat-grid: $neat-grid;
|
|
50
|
-
$neat-grid: $grid !global;
|
|
63
|
+
$neat-grid: map-merge($neat-grid, $grid) !global;
|
|
51
64
|
@content;
|
|
52
65
|
$neat-grid: $_default-neat-grid !global;
|
|
53
66
|
}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
-
/// Push or pull a
|
|
2
|
+
/// Push or pull a grid column by manipulating its left margin.
|
|
3
3
|
///
|
|
4
4
|
/// @group features
|
|
5
5
|
///
|
|
6
6
|
/// @name Grid push
|
|
7
7
|
///
|
|
8
8
|
/// @argument {number (unitless)} $push [false]
|
|
9
|
+
/// The number of columns to push the column.
|
|
9
10
|
///
|
|
10
11
|
/// @argument {map} $grid [$neat-grid]
|
|
11
|
-
/// The grid to be used to
|
|
12
|
+
/// The grid to be used to detirmine how far to push the column.
|
|
12
13
|
/// By default, the global `$neat-grid` will be used.
|
|
13
14
|
///
|
|
14
15
|
/// @example scss
|
|
@@ -7,9 +7,10 @@
|
|
|
7
7
|
/// @name Grid shift
|
|
8
8
|
///
|
|
9
9
|
/// @argument {number (unitless)} $shift [false]
|
|
10
|
+
/// The number of columns to shift the column.
|
|
10
11
|
///
|
|
11
12
|
/// @argument {map} $grid [$neat-grid]
|
|
12
|
-
/// The grid to be used to
|
|
13
|
+
/// The grid to be used to detirmine how far to shift the column.
|
|
13
14
|
/// By default, the global `$neat-grid` will be used.
|
|
14
15
|
///
|
|
15
16
|
/// @example scss
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
-
/// Creates a guide
|
|
2
|
+
/// Creates a series of guide lines using the `background-image` property on a
|
|
3
|
+
/// grid container to visualise the columns and gutters of the grid.
|
|
3
4
|
///
|
|
4
5
|
/// @group features
|
|
5
6
|
///
|
|
@@ -9,7 +10,7 @@
|
|
|
9
10
|
/// The color of the guide lines created.
|
|
10
11
|
///
|
|
11
12
|
/// @argument {map} $grid [$neat-grid]
|
|
12
|
-
/// The grid used to determine the
|
|
13
|
+
/// The grid used to determine the guides
|
|
13
14
|
///
|
|
14
15
|
/// @example scss
|
|
15
16
|
/// .element {
|
|
@@ -18,7 +19,7 @@
|
|
|
18
19
|
///
|
|
19
20
|
/// @example css
|
|
20
21
|
/// .element {
|
|
21
|
-
/// background-image: … ;
|
|
22
|
+
/// background-image: linear-gradient( … ) ;
|
|
22
23
|
/// }
|
|
23
24
|
|
|
24
25
|
@mixin grid-visual($color: null, $grid: $neat-grid) {
|
|
@@ -31,11 +32,8 @@
|
|
|
31
32
|
$_grid-visual-object: () !default;
|
|
32
33
|
$_grid-visual:
|
|
33
34
|
$color,
|
|
34
|
-
$color
|
|
35
|
-
transparent 1px,
|
|
35
|
+
$color $_grid-gutter,
|
|
36
36
|
transparent $_grid-gutter,
|
|
37
|
-
$color calc(#{$_grid-gutter} + 1px),
|
|
38
|
-
transparent calc(#{$_grid-gutter} + 2px),
|
|
39
37
|
;
|
|
40
38
|
|
|
41
39
|
@for $i from 1 to $_grid-columns {
|
|
@@ -50,36 +48,20 @@
|
|
|
50
48
|
$_grid-visual-loop-list:
|
|
51
49
|
transparent calc(#{$location}),
|
|
52
50
|
$color calc(#{$location}),
|
|
53
|
-
$color calc(#{$location} + 1px),
|
|
54
|
-
transparent calc(#{$location} + 1px),
|
|
55
|
-
transparent calc(#{$location} + #{$_grid-gutter}),
|
|
56
51
|
$color calc(#{$location} + #{$_grid-gutter}),
|
|
57
|
-
|
|
58
|
-
transparent calc(#{$location} + #{$_grid-gutter} + 1px),
|
|
52
|
+
transparent calc(#{$location} + #{$_grid-gutter}),
|
|
59
53
|
;
|
|
60
54
|
|
|
61
55
|
$_grid-visual: _neat-append-grid-visual($_grid-visual, $_grid-visual-loop-list);
|
|
62
56
|
}
|
|
63
57
|
|
|
64
58
|
$_grid-visual-loop-list:
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
transparent calc(100% - #{$_grid-gutter} + 1px),
|
|
69
|
-
transparent calc(100% - 1px),
|
|
70
|
-
$color calc(100% - 1px),
|
|
59
|
+
transparent calc(100% - #{$_grid-gutter}),
|
|
60
|
+
$color calc(100% - #{$_grid-gutter}),
|
|
61
|
+
$color calc(100%),
|
|
71
62
|
;
|
|
72
63
|
|
|
73
64
|
$_grid-visual: _neat-append-grid-visual($_grid-visual, $_grid-visual-loop-list);
|
|
74
65
|
|
|
75
|
-
background-image:
|
|
76
|
-
linear-gradient(to right, $_grid-visual),
|
|
77
|
-
linear-gradient(to bottom,
|
|
78
|
-
$color,
|
|
79
|
-
$color 1px,
|
|
80
|
-
transparent 1px,
|
|
81
|
-
transparent calc(100% - 1px),
|
|
82
|
-
$color calc(100% - 1px),
|
|
83
|
-
$color
|
|
84
|
-
);
|
|
66
|
+
background-image: linear-gradient(to right, $_grid-visual);
|
|
85
67
|
}
|
|
@@ -1,34 +1,4 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
-
/// Neat’s default grid.
|
|
3
|
-
///
|
|
4
|
-
/// @group settings
|
|
5
|
-
///
|
|
6
|
-
/// @type map
|
|
7
|
-
///
|
|
8
|
-
/// @name Default settings
|
|
9
|
-
///
|
|
10
|
-
/// @property {number (unitless)} columns [12]
|
|
11
|
-
/// Default number of the total grid columns.
|
|
12
|
-
///
|
|
13
|
-
/// @property {number (with unit)} gutter [20px]
|
|
14
|
-
/// Default grid gutter width between columns.
|
|
15
|
-
///
|
|
16
|
-
/// @property {string | number (with unit)} gutter [null]
|
|
17
|
-
/// Grid media query.
|
|
18
|
-
///
|
|
19
|
-
/// @property {color} color [rgba(#00d4ff, 0.25)]
|
|
20
|
-
/// Default visual grid color.
|
|
21
|
-
///
|
|
22
|
-
/// @access private
|
|
23
|
-
|
|
24
|
-
$_neat-grid-defaults: (
|
|
25
|
-
columns: 12,
|
|
26
|
-
gutter: 20px,
|
|
27
|
-
media: null,
|
|
28
|
-
color: rgba(#00d4ff, 0.25),
|
|
29
|
-
direction: ltr,
|
|
30
|
-
);
|
|
31
|
-
|
|
32
2
|
/// This variable is a sass map that overrides Neat's default grid settings.
|
|
33
3
|
/// Use this to define your project's grid properties incluting gutters and
|
|
34
4
|
/// total column count.
|
|
@@ -40,10 +10,10 @@ $_neat-grid-defaults: (
|
|
|
40
10
|
/// @name Neat grid
|
|
41
11
|
///
|
|
42
12
|
/// @property {number (unitless)} columns [12]
|
|
43
|
-
///
|
|
13
|
+
/// Default number of the total grid columns.
|
|
44
14
|
///
|
|
45
15
|
/// @property {number (with unit)} gutter [20px]
|
|
46
|
-
///
|
|
16
|
+
/// Default grid gutter width between columns.
|
|
47
17
|
///
|
|
48
18
|
/// @example scss
|
|
49
19
|
/// $neat-grid: (
|
|
@@ -53,15 +23,15 @@ $_neat-grid-defaults: (
|
|
|
53
23
|
|
|
54
24
|
$neat-grid: () !default;
|
|
55
25
|
|
|
56
|
-
/// If you
|
|
26
|
+
/// If you need multiple grids in a single project, you can do
|
|
57
27
|
/// this by defining a new map stored within a variable of your choosing. This
|
|
58
28
|
/// variable can then be passed directly in to any of Neat's mixins like
|
|
59
|
-
/// [`grid-
|
|
29
|
+
/// [`grid-column(12, $my-custom-grid)`](#grid-column).
|
|
60
30
|
///
|
|
61
31
|
/// Custom grids are especially useful with [`grid-media`](#grid-media). By
|
|
62
32
|
/// defining a `media` attribute within your custom grid, you are able to easily
|
|
63
|
-
/// define
|
|
64
|
-
/// should activate.
|
|
33
|
+
/// define gutter width and total column count as well the breakpoint at which
|
|
34
|
+
/// they should activate.
|
|
65
35
|
///
|
|
66
36
|
/// @type map
|
|
67
37
|
///
|
|
@@ -69,8 +39,6 @@ $neat-grid: () !default;
|
|
|
69
39
|
///
|
|
70
40
|
/// @name Custom grids
|
|
71
41
|
///
|
|
72
|
-
/// @see {mixin} Grid media
|
|
73
|
-
///
|
|
74
42
|
/// @property {number (unitless)} columns [12]
|
|
75
43
|
/// Number of the total grid columns.
|
|
76
44
|
///
|
|
@@ -81,11 +49,19 @@ $neat-grid: () !default;
|
|
|
81
49
|
/// The `@media` definition that is used by the [`grid-media`](#grid-media)
|
|
82
50
|
/// mixin to detirmine the media properties.
|
|
83
51
|
///
|
|
52
|
+
/// @property {color} color [null]
|
|
53
|
+
/// The color used by [`grid-visual`](#grid-visual) to create the guides.
|
|
54
|
+
///
|
|
55
|
+
/// @property {string} direction [ltr]
|
|
56
|
+
/// The float direction used throughout the grid.
|
|
57
|
+
///
|
|
84
58
|
/// @example scss
|
|
85
59
|
/// $my-custom-grid: (
|
|
86
60
|
/// columns: 12,
|
|
87
61
|
/// gutter: 20px,
|
|
88
62
|
/// media: 1200px,
|
|
63
|
+
/// color: rgba(#00d4ff, 0.25),
|
|
64
|
+
/// direction: ltr,
|
|
89
65
|
/// );
|
|
90
66
|
///
|
|
91
67
|
/// $other-custom-grid-for-print: (
|
data/lib/neat/generator.rb
CHANGED
|
@@ -27,7 +27,7 @@ module Neat
|
|
|
27
27
|
end
|
|
28
28
|
end
|
|
29
29
|
|
|
30
|
-
desc "
|
|
30
|
+
desc "remove", "Remove Neat"
|
|
31
31
|
def remove
|
|
32
32
|
if neat_files_already_exist?
|
|
33
33
|
remove_neat_directory
|
|
@@ -62,7 +62,7 @@ module Neat
|
|
|
62
62
|
end
|
|
63
63
|
|
|
64
64
|
def stylesheets_directory
|
|
65
|
-
File.join(top_level_directory, "
|
|
65
|
+
File.join(top_level_directory, "core")
|
|
66
66
|
end
|
|
67
67
|
|
|
68
68
|
def top_level_directory
|
data/lib/neat/version.rb
CHANGED
data/package.json
CHANGED
|
@@ -7,8 +7,7 @@ describe "grid-collapse" do
|
|
|
7
7
|
|
|
8
8
|
context "called with default settings" do
|
|
9
9
|
it "adds margin for just the gutter with no specified column" do
|
|
10
|
-
ruleset = "
|
|
11
|
-
"margin-left: -20px; " +
|
|
10
|
+
ruleset = "margin-left: -20px; " +
|
|
12
11
|
"margin-right: -20px; " +
|
|
13
12
|
"width: calc(100% + 40px);"
|
|
14
13
|
expect(".grid-collapse-default").to have_ruleset(ruleset)
|
|
@@ -17,8 +16,7 @@ describe "grid-collapse" do
|
|
|
17
16
|
|
|
18
17
|
context "called with custom settings" do
|
|
19
18
|
it "adds margin for just the gutter with no specified column" do
|
|
20
|
-
ruleset = "
|
|
21
|
-
"margin-left: -4rem; " +
|
|
19
|
+
ruleset = "margin-left: -4rem; " +
|
|
22
20
|
"margin-right: -4rem; " +
|
|
23
21
|
"width: calc(100% + 8rem);"
|
|
24
22
|
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: neat
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 2.0.0
|
|
4
|
+
version: 2.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Joel Oliveira
|
|
@@ -14,7 +14,7 @@ authors:
|
|
|
14
14
|
autorequire:
|
|
15
15
|
bindir: bin
|
|
16
16
|
cert_chain: []
|
|
17
|
-
date:
|
|
17
|
+
date: 2017-02-17 00:00:00.000000000 Z
|
|
18
18
|
dependencies:
|
|
19
19
|
- !ruby/object:Gem::Dependency
|
|
20
20
|
name: aruba
|
|
@@ -156,6 +156,7 @@ files:
|
|
|
156
156
|
- core/neat/functions/_neat-column-ratio.scss
|
|
157
157
|
- core/neat/functions/_neat-column-width.scss
|
|
158
158
|
- core/neat/functions/_neat-float-direction.scss
|
|
159
|
+
- core/neat/functions/_neat-merge-defaults.scss
|
|
159
160
|
- core/neat/functions/_neat-opposite-direction.scss
|
|
160
161
|
- core/neat/functions/_neat-parse-columns.scss
|
|
161
162
|
- core/neat/functions/_neat-parse-media.scss
|
|
@@ -223,9 +224,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
223
224
|
version: '0'
|
|
224
225
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
225
226
|
requirements:
|
|
226
|
-
- - "
|
|
227
|
+
- - ">="
|
|
227
228
|
- !ruby/object:Gem::Version
|
|
228
|
-
version:
|
|
229
|
+
version: '0'
|
|
229
230
|
requirements: []
|
|
230
231
|
rubyforge_project:
|
|
231
232
|
rubygems_version: 2.6.8
|