flint-gs 1.12.0 → 2.0.0.rc.1

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.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +71 -207
  3. data/lib/flint.rb +8 -8
  4. data/stylesheets/_flint.scss +3 -2
  5. data/stylesheets/flint/config/_config.scss +37 -68
  6. data/stylesheets/flint/functions/_functions.scss +15 -7
  7. data/stylesheets/flint/functions/helpers/_helpers.scss +115 -117
  8. data/stylesheets/flint/functions/lib/_calc-breakpoint.scss +23 -32
  9. data/stylesheets/flint/functions/lib/_calc-width.scss +40 -26
  10. data/stylesheets/flint/functions/lib/_exists.scss +8 -7
  11. data/stylesheets/flint/functions/lib/_fluid-width.scss +8 -7
  12. data/stylesheets/flint/functions/lib/_get-index.scss +12 -10
  13. data/stylesheets/flint/functions/lib/_get-instance-value.scss +10 -16
  14. data/stylesheets/flint/functions/lib/_get-value.scss +9 -13
  15. data/stylesheets/flint/functions/lib/_has-family-instance.scss +21 -20
  16. data/stylesheets/flint/functions/lib/_instance.scss +19 -22
  17. data/stylesheets/flint/functions/lib/_last.scss +7 -6
  18. data/stylesheets/flint/functions/lib/_list-to-string.scss +11 -9
  19. data/stylesheets/flint/functions/lib/_map-fetch.scss +13 -19
  20. data/stylesheets/flint/functions/lib/_next-index.scss +9 -14
  21. data/stylesheets/flint/functions/lib/_purge.scss +9 -8
  22. data/stylesheets/flint/functions/lib/_remove.scss +11 -10
  23. data/stylesheets/flint/functions/lib/_replace-substring.scss +9 -8
  24. data/stylesheets/flint/functions/lib/_replace.scss +11 -10
  25. data/stylesheets/flint/functions/lib/_steal-key.scss +24 -13
  26. data/stylesheets/flint/functions/lib/_steal-values.scss +9 -12
  27. data/stylesheets/flint/functions/lib/_string-to-list.scss +11 -10
  28. data/stylesheets/flint/functions/lib/_support-syntax-bem.scss +10 -9
  29. data/stylesheets/flint/functions/lib/_support-syntax.scss +14 -12
  30. data/stylesheets/flint/functions/lib/_types-in-list.scss +9 -8
  31. data/stylesheets/flint/functions/lib/_use-syntax.scss +12 -8
  32. data/stylesheets/flint/globals/_globals.scss +35 -21
  33. data/stylesheets/flint/mixins/_mixins.scss +3 -2
  34. data/stylesheets/flint/mixins/lib/_box-sizing.scss +7 -7
  35. data/stylesheets/flint/mixins/lib/_calculate.scss +112 -583
  36. data/stylesheets/flint/mixins/lib/_clearfix.scss +7 -7
  37. data/stylesheets/flint/mixins/lib/_container.scss +6 -12
  38. data/stylesheets/flint/mixins/lib/_main.scss +271 -202
  39. data/stylesheets/flint/mixins/lib/_new-instance.scss +12 -15
  40. data/stylesheets/flint/mixins/lib/_print-instance.scss +16 -20
  41. metadata +3 -4
  42. data/stylesheets/flint/functions/lib/_calc-margin.scss +0 -57
@@ -1,25 +1,30 @@
1
- // Helpers
2
- // ----
1
+ /*
2
+ * Helpers
3
+ */
3
4
  @import "helpers/helpers";
4
5
 
5
- // Functions
6
- // ----
6
+ /*
7
+ * Functions
8
+ */
7
9
  @import "lib/exists";
10
+
8
11
  // Getters
9
12
  @import "lib/map-fetch";
10
13
  @import "lib/get-value";
11
14
  @import "lib/get-index";
12
15
  @import "lib/steal-key";
13
16
  @import "lib/steal-values";
17
+
14
18
  // Calculations
15
19
  @import "lib/fluid-width";
16
20
  @import "lib/calc-width";
17
- @import "lib/calc-margin";
18
21
  @import "lib/calc-breakpoint";
22
+
19
23
  // Instance functions
20
24
  @import "lib/instance";
21
25
  @import "lib/has-family-instance";
22
26
  @import "lib/get-instance-value";
27
+
23
28
  // List functions
24
29
  @import "lib/list-to-string";
25
30
  @import "lib/types-in-list";
@@ -28,13 +33,16 @@
28
33
  @import "lib/replace";
29
34
  @import "lib/remove";
30
35
  @import "lib/last";
36
+
31
37
  // String functions
32
38
  @import "lib/replace-substring";
33
39
  @import "lib/string-to-list";
34
40
 
35
- // Support syntax
36
- // ---
41
+ /*
42
+ * Support syntax
43
+ */
37
44
  @import "lib/use-syntax";
38
45
  @import "lib/support-syntax";
46
+
39
47
  // Syntaxes
40
48
  @import "lib/support-syntax-bem"
@@ -1,181 +1,179 @@
1
- // Returns truthiness of a value
2
- // -------------------------------------------------------------------------------
3
- // @param $value [literal] : value
4
- // -------------------------------------------------------------------------------
5
- // @return [bool]
6
-
1
+ /**
2
+ * Returns truthiness of a value
3
+ *
4
+ * @param {*} $value
5
+ *
6
+ * @return {Bool}
7
+ */
7
8
  @function flint-is-true($value) {
8
9
  @return if($value == null, false, $value and $value != null and $value != "" and $value != ());
9
10
  }
10
11
 
11
- // Checks if item is map
12
- //--------------------------------------------------------------------------------
13
- // @param $n [map] : value
14
- // -------------------------------------------------------------------------------
15
- // @return [bool]
16
-
12
+ /**
13
+ * Checks if item is map
14
+ *
15
+ * @param {Map} $n
16
+ *
17
+ * @return {Bool}
18
+ */
17
19
  @function flint-is-map($n) {
18
20
  @return type-of($n) == "map";
19
21
  }
20
22
 
21
- // Checks if item is list
22
- //--------------------------------------------------------------------------------
23
- // @param $n [list] : value
24
- // -------------------------------------------------------------------------------
25
- // @return [bool]
26
-
23
+ /**
24
+ * Checks if item is list
25
+ *
26
+ * @param {List} $n
27
+ *
28
+ * @return {Bool}
29
+ */
27
30
  @function flint-is-list($n) {
28
31
  @return type-of($n) == "list";
29
32
  }
30
33
 
31
- // Checks if item is number
32
- //--------------------------------------------------------------------------------
33
- // @param $n [number] : value
34
- // -------------------------------------------------------------------------------
35
- // @return [bool]
36
-
34
+ /**
35
+ * Checks if item is number
36
+ *
37
+ * @param {Number} $n
38
+ *
39
+ * @return {Bool}
40
+ */
37
41
  @function flint-is-number($n) {
38
42
  @return type-of($n) == "number";
39
43
  }
40
44
 
41
- // Checks if item is string
42
- //--------------------------------------------------------------------------------
43
- // @param $n [string] : value
44
- // -------------------------------------------------------------------------------
45
- // @return [bool]
46
-
45
+ /**
46
+ * Checks if item is string
47
+ *
48
+ * @param {String} $n
49
+ *
50
+ * @return {Bool}
51
+ */
47
52
  @function flint-is-string($n) {
48
53
  @return type-of($n) == "string";
49
54
  }
50
55
 
51
- // Checks if item is not string
52
- //--------------------------------------------------------------------------------
53
- // @param $n [string] : value
54
- // -------------------------------------------------------------------------------
55
- // @return [bool]
56
-
56
+ /**
57
+ * Checks if item is not string
58
+ *
59
+ * @param {String} $n
60
+ *
61
+ * @return {Bool}
62
+ */
57
63
  @function flint-is-not-string($n) {
58
64
  @return type-of($n) != "string";
59
65
  }
60
66
 
61
- // Gets list of each breakpoint's key
62
- // -------------------------------------------------------------------------------
63
- // @return [list]
67
+ /**
68
+ * Get gutter value from config map
69
+ *
70
+ * @return {Number}
71
+ */
72
+ @function flint-get-gutter() {
73
+ @return flint-get-value("settings", "gutter");
74
+ }
64
75
 
76
+ /**
77
+ * Gets list of each breakpoint's key
78
+ *
79
+ * @return {List}
80
+ */
65
81
  @function flint-get-all-keys() {
66
- $all-keys: ();
67
-
68
- @for $i from 1 through (length(flint-map-fetch($flint, "config")) - 1) {
69
- $key: flint-steal-key($i);
70
- $all-keys: append($all-keys, $key, "comma");
71
- }
72
-
73
- @return $all-keys;
82
+ @return map-keys(flint-get-value("breakpoints"));
74
83
  }
75
84
 
76
- // Gets list of all breakpoints
77
- // -------------------------------------------------------------------------------
78
- // @return [list]
79
-
85
+ /**
86
+ * Gets list of all breakpoints
87
+ *
88
+ * @return {List}
89
+ */
80
90
  @function flint-get-all-breakpoints() {
91
+ $all-keys: flint-get-all-keys();
81
92
  $all-breakpoints: ();
82
93
 
83
- @each $map, $keys in map-get($flint, "config") {
84
- @each $key, $value in $keys {
85
- @if $key == "breakpoint" {
86
- $all-breakpoints: append($all-breakpoints, $value, "comma");
87
- }
88
- }
94
+ @each $key in $all-keys {
95
+ $all-breakpoints: append($all-breakpoints, flint-get-value("breakpoints", $key, "breakpoint"), "comma");
89
96
  }
90
97
 
91
98
  @return $all-breakpoints;
92
99
  }
93
100
 
94
- // Checks if passed $key is the highest breakpoint
95
- // -------------------------------------------------------------------------------
96
- // @param $key [string] : alias of breakpoint
97
- // -------------------------------------------------------------------------------
98
- // @return [bool]
99
-
101
+ /**
102
+ * Checks if passed $key is the highest breakpoint
103
+ *
104
+ * @param {String} $key - alias of breakpoint
105
+ *
106
+ * @return {Bool}
107
+ */
100
108
  @function flint-is-highest-breakpoint($key) {
101
- @if flint-get-value($key, "breakpoint") == max(flint-get-all-breakpoints()...) {
102
- @return true;
103
- } @else {
104
- @return false;
105
- }
109
+ @return flint-get-value("breakpoints", $key, "breakpoint") == max(flint-get-all-breakpoints()...);
106
110
  }
107
111
 
108
- // Checks if passed $key is the lowest breakpoint
109
- // -------------------------------------------------------------------------------
110
- // @param $key [string] : alias of breakpoint
111
- // -------------------------------------------------------------------------------
112
- // @return [bool]
113
-
112
+ /**
113
+ * Checks if passed $key is the lowest breakpoint
114
+ *
115
+ * @param {String} $key - alias of breakpoint
116
+ *
117
+ * @return {Bool}
118
+ */
114
119
  @function flint-is-lowest-breakpoint($key) {
115
- @if flint-get-value($key, "breakpoint") == min(flint-get-all-breakpoints()...) {
116
- @return true;
117
- } @else {
118
- @return false;
119
- }
120
+ @return flint-get-value("breakpoints", $key, "breakpoint") == min(flint-get-all-breakpoints()...);
120
121
  }
121
122
 
122
- // Checks if $key is grid default
123
- // -------------------------------------------------------------------------------
124
- // @param $key [string] : alias of breakpoint
125
- // -------------------------------------------------------------------------------
126
- // @return [bool]
127
-
123
+ /**
124
+ * Checks if $key is grid default
125
+ *
126
+ * @param {String} $key - alias of breakpoint
127
+ *
128
+ * @return {Bool}
129
+ */
128
130
  @function flint-is-default($key) {
129
- @if $key == flint-get-value("settings", "default") {
130
- @return true;
131
- } @else {
132
- @return false;
133
- }
131
+ @return $key == flint-get-value("settings", "default");
134
132
  }
135
133
 
136
- // Gets all breakpoint column values
137
- // -------------------------------------------------------------------------------
138
- // @return [list]
139
-
134
+ /**
135
+ * Gets all breakpoint column values
136
+ *
137
+ * @return {List}
138
+ */
140
139
  @function flint-get-all-columns() {
140
+ $all-keys: flint-get-all-keys();
141
141
  $all-columns: ();
142
142
 
143
- @each $map, $keys in map-get($flint, "config") {
144
- @each $key, $value in $keys {
145
- @if $key == "columns" {
146
- $all-columns: append($all-columns, $value, "comma");
147
- }
148
- }
143
+ @each $key in $all-keys {
144
+ $all-columns: append($all-columns, flint-get-value("breakpoints", $key, "columns"), "comma");
149
145
  }
150
146
 
151
147
  @return $all-columns;
152
148
  }
153
149
 
154
- // Returns the unit used in config
155
- // -------------------------------------------------------------------------------
156
- // @return [literal]
157
-
150
+ /**
151
+ * Returns the unit used in config
152
+ *
153
+ * @return {*}
154
+ */
158
155
  @function flint-get-config-unit() {
159
156
  @return unit(flint-get-value("settings", "gutter"));
160
157
  }
161
158
 
162
- // Convert pixel value to em
163
- // -------------------------------------------------------------------------------
164
- // @param $target [number] : pixel value
165
- // @param $context [number] : context to divide by
166
- // -------------------------------------------------------------------------------
167
- // @return : em value of $target relative to $context
168
- // -------------------------------------------------------------------------------
169
-
159
+ /**
160
+ * Convert pixel value to em
161
+ *
162
+ * @param {Number} $target - pixel value
163
+ * @param {Number} $context - context to divide by
164
+ *
165
+ * @return em value of target relative to context
166
+ */
170
167
  @function flint-to-em($target, $context: $flint__base-font-size) {
171
168
  @return ($target / $context) * 1em;
172
169
  }
173
170
 
174
- // Use Ruby functions in place of Sass functions where possible
175
- // to speed up performance, especially with string functions
176
- // -------------------------------------------------------------------------------
177
- // @return [bool]
178
-
171
+ /**
172
+ * Use Ruby functions in place of Sass functions where possible
173
+ * to speed up performance, especially with string functions
174
+ *
175
+ * @return {Bool}
176
+ */
179
177
  @function flint-use-ruby-functions() {
180
178
  @return flint_use_ruby() == true;
181
179
  }
@@ -1,52 +1,43 @@
1
- // Calculate from-to breakpoints
2
- // -------------------------------------------------------------------------------
3
- // @param $n [string] : how to calculate breakpoint
4
- // @param $key [string] : key of breakpoint
5
- // @param $i [number] : index of current breakpoint
6
- // -------------------------------------------------------------------------------
7
- // @return calculated value
8
-
9
- @function flint-calc-breakpoint($n, $key, $i) {
10
- @if $n == "alias" {
1
+ /**
2
+ * Calculate breakpoint query
3
+ *
4
+ * @param {String} $type - type of query to get
5
+ * @param {String} $key - key of breakpoint
6
+ * @param {Number} $i - index of current breakpoint
7
+ *
8
+ * @return {Number} - breakpoint value
9
+ */
10
+ @function flint-calc-breakpoint($type, $key, $i) {
11
+
12
+ @if $type == "alias" {
11
13
 
12
14
  @if flint-get-value("settings", "grid") == "fixed" {
13
-
14
15
  @if flint-is-lowest-breakpoint($key) {
15
-
16
16
  @return 0;
17
-
18
17
  } @else {
19
-
20
- @return flint-get-value($key, "breakpoint");
21
-
18
+ @return flint-get-value("breakpoints", $key, "breakpoint");
22
19
  }
23
20
  } @else if flint-get-value("settings", "grid") == "fluid" {
24
-
25
- @return flint-get-value($key, "breakpoint");
26
-
21
+ @return flint-get-value("breakpoints", $key, "breakpoint");
27
22
  }
28
- } @else if $n == "next" {
29
23
 
30
- @if flint-is-lowest-breakpoint($key) {
24
+ } @else if $type == "next" {
31
25
 
26
+ @if flint-is-lowest-breakpoint($key) {
32
27
  @return 0;
33
-
34
28
  } @else {
35
-
36
- @return flint-get-value(flint-steal-key(($i + 1)), "breakpoint");
37
-
29
+ @return flint-get-value("breakpoints", flint-steal-key(($i + 1)), "breakpoint");
38
30
  }
39
31
 
40
- } @else if $n == "prev" {
32
+ } @else if $type == "prev" {
41
33
 
42
34
  @if flint-is-highest-breakpoint($key) {
43
-
44
- @return flint-get-value($key, "breakpoint");
45
-
35
+ @return flint-get-value("breakpoints", $key, "breakpoint");
46
36
  } @else {
47
-
48
- @return flint-get-value(flint-steal-key(($i - 1)), "breakpoint");
49
-
37
+ @return flint-get-value("breakpoints", flint-steal-key(($i - 1)), "breakpoint");
50
38
  }
39
+
51
40
  }
41
+
42
+ @return false;
52
43
  }
@@ -1,45 +1,59 @@
1
- // Calculate width
2
- // -------------------------------------------------------------------------------
3
- // @param $key [string] : key for lookup
4
- // @param $span [number] : span value of element
5
- // @param $context [number] : context value of element
6
- // -------------------------------------------------------------------------------
7
- // @return calculated value | false
8
-
9
- @function flint-calc-width($key, $span, $context: null) {
10
- $result: false;
1
+ /**
2
+ * Calculate width
3
+ *
4
+ * @param {String} $key - key of breakpoint
5
+ * @param {Number} $span - span value of element
6
+ * @param {Number | String} $context (null) - context value of element
7
+ * @param {Number} $deduct (null) - subtract value out of final width
8
+ *
9
+ * @return {Map | False} - map of target and context result
10
+ */
11
+ @function flint-calc-width($key, $span, $context: null, $deduct: null) {
12
+ $result: ();
11
13
 
12
14
  // Check to see if value has been cached
13
15
  @if map-has-key($flint__cached-values, "#{$key, $span, $context}::width") and $context != "auto" {
14
16
  @return map-get($flint__cached-values, "#{$key, $span, $context}::width");
15
17
  }
16
18
 
17
- @if flint-get-value("settings", "grid") == "fluid" {
18
-
19
- @if $key == "container" or $span == "container" {
19
+ @if $span == "container" {
20
20
 
21
- $result: flint-fluid-width(flint-get-value($key, "breakpoint"), flint-get-value($key, "breakpoint"));
21
+ $result: flint-get-value("breakpoints", $key, "breakpoint");
22
22
 
23
- } @else if $context == null {
23
+ } @else if $context == "auto" {
24
24
 
25
- $result: flint-fluid-width((flint-get-value($key, "breakpoint") / flint-get-value($key, "columns") * $span), flint-get-value($key, "breakpoint"));
25
+ /*
26
+ * Check if instance maps are enabled
27
+ */
28
+ @if not flint-get-value("settings", "instance-maps") {
29
+ @if not $flint__development-mode {
30
+ @error "Instance maps are disabled. Automatic context is not available. Enable `instance-maps` in the config to continue.";
31
+ } @else {
32
+ @warn "Instance maps are disabled. Automatic context is not available. Enable `instance-maps` in the config to continue.";
33
+ }
34
+ }
26
35
 
36
+ @if flint-has-family-instance($key) {
37
+ $result: map-merge($result, ("target": ((flint-get-instance-value($key, "internal", "width") / flint-get-instance-value($key, "span") * $span) - if($deduct, $deduct, 0))));
38
+ $result: map-merge($result, ("context": flint-get-instance-value($key, "internal", "width")));
27
39
  } @else {
28
-
29
- $result: flint-fluid-width((flint-get-value($key, "breakpoint") / flint-get-value($key, "columns") * $span), ((flint-get-value($key, "breakpoint") / flint-get-value($key, "columns") * $context)));
30
-
40
+ @if not $flint__development-mode {
41
+ @error "You set context to `#{$context}`, but a parent instance could not be found for `#{nth(&, 1) + '::' + $key}`";
42
+ } @else {
43
+ @return false;
44
+ }
31
45
  }
32
- } @if flint-get-value("settings", "grid") == "fixed" {
33
-
34
- @if $key == "container" or $span == "container" {
35
46
 
36
- $result: flint-get-value($key, "breakpoint");
47
+ } @else {
37
48
 
38
- } @else {
39
-
40
- $result: flint-get-value($key, "breakpoint") / flint-get-value($key, "columns") * $span;
49
+ $result: map-merge($result, ("target": ((flint-get-value("breakpoints", $key, "breakpoint") / flint-get-value("breakpoints", $key, "columns") * $span) - if($deduct, $deduct, 0))));
41
50
 
51
+ @if $context {
52
+ $result: map-merge($result, ("context": flint-get-value("breakpoints", $key, "breakpoint") / flint-get-value("breakpoints", $key, "columns") * $context));
53
+ } @else {
54
+ $result: map-merge($result, ("context": flint-get-value("breakpoints", $key, "breakpoint")));
42
55
  }
56
+
43
57
  }
44
58
 
45
59
  // Save result to cache