flint-gs 1.9.1 → 1.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a150c2e0da9a945396df9ad56fe361761678278c
-  data.tar.gz: 06f27376ed86dfe4b14c6ed8e0ba000a8312dfa2
+  metadata.gz: 63ba26c499600324f23fb24bf1b0f4d9bf128478
+  data.tar.gz: 3882ee657a90d40d5ec896d8ff818ce6db99c688
 SHA512:
-  metadata.gz: b28f695620f39fae5cdbcff2e5021d33861bc391f299a6b8e7fd51fd5e1c7b96b3da20839ee826d6dfbdd14552fef6a2decb6f953633d9e11c7795c210ac091f
-  data.tar.gz: 718c30f212093b9d7753335f519e7b72a75c33124437bcbe5efa4b7868cbece05f204b9cbc7bc5fe0538d9afe056f18cfcc58d6c0a9bee4afe30a42ff666cac4
+  metadata.gz: 10ed7130f8c51a0d0fb780651373227605404e215b9a23f1ef7daec694d2e213d7cb7710896a5119c26cc19c1121dd87cb703f0f931d08ff5de5a465e84673ed
+  data.tar.gz: fa4e1b26f8c9cdaba11e94ebdfa8e957f55385ec497dd06125a593e5d2886fed0784330c693940f552edbc64a244debc636e632a41079a6a701ba3772fa433f4

data/README.md

@@ -31,7 +31,8 @@ Enjoy.
 ## Requirements
 
 * Sass ~> `3.3.0`
-* Ruby ~> `1.8.7`
+
+_Currently, Flint is only available for Ruby Sass; so it will not work with libSass until they support the map data-type. Flint depends on a few custom Ruby functions, but in `2.0` I hope to have those dependencies relieved._
 
 ## Installation
 
@@ -39,7 +40,12 @@ Enjoy.
 2. If you're using Compass, add `require "flint"` to your `config.rb`
 3. Import it into your stylesheet with `@import "flint"`
 
-If you don't want to install it, then simply download or clone the current build files. 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 SassScript `&` [returns to Sass](https://gist.github.com/nex3/8050187). Adjust the paths according to your project.
+If you don't want to install it, then simply download or clone the current build files. Use your `config.rb` to require any custom functions Flint uses; currently this is required, as we're making use of custom SassScript functions until the SassScript `&` [returns to Sass](https://gist.github.com/nex3/8050187) **(set for integration with Sass `3.4` in `2.0`)**. Adjust the paths according to your project.
+
+If you're not using Compass, you can require the custom Ruby functions and compile via:
+```
+scss --require ./lib/flint.rb example.scss > example.css
+```
 
 ## Documentation
 
@@ -511,57 +517,57 @@ Use these if you need to apply breakpoint specific styling.
 ```scss
 .wrap {
 	@include _(desktop) {
-		// only desktop
+		// Only desktop
 	}
 }
 .wrap {
 	@include _(greater than mobile) {
-		// all sizes above mobile's breakpoint
+		// All sizes above mobile's breakpoint
 	}
 }
 .wrap {
 	@include _(10em greater than tablet) {
-		// all sizes 10em above tablet's breakpoint
+		// All sizes 10em above tablet's breakpoint
 	}
 }
 .wrap {
     @include _(greater than 60em) {
-        // all sizes above 60em
+        // All sizes above 60em
     }
 }
 .wrap {
 	@include _(less than tablet) {
-		// all sizes under tablet
+		// All sizes under tablet
 	}
 }
 .wrap {
 	@include _(1em less than laptop) {
-		// all sizes 1em under laptop
+		// All sizes 1em under laptop
 	}
 }
 .wrap {
     @include _(less than 40em) {
-        // all sizes under 40em
+        // All sizes under 40em
     }
 }
 .wrap {
 	@include _(for desktop tablet) {
-		// only for desktop and tablet
+		// Only for desktop and tablet
 	}
 }
 .wrap {
 	@include _(from mobile to laptop) {
-		// all sizes from mobile to laptop
+		// All sizes from mobile to laptop
 	}
 }
 .wrap {
 	@include _(from desktop to infinity) {
-		// all sizes from desktop to infinity
+		// All sizes from desktop to infinity
 	}
 }
 .wrap {
     @include _(from 20em to 40em) {
-        // all sizes from 20em to 40em
+        // All sizes from 20em to 40em
     }
 }
 ```
@@ -578,7 +584,7 @@ Use if you want to define each span without shorthands.
 	@include _(mobile, 4);
 }
 
