flint-gs 1.6.5 → 1.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 20b0ac111ab807d8eb76b531deaa0cdf2b63e576
-  data.tar.gz: 4d2b7b97bc1bbfe4d2b20e79095a933fc65b9f96
+  metadata.gz: 6932f06e68ffebf4f0b177fc44128552ff044b6f
+  data.tar.gz: 36b23e74c25af88ed0c7bf3ad0eb5e23ae48e1f8
 SHA512:
-  metadata.gz: 9c82db0bef304ec23e6b4a96eb57249cefde32d14071d26ccfe6860455ddc877fd350e9c4bd9f4a616224dd0a4aa967960c06881a61320ff384b97c7f41f7223
-  data.tar.gz: bb7dd6765110ab39bac125be563a538e93164c9df8bb5b5d900e55d1fd50b96c9538aceb76e15ec19cc27ea0be26cc302f3010ea84246d286683fcbd45d4309b
+  metadata.gz: 63a6c699683f46828943c4961b27c2fe4dfd28e63faa5c42df7ed9858122ad6c425a8e93cff28de899bf7877f30b9da587233b135aed3834c5c83902b1a184d6
+  data.tar.gz: 88b955fbb75b8db9b05758fe8983922b96845eaf953203652ddd78adf88d909f9dcd9e66f87926d4560c3270a0aed31c09b9a24852e5c0aa51ec8061a04a3007

data/README.md

@@ -30,12 +30,12 @@ Enjoy.
 
 ## Requirements
 
-* Sass ~> 3.3.0
-* Compass ~> 1.0.0.alpha.19
+* Sass ~> `3.3.0`
+* Compass ~> `1.0.0.alpha.19`
 
 ## Installation
 
-1. Install via Ruby `gem install flint-gs`, or Bower `bower install flint`
+1. Install via Ruby `gem install flint-gs`, or Bower `bower install flint --save-dev`
 2. Add `require "flint"` to your `config.rb`
 3. Import it in your stylesheets with `@import "flint"`
 
@@ -291,11 +291,11 @@ Outputs, *(with debug mode on)*
 
 As you can see, since `"desktop"` is the framework `"default"`, it uses the output for desktop as the base styles. You can set this to any breakpoint you like. **So if you like mobile-first, you can do that.**
 
-Whatever your `"default"` is set to, **flint** will not wrap those styles in media-queries, so that they may be used in non-supported browsers.
+Whatever your `"default"` is set to, flint will not wrap those styles in media-queries, so that they may be used in non-supported browsers.
 
 ### Recursive shorthand with identical context
 
