flint-gs 1.0.3 → 1.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 301e82276044ec3edab3bfb8e4f8bbfce2d51ecf
-  data.tar.gz: 4b4d85d4177a1a226030b7ff06c93e881c39fbef
+  metadata.gz: 83509734957f3f25f64cd87f5177e7f8072d9a4f
+  data.tar.gz: 1217f8221350a84a54dd376911935d848678a6ea
 SHA512:
-  metadata.gz: d0930c264816cf32f4b27380ed421613b18dc4b35f9cff3d417040f057b812a38bfb2bed5b4fcd28562ac6a4e7acdcfb3015c36cea01532a8d59806418c83fa8
-  data.tar.gz: 54060b0c7d3943a359438e42f79819d672f398efa2711961079431f2087590238a3a0eb1e4cfe9f9c60d82bb3a70012542e4ef4e7c49c803135be783134d93c0
+  metadata.gz: 8450cf79f2adf5028b176b294bbfdf99b8aac8b8e85f14c6dc5e47fa1e1bf2522582f282c0413c1c6870d3449b477a1f4586a94ddbe8a19cc41c5dc810ebc543
+  data.tar.gz: 554911cc02099f6623f767dbb02769be3814eccefb9d203b3075ce4595ca9d30be08784b26cf3c643423792ab2950ef6cbe02fdc6fe7f39d53a9fe40af089faf

data/README.md

@@ -25,12 +25,28 @@ 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.*
 
 ```scss
-$flint: (
+// Configuration map
+//--------------------------------------------------------------------------------
+// @param [Breakpoints] : Here you can set up your various breakpoints for your
+// project. Any number of breakpoints is acceptable. You must include a column
+// count and breakpoint value for each listed breakpoint. Order does not have
+// to follow `ASC` or `DESC`. Unit chosen here must be used consistently
+// throughout the rest of the config map.
+//--------------------------------------------------------------------------------
+// @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 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
+// -------------------------------------------------------------------------------
 
+$flint: (
     // grid configuration
     "config": (
-
-        // define 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)]
@@ -47,17 +63,16 @@ $flint: (
             "columns": 4,
             "breakpoint": 320px,
         ),
-
-        // additional grid settings
+        // additional grid settings [required]
         "settings": (
-            "default": "mobile", // [any breakpoint's alias : becomes main output]
+            "default": "desktop", // [any breakpoint's alias]
             "grid": "fluid", // [fluid | fixed]
             "gutter": 10px, // [0-infinity(unit) | false]
             "float-style": "left", // [left | right]
             "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 ]
         ),
     ),
 );
@@ -212,7 +227,7 @@ Whatever your `default` is set to, **flint** will not wrap those styles in media
 
 ###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.
+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. **Context is not needed on `fixed` grids.**
 
 ```scss
 // `auto` will work
@@ -461,21 +476,21 @@ Use these if you need to apply breakpoint specific styling.
 }
 ```
 
-###Call by name
+###Call by alias
 
 Use if you want to define each span without shorthands. This is useful if you need variable `gutter` modifiers.
 
 ```scss
 .name {
-	@include _(desktop, 8, $gutter: omega);
-	@include _(laptop, 4, $gutter: omega);
-	@include _(tablet, 8, $gutter: row);
-	@include _(mobile, 4, $gutter: row);
+	@include _(desktop, 8);
+	@include _(laptop, 4);
+	@include _(tablet, 8);
+	@include _(mobile, 4);
 }
 
 // with context,
 // .name {
-//	  @include _(desktop, 4, 16);
+//	  @include _(desktop, 4, 16, $gutter: alpha);
 // }
 ```
 
@@ -517,25 +532,90 @@ Here are different gutter modifiers that may be called in when defining spans us
 
 ```scss
 // no left margin
-.name {
+.gutter {
 	@include _(desktop, 4, $gutter: alpha);
 }
 
 // no right margin
-.name {
+.gutter {
 	@include _(desktop, 4, $gutter: omega);
 }
 
 // no margins
-.name {
+.gutter {
 	@include _(desktop, 4, $gutter: row);
 }
 
+// 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 {
+	@include _(desktop, 4, $gutter: inside);
+}
+
 // recursive
-.recursive {
+.recursive-gutter {
 	@include _(16 12 8 4, $gutter: row);
 }
 ```
+Outputs,
+```scss
+.gutter {
+	display: block;
+	float: left;
+	width: 24.21875%;
+	margin-right: 0.78125%;
+	margin-left: 0;
+}
+.gutter {
+	display: block;
+	float: left;
+	width: 24.21875%;
+	margin-right: 0;
+	margin-left: 0.78125%;
+}
+.gutter {
+	display: block;
+	float: left;
+	width: 25%;
+	margin-right: 0;
+	margin-left: 0;
+}
+.gutter {
+	display: block;
+	float: left;
+	width: 21.875%;
+	margin-right: 0.78125%;
+	margin-left: 0.78125%;
+}
+.recursive-gutter {
+	display: block;
+	float: left;
+	width: 100%;
+	margin-right: 0;
+	margin-left: 0;
+}
+@media only screen and (min-width: 641px) and (max-width: 960px) {
+	.recursive-gutter {
+		width: 100%;
+		margin-right: 0;
+		margin-left: 0;
+	}
+}
+@media only screen and (min-width: 321px) and (max-width: 640px) {
+	.recursive-gutter {
+		width: 100%;
+		margin-right: 0;
+		margin-left: 0;
+	}
+}
+@media only screen and (min-width: 0) and (max-width: 320px) {
+	.recursive-gutter {
+		width: 100%;
+		margin-right: 0;
+		margin-left: 0;
+	}
+}
+```
 
 ###Shift
 
@@ -559,13 +639,88 @@ for extra fine tuned control over your layouts.
 
 ```scss
 .break-the-grid {
-	@include _(16 12.1 8.9 4, $shift: 1.2 0 2 0, $gutter: row);
+	@include _(16/3 12.1 8.9 4, $shift: 1.2 0 2 0, $gutter: row);
+}
+```
+Outputs,
+```scss
+.break-the-grid {
+	display: block;
+	float: left;
+	width: 33.33333%;
+	margin-right: 0;
+	margin-left: 7.5%;
+	-flint-instance-count: 9;
+	-flint-key: desktop;
+	-flint-breakpoint: 1280px;
+	-flint-columns: 16;
+	-flint-span: 5.33333;
+	-flint-context: NULL;
+	-flint-gutter: row;
+	-flint-shift: 1.2;
+	-flint--output-width: 33.33333%;
+	-flint--output-margin-right: 0;
+	-flint--output-margin-left: 7.5%;
+}
+@media only screen and (min-width: 641px) and (max-width: 960px) {
+	.break-the-grid {
+		width: 100.83333%;
+		margin-right: 0;
+		margin-left: 0%;
+		-flint-instance-count: 10;
+		-flint-key: laptop;
+		-flint-breakpoint: 960px;
+		-flint-columns: 12;
+		-flint-span: 12.1;
+		-flint-context: NULL;
+		-flint-gutter: row;
+		-flint-shift: 0;
+		-flint--output-width: 100.83333%;
+		-flint--output-margin-right: 0;
+		-flint--output-margin-left: 0%;
+	}
+}
+@media only screen and (min-width: 321px) and (max-width: 640px) {
+	.break-the-grid {
+		width: 111.25%;
+		margin-right: 0;
+		margin-left: 25%;
+		-flint-instance-count: 11;
+		-flint-key: tablet;
+		-flint-breakpoint: 640px;
+		-flint-columns: 8;
+		-flint-span: 8.9;
+		-flint-context: NULL;
+		-flint-gutter: row;
+		-flint-shift: 2;
+		-flint--output-width: 111.25%;
+		-flint--output-margin-right: 0;
+		-flint--output-margin-left: 25%;
+	}
+}
+@media only screen and (min-width: 0) and (max-width: 320px) {
+	.break-the-grid {
+		width: 100%;
+		margin-right: 0;
+		margin-left: 0%;
+		-flint-instance-count: 12;
+		-flint-key: mobile;
+		-flint-breakpoint: 320px;
+		-flint-columns: 4;
+		-flint-span: 4;
+		-flint-context: NULL;
+		-flint-gutter: row;
+		-flint-shift: 0;
+		-flint--output-width: 100%;
+		-flint--output-margin-right: 0;
+		-flint--output-margin-left: 0%;
+	}
 }
 ```
 
 ##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.
+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.
 
 ```scss
 .block {
@@ -587,9 +742,20 @@ Will result in a` @warning`, and will not compile correctly as `.block` and `.bl
 		@include _(2, auto);
 	}
 }
+
+// Or...
+
+.block {
+	@include _(4);
+
+	// Double your ampersands
+	& &__element {
+		@include _(2, auto);
+	}
+}
 ```
 
-This will allow the `instance` functions to properly fallback from `.block .block__element` to `.block` to check for context. If writing BEM like that just isn't your thing, you can manually enter your context:
+This will allow the instance functions to properly fallback from `.block .block__element` to `.block` to check for context. If writing BEM like that just isn't your thing, you can manually enter your context:
 
 ```scss
 .block {
@@ -605,16 +771,21 @@ This will allow the `instance` functions to properly fallback from `.block .bloc
 
 Going to start keeping a log of changes starting **today (4/11/14).**
 
-####4/21/14
+####4/24/14
+* Added `$gutter: inside` modifier
+* Cleaned up variable/function names
+* Added detailed comments to all mixins/functions
+
+####4/18/14
 * Built `.gemspec` so that Flint can be installed via `gem install flint-gs`
 * Added `bower.json` so that Flint can be installed via Bower
 * Organized file structure by splitting functions/mixins into separate files for easier modifications/version control moving forward.
 
 ####4/12/14
-You can now take advantage of both `$shift` and `$gutter` modifiers together.
+* You can now take advantage of both `$shift` and `$gutter` modifiers together.
 
 ####4/11/14
-You can now use `$context: auto`, and we'll do all the calculations for you. Just be sure a container element actually exists or you'll get some weird output, or none at all. Pretty cool feature utilizing the new `instance` map, which keeps track of every `instance` of the `_()` mixin, and saves all the tasty variables for use-cases like this.
+* You can now use `$context: auto`, and we'll do all the calculations for you. Just be sure a container element actually exists or you'll get some weird output, or none at all. Pretty cool feature utilizing the new `instance` map, which keeps track of every `instance` of the `_()` mixin, and saves all the tasty variables for use-cases like this.
 
 
 

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.3"
-  DATE = "2014-04-21"
+  VERSION = "1.0.4"
+  DATE = "2014-04-24"
 end
 
 # Custom functions

data/stylesheets/flint/config/_config.scss

@@ -1,7 +1,25 @@
+// Configuration map
+//--------------------------------------------------------------------------------
+// @param [Breakpoints] : Here you can set up your various breakpoints for your
+// project. Any number of breakpoints is acceptable. You must include a column
+// count and breakpoint value for each listed breakpoint. Order does not have
+// to follow `ASC` or `DESC`. Unit chosen here must be used consistently
+// throughout the rest of the config map.
+//--------------------------------------------------------------------------------
+// @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 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
+// -------------------------------------------------------------------------------
+
 $flint: (
     // grid configuration
     "config": (
-        // define 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)]
@@ -18,9 +36,9 @@ $flint: (
             "columns": 4,
             "breakpoint": 320px,
         ),
-        // additional grid settings
+        // additional grid settings [required]
         "settings": (
-            "default": "mobile", // [any breakpoint's alias : becomes main output]
+            "default": "mobile", // [any breakpoint's alias]
             "grid": "fluid", // [fluid | fixed]
             "gutter": 10px, // [0-infinity(unit) | false]
             "float-style": "left", // [left | right]

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

@@ -125,6 +125,20 @@
 	}
 }
 
+// Grabs highest breakpoint
+// -------------------------------------------------------------------------------
+// @dependence `get-value()`
+// -------------------------------------------------------------------------------
+// @return [Boolean]
+
+@function is-lowest-breakpoint($key) {
+	@if get-value($key, breakpoint) == min(get-all-breakpoints()...) {
+		@return true;
+	} @else {
+		@return false;
+	}
+}
+
 // Gets all breakpoint column values
 // -------------------------------------------------------------------------------
 // @return [List]

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

@@ -12,7 +12,7 @@
 @function calc-breakpoint($n, $key, $i) {
 	@if get-value(settings, grid) == "fluid" {
 		@if $n == "from" {
-			@if $i == (length(map-fetch($flint, config)) - 1) {
+			@if is-lowest-breakpoint($key) {
 				@return 0;
 			} @else {
 				@return (get-value(next-index($i), breakpoint) + 1);
@@ -22,7 +22,7 @@
 		}
 	} @else if get-value(settings, grid) == "fixed" {
 		@if $n == "from" {
-			@if $i == (length(map-fetch($flint, config)) - 1) {
+			@if is-lowest-breakpoint($key) {
 				@return 0;
 			} @else {
 				@return get-value($key, breakpoint);

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

@@ -6,6 +6,7 @@
 // @return [Boolean]
 
 @function exists($map, $value){
+	
 	@if is-map($map) {
 		@if map-has-key($map, $value) {
 			@return true;
@@ -15,5 +16,7 @@
 				@return true;
 			}
 		}
-	} @return false;
+	} 
+
+	@return false;
 }

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

@@ -14,11 +14,11 @@
 // @return [Value] | map
 
 @function instance($key, $span, $context, $gutter, $shift, $outputWidth, $outputMarginRight, $outputMarginLeft) {
-    $instance-count: $instance-count + 1 !global;
+    $flint__instance-count: $flint__instance-count + 1 !global;
 
     $flint__instance: (
 		"#{selector_string()}::#{$key}": (
-			"instance-count": #{$instance-count},
+			"instance-count": #{$flint__instance-count},
 			"key": #{$key},
 			"breakpoint": #{get-value($key, breakpoint)},
 			"columns": #{get-value($key, columns)},

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

@@ -12,10 +12,10 @@
 	$length: length($keys);
 	$value: map-get($map, $key);
 
-	// check if value equals NULL (meaning the @param was incorrect)
-	// return false so that sass still compiles without errors
+	// check if value equals NULL (meaning the @param was incorrect and the map doesn't exist)
 
 	@if $value == NULL {
+		@warn "Invalid arguments padded to function: `map-fetch(#{$map}, #{$keys})`";
 		@return false;
 	}
 

data/stylesheets/flint/globals/_globals.scss

@@ -1,11 +1,11 @@
 // set global variable to check if foundation has been applied globally
-$foundation: "nonexistant" !global;
+$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;
+$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
-$instance-count: 0 !global;
+$flint__instance-count: 0 !global;
 $flint__instances: () !global;

data/stylesheets/flint/mixins/lib/_flint-calculate.scss

@@ -1,3 +1,18 @@
+// Outputs calculated styles
+// -------------------------------------------------------------------------------
+// @param $width [Value] : width
+// @param $margin-right [Value] : right margin
+// @param $margin-left [Value] : left margin
+// -------------------------------------------------------------------------------
+// @output [Styles...]
+
+@mixin outputFlint ($width, $margin-right, $margin-left) {
+	width: $width;
+	margin-right: $margin-right;
+	margin-left: $margin-left;
+	@content;
+}
+
 // Calculate widths, save all variables to instance
 // -------------------------------------------------------------------------------
 // @param $calcKey [Values...] : breakpoint key
@@ -44,10 +59,9 @@
 			));
 
 			// Output styles
-			width: $outputWidth;
-			margin-right: $outputMarginRight;
-			margin-left: $outputMarginLeft;
-			@content;
+			@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+				@content;
+			}
 
 			// Create new instance for memoization
 			@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
@@ -55,6 +69,22 @@
 			// If debug mode, print instance
 			@include debugPrintInstance($calcKey);
 
+		} @else if $calcGutter == "inside" and get-value(settings, gutter) != false {
+
+			$outputWidth: (calc-width($calcKey, $calcSpan)) - ((calc-margin($calcKey, $calcSpan))*4);
+			$outputMarginRight: calc-margin($calcKey, $calcSpan);
+			$outputMarginLeft: ( if( $calcShift > 0, 
+				(calc-margin($calcKey, $calcSpan)) + (calc-width($calcKey, $calcShift)),
+				(calc-margin($calcKey, -$calcSpan)) + (calc-width($calcKey, $calcShift)) 
+			));
+
+			@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+				@content;
+			}
+
+			@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
+			@include debugPrintInstance($calcKey);
+
 		} @else if $calcGutter == "alpha" and get-value(settings, gutter) != false {
 
 			$outputWidth: (calc-width($calcKey, $calcSpan)) - (calc-margin($calcKey, $calcSpan));
@@ -64,10 +94,9 @@
 				calc-width($calcKey, $calcShift)
 			));
 
-			width: $outputWidth;
-			margin-right: $outputMarginRight;
-			margin-left: $outputMarginLeft;
-			@content;
+			@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+				@content;
+			}
 
 			@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 			@include debugPrintInstance($calcKey);
@@ -81,10 +110,9 @@
 				(calc-margin($calcKey, -$calcSpan)) + (calc-width($calcKey, $calcShift)) 
 			));
 
-			width: $outputWidth;
-			margin-right: $outputMarginRight;
-			margin-left: $outputMarginLeft;
-			@content;
+			@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+				@content;
+			}
 
 			@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 			@include debugPrintInstance($calcKey);
@@ -98,10 +126,9 @@
 				calc-width($calcKey, $calcShift)
 			));
 
-			width: $outputWidth;
-			margin-right: $outputMarginRight;
-			margin-left: $outputMarginLeft;
-			@content;
+			@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+				@content;
+			}
 
 			@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 			@include debugPrintInstance($calcKey);
@@ -125,10 +152,50 @@
 							(calc-margin($calcKey, -$calcSpan, to-number(get-instance-value($calcKey, span)))) + (calc-width($calcKey, $calcShift, to-number(get-instance-value($calcKey, span)))) 
 						));
 
-						width: $outputWidth;
-						margin-right: $outputMarginRight;
-						margin-left: $outputMarginLeft;
+						@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+							@content;
+						}
+
+						@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
+						@include debugPrintInstance($calcKey);
+						
+					} @else {
+						// Else warn that context should not be set to `auto`
+						@warn "You set context to `#{$calcContext}`, but a parent instance could not be found for `#{selector_string()}`";
+					}
+					// Output styles normally if not set to auto
+				} @else {
+
+					$outputWidth: (calc-width($calcKey, $calcSpan, $calcContext)) - ((calc-margin($calcKey, $calcSpan, $calcContext))*2);
+					$outputMarginRight: calc-margin($calcKey, $calcSpan, $calcContext);
+					$outputMarginLeft: ( if( $calcShift > 0, 
+						(calc-margin($calcKey, $calcSpan, $calcContext)) + (calc-width($calcKey, $calcShift, $calcContext)),
+						(calc-margin($calcKey, -$calcSpan, $calcContext)) + (calc-width($calcKey, $calcShift, $calcContext)) 
+					));
+
+					@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
 						@content;
+					}
+
+					@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
+					@include debugPrintInstance($calcKey);
+				}
+
+			} @else if $calcGutter == "inside" and get-value(settings, gutter) != false {
+
+				@if $calcContext == "auto" {
+					@if $exists != false {
+
+						$outputWidth: (calc-width($calcKey, $calcSpan, to-number(get-instance-value($calcKey, span)))) - ((calc-margin($calcKey, $calcSpan, to-number(get-instance-value($calcKey, span))))*4);
+						$outputMarginRight: calc-margin($calcKey, $calcSpan, to-number(get-instance-value($calcKey, span)));
+						$outputMarginLeft: ( if( $calcShift > 0, 
+							(calc-margin($calcKey, $calcSpan, to-number(get-instance-value($calcKey, span)))) + (calc-width($calcKey, $calcShift, to-number(get-instance-value($calcKey, span)))),
+							(calc-margin($calcKey, -$calcSpan, to-number(get-instance-value($calcKey, span)))) + (calc-width($calcKey, $calcShift, to-number(get-instance-value($calcKey, span)))) 
+						));
+
+						@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+							@content;
+						}
 
 						@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 						@include debugPrintInstance($calcKey);
@@ -147,10 +214,9 @@
 						(calc-margin($calcKey, -$calcSpan, $calcContext)) + (calc-width($calcKey, $calcShift, $calcContext)) 
 					));
 
