flint-gs 1.3.6 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6d634d2596ab6f3aa67f9fe262a32561c71fdd01
-  data.tar.gz: e37a7f913e9446345993ffdfda2af406110d1c25
+  metadata.gz: 4fe5b9e2c39e010d685a44b3e5aa5d3b55b04322
+  data.tar.gz: 4bf01de85d73743b890317fd08246dc57149cd4e
 SHA512:
-  metadata.gz: 2f78b6604a1f92b16fdce75fd8330ade50b6e2b5cc82cd70080b929ce6fc3b7aa512f7fbb257091ba135009263d5bcf2b346947f5f0fe69f4255ab0e6383c0ab
-  data.tar.gz: f27df87a21beea5e8cae0fb27d23928b43fb9448790d2c243b78980ea3feaaf00dd235a8566bed329c60efd548cce65cf305ae0812e404f0dd338140091ea40f
+  metadata.gz: 38fc91877f9c8a18fbaf4f487fee66412d26df390f6566e5b61ac82d98aa38cf1c4f611e11965b60bb5742d892097124c29865a09785d4ef42094d5501f6f003
+  data.tar.gz: f06b0d3af65caac112d92ae5210f4016f89157b5195939baac98126a47ab7d9198bb66565acff026f0a74d9a8f0c7afb0cca49fa9e995c960ce30cff479b9184

data/README.md

@@ -9,7 +9,7 @@ Enjoy.
 ##Requirements
 
 * Sass ~> 3.3.0
-* Compass ~> 0.12.1
+* Compass ~> 1.0.0.alpha.19
 
 ##Installation
 
@@ -23,45 +23,53 @@ If you don't want to install the gem (?!), download/clone the current build file
 
 ###Config
 
-Flint's `config map` is unique in the ability that you may define an unlimited number of breakpoints for your project. Whether that be 2 breakpoints, or even 12 breakpoints. Flint gives you full control over the column count on each breakpoint, and unlike most frameworks, you may name these anything that you like. Flint is smart and will figure out which one you're talking about.
+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.
+####Usage
 
-Settings may be entered in `px` or `em`, and Flint will do the rest.
+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. 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
 //--------------------------------------------------------------------------------
 // @param [map] : 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. The order does have
+// to follow a `DESC` order. Unit (px | em) chosen here must be used consistently
 // throughout the rest of the config map.
 //--------------------------------------------------------------------------------
 // @param default [string] : alias of breakpoint that is your grid default
 // @param grid [string] : style of grid
-// @param gutter [integer | false] : contextual size of gutter
-// @param float-style [integer | false] : float direction
-// @param max-width [integer | bool] : max-width for `containers`
+// @param gutter [number | false] : contextual size of gutter
+// @param float-style [number | false] : float direction
+// @param max-width [number | bool] : max-width for containers
 // @param center-container [bool] : if you want a centered container
 // @param border-box-sizing [bool] : if you want box-sizing: border-box applied
 // @param debug-mode [bool] : ouputs debug properties
 // -------------------------------------------------------------------------------
 
 $flint: (
-    // grid configuration
+
+    // Grid configuration
     "config": (
-        // 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)]
+
+        // Define breakpoints (any amount of breakpoints)
+        // Any alias you like, minus reserved Flint words (i.e. "settings", "config", etc.)
+        "desktop": (
+
+            // Options: 0-infinity
+            "columns": 16,
+
+            // Options: value(unit)
+            "breakpoint": 1280px,
         ),
+
+        // Same applies for other breakpoints
+        // Remember, you're not fixed to just 4 breakpoints like we have here
         "laptop": (
             "columns": 12,
             "breakpoint": 960px,
@@ -74,16 +82,33 @@ $flint: (
             "columns": 4,
             "breakpoint": 320px,
         ),
-        // additional grid settings [required]
+
+        // Additional grid settings (required)
         "settings": (
-            "default": "mobile", // [any breakpoint's alias]
-            "grid": "fluid", // [fluid | fixed]
-            "gutter": 10px, // [0-infinity(unit) | false]
-            "float-style": "left", // [left | right]
-            "max-width": true, // [true : uses highest breakpoint | false | value(unit)]
-            "center-container": true, // [true | false]
-            "border-box-sizing": true, // [true | false]
-            "debug-mode": false, // [true | false ]
+
+            // Any breakpoint's alias
+            "default": "mobile",
+
+            // Options: fluid | fixed
+            "grid": "fluid",
+
+            // Options: value(unit)
+            "gutter": 10px,
+
+            // Options: left | right
+            "float-style": "left",
+
+            // Options: true (uses highest breakpoint) | false | value(unit)
+            "max-width": true,
+
+            // Options: true | false
+            "center-container": true,
+
+            // Options: true | false
+            "border-box-sizing": true,
+
+            // Options: true | false
+            "debug-mode": false,
         ),
     ),
 );
@@ -91,13 +116,13 @@ $flint: (
 
 ###Foundation
 
-If you selected `border-box-sizing: true`, then it is *advised* to create a global foundation instance like so,
+If you selected `"border-box-sizing": true`, then it is *advised* to create a global foundation instance like so,
 
 ```scss
 @include _(foundation);
 ```
 
-That way your output won't be riddled with `"box-sizing"` declarations everytime you define a span. This will automatically output the rules onto the global selector `*`. In the future this might be automatic, but for now I'll keep it manual.
+That way your output won't be riddled with `box-sizing` declarations everytime you define a span. This will automatically output the rules onto the global selector `*`. In the future this might be automatic, but for now I'll keep it manual.
 
 ###Container
 
@@ -270,8 +295,8 @@ 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 
+// 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.
 ```
 
@@ -677,7 +702,7 @@ Outputs,
 
 ###Shift
 
-Much like the gutter modifiers, you may also call in a shift parameter using the `$shift` variable. This will cause the element to shift the desired amount of columns using positive/negative left margins. 
+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
@@ -785,7 +810,7 @@ Due to the way **BEM** is written, the instance functions cannot fallback to pre
 ```scss
 .block {
 	@include _(4);
-	
+
 	&__element {
 		@include _(2, auto);
 	}
@@ -797,7 +822,7 @@ Will result in a` @warning`, and will not compile correctly as `.block` and `.bl
 ```scss
 .block {
 	@include _(4);
-	
+
 	.block__element {
 		@include _(2, auto);
 	}
@@ -820,78 +845,17 @@ This will allow the instance functions to properly fallback from `.block .block_
 ```scss
 .block {
 	@include _(4);
-	
+
 	&__element {
 		@include _(2, 4);
 	}
 }
 ```
 
-##Change Log
-
-Going to start keeping a log of changes starting (4/11/14).**
-
-####6/11/14
-* Cleaning house. Cleaned up function definitions and documentation, quoted all strings, and overall just made the code more tidy.
-
-####5/20/14
-* Fixed issue with `(for x y z)` loop not outputting correct breakpoints due to an invalid if statement.
-
-####5/19/14
-* Fixed issue with comma seperated parent selectors causing errors and other issues.
-	* Added small clean up functions for comma seperated selector strings for various functions.
-
-####5/16/14
-* Added `$context: auto` to for fixed grids. It will automatically get the parent instance's width, and calculate on that instead of the base breakpoint.
-	* This fixes issues where parents couldn't contain children of the same span, and the further you would nest, the worse the issue would get.
-
-####5/14/14
-* Fixed issue with `_(greater than y)` not outputting the correct calculations on `fixed` grids
-	* Issue was that when you used for example: `_(greater than laptop)`, `laptop` would actually be included, instead of ommitted. It now acts as 'anything above laptops breakpoint', the same way `less than y` works.
-* Adjusted the way breakpoints are calculated for easier modifications moving forward.
-* Optimized `calc-breakpoint()` function
-
-####5/09/14
-* Added ability to pass an abitrary `$context` while maintaining a consistent gutter
-* Small changes to `debug-mode`
-	* Added parent instance selector to output
-	* Added actual `$context` in place of `auto` in output
-
-####5/02/14
-* Adjusted `$length` variable in `string-to-list()` for better performance.
-* Added 2 additional aliases for `$gutter` modifiers
-	* `alpha > first`
-	* `omega > last`
-
-####4/30/14
-* Fixed issue with comma separated child selectors throwing an error. `Fixes #5`
-
-####4/25/14
-* Added aliases for `$gutter` modifiers
-	* `null > default | regular | normal`
-	* `alpha > no-left`
-	* `omega > no-right`
-	* `row > none`
-* Removed option for `gutter: false` in config. Use `0(unit)` from now on.
-
-####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
-
-####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.
-
-####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.
-
+## Authors
 
+[Ezekiel Gabrielse](http://ezekielg.com)
 
+## License
 
+Flint is available under the [MIT](http://opensource.org/licenses/MIT) license.

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.3.6"
-  DATE = "2014-06-11"
+  VERSION = "1.4.0"
+  DATE = "2014-06-26"
 end
 
 # Custom functions
@@ -14,4 +14,4 @@ module Sass::Script::Functions
 	def selector_string()
 		return Sass::Script::String.new(environment.selector.to_s)
 	end
-end
+end

data/stylesheets/flint/config/_config.scss

@@ -2,50 +2,78 @@
 //--------------------------------------------------------------------------------
 // @param [map] : 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. The order does have
+// to follow a `DESC` order. Unit (px | em) chosen here must be used consistently
 // throughout the rest of the config map.
 //--------------------------------------------------------------------------------
 // @param default [string] : alias of breakpoint that is your grid default
 // @param grid [string] : style of grid
-// @param gutter [integer | false] : contextual size of gutter
-// @param float-style [integer | false] : float direction
-// @param max-width [integer | bool] : max-width for `containers`
+// @param gutter [number | false] : contextual size of gutter
+// @param float-style [number | false] : float direction
+// @param max-width [number | bool] : max-width for containers
 // @param center-container [bool] : if you want a centered container
 // @param border-box-sizing [bool] : if you want box-sizing: border-box applied
 // @param debug-mode [bool] : ouputs debug properties
 // -------------------------------------------------------------------------------
 
 $flint: (
-    // grid configuration
+
+    // Grid configuration
     "config": (
-        // 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)]
+
+        // Define breakpoints [any amount of breakpoints]
+        // Any alias you like, minus reserved Flint words [i.e. "settings", "config", etc.]
+        "desktop": (
+
+            // Options: 0-infinity
+            "columns": 16,
+
+            // Options: number[unit]
+            "breakpoint": 80em,
         ),
+
+        // Same applies for other breakpoints
+        // ----
+        // Remember, you're not fixed to just 4 breakpoints like we have here
         "laptop": (
             "columns": 12,
-            "breakpoint": 960px,
+            "breakpoint": 60em,
         ),
         "tablet": (
             "columns": 8,
-            "breakpoint": 640px,
+            "breakpoint": 40em,
         ),
         "mobile": (
             "columns": 4,
-            "breakpoint": 320px,
+            "breakpoint": 20em,
         ),
-        // additional grid settings [required]
+
+        // Additional grid settings [required]
         "settings": (
-            "default": "mobile", // [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": false, // [true | false ]
+
+            // Any breakpoint's alias
+            "default": "mobile",
+
+            // Options: fluid | fixed
+            "grid": "fluid",
+
+            // Options: number[unit]
+            "gutter": 0.625em,
+
+            // Options: left | right
+            "float-style": "left",
+
+            // Options: true [uses highest breakpoint] | false | number[unit]
+            "max-width": true,
+
+            // Options: true | false
+            "center-container": true,
+
+            // Options: true | false
+            "border-box-sizing": true,
+
+            // Options: true | false
+            "debug-mode": false,
         ),
     ),
-) !default;
+) !default;

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

@@ -30,7 +30,7 @@
 
 // Checks if item is number
 //--------------------------------------------------------------------------------
-// @param $n [integer] : value
+// @param $n [number] : value
 // -------------------------------------------------------------------------------
 // @return [bool]
 
@@ -64,7 +64,7 @@
 
 @function get-all-keys() {
 	$all-keys: ();
-  
+
 	@for $i from 1 through (length(map-fetch($flint, "config")) - 1) {
 		$key: steal-key($i);
 		$all-keys: append($all-keys, $key, "comma");
@@ -86,7 +86,7 @@
 				$all-breakpoints: append($all-breakpoints, $value, "comma");
 			}
 		}
-	} 
+	}
 
 	@return $all-breakpoints;
 }
@@ -155,4 +155,24 @@
 	}
 
 	@return $all-columns;
-}
+}
+
+// Returns the unit used in config
+// -------------------------------------------------------------------------------
+// @return [bool]
+
+@function get-config-unit() {
+	@return unit(get-value("settings", "gutter"));
+}
+
+// Convert pixel value to em
+// -------------------------------------------------------------------------------
+// @param $target [num] : pixel value
+// @param $context [num] : context to divide by
+// -------------------------------------------------------------------------------
+// @return : em value of $target relative to $context
+// -------------------------------------------------------------------------------
+
+@function em($target, $context: $flint__base-font-size) {
+	@return ($target / $context) * 1em;
+}

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

@@ -8,7 +8,7 @@
 // -------------------------------------------------------------------------------
 // @param $n [string] : how to calculate breakpoint 
 // @param $key [string] : key of breakpoint
-// @param $i [integer] : index of current breakpoint
+// @param $i [number] : index of current breakpoint
 // -------------------------------------------------------------------------------
 // @return calculated value