neat 1.6.0 → 1.7.0.pre

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. checksums.yaml +4 -4
  2. data/.travis.yml +2 -0
  3. data/README.md +75 -13
  4. data/app/assets/stylesheets/_neat-helpers.scss +1 -0
  5. data/app/assets/stylesheets/_neat.scss +7 -5
  6. data/app/assets/stylesheets/functions/_private.scss +7 -18
  7. data/app/assets/stylesheets/grid/_box-sizing.scss +11 -0
  8. data/app/assets/stylesheets/grid/_direction.scss +33 -0
  9. data/app/assets/stylesheets/grid/_display.scss +28 -0
  10. data/app/assets/stylesheets/grid/_omega.scss +3 -3
  11. data/app/assets/stylesheets/grid/_outer-container.scss +32 -2
  12. data/app/assets/stylesheets/grid/_row.scss +10 -2
  13. data/app/assets/stylesheets/grid/_span-columns.scss +1 -1
  14. data/app/assets/stylesheets/grid/_to-deprecate.scss +18 -3
  15. data/app/assets/stylesheets/grid/_visual-grid.scss +5 -6
  16. data/app/assets/stylesheets/settings/_disable-warnings.scss +13 -0
  17. data/bower.json +2 -2
  18. data/lib/neat/version.rb +1 -1
  19. data/neat.gemspec +1 -1
  20. data/spec/neat/container_spec.rb +6 -0
  21. data/spec/neat/default_spec.rb +15 -0
  22. data/spec/neat/direction_spec.rb +19 -0
  23. data/spec/neat/display_spec.rb +19 -0
  24. data/spec/neat/media_spec.rb +1 -1
  25. data/spec/support/matchers/be_contained_in.rb +1 -1
  26. data/spec/support/matchers/have_rule.rb +1 -1
  27. data/spec/support/matchers/have_value.rb +1 -1
  28. data/test/_setup.scss +1 -2
  29. data/test/default.scss +1 -0
  30. data/test/direction.scss +13 -0
  31. data/test/display.scss +15 -0
  32. data/test/outer-container.scss +5 -1
  33. metadata +24 -9
  34. data/app/assets/stylesheets/grid/_grid.scss +0 -5
  35. data/app/assets/stylesheets/grid/_reset.scss +0 -12
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: c918240e160c598d18975fac13d6d2b7098b7d64
4
- data.tar.gz: 481a27e16ca6bdb276d459bf8ce40ede0383b4ef
3
+ metadata.gz: 0e635b5420b471f2183b97fb89b6a5085bacd7da
4
+ data.tar.gz: 1d5b344bbab66a83e193c33fde8da949107cac33
5
5
  SHA512:
6
- metadata.gz: dcf6dbf62b52bc6eac76e7c647ed279bd43beb294fcab4da81f4fafd016a824289e9d168b5ea54a566b5dd34184c17b65d54c40c72ba2f5e6007ce260b8500e4
7
- data.tar.gz: 0acfb9c667d2cebacce5755063fda1fda0cfd67da50e1b70366bd7a20b63c76fe7ba8e62c34b76d1e4aaf940203121e5989cc088aa06ff6c5415bfb710264752
6
+ metadata.gz: 2f86479acc7c2051ff5d3cc355f8eedc7fe63bb9e95284cd7ab5d8f279373100b1e5909f1eaca5b4023e4efb5a74a151216abe6d4065efbe776d52a9f8cf737b
7
+ data.tar.gz: aa5789266491eae3174386a3624272c712c1f7dc7d79215625632d594888b7ae496f7a290b1c2e4ef2af5c76eb96b84a68f33dcd34498e00d52f682faf6407f4
data/.travis.yml ADDED
@@ -0,0 +1,2 @@
1
+ language: ruby
2
+ rvm: 2.0.0
data/README.md CHANGED
@@ -1,14 +1,20 @@
1
1
  [![Bourbon Neat](http://neat.bourbon.io/images/logotype.svg)](http://thoughtbot.com/neat)
2
2
 
3
- [![Gem Version](https://badge.fury.io/rb/neat.png)](http://badge.fury.io/rb/neat) [![Code Climate](https://codeclimate.com/github/thoughtbot/neat.png)](https://codeclimate.com/github/thoughtbot/neat)
3
+ -
4
4
 
5
- **Neat** is an open source fluid grid framework built on top of [Bourbon](http://bourbon.io) with the aim of being easy enough to use out of the box and flexible enough to customize down the road.
5
+ [![Gem Version](http://img.shields.io/gem/v/neat.svg?style=flat)](https://rubygems.org/gems/neat) [![Travis](http://img.shields.io/travis/thoughtbot/neat.svg?style=flat)](https://travis-ci.org/thoughtbot/neat)
6
+ [![Code Climate](http://img.shields.io/codeclimate/github/thoughtbot/neat.svg?style=flat)](https://codeclimate.com/github/thoughtbot/neat)
7
+ [![IRC](http://img.shields.io/badge/freenode-%23bourbon--neat-ae3dd2.svg?style=flat)](#)
8
+ [![Stack Overflow](http://img.shields.io/badge/stack%20overflow-neat-ae3dd2.svg?style=flat)](http://stackoverflow.com/questions/tagged/neat)
6
9
 
10
+ Neat is an open source fluid grid framework built on top of [Bourbon](http://bourbon.io) with the aim of being easy enough to use out of the box and flexible enough to customize down the road.
11
+
12
+ :warning: Neat **1.6.0** requires Sass **3.3.x**. If you are using **libsass** or **sass-rails** use **1.5.1**.
7
13
 
8
14
  Requirements
9
15
  ===
10
- - Sass 3.2+
11
- - Bourbon 2.1+
16
+ - Sass 3.3+
17
+ - Bourbon 3.1+
12
18
 
13
19
  Install Instructions
14
20
  ===
@@ -33,8 +39,8 @@ neat install
33
39
  In your main stylesheet:
34
40
 
35
41
  ```sass
36
- @import "bourbon/bourbon";
37
- @import "neat/neat";
42
+ @import 'bourbon/bourbon';
43
+ @import 'neat/neat';
38
44
  ```
39
45
 
40
46
  To update Neat files, run:
@@ -69,8 +75,8 @@ bundle update sass
69
75
  Within your `application.css.scss` file place the following:
70
76
 
71
77
  ```sass
72
- @import "bourbon";
73
- @import "neat";
78
+ @import 'bourbon';
79
+ @import 'neat';
74
80
  ```
75
81
 
76
82
  Getting started
@@ -79,15 +85,15 @@ Getting started
79
85
  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:
80
86
 
81
87
  ```scss
82
- @import "bourbon/bourbon"; // or "bourbon" when in Rails
83
- @import "grid-settings";
84
- @import "neat/neat"; // or "neat" when in Rails
88
+ @import 'bourbon/bourbon'; // or 'bourbon' when in Rails
89
+ @import 'grid-settings';
90
+ @import 'neat/neat'; // or 'neat' when in Rails
85
91
  ```
86
92
 
87
93
  In your newly created `_grid-settings.scss`, import `neat-helpers` if you are planning to use `new-breakpoint()`, then define your new variables:
88
94
 
89
95
  ```scss
90
- @import "neat/neat-helpers"; // or "neat-helpers" when in Rails
96
+ @import 'neat/neat-helpers'; // or 'neat-helpers' when in Rails
91
97
 
92
98
  // Change the grid settings
93
99
  $column: 90px;
@@ -123,8 +129,10 @@ If the element's parent isn't the top-most container, you need to add the number
123
129
  ```scss
124
130
  div.container {
125
131
  @include outer-container;
132
+
126
133
  div.parent-element {
127
134
  @include span-columns(8);
135
+
128
136
  div.element {
129
137
  @include span-columns(6 of 8);
130
138
  }
@@ -168,15 +176,69 @@ Browser support
168
176
  - IE 9+ (Visual grid is IE10 only)
169
177
  - IE 8 with [selectivizr](http://selectivizr.com) (no `media()` support)
170
178
 
179
+ Frequently asked questions
180
+ ==========================
181
+
182
+ ##### How do I use `omega()` in a mobile-first workflow?
183
+
184
+ Using `omega()` with an `nth-child` pseudo selector in a mobile-first workflow
185
+ will cause the style to be applied to wider-viewport media queries as well. That
186
+ is the cascading nature of CSS.
187
+
188
+ One solution would be to provide an `omega-reset()` mixin that negates the
189
+ effect of `omega()` on that specific `nth-child` pseudo selector. While this is
190
+ often the most suggested solution, it is also a lazy hack that outputs ugly code
191
+ and can quickly get out of hand in complex layouts. As a general rule, having to
192
+ *undo* CSS styles is a sign of poor stylesheet architecture (More about
193
+ [CSS code smells](http://csswizardry.com/2012/11/code-smells-in-css/)).
194
+
195
+ The other, more elegant, solution is to use mutually exclusive media queries,
196
+ also referred to as [media-query
197
+ splitting](http://simurai.com/blog/2012/08/29/media-query-splitting/). This
198
+ would guarantee that `omega()` styles are only applied where desired.
199
+
200
+ ```scss
201
+ $first-breakpoint-value: 400px;
202
+ $second-breakpoint-value: 700px;
203
+ $medium-viewport: new-breakpoint(min-width em($first-breakpoint-value) max-width
204
+ em($second-breakpoint-value));
205
+ $large-viewport: new-breakpoint(min-width em($second-breakpoint-value + 1));
206
+
207
+ .element {
208
+ @include media($medium-viewport) {
209
+ @include span-columns(6);
210
+ @include omega(2n);
211
+ }
212
+
213
+ @include media($large-viewport) {
214
+ @include span-columns(4);
215
+ @include omega(3n);
216
+ }
217
+ }
218
+ ```
219
+
220
+ If, for some reason, you still think that `omega-reset` is the only way you want to go,
221
+ check out Josh Fry's
222
+ [omega-reset](http://joshfry.me/notes/omega-reset-for-bourbon-neat/).
223
+
224
+ ##### Framework X has this feature that Neat seems to be missing. Can you add it?
225
+
226
+ Unless you [open a pull request](https://github.com/thoughtbot/neat/compare/), the answer is most likely going to be no. Neat is
227
+ lightweight and simple compared to other grid frameworks, and strives to
228
+ remain so. We have plans for adding new features in future versions of the
229
+ framework, but these will be most likely to support new ways of working with
230
+ layouts on the Web, not patches to existing ones.
231
+
171
232
  Links
172
233
  =====
173
234
 
174
235
  - Read the [online documentation](http://neat.bourbon.io/docs/).
175
236
  - Add the docset to [Dash](http://kapeli.com/dash) 1.8+ (Preferences **>** Downloads **>** + *Add Docset Feed* **>** `http://neat.bourbon.io/docset/Neat.xml`)
176
- - Ask questions on [Stack Overflow](http://stackoverflow.com/questions/tagged/neat+bourbon). Don't forget to tag them`bourbon` and `neat`.
237
+ - Ask questions on [Stack Overflow](http://stackoverflow.com/questions/tagged/neat). Don't forget to tag them `bourbon` and `neat`.
177
238
  - Suggest features or file bugs in [Issues](https://github.com/thoughtbot/neat/issues).
178
239
  - Read the [contribution guidelines](https://github.com/thoughtbot/neat/blob/master/CONTRIBUTING.md).
179
240
  - Say hi to [@kaishin](https://twitter.com/kaishin) and [@kylefiedler](https://twitter.com/kylefiedler).
241
+ - Join `#bourbon-neat` on `irc.freenode.net`.
180
242
 
181
243
 
182
244
  Credits & License
@@ -5,3 +5,4 @@
5
5
  // Settings
6
6
  @import "settings/grid";
7
7
  @import "settings/visual-grid";
8
+ @import "settings/disable-warnings";
@@ -1,14 +1,14 @@
1
- // Bourbon Neat 1.6.0.pre
2
- // MIT Licensed
3
- // Copyright (c) 2012-2013 thoughtbot, inc.
1
+ /* Neat 1.7.0.pre
2
+ * http://neat.bourbon.io
3
+ * Copyright 2012–2014 thoughtbot, inc.
4
+ * MIT License */
4
5
 
5
6
  // Helpers
6
7
  @import "neat-helpers";
7
8
 
8
9
  // Grid
9
10
  @import "grid/private";
10
- @import "grid/reset";
11
- @import "grid/grid";
11
+ @import "grid/box-sizing";
12
12
  @import "grid/omega";
13
13
  @import "grid/outer-container";
14
14
  @import "grid/span-columns";
@@ -19,3 +19,5 @@
19
19
  @import "grid/media";
20
20
  @import "grid/to-deprecate";
21
21
  @import "grid/visual-grid";
22
+ @import "grid/display";
23
+ @import "grid/direction";
@@ -1,30 +1,19 @@
1
1
  // Checks if a number is even
2
2
  @function is-even($int) {
3
- @if $int%2 == 0 {
4
- @return true;
5
- }
6
-
7
- @return false;
3
+ @return $int % 2 == 0
8
4
  }
9
5
 
10
6
  // Checks if an element belongs to a list
11
7
  @function belongs-to($tested-item, $list) {
12
- @each $item in $list {
13
- @if $item == $tested-item {
14
- @return true;
15
- }
16
- }
17
-
18
- @return false;
8
+ @return index($list, $tested-item) != false;
19
9
  }
20
10
 
21
11
  // Contains display value
22
12
  @function contains-display-value($query) {
23
- @if belongs-to(table, $query) or belongs-to(block, $query) or belongs-to(inline-block, $query) or belongs-to(inline, $query) {
24
- @return true;
25
- }
26
-
27
- @return false;
13
+ @return belongs-to(table, $query)
14
+ or belongs-to(block, $query)
15
+ or belongs-to(inline-block, $query)
16
+ or belongs-to(inline, $query);
28
17
  }
29
18
 
30
19
  // Parses the first argument of span-columns()
@@ -92,7 +81,7 @@
92
81
  // Layout direction
93
82
  @function get-direction($layout, $default) {
94
83
  $direction: nil;
95
-
84
+
96
85
  @if $layout == LTR or $layout == RTL {
97
86
  $direction: direction-from-layout($layout);
98
87
  } @else {
@@ -0,0 +1,11 @@
1
+ @if $border-box-sizing == true {
2
+ html { // http://bit.ly/1qk2tVR
3
+ @include box-sizing(border-box);
4
+ }
5
+
6
+ * {
7
+ &, &:before, &:after {
8
+ @include box-sizing(inherit);
9
+ }
10
+ }
11
+ }
@@ -0,0 +1,33 @@
1
+ /**
2
+ * Changes the direction property used by other mixins called in the code block argument.
3
+ *
4
+ * @param {String} $direction (left-to-right) - Layout direction to be used within the block. Can be `left-to-right` or `right-to-left`.
5
+ *
6
+ * @example scss
7
+ * @include direction(right-to-left) {
8
+ * .right-to-left-block {
9
+ * @include span-columns(6);
10
+ * }
11
+ * }
12
+ *
13
+ * @example css
14
+ * // CSS
15
+ * .right-to-left-block {
16
+ * float: right;
17
+ * ...
18
+ * }
19
+ */
20
+
21
+ @mixin direction($direction: left-to-right) {
22
+ $scope-direction: $layout-direction;
23
+
24
+ @if $direction == left-to-right {
25
+ $layout-direction: LTR !global;
26
+ } @else if $direction == right-to-left {
27
+ $layout-direction: RTL !global;
28
+ }
29
+
30
+ @content;
31
+
32
+ $layout-direction: $scope-direction !global;
33
+ }
@@ -0,0 +1,28 @@
1
+ /**
2
+ * Changes the display property used by other mixins called in the code block argument.
3
+ *
4
+ * @param {String} $display (block) - Display value to be used within the block. Can be `table` or `block`.
5
+ *
6
+ * @example scss
7
+ * @include display(table) {
8
+ * .display-table {
9
+ * @include span-columns(6);
10
+ * }
11
+ * }
12
+ *
13
+ * @example css
14
+ * // CSS
15
+ * .display-table {
16
+ * display: table-cell;
17
+ * ...
18
+ * }
19
+ */
20
+
21
+ @mixin display($display: block) {
22
+ $scope-display: $container-display-table;
23
+ $container-display-table: if($display == table, true, false) !global;
24
+
25
+ @content;
26
+
27
+ $container-display-table: $scope-display !global;
28
+ }
@@ -4,13 +4,13 @@
4
4
  $auto: if(belongs-to(auto, $query), true, false);
5
5
 
6
6
  @if $direction != default {
7
- @warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead."
7
+ @include -neat-warn("The omega mixin will no longer take a $direction argument. To change the layout direction, use the direction(){...} mixin.");
8
8
  } @else {
9
9
  $direction: get-direction($layout-direction, $default-layout-direction);
10
10
  }
11
11
 
12
12
  @if $table {
13
- @warn "The omega mixin no longer removes padding in table layouts."
13
+ @include -neat-warn("The omega mixin no longer removes padding in table layouts.");
14
14
  }
15
15
 
16
16
  @if length($query) == 1 {
@@ -42,7 +42,7 @@
42
42
  }
43
43
 
44
44
  @else {
45
- @warn "Too many arguments passed to the omega() mixin."
45
+ @include -neat-warn("Too many arguments passed to the omega() mixin.");
46
46
  }
47
47
  }
48
48
 
@@ -1,6 +1,36 @@
1
- @mixin outer-container {
1
+ /**
2
+ * Makes an element a outer container by centring it in the viewport, clearing its floats, and setting its `max-width`.
3
+ *
4
+ * Although optional, using `outer-container` is recommended. The mixin can be called on more than one element per page, as long as they are not nested.
5
+ *
6
+ * @param {Number} $local-max-width ($max-width) - Max width to be applied to the element. Can be a percentage or a measure.
7
+ *
8
+ * @example scss
9
+ * .element {
10
+ * @include outer-container(100%);
11
+ * }
12
+ *
13
+ * @example css
14
+ * .element {
15
+ * *zoom: 1;
16
+ * max-width: 100%;
17
+ * margin-left: auto;
18
+ * margin-right: auto;
19
+ * }
20
+ *
21
+ * .element:before, .element:after {
22
+ * content: " ";
23
+ * display: table;
24
+ * }
25
+ *
26
+ * .element:after {
27
+ * clear: both;
28
+ * }
29
+ */
30
+
31
+ @mixin outer-container($local-max-width: $max-width) {
2
32
  @include clearfix;
3
- max-width: $max-width;
33
+ max-width: $local-max-width;
4
34
  margin: {
5
35
  left: auto;
6
36
  right: auto;
@@ -1,7 +1,14 @@
1
- @mixin row($display: block, $direction: $default-layout-direction) {
2
- @include clearfix;
1
+ @mixin row($display: default, $direction: $default-layout-direction) {
2
+ @if $direction != $default-layout-direction {
3
+ @include -neat-warn("The $direction argument will be deprecated in future versions in favor of the direction(){...} mixin.");
4
+ }
5
+
3
6
  $layout-direction: $direction !global;
4
7
 
8
+ @if $display != default {
9
+ @include -neat-warn("The $display argument will be deprecated in future versions in favor of the display(){...} mixin.");
10
+ }
11
+
5
12
  @if $display == table {
6
13
  display: table;
7
14
  @include fill-parent;
@@ -10,6 +17,7 @@
10
17
  }
11
18
 
12
19
  @else {
20
+ @include clearfix;
13
21
  display: block;
14
22
  $container-display-table: false !global;
15
23
  }
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  @if $display == collapse {
24
- @warn "The 'collapse' argument will be deprecated. Use 'block-collapse' instead."
24
+ @include -neat-warn("The 'collapse' argument will be deprecated. Use 'block-collapse' instead.");
25
25
  }
26
26
 
27
27
  @if $display == collapse or $display == block-collapse {
@@ -1,5 +1,5 @@
1
1
  @mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
2
- @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.";
2
+ @include -neat-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.");
3
3
 
4
4
  @if length($query) == 1 {
5
5
  @media screen and ($default-feature: nth($query, 1)) {
@@ -47,11 +47,26 @@
47
47
  }
48
48
 
49
49
  @else {
50
- @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
50
+ @include -neat-warn("Wrong number of arguments for breakpoint(). Read the documentation for more details.");
51
51
  }
52
52
  }
53
53
 
54
54
  @mixin nth-omega($nth, $display: block, $direction: default) {
55
- @warn "The nth-omega() mixin is deprecated. Please use omega() instead.";
55
+ @include -neat-warn("The nth-omega() mixin is deprecated. Please use omega() instead.");
56
56
  @include omega($nth $display, $direction);
57
57
  }
58
+
59
+ @mixin reset-display {
60
+ $container-display-table: false !global;
61
+ @include -neat-warn("Resetting $display will be deprecated in future versions in favor of the display(){...} mixin.");
62
+ }
63
+
64
+ @mixin reset-layout-direction {
65
+ $layout-direction: $default-layout-direction !global;
66
+ @include -neat-warn("Resetting $direction will be deprecated in future versions in favor of the direction(){...} mixin.");
67
+ }
68
+
69
+ @mixin reset-all {
70
+ @include reset-display;
71
+ @include reset-layout-direction;
72
+ }
@@ -1,10 +1,9 @@
1
1
  @mixin grid-column-gradient($values...) {
2
- background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values);
3
- background-image: -webkit-linear-gradient(left, $values);
4
- background-image: -moz-linear-gradient(left, $values);
5
- background-image: -ms-linear-gradient(left, $values);
6
- background-image: -o-linear-gradient(left, $values);
7
- background-image: unquote("linear-gradient(left, #{$values})");
2
+ background-image: -webkit-linear-gradient(left, $values);
3
+ background-image: -moz-linear-gradient(left, $values);
4
+ background-image: -ms-linear-gradient(left, $values);
5
+ background-image: -o-linear-gradient(left, $values);
6
+ background-image: unquote("linear-gradient(to left, #{$values})");
8
7
  }
9
8
 
10
9
  @if $visual-grid == true or $visual-grid == yes {
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Disable all deprecation warnings. Defaults to `false`. Set with a `!global` flag.
3
+ *
4
+ * @type Bool
5
+ */
6
+
7
+ $disable-warnings: false !default;
8
+
9
+ @mixin -neat-warn($message) {
10
+ @if $disable-warnings == false {
11
+ @warn "#{$message}";
12
+ }
13
+ }
data/bower.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "neat",
3
- "version": "1.6.0",
3
+ "version": "1.7.0.pre",
4
4
  "homepage": "http://neat.bourbon.io/",
5
5
  "main": "app/assets/stylesheets/_neat.scss",
6
6
  "ignore": [
@@ -15,6 +15,6 @@
15
15
  "NEWS.md"
16
16
  ],
17
17
  "dependencies": {
18
- "bourbon": ">=3.1"
18
+ "bourbon": ">=4.0"
19
19
  }
20
20
  }
data/lib/neat/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Neat
2
- VERSION = '1.6.0'
2
+ VERSION = '1.7.0.pre'
3
3
  end
data/neat.gemspec CHANGED
@@ -23,7 +23,7 @@ Neat is an open source grid framework built on top of Bourbon with the aim of be
23
23
  s.require_paths = ['lib']
24
24
 
25
25
  s.add_dependency('sass', '>= 3.3')
26
- s.add_dependency('bourbon', '>= 3.1')
26
+ s.add_dependency('bourbon', '>= 4.0')
27
27
 
28
28
  s.add_development_dependency('aruba', '~> 0.5.0')
29
29
  s.add_development_dependency('rake')
@@ -12,4 +12,10 @@ describe "@include outer-container()" do
12
12
  it "sets max-width" do
13
13
  expect('.container-default').to have_rule('max-width: 960px')
14
14
  end
15
+
16
+ context "with max-width argument: 100%" do
17
+ it "sets max-width to 100%" do
18
+ expect('.container-custom-width').to have_rule('max-width: 100%')
19
+ end
20
+ end
15
21
  end
@@ -0,0 +1,15 @@
1
+ require 'spec_helper'
2
+
3
+ describe "By default" do
4
+ before(:all) do
5
+ ParserSupport.parse_file("default")
6
+ end
7
+
8
+ it "sets sizing on the html element to 'border-box'" do
9
+ expect('html').to have_rule('box-sizing: border-box')
10
+ end
11
+
12
+ it "sets sizing on the global selector to 'inherit'" do
13
+ expect('*:after').to have_rule('box-sizing: inherit')
14
+ end
15
+ end
@@ -0,0 +1,19 @@
1
+ require 'spec_helper'
2
+
3
+ describe "@include direction() {...}" do
4
+ before(:all) do
5
+ ParserSupport.parse_file("direction")
6
+ end
7
+
8
+ context "with no argument" do
9
+ it "uses default direction setting" do
10
+ expect('.default-block').to have_rule('float: left')
11
+ end
12
+ end
13
+
14
+ context "whith argument (right-to-left)" do
15
+ it "changes direction setting inside the block" do
16
+ expect('.right-to-left-block').to have_rule('float: right')
17
+ end
18
+ end
19
+ end
@@ -0,0 +1,19 @@
1
+ require 'spec_helper'
2
+
3
+ describe "@include display() {...}" do
4
+ before(:all) do
5
+ ParserSupport.parse_file("display")
6
+ end
7
+
8
+ context "with argument (table)" do
9
+ it "changes display value to table" do
10
+ expect('.display-table-block').to have_rule('display: table-cell')
11
+ end
12
+ end
13
+
14
+ context "whith nested call and argument (block)" do
15
+ it "changes display value to block" do
16
+ expect('.display-nested-block').to have_rule('display: block')
17
+ end
18
+ end
19
+ end
@@ -1,6 +1,6 @@
1
1
  require 'spec_helper'
2
2
 
3
- describe "@include media()" do
3
+ describe "@include media() {...}" do
4
4
  before(:all) do
5
5
  ParserSupport.parse_file("media")
6
6
  end
@@ -4,7 +4,7 @@ RSpec::Matchers.define :be_contained_in do |expected|
4
4
  @query.any?
5
5
  end
6
6
 
7
- failure_message_for_should do |actual|
7
+ failure_message do |actual|
8
8
  %{expected selector #{actual} to be contained in #{expected}}
9
9
  end
10
10
  end
@@ -4,7 +4,7 @@ RSpec::Matchers.define :have_rule do |expected|
4
4
  @rules.include? expected
5
5
  end
6
6
 
7
- failure_message_for_should do |actual|
7
+ failure_message do |actual|
8
8
  if @rules.empty?
9
9
  %{no CSS rules for selector #{actual} were found}
10
10
  else
@@ -9,7 +9,7 @@ RSpec::Matchers.define :have_value do |expected|
9
9
  end
10
10
  end
11
11
 
12
- failure_message_for_should do |actual|
12
+ failure_message do |actual|
13
13
  %{expected variable #{actual} to have value "#{expected}"}
14
14
  end
15
15
  end
data/test/_setup.scss CHANGED
@@ -1,4 +1,3 @@
1
- $border-box-sizing: false;
2
-
3
1
  @import 'bourbon/bourbon';
4
2
  @import 'app/assets/stylesheets/neat';
3
+ $disable-warnings: true !global;
data/test/default.scss ADDED
@@ -0,0 +1 @@
1
+ @import 'setup';
@@ -0,0 +1,13 @@
1
+ @import 'setup';
2
+
3
+ @include direction() {
4
+ .default-block {
5
+ @include span-columns(6);
6
+ }
7
+ }
8
+
9
+ @include direction(right-to-left) {
10
+ .right-to-left-block {
11
+ @include span-columns(6);
12
+ }
13
+ }
data/test/display.scss ADDED
@@ -0,0 +1,15 @@
1
+ @import 'setup';
2
+
3
+ @include display(table) {
4
+ .display-table-block {
5
+ @include span-columns(6);
6
+ }
7
+ }
8
+
9
+ @include display(table) {
10
+ @include display(block) {
11
+ .display-nested-block {
12
+ @include span-columns(6);
13
+ }
14
+ }
15
+ }
@@ -3,5 +3,9 @@
3
3
  $max-width: 960px;
4
4
 
5
5
  .container-default {
6
- @include outer-container;
6
+ @include outer-container();
7
+ }
8
+
9
+ .container-custom-width {
10
+ @include outer-container(100%);
7
11
  }
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: 1.6.0
4
+ version: 1.7.0.pre
5
5
  platform: ruby
6
6
  authors:
7
7
  - Kyle Fiedler
@@ -10,7 +10,7 @@ authors:
10
10
  autorequire:
11
11
  bindir: bin
12
12
  cert_chain: []
13
- date: 2014-03-28 00:00:00.000000000 Z
13
+ date: 2014-08-01 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: sass
@@ -32,14 +32,14 @@ dependencies:
32
32
  requirements:
33
33
  - - ">="
34
34
  - !ruby/object:Gem::Version
35
- version: '3.1'
35
+ version: '4.0'
36
36
  type: :runtime
37
37
  prerelease: false
38
38
  version_requirements: !ruby/object:Gem::Requirement
39
39
  requirements:
40
40
  - - ">="
41
41
  - !ruby/object:Gem::Version
42
- version: '3.1'
42
+ version: '4.0'
43
43
  - !ruby/object:Gem::Dependency
44
44
  name: aruba
45
45
  requirement: !ruby/object:Gem::Requirement
@@ -149,6 +149,7 @@ extra_rdoc_files: []
149
149
  files:
150
150
  - ".gitignore"
151
151
  - ".rspec"
152
+ - ".travis.yml"
152
153
  - CONTRIBUTING.md
153
154
  - Gemfile
154
155
  - LICENSE
@@ -159,19 +160,21 @@ files:
159
160
  - app/assets/stylesheets/_neat.scss
160
161
  - app/assets/stylesheets/functions/_new-breakpoint.scss
161
162
  - app/assets/stylesheets/functions/_private.scss
163
+ - app/assets/stylesheets/grid/_box-sizing.scss
164
+ - app/assets/stylesheets/grid/_direction.scss
165
+ - app/assets/stylesheets/grid/_display.scss
162
166
  - app/assets/stylesheets/grid/_fill-parent.scss
163
- - app/assets/stylesheets/grid/_grid.scss
164
167
  - app/assets/stylesheets/grid/_media.scss
165
168
  - app/assets/stylesheets/grid/_omega.scss
166
169
  - app/assets/stylesheets/grid/_outer-container.scss
167
170
  - app/assets/stylesheets/grid/_pad.scss
168
171
  - app/assets/stylesheets/grid/_private.scss
169
- - app/assets/stylesheets/grid/_reset.scss
170
172
  - app/assets/stylesheets/grid/_row.scss
171
173
  - app/assets/stylesheets/grid/_shift.scss
172
174
  - app/assets/stylesheets/grid/_span-columns.scss
173
175
  - app/assets/stylesheets/grid/_to-deprecate.scss
174
176
  - app/assets/stylesheets/grid/_visual-grid.scss
177
+ - app/assets/stylesheets/settings/_disable-warnings.scss
175
178
  - app/assets/stylesheets/settings/_grid.scss
176
179
  - app/assets/stylesheets/settings/_visual-grid.scss
177
180
  - bin/neat
@@ -184,6 +187,9 @@ files:
184
187
  - neat.gemspec
185
188
  - spec/neat/columns_spec.rb
186
189
  - spec/neat/container_spec.rb
190
+ - spec/neat/default_spec.rb
191
+ - spec/neat/direction_spec.rb
192
+ - spec/neat/display_spec.rb
187
193
  - spec/neat/media_spec.rb
188
194
  - spec/neat/new_breakpoint_spec.rb
189
195
  - spec/neat/omega_spec.rb
@@ -198,6 +204,9 @@ files:
198
204
  - spec/support/parser_support.rb
199
205
  - spec/support/sass_support.rb
200
206
  - test/_setup.scss
207
+ - test/default.scss
208
+ - test/direction.scss
209
+ - test/display.scss
201
210
  - test/media.scss
202
211
  - test/new-breakpoint.scss
203
212
  - test/omega.scss
@@ -221,18 +230,21 @@ required_ruby_version: !ruby/object:Gem::Requirement
221
230
  version: '0'
222
231
  required_rubygems_version: !ruby/object:Gem::Requirement
223
232
  requirements:
224
- - - ">="
233
+ - - ">"
225
234
  - !ruby/object:Gem::Version
226
- version: '0'
235
+ version: 1.3.1
227
236
  requirements: []
228
237
  rubyforge_project: neat
229
- rubygems_version: 2.1.11
238
+ rubygems_version: 2.2.2
230
239
  signing_key:
231
240
  specification_version: 4
232
241
  summary: A fluid grid framework on top of Bourbon
233
242
  test_files:
234
243
  - spec/neat/columns_spec.rb
235
244
  - spec/neat/container_spec.rb
245
+ - spec/neat/default_spec.rb
246
+ - spec/neat/direction_spec.rb
247
+ - spec/neat/display_spec.rb
236
248
  - spec/neat/media_spec.rb
237
249
  - spec/neat/new_breakpoint_spec.rb
238
250
  - spec/neat/omega_spec.rb
@@ -247,6 +259,9 @@ test_files:
247
259
  - spec/support/parser_support.rb
248
260
  - spec/support/sass_support.rb
249
261
  - test/_setup.scss
262
+ - test/default.scss
263
+ - test/direction.scss
264
+ - test/display.scss
250
265
  - test/media.scss
251
266
  - test/new-breakpoint.scss
252
267
  - test/omega.scss
@@ -1,5 +0,0 @@
1
- @if $border-box-sizing == true {
2
- * {
3
- @include box-sizing(border-box);
4
- }
5
- }
@@ -1,12 +0,0 @@
1
- @mixin reset-display {
2
- $container-display-table: false !global;
3
- }
4
-
5
- @mixin reset-layout-direction {
6
- $layout-direction: $default-layout-direction !global;
7
- }
8
-
9
- @mixin reset-all {
10
- @include reset-display;
11
- @include reset-layout-direction;
12
- }