-					width: $outputWidth;
-					margin-right: $outputMarginRight;
-					margin-left: $outputMarginLeft;
-					@content;
+					@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+						@content;
+					}
 
 					@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 					@include debugPrintInstance($calcKey);
@@ -168,10 +234,9 @@
 							calc-width($calcKey, $calcShift, to-number(get-instance-value($calcKey, span)))
 						));
 
-						width: $outputWidth;
-						margin-right: $outputMarginRight;
-						margin-left: $outputMarginLeft;
-						@content;
+						@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+							@content;
+						}
 
 						@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 						@include debugPrintInstance($calcKey);
@@ -188,10 +253,9 @@
 						calc-width($calcKey, $calcShift, $calcContext)
 					));
 
-					width: $outputWidth;
-					margin-right: $outputMarginRight;
-					margin-left: $outputMarginLeft;
-					@content;
+					@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+						@content;
+					}
 
 					@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 					@include debugPrintInstance($calcKey);
@@ -209,10 +273,9 @@
 							(calc-margin($calcKey, -$calcSpan, to-number(get-instance-value($calcKey, span)))) + (calc-width($calcKey, $calcShift, to-number(get-instance-value($calcKey, span)))) 
 						));
 
-						width: $outputWidth;
-						margin-right: $outputMarginRight;
-						margin-left: $outputMarginLeft;
-						@content;
+						@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+							@content;
+						}
 
 						@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 						@include debugPrintInstance($calcKey);
