flint-gs 2.0.5 → 2.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|