neat 1.0.0.pre → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
data/LICENSE CHANGED
@@ -2,7 +2,7 @@ LICENSE
2
2
 
3
3
  The MIT License
4
4
 
5
- Copyright (c) 2011 thoughtbot, inc.
5
+ Copyright (c) 2012 thoughtbot, inc.
6
6
 
7
7
  Permission is hereby granted, free of charge, to any person obtaining a copy
8
8
  of this software and associated documentation files (the "Software"), to deal
data/NEWS.md ADDED
@@ -0,0 +1,13 @@
1
+
2
+ 1.0.0 (2012-10-29)
3
+
4
+ * Add executable for non-Rails projects
5
+ * Add visual grid
6
+ * Add `media` and `new-breakpoint` mixins
7
+ * Add `_neat-helpers.scss` as a public interface for Neat
8
+ * Fix bug in the `shift()` mixin for nested columns
9
+ * Remove typography mixins and settings
10
+
11
+ 0.4.2 (2012-08-31)
12
+
13
+ * Initial release
data/README.md CHANGED
@@ -4,20 +4,67 @@
4
4
 
5
5
  Learn more about Neat and why we built it [here](http://thoughtbot.com/neat/).
6
6
 
7
+ Requirements
8
+ ===
9
+ - Sass 3.2+
10
+ - Bourbon 2.1+
7
11
 
8
- Getting started
12
+ Non-Rails projects
9
13
  ===
14
+ Install Neat:
10
15
 
11
- Requirements:
16
+ ```bash
17
+ gem install neat
18
+ ```
19
+ Then `cd` to your Sass directory and run:
12
20
 
13
- - Sass 3.2+
14
- - Bourbon 2.1+
21
+ ```bash
22
+ bourbon install #If not installed
23
+ neat install
24
+ ```
25
+
26
+ In your main stylesheet:
27
+
28
+ ```sass
29
+ @import "bourbon/bourbon";
30
+ @import "neat/neat";
31
+ ```
32
+
33
+ To update Neat, run:
34
+
35
+ ```bash
36
+ neat update
37
+ ```
38
+
39
+ and to remove it:
40
+
41
+ ```bash
42
+ neat remove
43
+ ```
44
+
45
+ Rails apps
46
+ ===
15
47
 
16
- Put the `/neat` folder in your Sass directory and import it right below Bourbon in your stylesheets:
48
+ In your Gemfile:
17
49
 
18
- @import "bourbon/bourbon";
19
- @import "neat/neat";
50
+ ```bash
51
+ gem 'neat'
52
+ ```
20
53
 
54
+ After running `bundle install` you will be able to use Bourbon and Neat together.
55
+
56
+ If you see this error `Bundler could not find compatible versions for gem "sass"` run:
57
+
58
+ ```bash
59
+ bundle update sass
60
+ ```
61
+
62
+ Within your `application.css.scss` file place the following:
63
+
64
+ ```sass
65
+ @import "bourbon";
66
+ @import "neat";
67
+ ```
21
68
 
22
69
  Using the grid
23
70
  ===
@@ -26,17 +73,20 @@ The default grid uses 12 columns, a setting that can be easily overridden as det
26
73
  ### Containers
27
74
  Include the `outer-container` mixin in the topmost container (to which the `max-width` setting will be applied):
28
75
 
29
- div.container {
30
- @include outer-container;
31
- }
32
-
76
+ ```scss
77
+ div.container {
78
+ @include outer-container;
79
+ }
80
+ ```
33
81
 
34
82
  You can include this mixin in more than one element in the same page.
35
83
 
36
84
  ### Columns
37
- Use the `span-columns` mixin to specify the number of columns an element should span:
85
+ Use the `span-columns` mixin to specify the number of columns an element should span:
38
86
 
39
- @include span-columns($span: $columns of $container-columns, $display: block)
87
+ ```scss
88
+ @include span-columns($span: $columns of $container-columns, $display: block)
89
+ ```
40
90
 
41
91
  * `columns` is the number of columns you wish this element to span.
42
92
  * `container-columns` (optional) is the number of columns the container spans, defaults to the total number of columns in the grid.
@@ -44,65 +94,73 @@ Use the `span-columns` mixin to specify the number of columns an element should
44
94
 
45
95
  eg. Element that spans across 6 columns (out of the default 12):
46
96
 
47
- div.element {
48
- @include span-columns(6);
49
- }
50
-
97
+ ```scss
98
+ div.element {
99
+ @include span-columns(6);
100
+ }
101
+ ```
51
102
 
52
103
  If the element's parent isn't the top-most container, you need to add the number of columns of the parent element to keep the right proportions:
53
104
 
54
- div.container {
55
- @include outer-container;
56
-
57
- div.parent-element {
58
- @include span-columns(8);
59
-
60
- div.element {
61
- @include span-columns(6 of 8);
62
- }
63
- }
105
+ ```scss
106
+ div.container {
107
+ @include outer-container;
108
+ div.parent-element {
109
+ @include span-columns(8);
110
+ div.element {
111
+ @include span-columns(6 of 8);
64
112
  }
113
+ }
114
+ }
115
+ ```
65
116
 
66
117
  To use a table-cell layout, add `table` as the `display` argument:
67
118
 
68
- @include span-columns(6 of 8, table)
69
-
119
+ ```scss
120
+ @include span-columns(6 of 8, table)
121
+ ```
70
122
 
71
123
  Likewise for inline-block:
72
124
 
73
- @include span-columns(6 of 8, inline-block)
125
+ ```scss
126
+ @include span-columns(6 of 8, inline-block)
127
+ ```
74
128
 
75
129
  The following syntaxes would also work:
76
130
 
77
- @include span-columns(6 / 8,inline-block);
78
- @include span-columns(6 8,inline-block);
79
-
131
+ ```scss
132
+ @include span-columns(6 / 8,inline-block);
133
+ @include span-columns(6 8,inline-block);
134
+ ```
80
135
 
81
136
  ### Rows
82
137
  In order to clear floated or table-cell columns, use the `row` mixin:
83
138
 
84
- @include row($display);
139
+ ```scss
140
+ @include row($display);
141
+ ```
85
142
 
86
143
  * `display` takes either `block`—the default—or `table`.
87
144
 
88
-
89
145
  ### Shifting columns
90
146
 
91
-
92
147
  To move an element to the left or right by a number of columns, use the `shift` mixin:
93
148
 
94
- @include shift(2); // Move 2 columns to the right
95
- @include shift(-3); // Move 3 columns to the left
149
+ ```scss
150
+ @include shift(2); // Move 2 columns to the right
151
+ @include shift(-3); // Move 3 columns to the left
152
+ ```
96
153
 
97
154
  Please note that the `shift()` mixin is incompatible with display `table`.
98
155
 
99
-
100
156
  ### Padding columns
101
157
 
102
158
  To add padding around the entire column use `pad()`. By default it adds the same value as the grid's gutter but can take any unit value.
103
159
 
104
- @include pad; // Adds a padding equivalent to the grid's gutter
105
- @include pad(20px); // Adds a padding of 20px
160
+ ```scss
161
+ @include pad; // Adds a padding equivalent to the grid's gutter
162
+ @include pad(20px); // Adds a padding of 20px
163
+ ```
106
164
 
107
165
  The `pad()` mixin works particularly well with `span-columns(x, table)` by adding the necessary padding without breaking your table-based grid layout.
108
166
 
@@ -110,170 +168,199 @@ The `pad()` mixin works particularly well with `span-columns(x, table)` by addin
110
168
 
111
169
  Neat automatically removes the last columns's gutter. However, if you are queueing more than one row of columns within the same parent element, you need to specify which columns are considered last in their row to preserve the layout. Use the `omega` mixin to achieve this:
112
170
 
113
- @include omega; // Removes right gutter
171
+ ```scss
172
+ @include omega; // Removes right gutter
173
+ ```
114
174
 
115
175
  You can also use `nth-omega` to remove the gutter of a specific column or set of columns:
116
176
 
117
- @include nth-omega(nth-child);
177
+ ```scss
178
+ @include nth-omega(nth-child);
179
+ ```
118
180
 
119
181
  * `nth-child` takes any valid :nth-child value. See [https://developer.mozilla.org/en-US/docs/CSS/:nth-child](Mozilla's :nth-child documentation)
120
182
 
121
183
  eg. Remove every 3rd gutter using:
122
184
 
123
- @include nth-omega(3n);
185
+ ```scss
186
+ @include nth-omega(3n);
187
+ ```
124
188
 
125
189
  ### Filling parent elements
126
190
 
127
191
  This makes sure that the child fills 100% of its parent:
128
192
 
129
- @include fill-parent;
193
+ ```scss
194
+ @include fill-parent;
195
+ ```
130
196
 
131
- ### Breakpoints
197
+ ### Media Queries
132
198
 
133
- The `breakpoint()` mixin allows you to use media-queries to modify both the grid and the layout. It takes two arguments:
199
+ The `media()` mixin allows you to use media-queries to modify both the grid and the layout. It takes two arguments:
134
200
 
135
- @include breakpoint($query:$feature $value, $total-columns: $grid-columns)
201
+ ```scss
202
+ @include media($query, $total-columns: $grid-columns)
203
+ ```
136
204
 
137
205
  * `query` contains the media feature (min-width, max-width, etc.) and the value (481px, 30em, etc.). If you specify the value only, `min-width` will be used by default (ideal if you follow a mobile-first approach). You can also change the default feature in the settings (see section below).
138
206
  * `total-columns` (optional) is the total number of columns to be used inside this media query. Changing the total number of columns will change the width, padding and margin percentages obtained using the `span-column` mixin.
139
207
 
140
208
  ##### Example 1
141
209
 
142
- .my-class {
143
- @include breakpoint(481px) {
144
- font-size: 1.2em;
145
- }
146
- }
210
+ ```scss
211
+ .my-class {
212
+ @include media(481px) {
213
+ font-size: 1.2em;
214
+ }
215
+ }
147
216
 
148
- // Compiled CSS
217
+ // Compiled CSS
149
218
 
150
- @media screen and (min-width: 481px) {
151
- .my-class {
152
- font-size: 1.2em;
153
- }
154
- }
219
+ @media screen and (min-width: 481px) {
220
+ .my-class {
221
+ font-size: 1.2em;
222
+ }
223
+ }
224
+ ```
155
225
 
156
226
  ##### Example 2
157
227
 
158
- .my-class {
159
- @include breakpoint(max-width 769px) {
160
- float: none;
161
- }
162
- }
228
+ ```scss
229
+ .my-class {
230
+ @include media(max-width 769px) {
231
+ float: none;
232
+ }
233
+ }
163
234
 
164
- // Compiled CSS
235
+ // Compiled CSS
165
236
 
166
- @media screen and (max-width: 769px) {
167
- .my-class {
168
- float: none;
169
- }
170
- }
237
+ @media screen and (max-width: 769px) {
238
+ .my-class {
239
+ float: none;
240
+ }
241
+ }
242
+ ```
171
243
 
172
244
  ##### Example 3
173
245
 
174
- .my-class {
175
- @include breakpoint(max-width 769px) {
176
- @include span-columns(6);
177
- }
178
- }
179
-
180
- // Compiled CSS
181
-
182
- @media screen and (max-width: 769px) {
183
- .my-class {
184
- display: block;
185
- float: left;
186
- margin-right: 2.35765%;
187
- width: 48.82117%; // That's 6 columns of the total 12
188
- }
189
-
190
- .my-class:last-child {
191
- margin-right: 0;
192
- }
193
- }
246
+ ```scss
247
+ .my-class {
248
+ @include media(max-width 769px) {
249
+ @include span-columns(6);
250
+ }
251
+ }
252
+
253
+ // Compiled CSS
254
+
255
+ @media screen and (max-width: 769px) {
256
+ .my-class {
257
+ display: block;
258
+ float: left;
259
+ margin-right: 2.35765%;
260
+ width: 48.82117%; // That's 6 columns of the total 12
261
+ }
262
+
263
+ .my-class:last-child {
264
+ margin-right: 0;
265
+ }
266
+ }
267
+ ```
194
268
 
195
269
  ##### Example 4
196
270
 
197
- .my-class {
198
- @include breakpoint(max-width 769px, 6) { // Use a 6 column grid (instead of the default 12)
199
- @include span-columns(6);
200
- }
201
- }
202
-
203
- // Compiled CSS
204
-
205
- @media screen and (max-width: 769px) {
206
- .my-class {
207
- display: block;
208
- float: left;
209
- margin-right: 4.82916%;
210
- width: 100%; // That's 6 columns of the total 6 specified for this media query
211
- }
212
- .my-class:last-child {
213
- margin-right: 0;
214
- }
215
- }
271
+ ```scss
272
+ .my-class {
273
+ @include media(max-width 769px, 6) { // Use a 6 column grid (instead of the default 12)
274
+ @include span-columns(6);
275
+ }
276
+ }
277
+
278
+ // Compiled CSS
279
+
280
+ @media screen and (max-width: 769px) {
281
+ .my-class {
282
+ display: block;
283
+ float: left;
284
+ margin-right: 4.82916%;
285
+ width: 100%; // That's 6 columns of the total 6 specified for this media query
286
+ }
287
+ .my-class:last-child {
288
+ margin-right: 0;
289
+ }
290
+ }
291
+ ```
216
292
 
217
293
  ##### Example 5
218
294
 
219
- .my-class {
220
- @include breakpoint(min-width 320px max-width 480px) {
221
- font-size: 1.2em;
222
- }
223
- }
295
+ ```scss
296
+ .my-class {
297
+ @include media(min-width 320px max-width 480px) {
298
+ font-size: 1.2em;
299
+ }
300
+ }
224
301
 
225
- // Compiled CSS
302
+ // Compiled CSS
226
303
 
227
- @media screen and (min-width: 320px) and (max-width: 480px) {
228
- .my-class {
229
- font-size: 1.2em;
230
- }
231
- }
304
+ @media screen and (min-width: 320px) and (max-width: 480px) {
305
+ .my-class {
306
+ font-size: 1.2em;
307
+ }
308
+ }
309
+ ```
232
310
 
233
311
  You can also use two ```@media``` features at the same time.
234
312
 
235
- Here is a summary of possible argument combinations:
236
-
237
- // YAY
238
- @include breakpoint(480px);
239
- @include breakpoint(max-width 480px);
240
- @include breakpoint(min-width 320px max-width 480px);
241
- @include breakpoint(480px, 4);
242
- @include breakpoint(max-width 480px, 4);
243
- @include breakpoint(min-width 320px max-width 480px, 4);
244
- @include breakpoint(max-width 480px 4); // Shorthand syntax
245
- @include breakpoint(min-width 320px max-width 480px 4); // Shorthand syntax
246
-
247
- // NAY
248
- @include breakpoint(480px 4);
249
- @include breakpoint(max-width 4);
250
- @include breakpoint(max-width, 4);
251
- @include breakpoint(320px max-width 480px);
252
-
253
- For convenience, you can create a new media context (breakpoint/column-count) with the help of the`new-breakpoint` mixin and use it throughout your code:
254
-
255
- $mobile: new-breakpoint(max-width 480px 4); // Use a 4 column grid in mobile devices
256
-
257
- .my-class {
258
- @include breakpoint($mobile) {
259
- @include span-columns(2);
260
- }
261
- }
262
-
263
- // Compiled CSS
264
-
265
- @media screen and (max-width: 480px) {
266
- .my-class {
267
- display: block;
268
- float: left;
269
- margin-right: 7.42297%;
270
- width: 46.28851%; // 2 columns of the total 4 in this media context
271
- }
272
- .my-class:last-child {
273
- margin-right: 0;
274
- }
275
- }
276
- The `new-breakpoint` takes the same arguments as `breakpoint`.
313
+ Here is a summary of possible argument combinations:
314
+
315
+ ```scss
316
+ // YAY
317
+ @include media(480px);
318
+ @include media(max-width 480px);
319
+ @include media(min-width 320px max-width 480px);
320
+ @include media(480px, 4);
321
+ @include media(max-width 480px, 4);
322
+ @include media(min-width 320px max-width 480px, 4);
323
+ @include media(max-width 480px 4); // Shorthand syntax
324
+ @include media(min-width 320px max-width 480px 4); // Shorthand syntax
325
+
326
+ // NAY
327
+ @include media(480px 4);
328
+ @include media(max-width 4);
329
+ @include media(max-width, 4);
330
+ @include media(320px max-width 480px);
331
+ ```
332
+
333
+ For convenience, you can create a new media context (breakpoint/column-count) with the help of the `new-breakpoint` mixin and use it throughout your code:
334
+
335
+ ```scss
336
+ $mobile: new-breakpoint(max-width 480px 4); // Use a 4 column grid in mobile devices
337
+
338
+ .my-class {
339
+ @include media($mobile) {
340
+ @include span-columns(2);
341
+ }
342
+ }
343
+
344
+ // Compiled CSS
345
+
346
+ @media screen and (max-width: 480px) {
347
+ .my-class {
348
+ display: block;
349
+ float: left;
350
+ margin-right: 7.42297%;
351
+ width: 46.28851%; // 2 columns of the total 4 in this media context
352
+ }
353
+ .my-class:last-child {
354
+ margin-right: 0;
355
+ }
356
+ }
357
+ ```
358
+
359
+ The `new-breakpoint` takes the same arguments as `media`.
360
+
361
+ ### Helpers
362
+
363
+ - The `em($pxval, $base: 16)` function takes a pixel value and returns its equivalent in *em* units. You can change the base pixel size in the second argument.
277
364
 
278
365
  ### Visual grid
279
366
 
@@ -283,12 +370,23 @@ The visual grid reflects the changes applied to the grid via the `new-breakpoint
283
370
 
284
371
  ### Changing the defaults
285
372
 
286
- All the default settings can be overridden in your site-wide `_variables.scss`. Make sure to import this file *before* Neat (failing to do so will cause Neat to use the default values):
373
+ All the default settings in Neat can be overridden in your stylesheets. The only thing you need to keep in mind is that these overrides should occur *before* importing Neat (failing to do so will cause the framework to use the default values):
374
+
375
+ ```scss
376
+ @import "bourbon"; // or "bourbon/bourbon" when not in Rails
377
+ @import "my-neat-overrides";
378
+ @import "neat"; // or "neat/neat" when not in Rails
379
+ ```
380
+ You need also to import `neat-helpers` (or `near/neat-helpers` in non-Rails projects) in your stylehseet (`_my-neat-overrides.scss` in the example above) if you want to use helper mixins and functions such as `new-breakpoint()` and `em()`:
381
+
382
+ ```scss
383
+ @import "neat-helpers"; // or "neat/neat-helpers" when not in Rails
384
+
385
+ $column: 90px;
386
+ $grid-columns: 10;
387
+ $mobile: new-breakpoint(max-width 480px 4); // Failing to import neat-helpers will cause this line to throw an error
388
+ ```
287
389
 
288
- @import "bourbon/bourbon";
289
- @import "variables";
290
- @import "neat/neat";
291
-
292
390
  Here is the list of the available settings:
293
391
 
294
392
  #### Grid settings
@@ -316,7 +414,7 @@ Here is the list of the available settings:
316
414
  - Chrome 4.0+
317
415
  - Opera 9.5+
318
416
  - IE 9+ (Visual grid is IE10 only)
319
- - IE 8 with [selectivizr](http://selectivizr.com) (no `breakpoint()` support)
417
+ - IE 8 with [selectivizr](http://selectivizr.com) (no `media()` support)
320
418
 
321
419
  Credits
322
420
  ===
@@ -329,5 +427,3 @@ License
329
427
  ===
330
428
 
331
429
  Bourbon Neat is Copyright © 2012 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.
332
-
333
-
@@ -0,0 +1,2 @@
1
+ @import "settings/default";
2
+ @import "functions/helpers";
@@ -2,16 +2,9 @@
2
2
  // MIT Licensed
3
3
  // Copyright (c) 2011 thoughtbot, inc.
4
4
 
5
- // Custom Functions
6
- @import "functions/px-to-em";
7
- @import "functions/grid";
5
+ @import "functions/private";
8
6
  @import "functions/helpers";
9
-
10
- // Default Settings
11
- @import "settings/grid";
12
- @import "settings/visual-grid";
13
-
14
- // The Grid
7
+ @import "settings/default";
15
8
  @import "grid/global-variables";
16
9
  @import "grid/grid";
17
10
  @import "grid/visual-grid";
@@ -1,34 +1,2 @@
1
- @function is-even($int) {
2
- @if $int%2 == 0 {
3
- @return true;
4
- }
5
-
6
- @return false;
7
- }
8
-
9
- @function belongs-to($tested-item, $list) {
10
- @each $item in $list {
11
- @if $item == $tested-item {
12
- @return true;
13
- }
14
- }
15
-
16
- @return false;
17
- }
18
-
19
- @function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
20
-
21
- @if length($query) == 1 {
22
- $query: $default-feature nth($query, 1) $total-columns;
23
- }
24
-
25
- @else if length($query) == 2 or length($query) == 4 {
26
- $query: append($query, $total-columns);
27
- }
28
-
29
- @if not belongs-to($query, $visual-grid-breakpoints) {
30
- $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma);
31
- }
32
-
33
- @return $query;
34
- }
1
+ @import "helpers/new-breakpoint";
2
+ @import "helpers/px-to-em";
@@ -0,0 +1,63 @@
1
+ // Checks if a number is even
2
+ @function is-even($int) {
3
+ @if $int%2 == 0 {
4
+ @return true;
5
+ }
6
+
7
+ @return false;
8
+ }
9
+
10
+ // Checks if an element belongs to a list
11
+ @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;
19
+ }
20
+
21
+ // Parses the first argument of span-columns()
22
+ @function container-span($span: $span) {
23
+ @if length($span) == 3 {
24
+ $container-columns: nth($span, 3);
25
+ @return $container-columns;
26
+ }
27
+
28
+ @else if length($span) == 2 {
29
+ $container-columns: nth($span, 2);
30
+ @return $container-columns;
31
+ }
32
+
33
+ @else {
34
+ @return $grid-columns;
35
+ }
36
+ }
37
+
38
+ // Generates a striped background
39
+ @function gradient-stops($grid-columns, $color: $visual-grid-color) {
40
+ $transparent: rgba(0,0,0,0);
41
+
42
+ $column-width: flex-grid(1, $grid-columns);
43
+ $gutter-width: flex-gutter($grid-columns);
44
+ $column-offset: $column-width;
45
+
46
+ $values: ($transparent 0, $color 0);
47
+
48
+ @for $i from 1 to $grid-columns*2 {
49
+ @if is-even($i) {
50
+ $values: append($values, $transparent $column-offset);
51
+ $values: append($values, $color $column-offset);
52
+ $column-offset: $column-offset + $column-width;
53
+ }
54
+
55
+ @else {
56
+ $values: append($values, $color $column-offset);
57
+ $values: append($values, $transparent $column-offset);
58
+ $column-offset: $column-offset + $gutter-width;
59
+ }
60
+ }
61
+
62
+ @return $values;
63
+ }
@@ -0,0 +1,18 @@
1
+ @import "../private";
2
+
3
+ @function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
4
+
5
+ @if length($query) == 1 {
6
+ $query: $default-feature nth($query, 1) $total-columns;
7
+ }
8
+
9
+ @else if length($query) == 2 or length($query) == 4 {
10
+ $query: append($query, $total-columns);
11
+ }
12
+
13
+ @if not belongs-to($query, $visual-grid-breakpoints) {
14
+ $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma);
15
+ }
16
+
17
+ @return $query;
18
+ }
@@ -30,6 +30,10 @@ $fg-max-width: $max-width;
30
30
  $parent-columns: $container-columns;
31
31
  }
32
32
 
33
+ @else {
34
+ $parent-columns: $grid-columns;
35
+ }
36
+
33
37
  @if $display == table {
34
38
  display: table-cell;
35
39
  padding-right: flex-gutter($container-columns);
@@ -119,8 +123,62 @@ $fg-max-width: $max-width;
119
123
  }
120
124
  }
121
125
 
122
- // Breakpoints
126
+ // Media Queries
127
+ @mixin media($query:$feature $value $columns, $total-columns: $grid-columns) {
128
+
129
+ @if length($query) == 1 {
130
+ @media screen and ($default-feature: nth($query, 1)) {
131
+ $default-grid-columns: $grid-columns;
132
+ $grid-columns: $total-columns;
133
+ @content;
134
+ $grid-columns: $default-grid-columns;
135
+ }
136
+ }
137
+
138
+ @else if length($query) == 2 {
139
+ @media screen and (nth($query, 1): nth($query, 2)) {
140
+ $default-grid-columns: $grid-columns;
141
+ $grid-columns: $total-columns;
142
+ @content;
143
+ $grid-columns: $default-grid-columns;
144
+ }
145
+ }
146
+
147
+ @else if length($query) == 3 {
148
+ @media screen and (nth($query, 1): nth($query, 2)) {
149
+ $default-grid-columns: $grid-columns;
150
+ $grid-columns: nth($query, 3);
151
+ @content;
152
+ $grid-columns: $default-grid-columns;
153
+ }
154
+ }
155
+
156
+ @else if length($query) == 4 {
157
+ @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
158
+ $default-grid-columns: $grid-columns;
159
+ $grid-columns: $total-columns;
160
+ @content;
161
+ $grid-columns: $default-grid-columns;
162
+ }
163
+ }
164
+
165
+ @else if length($query) == 5 {
166
+ @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
167
+ $default-grid-columns: $grid-columns;
168
+ $grid-columns: nth($query, 5);
169
+ @content;
170
+ $grid-columns: $default-grid-columns;
171
+ }
172
+ }
173
+
174
+ @else {
175
+ @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
176
+ }
177
+ }
178
+
179
+ // Legacy Mixins
123
180
  @mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
181
+ @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.";
124
182
 
125
183
  @if length($query) == 1 {
126
184
  @media screen and ($default-feature: nth($query, 1)) {
@@ -7,32 +7,6 @@
7
7
  background-image: unquote("linear-gradient(left, #{$values})");
8
8
  }
9
9
 
10
- @function gradient-stops($grid-columns, $color: $visual-grid-color) {
11
- $transparent: rgba(0,0,0,0);
12
-
13
- $column-width: flex-grid(1, $grid-columns);
14
- $gutter-width: flex-gutter($grid-columns);
15
- $column-offset: $column-width;
16
-
17
- $values: ($transparent 0, $color 0);
18
-
19
- @for $i from 1 to $grid-columns*2 {
20
- @if is-even($i) {
21
- $values: append($values, $transparent $column-offset);
22
- $values: append($values, $color $column-offset);
23
- $column-offset: $column-offset + $column-width;
24
- }
25
-
26
- @else {
27
- $values: append($values, $color $column-offset);
28
- $values: append($values, $transparent $column-offset);
29
- $column-offset: $column-offset + $gutter-width;
30
- }
31
- }
32
-
33
- @return $values;
34
- }
35
-
36
10
  @if $visual-grid == true {
37
11
  body:before {
38
12
  content: '';
@@ -57,7 +31,7 @@
57
31
 
58
32
  @each $breakpoint in $visual-grid-breakpoints {
59
33
  @if $breakpoint != nil {
60
- @include breakpoint($breakpoint) {
34
+ @include media($breakpoint) {
61
35
  @include grid-column-gradient(gradient-stops($grid-columns));
62
36
  }
63
37
  }
@@ -0,0 +1,3 @@
1
+ @import "../functions/helpers";
2
+ @import "default/grid";
3
+ @import "default/visual-grid";
@@ -0,0 +1,5 @@
1
+ #!/usr/bin/env ruby
2
+
3
+ require "neat"
4
+
5
+ Neat::Generator.new(ARGV).run
@@ -1,3 +1,5 @@
1
+ require "neat/generator"
2
+
1
3
  module Neat
2
4
  if defined?(Rails) && defined?(Rails::Engine)
3
5
  class Engine < ::Rails::Engine
@@ -0,0 +1,74 @@
1
+ require "fileutils"
2
+
3
+ module Neat
4
+ class Generator
5
+ def initialize(arguments)
6
+ @subcommand = arguments.first
7
+ end
8
+
9
+ def run
10
+ if @subcommand == "install"
11
+ install
12
+ elsif @subcommand == "update"
13
+ update
14
+ elsif @subcommand == "remove"
15
+ remove
16
+ end
17
+ end
18
+
19
+ def update
20
+ if neat_files_already_exist?
21
+ remove_neat_directory
22
+ install_files
23
+ puts "Neat files updated."
24
+ else
25
+ puts "No existing neat installation. Doing nothing."
26
+ end
27
+ end
28
+
29
+ def install
30
+ if neat_files_already_exist?
31
+ puts "Neat files already installed, doing nothing."
32
+ else
33
+ install_files
34
+ puts "Neat files installed to neat/"
35
+ end
36
+ end
37
+
38
+ def remove
39
+ if neat_files_already_exist?
40
+ remove_neat_directory
41
+ puts "Neat was successfully removed."
42
+ else
43
+ puts "No existing neat installation. Doing nothing."
44
+ end
45
+ end
46
+
47
+ private
48
+
49
+ def neat_files_already_exist?
50
+ File.directory?("neat")
51
+ end
52
+
53
+ def install_files
54
+ FileUtils.mkdir_p("neat")
55
+ FileUtils.cp_r(all_stylesheets, "neat/")
56
+ end
57
+
58
+ def remove_neat_directory
59
+ FileUtils.rm_rf("neat")
60
+ end
61
+
62
+ def all_stylesheets
63
+ Dir["#{stylesheets_directory}/*"]
64
+ end
65
+
66
+ def stylesheets_directory
67
+ File.join(top_level_directory, "app", "assets", "stylesheets")
68
+ end
69
+
70
+ def top_level_directory
71
+ File.dirname(File.dirname(File.dirname(__FILE__)))
72
+ end
73
+ end
74
+ end
@@ -1,3 +1,3 @@
1
1
  module Neat
2
- VERSION = '1.0.0.pre'
2
+ VERSION = '1.0.0'
3
3
  end
metadata CHANGED
@@ -1,8 +1,8 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: neat
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.0.pre
5
- prerelease: 6
4
+ version: 1.0.0
5
+ prerelease:
6
6
  platform: ruby
7
7
  authors:
8
8
  - Kyle Fiedler
@@ -11,7 +11,7 @@ authors:
11
11
  autorequire:
12
12
  bindir: bin
13
13
  cert_chain: []
14
- date: 2012-10-22 00:00:00.000000000 Z
14
+ date: 2012-10-29 00:00:00.000000000 Z
15
15
  dependencies:
16
16
  - !ruby/object:Gem::Dependency
17
17
  name: sass
@@ -84,26 +84,33 @@ description: ! 'Neat is an open source grid framework built on top of Bourbon wi
84
84
  '
85
85
  email:
86
86
  - support@thoughtbot.com
87
- executables: []
87
+ executables:
88
+ - neat
88
89
  extensions: []
89
90
  extra_rdoc_files: []
90
91
  files:
91
92
  - .gitignore
92
93
  - Gemfile
93
94
  - LICENSE
95
+ - NEWS.md
94
96
  - README.md
95
97
  - Rakefile
98
+ - app/assets/stylesheets/_neat-helpers.scss
96
99
  - app/assets/stylesheets/_neat.scss
97
- - app/assets/stylesheets/functions/_grid.scss
98
100
  - app/assets/stylesheets/functions/_helpers.scss
99
- - app/assets/stylesheets/functions/_px-to-em.scss
101
+ - app/assets/stylesheets/functions/_private.scss
102
+ - app/assets/stylesheets/functions/helpers/_new-breakpoint.scss
103
+ - app/assets/stylesheets/functions/helpers/_px-to-em.scss
100
104
  - app/assets/stylesheets/grid/_global-variables.scss
101
105
  - app/assets/stylesheets/grid/_grid.scss
102
106
  - app/assets/stylesheets/grid/_visual-grid.scss
103
- - app/assets/stylesheets/settings/_grid.scss
104
- - app/assets/stylesheets/settings/_visual-grid.scss
107
+ - app/assets/stylesheets/settings/_default.scss
108
+ - app/assets/stylesheets/settings/default/_grid.scss
109
+ - app/assets/stylesheets/settings/default/_visual-grid.scss
110
+ - bin/neat
105
111
  - lib/neat.rb
106
112
  - lib/neat/engine.rb
113
+ - lib/neat/generator.rb
107
114
  - lib/neat/version.rb
108
115
  - lib/tasks/install.rake
109
116
  - neat.gemspec
@@ -122,9 +129,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
122
129
  required_rubygems_version: !ruby/object:Gem::Requirement
123
130
  none: false
124
131
  requirements:
125
- - - ! '>'
132
+ - - ! '>='
126
133
  - !ruby/object:Gem::Version
127
- version: 1.3.1
134
+ version: '0'
128
135
  requirements: []
129
136
  rubyforge_project: neat
130
137
  rubygems_version: 1.8.24
@@ -1,15 +0,0 @@
1
- @function container-span($span: $span) {
2
- @if length($span) == 3 {
3
- $container-columns: nth($span, 3);
4
- @return $container-columns;
5
- }
6
-
7
- @else if length($span) == 2 {
8
- $container-columns: nth($span, 2);
9
- @return $container-columns;
10
- }
11
-
12
- @else {
13
- @return $grid-columns;
14
- }
15
- }