@@ -229,10 +292,9 @@
 						(calc-margin($calcKey, -$calcSpan, $calcContext)) + (calc-width($calcKey, $calcShift, $calcContext)) 
 					));
 
-					width: $outputWidth;
-					margin-right: $outputMarginRight;
-					margin-left: $outputMarginLeft;
-					@content;
+					@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+						@content;
+					}
 
 					@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 					@include debugPrintInstance($calcKey);
@@ -250,10 +312,9 @@
 							calc-width($calcKey, $calcShift, to-number(get-instance-value($calcKey, span)))
 						));
 
-						width: $outputWidth;
-						margin-right: $outputMarginRight;
-						margin-left: $outputMarginLeft;
-						@content;
+						@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+							@content;
+						}
 
 						@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 						@include debugPrintInstance($calcKey);
@@ -270,10 +331,9 @@
 						calc-width($calcKey, $calcShift, $calcContext)
 					));
 
-					width: $outputWidth;
-					margin-right: $outputMarginRight;
-					margin-left: $outputMarginLeft;
-					@content;
+					@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+						@content;
+					}
 
 					@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 					@include debugPrintInstance($calcKey);
@@ -290,10 +350,9 @@
 						$outputMarginRight: calc-margin($calcKey, $calcSpan, to-number(get-instance-value($calcKey, span)));
 						$outputMarginLeft: calc-margin($calcKey, $calcSpan, to-number(get-instance-value($calcKey, span)));
 
-						width: $outputWidth;
-						margin-right: $outputMarginRight;
-						margin-left: $outputMarginLeft;
-						@content;
+						@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+							@content;
+						}
 
 						@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 						@include debugPrintInstance($calcKey);
@@ -309,10 +368,42 @@
 					$outputMarginRight: calc-margin($calcKey, $calcSpan, $calcContext);
 					$outputMarginLeft: calc-margin($calcKey, $calcSpan, $calcContext);
 
-					width: $outputWidth;
-					margin-right: $outputMarginRight;
-					margin-left: $outputMarginLeft;
-					@content;
+					@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+						@content;
+					}
+
+					@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
+					@include debugPrintInstance($calcKey);
+				}
+
+			} @else if $calcGutter == "inside" and get-value(settings, gutter) != false {
+
+				@if $calcContext == "auto" {
+					@if $exists != false {
+
+						$outputWidth: (calc-width($calcKey, $calcSpan, to-number(get-instance-value($calcKey, span)))) - ((calc-margin($calcKey, $calcSpan, to-number(get-instance-value($calcKey, span))))*4);
+						$outputMarginRight: calc-margin($calcKey, $calcSpan, to-number(get-instance-value($calcKey, span)));
+						$outputMarginLeft: calc-margin($calcKey, $calcSpan, to-number(get-instance-value($calcKey, span)));
+
+						@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+							@content;
+						}
+
+						@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
+						@include debugPrintInstance($calcKey);
+
+					} @else {
+						@warn "You set context to `#{$calcContext}`, but a parent instance could not be found for `#{selector_string()}`";
+					}
+				} @else {
+
+					$outputWidth: (calc-width($calcKey, $calcSpan, $calcContext)) - ((calc-margin($calcKey, $calcSpan, $calcContext))*2);
+					$outputMarginRight: calc-margin($calcKey, $calcSpan, $calcContext);
+					$outputMarginLeft: calc-margin($calcKey, $calcSpan, $calcContext);
+
+					@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+						@content;
+					}
 
 					@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 					@include debugPrintInstance($calcKey);
@@ -327,10 +418,9 @@
 						$outputMarginRight: calc-margin($calcKey, $calcSpan, to-number(get-instance-value($calcKey, span)));
 						$outputMarginLeft: 0;
 
-						width: $outputWidth;
-						margin-right: $outputMarginRight;
-						margin-left: $outputMarginLeft;
-						@content;
+						@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+							@content;
+						}
 
 						@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 						@include debugPrintInstance($calcKey);
@@ -344,10 +434,9 @@
 					$outputMarginRight: calc-margin($calcKey, $calcSpan, $calcContext);
 					$outputMarginLeft: 0;
 
-					width: $outputWidth;
-					margin-right: $outputMarginRight;
-					margin-left: $outputMarginLeft;
-					@content;
+					@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+						@content;
+					}
 
 					@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 					@include debugPrintInstance($calcKey);
@@ -362,10 +451,9 @@
 						$outputMarginRight: 0;
 						$outputMarginLeft: calc-margin($calcKey, $calcSpan, to-number(get-instance-value($calcKey, span)));
 
-						width: $outputWidth;
-						margin-right: $outputMarginRight;
-						margin-left: $outputMarginLeft;
-						@content;
+						@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+							@content;
+						}
 
 						@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 						@include debugPrintInstance($calcKey);
@@ -379,10 +467,9 @@
 					$outputMarginRight: 0;
 					$outputMarginLeft: calc-margin($calcKey, $calcSpan, $calcContext);
 
-					width: $outputWidth;
-					margin-right: $outputMarginRight;
-					margin-left: $outputMarginLeft;
-					@content;
+					@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+						@content;
+					}
 
 					@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 					@include debugPrintInstance($calcKey);
@@ -397,10 +484,9 @@
 						$outputMarginRight: 0;
 						$outputMarginLeft: 0;
 
-						width: $outputWidth;
-						margin-right: $outputMarginRight;
-						margin-left: $outputMarginLeft;
-						@content;
+						@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+							@content;
+						}
 
 						@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 						@include debugPrintInstance($calcKey);
@@ -414,10 +500,9 @@
 					$outputMarginRight: 0;
 					$outputMarginLeft: 0;
 
-					width: $outputWidth;
-					margin-right: $outputMarginRight;
-					margin-left: $outputMarginLeft;
-					@content;
+					@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+						@content;
+					}
 
 					@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 					@include debugPrintInstance($calcKey);
@@ -433,10 +518,22 @@
 			$outputMarginRight: calc-margin($calcKey, $calcSpan);
 			$outputMarginLeft: calc-margin($calcKey, $calcSpan);
 
-			width: $outputWidth;
-			margin-right: $outputMarginRight;
-			margin-left: $outputMarginLeft;
-			@content;
+			@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+				@content;
+			}
+
+			@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
+			@include debugPrintInstance($calcKey);
+
+		} @else if $calcGutter == "inside" and get-value(settings, gutter) != false {
+
+			$outputWidth: (calc-width($calcKey, $calcSpan)) - ((calc-margin($calcKey, $calcSpan))*4);
+			$outputMarginRight: calc-margin($calcKey, $calcSpan);
+			$outputMarginLeft: calc-margin($calcKey, $calcSpan);
+
+			@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+				@content;
+			}
 
 			@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 			@include debugPrintInstance($calcKey);
@@ -447,10 +544,9 @@
 			$outputMarginRight: calc-margin($calcKey, $calcSpan);
 			$outputMarginLeft: 0;
 
-			width: $outputWidth;
-			margin-right: $outputMarginRight;
-			margin-left: $outputMarginLeft;
-			@content;
+			@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+				@content;
+			}
 
 			@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 			@include debugPrintInstance($calcKey);
@@ -461,10 +557,9 @@
 			$outputMarginRight: 0;
 			$outputMarginLeft: calc-margin($calcKey, $calcSpan);
 
-			width: $outputWidth;
-			margin-right: $outputMarginRight;
-			margin-left: $outputMarginLeft;
-			@content;
+			@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+				@content;
+			}
 
 			@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 			@include debugPrintInstance($calcKey);
@@ -475,10 +570,9 @@
 			$outputMarginRight: 0;
 			$outputMarginLeft: 0;
 
-			width: $outputWidth;
-			margin-right: $outputMarginRight;
-			margin-left: $outputMarginLeft;
-			@content;
+			@include outputFlint($outputWidth, $outputMarginRight, $outputMarginLeft) {
+				@content;
+			}
 
 			@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 			@include debugPrintInstance($calcKey);

data/stylesheets/flint/mixins/lib/_flint-main.scss

@@ -16,11 +16,11 @@
 
 		// apply global border-box-sizing if true
 		@if get-value(settings, border-box-sizing) == true {
-			$foundation: "existant" !global;
+			$flint__foundation: "existant" !global;
 		}
 		
 		// foundation is now globally existant
-		@if $foundation == "existant" {
+		@if $flint__foundation == "existant" {
 			@at-root *, *:before, *:after {
 	  			-moz-box-sizing: border-box;
 				-webkit-box-sizing: border-box;
@@ -49,7 +49,7 @@
 
 		} @else if length($key) > 1 or type-of($key) != "string" {
 
-			@for $i from 1 through length($flint__all--keys) {
+			@for $i from 1 through length($flint__all__keys) {
 				$calcKey: steal-key($i);
 
 				@if $calcKey == get-value(settings, default) {
@@ -59,14 +59,14 @@
 		}
 		
 		// apply individually if foundation is not set globally, but is set to true in config
-		@if get-value(settings, border-box-sizing) == true and $foundation == "nonexistant" {
+		@if get-value(settings, border-box-sizing) == true and $flint__foundation == "nonexistant" {
   			-moz-box-sizing: border-box;
 			-webkit-box-sizing: border-box;
 			box-sizing: border-box;
 
 			// warn to either set a global foundation, or turn border-box-sizing off
 			@if global-variable-exists(global-foundation-is-set) == false {
-				@warn "Global foundation is #{$foundation}. To avoid repeated box-sizing incidents, set a global flint(foundation) rule, or turn border-box-sizing to false in your config file.";
+				@warn "Global foundation is #{$flint__foundation}. To avoid repeated box-sizing incidents, set a global flint(foundation) rule, or turn border-box-sizing to false in your config file.";
 
 				// declare global variable so only a single warning prints out
 				$global-foundation-is-set: true !global;
@@ -100,7 +100,7 @@
 
 			} @else if length($key) > 1 or type-of($key) != "string" {
 
-				@for $i from 1 through length($flint__all--keys) {
+				@for $i from 1 through length($flint__all__keys) {
 					$calcKey: steal-key($i);
 
 					@if $calcKey == get-value(settings, default) {
@@ -123,7 +123,7 @@
 
 			@if get-value(settings, grid) == "fixed" {
 
-				@for $i from 1 through length($flint__all--keys) {
+				@for $i from 1 through length($flint__all__keys) {
 
 					$calcKey: steal-key($i);
 					$calcSpan: $key;
@@ -131,7 +131,7 @@
 					$calcGutter: $gutter;
 					$calcShift: $shift;
 
-					@if max(get-all-breakpoints()...) == get-value($calcKey, breakpoint) {
+					@if is-highest-breakpoint($calcKey) {
 						@media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) {
 							width: calc-width($calcKey, $calcSpan);
 							@content;
@@ -152,7 +152,7 @@
 
 			@if length($key) == 1 and $span == NULL {
 
-				@for $i from 1 through length($flint__all--keys) {
+				@for $i from 1 through length($flint__all__keys) {
 
 					$calcKey: steal-key($i);
 					$calcSpan: $key;
@@ -166,7 +166,7 @@
 
 					} @else {
 
-			  			@if is-highest-breakpoint($calcKey) == true {
+			  			@if is-highest-breakpoint($calcKey) {
 
 							@media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) {
 								@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i);
@@ -191,7 +191,7 @@
 
 			} @else if length($key) == 1 and length($span) == 1 {
 
-				@for $i from 1 through length($flint__all--keys) {
+				@for $i from 1 through length($flint__all__keys) {
 
 					$calcKey: steal-key($i);
 					$calcSpan: $key;
@@ -205,7 +205,7 @@
 
 					} @else {
 
-			  			@if is-highest-breakpoint($calcKey) == true {
+			  			@if is-highest-breakpoint($calcKey) {
 
 							@media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) {
 								@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i);
@@ -230,7 +230,7 @@
 
 			} @else if length($key) == 1 and length($span) > 1 {
 
-				@for $i from 1 through length($flint__all--keys) {
+				@for $i from 1 through length($flint__all__keys) {
 
 					$calcKey: steal-key($i);
 					$calcSpan: $key;
@@ -244,7 +244,7 @@
 
 					} @else {
 
-						@if is-highest-breakpoint($calcKey) == true {
+						@if is-highest-breakpoint($calcKey) {
 
 							@media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) {
 								@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i);
@@ -274,7 +274,7 @@
 		and is-not-string(nth($key, 1))
 		and is-not-string(nth($key, 2))
 	{
-		@for $i from 1 through length($flint__all--keys) {
+		@for $i from 1 through length($flint__all__keys) {
 
 			$calcKey: steal-key($i);
 			$calcSpan: $key;
@@ -288,7 +288,7 @@
 
 			} @else {
 
-				@if is-highest-breakpoint($calcKey) == true {
+				@if is-highest-breakpoint($calcKey) {
 
 					@media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) {
 						@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i);
@@ -316,7 +316,7 @@
 		and is-not-string(nth($key, 1))
 		and is-not-string(nth($key, 2))
 	{
-		@for $i from 1 through length($flint__all--keys) {
+		@for $i from 1 through length($flint__all__keys) {
 
 			$calcKey: steal-key($i);
 			$calcSpan: $key;
@@ -330,7 +330,7 @@
 
 			} @else {
 
-				@if is-highest-breakpoint($calcKey) == true {
+				@if is-highest-breakpoint($calcKey) {
 
 					@media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) {
 						@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i);
@@ -367,7 +367,7 @@
 
 		} @else {
 
-			@if is-highest-breakpoint($calcKey) == true {
+			@if is-highest-breakpoint($calcKey) {
 
 				@media only screen and ( min-width: calc-breakpoint(from, $calcKey, get-index($calcKey)) ) {
 					@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift);
@@ -404,7 +404,7 @@
 
 		} @else {
 
-			@if is-highest-breakpoint($calcKey) == true {
+			@if is-highest-breakpoint($calcKey) {
 
 				@media only screen and ( min-width: calc-breakpoint(from, $calcKey, get-index($calcKey)) ) {
 					@include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift);

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

@@ -1,10 +1,10 @@
-// Prints debug output into compiled stylesheet as flagged comments
+// Prints debug properties
 // -------------------------------------------------------------------------------
 // @dependence `printInstance()`
 // -------------------------------------------------------------------------------
 // @param $calcKey [Breakpoint] : breakpoint key to search for instance
 // -------------------------------------------------------------------------------
-// @output [Styles...]
+// @output [Properties...]
 
 @mixin debugPrintInstance($calcKey) {
 	@if get-value(settings, debug-mode) == true {
@@ -13,11 +13,11 @@
 	}
 }
 
-// Prints all contents of instance as flagged comments
+// Prints all contents of instance
 // -------------------------------------------------------------------------------
 // @param $instance [Map] : instance
 // -------------------------------------------------------------------------------
-// @output [Styles...]
+// @output [Properties...]
 
 @mixin printInstance($instance) {
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: flint-gs
 version: !ruby/object:Gem::Version
-  version: 1.0.3
+  version: 1.0.4
 platform: ruby
 authors:
 - Ezekiel Gabrielse
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-04-21 00:00:00.000000000 Z
+date: 2014-04-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass