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