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,10 +1,11 @@
1
- // Check if key exists in map
2
- //--------------------------------------------------------------------------------
3
- // @param $map [map] : map that contains $value
4
- // @param $value [string] : key to search for
5
- // -------------------------------------------------------------------------------
6
- // @return [bool]
7
-
1
+ /**
2
+ * Check if key exists in map
3
+ *
4
+ * @param {Map} $map - map to search
5
+ * @param {Strong} $value - key to search for
6
+ *
7
+ * @return {Bool}
8
+ */
8
9
  @function flint-exists($map, $value){
9
10
  $is-map: flint-is-map($map);
10
11
  $top-has-key: $is-map and map-has-key($map, $value) or false;
@@ -1,10 +1,11 @@
1
- // Convert fixed to fluid width
2
- //--------------------------------------------------------------------------------
3
- // @param $target [number] : target
4
- // @param $context [number] : context
5
- // -------------------------------------------------------------------------------
6
- // @return [number]
7
-
1
+ /**
2
+ * Convert fixed to fluid width
3
+ *
4
+ * @param {Number} $target
5
+ * @param {Number} $context
6
+ *
7
+ * @return {Number}
8
+ */
8
9
  @function flint-fluid-width($target, $context) {
9
10
  @return ($target / $context) * 100%;
10
11
  }
@@ -1,14 +1,16 @@
1
- // Gets the index of the passed key
2
- // -------------------------------------------------------------------------------
3
- // @param $key [string] : breakpoint key
4
- // -------------------------------------------------------------------------------
5
- // @return [number]
6
-
1
+ /**
2
+ * Gets the index of the passed key
3
+ *
4
+ * @param {String} $key - breakpoint key
5
+ *
6
+ * @return {Number}
7
+ */
7
8
  @function flint-get-index($key) {
8
- @for $i from 1 through (length(flint-map-fetch($flint, "config")) - 1) {
9
- @if flint-steal-key($i) == $key {
10
- @return $i;
11
- }
9
+
10
+ @for $i from 1 through length(map-keys(flint-get-value("breakpoints"))) {
11
+ @if flint-steal-key($i) == $key {
12
+ @return $i;
13
+ }
12
14
  }
13
15
 
14
16
  @return false;
@@ -1,17 +1,11 @@
1
- // Get single value from key in instance map based on $selector::$key
2
- // -------------------------------------------------------------------------------
3
- // @warning : all values returned are strings and must be converted with `flint-to-number()`
4
- // -------------------------------------------------------------------------------
5
- // @param $key [string] : key
6
- // @param $value [number] : value
7
- // @param $deep [number] : fetch deep value
8
- // -------------------------------------------------------------------------------
9
- // @return fetched literal | false
10
-
11
- @function flint-get-instance-value($key, $value, $deep: null) {
12
- @if not $deep {
13
- @return flint-map-fetch($flint__instances, flint-has-family-instance($key) $value);
14
- } @else {
15
- @return flint-map-fetch($flint__instances, flint-has-family-instance($key) $value $deep);
16
- }
1
+ /**
2
+ * Get single value from key in instance map based on $selector::$key
3
+ *
4
+ * @param {String} $key - breakpoint key to pass to instance method
5
+ * @param {ArgList} $values - list of keys to fetch value from
6
+ *
7
+ * @return {String | False}
8
+ */
9
+ @function flint-get-instance-value($key, $values...) {
10
+ @return flint-map-fetch($flint__instances, flint-has-family-instance($key), $values...);
17
11
  }
@@ -1,14 +1,10 @@
1
- // Get single value from key in instance map based on $selector::$key
2
- // -------------------------------------------------------------------------------
3
- // @param $key [string] : breakpoint key
4
- // @param $value [string] : key of value
5
- // -------------------------------------------------------------------------------
6
- // @return [literal]
7
-
8
- @function flint-get-value($key, $value: null) {
9
- @if not $value {
10
- @return flint-map-fetch($flint, "config" $key);
11
- } @else {
12
- @return flint-map-fetch($flint, "config" $key $value);
13
- }
1
+ /**
2
+ * Get single value from configuration map
3
+ *
4
+ * @param {ArgList} $keys - list of keys to fetch value from
5
+ *
6
+ * @return {*}
7
+ */
8
+ @function flint-get-value($keys...) {
9
+ @return flint-map-fetch($flint, $keys...);
14
10
  }
@@ -1,17 +1,18 @@
1
- // Checks if instance flint-exists in selector familiy tree, falls back from current selector
2
- // -------------------------------------------------------------------------------
3
- // @param $key [string] : breakpoint key to search for matching instance
4
- // @param $syntax [string | null] : searches for instance using passed syntax
5
- // -------------------------------------------------------------------------------
6
- // @return matching instance | false
7
-
1
+ /**
2
+ * Checks if instance flint-exists in selector familiy tree, falls back from current selector
3
+ *
4
+ * @param {String} $key - breakpoint key to search for matching instance
5
+ * @param {String} $syntax - searches for instance using passed syntax parser
6
+ *
7
+ * @return {String | False} instance selector
8
+ */
8
9
  @function flint-has-family-instance($key: flint-get-value("settings", "default"), $syntax: $flint__support-syntax) {
9
- $selector-string: selector_string();
10
+ $selector: nth(&, 1);
10
11
 
11
12
  // Check if instance result had been cached
12
- @if map-has-key($flint__cached-instances, "#{$selector-string}") {
13
+ @if map-has-key($flint__cached-instances, "#{$selector}") {
13
14
  // Get cached instance
14
- $cached-instance: map-get($flint__cached-instances, "#{$selector-string}");
15
+ $cached-instance: map-get($flint__cached-instances, "#{$selector}");
15
16
  // Return with current key
16
17
  @return "#{$cached-instance}::#{$key}";
17
18
  }
@@ -19,25 +20,25 @@
19
20
  // Check for syntax support, try to find instance using it
20
21
  @if $syntax {
21
22
 
22
- $selector-list: flint-use-syntax($selector-string);
23
- $length: length($selector-list);
23
+ $parsed-selector: flint-use-syntax($selector);
24
+ $length: length($parsed-selector);
24
25
 
25
26
  // Loop through transformed selectors
26
27
  @for $i from 1 through $length {
27
28
 
28
29
  // Check flint-last selector in list
29
- @if flint-exists($flint__instances, "#{flint-last($selector-list)}::#{$key}") {
30
+ @if flint-exists($flint__instances, "#{flint-last($parsed-selector)}::#{$key}") {
30
31
 
31
32
  // Cache result
32
- $flint__cached-instances: map-merge($flint__cached-instances, ("#{$selector-string}": "#{flint-last($selector-list)}"));
33
+ $flint__cached-instances: map-merge($flint__cached-instances, ("#{$selector}": "#{flint-last($parsed-selector)}"));
33
34
 
34
35
  // Return the matching instance key
35
- @return "#{flint-last($selector-list)}::#{$key}";
36
+ @return "#{flint-last($parsed-selector)}::#{$key}";
36
37
 
37
38
  } @else {
38
39
 
39
40
  // Else, flint-remove the flint-last selector and loop again
40
- $selector-list: flint-remove($selector-list, flint-last($selector-list));
41
+ $parsed-selector: flint-remove($parsed-selector, flint-last($parsed-selector));
41
42
 
42
43
  }
43
44
  }
@@ -46,17 +47,17 @@
46
47
  @return flint-has-family-instance($key, null);
47
48
 
48
49
  } @else {
49
- $selector-list: flint-string-to-list($selector-string);
50
+ $selector-list: $selector;
50
51
  $length: length($selector-list);
51
52
 
52
53
  // Loop through length of list of selectors
53
54
  @for $i from 1 through $length {
54
55
 
55
- // Make sure that we're not counting the current selector string
56
- @if flint-exists($flint__instances, "#{flint-list-to-string($selector-list, ' ')}::#{$key}") and $selector-string != flint-list-to-string($selector-list, " ") {
56
+ // Make sure that we're not counting the current selector set
57
+ @if flint-exists($flint__instances, "#{flint-list-to-string($selector-list, ' ')}::#{$key}") and $selector != $selector-list {
57
58
 
58
59
  // Cache result
59
- $flint__cached-instances: map-merge($flint__cached-instances, ("#{$selector-string}": "#{flint-list-to-string($selector-list, ' ')}"));
60
+ $flint__cached-instances: map-merge($flint__cached-instances, ("#{$selector}": "#{flint-list-to-string($selector-list, ' ')}"));
60
61
 
61
62
  // Return the matching instance key
62
63
  @return "#{flint-list-to-string($selector-list, ' ')}::#{$key}";
@@ -1,38 +1,35 @@
1
- // Keeps count of all instances with arguments, stores in global var
2
- // -------------------------------------------------------------------------------
3
- // @param $key [string] : computed breakpoint of instance
4
- // @param $span [number] : computed span of instance
5
- // @param $context [number] : computed context of instance
6
- // @param $gutter [number] : computed gutter of instance
7
- // @param $shift [number] : computed shift of instance
8
- // @param $output-width [number] : computed width of instance
9
- // @param $output-margin-right [number] : computed right margin of instance
10
- // @param $output-margin-left [number] : computed left margin of instance
11
- // -------------------------------------------------------------------------------
12
- // @return instance map
13
-
14
- @function flint-instance($key, $span, $context, $gutter, $shift, $output-width, $output-margin-right, $output-margin-left) {
1
+ /**
2
+ * Keeps count of all instances with arguments, stores in global var
3
+ *
4
+ * @param {String} $key - computed breakpoint of instance
5
+ * @param {Number} $span - computed span of instance
6
+ * @param {Number} $context - computed context of instance
7
+ * @param {Number} $gutter - computed gutter of instance
8
+ * @param {Number} $output-width - computed width of instance
9
+ * @param {Number} $output-margin-right - computed right margin of instance
10
+ * @param {Number} $output-margin-left - computed left margin of instance
11
+ *
12
+ * @return {Map} merged instance map
13
+ */
14
+ @function flint-instance($key, $span, $context, $gutter, $output-width, $output-margin-right, $output-margin-left) {
15
15
 
16
16
  // Increase the instance count
17
17
  $flint__instance-count: $flint__instance-count + 1 !global;
18
18
 
19
19
  // Lets clean up the selector a bit...
20
- $selector-string: selector_string();
21
- $selector-list: flint-string-to-list($selector-string);
22
- $selector-cleaned: flint-list-to-string($selector-list, " ");
20
+ $selector: nth(&, 1);
23
21
 
24
22
  $flint__instance: (
25
- "#{$selector-cleaned}::#{$key}": (
23
+ "#{$selector}::#{$key}": (
26
24
  "instance-count": $flint__instance-count,
27
25
  "parent-selector": if(flint-has-family-instance($key) != false, flint-has-family-instance($key), none),
28
26
  "key": $key,
29
- "breakpoint": flint-get-value($key, "breakpoint"),
30
- "columns": flint-get-value($key, "columns"),
27
+ "breakpoint": flint-get-value("breakpoints", $key, "breakpoint"),
28
+ "columns": flint-get-value("breakpoints", $key, "columns"),
31
29
  "span": $span,
32
30
  "context": if($context == "auto", flint-get-instance-value($key, "span"), $context),
33
31
  "gutter": $gutter,
34
- "shift": $shift,
35
- "output": (
32
+ "internal": (
36
33
  "width": $output-width,
37
34
  "margin-right": $output-margin-right,
38
35
  "margin-left": $output-margin-left
@@ -1,9 +1,10 @@
1
- // Get last item in list
2
- // -------------------------------------------------------------------------------
3
- // @param $list [list] : list
4
- // -------------------------------------------------------------------------------
5
- // @return [list]
6
-
1
+ /**
2
+ * Get last item in list
3
+ *
4
+ * @param {List} $list
5
+ *
6
+ * @return {List}
7
+ */
7
8
  @function flint-last($list) {
8
9
  @return nth($list, length($list));
9
10
  }
@@ -1,12 +1,14 @@
1
- // Joins all elements of $list with $glue
2
- // -------------------------------------------------------------------------------
3
- // @documentation http://sassylists.com/documentation/#to-string
4
- // -------------------------------------------------------------------------------
5
- // @param $list [list] : list
6
- // @param $glue [string] : value to use as a join string
7
- // -------------------------------------------------------------------------------
8
- // @return [string]
9
-
1
+ /**
2
+ * Joins all elements of list with passed glue
3
+ *
4
+ * @link http://sassylists.com/documentation/#to-string
5
+ *
6
+ * @param {List} $list
7
+ * @param {String} $glue
8
+ * @param {Bool} $is-nested
9
+ *
10
+ * @return {String}
11
+ */
10
12
  @function flint-list-to-string($list, $glue: "", $is-nested: false) {
11
13
  $result: null;
12
14
  $length: length($list);
@@ -1,23 +1,17 @@
1
- // Fetch value from key in map
2
- // -------------------------------------------------------------------------------
3
- // @param $map [map] : map to fetch from
4
- // @param $keys [string | list] : string of key, or list of strings
5
- // -------------------------------------------------------------------------------
6
- // @return fetched literal | false
1
+ /**
2
+ * Fetch value from map
3
+ *
4
+ * @param {Map} $map - map to fetch value from
5
+ * @param {ArgList} $keys - list of keys to traverse
6
+ *
7
+ * @return {String | False}
8
+ */
9
+ @function flint-map-fetch($map, $keys...) {
10
+ $result: $map;
7
11
 
8
- @function flint-map-fetch($map, $keys) {
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
- $length: length($keys);
11
-
12
- @if $has-key and $length > 1 {
13
- $remainder: ();
14
-
15
- @for $i from 2 through $length {
16
- $remainder: append($remainder, nth($keys, $i))
17
- }
18
-
19
- @return flint-map-fetch($has-key, $remainder);
12
+ @each $key in $keys {
13
+ $result: flint-is-map($result) and map-has-key($result, $key) and map-get($result, $key) or false;
20
14
  }
21
15
 
22
- @return $has-key;
16
+ @return $result;
23
17
  }
@@ -1,15 +1,10 @@
1
- // Returns next indexed key based on passed index
2
- // -------------------------------------------------------------------------------
3
- // @param $index [number] : index
4
- // -------------------------------------------------------------------------------
5
- // @return [string] | null
6
-
7
- @function flint-next-index($index) {
8
- @if $index != (length(flint-map-fetch($flint, "config")) - 1) {
9
- @each $key in nth(map-get($flint, "config"), $index + 1) {
10
- @return $key;
11
- }
12
- } @else {
13
- @return null;
14
- }
1
+ /**
2
+ * Returns next indexed key based on passed index
3
+ *
4
+ * @param {Number} $index - index of breakpoint
5
+ *
6
+ * @return {String | False}
7
+ */
8
+ @function flint-next-index($index) {
9
+ @return if(flint-is-number($index) and $index != 0, flint-steal-key($index + 1), false);
15
10
  }
@@ -1,11 +1,12 @@
1
- // Removes all false and null values from $list
2
- // -------------------------------------------------------------------------------
3
- // @documentation http://sassylists.com/documentation.html#purge
4
- // -------------------------------------------------------------------------------
5
- // @param $list [list] : list
6
- // -------------------------------------------------------------------------------
7
- // @return [list]
8
-
1
+ /**
2
+ * Removes all false and null values from $list
3
+ *
4
+ * @link http://sassylists.com/documentation.html#purge
5
+ *
6
+ * @param {List} $list
7
+ *
8
+ * @return {List}
9
+ */
9
10
  @function flint-purge($list) {
10
11
  $result: ();
11
12
 
@@ -1,13 +1,14 @@
1
- // Remove $value from $list
2
- // -------------------------------------------------------------------------------
3
- // @documentation http://sassylists.com/documentation/#remove
4
- // -------------------------------------------------------------------------------
5
- // @param $list [list] : list
6
- // @param $value [literal] : value to flint-remove
7
- // @param $recursive [bool] : enable / disable recursivity
8
- // -------------------------------------------------------------------------------
9
- // @return [list]
10
-
1
+ /**
2
+ * Remove value from list
3
+ *
4
+ * @link http://sassylists.com/documentation/#remove
5
+ *
6
+ * @param {List} $list
7
+ * @param {*} $value
8
+ * @param {Bool} $recursive
9
+ *
10
+ * @return {List}
11
+ */
11
12
  @function flint-remove($list, $value) {
12
13
  @return flint-replace($list, $value, null);
13
14
  }
@@ -1,11 +1,12 @@
1
- // Replace substring
2
- // -------------------------------------------------------------------------------
3
- // @param $string [string] : string that contains substring
4
- // @param $substring [string] : substring to replace
5
- // @param $new-substring [string] : new string to replace sub with
6
- // -------------------------------------------------------------------------------
7
- // @return [string]
8
-
1
+ /**
2
+ * Replace substring
3
+ *
4
+ * @param {String} $string - string that contains substring
5
+ * @param {String} $substring - substring to replace
6
+ * @param {String} $new-substring (" ") - new string to replace sub with
7
+ *
8
+ * @return {String}
9
+ */
9
10
  @function flint-replace-substring($string, $substring, $new-substring: " ") {
10
11
 
11
12
  // Use Ruby function if available
@@ -1,13 +1,14 @@
1
- // Replaces $old by $new in $list
2
- // -------------------------------------------------------------------------------
3
- // @documentation http://sassylists.com/documentation.html#replace
4
- // -------------------------------------------------------------------------------
5
- // @param $list [list] : list
6
- // @param $old [literal] : value to replace
7
- // @param $value [literal] : new value for $old
8
- // -------------------------------------------------------------------------------
9
- // @return [list]
10
-
1
+ /**
2
+ * Replaces old by new in $list
3
+ *
4
+ * @link http://sassylists.com/documentation.html#replace
5
+ *
6
+ * @param {List} $list
7
+ * @param {*} $old
8
+ * @param {*} $value
9
+ *
10
+ * @return {List}
11
+ */
11
12
  @function flint-replace($list, $old, $value) {
12
13
  $running: true;
13
14