flint-gs 1.3.5 → 1.3.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.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +86 -72
  3. data/lib/flint.rb +2 -2
  4. data/stylesheets/_flint.scss +3 -3
  5. data/stylesheets/flint/config/_config.scss +9 -9
  6. data/stylesheets/flint/functions/helpers/_helpers.scss +37 -31
  7. data/stylesheets/flint/functions/lib/_calc-breakpoint.scss +14 -11
  8. data/stylesheets/flint/functions/lib/_calc-margin.scss +13 -13
  9. data/stylesheets/flint/functions/lib/_calc-width.scss +13 -13
  10. data/stylesheets/flint/functions/lib/_exists.scss +3 -3
  11. data/stylesheets/flint/functions/lib/_fluid-width.scss +3 -3
  12. data/stylesheets/flint/functions/lib/_get-family-instance.scss +3 -3
  13. data/stylesheets/flint/functions/lib/_get-index.scss +3 -3
  14. data/stylesheets/flint/functions/lib/_get-instance-value.scss +7 -7
  15. data/stylesheets/flint/functions/lib/_get-substring.scss +3 -3
  16. data/stylesheets/flint/functions/lib/_get-value.scss +7 -7
  17. data/stylesheets/flint/functions/lib/_instance.scss +10 -10
  18. data/stylesheets/flint/functions/lib/_last.scss +2 -2
  19. data/stylesheets/flint/functions/lib/_list-to-string.scss +3 -3
  20. data/stylesheets/flint/functions/lib/_map-fetch.scss +5 -6
  21. data/stylesheets/flint/functions/lib/_next-index.scss +6 -6
  22. data/stylesheets/flint/functions/lib/_purge.scss +2 -2
  23. data/stylesheets/flint/functions/lib/_remove.scss +4 -4
  24. data/stylesheets/flint/functions/lib/_replace.scss +4 -4
  25. data/stylesheets/flint/functions/lib/_steal-key.scss +4 -4
  26. data/stylesheets/flint/functions/lib/_steal-values.scss +3 -3
  27. data/stylesheets/flint/functions/lib/_string-to-list.scss +4 -4
  28. data/stylesheets/flint/functions/lib/_string-to-number.scss +3 -3
  29. data/stylesheets/flint/mixins/lib/_clearfix.scss +3 -2
  30. data/stylesheets/flint/mixins/lib/_flint-calculate.scss +115 -115
  31. data/stylesheets/flint/mixins/lib/_flint-main.scss +174 -141
  32. data/stylesheets/flint/mixins/lib/_new-instance.scss +9 -9
  33. data/stylesheets/flint/mixins/lib/_print-instance.scss +4 -4
  34. metadata +2 -2
data/stylesheets/flint/mixins/lib/_flint-main.scss CHANGED
@@ -1,21 +1,21 @@
1
1
  @mixin _(
2
- $key: NULL,
3
- $span: NULL,
4
- $context: NULL,
5
- $gutter: NULL,
6
- $shift: NULL
2
+ $key: null,
3
+ $span: null,
4
+ $context: null,
5
+ $gutter: null,
6
+ $shift: null
7
7
  ) {
8
8
 
9
- // Foundation check
9
+ // Initial check to see what type of instance this is
10
10
  // -------------------------------------------------------------------------------
11
- // @param $key [Value] : checks if key is a foundation or container instance
11
+ // @param $key [string | integer | list] : checks type of instance
12
12
  // -------------------------------------------------------------------------------
13
- // @output [Foundation] | container
13
+ // @output foundation styles | container styles | calculated styles
14
14
 
15
15
  @if $key == "foundation" {
16
16
 
17
17
  // apply global border-box-sizing if true
18
- @if get-value(settings, border-box-sizing) == true {
18
+ @if get-value("settings", "border-box-sizing") {
19
19
  $flint__foundation: "existant" !global;
20
20
  }
21
21
 
@@ -33,13 +33,12 @@
33
33
 
34
34
  @include clearfix();
35
35
 
36
- } @else if $key == "container"
37
- or exists($flint, $key) and $span != NULL
36
+ } @else if
37
+ $key == "container"
38
+ or exists($flint, $key) and $span != null
38
39
  or length($key) == 1 and exists($flint, $key) == false
39
- or length($span) > 1
40
- or length($key) > 1
41
- and is-not-string(nth($key, 1))
42
- and is-not-string(nth($key, 2))
40
+ or is-list($span)
41
+ or is-list($key) and is-not-string(nth($key, 1)) and is-not-string(nth($key, 2))
43
42
  {
44
43
 
45
44
  // only apply display rule if the key is the default
@@ -59,7 +58,7 @@
59
58
  }
60
59
 
61
60
  // apply individually if foundation is not set globally, but is set to true in config
62
- @if get-value(settings, border-box-sizing) == true and $flint__foundation == "nonexistant" {
61
+ @if get-value("settings", "border-box-sizing") and $flint__foundation == "nonexistant" {
63
62
  -moz-box-sizing: border-box;
64
63
  -webkit-box-sizing: border-box;
65
64
  box-sizing: border-box;
@@ -78,13 +77,14 @@
78
77
  float: none;
79
78
 
80
79
  // check if max-width is set
81
- @if get-value(settings, max-width) {
80
+ @if get-value("settings", "max-width") {
82
81
  max-width: max(get-all-breakpoints()...);
83
- } @else if is-number(get-value(settings, max-width)) {
84
- max-width: get-value(settings, max-width);
82
+ // check if it's an integer
83
+ } @else if is-number(get-value("settings", "max-width")) {
84
+ max-width: get-value("settings", "max-width");
85
85
  }
86
86
 
87
- @if get-value(settings, center-container) {
87
+ @if get-value("settings", "center-container") {
88
88
  margin-right: auto;
89
89
  margin-left: auto;
90
90
  } @else {
@@ -96,15 +96,15 @@
96
96
 
97
97
  @if is-default($key) {
98
98
 
99
- float: unquote(get-value(settings, float-style));
99
+ float: unquote(get-value("settings", "float-style"));
100
100
 
101
- } @else if length($key) > 1 or is-not-string($key) {
101
+ } @else if is-list($key) or is-not-string($key) {
102
102
 
103
103
  @for $i from 1 through length($flint__all__keys) {
104
104
  $calcKey: steal-key($i);
105
105
 
106
106
  @if is-default($calcKey) {
107
- float: unquote(get-value(settings, float-style));
107
+ float: unquote(get-value("settings", "float-style"));
108
108
  }
109
109
  }
110
110
  }
@@ -113,15 +113,15 @@
113
113
 
114
114
  // Recursive shorthand without context
115
115
  // -------------------------------------------------------------------------------
116
- // @param $span [Value] : span
116
+ // @param $span [integer] : span value
117
117
  // -------------------------------------------------------------------------------
118
- // @output [Styles...]
118
+ // @output calculated styles
119
119
 
120
120
  @if is-number($key) and length($key) == 1 or $key == "container" {
121
121
 
122
122
  @if $key == "container" {
123
123
 
124
- @if get-value(settings, grid) == "fixed" {
124
+ @if get-value("settings", "grid") == "fixed" {
125
125
 
126
126
  @for $i from 1 through length($flint__all__keys) {
127
127
 
@@ -140,14 +140,14 @@
140
140
 
141
141
  @if is-highest-breakpoint($calcKey) {
142
142
 
143
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) {
143
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
144
144
  width: calc-width($calcKey, $calcSpan);
145
145
  @content;
146
146
  }
147
147
 
148
148
  } @else {
149
149
 
150
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) {
150
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - 1) ) {
151
151
  width: calc-width($calcKey, $calcSpan);
152
152
  @content;
153
153
  }
@@ -159,7 +159,7 @@
159
159
 
160
160
  } @else {
161
161
 
162
- @if length($key) == 1 and $span == NULL {
162
+ @if length($key) == 1 and $span == null {
163
163
 
164
164
  @for $i from 1 through length($flint__all__keys) {
165
165
 
@@ -177,11 +177,11 @@
177
177
 
178
178
  } @else {
179
179
 
180
- @if get-value(settings, grid) == "fluid" {
180
+ @if get-value("settings", "grid") == "fluid" {
181
181
 
182
182
  @if is-highest-breakpoint($calcKey) {
183
183
 
184
- @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + 1) ) {
184
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + 1) ) {
185
185
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
186
186
  @content;
187
187
  }
@@ -189,7 +189,7 @@
189
189
 
190
190
  } @else {
191
191
 
192
- @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, $i) ) {
192
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
193
193
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
194
194
  @content;
195
195
  }
@@ -197,11 +197,11 @@
197
197
 
198
198
  }
199
199
 
200
- } @else if get-value(settings, grid) == "fixed" {
200
+ } @else if get-value("settings", "grid") == "fixed" {
201
201
 
202
202
  @if is-highest-breakpoint($calcKey) {
203
203
 
204
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) {
204
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
205
205
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
206
206
  @content;
207
207
  }
@@ -209,7 +209,7 @@
209
209
 
210
210
  } @else {
211
211
 
212
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) {
212
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - 1) ) {
213
213
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
214
214
  @content;
215
215
  }
@@ -223,10 +223,10 @@
223
223
 
224
224
  // Recursive shorthand with identical context
225
225
  // -------------------------------------------------------------------------------
226
- // @param $span [Value] : span
227
- // @param $context [Value] : context of span
226
+ // @param $span [integer] : span value
227
+ // @param $context [Value] : context value of span
228
228
  // -------------------------------------------------------------------------------
229
- // @output [Styles...]
229
+ // @output calculated styles
230
230
 
231
231
  } @else if length($key) == 1 and length($span) == 1 {
232
232
 
@@ -246,11 +246,11 @@
246
246
 
247
247
  } @else {
248
248
 
249
- @if get-value(settings, grid) == "fluid" {
249
+ @if get-value("settings", "grid") == "fluid" {
250
250
 
251
251
  @if is-highest-breakpoint($calcKey) {
252
252
 
253
- @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + 1) ) {
253
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + 1) ) {
254
254
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
255
255
  @content;
256
256
  }
@@ -258,7 +258,7 @@
258
258
 
259
259
  } @else {
260
260
 
261
- @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, $i) ) {
261
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
262
262
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
263
263
  @content;
264
264
  }
@@ -266,11 +266,11 @@
266
266
 
267
267
  }
268
268
 
269
- } @else if get-value(settings, grid) == "fixed" {
269
+ } @else if get-value("settings", "grid") == "fixed" {
270
270
 
271
271
  @if is-highest-breakpoint($calcKey) {
272
272
 
273
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) {
273
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
274
274
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
275
275
  @content;
276
276
  }
@@ -278,7 +278,7 @@
278
278
 
279
279
  } @else {
280
280
 
281
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) {
281
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - 1) ) {
282
282
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
283
283
  @content;
284
284
  }
@@ -292,12 +292,12 @@
292
292
 
293
293
  // Recursive shorthand with differing context
294
294
  // -------------------------------------------------------------------------------
295
- // @param $span [Value] : span
296
- // @param $context [Values...] : context of span for each breakpoint
295
+ // @param $span [integer] : span value
296
+ // @param $context [list] : context value of span for each breakpoint
297
297
  // -------------------------------------------------------------------------------
298
- // @output [Styles...]
298
+ // @output calculated styles
299
299
 
300
- } @else if length($key) == 1 and length($span) > 1 {
300
+ } @else if length($key) == 1 and is-list($span) {
301
301
 
302
302
  @for $i from 1 through length($flint__all__keys) {
303
303
 
@@ -315,11 +315,11 @@
315
315
 
316
316
  } @else {
317
317
 
318
- @if get-value(settings, grid) == "fluid" {
318
+ @if get-value("settings", "grid") == "fluid" {
319
319
 
320
320
  @if is-highest-breakpoint($calcKey) {
321
321
 
322
- @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + 1) ) {
322
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + 1) ) {
323
323
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
324
324
  @content;
325
325
  }
@@ -327,7 +327,7 @@
327
327
 
328
328
  } @else {
329
329
 
330
- @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, $i) ) {
330
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
331
331
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
332
332
  @content;
333
333
  }
@@ -335,11 +335,11 @@
335
335
 
336
336
  }
