flint-gs 1.7.0 → 1.7.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (42) hide show
  1. data/LICENSE +21 -21
  2. data/README.md +906 -906
  3. data/lib/flint.rb +77 -77
  4. data/stylesheets/_flint.scss +6 -6
  5. data/stylesheets/flint/config/_config.scss +83 -83
  6. data/stylesheets/flint/functions/_functions.scss +41 -41
  7. data/stylesheets/flint/functions/helpers/_helpers.scss +181 -187
  8. data/stylesheets/flint/functions/lib/_calc-breakpoint.scss +33 -33
  9. data/stylesheets/flint/functions/lib/_calc-margin.scss +57 -57
  10. data/stylesheets/flint/functions/lib/_calc-width.scss +50 -50
  11. data/stylesheets/flint/functions/lib/_exists.scss +22 -22
  12. data/stylesheets/flint/functions/lib/_fluid-width.scss +10 -10
  13. data/stylesheets/flint/functions/lib/_get-index.scss +13 -13
  14. data/stylesheets/flint/functions/lib/_get-instance-value.scss +17 -17
  15. data/stylesheets/flint/functions/lib/_get-value.scss +14 -14
  16. data/stylesheets/flint/functions/lib/_has-family-instance.scss +74 -74
  17. data/stylesheets/flint/functions/lib/_instance.scss +46 -46
  18. data/stylesheets/flint/functions/lib/_last.scss +9 -9
  19. data/stylesheets/flint/functions/lib/_list-to-string.scss +25 -25
  20. data/stylesheets/flint/functions/lib/_map-fetch.scss +30 -30
  21. data/stylesheets/flint/functions/lib/_next-index.scss +15 -15
  22. data/stylesheets/flint/functions/lib/_purge.scss +19 -19
  23. data/stylesheets/flint/functions/lib/_remove.scss +13 -13
  24. data/stylesheets/flint/functions/lib/_replace-substring.scss +34 -34
  25. data/stylesheets/flint/functions/lib/_replace.scss +25 -25
  26. data/stylesheets/flint/functions/lib/_steal-key.scss +13 -13
  27. data/stylesheets/flint/functions/lib/_steal-values.scss +14 -14
  28. data/stylesheets/flint/functions/lib/_string-to-list.scss +90 -90
  29. data/stylesheets/flint/functions/lib/_string-to-number.scss +77 -77
  30. data/stylesheets/flint/functions/lib/_support-syntax-bem.scss +31 -31
  31. data/stylesheets/flint/functions/lib/_support-syntax.scss +28 -28
  32. data/stylesheets/flint/functions/lib/_types-in-list.scss +119 -120
  33. data/stylesheets/flint/functions/lib/_use-syntax.scss +14 -14
  34. data/stylesheets/flint/globals/_globals.scss +38 -38
  35. data/stylesheets/flint/mixins/_mixins.scss +7 -7
  36. data/stylesheets/flint/mixins/lib/_calculate.scss +571 -571
  37. data/stylesheets/flint/mixins/lib/_clearfix.scss +19 -19
  38. data/stylesheets/flint/mixins/lib/_main.scss +935 -935
  39. data/stylesheets/flint/mixins/lib/_new-instance.scss +27 -27
  40. data/stylesheets/flint/mixins/lib/_print-instance.scss +42 -42
  41. metadata +22 -16
  42. checksums.yaml +0 -7
data/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- The MIT License (MIT)
2
-
3
- Copyright (c) 2014 Ezekiel Gabrielse
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2014 Ezekiel Gabrielse
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
data/README.md CHANGED
@@ -1,906 +1,906 @@
1
- # Flint [![Gem Version](https://badge.fury.io/rb/flint-gs.svg)](http://badge.fury.io/rb/flint-gs)
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 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
-
5
- Take it for a spin on [SassMeister.com](http://sassmeister.com/gist/11489231)!
6
-
7
- Enjoy.
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
-
31
- ## Requirements
32
-
33
- * Sass ~> `3.3.0`
34
- * Compass ~> `1.0.0.alpha.19`
35
-
36
- ## Installation
37
-
38
- 1. Install via Ruby `gem install flint-gs`, or Bower `bower install flint --save-dev`
39
- 2. Add `require "flint"` to your `config.rb`
40
- 3. Import it in your stylesheets with `@import "flint"`
41
-
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.
43
-
44
- ## Documentation
45
-
46
- ### Config
47
-
48
- Flint's `config` map is unique in the ability that you may define an unlimited number of breakpoints for your project. Whether that be 2 breakpoints, or even 12 breakpoints. Flint gives you full control over the column count on each breakpoint, and unlike most frameworks, you may name these anything that you like. Flint is smart and will figure out which one you're talking about.
49
-
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.
51
-
52
- ##### Usage
53
-
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.
55
-
56
- *Keep in mind, whatever unit you choose to use here needs to be used consistently throughout Flint. No mixing of `px` and `em` units. Also, Flint does require that you follow a `DESC` order for your breakpoint configuration, this way it can traverse the config map correctly to output valid media queries.*
57
-
58
- ```scss
59
- // Configuration map
60
- // -------------------------------------------------------------------------------
61
- // @param breakpoint [map] : Here you can set up your various breakpoints for your
62
- // project. Any number of breakpoints is acceptable. You must include a column
63
- // count and breakpoint value for each listed breakpoint. The order does have
64
- // to follow a `DESC` order. Unit (px | em) chosen here must be used consistently
65
- // throughout the rest of the config map.
66
- // -------------------------------------------------------------------------------
67
- // @param default [string] : alias of breakpoint that is your grid default
68
- // @param grid [string] : style of grid
69
- // @param gutter [number | false] : contextual size of gutter
70
- // @param float-style [number | false] : float direction
71
- // @param max-width [number | bool] : max-width for containers
72
- // @param center-container [bool] : if you want a centered container
73
- // @param border-box-sizing [bool] : if you want box-sizing: border-box applied
74
- // @param support-syntax [string | false] : syntax to support
75
- // @param debug-mode [bool] : ouputs debug properties
76
- // -------------------------------------------------------------------------------
77
-
78
- $flint: (
79
-
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": (
86
-
87
- // Options: 0-infinity
88
- "columns": 16,
89
-
90
- // Options: number[unit]
91
- "breakpoint": 80em,
92
- ),
93
-
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
- ),
109
-
110
- // Additional grid settings [required]
111
- "settings": (
112
-
113
- // Any breakpoint's alias
114
- "default": "mobile",
115
-
116
- // Options: fluid | fixed
117
- "grid": "fluid",
118
-
119
- // Options: number[unit]
120
- "gutter": 0.625em,
121
-
122
- // Options: left | right
123
- "float-style": "left",
124
-
125
- // Options: true [uses highest breakpoint] | false | number[unit]
126
- "max-width": true,
127
-
128
- // Options: true | false
129
- "center-container": true,
130
-
131
- // Options: true | false
132
- "border-box-sizing": true,
133
-
134
- // Syntax support: string | false
135
- "support-syntax": false,
136
-
137
- // Options: true | false
138
- "debug-mode": false,
139
- ),
140
- ),
141
- ) !default;
142
- ```
143
-
144
- ### Foundation
145
-
146
- If you selected `"border-box-sizing": true`, then it is *advised* to create a global foundation instance like so,
147
-
148
- ```scss
149
- @include _(foundation);
150
- ```
151
-
152
- That way your output won't be riddled with `box-sizing` declarations everytime you define a span. This will automatically output the rules onto the global selector `*`. In the future this might be automatic, but for now I'll keep it manual.
153
-
154
- ### Container
155
-
156
- Containers act as a row for each individual breakpoint, and if set in your config, uses a max-width. They do not float, so if you have `"center-container"` set to `true` then it will also center your element using `auto` left and right margins.
157
-
158
- ```scss
159
- .container {
160
- @include _(container);
161
- }
162
- ```
163
-
164
- Outputs,
165
- ```scss
166
- .container {
167
- display: block;
168
- float: none;
169
- width: 100%;
170
- max-width: 1280px
171
- margin-right: auto;
172
- margin-left: auto;
173
- }
174
- ```
175
-
176
- ### Clear
177
-
178
- Given that Flint is float based, you might find yourself needing to use a clearfix. Flint comes packaged with a micro-clearfix function.
179
-
180
- ```scss
181
- .clear {
182
- @include _(clear);
183
- }
184
- ```
185
-
186
- Outputs,
187
- ```scss
188
- .clear {
189
- zoom: 1;
190
- }
191
- .clear:before, .clear:after {
192
- content: "\0020";
193
- display: block;
194
- height: 0;
195
- overflow: hidden;
196
- }
197
- .clear:after {
198
- clear: both;
199
- }
200
- ```
201
-
202
- ### Recursive shorthand
203
-
204
- Use this if you want *identical* column spans across all breakpoints.
205
-
206
- ```scss
207
- .recursive {
208
- @include _(3);
209
- }
210
- ```
211
-
212
- Outputs, *(with debug mode on)*
213
- ```scss
214
- .recursive {
215
- display: block;
216
- float: left;
217
- width: 17.1875%;
218
- margin-right: 0.78125%;
219
- margin-left: 0.78125%;
220
- -flint-instance-count: 1;
221
- -flint-parent-instance: none;
222
- -flint-key: desktop;
223
- -flint-breakpoint: 1280px;
224
- -flint-columns: 16;
225
- -flint-span: 3;
226
- -flint-context: null;
227
- -flint-gutter: null;
228
- -flint-shift: null;
229
- -flint-output-width: 17.1875%;
230
- -flint-output-margin-right: 0.78125%;
231
- -flint-output-margin-left: 0.78125%;
232
- }
233
- @media only screen and (min-width: 641px) and (max-width: 960px) {
234
- .recursive {
235
- width: 22.91667%;
236
- margin-right: 1.04167%;
237
- margin-left: 1.04167%;
238
- -flint-instance-count: 2;
239
- -flint-parent-instance: none;
240
- -flint-key: laptop;
241
- -flint-breakpoint: 960px;
242
- -flint-columns: 12;
243
- -flint-span: 3;
244
- -flint-context: null;
245
- -flint-gutter: null;
246
- -flint-shift: null;
247
- -flint-output-width: 22.91667%;
248
- -flint-output-margin-right: 1.04167%;
249
- -flint-output-margin-left: 1.04167%;
250
- }
251
- }
252
- @media only screen and (min-width: 321px) and (max-width: 640px) {
253
- .recursive {
254
- width: 34.375%;
255
- margin-right: 1.5625%;
256
- margin-left: 1.5625%;
257
- -flint-instance-count: 3;
258
- -flint-parent-instance: none;
259
- -flint-key: tablet;
260
- -flint-breakpoint: 640px;
261
- -flint-columns: 8;
262
- -flint-span: 3;
263
- -flint-context: null;
264
- -flint-gutter: null;
265
- -flint-shift: null;
266
- -flint-output-width: 34.375%;
267
- -flint-output-margin-right: 1.5625%;
268
- -flint-output-margin-left: 1.5625%;
269
- }
270
- }
271
- @media only screen and (min-width: 0) and (max-width: 320px) {
272
- .recursive {
273
- width: 68.75%;
274
- margin-right: 3.125%;
275
- margin-left: 3.125%;
276
- -flint-instance-count: 4;
277
- -flint-parent-instance: none;
278
- -flint-key: mobile;
279
- -flint-breakpoint: 320px;
280
- -flint-columns: 4;
281
- -flint-span: 3;
282
- -flint-context: null;
283
- -flint-gutter: null;
284
- -flint-shift: null;
285
- -flint-output-width: 68.75%;
286
- -flint-output-margin-right: 3.125%;
287
- -flint-output-margin-left: 3.125%;
288
- }
289
- }
290
- ```
291
-
292
- As you can see, since `"desktop"` is the framework `"default"`, it uses the output for desktop as the base styles. You can set this to any breakpoint you like. **So if you like mobile-first, you can do that.**
293
-
294
- Whatever your `"default"` is set to, flint will not wrap those styles in media-queries, so that they may be used in non-supported browsers.
295
-
296
- ### Recursive shorthand with identical context
297
-
298
- Use this if your nested context is *identical* across all breakpoints. The `context` is the span of the elements parent. ***Update:*** You can now use `$context: auto`, and we'll do all the calculations for you. Just be sure a parent element with a Flint `instance` actually flint-exists or you'll get some weird output, or none at all. **Using `$context: auto` on fixed grids, the width with will be calculated by the parents width, instead of using the base breakpoints width.**
299
-
300
- ```scss
301
- // `auto` will work
302
- .parent {
303
- @include _(6);
304
-
305
- .recursive-child {
306
- @include _(3, auto); // Equivalent to : _(3, 6)
307
- }
308
- }
309
-
310
- // Will also work
311
- .parent {
312
- @include _(6);
313
- }
314
- .parent .recursive-child {
315
- @include _(3, auto); // Equivalent to : _(3, 6)
316
- }
317
-
318
- // Will not work, as the child has no relation to the parent within the stylesheet
319
- .parent {
320
- @include _(6);
321
- }
322
- .recursive-child {
323
- @include _(3, auto); // Equivalent to : _(3, 6)
324
- }
325
-
326
- // When using `auto`, Flint 'falls back' from the topmost selector until one is
327
- // found that has an instance, and it will calculate it's context based on that
328
- // instances span for the current breakpoint.
329
- ```
330
-
331
- Outputs,
332
- ```scss
333
- .recursive-child {
334
- display: block;
335
- float: left;
336
- width: 45.8333333333%;
337
- margin-right: 2.0833333333%;
338
- margin-left: 2.0833333333%;
339
- }
340
- @media only screen and (min-width: 641px) and (max-width: 960px) {
341
- .recursive-child {
342
- width: 45.8333333333%;
343
- margin-right: 2.0833333333%;
344
- margin-left: 2.0833333333%;
345
- }
346
- }
347
- @media only screen and (min-width: 321px) and (max-width: 640px) {
348
- .recursive-child {
349
- width: 45.8333333333%;
350
- margin-right: 2.0833333333%;
351
- margin-left: 2.0833333333%;
352
- }
353
- }
354
- @media only screen and (min-width: 0) and (max-width: 320px) {
355
- .recursive-child {
356
- width: 45.8333333333%;
357
- margin-right: 2.0833333333%;
358
- margin-left: 2.0833333333%;
359
- }
360
- }
361
- ```
362
-
363
- ### Recursive shorthand with variable context
364
-
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 flint-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.
368
-
369
- *You must include an argument for each breakpoint in your config.*
370
-
371
- ```scss
372
- .parent {
373
- @include _(10 8 6 4);
374
-
375
- .recursive-child {
376
- @include _(2, auto); // Equivalent to : _(2, 10 8 6 4)
377
- }
378
- }
379
- ```
380
-
381
- Outputs,
382
- ```scss
383
- recursive-child {
384
- display: block;
385
- float: left;
386
- width: 17.5%;
387
- margin-right: 1.25%;
388
- margin-left: 1.25%;
389
- }
390
- @media only screen and (min-width: 641px) and (max-width: 960px) {
391
- .recursive-child {
392
- width: 21.875%;
393
- margin-right: 1.5625%;
394
- margin-left: 1.5625%;
395
- }
396
- }
397
- @media only screen and (min-width: 321px) and (max-width: 640px) {
398
- .recursive-child {
399
- width: 29.1666666667%;
400
- margin-right: 2.0833333333%;
401
- margin-left: 2.0833333333%;
402
- }
403
- }
404
- @media only screen and (min-width: 0) and (max-width: 320px) {
405
- .recursive-child {
406
- width: 43.75%;
407
- margin-right: 3.125%;
408
- margin-left: 3.125%;
409
- }
410
- }
411
- ```
412
-
413
- ### Variable shorthand
414
-
415
- Use this if your content needs different spans across each breakpoints. The *order of operations* for this matches the order entered in your `config`.
416
-
417
- To hide an element on a specific breakpoint, input `0` as its span.
418
-
419
- *You must include an argument for each breakpoint in your config.*
420
-
421
- ```scss
422
- .variable {
423
- @include _(8 6 0 4);
424
- }
425
- ```
426
-
427
- Outputs,
428
- ```scss
429
- .variable {
430
- display: block;
431
- float: left;
432
- width: 48.4375%;
433
- margin-right: 0.78125%;
434
- margin-left: 0.78125%;
435
- }
436
- @media only screen and (min-width: 641px) and (max-width: 960px) {
437
- .variable {
438
- width: 47.91667%;
439
- margin-right: 1.04167%;
440
- margin-left: 1.04167%;
441
- }
442
- }
443
- @media only screen and (min-width: 321px) and (max-width: 640px) {
444
- .variable {
445
- display: none;
446
- }
447
- }
448
- @media only screen and (min-width: 0) and (max-width: 320px) {
449
- .variable {
450
- width: 93.75%;
451
- margin-right: 3.125%;
452
- margin-left: 3.125%;
453
- }
454
- }
455
- ```
456
-
457
- ### Variable shorthand with context
458
-
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 flint-exists or you'll get some weird output, or none at all.
460
-
461
- ```scss
462
- .parent {
463
- @include _(16 12 8 4);
464
-
465
- .variable-child {
466
- @include _(14 10 6 2, 16 12 8 4); // Equivalent to : _(14 10 6 2, auto)
467
- }
468
- }
469
- ```
470
-
471
- Outputs,
472
- ```scss
473
- .variable-child {
474
- display: block;
475
- float: left;
476
- width: 85.9375%;
477
- margin-right: 0.78125%;
478
- margin-left: 0.78125%;
479
- }
480
- @media only screen and (min-width: 641px) and (max-width: 960px) {
481
- .variable-child {
482
- width: 81.25%;
483
- margin-right: 1.0416666667%;
484
- margin-left: 1.0416666667%;
485
- }
486
- }
487
- @media only screen and (min-width: 321px) and (max-width: 640px) {
488
- .variable-child {
489
- width: 71.875%;
490
- margin-right: 1.5625%;
491
- margin-left: 1.5625%;
492
- }
493
- }
494
- @media only screen and (min-width: 0) and (max-width: 320px) {
495
- .variable-child {
496
- width: 43.75%;
497
- margin-right: 3.125%;
498
- margin-left: 3.125%;
499
- }
500
- }
501
- ```
502
-
503
- ### Wrapping in media queries
504
-
505
- Use these if you need to apply breakpoint specific styling.
506
-
507
- ```scss
508
- .wrap {
509
- @include _(desktop) {
510
- // only desktop
511
- }
512
- }
513
- .wrap {
514
- @include _(greater than mobile) {
515
- // all sizes above mobile's breakpoint
516
- }
517
- }
518
- .wrap {
519
- @include _(10em greater than tablet) {
520
- // all sizes 10em above tablet's breakpoint
521
- }
522
- }
523
- .wrap {
524
- @include _(greater than 60em) {
525
- // all sizes above 60em
526
- }
527
- }
528
- .wrap {
529
- @include _(less than tablet) {
530
- // all sizes under tablet
531
- }
532
- }
533
- .wrap {
534
- @include _(1em less than laptop) {
535
- // all sizes 1em under laptop
536
- }
537
- }
538
- .wrap {
539
- @include _(less than 40em) {
540
- // all sizes under 40em
541
- }
542
- }
543
- .wrap {
544
- @include _(for desktop tablet) {
545
- // only for desktop and tablet
546
- }
547
- }
548
- .wrap {
549
- @include _(from mobile to laptop) {
550
- // all sizes from mobile to laptop
551
- }
552
- }
553
- .wrap {
554
- @include _(from desktop to infinity) {
555
- // all sizes from desktop to infinity
556
- }
557
- }
558
- .wrap {
559
- @include _(from 20em to 40em) {
560
- // all sizes from 20em to 40em
561
- }
562
- }
563
- ```
564
-
565
- ### Call by alias
566
-
567
- Use if you want to define each span without shorthands.
568
-
569
- ```scss
570
- .name {
571
- @include _(desktop, 8);
572
- @include _(laptop, 4);
573
- @include _(tablet, 8);
574
- @include _(mobile, 4);
575
- }
576
-
577
- // with context,
578
- // .name {
579
- // @include _(desktop, 4, 16, $gutter: alpha);
580
- // }
581
- ```
582
-
583
- Outputs,
584
- ```scss
585
- .name {
586
- display: block;
587
- float: left;
588
- width: 48.4375%;
589
- margin-right: 0.78125%;
590
- margin-left: 0.78125%;
591
- }
592
- @media only screen and (min-width: 641px) and (max-width: 960px) {
593
- .name {
594
- width: 31.25%;
595
- margin-right: 1.04167%;
596
- margin-left: 1.04167%;
597
- }
598
- }
599
- @media only screen and (min-width: 321px) and (max-width: 640px) {
600
- .name {
601
- width: 96.875%;
602
- margin-right: 1.5625%;
603
- margin-left: 1.5625%;
604
- }
605
- }
606
- @media only screen and (min-width: 0) and (max-width: 320px) {
607
- .name {
608
- width: 93.75%;
609
- margin-right: 3.125%;
610
- margin-left: 3.125%;
611
- }
612
- }
613
- ```
614
-
615
- ### Gutter modifiers
616
-
617
- Here are different gutter modifiers that may be called in when defining spans using the `$gutter` variable. The `$gutter` variable allows you to pass in either a recursive argument, or a variable argument, similar to `$span`.
618
-
619
- ```scss
620
- // default margins
621
- .gutter-default {
622
- // other aliases : `normal` | `regular`
623
- @include _(desktop, 4, $gutter: default);
624
- }
625
-
626
- // no left margin
627
- .gutter-alpha {
628
- // other aliases : `no-left` | `first`
629
- @include _(desktop, 4, $gutter: alpha);
630
- }
631
-
632
- // no right margin
633
- .gutter-omega {
634
- // other aliases : `no-right` | `flint-last`
635
- @include _(desktop, 4, $gutter: omega);
636
- }
637
-
638
- // no margins
639
- .gutter-row {
640
- // other alias : `none`
641
- @include _(desktop, 4, $gutter: row);
642
- }
643
-
644
- // places gutters on inside by reducing column width by [gutter*2]
645
- .gutter-inside {
646
- @include _(desktop, 4, $gutter: inside);
647
- }
648
-
649
- // variable gutter
650
- .variable-gutter {
651
- @include _(16 12 8 4, $gutter: row alpha omega normal);
652
- }
653
-
654
- // recursive gutter
655
- .recursive-gutter {
656
- @include _(16 12 8 4, $gutter: row);
657
- }
658
- ```
659
- Outputs,
660
- ```scss
661
- .gutter-alpha {
662
- display: block;
663
- float: left;
664
- width: 24.21875%;
665
- margin-right: 0.78125%;
666
- margin-left: 0;
667
- }
668
- .gutter-omega {
669
- display: block;
670
- float: left;
671
- width: 24.21875%;
672
- margin-right: 0;
673
- margin-left: 0.78125%;
674
- }
675
- .gutter-row {
676
- display: block;
677
- float: left;
678
- width: 25%;
679
- margin-right: 0;
680
- margin-left: 0;
681
- }
682
- .gutter-inside {
683
- display: block;
684
- float: left;
685
- width: 21.875%;
686
- margin-right: 0.78125%;
687
- margin-left: 0.78125%;
688
- }
689
- .variable-gutter {
690
- display: block;
691
- float: left;
692
- width: 100%;
693
- margin-right: 0;
694
- margin-left: 0;
695
- }
696
- @media only screen and (min-width: 641px) and (max-width: 960px) {
697
- .variable-gutter {
698
- width: 98.95833%;
699
- margin-right: 1.04167%;
700
- margin-left: 0;
701
- }
702
- }
703
- @media only screen and (min-width: 321px) and (max-width: 640px) {
704
- .variable-gutter {
705
- width: 98.4375%;
706
- margin-right: 0;
707
- margin-left: 1.5625%;
708
- }
709
- }
710
- @media only screen and (min-width: 0) and (max-width: 320px) {
711
- .variable-gutter {
712
- width: 87.5%;
713
- margin-right: 3.125%;
714
- margin-left: 3.125%;
715
- }
716
- }
717
- .recursive-gutter {
718
- display: block;
719
- float: left;
720
- width: 100%;
721
- margin-right: 0;
722
- margin-left: 0;
723
- }
724
- @media only screen and (min-width: 641px) and (max-width: 960px) {
725
- .recursive-gutter {
726
- width: 100%;
727
- margin-right: 0;
728
- margin-left: 0;
729
- }
730
- }
731
- @media only screen and (min-width: 321px) and (max-width: 640px) {
732
- .recursive-gutter {
733
- width: 100%;
734
- margin-right: 0;
735
- margin-left: 0;
736
- }
737
- }
738
- @media only screen and (min-width: 0) and (max-width: 320px) {
739
- .recursive-gutter {
740
- width: 100%;
741
- margin-right: 0;
742
- margin-left: 0;
743
- }
744
- }
745
- ```
746
-
747
- ### Shift
748
-
749
- Much like the gutter modifiers, you may also call in a shift parameter using the `$shift` variable. This will cause the element to shift the desired amount of columns using positive/negative left margins.
750
-
751
- ```scss
752
- // shift 4 columns to the right across all breakpoints
753
- .name {
754
- @include _(12 12 8 4, $shift: 4);
755
- }
756
-
757
- // shift 2 columns to the left across specified breakpoints
758
- .name {
759
- @include _(12 12 8 4, $shift: -2 -2 0 0);
760
- }
761
- ```
762
-
763
- **One more** cool thing about flint is that you are not bound to the grid you define. Feel free to use decimals and math based on the breakpoint's column count in your arguments for extra fine tuned control over your layouts. Examples include, `decimals: (1.25), (3.333)`, `math: (3 - 2), (2 + 9), (16 / 3)`.
764
-
765
- ```scss
766
- .break-the-grid {
767
- @include _(16/3 12.1 8.9 (5 - 1), $shift: 1.2 0 2 0, $gutter: row);
768
- }
769
- ```
770
- Outputs,
771
- ```scss
772
- .break-the-grid {
773
- display: block;
774
- float: left;
775
- width: 33.33333%;
776
- margin-right: 0;
777
- margin-left: 7.5%;
778
- -flint-instance-count: 9;
779
- -flint-parent-instance: none;
780
- -flint-key: desktop;
781
- -flint-breakpoint: 1280px;
782
- -flint-columns: 16;
783
- -flint-span: 5.33333;
784
- -flint-context: null;
785
- -flint-gutter: row;
786
- -flint-shift: 1.2;
787
- -flint--output-width: 33.33333%;
788
- -flint--output-margin-right: 0;
789
- -flint--output-margin-left: 7.5%;
790
- }
791
- @media only screen and (min-width: 641px) and (max-width: 960px) {
792
- .break-the-grid {
793
- width: 100.83333%;
794
- margin-right: 0;
795
- margin-left: 0%;
796
- -flint-instance-count: 10;
797
- -flint-parent-instance: none;
798
- -flint-key: laptop;
799
- -flint-breakpoint: 960px;
800
- -flint-columns: 12;
801
- -flint-span: 12.1;
802
- -flint-context: null;
803
- -flint-gutter: row;
804
- -flint-shift: 0;
805
- -flint--output-width: 100.83333%;
806
- -flint--output-margin-right: 0;
807
- -flint--output-margin-left: 0%;
808
- }
809
- }
810
- @media only screen and (min-width: 321px) and (max-width: 640px) {
811
- .break-the-grid {
812
- width: 111.25%;
813
- margin-right: 0;
814
- margin-left: 25%;
815
- -flint-instance-count: 11;
816
- -flint-parent-instance: none;
817
- -flint-key: tablet;
818
- -flint-breakpoint: 640px;
819
- -flint-columns: 8;
820
- -flint-span: 8.9;
821
- -flint-context: null;
822
- -flint-gutter: row;
823
- -flint-shift: 2;
824
- -flint--output-width: 111.25%;
825
- -flint--output-margin-right: 0;
826
- -flint--output-margin-left: 25%;
827
- }
828
- }
829
- @media only screen and (min-width: 0) and (max-width: 320px) {
830
- .break-the-grid {
831
- width: 100%;
832
- margin-right: 0;
833
- margin-left: 0%;
834
- -flint-instance-count: 12;
835
- -flint-parent-instance: none;
836
- -flint-key: mobile;
837
- -flint-breakpoint: 320px;
838
- -flint-columns: 4;
839
- -flint-span: 4;
840
- -flint-context: null;
841
- -flint-gutter: row;
842
- -flint-shift: 0;
843
- -flint--output-width: 100%;
844
- -flint--output-margin-right: 0;
845
- -flint--output-margin-left: 0%;
846
- }
847
- }
848
- ```
849
-
850
- ## Syntax support
851
-
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,
855
-
856
- ```scss
857
- // Support BEM syntax
858
- // -------------------------------------------------------------------------------
859
- // @param $selectors [string] : string of selectors to parse
860
- // -------------------------------------------------------------------------------
861
- // @return [list] : parsed list of selectors according to syntax
862
-
863
- @function flint-support-syntax-bem($selectors) {
864
- // Clean up selector, remove double underscores for spaces
865
- // add psudeo character to differentiate selectors
866
- $selectors: flint-replace-substring($selectors, "__", "/");
867
- // Parse string to list
868
- $selectors: flint-string-to-list($selectors, "/");
869
- // Define top-most parent of selector
870
- $parent: nth($selectors, 1);
871
- // Create new list of parsed selectors
872
- $selector-list: ($parent);
873
-
874
- // Loop over each selector and build list of selectors
875
- @each $selector in $selectors {
876
- // Make sure current selector is not the parent
877
- @if $selector != $parent {
878
- // Save to selector list
879
- $selector-list: append($selector-list, ($parent + "__" + $selector), "comma");
880
- // Define new parent
881
- $parent: $parent + "__" + $selector;
882
- }
883
- }
884
-
885
- // Return the list of parsed selectors
886
- @return $selector-list;
887
- }
888
- ```
889
-
890
- This will be parsed into a list of selectors: `.block, .block__element, .block__element__element`. The list of selectors can then be used by
891
- instance system to look up a selectors parent, etc. To support your own preferred syntax: create a `flint-support-syntax-<syntax-name>` function
892
- and hook into it through the config `"flint-support-syntax": "<syntax-name>"` option -- the system will attempt to use the `call()` function in
893
- order to parse the selector string.
894
-
895
- #### Officially supported syntaxes
896
- * [BEM](http://bem.info/)
897
-
898
- If you make one that isn't here, let me know and I'll look into officially supporting it.
899
-
900
- ## Authors
901
-
902
- [Ezekiel Gabrielse](http://ezekielg.com)
903
-
904
- ## License
905
-
906
- Flint is available under the [MIT](http://opensource.org/licenses/MIT) license.
1
+ # Flint [![Gem Version](https://badge.fury.io/rb/flint-gs.svg)](http://badge.fury.io/rb/flint-gs)
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 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
+
5
+ Take it for a spin on [SassMeister.com](http://sassmeister.com/gist/11489231)!
6
+
7
+ Enjoy.
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
+
31
+ ## Requirements
32
+
33
+ * Sass ~> `3.3.0`
34
+ * Compass ~> `1.0.0.alpha.19`
35
+
36
+ ## Installation
37
+
38
+ 1. Install via Ruby `gem install flint-gs`, or Bower `bower install flint --save-dev`
39
+ 2. Add `require "flint"` to your `config.rb`
40
+ 3. Import it in your stylesheets with `@import "flint"`
41
+
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.
43
+
44
+ ## Documentation
45
+
46
+ ### Config
47
+
48
+ Flint's `config` map is unique in the ability that you may define an unlimited number of breakpoints for your project. Whether that be 2 breakpoints, or even 12 breakpoints. Flint gives you full control over the column count on each breakpoint, and unlike most frameworks, you may name these anything that you like. Flint is smart and will figure out which one you're talking about.
49
+
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.
51
+
52
+ ##### Usage
53
+
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.
55
+
56
+ *Keep in mind, whatever unit you choose to use here needs to be used consistently throughout Flint. No mixing of `px` and `em` units. Also, Flint does require that you follow a `DESC` order for your breakpoint configuration, this way it can traverse the config map correctly to output valid media queries.*
57
+
58
+ ```scss
59
+ // Configuration map
60
+ // -------------------------------------------------------------------------------
61
+ // @param breakpoint [map] : Here you can set up your various breakpoints for your
62
+ // project. Any number of breakpoints is acceptable. You must include a column
63
+ // count and breakpoint value for each listed breakpoint. The order does have
64
+ // to follow a `DESC` order. Unit (px | em) chosen here must be used consistently
65
+ // throughout the rest of the config map.
66
+ // -------------------------------------------------------------------------------
67
+ // @param default [string] : alias of breakpoint that is your grid default
68
+ // @param grid [string] : style of grid
69
+ // @param gutter [number | false] : contextual size of gutter
70
+ // @param float-style [number | false] : float direction
71
+ // @param max-width [number | bool] : max-width for containers
72
+ // @param center-container [bool] : if you want a centered container
73
+ // @param border-box-sizing [bool] : if you want box-sizing: border-box applied
74
+ // @param support-syntax [string | false] : syntax to support
75
+ // @param debug-mode [bool] : ouputs debug properties
76
+ // -------------------------------------------------------------------------------
77
+
78
+ $flint: (
79
+
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": (
86
+
87
+ // Options: 0-infinity
88
+ "columns": 16,
89
+
90
+ // Options: number[unit]
91
+ "breakpoint": 80em,
92
+ ),
93
+
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
+ ),
109
+
110
+ // Additional grid settings [required]
111
+ "settings": (
112
+
113
+ // Any breakpoint's alias
114
+ "default": "mobile",
115
+
116
+ // Options: fluid | fixed
117
+ "grid": "fluid",
118
+
119
+ // Options: number[unit]
120
+ "gutter": 0.625em,
121
+
122
+ // Options: left | right
123
+ "float-style": "left",
124
+
125
+ // Options: true [uses highest breakpoint] | false | number[unit]
126
+ "max-width": true,
127
+
128
+ // Options: true | false
129
+ "center-container": true,
130
+
131
+ // Options: true | false
132
+ "border-box-sizing": true,
133
+
134
+ // Syntax support: string | false
135
+ "support-syntax": false,
136
+
137
+ // Options: true | false
138
+ "debug-mode": false,
139
+ ),
140
+ ),
141
+ ) !default;
142
+ ```
143
+
144
+ ### Foundation
145
+
146
+ If you selected `"border-box-sizing": true`, then it is *advised* to create a global foundation instance like so,
147
+
148
+ ```scss
149
+ @include _(foundation);
150
+ ```
151
+
152
+ That way your output won't be riddled with `box-sizing` declarations everytime you define a span. This will automatically output the rules onto the global selector `*`. In the future this might be automatic, but for now I'll keep it manual.
153
+
154
+ ### Container
155
+
156
+ Containers act as a row for each individual breakpoint, and if set in your config, uses a max-width. They do not float, so if you have `"center-container"` set to `true` then it will also center your element using `auto` left and right margins.
157
+
158
+ ```scss
159
+ .container {
160
+ @include _(container);
161
+ }
162
+ ```
163
+
164
+ Outputs,
165
+ ```scss
166
+ .container {
167
+ display: block;
168
+ float: none;
169
+ width: 100%;
170
+ max-width: 1280px
171
+ margin-right: auto;
172
+ margin-left: auto;
173
+ }
174
+ ```
175
+
176
+ ### Clear
177
+
178
+ Given that Flint is float based, you might find yourself needing to use a clearfix. Flint comes packaged with a micro-clearfix function.
179
+
180
+ ```scss
181
+ .clear {
182
+ @include _(clear);
183
+ }
184
+ ```
185
+
186
+ Outputs,
187
+ ```scss
188
+ .clear {
189
+ zoom: 1;
190
+ }
191
+ .clear:before, .clear:after {
192
+ content: "\0020";
193
+ display: block;
194
+ height: 0;
195
+ overflow: hidden;
196
+ }
197
+ .clear:after {
198
+ clear: both;
199
+ }
200
+ ```
201
+
202
+ ### Recursive shorthand
203
+
204
+ Use this if you want *identical* column spans across all breakpoints.
205
+
206
+ ```scss
207
+ .recursive {
208
+ @include _(3);
209
+ }
210
+ ```
211
+
212
+ Outputs, *(with debug mode on)*
213
+ ```scss
214
+ .recursive {
215
+ display: block;
216
+ float: left;
217
+ width: 17.1875%;
218
+ margin-right: 0.78125%;
219
+ margin-left: 0.78125%;
220
+ -flint-instance-count: 1;
221
+ -flint-parent-instance: none;
222
+ -flint-key: desktop;
223
+ -flint-breakpoint: 1280px;
224
+ -flint-columns: 16;
225
+ -flint-span: 3;
226
+ -flint-context: null;
227
+ -flint-gutter: null;
228
+ -flint-shift: null;
229
+ -flint-output-width: 17.1875%;
230
+ -flint-output-margin-right: 0.78125%;
231
+ -flint-output-margin-left: 0.78125%;
232
+ }
233
+ @media only screen and (min-width: 641px) and (max-width: 960px) {
234
+ .recursive {
235
+ width: 22.91667%;
236
+ margin-right: 1.04167%;
237
+ margin-left: 1.04167%;
238
+ -flint-instance-count: 2;
239
+ -flint-parent-instance: none;
240
+ -flint-key: laptop;
241
+ -flint-breakpoint: 960px;
242
+ -flint-columns: 12;
243
+ -flint-span: 3;
244
+ -flint-context: null;
245
+ -flint-gutter: null;
246
+ -flint-shift: null;
247
+ -flint-output-width: 22.91667%;
248
+ -flint-output-margin-right: 1.04167%;
249
+ -flint-output-margin-left: 1.04167%;
250
+ }
251
+ }
252
+ @media only screen and (min-width: 321px) and (max-width: 640px) {
253
+ .recursive {
254
+ width: 34.375%;
255
+ margin-right: 1.5625%;
256
+ margin-left: 1.5625%;
257
+ -flint-instance-count: 3;
258
+ -flint-parent-instance: none;
259
+ -flint-key: tablet;
260
+ -flint-breakpoint: 640px;
261
+ -flint-columns: 8;
262
+ -flint-span: 3;
263
+ -flint-context: null;
264
+ -flint-gutter: null;
265
+ -flint-shift: null;
266
+ -flint-output-width: 34.375%;
267
+ -flint-output-margin-right: 1.5625%;
268
+ -flint-output-margin-left: 1.5625%;
269
+ }
270
+ }
271
+ @media only screen and (min-width: 0) and (max-width: 320px) {
272
+ .recursive {
273
+ width: 68.75%;
274
+ margin-right: 3.125%;
275
+ margin-left: 3.125%;
276
+ -flint-instance-count: 4;
277
+ -flint-parent-instance: none;
278
+ -flint-key: mobile;
279
+ -flint-breakpoint: 320px;
280
+ -flint-columns: 4;
281
+ -flint-span: 3;
282
+ -flint-context: null;
283
+ -flint-gutter: null;
284
+ -flint-shift: null;
285
+ -flint-output-width: 68.75%;
286
+ -flint-output-margin-right: 3.125%;
287
+ -flint-output-margin-left: 3.125%;
288
+ }
289
+ }
290
+ ```
291
+
292
+ As you can see, since `"desktop"` is the framework `"default"`, it uses the output for desktop as the base styles. You can set this to any breakpoint you like. **So if you like mobile-first, you can do that.**
293
+
294
+ Whatever your `"default"` is set to, flint will not wrap those styles in media-queries, so that they may be used in non-supported browsers.
295
+
296
+ ### Recursive shorthand with identical context
297
+
298
+ Use this if your nested context is *identical* across all breakpoints. The `context` is the span of the elements parent. ***Update:*** You can now use `$context: auto`, and we'll do all the calculations for you. Just be sure a parent element with a Flint `instance` actually flint-exists or you'll get some weird output, or none at all. **Using `$context: auto` on fixed grids, the width with will be calculated by the parents width, instead of using the base breakpoints width.**
299
+
300
+ ```scss
301
+ // `auto` will work
302
+ .parent {
303
+ @include _(6);
304
+
305
+ .recursive-child {
306
+ @include _(3, auto); // Equivalent to : _(3, 6)
307
+ }
308
+ }
309
+
310
+ // Will also work
311
+ .parent {
312
+ @include _(6);
313
+ }
314
+ .parent .recursive-child {
315
+ @include _(3, auto); // Equivalent to : _(3, 6)
316
+ }
317
+
318
+ // Will not work, as the child has no relation to the parent within the stylesheet
319
+ .parent {
320
+ @include _(6);
321
+ }
322
+ .recursive-child {
323
+ @include _(3, auto); // Equivalent to : _(3, 6)
324
+ }
325
+
326
+ // When using `auto`, Flint 'falls back' from the topmost selector until one is
327
+ // found that has an instance, and it will calculate it's context based on that
328
+ // instances span for the current breakpoint.
329
+ ```
330
+
331
+ Outputs,
332
+ ```scss
333
+ .recursive-child {
334
+ display: block;
335
+ float: left;
336
+ width: 45.8333333333%;
337
+ margin-right: 2.0833333333%;
338
+ margin-left: 2.0833333333%;
339
+ }
340
+ @media only screen and (min-width: 641px) and (max-width: 960px) {
341
+ .recursive-child {
342
+ width: 45.8333333333%;
343
+ margin-right: 2.0833333333%;
344
+ margin-left: 2.0833333333%;
345
+ }
346
+ }
347
+ @media only screen and (min-width: 321px) and (max-width: 640px) {
348
+ .recursive-child {
349
+ width: 45.8333333333%;
350
+ margin-right: 2.0833333333%;
351
+ margin-left: 2.0833333333%;
352
+ }
353
+ }
354
+ @media only screen and (min-width: 0) and (max-width: 320px) {
355
+ .recursive-child {
356
+ width: 45.8333333333%;
357
+ margin-right: 2.0833333333%;
358
+ margin-left: 2.0833333333%;
359
+ }
360
+ }
361
+ ```
362
+
363
+ ### Recursive shorthand with variable context
364
+
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 flint-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.
368
+
369
+ *You must include an argument for each breakpoint in your config.*
370
+
371
+ ```scss
372
+ .parent {
373
+ @include _(10 8 6 4);
374
+
375
+ .recursive-child {
376
+ @include _(2, auto); // Equivalent to : _(2, 10 8 6 4)
377
+ }
378
+ }
379
+ ```
380
+
381
+ Outputs,
382
+ ```scss
383
+ recursive-child {
384
+ display: block;
385
+ float: left;
386
+ width: 17.5%;
387
+ margin-right: 1.25%;
388
+ margin-left: 1.25%;
389
+ }
390
+ @media only screen and (min-width: 641px) and (max-width: 960px) {
391
+ .recursive-child {
392
+ width: 21.875%;
393
+ margin-right: 1.5625%;
394
+ margin-left: 1.5625%;
395
+ }
396
+ }
397
+ @media only screen and (min-width: 321px) and (max-width: 640px) {
398
+ .recursive-child {
399
+ width: 29.1666666667%;
400
+ margin-right: 2.0833333333%;
401
+ margin-left: 2.0833333333%;
402
+ }
403
+ }
404
+ @media only screen and (min-width: 0) and (max-width: 320px) {
405
+ .recursive-child {
406
+ width: 43.75%;
407
+ margin-right: 3.125%;
408
+ margin-left: 3.125%;
409
+ }
410
+ }
411
+ ```
412
+
413
+ ### Variable shorthand
414
+
415
+ Use this if your content needs different spans across each breakpoints. The *order of operations* for this matches the order entered in your `config`.
416
+
417
+ To hide an element on a specific breakpoint, input `0` as its span.
418
+
419
+ *You must include an argument for each breakpoint in your config.*
420
+
421
+ ```scss
422
+ .variable {
423
+ @include _(8 6 0 4);
424
+ }
425
+ ```
426
+
427
+ Outputs,
428
+ ```scss
429
+ .variable {
430
+ display: block;
431
+ float: left;
432
+ width: 48.4375%;
433
+ margin-right: 0.78125%;
434
+ margin-left: 0.78125%;
435
+ }
436
+ @media only screen and (min-width: 641px) and (max-width: 960px) {
437
+ .variable {
438
+ width: 47.91667%;
439
+ margin-right: 1.04167%;
440
+ margin-left: 1.04167%;
441
+ }
442
+ }
443
+ @media only screen and (min-width: 321px) and (max-width: 640px) {
444
+ .variable {
445
+ display: none;
446
+ }
447
+ }
448
+ @media only screen and (min-width: 0) and (max-width: 320px) {
449
+ .variable {
450
+ width: 93.75%;
451
+ margin-right: 3.125%;
452
+ margin-left: 3.125%;
453
+ }
454
+ }
455
+ ```
456
+
457
+ ### Variable shorthand with context
458
+
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 flint-exists or you'll get some weird output, or none at all.
460
+
461
+ ```scss
462
+ .parent {
463
+ @include _(16 12 8 4);
464
+
465
+ .variable-child {
466
+ @include _(14 10 6 2, 16 12 8 4); // Equivalent to : _(14 10 6 2, auto)
467
+ }
468
+ }
469
+ ```
470
+
471
+ Outputs,
472
+ ```scss
473
+ .variable-child {
474
+ display: block;
475
+ float: left;
476
+ width: 85.9375%;
477
+ margin-right: 0.78125%;
478
+ margin-left: 0.78125%;
479
+ }
480
+ @media only screen and (min-width: 641px) and (max-width: 960px) {
481
+ .variable-child {
482
+ width: 81.25%;
483
+ margin-right: 1.0416666667%;
484
+ margin-left: 1.0416666667%;
485
+ }
486
+ }
487
+ @media only screen and (min-width: 321px) and (max-width: 640px) {
488
+ .variable-child {
489
+ width: 71.875%;
490
+ margin-right: 1.5625%;
491
+ margin-left: 1.5625%;
492
+ }
493
+ }
494
+ @media only screen and (min-width: 0) and (max-width: 320px) {
495
+ .variable-child {
496
+ width: 43.75%;
497
+ margin-right: 3.125%;
498
+ margin-left: 3.125%;
499
+ }
500
+ }
501
+ ```
502
+
503
+ ### Wrapping in media queries
504
+
505
+ Use these if you need to apply breakpoint specific styling.
506
+
507
+ ```scss
508
+ .wrap {
509
+ @include _(desktop) {
510
+ // only desktop
511
+ }
512
+ }
513
+ .wrap {
514
+ @include _(greater than mobile) {
515
+ // all sizes above mobile's breakpoint
516
+ }
517
+ }
518
+ .wrap {
519
+ @include _(10em greater than tablet) {
520
+ // all sizes 10em above tablet's breakpoint
521
+ }
522
+ }
523
+ .wrap {
524
+ @include _(greater than 60em) {
525
+ // all sizes above 60em
526
+ }
527
+ }
528
+ .wrap {
529
+ @include _(less than tablet) {
530
+ // all sizes under tablet
531
+ }
532
+ }
533
+ .wrap {
534
+ @include _(1em less than laptop) {
535
+ // all sizes 1em under laptop
536
+ }
537
+ }
538
+ .wrap {
539
+ @include _(less than 40em) {
540
+ // all sizes under 40em
541
+ }
542
+ }
543
+ .wrap {
544
+ @include _(for desktop tablet) {
545
+ // only for desktop and tablet
546
+ }
547
+ }
548
+ .wrap {
549
+ @include _(from mobile to laptop) {
550
+ // all sizes from mobile to laptop
551
+ }
552
+ }
553
+ .wrap {
554
+ @include _(from desktop to infinity) {
555
+ // all sizes from desktop to infinity
556
+ }
557
+ }
558
+ .wrap {
559
+ @include _(from 20em to 40em) {
560
+ // all sizes from 20em to 40em
561
+ }
562
+ }
563
+ ```
564
+
565
+ ### Call by alias
566
+
567
+ Use if you want to define each span without shorthands.
568
+
569
+ ```scss
570
+ .name {
571
+ @include _(desktop, 8);
572
+ @include _(laptop, 4);
573
+ @include _(tablet, 8);
574
+ @include _(mobile, 4);
575
+ }
576
+
577
+ // with context,
578
+ // .name {
579
+ // @include _(desktop, 4, 16, $gutter: alpha);
580
+ // }
581
+ ```
582
+
583
+ Outputs,
584
+ ```scss
585
+ .name {
586
+ display: block;
587
+ float: left;
588
+ width: 48.4375%;
589
+ margin-right: 0.78125%;
590
+ margin-left: 0.78125%;
591
+ }
592
+ @media only screen and (min-width: 641px) and (max-width: 960px) {
593
+ .name {
594
+ width: 31.25%;
595
+ margin-right: 1.04167%;
596
+ margin-left: 1.04167%;
597
+ }
598
+ }
599
+ @media only screen and (min-width: 321px) and (max-width: 640px) {
600
+ .name {
601
+ width: 96.875%;
602
+ margin-right: 1.5625%;
603
+ margin-left: 1.5625%;
604
+ }
605
+ }
606
+ @media only screen and (min-width: 0) and (max-width: 320px) {
607
+ .name {
608
+ width: 93.75%;
609
+ margin-right: 3.125%;
610
+ margin-left: 3.125%;
611
+ }
612
+ }
613
+ ```
614
+
615
+ ### Gutter modifiers
616
+
617
+ Here are different gutter modifiers that may be called in when defining spans using the `$gutter` variable. The `$gutter` variable allows you to pass in either a recursive argument, or a variable argument, similar to `$span`.
618
+
619
+ ```scss
620
+ // default margins
621
+ .gutter-default {
622
+ // other aliases : `normal` | `regular`
623
+ @include _(desktop, 4, $gutter: default);
624
+ }
625
+
626
+ // no left margin
627
+ .gutter-alpha {
628
+ // other aliases : `no-left` | `first`
629
+ @include _(desktop, 4, $gutter: alpha);
630
+ }
631
+
632
+ // no right margin
633
+ .gutter-omega {
634
+ // other aliases : `no-right` | `flint-last`
635
+ @include _(desktop, 4, $gutter: omega);
636
+ }
637
+
638
+ // no margins
639
+ .gutter-row {
640
+ // other alias : `none`
641
+ @include _(desktop, 4, $gutter: row);
642
+ }
643
+
644
+ // places gutters on inside by reducing column width by [gutter*2]
645
+ .gutter-inside {
646
+ @include _(desktop, 4, $gutter: inside);
647
+ }
648
+
649
+ // variable gutter
650
+ .variable-gutter {
651
+ @include _(16 12 8 4, $gutter: row alpha omega normal);
652
+ }
653
+
654
+ // recursive gutter
655
+ .recursive-gutter {
656
+ @include _(16 12 8 4, $gutter: row);
657
+ }
658
+ ```
659
+ Outputs,
660
+ ```scss
661
+ .gutter-alpha {
662
+ display: block;
663
+ float: left;
664
+ width: 24.21875%;
665
+ margin-right: 0.78125%;
666
+ margin-left: 0;
667
+ }
668
+ .gutter-omega {
669
+ display: block;
670
+ float: left;
671
+ width: 24.21875%;
672
+ margin-right: 0;
673
+ margin-left: 0.78125%;
674
+ }
675
+ .gutter-row {
676
+ display: block;
677
+ float: left;
678
+ width: 25%;
679
+ margin-right: 0;
680
+ margin-left: 0;
681
+ }
682
+ .gutter-inside {
683
+ display: block;
684
+ float: left;
685
+ width: 21.875%;
686
+ margin-right: 0.78125%;
687
+ margin-left: 0.78125%;
688
+ }
689
+ .variable-gutter {
690
+ display: block;
691
+ float: left;
692
+ width: 100%;
693
+ margin-right: 0;
694
+ margin-left: 0;
695
+ }
696
+ @media only screen and (min-width: 641px) and (max-width: 960px) {
697
+ .variable-gutter {
698
+ width: 98.95833%;
699
+ margin-right: 1.04167%;
700
+ margin-left: 0;
701
+ }
702
+ }
703
+ @media only screen and (min-width: 321px) and (max-width: 640px) {
704
+ .variable-gutter {
705
+ width: 98.4375%;
706
+ margin-right: 0;
707
+ margin-left: 1.5625%;
708
+ }
709
+ }
710
+ @media only screen and (min-width: 0) and (max-width: 320px) {
711
+ .variable-gutter {
712
+ width: 87.5%;
713
+ margin-right: 3.125%;
714
+ margin-left: 3.125%;
715
+ }
716
+ }
717
+ .recursive-gutter {
718
+ display: block;
719
+ float: left;
720
+ width: 100%;
721
+ margin-right: 0;
722
+ margin-left: 0;
723
+ }
724
+ @media only screen and (min-width: 641px) and (max-width: 960px) {
725
+ .recursive-gutter {
726
+ width: 100%;
727
+ margin-right: 0;
728
+ margin-left: 0;
729
+ }
730
+ }
731
+ @media only screen and (min-width: 321px) and (max-width: 640px) {
732
+ .recursive-gutter {
733
+ width: 100%;
734
+ margin-right: 0;
735
+ margin-left: 0;
736
+ }
737
+ }
738
+ @media only screen and (min-width: 0) and (max-width: 320px) {
739
+ .recursive-gutter {
740
+ width: 100%;
741
+ margin-right: 0;
742
+ margin-left: 0;
743
+ }
744
+ }
745
+ ```
746
+
747
+ ### Shift
748
+
749
+ Much like the gutter modifiers, you may also call in a shift parameter using the `$shift` variable. This will cause the element to shift the desired amount of columns using positive/negative left margins.
750
+
751
+ ```scss
752
+ // shift 4 columns to the right across all breakpoints
753
+ .name {
754
+ @include _(12 12 8 4, $shift: 4);
755
+ }
756
+
757
+ // shift 2 columns to the left across specified breakpoints
758
+ .name {
759
+ @include _(12 12 8 4, $shift: -2 -2 0 0);
760
+ }
761
+ ```
762
+
763
+ **One more** cool thing about flint is that you are not bound to the grid you define. Feel free to use decimals and math based on the breakpoint's column count in your arguments for extra fine tuned control over your layouts. Examples include, `decimals: (1.25), (3.333)`, `math: (3 - 2), (2 + 9), (16 / 3)`.
764
+
765
+ ```scss
766
+ .break-the-grid {
767
+ @include _(16/3 12.1 8.9 (5 - 1), $shift: 1.2 0 2 0, $gutter: row);
768
+ }
769
+ ```
770
+ Outputs,
771
+ ```scss
772
+ .break-the-grid {
773
+ display: block;
774
+ float: left;
775
+ width: 33.33333%;
776
+ margin-right: 0;
777
+ margin-left: 7.5%;
778
+ -flint-instance-count: 9;
779
+ -flint-parent-instance: none;
780
+ -flint-key: desktop;
781
+ -flint-breakpoint: 1280px;
782
+ -flint-columns: 16;
783
+ -flint-span: 5.33333;
784
+ -flint-context: null;
785
+ -flint-gutter: row;
786
+ -flint-shift: 1.2;
787
+ -flint--output-width: 33.33333%;
788
+ -flint--output-margin-right: 0;
789
+ -flint--output-margin-left: 7.5%;
790
+ }
791
+ @media only screen and (min-width: 641px) and (max-width: 960px) {
792
+ .break-the-grid {
793
+ width: 100.83333%;
794
+ margin-right: 0;
795
+ margin-left: 0%;
796
+ -flint-instance-count: 10;
797
+ -flint-parent-instance: none;
798
+ -flint-key: laptop;
799
+ -flint-breakpoint: 960px;
800
+ -flint-columns: 12;
801
+ -flint-span: 12.1;
802
+ -flint-context: null;
803
+ -flint-gutter: row;
804
+ -flint-shift: 0;
805
+ -flint--output-width: 100.83333%;
806
+ -flint--output-margin-right: 0;
807
+ -flint--output-margin-left: 0%;
808
+ }
809
+ }
810
+ @media only screen and (min-width: 321px) and (max-width: 640px) {
811
+ .break-the-grid {
812
+ width: 111.25%;
813
+ margin-right: 0;
814
+ margin-left: 25%;
815
+ -flint-instance-count: 11;
816
+ -flint-parent-instance: none;
817
+ -flint-key: tablet;
818
+ -flint-breakpoint: 640px;
819
+ -flint-columns: 8;
820
+ -flint-span: 8.9;
821
+ -flint-context: null;
822
+ -flint-gutter: row;
823
+ -flint-shift: 2;
824
+ -flint--output-width: 111.25%;
825
+ -flint--output-margin-right: 0;
826
+ -flint--output-margin-left: 25%;
827
+ }
828
+ }
829
+ @media only screen and (min-width: 0) and (max-width: 320px) {
830
+ .break-the-grid {
831
+ width: 100%;
832
+ margin-right: 0;
833
+ margin-left: 0%;
834
+ -flint-instance-count: 12;
835
+ -flint-parent-instance: none;
836
+ -flint-key: mobile;
837
+ -flint-breakpoint: 320px;
838
+ -flint-columns: 4;
839
+ -flint-span: 4;
840
+ -flint-context: null;
841
+ -flint-gutter: row;
842
+ -flint-shift: 0;
843
+ -flint--output-width: 100%;
844
+ -flint--output-margin-right: 0;
845
+ -flint--output-margin-left: 0%;
846
+ }
847
+ }
848
+ ```
849
+
850
+ ## Syntax support
851
+
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,
855
+
856
+ ```scss
857
+ // Support BEM syntax
858
+ // -------------------------------------------------------------------------------
859
+ // @param $selectors [string] : string of selectors to parse
860
+ // -------------------------------------------------------------------------------
861
+ // @return [list] : parsed list of selectors according to syntax
862
+
863
+ @function flint-support-syntax-bem($selectors) {
864
+ // Clean up selector, remove double underscores for spaces
865
+ // add psudeo character to differentiate selectors
866
+ $selectors: flint-replace-substring($selectors, "__", "/");
867
+ // Parse string to list
868
+ $selectors: flint-string-to-list($selectors, "/");
869
+ // Define top-most parent of selector
870
+ $parent: nth($selectors, 1);
871
+ // Create new list of parsed selectors
872
+ $selector-list: ($parent);
873
+
874
+ // Loop over each selector and build list of selectors
875
+ @each $selector in $selectors {
876
+ // Make sure current selector is not the parent
877
+ @if $selector != $parent {
878
+ // Save to selector list
879
+ $selector-list: append($selector-list, ($parent + "__" + $selector), "comma");
880
+ // Define new parent
881
+ $parent: $parent + "__" + $selector;
882
+ }
883
+ }
884
+
885
+ // Return the list of parsed selectors
886
+ @return $selector-list;
887
+ }
888
+ ```
889
+
890
+ This will be parsed into a list of selectors: `.block, .block__element, .block__element__element`. The list of selectors can then be used by
891
+ instance system to look up a selectors parent, etc. To support your own preferred syntax: create a `flint-support-syntax-<syntax-name>` function
892
+ and hook into it through the config `"flint-support-syntax": "<syntax-name>"` option -- the system will attempt to use the `call()` function in
893
+ order to parse the selector string.
894
+
895
+ #### Officially supported syntaxes
896
+ * [BEM](http://bem.info/)
897
+
898
+ If you make one that isn't here, let me know and I'll look into officially supporting it.
899
+
900
+ ## Authors
901
+
902
+ [Ezekiel Gabrielse](http://ezekielg.com)
903
+
904
+ ## License
905
+
906
+ Flint is available under the [MIT](http://opensource.org/licenses/MIT) license.