-// with context,
+// With context,
 // .name {
 //	  @include _(desktop, 4, 16, $gutter: alpha);
 // }
@@ -620,48 +626,69 @@ Outputs,
 
 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`.
 
+_**Note:** When defining `$gutter: center`, the float property will be set to `none` in order to center your column._
+
 ```scss
-// default margins
+// Default margins
 .gutter-default {
 	// other aliases : `normal` | `regular`
 	@include _(desktop, 4, $gutter: default);
 }
 
-// no left margin
+// Center column
+.gutter-center {
+	@include _(desktop, 4, $gutter: center);
+}
+
+// No left margin
 .gutter-alpha {
 	// other aliases : `no-left` | `first`
 	@include _(desktop, 4, $gutter: alpha);
 }
 
-// no right margin
+// No right margin
 .gutter-omega {
 	// other aliases : `no-right` | `flint-last`
 	@include _(desktop, 4, $gutter: omega);
 }
 
-// no margins
+// No margins
 .gutter-row {
 	// other alias : `none`
 	@include _(desktop, 4, $gutter: row);
 }
 
-// places gutters on inside by reducing column width by [gutter*2]
+// Places gutters on inside by reducing column width by [gutter*2]
 .gutter-inside {
 	@include _(desktop, 4, $gutter: inside);
 }
 
-// variable gutter
+// Variable gutter
 .variable-gutter {
-	@include _(16 12 8 4, $gutter: row alpha omega normal);
+	@include _(16 12 8 4, $gutter: row alpha center normal);
 }
 
-// recursive gutter
+// Recursive gutter
 .recursive-gutter {
 	@include _(16 12 8 4, $gutter: row);
 }
 ```
 Outputs,
 ```scss