-Use this if your nested context is *identical* across all breakpoints. The `context` is the span of the elements parent. ***Update:*** You can now use `$context: auto`, and we'll do all the calculations for you. Just be sure a parent element with a Flint `instance` actually exists or you'll get some weird output, or none at all. **Using `$context: auto` on fixed grids, the width with will be calculated by the parents width, instead of using the base breakpoints width.**
+Use this if your nested context is *identical* across all breakpoints. The `context` is the span of the elements parent. ***Update:*** You can now use `$context: auto`, and we'll do all the calculations for you. Just be sure a parent element with a Flint `instance` actually flint-exists or you'll get some weird output, or none at all. **Using `$context: auto` on fixed grids, the width with will be calculated by the parents width, instead of using the base breakpoints width.**
 
 ```scss
 // `auto` will work
@@ -362,7 +362,7 @@ Outputs,
 
 ### Recursive shorthand with variable context
 
-Use this if your context is *not* indentical across breakpoints. The `context` is the span of the elements parent. You can now use `$context: auto`, and we'll do all the calculations for you. Just be sure a parent selector with a Flint instance actually exists, or you'll throw a warning and get no output.
+Use this if your context is *not* indentical across breakpoints. The `context` is the span of the elements parent. You can now use `$context: auto`, and we'll do all the calculations for you. Just be sure a parent selector with a Flint instance actually flint-exists, or you'll throw a warning and get no output.
 
 When using `$context: auto` on fixed grids, Flint will automagically calculate based on the width of the closest parent element instance.
 
@@ -456,7 +456,7 @@ Outputs,
 
 ### Variable shorthand with context
 
-Use this if you're *nesting* columns using the variable shorthand. The `context` is the span of the elements parent. Before using `$context: auto`, be sure a parent element with a Flint `instance` actually exists or you'll get some weird output, or none at all.
+Use this if you're *nesting* columns using the variable shorthand. The `context` is the span of the elements parent. Before using `$context: auto`, be sure a parent element with a Flint `instance` actually flint-exists or you'll get some weird output, or none at all.
 
 ```scss
 .parent {
@@ -631,7 +631,7 @@ Here are different gutter modifiers that may be called in when defining spans us
 
 // no right margin
 .gutter-omega {
-	// other aliases : `no-right` | `last`
+	// other aliases : `no-right` | `flint-last`
 	@include _(desktop, 4, $gutter: omega);
 }
 
@@ -860,12 +860,12 @@ function parses the selector string (for example, `.block__element__element`) li
 // -------------------------------------------------------------------------------
 // @return [list] : parsed list of selectors according to syntax
 
-@function support-syntax-bem($selectors) {
+@function flint-support-syntax-bem($selectors) {
 	// Clean up selector, remove double underscores for spaces
 	//  add psudeo character to differentiate selectors
-	$selectors: replace-substring($selectors, "__", "/");
+	$selectors: flint-replace-substring($selectors, "__", "/");
 	// Parse string to list
-	$selectors: string-to-list($selectors, "/");
+	$selectors: flint-string-to-list($selectors, "/");
 	// Define top-most parent of selector
 	$parent: nth($selectors, 1);
 	// Create new list of parsed selectors
@@ -888,8 +888,8 @@ function parses the selector string (for example, `.block__element__element`) li
 ```
 
 This will be parsed into a list of selectors: `.block, .block__element, .block__element__element`. The list of selectors can then be used by
-instance system to look up a selectors parent, etc. To support your own preferred syntax: create a `support-syntax-<syntax-name>` function
-and hook into it through the config `"support-syntax": "<syntax-name>"` option -- the system will attempt to use the `call()` function in
+instance system to look up a selectors parent, etc. To support your own preferred syntax: create a `flint-support-syntax-<syntax-name>` function
+and hook into it through the config `"flint-support-syntax": "<syntax-name>"` option -- the system will attempt to use the `call()` function in
 order to parse the selector string.
 
 #### Officially supported syntaxes

data/lib/flint.rb

@@ -1,17 +1,77 @@
 require 'compass'
+
 extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
 Compass::Frameworks.register('flint', :path => extension_path)
 
-#  Version is a number. If a version contains alphas, it will be created as a prerelease version
 #  Date is in the form of YYYY-MM-DD
 module Flint
-  VERSION = "1.6.5"
-  DATE = "2014-07-08"
+  VERSION = "1.7.0"
+  DATE = "2014-07-11"
 end
 
 # Custom functions
 module Sass::Script::Functions
+
+    # Use ruby functions
+    # ----
+    def flint_use_ruby()
+        Sass::Script::Bool.new(true)
+    end
+
+    # Returns stringified selector
+    # ----
+    # @return [string]
 	def selector_string()
-		return Sass::Script::String.new(environment.selector.to_s)
+		Sass::Script::String.new(environment.selector.to_s)
 	end
+
+    # Turns string into a flat list
+    # ----
+    # @param string [string] : string
+    # @param separator [string] : item to find which separates substrings
+    # @param ignore [string] : removes remaining string beyond item
+    # ----
+    # @return [list] | error
+    def string_to_list(string, separator, ignore)
+        # Remove rest of string after ignore
+        ignore = string.value[/[^#{ignore}]+/]
+        # Get first set of strings, convert to array by separator
+        items = ignore.split(separator.value)
+        # Convert array to list
+        if items.count == 1
+            Sass::Script::String.new(items[0], :comma)
+        else
+            Sass::Script::List.new(items.map { |i| Sass::Script::String.new(i) }, :comma)
+        end
+    end
+
+    # Replace substring
+    # ----
+    # @param string [string] : string that contains substring
+    # @param find [string] : substring to replace
+    # @param replace [string] : new string to replace sub with
+    # ----
+    # @return [string]
+    def replace_substring(string, find, replace)
+        # Assert types
+        assert_type string, :String
+        assert_type find, :String
+        assert_type replace, :String
+        # Return new string
+        Sass::Script::String.new(string.value.gsub(find.value, replace.value))
+    end
+
+    # Converts string to number
+    # ----
+    # @param string [string] : string
+    # ----
+    # @return [number]
+    def string_to_number(string)
+        Sass::Script::Number.new(string.value.to_i)
+    end
+
+    declare :string_to_list, [:string, :separator, :ignore]
+    declare :replace_substring, [:string, :find, :replace]
+    declare :string_to_number, [:string]
+
 end

data/stylesheets/flint/config/_config.scss

@@ -77,7 +77,7 @@ $flint: (
             "support-syntax": false,
 
             // Options: true | false
-            "debug-mode": false,
-        ),
-    ),
+            "debug-mode": true,
+        )
+    )
 ) !default;

data/stylesheets/flint/functions/_functions.scss

@@ -18,7 +18,7 @@
 @import "lib/calc-breakpoint";
 // Instance functions
 @import "lib/instance";
-@import "lib/get-family-instance";
+@import "lib/has-family-instance";
 @import "lib/get-instance-value";
 // List functions
 @import "lib/list-to-string";

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

@@ -4,7 +4,7 @@
 // -------------------------------------------------------------------------------
 // @return [bool]
 
-@function is-true($value) {
+@function flint-is-true($value) {
 	@return if($value == null, false, $value and $value != null and $value != "" and $value != ());
 }
 
@@ -14,7 +14,7 @@
 // -------------------------------------------------------------------------------
 // @return [bool]
 
-@function is-map($n) {
+@function flint-is-map($n) {
 	@return type-of($n) == "map";
 }
 
@@ -24,7 +24,7 @@
 // -------------------------------------------------------------------------------
 // @return [bool]
 
-@function is-list($n) {
+@function flint-is-list($n) {
 	@return type-of($n) == "list";
 }
 
@@ -34,7 +34,7 @@
 // -------------------------------------------------------------------------------
 // @return [bool]
 
-@function is-number($n) {
+@function flint-is-number($n) {
 	@return type-of($n) == "number";
 }
 
@@ -44,7 +44,7 @@
 // -------------------------------------------------------------------------------
 // @return [bool]
 
-@function is-string($n) {
+@function flint-is-string($n) {
 	@return type-of($n) == "string";
 }
 
@@ -54,7 +54,7 @@
 // -------------------------------------------------------------------------------
 // @return [bool]
 
-@function is-not-string($n) {
+@function flint-is-not-string($n) {
 	@return type-of($n) != "string";
 }
 
@@ -62,11 +62,11 @@
 // -------------------------------------------------------------------------------
 // @return [list]
 
-@function get-all-keys() {
+@function flint-get-all-keys() {
 	$all-keys: ();
 
-	@for $i from 1 through (length(map-fetch($flint, "config")) - 1) {
-		$key: steal-key($i);
+	@for $i from 1 through (length(flint-map-fetch($flint, "config")) - 1) {
+		$key: flint-steal-key($i);
 		$all-keys: append($all-keys, $key, "comma");
 	}
 
@@ -77,7 +77,7 @@
 // -------------------------------------------------------------------------------
 // @return [list]
 
-@function get-all-breakpoints() {
+@function flint-get-all-breakpoints() {
 	$all-breakpoints: ();
 
 	@each $map, $keys in map-get($flint, "config") {
@@ -93,14 +93,14 @@
 
 // Checks if passed $key is the highest breakpoint
 // -------------------------------------------------------------------------------
-// @dependence `get-value()`
+// @dependence `flint-get-value()`
 // -------------------------------------------------------------------------------
 // @param $key [string] : alias of breakpoint
 // -------------------------------------------------------------------------------
 // @return [bool]
 
-@function is-highest-breakpoint($key) {
-	@if get-value($key, "breakpoint") == max(get-all-breakpoints()...) {
+@function flint-is-highest-breakpoint($key) {
+	@if flint-get-value($key, "breakpoint") == max(flint-get-all-breakpoints()...) {
 		@return true;
 	} @else {
 		@return false;
@@ -109,14 +109,14 @@
 
 // Checks if passed $key is the lowest breakpoint
 // -------------------------------------------------------------------------------
-// @dependence `get-value()`
+// @dependence `flint-get-value()`
 // -------------------------------------------------------------------------------
 // @param $key [string] : alias of breakpoint
 // -------------------------------------------------------------------------------
 // @return [bool]
 
-@function is-lowest-breakpoint($key) {
-	@if get-value($key, "breakpoint") == min(get-all-breakpoints()...) {
+@function flint-is-lowest-breakpoint($key) {
+	@if flint-get-value($key, "breakpoint") == min(flint-get-all-breakpoints()...) {
 		@return true;
 	} @else {
 		@return false;
@@ -125,14 +125,14 @@
 
 // Checks if $key is grid default
 // -------------------------------------------------------------------------------
-// @dependence `get-value()`
+// @dependence `flint-get-value()`
 // -------------------------------------------------------------------------------
 // @param $key [string] : alias of breakpoint
 // -------------------------------------------------------------------------------
 // @return [bool]
 
-@function is-default($key) {
-	@if $key == get-value("settings", "default") {
+@function flint-is-default($key) {
+	@if $key == flint-get-value("settings", "default") {
 		@return true;
 	} @else {
 		@return false;
@@ -143,7 +143,7 @@
 // -------------------------------------------------------------------------------
 // @return [list]
 
-@function get-all-columns() {
+@function flint-get-all-columns() {
 	$all-columns: ();
 
 	@each $map, $keys in map-get($flint, "config") {
@@ -161,8 +161,8 @@
 // -------------------------------------------------------------------------------
 // @return [literal]
 
-@function get-config-unit() {
-	@return unit(get-value("settings", "gutter"));
+@function flint-get-config-unit() {
+	@return unit(flint-get-value("settings", "gutter"));
 }
 
 // Convert pixel value to em
@@ -173,6 +173,15 @@
 // @return : em value of $target relative to $context
 // -------------------------------------------------------------------------------
 
-@function em($target, $context: $flint__base-font-size) {
+@function flint-to-em($target, $context: $flint__base-font-size) {
 	@return ($target / $context) * 1em;
 }
+
+// Use Ruby functions in place of Sass functions where possiblre
+//   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

@@ -6,28 +6,28 @@
 // -------------------------------------------------------------------------------
 // @return calculated value
 
-@function calc-breakpoint($n, $key, $i) {
+@function flint-calc-breakpoint($n, $key, $i) {
     @if $n == "alias" {
-        @if get-value("settings", "grid") == "fixed" {
-            @if is-lowest-breakpoint($key) {
+        @if flint-get-value("settings", "grid") == "fixed" {
+            @if flint-is-lowest-breakpoint($key) {
                 @return 0;
             } @else {
-                @return get-value($key, "breakpoint");
+                @return flint-get-value($key, "breakpoint");
             }
-        } @else if get-value("settings", "grid") == "fluid" {
-            @return get-value($key, "breakpoint");
+        } @else if flint-get-value("settings", "grid") == "fluid" {
+            @return flint-get-value($key, "breakpoint");
         }
     } @else if $n == "next" {
-        @if is-lowest-breakpoint($key) {
+        @if flint-is-lowest-breakpoint($key) {
             @return 0;
         } @else {
-            @return get-value(steal-key(($i + 1)), "breakpoint");
+            @return flint-get-value(flint-steal-key(($i + 1)), "breakpoint");
         }
     } @else if $n == "prev" {
-        @if is-highest-breakpoint($key) {
-            @return get-value($key, "breakpoint");
+        @if flint-is-highest-breakpoint($key) {
+            @return flint-get-value($key, "breakpoint");
         } @else {
-            @return get-value(steal-key(($i - 1)), "breakpoint");
+            @return flint-get-value(flint-steal-key(($i - 1)), "breakpoint");
         }
     }
 }

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

@@ -6,24 +6,52 @@
 // -------------------------------------------------------------------------------
 // @return calculated value | false
 
-@function calc-margin($key, $span, $context: null) {
-	@if get-value("settings", "grid") == "fluid" {
+@function flint-calc-margin($key, $span, $context: null) {
+	$result: false;
+
+	// Check to see if value has been cached
+	@if map-has-key($flint__cached-values, "#{$key, $span, $context}::margin") and $context != "auto" {
+		@return map-get($flint__cached-values, "#{$key, $span, $context}::margin");
+	}
+
+	@if flint-get-value("settings", "grid") == "fluid" {
+
 		@if $key == "container" or $span == "container" {
-			@return 0;
+
+			$result: 0;
+
 		} @else if $context == null {
-			@return fluid-width(get-value("settings", "gutter"), get-value($key, "breakpoint"));
-		} @else if $context <= get-value($key, "columns") {
-			@return fluid-width(get-value("settings", "gutter"), ((get-value($key, "breakpoint") / get-value($key, "columns") * $context)));
+
+			$result: flint-fluid-width(flint-get-value("settings", "gutter"), flint-get-value($key, "breakpoint"));
+
+		} @else if $context <= flint-get-value($key, "columns") {
+
+			$result: flint-fluid-width(flint-get-value("settings", "gutter"), ((flint-get-value($key, "breakpoint") / flint-get-value($key, "columns") * $context)));
+
 		} @else {
-			@return fluid-width(get-value("settings", "gutter") / get-value($key, "columns") * $context, ((get-value($key, "breakpoint") / get-value($key, "columns") * $context)));
+
+			$result: flint-fluid-width(flint-get-value("settings", "gutter") / flint-get-value($key, "columns") * $context, ((flint-get-value($key, "breakpoint") / flint-get-value($key, "columns") * $context)));
+
 		}
-	} @if get-value("settings", "grid") == "fixed" {
+
+	} @if flint-get-value("settings", "grid") == "fixed" {
+
 		@if $key == "container" or $span == "container" {
-			@return 0;
+
+			$result: 0;
+
 		} @else {
-			@return get-value("settings", "gutter");
+
+			$result: flint-get-value("settings", "gutter");
 		}
-	} @else {
-		@return false;
+
 	}
+
+	// Save result to cache
+	@if $context != "auto" {
+		$flint__cached-values: map-merge($flint__cached-values, ("#{$key, $span, $context}::margin": $result));
+	}
+
+	// Return result
+	@return $result;
 }