neat 1.1.0 → 1.2.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.
- data/.rspec +2 -0
- data/CONTRIBUTING.md +4 -2
- data/NEWS.md +17 -12
- data/README.md +7 -9
- data/Rakefile +20 -0
- data/app/assets/stylesheets/_neat.scss +8 -0
- data/app/assets/stylesheets/grid/_fill-parent.scss +7 -0
- data/app/assets/stylesheets/grid/_global-variables.scss +4 -0
- data/app/assets/stylesheets/grid/_grid.scss +0 -205
- data/app/assets/stylesheets/grid/_media.scss +51 -0
- data/app/assets/stylesheets/grid/_outer-container.scss +8 -0
- data/app/assets/stylesheets/grid/_pad.scss +8 -0
- data/app/assets/stylesheets/grid/_row.scss +16 -0
- data/app/assets/stylesheets/grid/_shift.scss +6 -0
- data/app/assets/stylesheets/grid/_span-columns.scss +58 -0
- data/app/assets/stylesheets/grid/_to-deprecate.scss +52 -0
- data/lib/neat/version.rb +1 -1
- data/lib/tasks/install.rake +0 -2
- data/neat.gemspec +4 -0
- data/spec/neat/columns_spec.rb +61 -0
- data/spec/neat/container_spec.rb +17 -0
- data/spec/neat/media_spec.rb +47 -0
- data/spec/neat/omega_spec.rb +57 -0
- data/spec/neat/pad_spec.rb +34 -0
- data/spec/neat/row_spec.rb +41 -0
- data/spec/neat/shift_spec.rb +37 -0
- data/spec/spec_helper.rb +25 -0
- data/spec/support/bourbon_support.rb +9 -0
- data/spec/support/matchers/be_contained_in.rb +10 -0
- data/spec/support/matchers/have_rule.rb +33 -0
- data/spec/support/parser_support.rb +9 -0
- data/spec/support/sass_support.rb +10 -0
- data/test/_setup.scss +4 -0
- data/test/media.scss +31 -0
- data/test/omega.scss +35 -0
- data/test/outer-container.scss +7 -0
- data/test/pad.scss +17 -0
- data/test/row.scss +26 -0
- data/test/shift.scss +27 -0
- data/test/span-columns.scss +17 -0
- metadata +108 -13
data/.rspec
ADDED
data/CONTRIBUTING.md
CHANGED
@@ -1,7 +1,8 @@
|
|
1
1
|
We love pull requests. Here's a quick guide:
|
2
2
|
|
3
|
-
1. Fork the
|
3
|
+
1. Fork the repository.
|
4
4
|
2. Make your changes in a topic branch.
|
5
|
+
3. Run `rake` to see if you changes are breaking any existing functionality.
|
5
6
|
3. Squash your commits into a single one (more on that [here](http://gitready.com/advanced/2009/02/10/squashing-commits-with-rebase.html)).
|
6
7
|
4. Rebase against `origin/master`, push to your fork and submit a pull request.
|
7
8
|
|
@@ -11,7 +12,8 @@ day). We may suggest some changes or improvements or alternatives.
|
|
11
12
|
|
12
13
|
Some things that will increase the chance that your pull request is accepted:
|
13
14
|
|
14
|
-
* Fix a bug, refactor code or expand an existing feature
|
15
|
+
* Fix a bug, refactor code or expand an existing feature.
|
16
|
+
* Write [RSpec](https://www.relishapp.com/rspec) tests for your new features.
|
15
17
|
* Use the right syntax and naming conventions.
|
16
18
|
* Update parts of the documentation that are affected by your contribution.
|
17
19
|
|
data/NEWS.md
CHANGED
@@ -1,26 +1,31 @@
|
|
1
|
+
1.2.0 (2013-02-18)
|
2
|
+
|
3
|
+
* New: Auto-detect table layout when `span-columns()` is called inside `row(table)`
|
4
|
+
* Fix: Make `shift()` reset context after each nested call
|
5
|
+
|
1
6
|
1.1.0 (2013-01-09)
|
2
7
|
|
3
|
-
* New: pad() takes shorthand arguments
|
4
|
-
* Refactor: Merge omega() and nth-omega()
|
5
|
-
* Fix: Last child in table layouts
|
8
|
+
* New: `pad()` takes shorthand arguments
|
9
|
+
* Refactor: Merge `omega()` and `nth-omega()`
|
10
|
+
* Fix: Last child in table layouts keeps its right-padding
|
6
11
|
|
7
12
|
1.0.2 (2012-11-19)
|
8
13
|
|
9
|
-
* Fix [
|
14
|
+
* Fix: Add explicit require to the bourbon gem [#38](https://github.com/thoughtbot/neat/issues/38)
|
10
15
|
|
11
16
|
1.0.1 (2012-11-06)
|
12
17
|
|
13
|
-
* Fix
|
14
|
-
* Fix
|
18
|
+
* Fix: Make `em()` always return a number
|
19
|
+
* Fix: Relative path imports in Rails
|
15
20
|
|
16
21
|
1.0.0 (2012-10-29)
|
17
22
|
|
18
|
-
* Add executable for non-Rails projects
|
19
|
-
* Add visual grid
|
20
|
-
* Add `media` and `new-breakpoint` mixins
|
21
|
-
* Add `_neat-helpers.scss` as a public interface for Neat
|
22
|
-
* Fix
|
23
|
-
* Remove typography mixins and settings
|
23
|
+
* New: Add executable for non-Rails projects
|
24
|
+
* New: Add visual grid
|
25
|
+
* New: Add `media` and `new-breakpoint` mixins
|
26
|
+
* New: Add `_neat-helpers.scss` as a public interface for Neat
|
27
|
+
* Fix: Make `shift()` work properly in nested contexts
|
28
|
+
* Refactor: Remove typography mixins and settings
|
24
29
|
|
25
30
|
0.4.2 (2012-08-31)
|
26
31
|
|
data/README.md
CHANGED
@@ -132,13 +132,6 @@ Likewise for inline-block:
|
|
132
132
|
@include span-columns(6 of 8, inline-block)
|
133
133
|
```
|
134
134
|
|
135
|
-
The following syntaxes would also work:
|
136
|
-
|
137
|
-
```scss
|
138
|
-
@include span-columns(6 / 8,inline-block);
|
139
|
-
@include span-columns(6 8,inline-block);
|
140
|
-
```
|
141
|
-
|
142
135
|
### Rows
|
143
136
|
In order to clear floated or table-cell columns, use the `row` mixin:
|
144
137
|
|
@@ -179,8 +172,8 @@ Neat removes by default the last column's gutter. However, if you are queueing m
|
|
179
172
|
```scss
|
180
173
|
@include omega; // Removes the right gutter (margin) of the element
|
181
174
|
@include omega(table); // Removes the right gutter (padding) of a table-cell element
|
182
|
-
@include omega(4n) // Removes every 4th right gutter (margin)
|
183
|
-
@include omega(4n table) // Removes every 4th right gutter (padding) of a table-cell element
|
175
|
+
@include omega(4n); // Removes every 4th right gutter (margin)
|
176
|
+
@include omega(4n table); // Removes every 4th right gutter (padding) of a table-cell element
|
184
177
|
```
|
185
178
|
|
186
179
|
The `omega` mixin takes any valid `:nth-child` value. Composite values such as `3n+5` should be passed as strings in order to work: `omega('3n+5')`. See [https://developer.mozilla.org/en-US/docs/CSS/:nth-child](Mozilla's :nth-child documentation)
|
@@ -422,6 +415,11 @@ Here is the list of the available settings:
|
|
422
415
|
- IE 9+ (Visual grid is IE10 only)
|
423
416
|
- IE 8 with [selectivizr](http://selectivizr.com) (no `media()` support)
|
424
417
|
|
418
|
+
Roadmap
|
419
|
+
===
|
420
|
+
|
421
|
+
The development roadmap can be tracked on this public [Trello board](http://bit.ly/neat-trello).
|
422
|
+
|
425
423
|
Credits
|
426
424
|
===
|
427
425
|
|
data/Rakefile
CHANGED
@@ -1,2 +1,22 @@
|
|
1
|
+
require 'rubygems'
|
1
2
|
require 'bundler'
|
3
|
+
require 'rspec/core/rake_task'
|
2
4
|
Bundler::GemHelper.install_tasks
|
5
|
+
|
6
|
+
RSpec::Core::RakeTask.new(:spec)
|
7
|
+
|
8
|
+
task :default => :spec
|
9
|
+
|
10
|
+
task :test do
|
11
|
+
puts "Creating a Bourbon directory..."
|
12
|
+
`bourbon install --path test`
|
13
|
+
puts "Generating CSS..."
|
14
|
+
`sass --watch test:css/ --style expanded`
|
15
|
+
end # task :test
|
16
|
+
|
17
|
+
task :clean do
|
18
|
+
puts "Deleting Bourbon directory..."
|
19
|
+
`rm -rf test/bourbon`
|
20
|
+
puts "Deleting generated CSS..."
|
21
|
+
`rm -rf css/`
|
22
|
+
end # task :clean
|
@@ -9,4 +9,12 @@
|
|
9
9
|
@import "grid/global-variables";
|
10
10
|
@import "grid/grid";
|
11
11
|
@import "grid/omega";
|
12
|
+
@import "grid/outer-container";
|
13
|
+
@import "grid/span-columns";
|
14
|
+
@import "grid/row";
|
15
|
+
@import "grid/shift";
|
16
|
+
@import "grid/pad";
|
17
|
+
@import "grid/fill-parent";
|
18
|
+
@import "grid/media";
|
19
|
+
@import "grid/to-deprecate";
|
12
20
|
@import "grid/visual-grid";
|
@@ -3,208 +3,3 @@
|
|
3
3
|
@include box-sizing(border-box);
|
4
4
|
}
|
5
5
|
}
|
6
|
-
|
7
|
-
$fg-column: $column;
|
8
|
-
$fg-gutter: $gutter;
|
9
|
-
$fg-max-columns: $grid-columns;
|
10
|
-
$fg-max-width: $max-width;
|
11
|
-
|
12
|
-
// outer wrapper center container
|
13
|
-
@mixin outer-container() {
|
14
|
-
@include clearfix;
|
15
|
-
max-width: $fg-max-width;
|
16
|
-
margin: {
|
17
|
-
left: auto;
|
18
|
-
right: auto;
|
19
|
-
}
|
20
|
-
}
|
21
|
-
|
22
|
-
// Grid span columns
|
23
|
-
@mixin span-columns($span: $columns of $container-columns, $display: block) {
|
24
|
-
|
25
|
-
$columns: nth($span, 1);
|
26
|
-
$container-columns: container-span($span);
|
27
|
-
|
28
|
-
@if $container-columns != $grid-columns {
|
29
|
-
$parent-columns: $container-columns;
|
30
|
-
}
|
31
|
-
|
32
|
-
@else {
|
33
|
-
$parent-columns: $grid-columns;
|
34
|
-
}
|
35
|
-
|
36
|
-
@if $display == table {
|
37
|
-
display: table-cell;
|
38
|
-
padding-right: flex-gutter($container-columns);
|
39
|
-
width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
|
40
|
-
|
41
|
-
&:last-child {
|
42
|
-
width: flex-grid($columns, $container-columns);
|
43
|
-
}
|
44
|
-
}
|
45
|
-
|
46
|
-
@else if $display == inline-block {
|
47
|
-
@include inline-block;
|
48
|
-
margin-right: flex-gutter($container-columns);
|
49
|
-
width: flex-grid($columns, $container-columns);
|
50
|
-
|
51
|
-
&:last-child {
|
52
|
-
margin-right: 0;
|
53
|
-
}
|
54
|
-
}
|
55
|
-
|
56
|
-
@else {
|
57
|
-
display: block;
|
58
|
-
float: left;
|
59
|
-
margin-right: flex-gutter($container-columns);
|
60
|
-
width: flex-grid($columns, $container-columns);
|
61
|
-
|
62
|
-
&:last-child {
|
63
|
-
margin-right: 0;
|
64
|
-
}
|
65
|
-
}
|
66
|
-
}
|
67
|
-
|
68
|
-
// Clearfix / row container
|
69
|
-
@mixin row($display: block) {
|
70
|
-
@include clearfix;
|
71
|
-
@if $display == table {
|
72
|
-
display: table;
|
73
|
-
}
|
74
|
-
|
75
|
-
@else {
|
76
|
-
display: block;
|
77
|
-
}
|
78
|
-
}
|
79
|
-
|
80
|
-
// Shift
|
81
|
-
@mixin shift($n-columns: 1) {
|
82
|
-
margin-left: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
|
83
|
-
}
|
84
|
-
|
85
|
-
|
86
|
-
// Pad
|
87
|
-
@mixin pad($padding: flex-gutter()) {
|
88
|
-
$padding-list: null;
|
89
|
-
@each $value in $padding {
|
90
|
-
$value: if($value == 'default', flex-gutter(), $value);
|
91
|
-
$padding-list: join($padding-list, $value);
|
92
|
-
}
|
93
|
-
padding: $padding-list;
|
94
|
-
}
|
95
|
-
|
96
|
-
// Fill 100% of parent
|
97
|
-
@mixin fill-parent() {
|
98
|
-
width: 100%;
|
99
|
-
|
100
|
-
@if $border-box-sizing == false {
|
101
|
-
@include box-sizing(border-box);
|
102
|
-
}
|
103
|
-
}
|
104
|
-
|
105
|
-
// Media Queries
|
106
|
-
@mixin media($query:$feature $value $columns, $total-columns: $grid-columns) {
|
107
|
-
|
108
|
-
@if length($query) == 1 {
|
109
|
-
@media screen and ($default-feature: nth($query, 1)) {
|
110
|
-
$default-grid-columns: $grid-columns;
|
111
|
-
$grid-columns: $total-columns;
|
112
|
-
@content;
|
113
|
-
$grid-columns: $default-grid-columns;
|
114
|
-
}
|
115
|
-
}
|
116
|
-
|
117
|
-
@else if length($query) == 2 {
|
118
|
-
@media screen and (nth($query, 1): nth($query, 2)) {
|
119
|
-
$default-grid-columns: $grid-columns;
|
120
|
-
$grid-columns: $total-columns;
|
121
|
-
@content;
|
122
|
-
$grid-columns: $default-grid-columns;
|
123
|
-
}
|
124
|
-
}
|
125
|
-
|
126
|
-
@else if length($query) == 3 {
|
127
|
-
@media screen and (nth($query, 1): nth($query, 2)) {
|
128
|
-
$default-grid-columns: $grid-columns;
|
129
|
-
$grid-columns: nth($query, 3);
|
130
|
-
@content;
|
131
|
-
$grid-columns: $default-grid-columns;
|
132
|
-
}
|
133
|
-
}
|
134
|
-
|
135
|
-
@else if length($query) == 4 {
|
136
|
-
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
|
137
|
-
$default-grid-columns: $grid-columns;
|
138
|
-
$grid-columns: $total-columns;
|
139
|
-
@content;
|
140
|
-
$grid-columns: $default-grid-columns;
|
141
|
-
}
|
142
|
-
}
|
143
|
-
|
144
|
-
@else if length($query) == 5 {
|
145
|
-
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
|
146
|
-
$default-grid-columns: $grid-columns;
|
147
|
-
$grid-columns: nth($query, 5);
|
148
|
-
@content;
|
149
|
-
$grid-columns: $default-grid-columns;
|
150
|
-
}
|
151
|
-
}
|
152
|
-
|
153
|
-
@else {
|
154
|
-
@warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
|
155
|
-
}
|
156
|
-
}
|
157
|
-
|
158
|
-
// Legacy Mixins
|
159
|
-
@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
|
160
|
-
@warn "The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump.";
|
161
|
-
|
162
|
-
@if length($query) == 1 {
|
163
|
-
@media screen and ($default-feature: nth($query, 1)) {
|
164
|
-
$default-grid-columns: $grid-columns;
|
165
|
-
$grid-columns: $total-columns;
|
166
|
-
@content;
|
167
|
-
$grid-columns: $default-grid-columns;
|
168
|
-
}
|
169
|
-
}
|
170
|
-
|
171
|
-
@else if length($query) == 2 {
|
172
|
-
@media screen and (nth($query, 1): nth($query, 2)) {
|
173
|
-
$default-grid-columns: $grid-columns;
|
174
|
-
$grid-columns: $total-columns;
|
175
|
-
@content;
|
176
|
-
$grid-columns: $default-grid-columns;
|
177
|
-
}
|
178
|
-
}
|
179
|
-
|
180
|
-
@else if length($query) == 3 {
|
181
|
-
@media screen and (nth($query, 1): nth($query, 2)) {
|
182
|
-
$default-grid-columns: $grid-columns;
|
183
|
-
$grid-columns: nth($query, 3);
|
184
|
-
@content;
|
185
|
-
$grid-columns: $default-grid-columns;
|
186
|
-
}
|
187
|
-
}
|
188
|
-
|
189
|
-
@else if length($query) == 4 {
|
190
|
-
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
|
191
|
-
$default-grid-columns: $grid-columns;
|
192
|
-
$grid-columns: $total-columns;
|
193
|
-
@content;
|
194
|
-
$grid-columns: $default-grid-columns;
|
195
|
-
}
|
196
|
-
}
|
197
|
-
|
198
|
-
@else if length($query) == 5 {
|
199
|
-
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
|
200
|
-
$default-grid-columns: $grid-columns;
|
201
|
-
$grid-columns: nth($query, 5);
|
202
|
-
@content;
|
203
|
-
$grid-columns: $default-grid-columns;
|
204
|
-
}
|
205
|
-
}
|
206
|
-
|
207
|
-
@else {
|
208
|
-
@warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
|
209
|
-
}
|
210
|
-
}
|
@@ -0,0 +1,51 @@
|
|
1
|
+
@mixin media($query:$feature $value $columns, $total-columns: $grid-columns) {
|
2
|
+
|
3
|
+
@if length($query) == 1 {
|
4
|
+
@media screen and ($default-feature: nth($query, 1)) {
|
5
|
+
$default-grid-columns: $grid-columns;
|
6
|
+
$grid-columns: $total-columns;
|
7
|
+
@content;
|
8
|
+
$grid-columns: $default-grid-columns;
|
9
|
+
}
|
10
|
+
}
|
11
|
+
|
12
|
+
@else if length($query) == 2 {
|
13
|
+
@media screen and (nth($query, 1): nth($query, 2)) {
|
14
|
+
$default-grid-columns: $grid-columns;
|
15
|
+
$grid-columns: $total-columns;
|
16
|
+
@content;
|
17
|
+
$grid-columns: $default-grid-columns;
|
18
|
+
}
|
19
|
+
}
|
20
|
+
|
21
|
+
@else if length($query) == 3 {
|
22
|
+
@media screen and (nth($query, 1): nth($query, 2)) {
|
23
|
+
$default-grid-columns: $grid-columns;
|
24
|
+
$grid-columns: nth($query, 3);
|
25
|
+
@content;
|
26
|
+
$grid-columns: $default-grid-columns;
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
@else if length($query) == 4 {
|
31
|
+
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
|
32
|
+
$default-grid-columns: $grid-columns;
|
33
|
+
$grid-columns: $total-columns;
|
34
|
+
@content;
|
35
|
+
$grid-columns: $default-grid-columns;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
@else if length($query) == 5 {
|
40
|
+
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
|
41
|
+
$default-grid-columns: $grid-columns;
|
42
|
+
$grid-columns: nth($query, 5);
|
43
|
+
@content;
|
44
|
+
$grid-columns: $default-grid-columns;
|
45
|
+
}
|
46
|
+
}
|
47
|
+
|
48
|
+
@else {
|
49
|
+
@warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
|
50
|
+
}
|
51
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
@mixin row($display: block) {
|
2
|
+
@include clearfix;
|
3
|
+
@if $display == table {
|
4
|
+
display: table;
|
5
|
+
$container-display-table: true;
|
6
|
+
}
|
7
|
+
|
8
|
+
@else {
|
9
|
+
display: block;
|
10
|
+
$container-display-table: false;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
@mixin reset-display {
|
15
|
+
$container-display-table: false;
|
16
|
+
}
|