flint-gs 1.5.0 → 1.6.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +134 -109
- data/lib/flint.rb +2 -2
- data/stylesheets/flint/config/_config.scss +7 -3
- data/stylesheets/flint/functions/_functions.scss +22 -10
- data/stylesheets/flint/functions/lib/_get-family-instance.scss +50 -23
- data/stylesheets/flint/functions/lib/_string-to-list.scss +21 -3
- data/stylesheets/flint/functions/lib/_support-syntax-bem.scss +25 -0
- data/stylesheets/flint/functions/lib/_support-syntax.scss +28 -0
- data/stylesheets/flint/functions/lib/_use-syntax.scss +11 -0
- data/stylesheets/flint/globals/_globals.scss +4 -0
- data/stylesheets/flint/mixins/lib/_main.scss +2 -2
- metadata +5 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3df9a000607508b222c3f0ca47374869bb6696b7
|
|
4
|
+
data.tar.gz: c6d90d4634bc5b5a9f88a5ce6748165f400c865e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 66f5a7f7c80c192a9120d82bcd6ad354389e7f9c858ddb31105a67a0217fc139855ac140fe6673d7e761c55bb4b7188b8e4bf6464a9daeb6f5685a87831b9dc8
|
|
7
|
+
data.tar.gz: fe967308897a78afcd87a83409712efbf937d9abf7ea62ba200e47f532a72331929c03ef4a2006600d55f7c187c2d25546b907707c86100125afe039de33f43d
|
data/README.md
CHANGED
|
@@ -1,11 +1,33 @@
|
|
|
1
1
|
# Flint [](http://badge.fury.io/rb/flint-gs)
|
|
2
2
|
|
|
3
|
-
**Flint is designed to be a flexible layout toolkit that developers can use for any responsive grid-based project.** Built on Sass 3.3, Flint is capable of complex responsive layouts customized at each breakpoint; all while using a single mixin, having minimal output, as well as being completely semantic. All of your layout settings are housed in a simple config file
|
|
3
|
+
**Flint is designed to be a flexible layout toolkit that developers can use for any responsive grid-based project.** Built on Sass 3.3, Flint is capable of complex responsive layouts customized at each breakpoint; all while using a single mixin, having minimal output, as well as being completely semantic. All of your layout settings are housed in a simple config file that is immensely customizable. Flint will only output the code you need, and nothing else. We handle the hard stuff, so you can focus on the rest.
|
|
4
4
|
|
|
5
5
|
Take it for a spin on [SassMeister.com](http://sassmeister.com/gist/11489231)!
|
|
6
6
|
|
|
7
7
|
Enjoy.
|
|
8
8
|
|
|
9
|
+
## Table of Contents
|
|
10
|
+
|
|
11
|
+
1. [Requirements](#requirements)
|
|
12
|
+
1. [Installation](#installation)
|
|
13
|
+
1. [Documentation](#documentation)
|
|
14
|
+
* [Config](#config)
|
|
15
|
+
* [Foundation](#foundation)
|
|
16
|
+
* [Container](#container)
|
|
17
|
+
* [Clearfix](#clear)
|
|
18
|
+
* [Recursive shorthand](#recursive-shorthand)
|
|
19
|
+
* [Recursive shorthand with identical context](#recursive-shorthand-with-identical-context)
|
|
20
|
+
* [Recursive shorthand with variable context](#recursive-shorthand-with-variable-context)
|
|
21
|
+
* [Variable shorthand](#variable-shorthand)
|
|
22
|
+
* [Variable shorthand with context](#variable-shorthand-with-context)
|
|
23
|
+
* [Wrapping in media queries](#wrapping-in-media-queries)
|
|
24
|
+
* [Call by alias](#call-by-alias)
|
|
25
|
+
* [Gutter modifiers](#gutter-modifiers)
|
|
26
|
+
* [Shift modifiers](#shift)
|
|
27
|
+
1. [Syntax support](#syntax-support)
|
|
28
|
+
1. [Authors](#authors)
|
|
29
|
+
1. [License](#license)
|
|
30
|
+
|
|
9
31
|
## Requirements
|
|
10
32
|
|
|
11
33
|
* Sass ~> 3.3.0
|
|
@@ -13,11 +35,11 @@ Enjoy.
|
|
|
13
35
|
|
|
14
36
|
## Installation
|
|
15
37
|
|
|
16
|
-
1. `gem install flint-gs`
|
|
38
|
+
1. Install via Ruby `gem install flint-gs`, or Bower `bower install flint`
|
|
17
39
|
2. Add `require "flint"` to your `config.rb`
|
|
18
|
-
3. Import it in your stylesheets with `@import "flint"
|
|
40
|
+
3. Import it in your stylesheets with `@import "flint"`
|
|
19
41
|
|
|
20
|
-
If you don't want to install
|
|
42
|
+
If you don't want to install it, then simply download or clone the current build files. Use the starter `config.rb` to require any custom functions Flint uses; currently this is required, as we're making use of custom SassScript functions until the 'script `&`' [returns to Sass](https://gist.github.com/nex3/8050187). Adjust the paths according to your project.
|
|
21
43
|
|
|
22
44
|
## Documentation
|
|
23
45
|
|
|
@@ -27,7 +49,7 @@ Flint's `config` map is unique in the ability that you may define an unlimited n
|
|
|
27
49
|
|
|
28
50
|
Speaking of not being like most frameworks, Flint does not require you to set a ridiculous amount of variables just to use a single breakpoint. It actually doesn't require you to set *any* variables. It also doesn't require you to install a seperate extension so that you can define your breakpoints; *all of these features are baked into Flint.* Your columns are fully related to your breakpoints, so that there is never any confusion and everything is kept nice and simple.
|
|
29
51
|
|
|
30
|
-
|
|
52
|
+
##### Usage
|
|
31
53
|
|
|
32
54
|
To begin, you can either use the default `config` (below) which comes baked in, or you can define your own using the `$flint` variable, using the default config as a template. Settings may be entered in `px` or `em`, and Flint will do the rest.
|
|
33
55
|
|
|
@@ -35,13 +57,13 @@ To begin, you can either use the default `config` (below) which comes baked in,
|
|
|
35
57
|
|
|
36
58
|
```scss
|
|
37
59
|
// Configuration map
|
|
38
|
-
|
|
39
|
-
// @param [map] : Here you can set up your various breakpoints for your
|
|
60
|
+
// -------------------------------------------------------------------------------
|
|
61
|
+
// @param breakpoint [map] : Here you can set up your various breakpoints for your
|
|
40
62
|
// project. Any number of breakpoints is acceptable. You must include a column
|
|
41
63
|
// count and breakpoint value for each listed breakpoint. The order does have
|
|
42
64
|
// to follow a `DESC` order. Unit (px | em) chosen here must be used consistently
|
|
43
65
|
// throughout the rest of the config map.
|
|
44
|
-
|
|
66
|
+
// -------------------------------------------------------------------------------
|
|
45
67
|
// @param default [string] : alias of breakpoint that is your grid default
|
|
46
68
|
// @param grid [string] : style of grid
|
|
47
69
|
// @param gutter [number | false] : contextual size of gutter
|
|
@@ -49,69 +71,74 @@ To begin, you can either use the default `config` (below) which comes baked in,
|
|
|
49
71
|
// @param max-width [number | bool] : max-width for containers
|
|
50
72
|
// @param center-container [bool] : if you want a centered container
|
|
51
73
|
// @param border-box-sizing [bool] : if you want box-sizing: border-box applied
|
|
74
|
+
// @param support-syntax [string | false] : syntax to support
|
|
52
75
|
// @param debug-mode [bool] : ouputs debug properties
|
|
53
76
|
// -------------------------------------------------------------------------------
|
|
54
77
|
|
|
55
78
|
$flint: (
|
|
56
79
|
|
|
57
|
-
|
|
58
|
-
|
|
80
|
+
// Grid configuration
|
|
81
|
+
"config": (
|
|
82
|
+
|
|
83
|
+
// Define breakpoints [any amount of breakpoints]
|
|
84
|
+
// Any alias you like, minus reserved Flint words [i.e. "settings", "config", etc.]
|
|
85
|
+
"desktop": (
|
|
59
86
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
"desktop": (
|
|
87
|
+
// Options: 0-infinity
|
|
88
|
+
"columns": 16,
|
|
63
89
|
|
|
64
|
-
|
|
65
|
-
|
|
90
|
+
// Options: number[unit]
|
|
91
|
+
"breakpoint": 80em,
|
|
92
|
+
),
|
|
66
93
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
94
|
+
// Same applies for other breakpoints
|
|
95
|
+
// ----
|
|
96
|
+
// Remember, you're not fixed to just 4 breakpoints like we have here
|
|
97
|
+
"laptop": (
|
|
98
|
+
"columns": 12,
|
|
99
|
+
"breakpoint": 60em,
|
|
100
|
+
),
|
|
101
|
+
"tablet": (
|
|
102
|
+
"columns": 8,
|
|
103
|
+
"breakpoint": 40em,
|
|
104
|
+
),
|
|
105
|
+
"mobile": (
|
|
106
|
+
"columns": 4,
|
|
107
|
+
"breakpoint": 20em,
|
|
108
|
+
),
|
|
70
109
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
"laptop": (
|
|
74
|
-
"columns": 12,
|
|
75
|
-
"breakpoint": 960px,
|
|
76
|
-
),
|
|
77
|
-
"tablet": (
|
|
78
|
-
"columns": 8,
|
|
79
|
-
"breakpoint": 640px,
|
|
80
|
-
),
|
|
81
|
-
"mobile": (
|
|
82
|
-
"columns": 4,
|
|
83
|
-
"breakpoint": 320px,
|
|
84
|
-
),
|
|
110
|
+
// Additional grid settings [required]
|
|
111
|
+
"settings": (
|
|
85
112
|
|
|
86
|
-
|
|
87
|
-
|
|
113
|
+
// Any breakpoint's alias
|
|
114
|
+
"default": "mobile",
|
|
88
115
|
|
|
89
|
-
|
|
90
|
-
|
|
116
|
+
// Options: fluid | fixed
|
|
117
|
+
"grid": "fluid",
|
|
91
118
|
|
|
92
|
-
|
|
93
|
-
|
|
119
|
+
// Options: number[unit]
|
|
120
|
+
"gutter": 0.625em,
|
|
94
121
|
|
|
95
|
-
|
|
96
|
-
|
|
122
|
+
// Options: left | right
|
|
123
|
+
"float-style": "left",
|
|
97
124
|
|
|
98
|
-
|
|
99
|
-
|
|
125
|
+
// Options: true [uses highest breakpoint] | false | number[unit]
|
|
126
|
+
"max-width": true,
|
|
100
127
|
|
|
101
|
-
|
|
102
|
-
|
|
128
|
+
// Options: true | false
|
|
129
|
+
"center-container": true,
|
|
103
130
|
|
|
104
|
-
|
|
105
|
-
|
|
131
|
+
// Options: true | false
|
|
132
|
+
"border-box-sizing": true,
|
|
106
133
|
|
|
107
|
-
|
|
108
|
-
|
|
134
|
+
// Syntax support: string | false
|
|
135
|
+
"support-syntax": false,
|
|
109
136
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
);
|
|
137
|
+
// Options: true | false
|
|
138
|
+
"debug-mode": false,
|
|
139
|
+
),
|
|
140
|
+
),
|
|
141
|
+
) !default;
|
|
115
142
|
```
|
|
116
143
|
|
|
117
144
|
### Foundation
|
|
@@ -140,6 +167,7 @@ Outputs,
|
|
|
140
167
|
display: block;
|
|
141
168
|
float: none;
|
|
142
169
|
width: 100%;
|
|
170
|
+
max-width: 1280px
|
|
143
171
|
margin-right: auto;
|
|
144
172
|
margin-left: auto;
|
|
145
173
|
}
|
|
@@ -171,7 +199,7 @@ Outputs,
|
|
|
171
199
|
}
|
|
172
200
|
```
|
|
173
201
|
|
|
174
|
-
###Recursive shorthand
|
|
202
|
+
### Recursive shorthand
|
|
175
203
|
|
|
176
204
|
Use this if you want *identical* column spans across all breakpoints.
|
|
177
205
|
|
|
@@ -274,7 +302,7 @@ Use this if your nested context is *identical* across all breakpoints. The `cont
|
|
|
274
302
|
.parent {
|
|
275
303
|
@include _(6);
|
|
276
304
|
|
|
277
|
-
.recursive {
|
|
305
|
+
.recursive-child {
|
|
278
306
|
@include _(3, auto); // Equivalent to : _(3, 6)
|
|
279
307
|
}
|
|
280
308
|
}
|
|
@@ -283,7 +311,7 @@ Use this if your nested context is *identical* across all breakpoints. The `cont
|
|
|
283
311
|
.parent {
|
|
284
312
|
@include _(6);
|
|
285
313
|
}
|
|
286
|
-
.parent .recursive {
|
|
314
|
+
.parent .recursive-child {
|
|
287
315
|
@include _(3, auto); // Equivalent to : _(3, 6)
|
|
288
316
|
}
|
|
289
317
|
|
|
@@ -291,7 +319,7 @@ Use this if your nested context is *identical* across all breakpoints. The `cont
|
|
|
291
319
|
.parent {
|
|
292
320
|
@include _(6);
|
|
293
321
|
}
|
|
294
|
-
.recursive {
|
|
322
|
+
.recursive-child {
|
|
295
323
|
@include _(3, auto); // Equivalent to : _(3, 6)
|
|
296
324
|
}
|
|
297
325
|
|
|
@@ -302,7 +330,7 @@ Use this if your nested context is *identical* across all breakpoints. The `cont
|
|
|
302
330
|
|
|
303
331
|
Outputs,
|
|
304
332
|
```scss
|
|
305
|
-
.recursive {
|
|
333
|
+
.recursive-child {
|
|
306
334
|
display: block;
|
|
307
335
|
float: left;
|
|
308
336
|
width: 45.8333333333%;
|
|
@@ -310,21 +338,21 @@ Outputs,
|
|
|
310
338
|
margin-left: 2.0833333333%;
|
|
311
339
|
}
|
|
312
340
|
@media only screen and (min-width: 641px) and (max-width: 960px) {
|
|
313
|
-
.recursive {
|
|
341
|
+
.recursive-child {
|
|
314
342
|
width: 45.8333333333%;
|
|
315
343
|
margin-right: 2.0833333333%;
|
|
316
344
|
margin-left: 2.0833333333%;
|
|
317
345
|
}
|
|
318
346
|
}
|
|
319
347
|
@media only screen and (min-width: 321px) and (max-width: 640px) {
|
|
320
|
-
.recursive {
|
|
348
|
+
.recursive-child {
|
|
321
349
|
width: 45.8333333333%;
|
|
322
350
|
margin-right: 2.0833333333%;
|
|
323
351
|
margin-left: 2.0833333333%;
|
|
324
352
|
}
|
|
325
353
|
}
|
|
326
354
|
@media only screen and (min-width: 0) and (max-width: 320px) {
|
|
327
|
-
.recursive {
|
|
355
|
+
.recursive-child {
|
|
328
356
|
width: 45.8333333333%;
|
|
329
357
|
margin-right: 2.0833333333%;
|
|
330
358
|
margin-left: 2.0833333333%;
|
|
@@ -334,7 +362,9 @@ Outputs,
|
|
|
334
362
|
|
|
335
363
|
### Recursive shorthand with variable context
|
|
336
364
|
|
|
337
|
-
Use this if your context is *not* indentical across breakpoints. The `context` is the span of the elements parent.
|
|
365
|
+
Use this if your context is *not* indentical across breakpoints. The `context` is the span of the elements parent. You can now use `$context: auto`, and we'll do all the calculations for you. Just be sure a parent selector with a Flint instance actually exists, or you'll throw a warning and get no output.
|
|
366
|
+
|
|
367
|
+
When using `$context: auto` on fixed grids, Flint will automagically calculate based on the width of the closest parent element instance.
|
|
338
368
|
|
|
339
369
|
*You must include an argument for each breakpoint in your config.*
|
|
340
370
|
|
|
@@ -342,7 +372,7 @@ Use this if your context is *not* indentical across breakpoints. The `context` i
|
|
|
342
372
|
.parent {
|
|
343
373
|
@include _(10 8 6 4);
|
|
344
374
|
|
|
345
|
-
.recursive {
|
|
375
|
+
.recursive-child {
|
|
346
376
|
@include _(2, auto); // Equivalent to : _(2, 10 8 6 4)
|
|
347
377
|
}
|
|
348
378
|
}
|
|
@@ -350,7 +380,7 @@ Use this if your context is *not* indentical across breakpoints. The `context` i
|
|
|
350
380
|
|
|
351
381
|
Outputs,
|
|
352
382
|
```scss
|
|
353
|
-
recursive {
|
|
383
|
+
recursive-child {
|
|
354
384
|
display: block;
|
|
355
385
|
float: left;
|
|
356
386
|
width: 17.5%;
|
|
@@ -358,21 +388,21 @@ recursive {
|
|
|
358
388
|
margin-left: 1.25%;
|
|
359
389
|
}
|
|
360
390
|
@media only screen and (min-width: 641px) and (max-width: 960px) {
|
|
361
|
-
.recursive {
|
|
391
|
+
.recursive-child {
|
|
362
392
|
width: 21.875%;
|
|
363
393
|
margin-right: 1.5625%;
|
|
364
394
|
margin-left: 1.5625%;
|
|
365
395
|
}
|
|
366
396
|
}
|
|
367
397
|
@media only screen and (min-width: 321px) and (max-width: 640px) {
|
|
368
|
-
.recursive {
|
|
398
|
+
.recursive-child {
|
|
369
399
|
width: 29.1666666667%;
|
|
370
400
|
margin-right: 2.0833333333%;
|
|
371
401
|
margin-left: 2.0833333333%;
|
|
372
402
|
}
|
|
373
403
|
}
|
|
374
404
|
@media only screen and (min-width: 0) and (max-width: 320px) {
|
|
375
|
-
.recursive {
|
|
405
|
+
.recursive-child {
|
|
376
406
|
width: 43.75%;
|
|
377
407
|
margin-right: 3.125%;
|
|
378
408
|
margin-left: 3.125%;
|
|
@@ -426,13 +456,13 @@ Outputs,
|
|
|
426
456
|
|
|
427
457
|
### Variable shorthand with context
|
|
428
458
|
|
|
429
|
-
Use this if you're *nesting* columns using the variable shorthand. The `context` is the span of the elements parent.
|
|
459
|
+
Use this if you're *nesting* columns using the variable shorthand. The `context` is the span of the elements parent. Before using `$context: auto`, be sure a parent element with a Flint `instance` actually exists or you'll get some weird output, or none at all.
|
|
430
460
|
|
|
431
461
|
```scss
|
|
432
462
|
.parent {
|
|
433
463
|
@include _(16 12 8 4);
|
|
434
464
|
|
|
435
|
-
.variable {
|
|
465
|
+
.variable-child {
|
|
436
466
|
@include _(14 10 6 2, 16 12 8 4); // Equivalent to : _(14 10 6 2, auto)
|
|
437
467
|
}
|
|
438
468
|
}
|
|
@@ -440,7 +470,7 @@ Use this if you're *nesting* columns using the variable shorthand. The `context`
|
|
|
440
470
|
|
|
441
471
|
Outputs,
|
|
442
472
|
```scss
|
|
443
|
-
.variable {
|
|
473
|
+
.variable-child {
|
|
444
474
|
display: block;
|
|
445
475
|
float: left;
|
|
446
476
|
width: 85.9375%;
|
|
@@ -448,21 +478,21 @@ Outputs,
|
|
|
448
478
|
margin-left: 0.78125%;
|
|
449
479
|
}
|
|
450
480
|
@media only screen and (min-width: 641px) and (max-width: 960px) {
|
|
451
|
-
.variable {
|
|
481
|
+
.variable-child {
|
|
452
482
|
width: 81.25%;
|
|
453
483
|
margin-right: 1.0416666667%;
|
|
454
484
|
margin-left: 1.0416666667%;
|
|
455
485
|
}
|
|
456
486
|
}
|
|
457
487
|
@media only screen and (min-width: 321px) and (max-width: 640px) {
|
|
458
|
-
.variable {
|
|
488
|
+
.variable-child {
|
|
459
489
|
width: 71.875%;
|
|
460
490
|
margin-right: 1.5625%;
|
|
461
491
|
margin-left: 1.5625%;
|
|
462
492
|
}
|
|
463
493
|
}
|
|
464
494
|
@media only screen and (min-width: 0) and (max-width: 320px) {
|
|
465
|
-
.variable {
|
|
495
|
+
.variable-child {
|
|
466
496
|
width: 43.75%;
|
|
467
497
|
margin-right: 3.125%;
|
|
468
498
|
margin-left: 3.125%;
|
|
@@ -817,54 +847,49 @@ Outputs,
|
|
|
817
847
|
}
|
|
818
848
|
```
|
|
819
849
|
|
|
820
|
-
##
|
|
850
|
+
## Syntax support
|
|
821
851
|
|
|
822
|
-
|
|
852
|
+
As of `1.6.0`, you can add syntax support for your preferred syntax. I built the system for BEM, but it should be easily extendable to
|
|
853
|
+
support your preferred syntax. Simply create a function which parses a string of selectors into a valid list. For example, the BEM syntax
|
|
854
|
+
function parses the selector string (for example, `.block__element__element`) like so,
|
|
823
855
|
|
|
824
856
|
```scss
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
}
|
|
831
|
-
}
|
|
832
|
-
```
|
|
833
|
-
|
|
834
|
-
Will result in a` @warning`, and will not compile correctly as `.block` and `.block__element` are not compiled into selectors of the same family tree i.e. `.block .block__element`. But, if you write it like this:
|
|
857
|
+
// Support BEM syntax
|
|
858
|
+
// -------------------------------------------------------------------------------
|
|
859
|
+
// @param $selectors [string] : string of selectors to parse
|
|
860
|
+
// -------------------------------------------------------------------------------
|
|
861
|
+
// @return [string] : parsed list of selectors according to syntax
|
|
835
862
|
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
863
|
+
@function support-syntax-bem($selectors) {
|
|
864
|
+
$selectors: string-to-list($selectors, "_");
|
|
865
|
+
$parent: nth($selectors, 1);
|
|
866
|
+
$selector-list: ($parent);
|
|
839
867
|
|
|
840
|
-
|
|
841
|
-
|
|
868
|
+
// Loop over each selector and build list of selectors
|
|
869
|
+
@each $selector in $selectors {
|
|
870
|
+
// Make sure current selector is not the parent
|
|
871
|
+
@if $selector != $parent {
|
|
872
|
+
// Save to selector list
|
|
873
|
+
$selector-list: append($selector-list, ($parent + "__" + $selector), "comma");
|
|
874
|
+
// Define new parent
|
|
875
|
+
$parent: $parent + "__" + $selector;
|
|
876
|
+
}
|
|
842
877
|
}
|
|
843
|
-
}
|
|
844
878
|
|
|
845
|
-
//
|
|
846
|
-
|
|
847
|
-
.block {
|
|
848
|
-
@include _(4);
|
|
849
|
-
|
|
850
|
-
// Double your ampersands
|
|
851
|
-
& &__element {
|
|
852
|
-
@include _(2, auto);
|
|
853
|
-
}
|
|
879
|
+
// Return the list of transformed selectors
|
|
880
|
+
@return $selector-list;
|
|
854
881
|
}
|
|
855
882
|
```
|
|
856
883
|
|
|
857
|
-
This will
|
|
884
|
+
This will be parsed into a list of selectors: `.block, .block__element, .block__element__element`. The list of selectors can then be used by
|
|
885
|
+
instance system to look up a selectors parent, etc. To support your own preferred syntax: create a `support-syntax-<syntax-name>` function
|
|
886
|
+
and hook into it through the config `"support-syntax": "<syntax-name>"` option -- the system will attempt to use the `call()` function in
|
|
887
|
+
order to parse the selector string.
|
|
858
888
|
|
|
859
|
-
|
|
860
|
-
.
|
|
861
|
-
@include _(4);
|
|
889
|
+
#### Officially supported syntaxes
|
|
890
|
+
* [BEM](http://bem.info/)
|
|
862
891
|
|
|
863
|
-
|
|
864
|
-
@include _(2, 4);
|
|
865
|
-
}
|
|
866
|
-
}
|
|
867
|
-
```
|
|
892
|
+
If you make one that isn't here, let me know and I'll look into officially supporting it.
|
|
868
893
|
|
|
869
894
|
## Authors
|
|
870
895
|
|
data/lib/flint.rb
CHANGED
|
@@ -5,8 +5,8 @@ Compass::Frameworks.register('flint', :path => extension_path)
|
|
|
5
5
|
# Version is a number. If a version contains alphas, it will be created as a prerelease version
|
|
6
6
|
# Date is in the form of YYYY-MM-DD
|
|
7
7
|
module Flint
|
|
8
|
-
VERSION = "1.
|
|
9
|
-
DATE = "2014-
|
|
8
|
+
VERSION = "1.6.0"
|
|
9
|
+
DATE = "2014-07-03"
|
|
10
10
|
end
|
|
11
11
|
|
|
12
12
|
# Custom functions
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
// Configuration map
|
|
2
|
-
|
|
3
|
-
// @param [map] : Here you can set up your various breakpoints for your
|
|
2
|
+
// -------------------------------------------------------------------------------
|
|
3
|
+
// @param breakpoint [map] : Here you can set up your various breakpoints for your
|
|
4
4
|
// project. Any number of breakpoints is acceptable. You must include a column
|
|
5
5
|
// count and breakpoint value for each listed breakpoint. The order does have
|
|
6
6
|
// to follow a `DESC` order. Unit (px | em) chosen here must be used consistently
|
|
7
7
|
// throughout the rest of the config map.
|
|
8
|
-
|
|
8
|
+
// -------------------------------------------------------------------------------
|
|
9
9
|
// @param default [string] : alias of breakpoint that is your grid default
|
|
10
10
|
// @param grid [string] : style of grid
|
|
11
11
|
// @param gutter [number | false] : contextual size of gutter
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
// @param max-width [number | bool] : max-width for containers
|
|
14
14
|
// @param center-container [bool] : if you want a centered container
|
|
15
15
|
// @param border-box-sizing [bool] : if you want box-sizing: border-box applied
|
|
16
|
+
// @param support-syntax [string | false] : syntax to support
|
|
16
17
|
// @param debug-mode [bool] : ouputs debug properties
|
|
17
18
|
// -------------------------------------------------------------------------------
|
|
18
19
|
|
|
@@ -72,6 +73,9 @@ $flint: (
|
|
|
72
73
|
// Options: true | false
|
|
73
74
|
"border-box-sizing": true,
|
|
74
75
|
|
|
76
|
+
// Syntax support: string | false
|
|
77
|
+
"support-syntax": false,
|
|
78
|
+
|
|
75
79
|
// Options: true | false
|
|
76
80
|
"debug-mode": false,
|
|
77
81
|
),
|
|
@@ -4,26 +4,38 @@
|
|
|
4
4
|
|
|
5
5
|
// Functions
|
|
6
6
|
// ----
|
|
7
|
+
@import "lib/exists";
|
|
8
|
+
// Getters
|
|
7
9
|
@import "lib/map-fetch";
|
|
8
10
|
@import "lib/get-value";
|
|
11
|
+
@import "lib/get-index";
|
|
12
|
+
@import "lib/get-substring";
|
|
9
13
|
@import "lib/steal-key";
|
|
10
|
-
@import "lib/
|
|
14
|
+
@import "lib/steal-values";
|
|
15
|
+
// Calculations
|
|
11
16
|
@import "lib/fluid-width";
|
|
12
17
|
@import "lib/calc-width";
|
|
13
18
|
@import "lib/calc-margin";
|
|
14
19
|
@import "lib/calc-breakpoint";
|
|
15
|
-
|
|
16
|
-
@import "lib/get-index";
|
|
17
|
-
@import "lib/next-index";
|
|
20
|
+
// Instance functions
|
|
18
21
|
@import "lib/instance";
|
|
19
|
-
@import "lib/
|
|
20
|
-
@import "lib/get-
|
|
21
|
-
|
|
22
|
+
@import "lib/get-family-instance";
|
|
23
|
+
@import "lib/get-instance-value";
|
|
24
|
+
// List functions
|
|
22
25
|
@import "lib/list-to-string";
|
|
26
|
+
@import "lib/types-in-list";
|
|
27
|
+
@import "lib/next-index";
|
|
23
28
|
@import "lib/purge";
|
|
24
29
|
@import "lib/replace";
|
|
25
30
|
@import "lib/remove";
|
|
26
|
-
@import "lib/
|
|
27
|
-
|
|
31
|
+
@import "lib/last";
|
|
32
|
+
// String functions
|
|
28
33
|
@import "lib/string-to-number";
|
|
29
|
-
@import "lib/
|
|
34
|
+
@import "lib/string-to-list";
|
|
35
|
+
|
|
36
|
+
// Support syntax
|
|
37
|
+
// ---
|
|
38
|
+
@import "lib/use-syntax";
|
|
39
|
+
@import "lib/support-syntax";
|
|
40
|
+
// Syntaxes
|
|
41
|
+
@import "lib/support-syntax-bem"
|
|
@@ -1,32 +1,59 @@
|
|
|
1
1
|
// Checks if instance exists in selector familiy tree, falls back from current selector
|
|
2
2
|
// -------------------------------------------------------------------------------
|
|
3
|
-
// @dependence `selector_string()`
|
|
4
|
-
// @dependence `string-to-list()`
|
|
5
|
-
// @dependence `list-to-string()`
|
|
6
|
-
// @dependence `get-value()`
|
|
7
|
-
// @dependence `exists()`
|
|
8
|
-
// @dependence `remove()`
|
|
9
|
-
// -------------------------------------------------------------------------------
|
|
10
3
|
// @param $key [string] : breakpoint key to search for matching instance
|
|
4
|
+
// @param $syntax [string | null] : searches for instance using passed syntax
|
|
11
5
|
// -------------------------------------------------------------------------------
|
|
12
6
|
// @return matching instance | false
|
|
13
7
|
|
|
14
|
-
@function get-family-instance($key: get-value("settings", "default")) {
|
|
8
|
+
@function get-family-instance($key: get-value("settings", "default"), $syntax: $flint__support-syntax) {
|
|
15
9
|
$selector-string: selector_string();
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
10
|
+
|
|
11
|
+
// Check for syntax support, try to find instance using it
|
|
12
|
+
@if $syntax {
|
|
13
|
+
$selector-list: use-syntax($selector-string);
|
|
14
|
+
$length: length($selector-list);
|
|
15
|
+
|
|
16
|
+
// Loop through transformed selectors
|
|
17
|
+
@for $i from 1 through $length {
|
|
18
|
+
|
|
19
|
+
// Check last selector in list
|
|
20
|
+
@if exists($flint__instances, "#{last($selector-list)}::#{$key}") {
|
|
21
|
+
|
|
22
|
+
// Return the matching instance key
|
|
23
|
+
@return "#{last($selector-list)}::#{$key}";
|
|
24
|
+
|
|
25
|
+
} @else {
|
|
26
|
+
|
|
27
|
+
// Else, remove the last selector and loop again
|
|
28
|
+
$selector-list: remove($selector-list, last($selector-list));
|
|
29
|
+
|
|
30
|
+
}
|
|
28
31
|
}
|
|
29
|
-
}
|
|
30
32
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
+
// Search for a parent instance normally
|
|
34
|
+
@return get-family-instance($key, null);
|
|
35
|
+
|
|
36
|
+
} @else {
|
|
37
|
+
$selector-list: string-to-list($selector-string);
|
|
38
|
+
$length: length($selector-list);
|
|
39
|
+
|
|
40
|
+
// Loop through length of list of selectors
|
|
41
|
+
@for $i from 1 through $length {
|
|
42
|
+
|
|
43
|
+
// Make sure that we're not counting the current selector string
|
|
44
|
+
@if exists($flint__instances, "#{list-to-string($selector-list, " ")}::#{$key}") and $selector-string != list-to-string($selector-list, " ") {
|
|
45
|
+
|
|
46
|
+
// Return the matching instance key
|
|
47
|
+
@return "#{list-to-string($selector-list, " ")}::#{$key}";
|
|
48
|
+
|
|
49
|
+
} @else {
|
|
50
|
+
|
|
51
|
+
// Else, remove the last selector and loop again
|
|
52
|
+
$selector-list: remove($selector-list, last($selector-list));
|
|
53
|
+
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@return false;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
$space-indexes: ();
|
|
13
13
|
$ignore-remainder: ();
|
|
14
14
|
$length: str-length($string);
|
|
15
|
+
|
|
15
16
|
// Find ignore separator, and remove remainder of string beyond that point
|
|
16
17
|
@for $i from 1 through $length {
|
|
17
18
|
$slice: str-slice($string, $i, $i);
|
|
@@ -19,11 +20,13 @@
|
|
|
19
20
|
$ignore-remainder: append($ignore-remainder, $i - 1, "comma");
|
|
20
21
|
}
|
|
21
22
|
}
|
|
23
|
+
|
|
22
24
|
// Redefine string and length
|
|
23
25
|
@if length($ignore-remainder) >= 1 {
|
|
24
26
|
$string: str-slice($string, 1, nth($ignore-remainder, 1));
|
|
25
27
|
$length: str-length($string);
|
|
26
28
|
}
|
|
29
|
+
|
|
27
30
|
// Find all spaces and their indices by looking over each character in string
|
|
28
31
|
@for $i from 1 through $length {
|
|
29
32
|
$slice: str-slice($string, $i, $i);
|
|
@@ -31,36 +34,51 @@
|
|
|
31
34
|
$space-indexes: append($space-indexes, $i, "comma");
|
|
32
35
|
}
|
|
33
36
|
}
|
|
37
|
+
|
|
34
38
|
// Check if there are any spaces
|
|
35
39
|
@if length($space-indexes) >= 1 {
|
|
40
|
+
|
|
36
41
|
// Keep a count of number of spaces
|
|
37
42
|
$count: 1;
|
|
43
|
+
|
|
38
44
|
// Loop through each space
|
|
39
45
|
@each $space in $space-indexes {
|
|
46
|
+
|
|
40
47
|
// If is initial count, grab first substring and store in list
|
|
41
48
|
@if $count == 1 {
|
|
42
49
|
$matched-string: str-slice($string, 0, ($space - 1));
|
|
43
|
-
|
|
50
|
+
|
|
51
|
+
@if $matched-string != "" {
|
|
52
|
+
$string-list: append($string-list, $matched-string, "comma");
|
|
53
|
+
}
|
|
44
54
|
// Else, add a little math to make up for the spaces to do the same
|
|
45
55
|
} @else {
|
|
46
56
|
$matched-string: str-slice($string, (nth($space-indexes, ($count - 1)) + 1), ($space - 1));
|
|
47
|
-
|
|
57
|
+
|
|
58
|
+
@if $matched-string != "" {
|
|
59
|
+
$string-list: append($string-list, $matched-string, "comma");
|
|
60
|
+
}
|
|
48
61
|
}
|
|
62
|
+
|
|
49
63
|
// Increase count
|
|
50
64
|
$count: $count + 1;
|
|
51
65
|
}
|
|
66
|
+
|
|
52
67
|
// Now grab that last selector
|
|
53
68
|
$last-space: nth($space-indexes, length($space-indexes));
|
|
54
69
|
$matched-string: str-slice($string, ($last-space + 1), $length);
|
|
55
70
|
$string-list: append($string-list, $matched-string, "comma");
|
|
71
|
+
|
|
56
72
|
// Finally, return comma separated list of selectors
|
|
57
73
|
@return $string-list;
|
|
58
74
|
} @else {
|
|
75
|
+
|
|
59
76
|
// Else, just return the string as a single item list
|
|
60
77
|
$string-list: append($string-list, $string);
|
|
78
|
+
|
|
61
79
|
@return $string-list;
|
|
62
80
|
}
|
|
63
81
|
} @else {
|
|
64
82
|
@return "You did not input a valid string: #{$string}";
|
|
65
83
|
}
|
|
66
|
-
}
|
|
84
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
// Support BEM syntax
|
|
2
|
+
// -------------------------------------------------------------------------------
|
|
3
|
+
// @param $selectors [string] : string of selectors to parse
|
|
4
|
+
// -------------------------------------------------------------------------------
|
|
5
|
+
// @return [string] : parsed list of selectors according to syntax
|
|
6
|
+
|
|
7
|
+
@function support-syntax-bem($selectors) {
|
|
8
|
+
$selectors: string-to-list($selectors, "_");
|
|
9
|
+
$parent: nth($selectors, 1);
|
|
10
|
+
$selector-list: ($parent);
|
|
11
|
+
|
|
12
|
+
// Loop over each selector and build list of selectors
|
|
13
|
+
@each $selector in $selectors {
|
|
14
|
+
// Make sure current selector is not the parent
|
|
15
|
+
@if $selector != $parent {
|
|
16
|
+
// Save to selector list
|
|
17
|
+
$selector-list: append($selector-list, ($parent + "__" + $selector), "comma");
|
|
18
|
+
// Define new parent
|
|
19
|
+
$parent: $parent + "__" + $selector;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// Return the list of transformed selectors
|
|
24
|
+
@return $selector-list;
|
|
25
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
// Support syntax
|
|
2
|
+
// -------------------------------------------------------------------------------
|
|
3
|
+
// @param $syntax [string] : alias of syntax to support
|
|
4
|
+
// @param $selectors [string] : string of selectors to parse
|
|
5
|
+
// -------------------------------------------------------------------------------
|
|
6
|
+
// @return [list] : list of parsed selectors according to syntax
|
|
7
|
+
|
|
8
|
+
@function support-syntax($syntax, $selectors) {
|
|
9
|
+
$syntax: to-lower-case($syntax);
|
|
10
|
+
|
|
11
|
+
// Make sure syntax is supported
|
|
12
|
+
// ----
|
|
13
|
+
@if function-exists(support-syntax-#{$syntax}) {
|
|
14
|
+
|
|
15
|
+
// Support syntax
|
|
16
|
+
// ----
|
|
17
|
+
// @warning : be sure you have created a custom function to support an unknown syntax
|
|
18
|
+
// ----
|
|
19
|
+
@return call("support-syntax-#{$syntax}", $selectors);
|
|
20
|
+
|
|
21
|
+
} @else {
|
|
22
|
+
|
|
23
|
+
// Throw error if the syntax does not exist and a function to call cannot be found
|
|
24
|
+
@warn "You did not pass a valid syntax to `support-syntax`: #{$syntax}. Either specify a custom `support-syntax-<syntax>` function to call, or use one of the offically supported syntaxes.";
|
|
25
|
+
@return null;
|
|
26
|
+
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
// Use global syntax set through `set-syntax` mixin
|
|
2
|
+
// -------------------------------------------------------------------------------
|
|
3
|
+
// @param $selectors [string] : string of selectors to transform
|
|
4
|
+
// -------------------------------------------------------------------------------
|
|
5
|
+
// @return [list] : list of transformed selectors according to syntax
|
|
6
|
+
|
|
7
|
+
@function use-syntax($selectors) {
|
|
8
|
+
@if $flint__support-syntax {
|
|
9
|
+
@return call("support-syntax", $flint__support-syntax, $selectors);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -334,7 +334,7 @@
|
|
|
334
334
|
// -------------------------------------------------------------------------------
|
|
335
335
|
// @output calculated styles
|
|
336
336
|
|
|
337
|
-
} @else if types-in-list($span, "number")
|
|
337
|
+
} @else if types-in-list($span, "number") {
|
|
338
338
|
|
|
339
339
|
@for $i from 1 through length($flint__all__keys) {
|
|
340
340
|
|
|
@@ -477,7 +477,7 @@
|
|
|
477
477
|
// -------------------------------------------------------------------------------
|
|
478
478
|
// @output calculated styles
|
|
479
479
|
|
|
480
|
-
} @else if types-in-list($key, "number") and types-in-list($span, "number")
|
|
480
|
+
} @else if types-in-list($key, "number") and types-in-list($span, "number") {
|
|
481
481
|
|
|
482
482
|
@for $i from 1 through length($flint__all__keys) {
|
|
483
483
|
|
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: 1.
|
|
4
|
+
version: 1.6.0
|
|
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-
|
|
11
|
+
date: 2014-07-03 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: sass
|
|
@@ -75,7 +75,10 @@ files:
|
|
|
75
75
|
- stylesheets/flint/functions/lib/_steal-values.scss
|
|
76
76
|
- stylesheets/flint/functions/lib/_string-to-list.scss
|
|
77
77
|
- stylesheets/flint/functions/lib/_string-to-number.scss
|
|
78
|
+
- stylesheets/flint/functions/lib/_support-syntax-bem.scss
|
|
79
|
+
- stylesheets/flint/functions/lib/_support-syntax.scss
|
|
78
80
|
- stylesheets/flint/functions/lib/_types-in-list.scss
|
|
81
|
+
- stylesheets/flint/functions/lib/_use-syntax.scss
|
|
79
82
|
- stylesheets/flint/globals/_globals.scss
|
|
80
83
|
- stylesheets/flint/mixins/_mixins.scss
|
|
81
84
|
- stylesheets/flint/mixins/lib/_calculate.scss
|