flint-gs 1.0.9 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d31b1360c451f2dd049222e654738aa656a87629
-  data.tar.gz: 3c43ec3f8ef0f0ede08ce86aaf9f96e5e8f6411b
+  metadata.gz: 44d7c2f0b3754bf0d4951d67e5175a3ee9b7b796
+  data.tar.gz: 509f0b61cdb996e86af2327f25a49c98e856e370
 SHA512:
-  metadata.gz: aa871d5cf12e8d893be114e17ac4309d0dbadfd612fdd7372f71f72db032fa1949426a7c0a89908f30936921ab3be9b2d60b276109ec9c14f90504353456cad2
-  data.tar.gz: 18411a48f4e810b7f5c88a88c4f92e0566f44c41c551858b5c16fe364379e84b16e547be5274d1e24c8daac2de3b1bc2f51096f82106d7dec90034c9c774a727
+  metadata.gz: 3584b4cfd3da94c7b4255bcbdf3d7187dfa5bdde57f595e92fc2f3f03c0a48a3688e863295920783b5726b1a92696cfbdada1e974cbe4da49917f206279558b2
+  data.tar.gz: 483a2fa33be09e96d05431dabd75cbccf46942c0dfffe24af6010821b2f8f4a11107bb44cf454b48ec1c8f1584bf8839d80fd8a6aa208f86f4e01c249d52bf6c

data/README.md

@@ -1,20 +1,25 @@
 #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.
+**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.
 
-Take it for a spin on [SassMeister.com](http://sassmeister.com/)!
+Take it for a spin on [SassMeister.com](http://sassmeister.com/gist/11489231)!
 
 Enjoy.
 
-##Documentation
+##Requirements
+
+* Sass ~> 3.3.0
+* Compass ~> 0.12.1
 
-###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/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.
+
+##Documentation
 
 ###Config
 
@@ -26,7 +31,9 @@ To begin, you can either use the default config (below) which comes baked in, or
 
 Settings may be entered in `px` or `em`, and Flint will do the rest.
 
-*Keep in mind, whatever unit you choose to use here needs to be used consistently throughout Flint. No mixing of `px` and `em` units. Also, Flint does require that you follow a `DESC` order for your breakpoint configuration, this way it can traverse the config map correctly to output valid media queries.*
+*Keep in mind, whatever unit you choose to use here needs to be used consistently throughout Flint.* 
+
+No mixing of `px` and `em` units. Also, Flint does require that you follow a `DESC` order for your breakpoint configuration, this way it can traverse the config map correctly to output valid media queries.
 
 ```scss
 // Configuration map
@@ -39,9 +46,9 @@ Settings may be entered in `px` or `em`, and Flint will do the rest.
 // -------------------------------------------------------------------------------
 // @param default [Alias] : alias of breakpoint that is your grid default
 // @param grid [Style] : style of grid
-// @param gutter [Value | false] : contextual size of gutter
-// @param float-style [Value | false] : float direction
-// @param max-width [Value | false] : max-width for `containers`
+// @param gutter [Value] : contextual size of gutter
+// @param float-style [Direction] : float direction
+// @param max-width [Boolean | Value] : max-width for `containers`
 // @param center-container [Boolean] : if you want a centered container
 // @param border-box-sizing [Boolean] : if you want box-sizing: border-box applied
 // @param debug-mode [Boolean] : ouputs debug properties
@@ -50,10 +57,10 @@ Settings may be entered in `px` or `em`, and Flint will do the rest.
 $flint: (
     // grid configuration
     "config": (
-        // define breakpoints [any amount of breakpoints]
+        // define breakpoints [any (!!) amount of breakpoints]
         "desktop": ( // [any alias you like, minus reserved flint words (i.e. "settings", etc.)]
             "columns": 16, // [0-infinity]
-            "breakpoint": 1280px, // [0-infinity(unit)]
+            "breakpoint": 1280px, // [value(unit)]
         ),
         "laptop": (
             "columns": 12,
@@ -71,12 +78,12 @@ $flint: (
         "settings": (
             "default": "desktop", // [any breakpoint's alias]
             "grid": "fluid", // [fluid | fixed]
-            "gutter": 10px, // [0-infinity(unit) | false]
+            "gutter": 10px, // [value(unit)]
             "float-style": "left", // [left | right]
-            "max-width": false, // [true : uses highest breakpoint | false | value(unit)]
+            "max-width": false, // [true (uses highest breakpoint) | false | value(unit)]
             "center-container": true, // [true | false]
             "border-box-sizing": true, // [true | false]
-            "debug-mode": true, // [true | false ]
+            "debug-mode": true, // [true | false]
         ),
     ),
 );
@@ -259,8 +266,9 @@ Use this if your nested context is *identical* across all breakpoints. The `cont
 	@include _(3, auto); // Equivalent to : _(3, 6)
 }
 
-// When using `auto`, Flint 'falls back' from the topmost selector until one is found that has an
-// instance, and it will calculate it's context based on that instances span for the current breakpoint.
+// When using `auto`, Flint 'falls back' from the topmost selector until one is 
+// found that has an instance, and it will calculate it's context based on that 
+// instances span for the current breakpoint.
 ```
 
 Outputs,
@@ -537,22 +545,26 @@ Here are different gutter modifiers that may be called in when defining spans us
 ```scss
 // default margins
 .gutter-default {
-	@include _(desktop, 4, $gutter: default); // other aliases : `normal` | `regular`
+	// other aliases : `normal` | `regular`
+	@include _(desktop, 4, $gutter: default);
 }
 
 // no left margin
 .gutter-alpha {
-	@include _(desktop, 4, $gutter: alpha); // other alias : `no-left`
+	// other aliases : `no-left` | `first`
+	@include _(desktop, 4, $gutter: alpha);
 }
 
 // no right margin
 .gutter-omega {
-	@include _(desktop, 4, $gutter: omega); // other alias : `no-right`
+	// other aliases : `no-right` | `last`
+	@include _(desktop, 4, $gutter: omega);
 }
 
 // no margins
 .gutter-row {
-	@include _(desktop, 4, $gutter: row); // other alias : `none`
+	// other alias : `none`
+	@include _(desktop, 4, $gutter: row);
 }
 
 // places gutters on inside by reducing column width by [gutter*2]

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.0.9"
-  DATE = "2014-05-02"
+  VERSION = "1.1.0"
+  DATE = "2014-05-09"
 end
 
 # Custom functions

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

@@ -3,9 +3,9 @@
 // @dependence `get-value()`
 // @dependence `fluid-width()`
 // -------------------------------------------------------------------------------
-// @param $key [Breakpoint | "container"] : how to calculate value 
-// @param $span [Value] : span
-// @param $context [Value] : if context is needed
+// @param $key [Breakpoint | "container"] : key for lookup
+// @param $span [Value] : span of element
+// @param $context [Value] : context of element
 // -------------------------------------------------------------------------------
 // @return [Value] | false
 
@@ -15,14 +15,14 @@
 			@return 0;
 		} @else if $context == NULL {
 			@return fluid-width(get-value(settings, gutter), get-value($key, breakpoint));
-		} @else {
+		} @else if $context <= get-value($key, columns) {
 			@return fluid-width(get-value(settings, gutter), ((get-value($key, breakpoint) / 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)));
 		}
 	} @if get-value(settings, grid) == "fixed" {
 		@if $key == "container" or $span == "container" {
 			@return 0;
-		} @if $context == NULL {
-			@return get-value(settings, gutter);
 		} @else {
 			@return get-value(settings, gutter);
 		}

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

@@ -21,8 +21,6 @@
 	} @if get-value(settings, grid) == "fixed" {
 		@if $key == "container" or $span == "container" {
 			@return get-value($key, breakpoint);
-		} @else if $context == NULL {
-			@return get-value($key, breakpoint) / get-value($key, columns) * $span;
 		} @else {
 			@return get-value($key, breakpoint) / get-value($key, columns) * $span;
 		}

data/stylesheets/flint/functions/lib/_instance.scss

@@ -19,11 +19,12 @@
     $flint__instance: (
 		"#{selector_string()}::#{$key}": (
 			"instance-count": #{$flint__instance-count},
+			"parent": #{if(get-family-instance($key) != false, get-family-instance($key), none)},
 			"key": #{$key},
 			"breakpoint": #{get-value($key, breakpoint)},
 			"columns": #{get-value($key, columns)},
 			"span": #{$span},
-			"context": #{$context},
+			"context": #{if($context == "auto", get-instance-value($key, span), $context)},
 			"gutter": #{$gutter},
 			"shift": #{$shift},
 			"outputted": (

data/stylesheets/flint/mixins/lib/_print-instance.scss

@@ -27,7 +27,7 @@
 		// Check if value is output map
 		@if is-map($value) {
 			@each $mod_property, $mod_value in $value {
-				-flint--output-#{$mod_property}: #{$mod_value};
+				-flint-output-#{$mod_property}: #{$mod_value};
 			}
 		// Else, print values as flagged comments
 		} @else {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: flint-gs
 version: !ruby/object:Gem::Version
-  version: 1.0.9
+  version: 1.1.0
 platform: ruby
 authors:
 - Ezekiel Gabrielse
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-05-02 00:00:00.000000000 Z
+date: 2014-05-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass