flint-gs 1.12.0 → 2.0.0.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 27feb34a9193caf0e861942339f0b04c24f14c3c
-  data.tar.gz: ee72437bacb40e3d7ec674db1e7f433dc1eb3a7c
+  metadata.gz: 4395d92039fd59ac3d1a014a9be9da91de0b572a
+  data.tar.gz: 7b9b29f7cdfbfad0c3222517171d1b559578e67f
 SHA512:
-  metadata.gz: ee370744e8c89a0c138671cc6d030278f12e1943db1dc58cee2566d7e2fb7275aad1c1d2e7f3b68bba226ccf3cc165ef8868a1c14fd4d66936c2ee53320b3dbf
-  data.tar.gz: 1cd39fd0bcfa508a2a4499cbd5ba38c0c66935b72ffc44ff5e3e90c991f905cbf38c1f89ef5e529ea87bd498e17bdd17cd451eba5b819379a72ec959c63c5216
+  metadata.gz: 215c6c6d3c6b81878958aa133adb5eb369ac1645b5d76ca8fc64e5cc807549cd976cb2dcff9570dda67eb2eeb2fa3f933aa2dc5125f2b0528429ac626edbf668
+  data.tar.gz: 125c5148f136d0842f6ef5496539544c549a1d313b9d8c44ca0f23d603646861018f8ea9cb487d9f9e1f07524bea416ad4bcfe21dd587e37a33eb0e8ca3f0f2c

data/README.md