+.gutter-normal {
+	display: block;
+	float: left;
+	width: 23.4375%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+}
+.gutter-center {
+	display: block;
+	float: none;
+	width: 23.4375%;
+    margin-right: auto;
+    margin-left: auto;
+}
 .gutter-alpha {
 	display: block;
 	float: left;
@@ -755,12 +782,12 @@ _The `$shift` modifier has been deprecated as of `1.8.0`. It is set to be remove
 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.
 
 ```scss
-// shift 4 columns to the right across all breakpoints
+// Shift 4 columns to the right across all breakpoints
 .name {
 	@include _(12 12 8 4, $shift: 4);
 }
 
-// shift 2 columns to the left across specified breakpoints
+// Shift 2 columns to the left across specified breakpoints
 .name {
 	@include _(12 12 8 4, $shift: -2 -2 0 0);
 }

data/lib/flint.rb

@@ -1,23 +1,17 @@
 require 'sass'
 
 base_directory = File.expand_path(File.join(File.dirname(__FILE__), '..'))
-flint_stylesheets_path = File.join(base_directory, 'sass')
+flint_stylesheets_path = File.join(base_directory, 'stylesheets')
 
 if (defined? Compass)
     Compass::Frameworks.register('flint', :path => base_directory)
 else
-    # Compass not found, register on the Sass path via the environment
-    if ENV.has_key?("SASS_PATH")
-        ENV["SASS_PATH"] = ENV["SASS_PATH"] + File::PATH_SEPARATOR + flint_stylesheets_path
-    else
-        ENV["SASS_PATH"] = flint_stylesheets_path
-    end
+    ENV["SASS_PATH"] = [ENV["SASS_PATH"], flint_stylesheets_path].compact.join(File::PATH_SEPARATOR)
 end
 
-# Date is in the form of YYYY-MM-DD
 module Flint
-    VERSION = "1.9.1"
-    DATE = "2014-08-04"
+    VERSION = "1.10.0"
+    DATE = "2014-08-11"
 end
 
 # Custom functions

data/stylesheets/flint/functions/lib/_has-family-instance.scss

@@ -63,7 +63,7 @@
 
 			} @else {
 
-				// Else, flint-remove the flint-last selector and loop again
+				// Else, remove the last selector and loop again
 				$selector-list: flint-remove($selector-list, flint-last($selector-list));
 
 			}

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

@@ -1,7 +1,5 @@
 // Keeps count of all instances with arguments, stores in global var
 // -------------------------------------------------------------------------------
-// @dependence `flint-get-value()`
-// -------------------------------------------------------------------------------
 // @param $key [string] : computed breakpoint of instance
 // @param $span [number] : computed span of instance
 // @param $context [number] : computed context of instance

data/stylesheets/flint/mixins/lib/_calculate.scss

@@ -115,18 +115,40 @@
 
 		// Define floats if key is default, or this is a single instance call
 		// ----
-		@if flint-is-default($calc-key) or $i == null {
+		@if flint-is-default($calc-key) and $gutter != "center" or $i == null and $gutter != "center" {
 			float: unquote(flint-get-value("settings", "float-style"));
 		}
 
+		// Disable floats if gutter is set to center
+		// ----
+		$recursive-center: false;
+
+		@if $gutter == "center" {
+			$recursive-center: true;
+		}
+
+		// Check if default and gutter is recursive
+		@if flint-is-default($calc-key) and $recursive-center {
+			float: none;
+		// Check if default and gutter is not recurisve, wrap in query to not affect others
+		} @else if flint-is-default($calc-key) and $calc-gutter == "center" and not $recursive-center {
+			@include _($calc-key) {
+				float: none;
+			}
+		// Not default, check if gutter was set to center but not recursive
+		} @else if $calc-gutter == "center" and not $recursive-center or $i == null and $recursive-center {
+			float: none;
+		}
+
 		// Only run through if cache search was unsuccessful
+		// ----
 		@if not $cached and not $errors {
 
 			// Shift, no context
 			// ----
 			@if $calc-shift != null and $calc-context == null {
 
-				@if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" and flint-get-value("settings", "gutter") != false {
+				@if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" {
 
 					// Save to variables for instance creation
 					$output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*2);
@@ -136,7 +158,7 @@
 						(flint-calc-margin($calc-key, -$calc-span)) + (flint-calc-width($calc-key, $calc-shift))
 					));
 
-				} @else if $calc-gutter == "inside" and flint-get-value("settings", "gutter") != false {
+				} @else if $calc-gutter == "inside" {
 
 					$output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*4);
 					$output-margin-right: flint-calc-margin($calc-key, $calc-span);
@@ -145,7 +167,7 @@
 						(flint-calc-margin($calc-key, -$calc-span)) + (flint-calc-width($calc-key, $calc-shift))
 					));
 
-				} @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" and flint-get-value("settings", "gutter") != false {
+				} @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" {
 
 					$output-width: (flint-calc-width($calc-key, $calc-span)) - (flint-calc-margin($calc-key, $calc-span));
 					$output-margin-right: flint-calc-margin($calc-key, $calc-span);
@@ -154,7 +176,7 @@
 						flint-calc-width($calc-key, $calc-shift)
 					));
 
-				} @else if $calc-gutter == "omega" or $calc-gutter == "no-right" or $calc-gutter == "flint-last" and flint-get-value("settings", "gutter") != false {
+				} @else if $calc-gutter == "omega" or $calc-gutter == "no-right" or $calc-gutter == "flint-last" {
 
 					$output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span)));
 					$output-margin-right: 0;
@@ -163,7 +185,13 @@
 						(flint-calc-margin($calc-key, -$calc-span)) + (flint-calc-width($calc-key, $calc-shift))
 					));
 
-				} @else if $calc-gutter == "row" or $calc-gutter == "none" or flint-get-value("settings", "gutter") == false {
+				} @else if $calc-gutter == "center" {
+
+					$output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*2);
+					$output-margin-right: auto;
+					$output-margin-left: auto;
+
+				} @else if $calc-gutter == "row" or $calc-gutter == "none" {
 
 					$output-width: (flint-calc-width($calc-key, $calc-span));
 					$output-margin-right: 0;
@@ -172,6 +200,9 @@
 						flint-calc-width($calc-key, $calc-shift)
 					));
 
+				} @else {
+					@warn "Invalid gutter argument: #{$calc-gutter}. Please provide a valid argument.";
+					$errors: true;
 				}
 
 			// Shift, context
@@ -183,7 +214,7 @@
 
 				@if $calc-shift != null {
 
-					@if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" and flint-get-value("settings", "gutter") != false {
+					@if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" {
 
 						// Check if context is set to auto
 						@if $calc-context == "auto" {
@@ -230,7 +261,7 @@
 
 						}
 
-					} @else if $calc-gutter == "inside" and flint-get-value("settings", "gutter") != false {
+					} @else if $calc-gutter == "inside" {
 
 						@if $calc-context == "auto" {
 							@if $flint-exists != false {
@@ -270,7 +301,7 @@
 
 						}
 
-					} @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" and flint-get-value("settings", "gutter") != false {
+					} @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" {
 
 						@if $calc-context == "auto" {
 							@if $flint-exists != false {
@@ -308,7 +339,7 @@
 
 						}
 
-					} @else if $calc-gutter == "omega" or $calc-gutter == "no-right" or $calc-gutter == "flint-last" and flint-get-value("settings", "gutter") != false {
+					} @else if $calc-gutter == "omega" or $calc-gutter == "no-right" or $calc-gutter == "flint-last" {
 
 						@if $calc-context == "auto" {
 							@if $flint-exists != false {
@@ -346,7 +377,36 @@
 
 						}
 
-					} @else if $calc-gutter == "row" or $calc-gutter == "none" or flint-get-value("settings", "gutter") == false {
+					} @else if $calc-gutter == "center" {
+
+						@if $calc-context == "auto" {
+
+							@if $flint-exists != false {
+								@if flint-get-value("settings", "grid") == "fluid" {
+
+									$output-width: (flint-calc-width($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span")))*2);
+									$output-margin-right: auto;
+									$output-margin-left: auto;
+
+								} @else if flint-get-value("settings", "grid") == "fixed" {
+
+									$output-width: (flint-get-instance-value($calc-key, "output", "width") / flint-get-instance-value($calc-key, "span") * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span")))*2);
+									$output-margin-right: auto;
+									$output-margin-left: auto;
+
+								}
+							} @else {
+								@warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string() + '::' + $calc-key}`";
+								$errors: true;
+							}
+						} @else {
+
+							$output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context))*2);
+							$output-margin-right: auto;
+							$output-margin-left: auto;
+
+						}
+					} @else if $calc-gutter == "row" or $calc-gutter == "none" {
 
 						@if $calc-context == "auto" {
 							@if $flint-exists != false {
@@ -382,13 +442,16 @@
 								flint-calc-width($calc-key, $calc-shift, $calc-context)
 							));
 						}
+					} @else {
+						@warn "Invalid gutter argument: #{$calc-gutter}. Please provide a valid argument.";
+						$errors: true;
 					}
 
 				// Context, no shift
 				// ----
 				} @else {
 
-					@if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" and flint-get-value("settings", "gutter") != false {
+					@if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" {
 						@if $calc-context == "auto" {
 							@if $flint-exists != false {
 								@if flint-get-value("settings", "grid") == "fluid" {
@@ -416,7 +479,7 @@
 
 						}
 
-					} @else if $calc-gutter == "inside" and flint-get-value("settings", "gutter") != false {
+					} @else if $calc-gutter == "inside" {
 
 						@if $calc-context == "auto" {
 							@if $flint-exists != false {
@@ -446,7 +509,7 @@
 
 						}
 
-					} @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" and flint-get-value("settings", "gutter") != false {
+					} @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" {
 
 						@if $calc-context == "auto" {
 							@if $flint-exists != false {
@@ -475,7 +538,7 @@
 
 						}
 
-					} @else if $calc-gutter == "omega" or $calc-gutter =="no-right" or $calc-gutter == "flint-last" and flint-get-value("settings", "gutter") != false {
+					} @else if $calc-gutter == "omega" or $calc-gutter =="no-right" or $calc-gutter == "flint-last" {
 
 						@if $calc-context == "auto" {
 							@if $flint-exists != false {
@@ -504,7 +567,36 @@
 
 						}
 
-					} @else if $calc-gutter == "row" or $calc-gutter == "none" or flint-get-value("settings", "gutter") == false {
+					} @else if $calc-gutter == "center" {
+
+						@if $calc-context == "auto" {
+							@if $flint-exists != false {
+								@if flint-get-value("settings", "grid") == "fluid" {
+
+									$output-width: (flint-calc-width($calc-key, $calc-span, flint-get-instance-value($calc-key, "span"))) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span")))*2);
+									$output-margin-right: auto;
+									$output-margin-left: auto;
+
+								} @else if flint-get-value("settings", "grid") == "fixed" {
+
+									$output-width: (flint-get-instance-value($calc-key, "output", "width") / flint-get-instance-value($calc-key, "span") * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-get-instance-value($calc-key, "span")))*2);
+									$output-margin-right: auto;
+									$output-margin-left: auto;
+
+								}
+							} @else {
+								@warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string() + '::' + $calc-key}`";
+								$errors: true;
+							}
+						} @else {
+
+							$output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context))*2);
+							$output-margin-right: auto;
+							$output-margin-left: auto;
+
+						}
+
+					} @else if $calc-gutter == "row" or $calc-gutter == "none" {
 
 						@if $calc-context == "auto" {
 							@if $flint-exists != false {
@@ -532,6 +624,9 @@
 							$output-margin-left: 0;
 
 						}
+					} @else {
+						@warn "Invalid gutter argument: #{$calc-gutter}. Please provide a valid argument.";
+						$errors: true;
 					}
 				}
 
@@ -539,36 +634,45 @@
 			// ----
 			} @else {
 
-				@if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" and flint-get-value("settings", "gutter") != false {
+				@if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" {
 
 					$output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*2);
 					$output-margin-right: flint-calc-margin($calc-key, $calc-span);
 					$output-margin-left: flint-calc-margin($calc-key, $calc-span);
 
-				} @else if $calc-gutter == "inside" and flint-get-value("settings", "gutter") != false {
+				} @else if $calc-gutter == "inside" {
 
 					$output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*4);
 					$output-margin-right: flint-calc-margin($calc-key, $calc-span);
 					$output-margin-left: flint-calc-margin($calc-key, $calc-span);
 
-				} @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" and flint-get-value("settings", "gutter") != false {
+				} @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" {
 
 					$output-width: (flint-calc-width($calc-key, $calc-span)) - (flint-calc-margin($calc-key, $calc-span));
 					$output-margin-right: flint-calc-margin($calc-key, $calc-span);
 					$output-margin-left: 0;
 
-				} @else if $calc-gutter == "omega" or $calc-gutter == "no-right" or $calc-gutter == "flint-last" and flint-get-value("settings", "gutter") != false {
+				} @else if $calc-gutter == "omega" or $calc-gutter == "no-right" or $calc-gutter == "flint-last" {
 
 					$output-width: (flint-calc-width($calc-key, $calc-span)) - (flint-calc-margin($calc-key, $calc-span));
 					$output-margin-right: 0;
 					$output-margin-left: flint-calc-margin($calc-key, $calc-span);
 
-				} @else if $calc-gutter == "row" or $calc-gutter == "none" or flint-get-value("settings", "gutter") == false {
+				} @else if $calc-gutter == "center" {
+
+					$output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*2);
+					$output-margin-right: auto;
+					$output-margin-left: auto;
+
+				} @else if $calc-gutter == "row" or $calc-gutter == "none" {
 
 					$output-width: flint-calc-width($calc-key, $calc-span);
 					$output-margin-right: 0;
 					$output-margin-left: 0;
 
+				} @else {
+					@warn "Invalid gutter argument: #{$calc-gutter}. Please provide a valid argument.";
+					$errors: true;
 				}
 			}
 		}

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

@@ -1,7 +1,5 @@
 // Prints debug properties
 // -------------------------------------------------------------------------------
-// @dependence `flint-print-instance()`
-// -------------------------------------------------------------------------------
 // @param $calc-key [string] : breakpoint key to search for instance
 // -------------------------------------------------------------------------------
 // @output instance map

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: flint-gs
 version: !ruby/object:Gem::Version
-  version: 1.9.1
+  version: 1.10.0
 platform: ruby
 authors:
 - Ezekiel Gabrielse
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-08-04 00:00:00.000000000 Z
+date: 2014-08-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass