flint-gs 1.0.5 → 1.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0037eb31b05237d1557d5fb3f190ac036e2237bc
-  data.tar.gz: fbbbe97e0fc1b5bf62d6a94057ac663b04c46a96
+  metadata.gz: 236ab4066ab2eb79b7548e55e03eb25dc8ecd673
+  data.tar.gz: 4c3efe7cf29b1b34592228e78b9da9775b41de7a
 SHA512:
-  metadata.gz: 30087aa875518d81c981b3b3d1b497ab79d95d9900292af38308c6eeeba80b84b9fae70c546af10e7e2c44f6fd0fe8520be1de1ebbe50b62f5f77568cf131f73
-  data.tar.gz: 3a79ea3e906b94bf05c073a936b5e0f9196a3b0cecba8207314070fdb1af1b78b911d88a44e653bf6bd73fd39012d5953b69aea987d21d16579b3d2cc630a6c8
+  metadata.gz: de1a4d49517d0cd4299cab60e7b96afab70dde800c317a8f1dd5a805c0e29e5024a4da3ff45231230744da7e680b683b72a6c3aba32fdae83e93bd1c707dd3cc
+  data.tar.gz: 1e85c4544c68a69a0afd825c5a9b4d21dc3237474b661bf3a61c8e483ae002178d084ab01d79619bb644555e9f87e2ba3539676c2eff7431eae32acf787e6ef4

data/README.md

@@ -2,7 +2,7 @@
 
 **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.
 
-Here's a small [demo on Sassmeister](http://sassmeister.com/gist/9657552) *(older version : v0.0.3)* to show what Flint is capable of.
+Here's a small [demo on Sassmeister](http://sassmeister.com/gist/9657552) to show what Flint is capable of. *This demo is outdated, and shows a pre-release version (0.0.3) of Flint.*
 
 Enjoy.
 
@@ -18,19 +18,23 @@ If you don't want to install the gem, download/clone the current build files and
 
 ###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. You're in full control of your columns as well. Also, unlike most frameworks, you may name these anything that you like. Flint is smart and will figure out which one you're talking about. 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 template below.
+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.
+
+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.
 
-*Keep in mind, whatever unit you choose to use here needs to be used consistently throughout Flint. No mixing of `px` and `em` units.*
+*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
 //--------------------------------------------------------------------------------
 // @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
