flint-gs 1.3.5 → 1.3.6

Sign up to get free protection for your applications and to get access to all the features.
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
  }