flint-gs 2.0.5 → 2.0.6
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/flint/functions.rb +0 -4
- data/lib/flint/version.rb +1 -2
- data/stylesheets/flint/mixins/lib/_clearfix.scss +2 -0
- data/stylesheets/flint/mixins/lib/_main.scss +112 -40
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1ec4363f44d3c5474f6d3fdc697bf91195bc96b1
|
|
4
|
+
data.tar.gz: a0c558f75bcd47c2bfde2ba6e925165bd9bb5c33
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 49804977514417dcbb95397f3120c6ede20b077a95b1da7490182098754fcb05c1577ad79cdb84291e06ddf17595650bf036451cd28d6be976051d153a9a1e99
|
|
7
|
+
data.tar.gz: b555be8276ad1d2dd136143a2e273a619b9e14f3ed4cf3e282573ceaedd6cd9d31ff95b125a299040fd3b40c6289b8a8fbe8424d83e2c95217e9392182cd866f
|
data/lib/flint/functions.rb
CHANGED
data/lib/flint/version.rb
CHANGED
|
@@ -11,37 +11,61 @@
|
|
|
11
11
|
* a column count of `4`, then anything above that would likely cause layout issues
|
|
12
12
|
* for that breakpoint.
|
|
13
13
|
*
|
|
14
|
-
*
|
|
14
|
+
* ```scss
|
|
15
|
+
* div {
|
|
16
|
+
* @include _(2);
|
|
17
|
+
* }
|
|
18
|
+
* ```
|
|
15
19
|
*
|
|
16
20
|
* ### Recursive Span With Identical Context
|
|
17
21
|
* Use this if your nested context is identical across all breakpoints. The `$context` should
|
|
18
22
|
* be the span value of the element's parent, or `auto`.
|
|
19
23
|
*
|
|
20
|
-
*
|
|
24
|
+
* ```scss
|
|
25
|
+
* div {
|
|
26
|
+
* @include _(4, 2);
|
|
27
|
+
* }
|
|
28
|
+
* ```
|
|
21
29
|
*
|
|
22
30
|
* ### Recursive Span With Differing Context
|
|
23
31
|
* Use this if your nested context is not identical across all breakpoints. The `$context`
|
|
24
32
|
* should be the span value of the element's parent, or `auto`.
|
|
25
33
|
*
|
|
26
|
-
*
|
|
34
|
+
* ```scss
|
|
35
|
+
* div {
|
|
36
|
+
* @include _(4, 8 8 4 4);
|
|
37
|
+
* }
|
|
38
|
+
* ```
|
|
27
39
|
*
|
|
28
40
|
* ### Variable Span
|
|
29
41
|
* Use this if your content needs different spans across each breakpoint. The order of
|
|
30
42
|
* operations is the order that your breakpoints are listed in your config (DESC).
|
|
31
43
|
*
|
|
32
|
-
*
|
|
44
|
+
* ```scss
|
|
45
|
+
* div {
|
|
46
|
+
* @include _(8 8 4 4);
|
|
47
|
+
* }
|
|
48
|
+
* ```
|
|
33
49
|
*
|
|
34
50
|
* ### Variable Span With Identical Context
|
|
35
51
|
* Use this if your nested context is identical across all breakpoints. The `$context`
|
|
36
52
|
* should be the span value of the element's parent, or `auto`.
|
|
37
53
|
*
|
|
38
|
-
*
|
|
54
|
+
* ```scss
|
|
55
|
+
* div {
|
|
56
|
+
* @include _(4 4 2 2, 4);
|
|
57
|
+
* }
|
|
58
|
+
* ```
|
|
39
59
|
*
|
|
40
60
|
* ### Variable Span With Differing Context
|
|
41
61
|
* Use this if your nested context is not identical across all breakpoints. The `$context`
|
|
42
62
|
* should be the span value of the element's parent, or `auto`.
|
|
43
63
|
*
|
|
44
|
-
*
|
|
64
|
+
* ```scss
|
|
65
|
+
* div {
|
|
66
|
+
* @include _(8 8 4 4, 8 8 4 4);
|
|
67
|
+
* }
|
|
68
|
+
* ```
|
|
45
69
|
*
|
|
46
70
|
* ----
|
|
47
71
|
*
|
|
@@ -50,13 +74,21 @@
|
|
|
50
74
|
* ### Span
|
|
51
75
|
* Use if you want to define each span by breakpoint `$alias`.
|
|
52
76
|
*
|
|
53
|
-
*
|
|
77
|
+
* ```scss
|
|
78
|
+
* div {
|
|
79
|
+
* @include _(desktop, 2);
|
|
80
|
+
* }
|
|
81
|
+
* ```
|
|
54
82
|
*
|
|
55
83
|
* ### Span With Context
|
|
56
84
|
* Use if you want to define each span by breakpoint `$alias`. The `$context` should be the span
|
|
57
85
|
* value of the element's parent, or `auto`.
|
|
58
86
|
*
|
|
59
|
-
*
|
|
87
|
+
* ```scss
|
|
88
|
+
* div {
|
|
89
|
+
* @include _(desktop, 4, 2);
|
|
90
|
+
* }
|
|
91
|
+
* ```
|
|
60
92
|
*
|
|
61
93
|
* ----
|
|
62
94
|
*
|
|
@@ -69,9 +101,9 @@
|
|
|
69
101
|
*
|
|
70
102
|
* When utilizing the `$context` argument, be sure to note the differences in the way the calculations
|
|
71
103
|
* happen depending on if you use a numerical value or `auto`. When using a numerical value, the span
|
|
72
|
-
* is calculated against the current breakpoint's value (example: `80em`), then
|
|
73
|
-
* count (example: `16`), and then finally multiplied by the
|
|
74
|
-
*
|
|
104
|
+
* is calculated against the current breakpoint's value (example: `80em`), then it's divided by its column
|
|
105
|
+
* count (example: `16`), and then finally, it's multiplied by the passed `$context` value. When using
|
|
106
|
+
* `auto`, the span is _always_ calculated against the closest parent element's width instead
|
|
75
107
|
* of the current breakpoint's width.
|
|
76
108
|
*
|
|
77
109
|
* The difference in output varies, but your gutters will be more accurate across the board if you
|
|
@@ -80,34 +112,45 @@
|
|
|
80
112
|
* all use a gutter value of their own. Because the parent element's actual width is always used, the
|
|
81
113
|
* gutters never become out of sync.
|
|
82
114
|
*
|
|
115
|
+
* ```scss
|
|
83
116
|
* .parent {
|
|
84
|
-
*
|
|
117
|
+
* @include _(4);
|
|
85
118
|
* .child {
|
|
86
|
-
*
|
|
119
|
+
* @include _(3, 4);
|
|
87
120
|
* }
|
|
88
121
|
* }
|
|
122
|
+
*
|
|
89
123
|
* // Auto will work
|
|
90
124
|
* .parent {
|
|
91
|
-
*
|
|
125
|
+
* @include _(4);
|
|
92
126
|
* .child {
|
|
93
|
-
*
|
|
127
|
+
* @include _(3, auto);
|
|
94
128
|
* }
|
|
95
129
|
* }
|
|
130
|
+
*
|
|
96
131
|
* // Will also work
|
|
97
132
|
* .parent {
|
|
98
|
-
*
|
|
133
|
+
* @include _(4);
|
|
99
134
|
* }
|
|
100
135
|
* .parent .child {
|
|
101
|
-
*
|
|
136
|
+
* @include _(3, auto);
|
|
102
137
|
* }
|
|
138
|
+
*
|
|
103
139
|
* // Will not work, as the child has no relation to
|
|
104
140
|
* // the parent within the stylesheet
|
|
105
141
|
* .parent {
|
|
106
|
-
*
|
|
142
|
+
* @include _(6);
|
|
107
143
|
* }
|
|
108
144
|
* .child {
|
|
109
|
-
*
|
|
145
|
+
* @include _(3, auto);
|
|
110
146
|
* }
|
|
147
|
+
* ```
|
|
148
|
+
*
|
|
149
|
+
* If you attempt to use this feature with a methodology like BEM, where selectors aren't neccassarily
|
|
150
|
+
* lists, but instead single strings, you'll notice that Flint can't find return a valid parent for the
|
|
151
|
+
* element. This is the reason for the `support-syntax` functionality. With it, Flint is able to parse
|
|
152
|
+
* selectors that are a single string, as opposed to a list, and successfully search for the passed
|
|
153
|
+
* selector's parent.
|
|
111
154
|
*
|
|
112
155
|
* ----
|
|
113
156
|
*
|
|
@@ -116,56 +159,70 @@
|
|
|
116
159
|
* ### Alpha
|
|
117
160
|
* Remove the left `$gutter` from the span. Other aliases for `alpha` include: `no-left` and `first`.
|
|
118
161
|
*
|
|
162
|
+
* ```scss
|
|
119
163
|
* div {
|
|
120
|
-
*
|
|
164
|
+
* @include _(12 8 6 4, $gutter: alpha);
|
|
121
165
|
* }
|
|
166
|
+
* ```
|
|
122
167
|
*
|
|
123
168
|
* ### Omega
|
|
124
169
|
* Remove the right `$gutter` from the span. Other aliases for `omega` include: `no-right` and `last`.
|
|
125
170
|
*
|
|
171
|
+
* ```scss
|
|
126
172
|
* div {
|
|
127
|
-
*
|
|
173
|
+
* @include _(2, $gutter: omega);
|
|
128
174
|
* }
|
|
175
|
+
* ````
|
|
129
176
|
*
|
|
130
177
|
* ### Row
|
|
131
178
|
* Remove both of the `$gutter` values from the span. Other aliases for `row` include: `none`.
|
|
132
179
|
*
|
|
180
|
+
* ```scss
|
|
133
181
|
* div {
|
|
134
|
-
*
|
|
182
|
+
* @include _(4, $gutter: row);
|
|
135
183
|
* }
|
|
184
|
+
* ```
|
|
136
185
|
*
|
|
137
186
|
* ### Center
|
|
138
187
|
* Center the current span within it's container element. Outputs auto left and right margins.
|
|
139
188
|
* This modifier will also remove any float properties on the element.
|
|
140
189
|
*
|
|
190
|
+
* ```scss
|
|
141
191
|
* div {
|
|
142
|
-
*
|
|
192
|
+
* @include _(4, $gutter: center);
|
|
143
193
|
* }
|
|
194
|
+
* ```
|
|
144
195
|
*
|
|
145
196
|
* ### Inside
|
|
146
197
|
* Sets both `$gutter` values on the inside of the element. Instead of deducting `$gutter*2` out
|
|
147
198
|
* of the final width, it will deduct `$gutter*4`. Useful for nesting elements inside of other
|
|
148
199
|
* elements without using `$context: auto`.
|
|
149
200
|
*
|
|
201
|
+
* ```scss
|
|
150
202
|
* div {
|
|
151
|
-
*
|
|
203
|
+
* @include _(16 12 8 4, $gutter: inside);
|
|
152
204
|
* }
|
|
205
|
+
* ```
|
|
153
206
|
*
|
|
154
207
|
* ### Default
|
|
155
208
|
* Argument to use the default left/right `$gutter` values. Useful for when you want to use a
|
|
156
209
|
* variable `$gutter` argument. Other aliases for `default` include: `normal` and `regular`.
|
|
157
210
|
*
|
|
211
|
+
* ```scss
|
|
158
212
|
* div {
|
|
159
|
-
*
|
|
213
|
+
* @include _(4, $gutter: default);
|
|
160
214
|
* }
|
|
215
|
+
* ```
|
|
161
216
|
*
|
|
162
217
|
* ### Variable Modifiers
|
|
163
218
|
* Instead of passing in a recursive `$gutter` value, you may specify a value for each breakpoint exactly
|
|
164
219
|
* like you would a `$span` argument.
|
|
165
220
|
*
|
|
221
|
+
* ```scss
|
|
166
222
|
* div {
|
|
167
|
-
*
|
|
223
|
+
* @include _(10 8 6 4, $gutter: alpha omega omega default);
|
|
168
224
|
* }
|
|
225
|
+
* ```
|
|
169
226
|
*
|
|
170
227
|
* ----
|
|
171
228
|
*
|
|
@@ -174,63 +231,73 @@
|
|
|
174
231
|
* ### By Alias
|
|
175
232
|
* Use this type of query to wrap the `@content` in a single query for the specified breakpoint.
|
|
176
233
|
*
|
|
234
|
+
* ```scss
|
|
177
235
|
* div {
|
|
178
|
-
*
|
|
236
|
+
* @include _(desktop) {
|
|
179
237
|
* property: value;
|
|
180
238
|
* }
|
|
181
239
|
* }
|
|
240
|
+
* ```
|
|
182
241
|
*
|
|
183
242
|
* ### From, To
|
|
184
243
|
* Use this type of query to wrap the `@content` in a single query between 2 breakpoints. Make
|
|
185
244
|
* sure to pass in the breakpoints from lowest to highest.
|
|
186
245
|
*
|
|
246
|
+
* ```scss
|
|
187
247
|
* div {
|
|
188
|
-
*
|
|
248
|
+
* @include _(from tablet to laptop) {
|
|
189
249
|
* property: value;
|
|
190
250
|
* }
|
|
191
251
|
* }
|
|
252
|
+
* ```
|
|
192
253
|
*
|
|
193
254
|
* ### Greater Than
|
|
194
255
|
* Use this type of query to wrap the `@content` in a single query for anything above
|
|
195
256
|
* the passed breakpoint.
|
|
196
257
|
*
|
|
258
|
+
* ```scss
|
|
197
259
|
* div {
|
|
198
|
-
*
|
|
260
|
+
* @include _(greater than laptop) {
|
|
199
261
|
* property: value;
|
|
200
262
|
* }
|
|
201
|
-
*
|
|
263
|
+
* @include _(5em greater than tablet) {
|
|
202
264
|
* property: value;
|
|
203
265
|
* }
|
|
204
|
-
*
|
|
266
|
+
* @include _(greater than 55em) {
|
|
205
267
|
* property: value;
|
|
206
268
|
* }
|
|
207
269
|
* }
|
|
270
|
+
* ```
|
|
208
271
|
*
|
|
209
272
|
* ### Less Than
|
|
210
273
|
* Use this type of query to wrap the `@content` in a single query for anything below
|
|
211
274
|
* the passed breakpoint.
|
|
212
275
|
*
|
|
276
|
+
* ```scss
|
|
213
277
|
* div {
|
|
214
|
-
*
|
|
278
|
+
* @include _(less than laptop) {
|
|
215
279
|
* property: value;
|
|
216
280
|
* }
|
|
217
|
-
*
|
|
281
|
+
* @include _(5em less than tablet) {
|
|
218
282
|
* property: value;
|
|
219
283
|
* }
|
|
220
|
-
*
|
|
284
|
+
* @include _(less than 8em) {
|
|
221
285
|
* property: value;
|
|
222
286
|
* }
|
|
223
287
|
* }
|
|
288
|
+
* ```
|
|
224
289
|
*
|
|
225
290
|
* ### For
|
|
226
291
|
* Use this type of query to wrap the `@content` in a single comma delimited query
|
|
227
292
|
* for each passed `$alias`.
|
|
228
293
|
*
|
|
294
|
+
* ```scss
|
|
229
295
|
* div {
|
|
230
|
-
*
|
|
296
|
+
* @include _(for mobile tablet desktop) {
|
|
231
297
|
* property: value;
|
|
232
298
|
* }
|
|
233
299
|
* }
|
|
300
|
+
* ```
|
|
234
301
|
*
|
|
235
302
|
* ----
|
|
236
303
|
*
|
|
@@ -241,9 +308,11 @@
|
|
|
241
308
|
* packaged with a micro-clearfix function. _Flint will attempt to use a local mixin named
|
|
242
309
|
* `clearfix`. If one is not found, it will use it's own._
|
|
243
310
|
*
|
|
311
|
+
* ```scss
|
|
244
312
|
* div {
|
|
245
|
-
*
|
|
313
|
+
* @include _(clear);
|
|
246
314
|
* }
|
|
315
|
+
* ```
|
|
247
316
|
*
|
|
248
317
|
* ### Foundation
|
|
249
318
|
* A foundation instance will output a global box-sizing: border-box declaration. If you selected
|
|
@@ -252,7 +321,9 @@
|
|
|
252
321
|
* This should be placed at the root of your stylesheet. _Flint will attempt to use a local
|
|
253
322
|
* mixin named `box-sizing`. If one is not found, it will use it's own._
|
|
254
323
|
*
|
|
255
|
-
*
|
|
324
|
+
* ```scss
|
|
325
|
+
* @include _(foundation);
|
|
326
|
+
* ```
|
|
256
327
|
*
|
|
257
328
|
* ### Container
|
|
258
329
|
* Containers act as a containing row for each individual breakpoint. It uses the `"max-width"`
|
|
@@ -260,10 +331,11 @@
|
|
|
260
331
|
* will also center your element using auto left and right margins. You may combine
|
|
261
332
|
* container and clear declarations, with arguments separated by a comma.
|
|
262
333
|
*
|
|
263
|
-
*
|
|
334
|
+
* ```scss
|
|
264
335
|
* div {
|
|
265
|
-
*
|
|
336
|
+
* @include _(container);
|
|
266
337
|
* }
|
|
338
|
+
* ```
|
|
267
339
|
*
|
|
268
340
|
* ----
|
|
269
341
|
*
|
|
@@ -274,7 +346,7 @@
|
|
|
274
346
|
* @param {String|Number} $context (null) - context value of span, or null for shorthand
|
|
275
347
|
* @param {String|List} $gutter (null) - alias for gutter modifier
|
|
276
348
|
*
|
|
277
|
-
* @throws
|
|
349
|
+
* @throws - Error if list lengths do not match number of breakpoints (when using variable shorthands).
|
|
278
350
|
*
|
|
279
351
|
* ----
|
|
280
352
|
*
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: flint-gs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 2.0.
|
|
4
|
+
version: 2.0.6
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Ezekiel Gabrielse
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2014-10-
|
|
11
|
+
date: 2014-10-07 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: bundler
|