@@ -2,7 +2,7 @@
 
 [![Gem Version](https://badge.fury.io/rb/flint-gs.svg)](http://badge.fury.io/rb/flint-gs)
 
-**Flint is designed to be a flexible layout toolkit that developers can use for any responsive grid-based project.** Built on Sass 3.3, Flint is capable of complex responsive layouts customized at each breakpoint; all while using a single mixin, having minimal output, as well as being completely semantic. All of your layout settings are housed in a simple config file that is immensely customizable. Flint will only output the code you need, and nothing else. We handle the  hard stuff, so you can focus on the rest.
+Flint is a responsive grid system written in Sass, created to allow developers to rapidly produce responsive layouts that are built on a sophisticated foundation. Being a designer myself, a large amount of time was spent on the syntax itself. Flint is very unique in the fact that it uses only a single mixin for all output: `_( )`. Yes, it really is just simply an underscore. Easy to remember, huh? It shoves the function mumbo-jumbo out of the way and allows us to focus on the aspect that matters most: the layout. [Check out this short introduction over at Sitepoint.com](http://www.sitepoint.com/rapid-responsive-development-sass-flint/).
 
 Take it for a spin on [SassMeister.com](http://sassmeister.com/gist/228449011362bcdfe38c)!
 
@@ -25,16 +25,14 @@ Enjoy.
 	* [Wrapping in media queries](#wrapping-in-media-queries)
 	* [Call by alias](#call-by-alias)
 	* [Gutter modifiers](#gutter-modifiers)
-	* [Shift modifiers](#shift) _[Deprecated]_
 1. [Syntax support](#syntax-support)
+1. [Support](#support)
 1. [Authors](#authors)
 1. [License](#license)
 
 ## Requirements
 
-* Sass ~> `3.3.0`
-
-_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._
+* Sass ~> `3.4.0`
 
 ## Installation
 
@@ -42,8 +40,6 @@ _Currently, Flint is only available for Ruby Sass; so it will not work with libS
 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 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
@@ -53,99 +49,66 @@ scss --require ./lib/flint.rb example.scss > example.css
 
 ### 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.
-
-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.
+Getting up and running with Flint is simple: you can either configure your own grid, or use the default grid setup that ships with Flint. Being able to quickly configure a grid was at the forefront of my goals when developing Flint; and so it offers an immense configuration map, which is essentially a Sass map of all your project’s grid settings and breakpoints. You don’t have to mess with endless variables just to get your project up and running. Instead, you just create a single variable called `$flint`:
 
 ##### Usage
 
-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.
+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. One of the immediate advantages of using Flint is that it allows you to create an unlimited number of breakpoints for your project, with any alias that you want. If you like to call your breakpoints crazy names like ‘high-tide’ or ‘ex-presidents’, that’s completely fine with me.
 
 *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 breakpoint [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. 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 [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 support-syntax [string | false] : syntax to support
-// @param debug-mode [bool] : ouputs debug properties
-// -------------------------------------------------------------------------------
-
+/**
+* Configuration map
+*
+* @prop {Map}    breakpoints                  - map of breakpoints, follow DSC order
+* @prop {Map}    breakpoints.alias            - named map of breakpoint settings
+* @prop {Number} breakpoints.alias.columns    - column count for breakpoint
+* @prop {Number} breakpoints.alias.breakpoint - breakpoint value for breakpoint
+* @prop {Map}    settings                     - map of settings for grid
+* @prop {String} settings.default             - alias of breakpoint to be grid default
+* @prop {String} settings.grid                - type of grid
+* @prop {Number} settings.gutter              - value for gutter
+* @prop {String} settings.float-direction     - direction of float
+* @prop {Bool}   settings.max-width           - maximum width value
+* @prop {Bool}   settings.max-width           - maximum width value
+* @prop {Bool}   settings.center-container    - center containers
+* @prop {Bool}   settings.border-box-sizing   - use `box-sizing: border-box`
+* @prop {Bool}   settings.instance-maps       - use instance maps for added features
+* @prop {Bool}   settings.support-syntax      - support syntax within instance functions
+* @prop {Bool}   settings.debug-mode          - enable debug mode
+*/
 $flint: (
-
-	// Grid configuration
-	"config": (
-
-		// Define breakpoints [any amount of breakpoints]
-		// Any alias you like, minus reserved Flint words [i.e. "settings", "config", etc.]
+	"breakpoints": (
 		"desktop": (
-
-			// Options: 0-infinity
 			"columns": 16,
-
-			// Options: number[unit]
-			"breakpoint": 80em,
+			"breakpoint": 80em
 		),
-
-		// Same applies for other breakpoints
-		// ----
-		// Remember, you're not fixed to just 4 breakpoints like we have here
 		"laptop": (
 			"columns": 12,
-			"breakpoint": 60em,
+			"breakpoint": 60em
 		),
 		"tablet": (
 			"columns": 8,
-			"breakpoint": 40em,
+			"breakpoint": 40em
 		),
 		"mobile": (
 			"columns": 4,
-			"breakpoint": 20em,
-		),
-
-		// Additional grid settings [required]
-		"settings": (
-
-			// 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,
-
-			// Syntax support: string | false
-			"support-syntax": false,
-
-			// Options: true | false
-			"debug-mode": false,
-		),
+			"breakpoint": 20em
+		)
 	),
+	"settings": (
+		"default": "mobile",
+		"grid": "fluid",
+		"gutter": 0.625em,
+		"float-direction": "left",
+		"max-width": true,
+		"center-container": true,
+		"border-box-sizing": true,
+		"instance-maps": true,
+		"support-syntax": false,
+		"debug-mode": false
+	)
 ) !default;
 ```
 
@@ -240,9 +203,9 @@ Outputs, *(with debug mode on)*
   -flint-context: null;
   -flint-gutter: null;
   -flint-shift: null;
-  -flint-output-width: 17.1875%;
-  -flint-output-margin-right: 0.78125%;
-  -flint-output-margin-left: 0.78125%;
+  -flint-internal-width: 17.1875%;
+  -flint-internal-margin-right: 0.78125%;
+  -flint-internal-margin-left: 0.78125%;
 }
 @media only screen and (min-width: 641px) and (max-width: 960px) {
   .recursive {
@@ -258,9 +221,9 @@ Outputs, *(with debug mode on)*
     -flint-context: null;
     -flint-gutter: null;
     -flint-shift: null;
-    -flint-output-width: 22.91667%;
-    -flint-output-margin-right: 1.04167%;
-    -flint-output-margin-left: 1.04167%;
+    -flint-internal-width: 22.91667%;
+    -flint-internal-margin-right: 1.04167%;
+    -flint-internal-margin-left: 1.04167%;
   }
 }
 @media only screen and (min-width: 321px) and (max-width: 640px) {
@@ -277,9 +240,9 @@ Outputs, *(with debug mode on)*
     -flint-context: null;
     -flint-gutter: null;
     -flint-shift: null;
-    -flint-output-width: 34.375%;
-    -flint-output-margin-right: 1.5625%;
-    -flint-output-margin-left: 1.5625%;
+    -flint-internal-width: 34.375%;
+    -flint-internal-margin-right: 1.5625%;
+    -flint-internal-margin-left: 1.5625%;
   }
 }
 @media only screen and (min-width: 0) and (max-width: 320px) {
@@ -296,9 +259,9 @@ Outputs, *(with debug mode on)*
     -flint-context: null;
     -flint-gutter: null;
     -flint-shift: null;
-    -flint-output-width: 68.75%;
-    -flint-output-margin-right: 3.125%;
-    -flint-output-margin-left: 3.125%;
+    -flint-internal-width: 68.75%;
+    -flint-internal-margin-right: 3.125%;
+    -flint-internal-margin-left: 3.125%;
   }
 }
 ```
@@ -779,111 +742,6 @@ Outputs,
 }
 ```
 
-### Shift
-
-_The `$shift` modifier has been deprecated as of `1.8.0`. It is set to be removed in version `2.0`._
-
-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
-.name {
-	@include _(12 12 8 4, $shift: 4);
-}
-
-// Shift 2 columns to the left across specified breakpoints
-.name {
-	@include _(12 12 8 4, $shift: -2 -2 0 0);
-}
-```
-
-**One more** cool thing about flint is that you are not bound to the grid you define. Feel free to use decimals and math based on the breakpoint's column count in your arguments for extra fine tuned control over your layouts. Examples include, `decimals: (1.25), (3.333)`, `math: (3 - 2), (2 + 9), (16 / 3)`.
-
-```scss
-.break-the-grid {
-	@include _(16/3 12.1 8.9 (5 - 1), $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-parent-instance: none;
-	-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-parent-instance: none;
-		-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-parent-instance: none;
-		-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-parent-instance: none;
-		-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%;
-	}
-}
-```
-
 ## Syntax support
 
 As of `1.6.0`, you can add syntax support for your preferred syntax. I built the system for BEM, but it should be easily extendable to
@@ -891,17 +749,18 @@ support your preferred syntax. Simply create a function which parses a string of
 function parses the selector string (for example, `.block__element__element`) like so,
 
 ```scss
-// Support BEM syntax
-// -------------------------------------------------------------------------------
-// @param $selectors [string] : string of selectors to parse
-// -------------------------------------------------------------------------------
-// @return [list] : parsed list of selectors according to syntax
-
+/**
+ * Parser to support BEM syntax
+ *
+ * @param {List} $selectors - string of selectors to parse
+ *
+ * @return {List} - parsed list of selectors according to syntax
+ */
 @function flint-support-syntax-bem($selectors) {
 	// Clean up selector, remove double underscores for spaces
-	//  add psudeo character to differentiate selectors
-	$selectors: flint-replace-substring($selectors, "__", "/");
-	// Parse string to list
+	//  add pseudo character to differentiate selectors
+	$selectors: flint-replace-substring(inspect($selectors), "__", "/");
+	// Parse string back to list without pseudo character
 	$selectors: flint-string-to-list($selectors, "/");
 	// Define top-most parent of selector
 	$parent: nth($selectors, 1);
@@ -922,6 +781,7 @@ function parses the selector string (for example, `.block__element__element`) li
 	// Return the list of parsed selectors
 	@return $selector-list;
 }
+
 ```
 
 This will be parsed into a list of selectors: `.block, .block__element, .block__element__element`. The list of selectors can then be used by
@@ -932,7 +792,11 @@ order to parse the selector string.
 #### Officially supported syntaxes
 * [BEM](http://bem.info/)
 
-If you make one that isn't here, let me know and I'll look into officially supporting it.
+If you use one that isn't here, let me know and I'll look into officially supporting it.
+
+## Support
+
+You can tweet [@FlintGrid](https://twitter.com/FlintGrid) with any questions or issues and I'll look into it. Be sure to include a [Gist](https://gist.github.com) or a [SassMeister](http://sassmeister.com) link.
 
 ## Authors
 

data/lib/flint.rb

@@ -10,8 +10,8 @@ else
 end
 
 module Flint
-    VERSION = "1.12.0"
-    DATE = "2014-08-29"
+    VERSION = "2.0.0.rc.1"
+    DATE = "2014-09-12"
 end
 
 # Custom functions
@@ -23,12 +23,12 @@ module Sass::Script::Functions
         Sass::Script::Bool.new(true)
     end
 
-    # Returns stringified selector
-    # ----
-    # @return [string]
-    def selector_string()
-        Sass::Script::String.new(environment.selector.to_s)
-    end
+    # # Returns stringified selector
+    # # ----
+    # # @return [string]
+    # def selector_string()
+    #     Sass::Script::String.new(environment.selector.to_s)
+    # end
 
     # Turns string into a flat list
     # ----

data/stylesheets/_flint.scss

@@ -1,5 +1,6 @@
-// Flint
-// ----
+/*
+ * Flint
+ */
 @import "flint/config/config";
 @import "flint/functions/functions";
 @import "flint/globals/globals";

data/stylesheets/flint/config/_config.scss

@@ -1,83 +1,52 @@
-// Configuration map
-// -------------------------------------------------------------------------------
-// @param breakpoint [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. 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 [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 support-syntax [string | false] : syntax to support
-// @param debug-mode [bool] : ouputs debug properties
-// -------------------------------------------------------------------------------
-
+/**
+ * Configuration map
+ *
+ * @prop {Map}    breakpoints                  - map of breakpoints, follow DSC order
+ * @prop {Map}    breakpoints.alias            - named map of breakpoint settings
+ * @prop {Number} breakpoints.alias.columns    - column count for breakpoint
+ * @prop {Number} breakpoints.alias.breakpoint - breakpoint value for breakpoint
+ * @prop {Map}    settings                     - map of settings for grid
+ * @prop {String} settings.default             - alias of breakpoint to be grid default
+ * @prop {String} settings.grid                - type of grid
+ * @prop {Number} settings.gutter              - value for gutter
+ * @prop {String} settings.float-direction     - direction of float
+ * @prop {Bool}   settings.max-width           - maximum width value
+ * @prop {Bool}   settings.max-width           - maximum width value
+ * @prop {Bool}   settings.center-container    - center containers
+ * @prop {Bool}   settings.border-box-sizing   - use `box-sizing: border-box`
+ * @prop {Bool}   settings.instance-maps       - use instance maps for added features
+ * @prop {Bool}   settings.support-syntax      - support syntax within instance functions
+ * @prop {Bool}   settings.debug-mode          - enable debug mode
+ */
 $flint: (
-
-    // Grid configuration
-    "config": (
-
-        // Define breakpoints [any amount of breakpoints]
-        // Any alias you like, minus reserved Flint words [i.e. "settings", "config", etc.]
+    "breakpoints": (
         "desktop": (
-
-            // Options: 0-infinity
             "columns": 16,
-
-            // Options: number[unit]
-            "breakpoint": 80em,
+            "breakpoint": 80em
         ),
-
-        // Same applies for other breakpoints
-        // ----
-        // Remember, you're not fixed to just 4 breakpoints like we have here
         "laptop": (
             "columns": 12,
-            "breakpoint": 60em,
+            "breakpoint": 60em
         ),
         "tablet": (
             "columns": 8,
-            "breakpoint": 40em,
+            "breakpoint": 40em
         ),
         "mobile": (
             "columns": 4,
-            "breakpoint": 20em,
-        ),
-
-        // Additional grid settings [required]
-        "settings": (
-
-            // 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,
-
-            // Syntax support: string | false
-            "support-syntax": false,
-
-            // Options: true | false
-            "debug-mode": false,
+            "breakpoint": 20em
         )
+    ),
+    "settings": (
+        "default": "mobile",
+        "grid": "fluid",
+        "gutter": 0.625em,
+        "float-direction": "left",
+        "max-width": true,
+        "center-container": true,
+        "border-box-sizing": true,
+        "instance-maps": true,
+        "support-syntax": false,
+        "debug-mode": false
     )
 ) !default;