flint-gs 2.0.2 → 2.0.3
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 +1 -1
- data/lib/flint.rb +3 -3
- data/stylesheets/flint/config/_config.scss +2 -0
- data/stylesheets/flint/functions/helpers/_helpers.scss +5 -1
- data/stylesheets/flint/functions/lib/_calc-breakpoint.scss +2 -0
- data/stylesheets/flint/functions/lib/_calc-width.scss +10 -8
- data/stylesheets/flint/functions/lib/_exists.scss +2 -0
- data/stylesheets/flint/functions/lib/_fluid-width.scss +2 -0
- data/stylesheets/flint/functions/lib/_get-index.scss +2 -0
- data/stylesheets/flint/functions/lib/_get-instance-value.scss +3 -1
- data/stylesheets/flint/functions/lib/_get-value.scss +2 -0
- data/stylesheets/flint/functions/lib/_has-family-instance.scss +3 -1
- data/stylesheets/flint/functions/lib/_instance.scss +2 -0
- data/stylesheets/flint/functions/lib/_last.scss +2 -0
- data/stylesheets/flint/functions/lib/_list-to-string.scss +2 -0
- data/stylesheets/flint/functions/lib/_map-fetch.scss +3 -1
- data/stylesheets/flint/functions/lib/_next-index.scss +3 -1
- data/stylesheets/flint/functions/lib/_purge.scss +2 -0
- data/stylesheets/flint/functions/lib/_remove.scss +2 -0
- data/stylesheets/flint/functions/lib/_replace-substring.scss +2 -0
- data/stylesheets/flint/functions/lib/_replace.scss +2 -0
- data/stylesheets/flint/functions/lib/_steal-key.scss +3 -1
- data/stylesheets/flint/functions/lib/_steal-values.scss +3 -1
- data/stylesheets/flint/functions/lib/_string-to-list.scss +3 -1
- data/stylesheets/flint/functions/lib/_support-syntax-bem.scss +2 -0
- data/stylesheets/flint/functions/lib/_support-syntax.scss +2 -0
- data/stylesheets/flint/functions/lib/_types-in-list.scss +4 -2
- data/stylesheets/flint/functions/lib/_use-syntax.scss +2 -0
- data/stylesheets/flint/globals/_globals.scss +4 -0
- data/stylesheets/flint/mixins/lib/_box-sizing.scss +3 -1
- data/stylesheets/flint/mixins/lib/_calculate.scss +9 -5
- data/stylesheets/flint/mixins/lib/_clearfix.scss +1 -1
- data/stylesheets/flint/mixins/lib/_container.scss +2 -0
- data/stylesheets/flint/mixins/lib/_main.scss +303 -35
- data/stylesheets/flint/mixins/lib/_new-instance.scss +2 -0
- data/stylesheets/flint/mixins/lib/_print-instance.scss +4 -0
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3d0d0539567fb162ecf38772974dbbc0cde72548
|
4
|
+
data.tar.gz: 5094eb179d16d8b40ce55666c9cf11cd7a3244e1
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f0286cbcee185f45947a5728bbe594e2841e738e4c613b18578118e41418d634bf415396ef7e6bd0abf2cc0e39225200e2b2f36f4de5c7ea657cd8982bd21296
|
7
|
+
data.tar.gz: c82aa3383be1c1b424d6ed822a4294d19848da8492492f87856b3453a39ebe19fe4957a488916815a2c251173c077c131a41c582bec60252fad4a14fcfa246f9
|
data/README.md
CHANGED
@@ -85,7 +85,7 @@ function parses the selector string (for example, `.block__element__element`) li
|
|
85
85
|
|
86
86
|
```
|
87
87
|
|
88
|
-
This will be parsed into a list of selectors: `.block, .block__element, .block__element__element`. The list of selectors can then be used by
|
88
|
+
This will be parsed into a list of selectors: `.block, .block__element, .block__element__element`. The list of selectors can then be used by the
|
89
89
|
instance system to look up a selectors parent, etc. To support your own preferred syntax: create a `flint-support-syntax-<syntax-name>` function
|
90
90
|
and hook into it through the config `"support-syntax": "<syntax-name>"` option -- the system will attempt to use the `call()` function in
|
91
91
|
order to parse the selector string.
|
data/lib/flint.rb
CHANGED
@@ -10,8 +10,8 @@ else
|
|
10
10
|
end
|
11
11
|
|
12
12
|
module Flint
|
13
|
-
VERSION = "2.0.
|
14
|
-
DATE = "2014-10-
|
13
|
+
VERSION = "2.0.3"
|
14
|
+
DATE = "2014-10-02"
|
15
15
|
end
|
16
16
|
|
17
17
|
module Sass::Script::Functions
|
@@ -31,7 +31,7 @@ module Sass::Script::Functions
|
|
31
31
|
# @param {Map} map - map to fetch value from
|
32
32
|
# @param {ArgList} keys - list of keys to traverse
|
33
33
|
#
|
34
|
-
# @return {
|
34
|
+
# @return {*}
|
35
35
|
###
|
36
36
|
def flint_ruby_map_fetch(map, *keys)
|
37
37
|
assert_type map, :Map, :map
|
@@ -19,6 +19,8 @@
|
|
19
19
|
* @prop {Bool} settings.instance-maps - use instance maps for added features
|
20
20
|
* @prop {Bool} settings.support-syntax - support syntax within instance functions
|
21
21
|
* @prop {Bool} settings.debug-mode - enable debug mode
|
22
|
+
*
|
23
|
+
* @group Configuration
|
22
24
|
*/
|
23
25
|
$flint: (
|
24
26
|
"breakpoints": (
|
@@ -1,3 +1,7 @@
|
|
1
|
+
/**
|
2
|
+
* @group Internal Helper Functions
|
3
|
+
**/
|
4
|
+
|
1
5
|
/**
|
2
6
|
* Returns truthiness of a value
|
3
7
|
*
|
@@ -192,7 +196,7 @@
|
|
192
196
|
* @param {Number} $target - pixel value
|
193
197
|
* @param {Number} $context - context to divide by
|
194
198
|
*
|
195
|
-
* @return em value of target relative to context
|
199
|
+
* @return {Number} em value of target relative to context
|
196
200
|
*/
|
197
201
|
@function flint-to-em($target, $context: $flint__base-font-size) {
|
198
202
|
@return ($target / $context) * 1em;
|
@@ -3,19 +3,21 @@
|
|
3
3
|
*
|
4
4
|
* @access private
|
5
5
|
*
|
6
|
-
* @param {String}
|
7
|
-
* @param {Number}
|
8
|
-
* @param {Number
|
9
|
-
* @param {Number}
|
6
|
+
* @param {String} $key - key of breakpoint
|
7
|
+
* @param {Number} $span - span value of element
|
8
|
+
* @param {Number|String} $context (null) - context value of element
|
9
|
+
* @param {Number} $deduct (null) - subtract value out of final width
|
10
10
|
*
|
11
|
-
* @return {Map
|
11
|
+
* @return {Map} - map of target and context result
|
12
|
+
*
|
13
|
+
* @group Internal Functions
|
12
14
|
*/
|
13
15
|
@function flint-calc-width($key, $span, $context: null, $deduct: null) {
|
14
16
|
$result: ();
|
15
17
|
|
16
18
|
// Check to see if value has been cached
|
17
|
-
@if map-has-key($flint__cached-values, "#{$key, $span, $context}::width") and $context != "auto" {
|
18
|
-
@return map-get($flint__cached-values, "#{$key, $span, $context}::width");
|
19
|
+
@if map-has-key($flint__cached-values, "#{$key, $span, $context, $deduct}::width") and $context != "auto" {
|
20
|
+
@return map-get($flint__cached-values, "#{$key, $span, $context, $deduct}::width");
|
19
21
|
}
|
20
22
|
|
21
23
|
@if $span == "container" {
|
@@ -60,7 +62,7 @@
|
|
60
62
|
|
61
63
|
// Save result to cache
|
62
64
|
@if $context != "auto" {
|
63
|
-
$flint__cached-values: map-merge($flint__cached-values, ("#{$key, $span, $context}::width": $result));
|
65
|
+
$flint__cached-values: map-merge($flint__cached-values, ("#{$key, $span, $context, $deduct}::width": $result));
|
64
66
|
}
|
65
67
|
|
66
68
|
// Return result
|
@@ -6,7 +6,9 @@
|
|
6
6
|
* @param {String} $key - breakpoint key to pass to instance method
|
7
7
|
* @param {ArgList} $values - list of keys to fetch value from
|
8
8
|
*
|
9
|
-
* @return {
|
9
|
+
* @return {*}
|
10
|
+
*
|
11
|
+
* @group Internal Functions
|
10
12
|
*/
|
11
13
|
@function flint-get-instance-value($key, $values...) {
|
12
14
|
@return flint-map-fetch($flint__instances, flint-has-family-instance($key), $values...);
|
@@ -6,7 +6,9 @@
|
|
6
6
|
* @param {String} $key - breakpoint key to search for matching instance
|
7
7
|
* @param {String} $syntax - searches for instance using passed syntax parser
|
8
8
|
*
|
9
|
-
* @return {String
|
9
|
+
* @return {String} instance selector
|
10
|
+
*
|
11
|
+
* @group Internal Functions
|
10
12
|
*/
|
11
13
|
@function flint-has-family-instance($key: flint-get-value("settings", "default"), $syntax: $flint__support-syntax) {
|
12
14
|
$selector: nth(&, 1);
|
@@ -12,6 +12,8 @@
|
|
12
12
|
* @param {Number} $output-margin-left - computed left margin of instance
|
13
13
|
*
|
14
14
|
* @return {Map} merged instance map
|
15
|
+
*
|
16
|
+
* @group Internal Functions
|
15
17
|
*/
|
16
18
|
@function flint-instance($key, $span, $context, $gutter, $output-width, $output-margin-right, $output-margin-left) {
|
17
19
|
|
@@ -5,7 +5,9 @@
|
|
5
5
|
*
|
6
6
|
* @param {Number} $index - index of breakpoint
|
7
7
|
*
|
8
|
-
* @return {String
|
8
|
+
* @return {String}
|
9
|
+
*
|
10
|
+
* @group Internal Functions
|
9
11
|
*/
|
10
12
|
@function flint-next-index($index) {
|
11
13
|
@return if(flint-is-number($index) and $index != 0, flint-steal-key($index + 1), false);
|
@@ -6,7 +6,9 @@
|
|
6
6
|
* @param {Number} $index - index of key
|
7
7
|
* @param {String} $value - value to get from breakpoint
|
8
8
|
*
|
9
|
-
* @return {String
|
9
|
+
* @return {String}
|
10
|
+
*
|
11
|
+
* @group Internal Functions
|
10
12
|
*/
|
11
13
|
@function flint-steal-values($index, $value) {
|
12
14
|
@return if(flint-is-number($index), flint-get-value("breakpoints", flint-steal-key($index), $value), false);
|
@@ -7,7 +7,9 @@
|
|
7
7
|
* @param {String} $find (" ") - item to find which separates substrings
|
8
8
|
* @param {String} $ignore (",") - removes remaining string beyond item
|
9
9
|
*
|
10
|
-
* @return {List
|
10
|
+
* @return {List}
|
11
|
+
*
|
12
|
+
* @group Internal Functions
|
11
13
|
*/
|
12
14
|
@function flint-string-to-list($string, $find: " ", $ignore: ",") {
|
13
15
|
@if flint-is-string($string) {
|
@@ -6,6 +6,8 @@
|
|
6
6
|
* @param {List} $selectors - string of selectors to parse
|
7
7
|
*
|
8
8
|
* @return {List} - parsed list of selectors according to syntax
|
9
|
+
*
|
10
|
+
* @group Internal Functions
|
9
11
|
*/
|
10
12
|
@function flint-support-syntax-bem($selectors) {
|
11
13
|
// Clean up selector, remove double underscores for spaces
|
@@ -4,10 +4,12 @@
|
|
4
4
|
* @access private
|
5
5
|
*
|
6
6
|
* @param {List} $list - list of items
|
7
|
-
* @param {String
|
8
|
-
* @param {Number}
|
7
|
+
* @param {String|List} $assert-types (null) - single or list of types to assert
|
8
|
+
* @param {Number} $assert-length (null) - assert length of list
|
9
9
|
*
|
10
10
|
* @return {Bool}
|
11
|
+
*
|
12
|
+
* @group Internal Functions
|
11
13
|
*/
|
12
14
|
@function flint-types-in-list($list, $assert-types: null, $assert-length: null) {
|
13
15
|
@if flint-is-list($list) {
|
@@ -5,7 +5,9 @@
|
|
5
5
|
*
|
6
6
|
* @param {String} $type ("border-box") - border-box type
|
7
7
|
*
|
8
|
-
* @requires
|
8
|
+
* @requires {Mixin} box-sizing - local mixin if available
|
9
|
+
*
|
10
|
+
* @group Internal Mixins
|
9
11
|
*/
|
10
12
|
@mixin flint-box-sizing($type: "border-box") {
|
11
13
|
@if mixin-exists("box-sizing") {
|
@@ -1,3 +1,7 @@
|
|
1
|
+
/**
|
2
|
+
* @group Internal Mixins
|
3
|
+
**/
|
4
|
+
|
1
5
|
/**
|
2
6
|
* Outputs calculated styles
|
3
7
|
*
|
@@ -33,11 +37,11 @@
|
|
33
37
|
*
|
34
38
|
* @access private
|
35
39
|
*
|
36
|
-
* @param {String}
|
37
|
-
* @param {Number}
|
38
|
-
* @param {Number}
|
39
|
-
* @param {String}
|
40
|
-
* @param {Number
|
40
|
+
* @param {String} $calc-key - breakpoint key
|
41
|
+
* @param {Number} $calc-span - span value
|
42
|
+
* @param {Number} $calc-context - context value
|
43
|
+
* @param {String} $calc-gutter - gutter modifier
|
44
|
+
* @param {Number|Null} $i - index if variable length is > 1
|
41
45
|
*/
|
42
46
|
@mixin flint-calculate($key, $span, $context, $gutter, $i: null) {
|
43
47
|
|
@@ -1,23 +1,284 @@
|
|
1
1
|
/**
|
2
|
-
* Main API
|
2
|
+
* # Main API
|
3
3
|
*
|
4
|
-
*
|
4
|
+
* ----
|
5
5
|
*
|
6
|
-
*
|
7
|
-
* @param {String | Number | List} $span - value of span of column or shorthand context
|
8
|
-
* @param {String | Number | List} $context - context value of span
|
9
|
-
* @param {String | List} $gutter - alias for gutter modifier
|
6
|
+
* ## Shorthand
|
10
7
|
*
|
11
|
-
*
|
8
|
+
* ### Recursive span
|
9
|
+
* Use this if you want identical column spans across all breakpoints. This is of course
|
10
|
+
* relative to each of your breakpoint's column count, so if your lowest breakpoint has
|
11
|
+
* a column count of `4`, then anything above that would likely cause layout issues
|
12
|
+
* for that breakpoint.
|
12
13
|
*
|
13
|
-
*
|
14
|
-
* _(clear)
|
14
|
+
* \@include _(2);
|
15
15
|
*
|
16
|
-
*
|
17
|
-
*
|
16
|
+
* ### Recursive Span With Identical Context
|
17
|
+
* Use this if your nested context is identical across all breakpoints. The `$context` should
|
18
|
+
* be the span value of the element's parent, or `auto`.
|
18
19
|
*
|
19
|
-
*
|
20
|
-
*
|
20
|
+
* \@include _(4, 2);
|
21
|
+
*
|
22
|
+
* ### Recursive Span With Differing Context
|
23
|
+
* Use this if your nested context is not identical across all breakpoints. The `$context`
|
24
|
+
* should be the span value of the element's parent, or `auto`.
|
25
|
+
*
|
26
|
+
* \@include _(4, 8 8 4 4);
|
27
|
+
*
|
28
|
+
* ### Variable Span
|
29
|
+
* Use this if your content needs different spans across each breakpoint. The order of
|
30
|
+
* operations is the order that your breakpoints are listed in your config (DESC).
|
31
|
+
*
|
32
|
+
* \@include _(8 8 4 4);
|
33
|
+
*
|
34
|
+
* ### Variable Span With Identical Context
|
35
|
+
* Use this if your nested context is identical across all breakpoints. The `$context`
|
36
|
+
* should be the span value of the element's parent, or `auto`.
|
37
|
+
*
|
38
|
+
* \@include _(4 4 2 2, 4);
|
39
|
+
*
|
40
|
+
* ### Variable Span With Differing Context
|
41
|
+
* Use this if your nested context is not identical across all breakpoints. The `$context`
|
42
|
+
* should be the span value of the element's parent, or `auto`.
|
43
|
+
*
|
44
|
+
* \@include _(8 8 4 4, 8 8 4 4);
|
45
|
+
*
|
46
|
+
* ----
|
47
|
+
*
|
48
|
+
* ## Longhand
|
49
|
+
*
|
50
|
+
* ### Span
|
51
|
+
* Use if you want to define each span by breakpoint `$alias`.
|
52
|
+
*
|
53
|
+
* \@include _(desktop, 2);
|
54
|
+
*
|
55
|
+
* ### Span With Context
|
56
|
+
* Use if you want to define each span by breakpoint `$alias`. The `$context` should be the span
|
57
|
+
* value of the element's parent, or `auto`.
|
58
|
+
*
|
59
|
+
* \@include _(desktop, 4, 2);
|
60
|
+
*
|
61
|
+
* ----
|
62
|
+
*
|
63
|
+
* ## Automatic Context
|
64
|
+
*
|
65
|
+
* You can use `$context: auto`, and Flint will calculate based on the closest parent element's
|
66
|
+
* width instead of the current breakpoint. When using `auto`, Flint falls back from the topmost
|
67
|
+
* selector until one is found that has an instance, and it will calculate its span based on that
|
68
|
+
* instance's width for the current breakpoint. Think of the `auto` option as a self-correcting grid.
|
69
|
+
*
|
70
|
+
* When utilizing the `$context` argument, be sure to note the differences in the way the calculations
|
71
|
+
* happen depending on if you use a numerical value or `auto`. When using a numerical value, the span
|
72
|
+
* is calculated against the current breakpoint's value (example: `80em`), then is divided by it's column
|
73
|
+
* count (example: `16`), and then finally multiplied by the current breakpoints passed `$context` value.
|
74
|
+
* When using `auto`, the span is _always_ calculated against the closest parent element's width instead
|
75
|
+
* of the current breakpoint's width.
|
76
|
+
*
|
77
|
+
* The difference in output varies, but your gutters will be more accurate across the board if you
|
78
|
+
* consistently use the `auto` option. This option allows you to infinitely nest elements on both fixed
|
79
|
+
* and fluid grids without dealing with the inconsistencies that can be caused by nesting elements that
|
80
|
+
* all use a gutter value of their own. Because the parent element's actual width is always used, the
|
81
|
+
* gutters never become out of sync.
|
82
|
+
*
|
83
|
+
* .parent {
|
84
|
+
* \@include _(4);
|
85
|
+
* .child {
|
86
|
+
* \@include _(3, 4);
|
87
|
+
* }
|
88
|
+
* }
|
89
|
+
* // Auto will work
|
90
|
+
* .parent {
|
91
|
+
* \@include _(4);
|
92
|
+
* .child {
|
93
|
+
* \@include _(3, auto);
|
94
|
+
* }
|
95
|
+
* }
|
96
|
+
* // Will also work
|
97
|
+
* .parent {
|
98
|
+
* \@include _(4);
|
99
|
+
* }
|
100
|
+
* .parent .child {
|
101
|
+
* \@include _(3, auto);
|
102
|
+
* }
|
103
|
+
* // Will not work, as the child has no relation to
|
104
|
+
* // the parent within the stylesheet
|
105
|
+
* .parent {
|
106
|
+
* \@include _(6);
|
107
|
+
* }
|
108
|
+
* .child {
|
109
|
+
* \@include _(3, auto);
|
110
|
+
* }
|
111
|
+
*
|
112
|
+
* ----
|
113
|
+
*
|
114
|
+
* ## Modifiers
|
115
|
+
*
|
116
|
+
* ### Alpha
|
117
|
+
* Remove the left `$gutter` from the span. Other aliases for `alpha` include: `no-left` and `first`.
|
118
|
+
*
|
119
|
+
* div {
|
120
|
+
* \@include _(12 8 6 4, $gutter: alpha);
|
121
|
+
* }
|
122
|
+
*
|
123
|
+
* ### Omega
|
124
|
+
* Remove the right `$gutter` from the span. Other aliases for `omega` include: `no-right` and `last`.
|
125
|
+
*
|
126
|
+
* div {
|
127
|
+
* \@include _(2, $gutter: omega);
|
128
|
+
* }
|
129
|
+
*
|
130
|
+
* ### Row
|
131
|
+
* Remove both of the `$gutter` values from the span. Other aliases for `row` include: `none`.
|
132
|
+
*
|
133
|
+
* div {
|
134
|
+
* \@include _(4, $gutter: row);
|
135
|
+
* }
|
136
|
+
*
|
137
|
+
* ### Center
|
138
|
+
* Center the current span within it's container element. Outputs auto left and right margins.
|
139
|
+
* This modifier will also remove any float properties on the element.
|
140
|
+
*
|
141
|
+
* div {
|
142
|
+
* \@include _(4, $gutter: center);
|
143
|
+
* }
|
144
|
+
*
|
145
|
+
* ### Inside
|
146
|
+
* Sets both `$gutter` values on the inside of the element. Instead of deducting `$gutter*2` out
|
147
|
+
* of the final width, it will deduct `$gutter*4`. Useful for nesting elements inside of other
|
148
|
+
* elements without using `$context: auto`.
|
149
|
+
*
|
150
|
+
* div {
|
151
|
+
* \@include _(16 12 8 4, $gutter: inside);
|
152
|
+
* }
|
153
|
+
*
|
154
|
+
* ### Default
|
155
|
+
* Argument to use the default left/right `$gutter` values. Useful for when you want to use a
|
156
|
+
* variable `$gutter` argument. Other aliases for `default` include: `normal` and `regular`.
|
157
|
+
*
|
158
|
+
* div {
|
159
|
+
* \@include _(4, $gutter: default);
|
160
|
+
* }
|
161
|
+
*
|
162
|
+
* ### Variable Modifiers
|
163
|
+
* Instead of passing in a recursive `$gutter` value, you may specify a value for each breakpoint exactly
|
164
|
+
* like you would a `$span` argument.
|
165
|
+
*
|
166
|
+
* div {
|
167
|
+
* \@include _(10 8 6 4, $gutter: alpha omega omega default);
|
168
|
+
* }
|
169
|
+
*
|
170
|
+
* ----
|
171
|
+
*
|
172
|
+
* ## Queries
|
173
|
+
*
|
174
|
+
* ### By Alias
|
175
|
+
* Use this type of query to wrap the `@content` in a single query for the specified breakpoint.
|
176
|
+
*
|
177
|
+
* div {
|
178
|
+
* \@include _(desktop) {
|
179
|
+
* property: value;
|
180
|
+
* }
|
181
|
+
* }
|
182
|
+
*
|
183
|
+
* ### From, To
|
184
|
+
* Use this type of query to wrap the `@content` in a single query between 2 breakpoints. Make
|
185
|
+
* sure to pass in the breakpoints from lowest to highest.
|
186
|
+
*
|
187
|
+
* div {
|
188
|
+
* \@include _(from tablet to laptop) {
|
189
|
+
* property: value;
|
190
|
+
* }
|
191
|
+
* }
|
192
|
+
*
|
193
|
+
* ### Greater Than
|
194
|
+
* Use this type of query to wrap the `@content` in a single query for anything above
|
195
|
+
* the passed breakpoint.
|
196
|
+
*
|
197
|
+
* div {
|
198
|
+
* \@include _(greater than laptop) {
|
199
|
+
* property: value;
|
200
|
+
* }
|
201
|
+
* \@include _(5em greater than tablet) {
|
202
|
+
* property: value;
|
203
|
+
* }
|
204
|
+
* \@include _(greater than 55em) {
|
205
|
+
* property: value;
|
206
|
+
* }
|
207
|
+
* }
|
208
|
+
*
|
209
|
+
* ### Less Than
|
210
|
+
* Use this type of query to wrap the `@content` in a single query for anything below
|
211
|
+
* the passed breakpoint.
|
212
|
+
*
|
213
|
+
* div {
|
214
|
+
* \@include _(less than laptop) {
|
215
|
+
* property: value;
|
216
|
+
* }
|
217
|
+
* \@include _(5em less than tablet) {
|
218
|
+
* property: value;
|
219
|
+
* }
|
220
|
+
* \@include _(less than 8em) {
|
221
|
+
* property: value;
|
222
|
+
* }
|
223
|
+
* }
|
224
|
+
*
|
225
|
+
* ### For
|
226
|
+
* Use this type of query to wrap the `@content` in a single comma delimited query
|
227
|
+
* for each passed `$alias`.
|
228
|
+
*
|
229
|
+
* div {
|
230
|
+
* \@include _(for mobile tablet desktop) {
|
231
|
+
* property: value;
|
232
|
+
* }
|
233
|
+
* }
|
234
|
+
*
|
235
|
+
* ----
|
236
|
+
*
|
237
|
+
* ## Miscellaneous
|
238
|
+
*
|
239
|
+
* ### Clearfix
|
240
|
+
* Given that Flint is float based, you might find yourself needing to use a clearfix. Flint comes
|
241
|
+
* packaged with a micro-clearfix function. _Flint will attempt to use a local mixin named
|
242
|
+
* `clearfix`. If one is not found, it will use it's own._
|
243
|
+
*
|
244
|
+
* div {
|
245
|
+
* \@include _(clear);
|
246
|
+
* }
|
247
|
+
*
|
248
|
+
* ### Foundation
|
249
|
+
* A foundation instance will output a global box-sizing: border-box declaration. If you selected
|
250
|
+
* `"border-box-sizing": true`, then it is advised to create a global foundation instance. If you
|
251
|
+
* don't, Flint will automatically apply a foundation instance with your first span declaration.
|
252
|
+
* This should be placed at the root of your stylesheet. _Flint will attempt to use a local
|
253
|
+
* mixin named `box-sizing`. If one is not found, it will use it's own._
|
254
|
+
*
|
255
|
+
* \@include _(foundation);
|
256
|
+
*
|
257
|
+
* ### Container
|
258
|
+
* Containers act as a containing row for each individual breakpoint. It uses the `"max-width"`
|
259
|
+
* setting, if set. They do not float, so if you have `"center-container"` set, then it
|
260
|
+
* will also center your element using auto left and right margins. You may combine
|
261
|
+
* container and clear declarations, with arguments separated by a comma.
|
262
|
+
*
|
263
|
+
*
|
264
|
+
* div {
|
265
|
+
* \@include _(container);
|
266
|
+
* }
|
267
|
+
*
|
268
|
+
* ----
|
269
|
+
*
|
270
|
+
* @access public
|
271
|
+
*
|
272
|
+
* @param {String|Number|List} $key (null) - key of breakpoint, or shorthand span
|
273
|
+
* @param {String|Number|List} $span (null) - value of span for column, or shorthand context
|
274
|
+
* @param {String|Number} $context (null) - context value of span, or null for shorthand
|
275
|
+
* @param {String|List} $gutter (null) - alias for gutter modifier
|
276
|
+
*
|
277
|
+
* @content all content passed will be placed _underneath_ output so that it takes precedence.
|
278
|
+
*
|
279
|
+
* @throws error if list lengths do not match number of breakpoints (when using variable shorthands).
|
280
|
+
*
|
281
|
+
* ----
|
21
282
|
*
|
22
283
|
* @example scss - Recursive shorthand with no context
|
23
284
|
* _(2)
|
@@ -48,40 +309,53 @@
|
|
48
309
|
* _(desktop, 2, auto)
|
49
310
|
*
|
50
311
|
* @example scss - Call $key breakpoint by alias
|
51
|
-
* _(
|
312
|
+
* _(desktop) { ... }
|
52
313
|
*
|
53
314
|
* @example scss - From $key breakpoint to infinity
|
54
|
-
* _(from
|
315
|
+
* _(from laptop to infinity) { ... }
|
55
316
|
*
|
56
317
|
* @example scss - From $key-x breakpoint to $key-y breakpoint
|
57
|
-
* _(from
|
318
|
+
* _(from tablet to laptop) { ... }
|
58
319
|
*
|
59
320
|
* @example scss - From $num-x to $num-y
|
60
|
-
* _(from
|
321
|
+
* _(from 20em to laptop) { ... }
|
61
322
|
*
|
62
323
|
* @example scss - Greater than $key breakpoint
|
63
|
-
* _(greater than
|
324
|
+
* _(greater than tablet) { ... }
|
64
325
|
*
|
65
326
|
* @example scss - Greater than number
|
66
|
-
* _(greater than
|
327
|
+
* _(greater than 15em) { ... }
|
67
328
|
*
|
68
329
|
* @example scss - Number greater than $key breakpoint
|
69
|
-
* _(
|
330
|
+
* _(5em greater than mobile) { ... }
|
70
331
|
*
|
71
332
|
* @example scss - Less than $key breakpoint
|
72
|
-
* _(less than
|
333
|
+
* _(less than laptop) { ... }
|
73
334
|
*
|
74
335
|
* @example scss - Less than number
|
75
|
-
* _(less than
|
336
|
+
* _(less than 35em) { ... }
|
76
337
|
*
|
77
338
|
* @example scss - Number less than $key breakpoint
|
78
|
-
* _(
|
339
|
+
* _(10em less than laptop) { ... }
|
79
340
|
*
|
80
|
-
* @example scss - For $key-x $key-y $key-z
|
81
|
-
* _(for
|
341
|
+
* @example scss - For $key-x $key-y $key-z...
|
342
|
+
* _(for mobile tablet desktop) { ... }
|
343
|
+
*
|
344
|
+
* @example scss - Clear
|
345
|
+
* _(clear)
|
346
|
+
*
|
347
|
+
* @example scss - Foundation
|
348
|
+
* _(foundation)
|
349
|
+
*
|
350
|
+
* @example scss - Container
|
351
|
+
* _(container)
|
352
|
+
*
|
353
|
+
* ----
|
82
354
|
*
|
83
355
|
* @author Ezekiel Gabrielse
|
84
356
|
* @link http://flint.gs
|
357
|
+
*
|
358
|
+
* @group Public API
|
85
359
|
*/
|
86
360
|
@mixin _(
|
87
361
|
$key: null,
|
@@ -145,9 +419,7 @@
|
|
145
419
|
$flint__foundation: "existent" !global;
|
146
420
|
}
|
147
421
|
|
148
|
-
|
149
|
-
* Foundation is now globally existant
|
150
|
-
*/
|
422
|
+
// Foundation is now globally existant
|
151
423
|
@if $flint__foundation == "existent" {
|
152
424
|
@at-root *, *:before, *:after {
|
153
425
|
@include flint-box-sizing;
|
@@ -165,9 +437,7 @@
|
|
165
437
|
@include _("foundation");
|
166
438
|
}
|
167
439
|
|
168
|
-
|
169
|
-
* Output container for each breakpoint if fixed grid
|
170
|
-
*/
|
440
|
+
// Output container for each breakpoint if fixed grid
|
171
441
|
@if $key == "container" and flint-get-value("settings", "grid") == "fixed" {
|
172
442
|
|
173
443
|
@for $i from 1 through length($flint__all-keys) {
|
@@ -206,9 +476,7 @@
|
|
206
476
|
}
|
207
477
|
}
|
208
478
|
|
209
|
-
|
210
|
-
* Output container for specific breakpoint if exists
|
211
|
-
*/
|
479
|
+
// Output container for specific breakpoint if exists
|
212
480
|
} @else if flint-exists($flint, $key) and flint-get-value("settings", "grid") == "fixed" {
|
213
481
|
|
214
482
|
@if flint-is-highest-breakpoint($key) {
|
@@ -253,7 +521,7 @@
|
|
253
521
|
}
|
254
522
|
|
255
523
|
/*
|
256
|
-
*
|
524
|
+
* Create a new instance, add to global instance map
|
257
525
|
*/
|
258
526
|
} @else {
|
259
527
|
|
@@ -10,6 +10,8 @@
|
|
10
10
|
* @param {Number} $output-width
|
11
11
|
* @param {Number} $output-margin-right
|
12
12
|
* @param {Number} $output-margin-left
|
13
|
+
*
|
14
|
+
* @group Internal Mixins
|
13
15
|
*/
|
14
16
|
@mixin flint-new-instance($calc-key, $calc-span, $calc-context, $calc-gutter, $output-width, $output-margin-right, $output-margin-left) {
|
15
17
|
$flint__instances:
|
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: 2.0.
|
4
|
+
version: 2.0.3
|
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-10-
|
11
|
+
date: 2014-10-02 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|