+// count and breakpoint value for each listed breakpoint. Flint does require that
+// you follow a `DESC` order. 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
@@ -343,11 +347,13 @@ recursive {
 
 Use this if your content needs different spans across each breakpoints. The *order of operations* for this matches the order entered in your `config`.
 
+To hide an element on a specific breakpoint, input `0` as its span.
+
 *You must include an argument for each breakpoint in your config.*
 
 ```scss
 .variable {
-	@include _(8 6 4 4);
+	@include _(8 6 0 4);
 }
 ```
 
@@ -369,9 +375,7 @@ Outputs,
 }
 @media only screen and (min-width: 321px) and (max-width: 640px) {
 	.variable {
-		width: 46.875%;
-		margin-right: 1.5625%;
-		margin-left: 1.5625%;
+		display: none;
 	}
 }
 @media only screen and (min-width: 0) and (max-width: 320px) {
@@ -531,27 +535,37 @@ Outputs,
 Here are different gutter modifiers that may be called in when defining spans using the `$gutter` variable. **You should note**, that when using shorthands the gutter modifiers are recursive across all breakpoints.
 
 ```scss
+// default margins
+.gutter-default { // other alias : `normal` | `regular`
+	@include _(desktop, 4, $gutter: default);
+}
+
 // no left margin
-.gutter {
+.gutter-alpha { // other alias : `no-left`
 	@include _(desktop, 4, $gutter: alpha);
 }
 
 // no right margin
-.gutter {
+.gutter-omega { // other alias : `no-right`
 	@include _(desktop, 4, $gutter: omega);
 }
 
 // no margins
-.gutter {
+.gutter-row { // other alias : `none`
 	@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 {
+.gutter-inside {
 	@include _(desktop, 4, $gutter: inside);
 }
 
+// variable gutter
+.variable-gutter {
+	@include _(16 12 8 4, $gutter: row alpha omega normal);
+}
+
 // recursive
 .recursive-gutter {
 	@include _(16 12 8 4, $gutter: row);
@@ -559,34 +573,62 @@ Here are different gutter modifiers that may be called in when defining spans us
 ```
 Outputs,
 ```scss
-.gutter {
+.gutter-alpha {
 	display: block;
 	float: left;
 	width: 24.21875%;
 	margin-right: 0.78125%;
 	margin-left: 0;
 }
-.gutter {
+.gutter-omega {
 	display: block;
 	float: left;
 	width: 24.21875%;
 	margin-right: 0;
 	margin-left: 0.78125%;
 }
-.gutter {
+.gutter-row {
 	display: block;
 	float: left;
 	width: 25%;
 	margin-right: 0;
 	margin-left: 0;
 }
-.gutter {
+.gutter-inside {
 	display: block;
 	float: left;
 	width: 21.875%;
 	margin-right: 0.78125%;
 	margin-left: 0.78125%;
 }
+.variable-gutter {
+	display: block;
+	float: left;
+	width: 100%;
+	margin-right: 0;
+	margin-left: 0;
+}
+@media only screen and (min-width: 641px) and (max-width: 960px) {
+	.variable-gutter {
+		width: 98.95833%;
+		margin-right: 1.04167%;
+		margin-left: 0;
+	}
+}
+@media only screen and (min-width: 321px) and (max-width: 640px) {
+	.variable-gutter {
+		width: 98.4375%;
+		margin-right: 0;
+		margin-left: 1.5625%;
+	}
+}
+@media only screen and (min-width: 0) and (max-width: 320px) {
+	.variable-gutter {
+		width: 87.5%;
+		margin-right: 3.125%;
+		margin-left: 3.125%;
+	}
+}
 .recursive-gutter {
 	display: block;
 	float: left;
@@ -633,13 +675,11 @@ Much like the gutter modifiers, you may also call in a shift parameter using the
 }
 ```
 
-**One more** cool thing about flint is that you are not bound to
-the grid you define. Feel free to use decimals in your arguments
-for extra fine tuned control over your layouts.
+**One more** cool thing about flint is that you are not bound to the grid you define. Feel free to use decimals, math or ratios in your arguments for extra fine tuned control over your layouts.
 
 ```scss
 .break-the-grid {
-	@include _(16/3 12.1 8.9 4, $shift: 1.2 0 2 0, $gutter: row);
+	@include _(16/3 12.1 8.9 (5 - 1), $shift: 1.2 0 2 0, $gutter: row);
 }
 ```
 Outputs,
@@ -773,6 +813,8 @@ Going to start keeping a log of changes starting **today (4/11/14).**
 
 ####4/24/14
 * Added `$gutter: inside` modifier
+* Adjusted `$span: 0` to hide element instead of compiling with no width
+* Corrected small issue with `less than x`, `greater than x` on fixed grids
 * Cleaned up variable/function names
 * Added detailed comments to all mixins/functions
 

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.5"
-  DATE = "2014-04-24"
+  VERSION = "1.0.6"
+  DATE = "2014-04-25"
 end
 
 # Custom functions

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

@@ -61,7 +61,7 @@
 
 		@if $calcShift != NULL and $calcContext == NULL {
 
-			@if $calcGutter == NULL and get-value(settings, gutter) != false {
+			@if $calcGutter == NULL or $calcGutter == "normal" or $calcGutter == "default" or $calcGutter == "regular" and get-value(settings, gutter) != false {
 
 				// Save to variables for instance creation
 				$outputWidth: (calc-width($calcKey, $calcSpan)) - ((calc-margin($calcKey, $calcSpan))*2);
@@ -98,7 +98,7 @@
 				@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 				@include debugPrintInstance($calcKey);
 
-			} @else if $calcGutter == "alpha" and get-value(settings, gutter) != false {
+			} @else if $calcGutter == "alpha" or $calcGutter == "no-left" and get-value(settings, gutter) != false {
 
 				$outputWidth: (calc-width($calcKey, $calcSpan)) - (calc-margin($calcKey, $calcSpan));
 				$outputMarginRight: calc-margin($calcKey, $calcSpan);
@@ -114,7 +114,7 @@
 				@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 				@include debugPrintInstance($calcKey);
 
-			} @else if $calcGutter == "omega" and get-value(settings, gutter) != false {
+			} @else if $calcGutter == "omega" or $calcGutter == "no-right" and get-value(settings, gutter) != false {
 
 				$outputWidth: (calc-width($calcKey, $calcSpan)) - ((calc-margin($calcKey, $calcSpan)));
 				$outputMarginRight: 0;
@@ -130,7 +130,7 @@
 				@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 				@include debugPrintInstance($calcKey);
 
-			} @else if $calcGutter == "row" or get-value(settings, gutter) == false {
+			} @else if $calcGutter == "row" or $calcGutter == "none" or get-value(settings, gutter) == false {
 
 				$outputWidth: (calc-width($calcKey, $calcSpan));
 				$outputMarginRight: 0;
@@ -152,7 +152,7 @@
 			$exists: get-family-instance($calcKey);
 
 			@if $calcShift != NULL {
-				@if $calcGutter == NULL and get-value(settings, gutter) != false {
+				@if $calcGutter == NULL or $calcGutter == "normal" or $calcGutter == "default" or $calcGutter == "regular" and get-value(settings, gutter) != false {
 					// Check if context is set to auto
 					@if $calcContext == "auto" {
 						// Does parent exist?
@@ -235,7 +235,7 @@
 						@include debugPrintInstance($calcKey);
 					}
 
-				} @else if $calcGutter == "alpha" and get-value(settings, gutter) != false {
+				} @else if $calcGutter == "alpha" or $calcGutter == "no-left" and get-value(settings, gutter) != false {
 
 					@if $calcContext == "auto" {
 						@if $exists != false {
@@ -274,7 +274,7 @@
 						@include debugPrintInstance($calcKey);
 					}
 
-				} @else if $calcGutter == "omega" and get-value(settings, gutter) != false {
+				} @else if $calcGutter == "omega" or $calcGutter == "no-right" and get-value(settings, gutter) != false {
 
 					@if $calcContext == "auto" {
 						@if $exists != false {
@@ -313,7 +313,7 @@
 						@include debugPrintInstance($calcKey);
 					}
 
-				} @else if $calcGutter == "row" or get-value(settings, gutter) == false {
+				} @else if $calcGutter == "row" or $calcGutter == "none" or get-value(settings, gutter) == false {
 
 					@if $calcContext == "auto" {
 						@if $exists != false {
@@ -353,7 +353,7 @@
 					}
 				}
 			} @else {
-				@if $calcGutter == NULL and get-value(settings, gutter) != false {
+				@if $calcGutter == NULL or $calcGutter == "normal" or $calcGutter == "default" or $calcGutter == "regular" and get-value(settings, gutter) != false {
 					// Check if context is set to auto
 					@if $calcContext == "auto" {
 						// Did it exist?
@@ -422,7 +422,7 @@
 						@include debugPrintInstance($calcKey);
 					}
 
-				} @else if $calcGutter == "alpha" and get-value(settings, gutter) != false {
+				} @else if $calcGutter == "alpha" or $calcGutter == "no-left" and get-value(settings, gutter) != false {
 
 					@if $calcContext == "auto" {
 						@if $exists != false {
@@ -455,7 +455,7 @@
 						@include debugPrintInstance($calcKey);
 					}
 
-				} @else if $calcGutter == "omega" and get-value(settings, gutter) != false {
+				} @else if $calcGutter == "omega" or $calcGutter =="no-right" and get-value(settings, gutter) != false {
 
 					@if $calcContext == "auto" {
 						@if $exists != false {
@@ -488,7 +488,7 @@
 						@include debugPrintInstance($calcKey);
 					}
 
-				} @else if $calcGutter == "row" or get-value(settings, gutter) == false {
+				} @else if $calcGutter == "row" or $calcGutter == "none" or get-value(settings, gutter) == false {
 
 					@if $calcContext == "auto" {
 						@if $exists != false {
@@ -525,7 +525,7 @@
 
 		} @else {
 
-			@if $calcGutter == NULL and get-value(settings, gutter) != false {
+			@if $calcGutter == NULL or $calcGutter == "normal" or $calcGutter == "default" or $calcGutter == "regular" and get-value(settings, gutter) != false {
 
 				$outputWidth: (calc-width($calcKey, $calcSpan)) - ((calc-margin($calcKey, $calcSpan))*2);
 				$outputMarginRight: calc-margin($calcKey, $calcSpan);
@@ -551,7 +551,7 @@
 				@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 				@include debugPrintInstance($calcKey);
 
-			} @else if $calcGutter == "alpha" and get-value(settings, gutter) != false {
+			} @else if $calcGutter == "alpha" or $calcGutter == "no-left" and get-value(settings, gutter) != false {
 
 				$outputWidth: (calc-width($calcKey, $calcSpan)) - (calc-margin($calcKey, $calcSpan));
 				$outputMarginRight: calc-margin($calcKey, $calcSpan);
@@ -564,7 +564,7 @@
 				@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 				@include debugPrintInstance($calcKey);
 
-			} @else if $calcGutter == "omega" and get-value(settings, gutter) != false {
+			} @else if $calcGutter == "omega" or $calcGutter == "no-right" and get-value(settings, gutter) != false {
 
 				$outputWidth: (calc-width($calcKey, $calcSpan)) - (calc-margin($calcKey, $calcSpan));
 				$outputMarginRight: 0;
@@ -577,7 +577,7 @@
 				@include newInstance ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $outputWidth, $outputMarginRight, $outputMarginLeft);
 				@include debugPrintInstance($calcKey);
 
-			} @else if $calcGutter == "row" or get-value(settings, gutter) == false {
+			} @else if $calcGutter == "row" or $calcGutter == "none" or get-value(settings, gutter) == false {
 
 				$outputWidth: calc-width($calcKey, $calcSpan);
 				$outputMarginRight: 0;

metadata

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