flint-gs 1.10.0 → 1.11.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +5 -1
- data/lib/flint.rb +2 -2
- data/stylesheets/flint/functions/lib/_calc-breakpoint.scss +19 -0
- data/stylesheets/flint/functions/lib/_calc-width.scss +2 -0
- data/stylesheets/flint/functions/lib/_exists.scss +7 -6
- data/stylesheets/flint/functions/lib/_get-instance-value.scss +1 -1
- data/stylesheets/flint/functions/lib/_get-value.scss +1 -1
- data/stylesheets/flint/functions/lib/_map-fetch.scss +9 -16
- data/stylesheets/flint/mixins/_mixins.scss +1 -0
- data/stylesheets/flint/mixins/lib/_container.scss +47 -0
- data/stylesheets/flint/mixins/lib/_main.scss +101 -39
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2c6921c90e90b2904c2b9cab0882b90e15282788
|
|
4
|
+
data.tar.gz: 07a6ade201366461109d23c75329fc0d35df0a2a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 314488f34a25e3c410d19b78f4d20ca7f52123629fe000b244e311ab246aab51776ce3fc25eee8d7be29abc5cf42f317953215766feb32fe99d031f5edd9a0eb
|
|
7
|
+
data.tar.gz: 56f17c69a719aa9be6bd5ae15fbe92df414da4e4d175355be2b4b4dba660772a81464b47538fd358bdadc0e7053ec1e20085a31ecc2fb3590984f5c52e104d32
|
data/README.md
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
[](http://flint.gs)
|
|
2
|
+
|
|
3
|
+
[](http://badge.fury.io/rb/flint-gs)
|
|
2
4
|
|
|
3
5
|
**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
6
|
|
|
@@ -181,6 +183,8 @@ Outputs,
|
|
|
181
183
|
}
|
|
182
184
|
```
|
|
183
185
|
|
|
186
|
+
You may also define a container for a specific breakpoint, `@include _(desktop, container)`, as well as chain a clearfix and container call together with `@include _(container, clearfix)`.
|
|
187
|
+
|
|
184
188
|
### Clear
|
|
185
189
|
|
|
186
190
|
_Flint will attempt to use a local clearfix mixin named `clearfix`. If one is not found, it will use it's own._
|
data/lib/flint.rb
CHANGED
|
@@ -8,26 +8,45 @@
|
|
|
8
8
|
|
|
9
9
|
@function flint-calc-breakpoint($n, $key, $i) {
|
|
10
10
|
@if $n == "alias" {
|
|
11
|
+
|
|
11
12
|
@if flint-get-value("settings", "grid") == "fixed" {
|
|
13
|
+
|
|
12
14
|
@if flint-is-lowest-breakpoint($key) {
|
|
15
|
+
|
|
13
16
|
@return 0;
|
|
17
|
+
|
|
14
18
|
} @else {
|
|
19
|
+
|
|
15
20
|
@return flint-get-value($key, "breakpoint");
|
|
21
|
+
|
|
16
22
|
}
|
|
17
23
|
} @else if flint-get-value("settings", "grid") == "fluid" {
|
|
24
|
+
|
|
18
25
|
@return flint-get-value($key, "breakpoint");
|
|
26
|
+
|
|
19
27
|
}
|
|
20
28
|
} @else if $n == "next" {
|
|
29
|
+
|
|
21
30
|
@if flint-is-lowest-breakpoint($key) {
|
|
31
|
+
|
|
22
32
|
@return 0;
|
|
33
|
+
|
|
23
34
|
} @else {
|
|
35
|
+
|
|
24
36
|
@return flint-get-value(flint-steal-key(($i + 1)), "breakpoint");
|
|
37
|
+
|
|
25
38
|
}
|
|
39
|
+
|
|
26
40
|
} @else if $n == "prev" {
|
|
41
|
+
|
|
27
42
|
@if flint-is-highest-breakpoint($key) {
|
|
43
|
+
|
|
28
44
|
@return flint-get-value($key, "breakpoint");
|
|
45
|
+
|
|
29
46
|
} @else {
|
|
47
|
+
|
|
30
48
|
@return flint-get-value(flint-steal-key(($i - 1)), "breakpoint");
|
|
49
|
+
|
|
31
50
|
}
|
|
32
51
|
}
|
|
33
52
|
}
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
@if flint-get-value("settings", "grid") == "fluid" {
|
|
18
|
+
|
|
18
19
|
@if $key == "container" or $span == "container" {
|
|
19
20
|
|
|
20
21
|
$result: flint-fluid-width(flint-get-value($key, "breakpoint"), flint-get-value($key, "breakpoint"));
|
|
@@ -29,6 +30,7 @@
|
|
|
29
30
|
|
|
30
31
|
}
|
|
31
32
|
} @if flint-get-value("settings", "grid") == "fixed" {
|
|
33
|
+
|
|
32
34
|
@if $key == "container" or $span == "container" {
|
|
33
35
|
|
|
34
36
|
$result: flint-get-value($key, "breakpoint");
|
|
@@ -6,13 +6,14 @@
|
|
|
6
6
|
// @return [bool]
|
|
7
7
|
|
|
8
8
|
@function flint-exists($map, $value){
|
|
9
|
+
$is-map: flint-is-map($map);
|
|
10
|
+
$top-has-key: $is-map and map-has-key($map, $value) or false;
|
|
9
11
|
|
|
10
|
-
@if
|
|
11
|
-
@
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
@if flint-exists($i, $value) {
|
|
12
|
+
@if $top-has-key {
|
|
13
|
+
@return true;
|
|
14
|
+
} @else if $is-map {
|
|
15
|
+
@each $m, $k in $map {
|
|
16
|
+
@if flint-exists($k, $value) {
|
|
16
17
|
@return true;
|
|
17
18
|
}
|
|
18
19
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
// @return [string]
|
|
10
10
|
|
|
11
11
|
@function flint-get-instance-value($key, $value, $deep: null) {
|
|
12
|
-
@if $deep
|
|
12
|
+
@if not $deep {
|
|
13
13
|
@return flint-map-fetch($flint__instances, flint-has-family-instance($key) $value);
|
|
14
14
|
} @else {
|
|
15
15
|
@return flint-map-fetch($flint__instances, flint-has-family-instance($key) $value $deep);
|
|
@@ -6,25 +6,18 @@
|
|
|
6
6
|
// @return fetched literal | false
|
|
7
7
|
|
|
8
8
|
@function flint-map-fetch($map, $keys) {
|
|
9
|
-
$key: nth($keys, 1);
|
|
9
|
+
$has-key: flint-is-map($map) and map-has-key($map, nth($keys, 1)) and map-get($map, nth($keys, 1)) or false;
|
|
10
10
|
$length: length($keys);
|
|
11
|
-
$value: map-get($map, $key);
|
|
12
11
|
|
|
13
|
-
@if $
|
|
14
|
-
|
|
15
|
-
$rest: ();
|
|
12
|
+
@if $has-key and $length > 1 {
|
|
13
|
+
$remainder: ();
|
|
16
14
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
@return flint-map-fetch($value, $rest);
|
|
22
|
-
|
|
23
|
-
} @else {
|
|
24
|
-
@return $value;
|
|
15
|
+
@for $i from 2 through $length {
|
|
16
|
+
$remainder: append($remainder, nth($keys, $i))
|
|
25
17
|
}
|
|
26
|
-
|
|
27
|
-
@
|
|
28
|
-
@return false;
|
|
18
|
+
|
|
19
|
+
@return flint-map-fetch($has-key, $remainder);
|
|
29
20
|
}
|
|
21
|
+
|
|
22
|
+
@return $has-key;
|
|
30
23
|
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
// Container
|
|
2
|
+
// -------------------------------------------------------------------------------
|
|
3
|
+
// @param $key [string] : alias of individual breakpoint
|
|
4
|
+
// -------------------------------------------------------------------------------
|
|
5
|
+
// @output container styles
|
|
6
|
+
|
|
7
|
+
@mixin flint-container($key: null, $i: null) {
|
|
8
|
+
|
|
9
|
+
// Check if inside of loop, and if so only output for default
|
|
10
|
+
@if $i == null or flint-is-default(flint-steal-key($i)) {
|
|
11
|
+
float: none;
|
|
12
|
+
|
|
13
|
+
@if $key {
|
|
14
|
+
width: flint-calc-width($key, "container");
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// Check if max-width is set
|
|
18
|
+
@if flint-get-value("settings", "max-width") {
|
|
19
|
+
|
|
20
|
+
// Check if it's an number
|
|
21
|
+
@if flint-is-number(flint-get-value("settings", "max-width")) {
|
|
22
|
+
max-width: flint-get-value("settings", "max-width");
|
|
23
|
+
// If not, use highest breakpoint
|
|
24
|
+
} @else {
|
|
25
|
+
max-width: max(flint-get-all-breakpoints()...);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Check if center container is set
|
|
31
|
+
@if flint-get-value("settings", "center-container") {
|
|
32
|
+
margin-right: auto;
|
|
33
|
+
margin-left: auto;
|
|
34
|
+
} @else {
|
|
35
|
+
margin-right: 0;
|
|
36
|
+
margin-left: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// Inside of loop, so only output width
|
|
40
|
+
} @else {
|
|
41
|
+
@if $key {
|
|
42
|
+
width: flint-calc-width($key, "container");
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@content;
|
|
47
|
+
}
|
|
@@ -22,6 +22,51 @@
|
|
|
22
22
|
@warn "The shift modifier has been deprecated due to it having such little-use and being a pain to maintain. It is set to be removed in version 2.0";
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
+
// Clearfix
|
|
26
|
+
// -------------------------------------------------------------------------------
|
|
27
|
+
// @param [string] : clearfix instance
|
|
28
|
+
// -------------------------------------------------------------------------------
|
|
29
|
+
// @output clear styles | use existing clearfix mixin
|
|
30
|
+
@if $key == "clear" or $span == "clear" or $context == "clear" {
|
|
31
|
+
|
|
32
|
+
// Check if key exists as breakpoint
|
|
33
|
+
// if so wrap in query to not affect others
|
|
34
|
+
@if flint-exists($flint, $key) {
|
|
35
|
+
|
|
36
|
+
@if flint-get-value("settings", "grid") == "fluid" {
|
|
37
|
+
@if flint-is-highest-breakpoint($key) {
|
|
38
|
+
@media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
39
|
+
@include flint-clearfix;
|
|
40
|
+
@content;
|
|
41
|
+
}
|
|
42
|
+
} @else {
|
|
43
|
+
@media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + if(flint-is-lowest-breakpoint($key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
|
|
44
|
+
@include flint-clearfix;
|
|
45
|
+
@content;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
} @else if flint-get-value("settings", "grid") == "fixed" {
|
|
49
|
+
@if flint-is-highest-breakpoint($key) {
|
|
50
|
+
@media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
|
|
51
|
+
@include flint-clearfix;
|
|
52
|
+
@content;
|
|
53
|
+
}
|
|
54
|
+
} @else {
|
|
55
|
+
@media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) and ( max-width: (flint-calc-breakpoint("prev", $key, flint-get-index($key)) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
56
|
+
@include flint-clearfix;
|
|
57
|
+
@content;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
} @else {
|
|
63
|
+
|
|
64
|
+
@include flint-clearfix;
|
|
65
|
+
@content;
|
|
66
|
+
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
25
70
|
// Foundation
|
|
26
71
|
// -------------------------------------------------------------------------------
|
|
27
72
|
// @param $key [string] : foundation instance
|
|
@@ -38,24 +83,17 @@
|
|
|
38
83
|
// ----
|
|
39
84
|
@if $flint__foundation == "existant" {
|
|
40
85
|
@at-root *, *:before, *:after {
|
|
41
|
-
@include flint-box-sizing
|
|
86
|
+
@include flint-box-sizing;
|
|
42
87
|
@content;
|
|
43
88
|
}
|
|
44
89
|
}
|
|
45
90
|
|
|
46
|
-
// Clearfix
|
|
47
|
-
// ----
|
|
48
|
-
} @else if $key == "clear" {
|
|
49
|
-
|
|
50
|
-
@include flint-clearfix();
|
|
51
|
-
|
|
52
91
|
// Container
|
|
53
92
|
// -------------------------------------------------------------------------------
|
|
54
|
-
// @param
|
|
93
|
+
// @param [string] : container instance
|
|
55
94
|
// -------------------------------------------------------------------------------
|
|
56
95
|
// @output container styles
|
|
57
|
-
} @else if $key == "container" {
|
|
58
|
-
float: none;
|
|
96
|
+
} @else if $key == "container" or $span == "container" or $context == "container" {
|
|
59
97
|
|
|
60
98
|
// Apply individually if foundation is not set globally, but is set to true in config
|
|
61
99
|
@if flint-get-value("settings", "border-box-sizing") and $flint__foundation == "nonexistant" {
|
|
@@ -72,19 +110,19 @@
|
|
|
72
110
|
|
|
73
111
|
// Output container for each breakpoint if fixed grid
|
|
74
112
|
// ----
|
|
75
|
-
@if flint-get-value("settings", "grid") == "fixed" {
|
|
113
|
+
@if $key == "container" and flint-get-value("settings", "grid") == "fixed" {
|
|
76
114
|
|
|
77
115
|
@for $i from 1 through length($flint__all__keys) {
|
|
78
116
|
|
|
79
117
|
// Set up variables
|
|
80
118
|
$calc-key: flint-steal-key($i);
|
|
81
|
-
$calcContainer: $key;
|
|
82
119
|
|
|
83
120
|
// Key is default, no media queries
|
|
84
121
|
@if flint-is-default($calc-key) {
|
|
85
122
|
|
|
86
|
-
|
|
87
|
-
|
|
123
|
+
@include flint-container($calc-key, $i) {
|
|
124
|
+
@content;
|
|
125
|
+
}
|
|
88
126
|
|
|
89
127
|
// Not default, wrap in media queries
|
|
90
128
|
} @else {
|
|
@@ -93,53 +131,75 @@
|
|
|
93
131
|
@if flint-is-highest-breakpoint($calc-key) {
|
|
94
132
|
|
|
95
133
|
@media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) {
|
|
96
|
-
|
|
97
|
-
|
|
134
|
+
@include flint-container($calc-key, $i) {
|
|
135
|
+
@content;
|
|
136
|
+
}
|
|
98
137
|
}
|
|
99
138
|
|
|
100
139
|
} @else {
|
|
101
140
|
|
|
102
141
|
@media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
103
|
-
|
|
104
|
-
|
|
142
|
+
@include flint-container($calc-key, $i) {
|
|
143
|
+
@content;
|
|
144
|
+
}
|
|
105
145
|
}
|
|
106
146
|
|
|
107
147
|
}
|
|
108
148
|
}
|
|
109
149
|
}
|
|
110
|
-
}
|
|
111
150
|
|
|
112
|
-
//
|
|
151
|
+
// Output container for specific breakpoint if exists
|
|
113
152
|
// ----
|
|
114
|
-
@if flint-get-value("settings", "
|
|
153
|
+
} @else if flint-exists($flint, $key) and flint-get-value("settings", "grid") == "fixed" {
|
|
154
|
+
|
|
155
|
+
@if flint-is-highest-breakpoint($key) {
|
|
156
|
+
|
|
157
|
+
@media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
|
|
158
|
+
@include flint-container($key) {
|
|
159
|
+
@content;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
115
162
|
|
|
116
|
-
// Check if it's an number
|
|
117
|
-
@if flint-is-number(flint-get-value("settings", "max-width")) {
|
|
118
|
-
max-width: flint-get-value("settings", "max-width");
|
|
119
|
-
// Then use highest breakpoint
|
|
120
163
|
} @else {
|
|
121
|
-
|
|
164
|
+
|
|
165
|
+
@media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) and ( max-width: (flint-calc-breakpoint("prev", $key, flint-get-index($key)) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
166
|
+
@include flint-container($key) {
|
|
167
|
+
@content;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
122
171
|
}
|
|
172
|
+
} @else if flint-exists($flint, $key) and flint-get-value("settings", "grid") == "fluid" {
|
|
173
|
+
@if flint-is-highest-breakpoint($key) {
|
|
123
174
|
|
|
124
|
-
|
|
175
|
+
@media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
176
|
+
@include flint-container {
|
|
177
|
+
@content;
|
|
178
|
+
}
|
|
179
|
+
}
|
|
125
180
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
181
|
+
} @else {
|
|
182
|
+
|
|
183
|
+
@media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + if(flint-is-lowest-breakpoint($key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) {
|
|
184
|
+
@include flint-container {
|
|
185
|
+
@content;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
}
|
|
131
190
|
} @else {
|
|
132
|
-
|
|
133
|
-
|
|
191
|
+
@include flint-container {
|
|
192
|
+
@content;
|
|
193
|
+
}
|
|
134
194
|
}
|
|
135
195
|
|
|
136
|
-
//
|
|
137
|
-
//
|
|
196
|
+
// Creates a new instance, add to global instance map
|
|
197
|
+
// -----
|
|
138
198
|
} @else {
|
|
139
199
|
|
|
140
200
|
// Apply individually if foundation is not set globally, but is set to true in config
|
|
141
201
|
@if flint-get-value("settings", "border-box-sizing") and $flint__foundation == "nonexistant" {
|
|
142
|
-
@include flint-box-sizing
|
|
202
|
+
@include flint-box-sizing;
|
|
143
203
|
|
|
144
204
|
// Warn to either set a global foundation, or turn border-box-sizing off
|
|
145
205
|
@if global-variable-exists("global-foundation-is-set") == false {
|
|
@@ -383,7 +443,7 @@
|
|
|
383
443
|
@content;
|
|
384
444
|
}
|
|
385
445
|
} @else {
|
|
386
|
-
@media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) and ( max-width: (flint-calc-breakpoint("prev", $key, flint-get-index($key)) - 1) ) {
|
|
446
|
+
@media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) and ( max-width: (flint-calc-breakpoint("prev", $key, flint-get-index($key)) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) {
|
|
387
447
|
@content;
|
|
388
448
|
}
|
|
389
449
|
}
|
|
@@ -580,7 +640,9 @@
|
|
|
580
640
|
// @throw : invalid argument warning
|
|
581
641
|
// -------------------------------------------------------------------------------
|
|
582
642
|
} @else {
|
|
583
|
-
@
|
|
643
|
+
@if $key != "clear" {
|
|
644
|
+
@warn "Invalid argument(s). Please double check and provide a valid argument. If you're calling by alias, please provide a single span argument for your breakpoint. See documentation for additional details.";
|
|
645
|
+
}
|
|
584
646
|
}
|
|
585
647
|
}
|
|
586
648
|
}
|
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.11.2
|
|
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-08-
|
|
11
|
+
date: 2014-08-13 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: sass
|
|
@@ -69,6 +69,7 @@ files:
|
|
|
69
69
|
- stylesheets/flint/mixins/lib/_box-sizing.scss
|
|
70
70
|
- stylesheets/flint/mixins/lib/_calculate.scss
|
|
71
71
|
- stylesheets/flint/mixins/lib/_clearfix.scss
|
|
72
|
+
- stylesheets/flint/mixins/lib/_container.scss
|
|
72
73
|
- stylesheets/flint/mixins/lib/_main.scss
|
|
73
74
|
- stylesheets/flint/mixins/lib/_new-instance.scss
|
|
74
75
|
- stylesheets/flint/mixins/lib/_print-instance.scss
|