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.
Files changed (41) hide show
  1. data/.rspec +2 -0
  2. data/CONTRIBUTING.md +4 -2
  3. data/NEWS.md +17 -12
  4. data/README.md +7 -9
  5. data/Rakefile +20 -0
  6. data/app/assets/stylesheets/_neat.scss +8 -0
  7. data/app/assets/stylesheets/grid/_fill-parent.scss +7 -0
  8. data/app/assets/stylesheets/grid/_global-variables.scss +4 -0
  9. data/app/assets/stylesheets/grid/_grid.scss +0 -205
  10. data/app/assets/stylesheets/grid/_media.scss +51 -0
  11. data/app/assets/stylesheets/grid/_outer-container.scss +8 -0
  12. data/app/assets/stylesheets/grid/_pad.scss +8 -0
  13. data/app/assets/stylesheets/grid/_row.scss +16 -0
  14. data/app/assets/stylesheets/grid/_shift.scss +6 -0
  15. data/app/assets/stylesheets/grid/_span-columns.scss +58 -0
  16. data/app/assets/stylesheets/grid/_to-deprecate.scss +52 -0
  17. data/lib/neat/version.rb +1 -1
  18. data/lib/tasks/install.rake +0 -2
  19. data/neat.gemspec +4 -0
  20. data/spec/neat/columns_spec.rb +61 -0
  21. data/spec/neat/container_spec.rb +17 -0
  22. data/spec/neat/media_spec.rb +47 -0
  23. data/spec/neat/omega_spec.rb +57 -0
  24. data/spec/neat/pad_spec.rb +34 -0
  25. data/spec/neat/row_spec.rb +41 -0
  26. data/spec/neat/shift_spec.rb +37 -0
  27. data/spec/spec_helper.rb +25 -0
  28. data/spec/support/bourbon_support.rb +9 -0
  29. data/spec/support/matchers/be_contained_in.rb +10 -0
  30. data/spec/support/matchers/have_rule.rb +33 -0
  31. data/spec/support/parser_support.rb +9 -0
  32. data/spec/support/sass_support.rb +10 -0
  33. data/test/_setup.scss +4 -0
  34. data/test/media.scss +31 -0
  35. data/test/omega.scss +35 -0
  36. data/test/outer-container.scss +7 -0
  37. data/test/pad.scss +17 -0
  38. data/test/row.scss +26 -0
  39. data/test/shift.scss +27 -0
  40. data/test/span-columns.scss +17 -0
  41. metadata +108 -13
data/.rspec ADDED
@@ -0,0 +1,2 @@
1
+ --color
2
+ --format documentation
@@ -1,7 +1,8 @@
1
1
  We love pull requests. Here's a quick guide:
2
2
 
3
- 1. Fork the repo.
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 keep its right-padding
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 [Issue 38](https://github.com/thoughtbot/neat/issues/38) by adding explicit require to the bourbon gem
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 bug where the return type in the `em()` function was a string instead of a number
14
- * Fix bug related to relative path imports in Rails
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 bug in the `shift()` mixin for nested columns
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";
@@ -0,0 +1,7 @@
1
+ @mixin fill-parent() {
2
+ width: 100%;
3
+
4
+ @if $border-box-sizing == false {
5
+ @include box-sizing(border-box);
6
+ }
7
+ }
@@ -1 +1,5 @@
1
1
  $parent-columns: $grid-columns !default;
2
+ $fg-column: $column;
3
+ $fg-gutter: $gutter;
4
+ $fg-max-columns: $grid-columns;
5
+ $container-display-table: false !default;
@@ -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,8 @@
1
+ @mixin outer-container {
2
+ @include clearfix;
3
+ max-width: $max-width;
4
+ margin: {
5
+ left: auto;
6
+ right: auto;
7
+ }
8
+ }
@@ -0,0 +1,8 @@
1
+ @mixin pad($padding: flex-gutter()) {
2
+ $padding-list: null;
3
+ @each $value in $padding {
4
+ $value: if($value == 'default', flex-gutter(), $value);
5
+ $padding-list: join($padding-list, $value);
6
+ }
7
+ padding: $padding-list;
8
+ }
@@ -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
+ }