flint-gs 1.12.0 → 2.0.0.rc.1

data/stylesheets/flint/functions/_functions.scss

@@ -1,25 +1,30 @@
-// Helpers
-// ----
+/*
+ * Helpers
+ */
 @import "helpers/helpers";
 
-// Functions
-// ----
+/*
+ * Functions
+ */
 @import "lib/exists";
+
 // Getters
 @import "lib/map-fetch";
 @import "lib/get-value";
 @import "lib/get-index";
 @import "lib/steal-key";
 @import "lib/steal-values";
+
 // Calculations
 @import "lib/fluid-width";
 @import "lib/calc-width";
-@import "lib/calc-margin";
 @import "lib/calc-breakpoint";
+
 // Instance functions
 @import "lib/instance";
 @import "lib/has-family-instance";
 @import "lib/get-instance-value";
+
 // List functions
 @import "lib/list-to-string";
 @import "lib/types-in-list";
@@ -28,13 +33,16 @@
 @import "lib/replace";
 @import "lib/remove";
 @import "lib/last";
+
 // String functions
 @import "lib/replace-substring";
 @import "lib/string-to-list";
 
-// Support syntax
-// ---
+/*
+ * Support syntax
+ */
 @import "lib/use-syntax";
 @import "lib/support-syntax";
+
 // Syntaxes
 @import "lib/support-syntax-bem"

data/stylesheets/flint/functions/helpers/_helpers.scss

@@ -1,181 +1,179 @@
-// Returns truthiness of a value
-// -------------------------------------------------------------------------------
-// @param $value [literal] : value
-// -------------------------------------------------------------------------------
-// @return [bool]
-
+/**
+ * Returns truthiness of a value
+ *
+ * @param {*} $value
+ *
+ * @return {Bool}
+ */
 @function flint-is-true($value) {
 	@return if($value == null, false, $value and $value != null and $value != "" and $value != ());
 }
 
-// Checks if item is map
-//--------------------------------------------------------------------------------
-// @param $n [map] : value
-// -------------------------------------------------------------------------------
-// @return [bool]
-
+/**
+ * Checks if item is map
+ *
+ * @param {Map} $n
+ *
+ * @return {Bool}
+ */
 @function flint-is-map($n) {
 	@return type-of($n) == "map";
 }
 
-// Checks if item is list
-//--------------------------------------------------------------------------------
-// @param $n [list] : value
-// -------------------------------------------------------------------------------
-// @return [bool]
-
+/**
+ * Checks if item is list
+ *
+ * @param {List} $n
+ *
+ * @return {Bool}
+ */
 @function flint-is-list($n) {
 	@return type-of($n) == "list";
 }
 
-// Checks if item is number
-//--------------------------------------------------------------------------------
-// @param $n [number] : value
-// -------------------------------------------------------------------------------
-// @return [bool]
-
+/**
+ * Checks if item is number
+ *
+ * @param {Number} $n
+ *
+ * @return {Bool}
+ */
 @function flint-is-number($n) {
 	@return type-of($n) == "number";
 }
 
-// Checks if item is string
-//--------------------------------------------------------------------------------
-// @param $n [string] : value
-// -------------------------------------------------------------------------------
-// @return [bool]
-
+/**
+ * Checks if item is string
+ *
+ * @param {String} $n
+ *
+ * @return {Bool}
+ */
 @function flint-is-string($n) {
 	@return type-of($n) == "string";
 }
 
-// Checks if item is not string
-//--------------------------------------------------------------------------------
-// @param $n [string] : value
-// -------------------------------------------------------------------------------
-// @return [bool]
-
+/**
+ * Checks if item is not string
+ *
+ * @param {String} $n
+ *
+ * @return {Bool}
+ */
 @function flint-is-not-string($n) {
 	@return type-of($n) != "string";
 }
 
-// Gets list of each breakpoint's key
-// -------------------------------------------------------------------------------
-// @return [list]
+/**
+ * Get gutter value from config map
+ *
+ * @return {Number}
+ */
+@function flint-get-gutter() {
+	@return flint-get-value("settings", "gutter");
+}
 
+/**
+ * Gets list of each breakpoint's key
+ *
+ * @return {List}
+ */
 @function flint-get-all-keys() {
-	$all-keys: ();
-
-	@for $i from 1 through (length(flint-map-fetch($flint, "config")) - 1) {
-		$key: flint-steal-key($i);
-		$all-keys: append($all-keys, $key, "comma");
-	}
-
-	@return $all-keys;
+	@return map-keys(flint-get-value("breakpoints"));
 }
 
-// Gets list of all breakpoints
-// -------------------------------------------------------------------------------
-// @return [list]
-
+/**
+ * Gets list of all breakpoints
+ *
+ * @return {List}
+ */
 @function flint-get-all-breakpoints() {
+	$all-keys: flint-get-all-keys();
 	$all-breakpoints: ();
 
-	@each $map, $keys in map-get($flint, "config") {
-		@each $key, $value in $keys {
-			@if $key == "breakpoint" {
-				$all-breakpoints: append($all-breakpoints, $value, "comma");
-			}
-		}
+	@each $key in $all-keys {
+		$all-breakpoints: append($all-breakpoints, flint-get-value("breakpoints", $key, "breakpoint"), "comma");
 	}
 
 	@return $all-breakpoints;
 }
 
-// Checks if passed $key is the highest breakpoint
-// -------------------------------------------------------------------------------
-// @param $key [string] : alias of breakpoint
-// -------------------------------------------------------------------------------
-// @return [bool]
-
+/**
+ * Checks if passed $key is the highest breakpoint
+ *
+ * @param {String} $key - alias of breakpoint
+ *
+ * @return {Bool}
+ */
 @function flint-is-highest-breakpoint($key) {
-	@if flint-get-value($key, "breakpoint") == max(flint-get-all-breakpoints()...) {
-		@return true;
-	} @else {
-		@return false;
-	}
+	@return flint-get-value("breakpoints", $key, "breakpoint") == max(flint-get-all-breakpoints()...);
 }
 
-// Checks if passed $key is the lowest breakpoint
-// -------------------------------------------------------------------------------
-// @param $key [string] : alias of breakpoint
-// -------------------------------------------------------------------------------
-// @return [bool]
-
+/**
+ * Checks if passed $key is the lowest breakpoint
+ *
+ * @param {String} $key - alias of breakpoint
+ *
+ * @return {Bool}
+ */
 @function flint-is-lowest-breakpoint($key) {
-	@if flint-get-value($key, "breakpoint") == min(flint-get-all-breakpoints()...) {
-		@return true;
-	} @else {
-		@return false;
-	}
+	@return flint-get-value("breakpoints", $key, "breakpoint") == min(flint-get-all-breakpoints()...);
 }
 
-// Checks if $key is grid default
-// -------------------------------------------------------------------------------
-// @param $key [string] : alias of breakpoint
-// -------------------------------------------------------------------------------
-// @return [bool]
-
+/**
+ * Checks if $key is grid default
+ *
+ * @param {String} $key - alias of breakpoint
+ *
+ * @return {Bool}
+ */
 @function flint-is-default($key) {
-	@if $key == flint-get-value("settings", "default") {
-		@return true;
-	} @else {
-		@return false;
-	}
+	@return $key == flint-get-value("settings", "default");
 }
 
-// Gets all breakpoint column values
-// -------------------------------------------------------------------------------
-// @return [list]
-
+/**
+ * Gets all breakpoint column values
+ *
+ * @return {List}
+ */
 @function flint-get-all-columns() {
+	$all-keys: flint-get-all-keys();
 	$all-columns: ();
 
-	@each $map, $keys in map-get($flint, "config") {
-		@each $key, $value in $keys {
-			@if $key == "columns" {
-				$all-columns: append($all-columns, $value, "comma");
-			}
-		}
+	@each $key in $all-keys {
+		$all-columns: append($all-columns, flint-get-value("breakpoints", $key, "columns"), "comma");
 	}
 
 	@return $all-columns;
 }
 
-// Returns the unit used in config
-// -------------------------------------------------------------------------------
-// @return [literal]
-
+/**
+ * Returns the unit used in config
+ *
+ * @return {*}
+ */
 @function flint-get-config-unit() {
 	@return unit(flint-get-value("settings", "gutter"));
 }
 
-// Convert pixel value to em
-// -------------------------------------------------------------------------------
-// @param $target [number] : pixel value
-// @param $context [number] : context to divide by
-// -------------------------------------------------------------------------------
-// @return : em value of $target relative to $context
-// -------------------------------------------------------------------------------
-
+/**
+ * Convert pixel value to em
+ *
+ * @param {Number} $target  - pixel value
+ * @param {Number} $context - context to divide by
+ *
+ * @return em value of target relative to context
+ */
 @function flint-to-em($target, $context: $flint__base-font-size) {
 	@return ($target / $context) * 1em;
 }
 
-// Use Ruby functions in place of Sass functions where possible
-//   to speed up performance, especially with string functions
-// -------------------------------------------------------------------------------
-// @return [bool]
-
+/**
+ * Use Ruby functions in place of Sass functions where possible
+ *   to speed up performance, especially with string functions
+ *
+ * @return {Bool}
+ */
 @function flint-use-ruby-functions() {
 	@return flint_use_ruby() == true;
 }

data/stylesheets/flint/functions/lib/_calc-breakpoint.scss

@@ -1,52 +1,43 @@
-// Calculate from-to breakpoints
-// -------------------------------------------------------------------------------
-// @param $n [string] : how to calculate breakpoint
-// @param $key [string] : key of breakpoint
-// @param $i [number] : index of current breakpoint
-// -------------------------------------------------------------------------------
-// @return calculated value
-
-@function flint-calc-breakpoint($n, $key, $i) {
-    @if $n == "alias" {
+/**
+ * Calculate breakpoint query
+ *
+ * @param {String} $type - type of query to get
+ * @param {String} $key  - key of breakpoint
+ * @param {Number} $i    - index of current breakpoint
+ *
+ * @return {Number} - breakpoint value
+ */
+@function flint-calc-breakpoint($type, $key, $i) {
+
+    @if $type == "alias" {
 
         @if flint-get-value("settings", "grid") == "fixed" {
-
             @if flint-is-lowest-breakpoint($key) {
-
                 @return 0;
-
             } @else {
-
-                @return flint-get-value($key, "breakpoint");
-
+                @return flint-get-value("breakpoints", $key, "breakpoint");
             }
         } @else if flint-get-value("settings", "grid") == "fluid" {
-
-            @return flint-get-value($key, "breakpoint");
-
+            @return flint-get-value("breakpoints", $key, "breakpoint");
         }
-    } @else if $n == "next" {
 
-        @if flint-is-lowest-breakpoint($key) {
+    } @else if $type == "next" {
 
+        @if flint-is-lowest-breakpoint($key) {
             @return 0;
-
         } @else {
-
-            @return flint-get-value(flint-steal-key(($i + 1)), "breakpoint");
-
+            @return flint-get-value("breakpoints", flint-steal-key(($i + 1)), "breakpoint");
         }
 
-    } @else if $n == "prev" {
+    } @else if $type == "prev" {
 
         @if flint-is-highest-breakpoint($key) {
-
-            @return flint-get-value($key, "breakpoint");
-
+            @return flint-get-value("breakpoints", $key, "breakpoint");
         } @else {
-
-            @return flint-get-value(flint-steal-key(($i - 1)), "breakpoint");
-
+            @return flint-get-value("breakpoints", flint-steal-key(($i - 1)), "breakpoint");
         }
+
     }
+
+    @return false;
 }

data/stylesheets/flint/functions/lib/_calc-width.scss

@@ -1,45 +1,59 @@
-// Calculate width
-// -------------------------------------------------------------------------------
-// @param $key [string] : key for lookup
-// @param $span [number] : span value of element
-// @param $context [number] : context value of element
-// -------------------------------------------------------------------------------
-// @return calculated value | false
-
-@function flint-calc-width($key, $span, $context: null) {
-	$result: false;
+/**
+* Calculate width
+*
+* @param {String}          $key            - key of breakpoint
+* @param {Number}          $span           - span value of element
+* @param {Number | String} $context (null) - context value of element
+* @param {Number}          $deduct  (null) - subtract value out of final width
+*
+* @return {Map | False} - map of target and context result
+*/
+@function flint-calc-width($key, $span, $context: null, $deduct: null) {
+	$result: ();
 
 	// Check to see if value has been cached
 	@if map-has-key($flint__cached-values, "#{$key, $span, $context}::width") and $context != "auto" {
 		@return map-get($flint__cached-values, "#{$key, $span, $context}::width");
 	}
 
-	@if flint-get-value("settings", "grid") == "fluid" {
-
-		@if $key == "container" or $span == "container" {
+	@if $span == "container" {
 
-			$result: flint-fluid-width(flint-get-value($key, "breakpoint"), flint-get-value($key, "breakpoint"));
+		$result: flint-get-value("breakpoints", $key, "breakpoint");
 
-		} @else if $context == null {
+	} @else if $context == "auto" {
 
-			$result: flint-fluid-width((flint-get-value($key, "breakpoint") / flint-get-value($key, "columns") * $span), flint-get-value($key, "breakpoint"));
+		/*
+		 * Check if instance maps are enabled
+		 */
+		@if not flint-get-value("settings", "instance-maps") {
+			@if not $flint__development-mode {
+				@error "Instance maps are disabled. Automatic context is not available. Enable `instance-maps` in the config to continue.";
+			} @else {
+				@warn "Instance maps are disabled. Automatic context is not available. Enable `instance-maps` in the config to continue.";
+			}
+		}
 
+		@if flint-has-family-instance($key) {
+			$result: map-merge($result, ("target": ((flint-get-instance-value($key, "internal", "width") / flint-get-instance-value($key, "span") * $span) - if($deduct, $deduct, 0))));
+			$result: map-merge($result, ("context": flint-get-instance-value($key, "internal", "width")));
 		} @else {
-
-			$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)));
-
+			@if not $flint__development-mode {
+				@error "You set context to `#{$context}`, but a parent instance could not be found for `#{nth(&, 1) + '::' + $key}`";
+			} @else {
+				@return false;
+			}
 		}
-	} @if flint-get-value("settings", "grid") == "fixed" {
-		
-		@if $key == "container" or $span == "container" {
 
-			$result: flint-get-value($key, "breakpoint");
+	} @else {
 
-		} @else {
-
-			$result: flint-get-value($key, "breakpoint") / flint-get-value($key, "columns") * $span;
+		$result: map-merge($result, ("target": ((flint-get-value("breakpoints", $key, "breakpoint") / flint-get-value("breakpoints", $key, "columns") * $span) - if($deduct, $deduct, 0))));
 
+		@if $context {
+			$result: map-merge($result, ("context": flint-get-value("breakpoints", $key, "breakpoint") / flint-get-value("breakpoints", $key, "columns") * $context));
+		} @else {
+			$result: map-merge($result, ("context": flint-get-value("breakpoints", $key, "breakpoint")));
 		}
+
 	}
 
 	// Save result to cache