337
337
 
338
- } @else if get-value(settings, grid) == "fixed" {
338
+ } @else if get-value("settings", "grid") == "fixed" {
339
339
 
340
340
  @if is-highest-breakpoint($calcKey) {
341
341
 
342
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) {
342
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
343
343
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
344
344
  @content;
345
345
  }
@@ -347,7 +347,7 @@
347
347
 
348
348
  } @else {
349
349
 
350
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) {
350
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - 1) ) {
351
351
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
352
352
  @content;
353
353
  }
@@ -364,12 +364,13 @@
364
364
 
365
365
  // Variable shorthand
366
366
  // -------------------------------------------------------------------------------
367
- // @param $span [Values...] : span for each breakpoint
367
+ // @param $span [list] : span value for each breakpoint
368
368
  // -------------------------------------------------------------------------------
369
- // @output [Styles...]
369
+ // @output calculated styles
370
370
 
371
- @if length($key) > 1
372
- and $span == NULL
371
+ @if
372
+ is-list($key)
373
+ and $span == null
373
374
  and is-not-string(nth($key, 1))
374
375
  and is-not-string(nth($key, 2))
375
376
  {
@@ -389,11 +390,11 @@
389
390
 
390
391
  } @else {
391
392
 
392
- @if get-value(settings, grid) == "fluid" {
393
+ @if get-value("settings", "grid") == "fluid" {
393
394
 
394
395
  @if is-highest-breakpoint($calcKey) {
395
396
 
396
- @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + 1) ) {
397
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + 1) ) {
397
398
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
398
399
  @content;
399
400
  }
@@ -401,7 +402,7 @@
401
402
 
402
403
  } @else {
403
404
 
404
- @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, $i) ) {
405
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
405
406
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
406
407
  @content;
407
408
  }
@@ -409,11 +410,11 @@
409
410
 
410
411
  }
411
412
 
412
- } @else if get-value(settings, grid) == "fixed" {
413
+ } @else if get-value("settings", "grid") == "fixed" {
413
414
 
414
415
  @if is-highest-breakpoint($calcKey) {
415
416
 
416
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) {
417
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
417
418
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
418
419
  @content;
419
420
  }
@@ -421,7 +422,7 @@
421
422
 
422
423
  } @else {
423
424
 
424
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) {
425
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - 1) ) {
425
426
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
426
427
  @content;
427
428
  }
@@ -435,12 +436,13 @@
435
436
 
436
437
  // Variable shorthand with context
437
438
  // -------------------------------------------------------------------------------
438
- // @param $span [Values...] : span for each breakpoint
439
- // @param $context [Values...] : context for each breakpoint
439
+ // @param $span [list] : span value for each breakpoint
440
+ // @param $context [list] : context value for each breakpoint
440
441
  // -------------------------------------------------------------------------------
441
- // @output [Styles...]
442
+ // @output calculated styles
442
443
 
443
- } @else if length($key) > 1
444
+ } @else if
445
+ is-list($key)
444
446
  and length($span) >= 1
445
447
  and is-not-string(nth($key, 1))
446
448
  and is-not-string(nth($key, 2))
@@ -461,11 +463,11 @@
461
463
 
462
464
  } @else {
463
465
 
464
- @if get-value(settings, grid) == "fluid" {
466
+ @if get-value("settings", "grid") == "fluid" {
465
467
 
466
468
  @if is-highest-breakpoint($calcKey) {
467
469
 
468
- @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + 1) ) {
470
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + 1) ) {
469
471
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
470
472
  @content;
471
473
  }
@@ -473,7 +475,7 @@
473
475
 
474
476
  } @else {
475
477
 
476
- @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, $i) ) {
478
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint("alias", $calcKey, $i) ) {
477
479
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
478
480
  @content;
479
481
  }
@@ -481,11 +483,11 @@
481
483
 
482
484
  }
483
485
 
484
- } @else if get-value(settings, grid) == "fixed" {
486
+ } @else if get-value("settings", "grid") == "fixed" {
485
487
 
486
488
  @if is-highest-breakpoint($calcKey) {
487
489
 
488
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) {
490
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) {
489
491
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
490
492
  @content;
491
493
  }
@@ -493,7 +495,7 @@
493
495
 
494
496
  } @else {
495
497
 
496
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) {
498
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, $i) ) and ( max-width: (calc-breakpoint("prev", $calcKey, $i) - 1) ) {
497
499
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) {
498
500
  @content;
499
501
  }
@@ -505,14 +507,14 @@
505
507
  }
506
508
  }
507
509
 
508
- // Call by key
510
+ // Call by alias
509
511
  // -------------------------------------------------------------------------------
510
- // @param $key [Breakpoint] : breakpoint key
511
- // @param $span [Value] : span
512
+ // @param $key [string] : breakpoint alias
513
+ // @param $span [integer] : span value
512
514
  // -------------------------------------------------------------------------------
513
- // @output [Styles...]
515
+ // @output calculated styles
514
516
 
515
- } @else if exists($flint, $key) and $span != NULL and $context == NULL {
517
+ } @else if exists($flint, $key) and $span != null and $context == null {
516
518
 
517
519
  $calcKey: $key;
518
520
  $calcSpan: $span;
@@ -528,11 +530,11 @@
528
530
 
529
531
  } @else {
530
532
 
531
- @if get-value(settings, grid) == "fluid" {
533
+ @if get-value("settings", "grid") == "fluid" {
532
534
 
533
535
  @if is-highest-breakpoint($calcKey) {
534
536
 
535
- @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, get-index($calcKey)) + 1) ) {
537
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + 1) ) {
536
538
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
537
539
  @content;
538
540
  }
@@ -540,7 +542,7 @@
540
542
 
541
543
  } @else {
542
544
 
543
- @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) {
545
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
544
546
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
545
547
  @content;
546
548
  }
@@ -548,11 +550,11 @@
548
550
 
549
551
  }
550
552
 
551
- } @else if get-value(settings, grid) == "fixed" {
553
+ } @else if get-value("settings", "grid") == "fixed" {
552
554
 
553
555
  @if is-highest-breakpoint($calcKey) {
554
556
 
555
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) {
557
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
556
558
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
557
559
  @content;
558
560
  }
@@ -560,7 +562,7 @@
560
562
 
561
563
  } @else {
562
564
 
563
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint(prev, $calcKey, get-index($calcKey)) - 1) ) {
565
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint("prev", $calcKey, get-index($calcKey)) - 1) ) {
564
566
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
565
567
  @content;
566
568
  }
@@ -571,15 +573,15 @@
571
573
  }
572
574
  }
573
575
 
574
- // Call by key with context
576
+ // Call by alias with context
575
577
  // -------------------------------------------------------------------------------
576
- // @param $key [Breakpoint] : breakpoint key
577
- // @param $span [Value] : span
578
- // @param $context [Value] : context of span
578
+ // @param $key [string] : breakpoint alias
579
+ // @param $span [integer] : span value
580
+ // @param $context [integer] : context value of span
579
581
  // -------------------------------------------------------------------------------
580
- // @output [Styles...]
582
+ // @output calculated styles
581
583
 
582
- } @else if exists($flint, $key) and $span != NULL and $context != NULL {
584
+ } @else if exists($flint, $key) and $span != null and $context != null {
583
585
 
584
586
  $calcKey: $key;
585
587
  $calcSpan: $span;
@@ -595,11 +597,11 @@
595
597
 
596
598
  } @else {
597
599
 
598
- @if get-value(settings, grid) == "fluid" {
600
+ @if get-value("settings", "grid") == "fluid" {
599
601
 
600
602
  @if is-highest-breakpoint($calcKey) {
601
603
 
602
- @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, get-index($calcKey)) + 1) ) {
604
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + 1) ) {
603
605
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
604
606
  @content;
605
607
  }
@@ -607,7 +609,7 @@
607
609
 
608
610
  } @else {
609
611
 
610
- @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) {
612
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
611
613
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
612
614
  @content;
613
615
  }
@@ -615,11 +617,11 @@
615
617
 
616
618
  }
617
619
 
618
- } @else if get-value(settings, grid) == "fixed" {
620
+ } @else if get-value("settings", "grid") == "fixed" {
619
621
 
620
622
  @if is-highest-breakpoint($calcKey) {
621
623
 
622
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) {
624
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
623
625
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
624
626
  @content;
625
627
  }
@@ -627,7 +629,7 @@
627
629
 
628
630
  } @else {
629
631
 
630
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint(prev, $calcKey, get-index($calcKey)) - 1) ) {
632
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint("prev", $calcKey, get-index($calcKey)) - 1) ) {
631
633
  @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) {
632
634
  @content;
633
635
  }
@@ -640,120 +642,151 @@
640
642
 
641
643
  // Wrap @content in media queries
642
644
  // -------------------------------------------------------------------------------
643
- // @param $key [Values...] : defines how o make up media query
644
- // @param ["from $x to $y"] | ["greater than $x"] | ["less than $x"] | ["for $x $y $z"]
645
+ // @param $key [list of strings] : defines how to make up media query
645
646
  // -------------------------------------------------------------------------------
646
- // @output [Media Query]
647
+ // @output styles wrapped in media query
648
+
649
+ } @else if exists($flint, $key) and $span == null and $context == null or is-list($key) {
647
650
 
648
- } @else if exists($flint, $key) and $span == NULL and $context == NULL or length($key) > 1 {
651
+ // Call $key breakpoint by alias
652
+ // -------------------------------------------------------------------------------
653
+ // @param $key [$key] : only for $key breakpoint
654
+ // -------------------------------------------------------------------------------
649
655
 
650
- // only key-x breakpoint
651
656
  @if length($key) == 1 {
652
- @if get-value(settings, grid) == "fluid" {
653
- @if is-highest-breakpoint($key) == true {
654
- @media only screen and ( min-width: (calc-breakpoint(next, $key, get-index($key)) + 1) ) {
657
+ @if get-value("settings", "grid") == "fluid" {
658
+ @if is-highest-breakpoint($key) {
659
+ @media only screen and ( min-width: (calc-breakpoint("next", $key, get-index($key)) + 1) ) {
655
660
  @content;
656
661
  }
657
662
  } @else {
658
- @media only screen and ( min-width: (calc-breakpoint(next, $key, get-index($key)) + if(is-lowest-breakpoint($key), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $key, get-index($key)) ) {
663
+ @media only screen and ( min-width: (calc-breakpoint("next", $key, get-index($key)) + if(is-lowest-breakpoint($key), 0, 1)) ) and ( max-width: calc-breakpoint("alias", $key, get-index($key)) ) {
659
664
  @content;
660
665
  }
661
666
  }
662
- } @else if get-value(settings, grid) == "fixed" {
663
- @if is-highest-breakpoint($key) == true {
664
- @media only screen and ( min-width: calc-breakpoint(alias, $key, get-index($key)) ) {
667
+ } @else if get-value("settings", "grid") == "fixed" {
668
+ @if is-highest-breakpoint($key) {
669
+ @media only screen and ( min-width: calc-breakpoint("alias", $key, get-index($key)) ) {
665
670
  @content;
666
671
  }
667
672
  } @else {
668
- @media only screen and ( min-width: calc-breakpoint(alias, $key, get-index($key)) ) and ( max-width: (calc-breakpoint(prev, $key, get-index($key)) - 1) ) {
673
+ @media only screen and ( min-width: calc-breakpoint("alias", $key, get-index($key)) ) and ( max-width: (calc-breakpoint("prev", $key, get-index($key)) - 1) ) {
669
674
  @content;
670
675
  }
671
676
  }
672
677
  }
673
678
 
674
- // from key breakpoint to infinity
679
+ // From $key breakpoint to infinity
680
+ // -------------------------------------------------------------------------------
681
+ // @param $key [from $key to infinity] : min-width from $key breakpoint
682
+ // -------------------------------------------------------------------------------
683
+
675
684
  } @else if length($key) > 1 and nth($key, 1) == "from" and nth($key, 3) == "to" and nth($key, 4) == "infinity" {
676
- @if get-value(settings, grid) == "fluid" {
677
- @media only screen and ( min-width: (calc-breakpoint(next, nth($key, 2), get-index(nth($key, 2))) + if(is-lowest-breakpoint(nth($key, 2)), 0, 1)) ) {
685
+ @if get-value("settings", "grid") == "fluid" {
686
+ @media only screen and ( min-width: (calc-breakpoint("next", nth($key, 2), get-index(nth($key, 2))) + if(is-lowest-breakpoint(nth($key, 2)), 0, 1)) ) {
678
687
  @content;
679
688
  }
680
- } @else if get-value(settings, grid) == "fixed" {
681
- @media only screen and ( min-width: calc-breakpoint(alias, nth($key, 2), get-index(nth($key, 2))) ) {
689
+ } @else if get-value("settings", "grid") == "fixed" {
690
+ @media only screen and ( min-width: calc-breakpoint("alias", nth($key, 2), get-index(nth($key, 2))) ) {
682
691
  @content;
683
692
  }
684
693
  }
685
694
 
686
- // from key-x breakpoint to key-y breakpoint
695
+ // From $key-x breakpoint to $key-y breakpoint
696
+ // -------------------------------------------------------------------------------
697
+ // @param $key [from $key-x to $key-y] : from $key-x breakpoint to $key-y
698
+ // -------------------------------------------------------------------------------
699
+
687
700
  } @else if length($key) > 1 and nth($key, 1) == "from" and nth($key, 3) == "to" {
688
- @if get-value(settings, grid) == "fluid" {
689
- @media only screen and ( min-width: (calc-breakpoint(next, nth($key, 2), get-index(nth($key, 2))) + if(is-lowest-breakpoint(nth($key, 2)), 0, 1)) ) and ( max-width: calc-breakpoint(alias, nth($key, 4), get-index(nth($key, 4))) ) {
701
+ @if get-value("settings", "grid") == "fluid" {
702
+ @media only screen and ( min-width: (calc-breakpoint("next", nth($key, 2), get-index(nth($key, 2))) + if(is-lowest-breakpoint(nth($key, 2)), 0, 1)) ) and ( max-width: calc-breakpoint("alias", nth($key, 4), get-index(nth($key, 4))) ) {
690
703
  @content;
691
704
  }
692
- } @else if get-value(settings, grid) == "fixed" {
693
- @media only screen and ( min-width: calc-breakpoint(alias, nth($key, 2), get-index(nth($key, 2))) ) and ( max-width: (calc-breakpoint(prev, nth($key, 4), get-index(nth($key, 4))) - if(is-highest-breakpoint(nth($key, 4)), 0, 1)) ) {
705
+ } @else if get-value("settings", "grid") == "fixed" {
706
+ @media only screen and ( min-width: calc-breakpoint("alias", nth($key, 2), get-index(nth($key, 2))) ) and ( max-width: (calc-breakpoint("prev", nth($key, 4), get-index(nth($key, 4))) - if(is-highest-breakpoint(nth($key, 4)), 0, 1)) ) {
694
707
  @content;
695
708
  }
696
709
  }
697
710
 
698
- // greater than key-x breakpoint
711
+ // Greater than $key breakpoint
712
+ // -------------------------------------------------------------------------------
713
+ // @param $key [greater than $key] : anything above $key breakpoint
714
+ // -------------------------------------------------------------------------------
715
+
699
716
  } @else if length($key) > 1 and nth($key, 1) == "greater" and nth($key, 2) == "than" {
700
- @if get-value(settings, grid) == "fluid" {
701
- @media only screen and ( min-width: (calc-breakpoint(alias, nth($key, 3), get-index(nth($key, 3))) + 1) ) {
717
+ @if get-value("settings", "grid") == "fluid" {
718
+ @media only screen and ( min-width: (calc-breakpoint("alias", nth($key, 3), get-index(nth($key, 3))) + 1) ) {
702
719
  @content;
703
720
  }
704
- } @else if get-value(settings, grid) == "fixed" {
705
- @media only screen and ( min-width: calc-breakpoint(prev, nth($key, 3), get-index(nth($key, 3))) ) {
721
+ } @else if get-value("settings", "grid") == "fixed" {
722
+ @media only screen and ( min-width: calc-breakpoint("prev", nth($key, 3), get-index(nth($key, 3))) ) {
706
723
  @content;
707
724
  }
708
725
  }
709
726
 
710
- // (y)px greater than key-x breakpoint
727
+ // x[unit] greater than $key breakpoint
728
+ // -------------------------------------------------------------------------------
729
+ // @param $key [x greater than $key] : unit value greater than $key breakpoint
730
+ // -------------------------------------------------------------------------------
731
+
711
732
  } @else if length($key) > 1 and nth($key, 2) == "greater" and nth($key, 3) == "than" {
712
- @media only screen and ( min-width: (calc-breakpoint(alias, nth($key, 4), get-index(nth($key, 4))) + nth($key, 1)) ) {
733
+ @media only screen and ( min-width: (calc-breakpoint("alias", nth($key, 4), get-index(nth($key, 4))) + nth($key, 1)) ) {
713
734
  @content;
714
735
  }
715
736
 
716
- // less than key-x breakpoint
737
+ // Less than $key breakpoint
738
+ // -------------------------------------------------------------------------------
739
+ // @param $key [less than $key] : anything below $key breakpoint
740
+ // -------------------------------------------------------------------------------
741
+
717
742
  } @else if length($key) > 1 and nth($key, 1) == "less" and nth($key, 2) == "than" {
718
- @if get-value(settings, grid) == "fluid" {
719
- @media only screen and ( max-width: calc-breakpoint(next, nth($key, 3), get-index(nth($key, 3))) ) {
743
+ @if get-value("settings", "grid") == "fluid" {
744
+ @media only screen and ( max-width: calc-breakpoint("next", nth($key, 3), get-index(nth($key, 3))) ) {
720
745
  @content;
721
746
  }
722
- } @else if get-value(settings, grid) == "fixed" {
723
- @media only screen and ( max-width: (calc-breakpoint(alias, nth($key, 3), get-index(nth($key, 3))) - 1) ) {
747
+ } @else if get-value("settings", "grid") == "fixed" {
748
+ @media only screen and ( max-width: (calc-breakpoint("alias", nth($key, 3), get-index(nth($key, 3))) - 1) ) {
724
749
  @content;
725
750
  }
726
751
  }
727
752
 
728
- // (y)px less than key-x breakpoint
753
+ // x[unit] less than $key breakpoint
754
+ // -------------------------------------------------------------------------------
755
+ // @param $key [x less than than $key] : unit value less than $key breakpoint
756
+ // -------------------------------------------------------------------------------
757
+
729
758
  } @else if length($key) > 1 and nth($key, 2) == "less" and nth($key, 3) == "than" {
730
- @media only screen and ( max-width: (calc-breakpoint(alias, nth($key, 4), get-index(nth($key, 4))) - nth($key, 1)) ) {
759
+ @media only screen and ( max-width: (calc-breakpoint("alias", nth($key, 4), get-index(nth($key, 4))) - nth($key, 1)) ) {
731
760
  @content;
732
761
  }
733
762
 
734
- // for key-x key-y key-z
763
+ // For $key-x $key-y $key-z
764
+ // -------------------------------------------------------------------------------
765
+ // @param $key [for list of strings] : will duplicate styles for each passed $key breakpoint
766
+ // -------------------------------------------------------------------------------
767
+
735
768
  } @else if length($key) > 1 and nth($key, 1) == "for" {
736
769
  @for $i from 1 through length($key) {
737
770
  $calcKey: nth($key, $i);
738
771
 
739
772
  @if exists($flint, $calcKey) {
740
- @if get-value(settings, grid) == "fluid" {
773
+ @if get-value("settings", "grid") == "fluid" {
741
774
  @if is-highest-breakpoint($calcKey) {
742
- @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, get-index($calcKey)) + 1) ) {
775
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + 1) ) {
743
776
  @content;
744
777
  }
745
778
  } @else {
746
- @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) {
779
+ @media only screen and ( min-width: (calc-breakpoint("next", $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
747
780
  @content;
748
781
  }
749
782
  }
750
- } @else if get-value(settings, grid) == "fixed" {
783
+ } @else if get-value("settings", "grid") == "fixed" {
751
784
  @if is-highest-breakpoint($calcKey) {
752
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) {
785
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) {
753
786
  @content;
754
787
  }
755
788
  } @else {
756
- @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint(prev, $calcKey, get-index($calcKey)) - 1) ) {
789
+ @media only screen and ( min-width: calc-breakpoint("alias", $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint("prev", $calcKey, get-index($calcKey)) - 1) ) {
757
790
  @content;
758
791
  }
759
792
  }