flint-gs 1.4.0 → 1.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4fe5b9e2c39e010d685a44b3e5aa5d3b55b04322
-  data.tar.gz: 4bf01de85d73743b890317fd08246dc57149cd4e
+  metadata.gz: 86f446a4c55cb2d708fe52353d16116ca09b852a
+  data.tar.gz: 356f208c87bd7861cba705549c2657a304cd4955
 SHA512:
-  metadata.gz: 38fc91877f9c8a18fbaf4f487fee66412d26df390f6566e5b61ac82d98aa38cf1c4f611e11965b60bb5742d892097124c29865a09785d4ef42094d5501f6f003
-  data.tar.gz: f06b0d3af65caac112d92ae5210f4016f89157b5195939baac98126a47ab7d9198bb66565acff026f0a74d9a8f0c7afb0cca49fa9e995c960ce30cff479b9184
+  metadata.gz: 3bdccfc0a8c3515397f08419773009f35e0b769b9f2c1a80eec9789e05001805a9c70ddd3d548b9892ad6e069c87c677df32561bae48a946c75b5c7b70981d22
+  data.tar.gz: 4dbfa15f7d4d1f5ebeb1f0232f16bf879362460a1955052009d45342214fa16a3537388e6279a81ca12123deae0400d86d1aef0f339ac4a6b604c5ebf12d8458

data/README.md

@@ -1,4 +1,4 @@
-#Flint [![Gem Version](https://badge.fury.io/rb/flint-gs.svg)](http://badge.fury.io/rb/flint-gs)
+# Flint [![Gem Version](https://badge.fury.io/rb/flint-gs.svg)](http://badge.fury.io/rb/flint-gs)
 
 **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 and 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.
 
@@ -6,28 +6,28 @@ Take it for a spin on [SassMeister.com](http://sassmeister.com/gist/11489231)!
 
 Enjoy.
 
-##Requirements
+## Requirements
 
 * Sass ~> 3.3.0
 * Compass ~> 1.0.0.alpha.19
 
-##Installation
+## Installation
 
 1. `gem install flint-gs`
 2. Add `require "flint"` to your `config.rb`
 3. Import it in your stylesheets with `@import "flint";`
 
-If you don't want to install the gem (?!), download/clone the current build files and use the starter `config.rb` to require any custom functions Flint uses. Currently this is required, as we're making use of custom SassScript functions until the 'script `&`' [returns to Sass](https://gist.github.com/nex3/8050187). Adjust the paths according to your project.
+If you don't want to install the gem, download or clone the current build files and use the starter `config.rb` to require any custom Ruby functions Flint uses. Currently this is required, as we're making use of custom SassScript functions until the script '&' [returns to Sass](https://gist.github.com/nex3/8050187). Adjust the paths according to your project.
 
-##Documentation
+## Documentation
 
-###Config
+### Config
 
 Flint's `config` map is unique in the ability that you may define an unlimited number of breakpoints for your project. Whether that be 2 breakpoints, or even 12 breakpoints. Flint gives you full control over the column count on each breakpoint, and unlike most frameworks, you may name these anything that you like. Flint is smart and will figure out which one you're talking about.
 
 Speaking of not being like most frameworks, Flint does not require you to set a ridiculous amount of variables just to use a single breakpoint. It actually doesn't require you to set *any* variables. It also doesn't require you to install a seperate extension so that you can define your breakpoints; *all of these features are baked into Flint.* Your columns are fully related to your breakpoints, so that there is never any confusion and everything is kept nice and simple.
 
-####Usage
+#### Usage
 
 To begin, you can either use the default `config` (below) which comes baked in, or you can define your own using the `$flint` variable, using the default config as a template. Settings may be entered in `px` or `em`, and Flint will do the rest.
 
@@ -114,7 +114,7 @@ $flint: (
 );
 ```
 
-###Foundation
+### Foundation
 
 If you selected `"border-box-sizing": true`, then it is *advised* to create a global foundation instance like so,
 
@@ -124,7 +124,7 @@ If you selected `"border-box-sizing": true`, then it is *advised* to create a gl
 
 That way your output won't be riddled with `box-sizing` declarations everytime you define a span. This will automatically output the rules onto the global selector `*`. In the future this might be automatic, but for now I'll keep it manual.
 
-###Container
+### Container
 
 Containers act as a row for each individual breakpoint, and if set in your config, uses a max-width. They do not float, so if you have `"center-container"` set to `true` then it will also center your element using `auto` left and right margins.
 
@@ -145,7 +145,7 @@ Outputs,
 }
 ```
 
-###Clear
+### Clear
 
 Given that Flint is float based, you might find yourself needing to use a clearfix. Flint comes packaged with a micro-clearfix function.
 
@@ -265,7 +265,7 @@ As you can see, since `"desktop"` is the framework `"default"`, it uses the outp
 
 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
+### 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.**
 
@@ -332,7 +332,7 @@ Outputs,
 }
 ```
 
-###Recursive shorthand with variable context
+### Recursive shorthand with variable context
 
 Use this if your context is *not* indentical across 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.
 
@@ -380,7 +380,7 @@ recursive {
 }
 ```
 
-###Variable shorthand
+### Variable shorthand
 
 Use this if your content needs different spans across each breakpoints. The *order of operations* for this matches the order entered in your `config`.
 
@@ -424,7 +424,7 @@ Outputs,
 }
 ```
 
-###Variable shorthand with context
+### Variable shorthand with context
 
 Use this if you're *nesting* columns using the variable shorthand. 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.
 
@@ -470,7 +470,7 @@ Outputs,
 }
 ```
 
-###Wrapping in media queries
+### Wrapping in media queries
 
 Use these if you need to apply breakpoint specific styling.
 
@@ -490,6 +490,11 @@ Use these if you need to apply breakpoint specific styling.
 		// all sizes 10em above tablet's breakpoint
 	}
 }
+.wrap {
+    @include _(greater than 60em) {
+        // all sizes above 60em
+    }
+}
 .wrap {
 	@include _(less than tablet) {
 		// all sizes under tablet
@@ -500,6 +505,11 @@ Use these if you need to apply breakpoint specific styling.
 		// all sizes 1em under laptop
 	}
 }
+.wrap {
+    @include _(less than 40em) {
+        // all sizes under 40em
+    }
+}
 .wrap {
 	@include _(for desktop tablet) {
 		// only for desktop and tablet
@@ -515,11 +525,16 @@ Use these if you need to apply breakpoint specific styling.
 		// all sizes from desktop to infinity
 	}
 }
+.wrap {
+    @include _(from 20em to 40em) {
+        // all sizes from 20em to 40em
+    }
+}
 ```
 
-###Call by alias
+### Call by alias
 
-Use if you want to define each span without shorthands. This is useful if you need variable `gutter` modifiers.
+Use if you want to define each span without shorthands.
 
 ```scss
 .name {
@@ -567,9 +582,9 @@ Outputs,
 }
 ```
 
-###Gutter modifiers
+### Gutter modifiers
 
-Here are different gutter modifiers that may be called in when defining spans using the `$gutter` variable. **You should note**, that when using recursive shorthands the gutter modifiers are also recursive across all breakpoints.
+Here are different gutter modifiers that may be called in when defining spans using the `$gutter` variable. The `$gutter` variable allows you to pass in either a recursive argument, or a variable argument, similar to `$span`.
 
 ```scss
 // default margins
@@ -597,7 +612,6 @@ Here are different gutter modifiers that may be called in when defining spans us
 }
 
 // places gutters on inside by reducing column width by [gutter*2]
-// useful for nesting children inside of parents that have normal gutters on fixed grid layouts
 .gutter-inside {
 	@include _(desktop, 4, $gutter: inside);
 }
@@ -607,7 +621,7 @@ Here are different gutter modifiers that may be called in when defining spans us
 	@include _(16 12 8 4, $gutter: row alpha omega normal);
 }
 
