neat 2.0.0.beta.2 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|