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 +1 -1
- data/NEWS.md +13 -0
- data/README.md +266 -170
- data/app/assets/stylesheets/_neat-helpers.scss +2 -0
- data/app/assets/stylesheets/_neat.scss +2 -9
- data/app/assets/stylesheets/functions/_helpers.scss +2 -34
- data/app/assets/stylesheets/functions/_private.scss +63 -0
- data/app/assets/stylesheets/functions/helpers/_new-breakpoint.scss +18 -0
- data/app/assets/stylesheets/functions/{_px-to-em.scss → helpers/_px-to-em.scss} +0 -0
- data/app/assets/stylesheets/grid/_grid.scss +59 -1
- data/app/assets/stylesheets/grid/_visual-grid.scss +1 -27
- data/app/assets/stylesheets/settings/_default.scss +3 -0
- data/app/assets/stylesheets/settings/{_grid.scss → default/_grid.scss} +0 -0
- data/app/assets/stylesheets/settings/{_visual-grid.scss → default/_visual-grid.scss} +0 -0
- data/bin/neat +5 -0
- data/lib/neat.rb +2 -0
- data/lib/neat/generator.rb +74 -0
- data/lib/neat/version.rb +1 -1
- metadata +17 -10
- data/app/assets/stylesheets/functions/_grid.scss +0 -15
data/LICENSE
CHANGED
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
|
-
|
12
|
+
Non-Rails projects
|
9
13
|
===
|
14
|
+
Install Neat:
|
10
15
|
|
11
|
-
|
16
|
+
```bash
|
17
|
+
gem install neat
|
18
|
+
```
|
19
|
+
Then `cd` to your Sass directory and run:
|
12
20
|
|
13
|
-
|
14
|
-
|
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
|
-
|
48
|
+
In your Gemfile:
|
17
49
|
|
18
|
-
|
19
|
-
|
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
|
-
|
30
|
-
|
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
|
-
|
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
|
-
|
48
|
-
|
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
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
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
|
-
|
69
|
-
|
119
|
+
```scss
|
120
|
+
@include span-columns(6 of 8, table)
|
121
|
+
```
|
70
122
|
|
71
123
|
Likewise for inline-block:
|
72
124
|
|
73
|
-
|
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
|
-
|
78
|
-
|
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
|
-
|
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
|
-
|
95
|
-
|
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
|
-
|
105
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
193
|
+
```scss
|
194
|
+
@include fill-parent;
|
195
|
+
```
|
130
196
|
|
131
|
-
###
|
197
|
+
### Media Queries
|
132
198
|
|
133
|
-
The `
|
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
|
-
|
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
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
210
|
+
```scss
|
211
|
+
.my-class {
|
212
|
+
@include media(481px) {
|
213
|
+
font-size: 1.2em;
|
214
|
+
}
|
215
|
+
}
|
147
216
|
|
148
|
-
|
217
|
+
// Compiled CSS
|
149
218
|
|
150
|
-
|
151
|
-
|
152
|
-
|
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
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
228
|
+
```scss
|
229
|
+
.my-class {
|
230
|
+
@include media(max-width 769px) {
|
231
|
+
float: none;
|
232
|
+
}
|
233
|
+
}
|
163
234
|
|
164
|
-
|
235
|
+
// Compiled CSS
|
165
236
|
|
166
|
-
|
167
|
-
|
168
|
-
|
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
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
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
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
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
|
-
|
220
|
-
|
221
|
-
|
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
|
-
|
302
|
+
// Compiled CSS
|
226
303
|
|
227
|
-
|
228
|
-
|
229
|
-
|
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
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
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
|
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 `
|
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
|
-
|
@@ -2,16 +2,9 @@
|
|
2
2
|
// MIT Licensed
|
3
3
|
// Copyright (c) 2011 thoughtbot, inc.
|
4
4
|
|
5
|
-
|
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
|
-
@
|
2
|
-
|
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
|
+
}
|
File without changes
|
@@ -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
|
-
//
|
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
|
34
|
+
@include media($breakpoint) {
|
61
35
|
@include grid-column-gradient(gradient-stops($grid-columns));
|
62
36
|
}
|
63
37
|
}
|
File without changes
|
File without changes
|
data/bin/neat
ADDED
data/lib/neat.rb
CHANGED
@@ -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
|
data/lib/neat/version.rb
CHANGED
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
|
5
|
-
prerelease:
|
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-
|
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/
|
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/
|
104
|
-
- app/assets/stylesheets/settings/
|
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:
|
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
|
-
}
|