-// recursive
+// recursive gutter
 .recursive-gutter {
 	@include _(16 12 8 4, $gutter: row);
 }
@@ -700,7 +714,7 @@ Outputs,
 }
 ```
 
-###Shift
+### Shift
 
 Much like the gutter modifiers, you may also call in a shift parameter using the `$shift` variable. This will cause the element to shift the desired amount of columns using positive/negative left margins.
 
@@ -803,7 +817,7 @@ Outputs,
 }
 ```
 
-##BEM Users
+## BEM Users
 
 Due to the way **BEM** is written, the instance functions cannot fallback to previous selectors in the family tree to find a parent instance, so using `$context: auto` will not work for some BEM users, depending on how you write it.
 

data/lib/flint.rb

@@ -5,8 +5,8 @@ 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.4.0"
-  DATE = "2014-06-26"
+  VERSION = "1.5.0"
+  DATE = "2014-06-30"
 end
 
 # Custom functions

data/stylesheets/_flint.scss

@@ -1,13 +1,6 @@
-// -------------------------------------------------------------------------------
-// Flint - A powerful Sass grid-system designed for complex responsive layouts.
-// -------------------------------------------------------------------------------
-// @By : Ezekiel Gabrielse
-// @Repository : https://github.com/ezekg/flint/
-// @Sass >=3.3.3
-// @Compass >=1.0.0.alpha.19
-// -------------------------------------------------------------------------------
-
+// Flint
+// ----
 @import "flint/config/config";
 @import "flint/functions/functions";
 @import "flint/globals/globals";
-@import "flint/mixins/mixins";
+@import "flint/mixins/mixins";

data/stylesheets/flint/functions/_functions.scss

@@ -1,7 +1,9 @@
 // Helpers
+// ----
 @import "helpers/helpers";
 
 // Functions
+// ----
 @import "lib/map-fetch";
 @import "lib/get-value";
 @import "lib/steal-key";
@@ -23,4 +25,5 @@
 @import "lib/remove";
 @import "lib/get-family-instance";
 @import "lib/get-instance-value";
-@import "lib/string-to-number";
+@import "lib/string-to-number";
+@import "lib/types-in-list";

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

@@ -159,7 +159,7 @@
 
 // Returns the unit used in config
 // -------------------------------------------------------------------------------
-// @return [bool]
+// @return [literal]
 
 @function get-config-unit() {
 	@return unit(get-value("settings", "gutter"));
@@ -167,8 +167,8 @@
 
 // Convert pixel value to em
 // -------------------------------------------------------------------------------
-// @param $target [num] : pixel value
-// @param $context [num] : context to divide by
+// @param $target [number] : pixel value
+// @param $context [number] : context to divide by
 // -------------------------------------------------------------------------------
 // @return : em value of $target relative to $context
 // -------------------------------------------------------------------------------

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

@@ -11,20 +11,34 @@
 
 @function calc-width($key, $span, $context: null) {
 	@if get-value("settings", "grid") == "fluid" {
+
 		@if $key == "container" or $span == "container" {
+
 			@return fluid-width(get-value($key, "breakpoint"), get-value($key, "breakpoint"));
+
 		} @else if $context == null {
+
 			@return fluid-width((get-value($key, "breakpoint") / get-value($key, "columns") * $span), get-value($key, "breakpoint"));
+
 		} @else {
+
 			@return fluid-width((get-value($key, "breakpoint") / get-value($key, "columns") * $span), ((get-value($key, "breakpoint") / get-value($key, "columns") * $context)));
+
 		}
+
 	} @if get-value("settings", "grid") == "fixed" {
+
 		@if $key == "container" or $span == "container" {
+
 			@return get-value($key, "breakpoint");
+
 		} @else {
+
 			@return get-value($key, "breakpoint") / get-value($key, "columns") * $span;
+
 		}
+
 	} @else {
 		@return false;
 	}
-}
+}

data/stylesheets/flint/functions/lib/_map-fetch.scss

@@ -1,7 +1,7 @@
 // Fetch value from key in map
 // -------------------------------------------------------------------------------
 // @param $map [map] : map to fetch from
-// @param $keys [list] : list of keys
+// @param $keys [string | list] : string of key, or list of strings
 // -------------------------------------------------------------------------------
 // @return fetched literal | false
 

data/stylesheets/flint/functions/lib/_types-in-list.scss

@@ -0,0 +1,120 @@
+// Checks type of each item in list
+// -------------------------------------------------------------------------------
+// @param $list [list] : list of items
+// @param $assert-types [string | list] : single or list of types to assert
+// @param $assert-length [number] : assert length of list
+// -------------------------------------------------------------------------------
+// @return [bool]
+
+@function types-in-list($list, $assert-types: null, $assert-length: null) {
+    @if is-list($list) {
+
+        // Assert types in list?
+        // ----
+        @if $assert-types {
+
+            // Assert length of list?
+            // ----
+            @if $assert-length {
+                // Get length of list
+                $length: length($list);
+
+                // Make sure lengths match
+                @if $length == $assert-length {
+                    // Keep empty list of types
+                    $types: ();
+
+                    // List of asserted types?
+                    // ----
+                    @if is-list($assert-types) {
+
+                        // Make sure length of types match list
+                        // ----
+                        @if length($assert-types) == $length {
+
+                            // Loop over each item in list
+                            @for $i from 1 through $assert-length {
+                                $item: nth($list, $i);
+                                $type: nth($assert-types, $i);
+
+                                // Check if type of item matches asserted type
+                                @if type-of($item) != $type {
+                                    @return false;
+                                }
+
+                                $types: append($types, $type);
+                            }
+
+                        // Lengths did not match
+                        // ----
+                        } @else {
+                            @return false;
+                        }
+
+                    // Assert a single type across list
+                    // ----
+                    } @else {
+                        // Assert single type
+                        $type: nth($assert-types, 1);
+
+                        // Loop over each item in list
+                        @for $i from 1 through $assert-length {
+                            $item: nth($list, $i);
+
+                            // Check if type of item matches asserted type
+                            @if type-of($item) != $type {
+                                @return false;
+                            }
+                        }
+
+                        $types: append($types, $type);
+                    }
+
+                    // Return list of types
+                    @return true; // $types;
+
+                // Lengths did not match, return false
+                } @else {
+                    @return false;
+                }
+
+            // Just assert types in list, any length
+            // ----
+            } @else {
+                // Get asserted type
+                $type: $assert-types;
+
+                // Check each items type
+                @each $item in $list {
+                    // Check if type of item matches asserted type
+                    @if type-of($item) != $type {
+                        @return false;
+                    }
+                }
+
+                // Passed check, return type
+                @return true; // $type;
+            }
+
+        // Just assert type of first item in list
+        // ----
+        } @else {
+            // Get type of first item in list
+            $type: type-of(nth($list, 1));
+
+            // Check each items type
+            @each $item in $list {
+                // Check if type of item matches asserted type
+                @if type-of($item) != $type {
+                    @return false;
+                }
+            }
+
+            // Passed check, return type
+            @return true; // $type;
+        }
+    // Was not a list, return false
+    } @else {
+        @return false;
+    }
+}

data/stylesheets/flint/globals/_globals.scss

@@ -1,14 +1,18 @@
 // Set global variable to check if foundation has been applied globally
+// ----
 $flint__foundation: "nonexistant" !global;
 
 // Gather all keys, breakpoints and column counts
+// ----
 $flint__all__keys: get-all-keys() !global;
 $flint__all__breakpoints: get-all-breakpoints() !global;
 $flint__all__columns: get-all-columns() !global;
 
 // Keep track of all instances of mixin
+// ----
 $flint__instance-count: 0 !global;
 $flint__instances: () !global;
 
 // Font size for em calculation
+// ----
 $flint__base-font-size: 16px !global;