		{
		"name": "gridle",
		"version": "1.3.40",
		"version": "2.0.0",
		"authors": [
		@@ -24,3 +24,5 @@ "Olivier Bossel <olivier.bossel@gmail.com>"
		"tests"
		]
		],
		"dependencies": {
		}
		}

doc/00.get-started.md

		@@ -1,8 +0,32 @@
		Get Started
		-------------------
		## Get Started

		Below is the basic usage of gridle and how to use it in your own project. From here you can make adjustments to the setup and states to suit your specific needs.

		### _settings.scss
		### Installation

		To install gridle in your project, you can use one of these options

		```
		$ npm install gridle
		```

		```
		$ bower install gridle
		```

		```
		$ gem install gridle
		```

		Or simply by downloading the package :
		[Download the package](http://google.com)

		### Files structure

		This is the file structure that we use in our project. Feel free to adapt this depending on your needs...

		#### _settings.scss

		This file contains all your grid setup instructions.

		```scss
		@@ -35,4 +59,6 @@ // import gridle

		### grid.scss
		#### grid.scss

		This file will be your actual grid classes. You need to import the settings and use the gridle_generate_classes mixin in order to get your classes.

		```scss
		@@ -52,14 +78,16 @@ // import settings :

		### index.html
		#### index.html

		Here's how you use your grid classes in your html.

		```markup
		<!-- If want to use mixins, no need to add classes -->
		<div class="container">
		<div class="grid-12" id="header">
		<div class="gr-12" id="header">
		I'm the header, 12 columns width
		</div>
		<div class="grid-8 grid-mobile-12" id="content">
		<div class="gr-8 gr-12@mobile" id="content">
		I'm the content, 8 columns width, but 12 on mobile
		</div>
		<div class="grid-4 grid-mobile-12" id="sidebar">
		<div class="gr-4 gr-12@mobile" id="sidebar">
		I'm the sidebar, 4 columns width, but 12 on mobile
		@@ -71,4 +99,6 @@ </div>

		### style.css
		#### style.css

		In your style.scss file, you need also to include the settings, then you can use all the gridle mixins inside your code like so:

		```scss
		@@ -79,12 +109,13 @@ // import settings :
		#header {
		@include gridle ( 12 );
		@include gridle_grid ( 12 );
		}
		#content {
		@include gridle ( 8 );
		@include gridle ( 12 , 'mobile' );
		@include gridle_grid ( 8 );
		@include gridle_state ( mobile ) {
		@include gridle_grid ( 12 );
		}
		}
		#sidebar {
		// sidebar will make 4 columns width
		@include gridle ( 4 );
		@include gridle ( 12 , mobile );
		@include gridle_grid ( 4 );
		background : yellow ;
		@@ -91,0 +122,0 @@

doc/01.setup.md

		@@ -1,4 +0,7 @@
		Setup
		------------------
		## Setup

		Gridle is a fully customizable grid system. To do that, you have to configure your grid with simple options.

		### Configure your grid

		In order for Gridle to work, the `gridle_setup()` mixin needs to be run. This is where you can pass core configuration variables like the amount of columns (context) and the width of the gutter.
		@@ -12,8 +15,15 @@
		```scss
		// default settings
		$settings : (
		context : 12, // number of columns in your grid
		gutter-width : 20px, // size of the gutters
		direction : ltr, // direction
		name-multiplicator : 1 // to generate like grid-5, grid-10, etc...
		// and more... (see in advanced settings section)
		gutter-width : 20px, // size of the gutters
		gutter-height : 0, // size of top and bottom gutters
		gutter-top : 0, // size of top gutter
		gutter-bottom : 0, // size of bottom gutter
		gutter-left : 10px, // size of left gutter
		gutter-right : 10px, // size of right gutter
		direction : ltr, // direction
		states-classes : false, // if we need to generate the states classes
		name-multiplicator : 1, // if 5, generate gr-5, gr-10, etc...
		classes-prefix : '' // the prefix used for all classes
		);
		@@ -23,2 +33,17 @@ @include gridle_setup($settings);

		You need to specify only the settings that you want to override

		> Make sure that your states do not have the same name as a gridle option like gutter-width...


		### Choose a driver

		Gridle offer you multiple drivers that you can choose. The default one will make your grid work with float, etc... and the flex one will use flexbox to layout your grid. All this power behind same and simple classes.

		```scss
		// default
		@import 'gridle/gridle';

		// flex
		@import 'gridle/gridle-flex';
		```

doc/03.mobile-first.md

		@@ -1,3 +0,2 @@
		Mobile First
		----------------
		## Mobile First

		@@ -35,5 +34,5 @@ Gridle is the perfect fit for your mobile first projects. Here how you can start :
		```scss
		[class*="grid-"] {
		[class*="gr-"] {
		@include gridle_state( xs ) {
		width:100%;
		@include gridle_grid( 12 );
		}
		@@ -40,0 +39,0 @@ }

505

doc/04.classes.md

		@@ -1,3 +0,2 @@
		Classes
		----------------
		## Classes

		@@ -7,31 +6,40 @@ When you're happy with your custom grid system, Gridle will provide you with multiple types of classes. Here's the list:

		### Grid Classes
		### Container

		These are the base classes of the grid system. The root class is the container, which contains all the classes: grid-1, grid-2, grid-3 and so on.
		The container class is not really needed but it's a best practice to wrap all your rows into it so you can define a max-width for your entire grid at once like so

		```fn
		.container
		.grid-{columns-count}
		.grid-{state}-{columns-count}
		```

		```markup
		<div class="container">
		<div class="grid-8">
		I make 8 columns width
		<body>
		<div class="container">
		<div class="row">
		...
		</div>
		</div>
		<div class="grid-4">
		I make 4 columns width
		</div>
		</div>
		```

		```scss
		// somewhere in your scss
		.container {
		max-width: 960px;
		margin: 0 auto;
		}
		```

		### Grid Parent Class (nested grids)

		This class has to be applied on a grid-x element that will contains a nested grid.
		### Row

		The row class is the one that will wrap all your grid columns.

		```fn
		.parent
		.parent-{state}
		.row
		.row@{state}

		// flex driver
		.col
		.col@{state}
		```
		@@ -41,27 +49,74 @@
		<div class="container">
		<div class="grid-8 parent">
		<div class="grid-4 grid-mobile-12">
		I'm a nested column
		<div class="row">
		<div class="gr-6">
		...
		</div>
		<div class="grid-4 grid-mobile-12">
		I'm a nested column
		<div class="gr-6">
		...
		</div>
		<div class="grid-4 grid-mobile-12">
		I'm a nested column
		</div>
		</div>
		<div class="grid-4">
		I make 4 columns width
		</div>
		```


		### Row align

		Gridle allows you to align your grid elements into a row by setting the alignement class on the row itself like this.

		```fn
		.row-align-left
		.row-align-left@{state}
		.row-align-center
		.row-align-center@{state}
		.row-align-middle
		.row-align-middle@{state}
		.row-align-top
		.row-align-top@{state}
		.row-align-middle
		.row-align-middle@{state}
		.row-align-bottom
		.row-align-bottom@{state}

		// flex driver
		.row-align-around
		.row-align-around@{state}
		.row-align-between
		.row-align-between@{state}
		```

		```markup
		<div class="row row-align-middle row-align-center">
		<div class="gr-4">
		I'm the tallest element in the line
		<br />
		cause of this line
		<br />
		and this one...
		<br />
		and this one...
		</div>
		<div class="gr-4">
		I will be vertically centered cause I'm the smallest
		</div>
		<div class="gr-6">
		I will be also vertically centered cause I'm not so tall...
		<br />
		Even with this line...
		</div>
		</div>
		```

		These classes apply a font-size of 0 on the parent itself and a font-size of 1rem on the direct childs. This is to avoid the display:inline-block space thing... You have to set your font on the html tag for this to work fine...

		### Clear Each Class NEW
		> When using this, the direction parameter will not have any effect anymore...
		> These classes have to be applied on a parent/container element that has direct gr- childs

		This mixin will make all the {x}n+1 direct child clear itself automatically.

		### Row full

		This class allows you to make a particular row take the entire screen width without having to close all your container and row elements

		```fn
		.clear-each-{x}
		.clear-each-{state}-{x}
		.row-full
		.row-full@{state}
		```
		@@ -71,27 +126,45 @@
		<div class="container">
		<div class="grid-6 parent clear-each-2">
		<div class="grid-6">
		I have a different height of my neighbour
		<br />
		cause of this line
		<br />
		and this one....
		<div class="row">
		<div class="gr-6">
		...
		</div>
		<div class="grid-6">
		I have a different height of my neighbour
		<div class="gr-6">
		...
		</div>
		<div class="grid-6">
		I have a different height of my neighbour
		</div>
		<div class="row row-full">
		<div class="gr-4">
		...
		</div>
		<div class="grid-6">
		I have a different height of my neighbour
		<br />
		cause of this line
		<br />
		and this one....
		<div class="gr-4">
		...
		</div>
		<div class="gr-4">
		...
		</div>
		</div>
		<div class="grid-6">
		</div>
		```


		### Row reverse (flex driver)

		This class allows you to reverse the order of your grid items. This work for the flex driver

		```fn
		.row-reverse
		.row-reverse@{state}
		```

		```markup
		<div class="row row-reverse">
		<div class="gr-4">
		I will be displayed as the last item
		</div>
		<div class="gr-4">
		I will be displayed as the second item
		</div>
		<div class="gr-4">
		I will be displayed as the first item
		</div>
		</div>
		@@ -101,17 +174,76 @@ ```

		### Centered Grid Class
		### Grid

		This class has to be applied on a grid-x element and will center the column.
		These are your actual grid columns.

		```fn
		.centered
		.centered-{state}
		.gr-{columns-count}
		.gr-{columns-count}@{state}
		```

		```markup
		<div class="container">
		<div class="grid-8 centered">
		<div class="row">
		<div class="gr-8">
		I make 8 columns width
		</div>
		<div class="gr-4">
		I make 4 columns width
		</div>
		</div>
		```


		### Grid adapt / grow

		This class allows you to tell a grid column to adapt his width depending on his content

		```fn
		.gr-adapt
		.gr-adapt@{state}
		.gr-grow
		.gr-grow@{state}
		```

		```markup
		<div class="row nowrap wrap@mobile">
		<div class="gr-adapt gr-12@mobile">
		<img src="..." />
		</div>
		<div class="gr-grow gr-12@mobile">
		I will grow to take all the remaining space
		</div>
		</div>

		<!-- default driver hack only -->
		<div class="row nowrap wrap@mobile">
		<div class="gr-adapt gr-6@mobile">
		<img src="..." />
		</div>
		<div class="gr-5 gr-table gr-6@mobile">
		I have the gr-table class to fix display issue
		</div>
		<div class="gr-grow gr-12@mobile">
		I will grow to take all the remaining space
		</div>
		</div>
		```

		> Note the nowrap class on the row that tell the grid to not allow for content to go on a new line and the wrap@mobile class that allow the content have line break as wanted


		### Grid centered

		This class has to be applied on a gr-x element and will center the column.

		```fn
		.gr-centered
		.gr-centered@{state}
		```

		```markup
		<div class="row">
		<div class="gr-8 gr-centered">
		This column will be centered
		</div>
		<div class="grid-8 centered-tablet">
		<div class="gr-8 gr-centered@tablet">
		This column will be centered only on tablet
		@@ -123,33 +255,25 @@ </div>

		### Vertical Aligned Grid Items BETA
		### Grid order (flex driver)

		Gridle allows you to align vertically your grid elements based on his neighbours in the same line. This has to be used with caution and you must test if it fit your particular need.
		These classes will allows you to reorder your grid items. If you have setup your grid with 12 columns, you will have 12 classes like gr-order-1, gr-order-2, ..., gr-order-12.

		```fn
		.vertical-align-top
		.vertical-align-top-{state}
		.vertical-align-middle
		.vertical-align-middle-{state}
		.vertical-align-bottom
		.vertical-align-bottom-{state}
		.order-{columns-count}
		.order-{columns-count}@{state}
		.order-first
		.order-first@{state}
		.order-last
		.order-last@{state}
		```

		```markup
		<div class="parent vertical-align-middle">
		<div class="grid-4">
		I'm the tallest element in the line
		<br />
		cause of this line
		<br />
		and this one...
		<br />
		and this one...
		<div class="row">
		<div class="gr-6 order-last">
		I will be the last displayed
		</div>
		<div class="grid-4">
		I will be vertically centered cause I'm the smallest
		<div class="gr-3 order-1">
		I will be the first displayed
		</div>
		<div class="grid-6">
		I will be also vertically centered cause I'm not so tall...
		<br />
		Even with this line...
		<div class="gr-3">
		I will be the second displayed
		</div>
		@@ -159,10 +283,5 @@ </div>

		These classes apply a font-size of 0 on the parent itself and a font-size of 1rem on the direct childs. This is to avoid the display:inline-block space thing... You have to set your font on the html tag for this to work fine...

		> When using this, the direction parameter will not have any effect anymore...
		> These classes have to be applied on a parent/container element that has direct grid- childs
		### Push & Pull


		### Push & Pull Classes

		The push and pull classes are used to offset the grid's elements or even swap two of them for SEO purposes. The HTML structure will not be altered.
		@@ -172,18 +291,20 @@
		.push-{columns-count}
		.push-{state}-{columns-count}
		.push-{columns-count}@{state}
		.pull-{columns-count}
		.pull-{state}-{columns-count}
		.pull-{columns-count}@{state}
		```

		```markup
		<div class="grid-8 push-4">
		I make 8 columns width and offset 4 columns to the right
		<div class="row">
		<div class="gr-8 push-4">
		I make 8 columns width and offset 4 columns to the right
		</div>
		<div class="gr-4 pull-9">
		I make 4 columns width and offset 8 columns to the left
		</div>
		</div>
		<div class="grid-4 pull-9">
		I make 4 columns width and offset 8 columns to the left
		</div>
		```


		### Prefix & Suffix Classes
		### Prefix & Suffix

		@@ -194,13 +315,38 @@ The prefix and suffix classes are used to create blanks before or after a grid element.
		.prefix-{columns-count}
		.prefix-{state}-{columns-count}
		.prefix-{columns-count}@{state}
		.suffix-{columns-count}
		.suffix-{state}-{columns-count}
		.suffix-{columns-count}@{state}
		```

		```markup
		<div class="grid-8 suffix-2">
		I make 8 columns width and I have 2 columns of dead space to my right
		<div class="row">
		<div class="gr-8 suffix-2">
		I make 8 columns width and I have 2 columns of dead space to my right
		</div>
		<div class="gr-4 prefix-2">
		I make 4 columns width and I have 2 columns of dead space to my left
		</div>
		</div>
		<div class="grid-4 prefix-2">
		I make 4 columns width and I have 2 columns of dead space to my left
		```


		### Wrap / nowrap

		This classes are useful to specify on a wrapper that the direct children can or cannot wrap themselves

		```fn
		.wrap
		.wrap@{state}
		.nowrap
		.nowrap@{state}
		```

		```markup
		<div class="row nowrap wrap@mobile">
		<div class="gr-adapt gr-12@mobile">
		...
		</div>
		<div class="gr-grow gr-12@mobile">
		...
		</div>
		</div>
		@@ -210,4 +356,43 @@ ```

		### Hide, show, ... Classes
		### Clear Each (default driver)

		This mixin will make all the {x}n+1 direct child clear itself automatically.

		```fn
		.clear-each-{x}
		.clear-each-{x}@{state}
		```

		```markup
		<div class="row clear-each-2">
		<div class="gr-6">
		I'm a content
		</div>
		<div class="gr-6">
		I'm a content
		</div>
		<div class="gr-6">
		I'm a content
		</div>
		<div class="gr-6">
		I'm a content
		</div>
		</div>
		```

		In order to have these classes, you need to register them before like so :

		```fn
		@include gridle_register_clear_each( {clearEach} , {clearWhat} : both );
		```

		```scss
		// in your _settings.scss file
		@include gridle_register_clear_each(2, both);
		@include gridle_register_clear_each(3, left);
		```


		### Hide, show, ...

		These classes are used to hide, show or set to “visibility" to some elements for certain states (cf. States)
		@@ -221,23 +406,25 @@
		.visible
		.hide-{state}
		.show-{state}
		.show-inline-{state}
		.not-visible-{state}
		.visible-{state}
		.hide@{state}
		.show@{state}
		.show-inline@{state}
		.not-visible@{state}
		.visible@{state}
		```

		```markup
		<div class="grid-8 hide-tablet">
		I'm not display (display:none) on "tablet" state
		<div class="row">
		<div class="gr-8 hide@tablet">
		I'm not display (display:none) on "tablet" state
		</div>
		<div class="gr-4 not-visible@mobile">
		I'm not visible (visibility:hidden) on "mobile" state
		</div>
		<div class="gr-12 hide visible@mobile">
		I'm hided by default but displayed on mobile
		</div>
		</div>
		<div class="grid-4 not-visible-mobile">
		I'm not visible (visibility:hidden) on "mobile" state
		</div>
		<div class="grid-12 hide visible-mobile">
		I'm hided by default but displayed on mobile
		</div>
		```


		### Float Classes
		### Float

		@@ -249,9 +436,11 @@ These classes are used to make float some elements for certain states (cf. States)
		.float-right
		.float-{state}-left
		.float-{state}-right
		.float-left@{state}
		.float-right@{state}
		```

		```markup
		<div class="grid-8 float-right float-mobile-left">
		I'm a div that float right normally, but left on mobile
		<div class="row">
		<div class="gr-8 float-right float-left@mobile">
		I'm a div that float right normally, but left on mobile
		</div>
		</div>
		@@ -261,3 +450,3 @@ ```

		### Clear Classes
		### Clear

		@@ -270,10 +459,12 @@ These classes are used to clear float on some elements for certain states (cf. States)
		.clear-right
		.clear-{state}
		.clear-{state}-left
		.clear-{state}-right
		.clear@{state}
		.clear-left@{state}
		.clear-right@{state}
		```

		```markup
		<div class="grid-8 clear-right clear-mobile-left">
		I'm a div that clear right normally, but left on mobile
		<div class="row">
		<div class="gr-8 clear-right clear-left@mobile">
		I'm a div that clear right normally, but left on mobile
		</div>
		</div>
		@@ -283,3 +474,3 @@ ```

		### Gutters Classes
		### Gutters

		@@ -294,7 +485,7 @@ These classes are used to delete the gutters on certain columns for certain states (cf. States)
		.no-gutter-bottom
		.no-gutter-{state}
		.no-gutter-{state}-left
		.no-gutter-{state}-right
		.no-gutter-{state}-top
		.no-gutter-{state}-bottom
		.no-gutter@{state}
		.no-gutter-left@{state}
		.no-gutter-right@{state}
		.no-gutter-top@{state}
		.no-gutter-bottom@{state}

		@@ -306,12 +497,14 @@ .gutter
		.gutter-bottom
		.gutter-{state}
		.gutter-{state}-left
		.gutter-{state}-right
		.gutter-{state}-top
		.gutter-{state}-bottom
		.gutter@{state}
		.gutter-left@{state}
		.gutter-right@{state}
		.gutter-top@{state}
		.gutter-bottom@{state}
		```

		```markup
		<div class="grid-8 no-gutter-mobile">
		No gutters on mobile
		<div class="row">
		<div class="gr-8 no-gutter@mobile">
		No gutters on mobile
		</div>
		</div>
		@@ -321,2 +514,40 @@ ```

		> Secret : The word "margin" instead of "gutter" work too...
		### Row debug

		The debug-row class allows you to display the columns as an overlay.

		```fn
		.row-debug
		.row-debug@{state}
		```

		```markup
		<div class="row row-debug">
		...
		</div>
		```


		### Custom classes

		Gridle allows you to generate your own classes available in all the registered states. You can do this like so :

		```fn
		@include gridle_generate_custom_class( {pattern} , {states} );
		```

		```scss
		// generate a custom class for all the states
		@include gridle_generate_custom_class( ('txt','-','align','-','center','@','%state') ) {
		text-align: center;
		content : "#{gridle_get_current_state_name()}";
		}
		```

		This will generate all these classes for you if your registered states are mobile and tablet :

		```
		.txt-align-center
		.txt-align-center@mobile
		.txt-align-center@tablet
		```

602

doc/05.mixins.md

		@@ -1,3 +0,2 @@
		Mixins
		-------------------
		## Mixins

		@@ -7,121 +6,170 @@ Gridle offer a bunch of usefull SASS mixins to apply grid specific CSS to your custom html tags. All the classes described in the Classes section can be replaced by mixins of this section.

		### Grid
		### Container

		These are the base mixins of the grid system. The root mixin is the @include gridle_container(); one and has to be applied on the element that contains all the @include gridle(1);, @include gridle(2);, @include gridle(3);, etc... mixins.
		The container mixin just set a clearfix to avoid you any problem to the display

		```fn
		@include gridle_container ();
		@include gridle ( {column-number} , {state} );
		@include gridle_container();
		```

		with context :
		```scss
		.container {
		@include gridle_container();
		max-width: 960px;
		margin: 0 auto;
		}
		```

		@include gridle ( {column-number} , {context} );
		@include gridle ( {column-number} , {context} , {state} );

		gridle_set :
		### Row

		@include gridle_set((
		grid : {columns-number}
		), {state} );
		The row mixin need to be applied on the elements that will contains your columns items

		@include gridle_set((
		container : true
		), {state} );
		```fn
		// default driver :
		@include gridle_row();

		// flex driver :
		@include gridle_row( {reverse} ); // true or false

		with context :
		@include gridle_state( mobile ) {
		@include gridle_row();
		}

		gridle_set :
		@include gridle_set ( (
		row : true
		) );
		```

		```scss
		.wrapper {
		@include gridle_container ( ); // I'm the container
		max-width : 960px;
		margin : 0 auto;
		.my-row {
		@include gridle_row();
		}
		#header {
		@include gridle ( 12 );
		}
		#content {
		@include gridle ( 8 ); // I made 12 columns width...
		@include gridle ( 12 , mobile tablet ); // ... but 12 columns width on mobile and tablet
		}
		#sidebar {
		@include gridle ( 4 ); // I made 4 columns width...
		@include gridle ( 12 , "mobile" ); // ... but 12 columns width on "mobile"
		}
		#footer {
		@include gridle ( 12 );
		}
		```


		### Grid Parent (nested grids)
		### Row align

		This mixin has to be applied on a grid-x element that will contains a nested grid.
		This mixin is used to align your grid items in your row.

		```fn
		@include gridle_parent ( );
		@include gridle_parent ( {state} );
		// possible values :
		$align : top \| middle \| bottom \|\| left \| center \| right;

		gridle_set :
		@include gridle_row_align ( {align} );

		@include gridle_set((
		parent : true
		), {state} );
		// with state
		@include gridle_state ( mobile ) {
		@include gridle_row_align ( {align} );
		}

		// gridle_set :
		@include gridle_set ( (
		row-align : {align}
		) );
		```

		```scss
		#content {
		@include gridle ( 8 );
		@include gridle ( 12 , "mobile" );
		@include gridle_parent ( ); // I'm the parent of a nested grid system
		.my-row {
		@include gridle_row();
		@include gridle_align ( center middle );
		}
		```

		.column {
		@include gridle ( 4 );
		@include gridle ( 12 , 'mobile' );
		}

		### Row full

		This mixin allows you to make a particular row take the entire screen width without having to close all your container and row elements

		```fn
		@include gridle_row_full();

		// with state
		@include gridle_state ( mobile ) {
		@include gridle_row_full();
		}

		// gridle_set :
		@include gridle_set ( (
		row-full : true
		) );
		```


		### Clear each NEW
		### Grid

		This mixin will make all the {x}n+1 direct child clear itself automatically.
		These are your actual grid columns.

		```fn
		@include gridle_clear_each ( {each} , {what} );
		@include gridle_clear_each ( {each} , {what} , {state} );
		// $column-number : 1...{context} \| adapt \| grow;

		@include gridle_grid ( { column-number} );

		with context :
		@include gridle_state ( mobile ) {
		@include gridle ( {column-number} );
		}

		gridle_set :

		@include gridle_set((
		clear_each : ( {each} , {what} )
		), {state} );
		grid : {columns-number}
		) );
		```

		```scss
		#myContentThatHasWeirdHeightChilds {
		@include gridle_parent( );
		@include gridle_clear_each( 2, left );
		.wrapper {
		@include gridle_container ( ); // I'm the container
		max-width : 960px;
		margin : 0 auto;
		}
		#header {
		@include gridle_grid ( 12 );
		}
		#content {
		@include gridle_grid ( 8 ); // I made 12 columns width...
		@include gridle_state( mobile tablet ) {
		@include gridle_grid ( 12 ); // ... but 12 columns width on mobile and tablet
		}
		}
		#sidebar {
		@include gridle_grid ( 4 ); // I made 4 columns width...
		@include gridle_state ( mobile ) {
		@include gridle_grid ( 12 ); // ... but 12 columns width on "mobile"
		}
		}
		#footer {
		@include gridle_grid ( 12 );
		}
		```


		### Centered Grid
		### Grid adapt / grow

		This mixin has to be applied on a grid-x element and will center the column.
		This class allows you to tell a grid column to adapt his width depending on his content

		```fn
		@include gridle_centered ( );
		@include gridle_centered ( {state} );
		@include gridle_grid_adapt();
		// same as @include gridle_grid ( adapt );

		gridle_set :
		@include gridle_grid_grow();
		// same as @include gridle_grid ( grow );

		@include gridle_set((
		centered : true
		), {state} );
		// with state
		@include gridle_state ( mobile ) {
		@include gridle_grid_adapt();
		}

		// gridle_set :
		@include gridle_set ( (
		grid-adapt : true
		grid : adapt // same as line abow
		) );
		```

		```scss
		#content {
		@include gridle ( 8 );
		@include gridle ( 12 , "mobile" );
		@include gridle_centered ( ); // this will make the column centered for all sizes
		.my-grid-element {
		@include gridle_grid_adapt();
		@include gridle_grid ( adapt ); // same as line abow
		}
		@@ -131,30 +179,43 @@ ```

		### Vertical Aligned Grid Items BETA
		### Grid centered

		Gridle allows you to align vertically your grid elements based on his neighbours in the same line. This has to be used with caution and you must test if it fit your particular need.
		This mixin will center your grid element

		```fn
		@include gridle_vertical_align( );
		@include gridle_vertical_align( {align} );
		@include gridle_vertical_align( {align} , {state} );
		@include gridle_grid_centered();

		gridle_set :
		// with state
		@include gridle_state ( mobile ) {
		@include gridle_grid_centered();
		}

		@include gridle_set((
		vertical_align : {align}
		), {state} );
		// gridle_set :
		@include gridle_set ( (
		grid-centered : true
		) );
		```

		```scss
		#myContainerThatHaveGridItemsAsDirectChild {
		@include gridle_vertical_align( );

		### Grid order (flex driver)

		This mixin allows you to set where your grid element will be displayed in the row. If you have setup your grid with 12 columns, you will have 12 possibilities to order your element

		```fn
		// possible values
		$order : 1...{context} \| first \| last;

		@include gridle_order( {order} );

		// with state
		@include gridle_state ( mobile ) {
		@include gridle_order ( {order} );
		}

		// gridle_set :
		@include gridle_set( (
		order : {order}
		) );
		```

		This mixin apply a font-size of 0 on the parent itself and a font-size of 1rem on the direct childs. This is to avoid the display:inline-block space thing... You have to set your font on the html tag for this to work fine...

		> When using this, the direction parameter will not have any effect anymore...
		> This mixin have to be applied on a parent/container element that has direct grid- childs


		### Push & Pull
		@@ -165,11 +226,15 @@
		```fn
		@include gridle_push ( {column-number} , {state} );
		@include gridle_pull ( {column-number} , {state} );
		@include gridle_push ( {column-number} );
		@include gridle_pull ( {column-number} );

		gridle_set :
		// with state
		@include gridle_state ( mobile ) {
		@include gridle_push( {column-number} );
		}

		// gridle_set :
		@include gridle_set((
		push : {column-number},
		pull : {column-number}
		), {state} );
		));
		```
		@@ -182,17 +247,11 @@
		*/
		#header {
		@include gridle ( 12 );
		}
		#content {
		@include gridle ( 8 );
		@include gridle_grid ( 8 );
		@include gridle_push ( 4 ); // I will be offset by 4 columns on the right
		}
		#sidebar {
		@include gridle ( 4 );
		@include gridle_grid ( 4 );
		@include gridle_pull ( 8 ); // I will be effset 8 columns on the left

		}
		#footer {
		@include gridle ( 12 );
		}
		```
		@@ -206,7 +265,11 @@
		```fn
		@include gridle_prefix ( {column-number} , {state} );
		@include gridle_suffix ( {column-number} , {state} );
		@include gridle_prefix ( {column-number} );
		@include gridle_suffix ( {column-number} );

		gridle_set :
		// with state
		@include gridle_state ( mobile ) {
		@include gridle_prefix( {column-number} );
		}

		// gridle_set :
		@include gridle_set((
		@@ -223,15 +286,15 @@ prefix : {column-number},
		#box1 {
		@include gridle ( 3 );
		@include gridle_grid ( 3 );
		@include gridle_prefix ( 3 ); // 3 columns of dead space to the right
		}
		#box2 {
		@include gridle ( 3 );
		@include gridle_grid ( 3 );
		@include gridle_prefix ( 3 ); // 3 columns of dead space to the right
		}
		#box3 {
		@include gridle ( 3 );
		@include gridle_grid ( 3 );
		@include gridle_suffix ( 3 ); // 3 columns of dead space to the left
		}
		#box4 {
		@include gridle ( 3 );
		@include gridle_grid ( 3 );
		@include gridle_suffix ( 3 ); // 3 columns of dead space to the left
		@@ -242,2 +305,55 @@ }

		### Wrap / nowrap

		These mixins are useful to specify on a wrapper that the direct children can or cannot wrap themselves

		```fn
		@include gridle_wrap();
		@include gridle_nowrap();

		// with context
		@include gridle_state ( mobile ) {
		@include gridle_wrap();
		}

		// gridle_set :
		@include gridle_set ( (
		wrap : true \| false, // if false, will apply nowrap
		nowrap : true \| false // if false, will apply wrap
		) );
		```

		```scss
		.my-row {
		@include gridle_row();
		@include gridle_nowrap();
		}
		```


		### Clear each (default driver)

		This mixin will make all the {x}n+1 direct child clear itself automatically.

		```fn
		@include gridle_clear_each ( {each} , {what} );

		// with state
		@include gridle_state ( mobile ) {
		@include gridle_clear_each ( {each} , {what} );
		}

		// gridle_set :
		@include gridle_set((
		clear_each : ( {each} , {what} )
		), {state} );
		```

		```scss
		#myContentThatHasWeirdHeightChilds {
		@include gridle_clear_each( 2, left );
		}
		```


		### Hide, show, etc...
		@@ -248,10 +364,15 @@
		```fn
		@include gridle_hide ( {state} );
		@include gridle_show ( {state} );
		@include gridle_show_inline ( {state} );
		@include gridle_not_visible ( {state} );
		@include gridle_visible ( {state} );
		@include gridle_hide();
		@include gridle_show();
		@include gridle_show_inline();
		@include gridle_not_visible();
		@include gridle_visible();

		gridle_set :
		// with state
		@include gridle_state ( mobile ) {
		@include gridle_hide();
		// etc...
		}

		// gridle_set :
		@include gridle_set((
		@@ -267,20 +388,118 @@ hide : true \| false,
		```scss
		#header {
		@include gridle ( 12 );
		#sidebar {
		@include gridle ( 4 );
		@include gridle_state ( mobile ) {
		@include gridle_hide (); // Not enough space on mobile so we hide it
		}
		}
		#content {
		@include gridle ( 8 );
		```


		### Float

		This mixin is used to make element float left, right or both, like a normal float does, but with state capabilities.

		```fn
		@include gridle_float( {left \| right \| both} );

		// with state
		@include gridle_state ( mobile ) {
		@include gridle_float( {left \| right \| both} );
		}

		// gridle_set :
		@include gridle_set((
		float : {left \| right \| both}
		), {state} );
		```

		```scss
		#sidebar {
		@include gridle ( 4 );
		@include gridle_hide ( "mobile" ); // Not enough space on mobile so we hide it
		@include gridle_float ( right ); // float right normally...
		@include gridle_state ( mobile ) {
		@include gridle_float ( left ); // ... but left on mobile
		}
		}
		#footer {
		@include gridle ( 12 );
		```


		### Clear

		This mixin work exactly like the float one, but to clear floats... Pretty simple no?

		```fn
		@include gridle_clear( {left \| right \| both} );

		// with state
		@include gridle_state ( mobile ) {
		@include gridle_clear ( {left \| right \| both} );
		}

		// gridle_set :
		@include gridle_set((
		clear : {left \| right \| both}
		), {state} );
		```

		```markup
		#sidebar {
		@include gridle_clear( right ); // clear right normally...
		@include gridle_state ( mobile ) {
		@include gridle_clear( left ); // ... but left on mobile
		}
		}
		```

		### State (VERY USEFULL)

		### Gutters

		These mixins are available to manage gutter on grid elements.
		In gridle, the gutters are actually paddings.

		```fn
		@include gridle_gutter( {sides \| sizes} );
		@include gridle_no_gutter( {sides \| sizes} );

		// with state :
		@include gridle_state ( mobile ) {
		@include gridle_gutter ( {sides} );
		// etc...
		}

		// gridle_set :
		@include gridle_set((
		gutter : {sides},
		margin : {sides},
		no_gutter : {sides},
		no_margin : {sides}
		) );
		```

		```scss
		#sidebar {
		@include gridle_gutter(); // add padding to left and right

		/**
		* You can specify a list of side as first param :
		* top left right bottom are supported
		*/
		@include gridle_gutter ( top left ); // add gutter to top and left only
		}
		#content {
		@include gridle_no_gutter(); // remove padding to left and right

		@include gridle_no_gutter ( top left ); // remove gutter to top and left only
		}
		#sizes-specific {
		// 5px top and bottom, 10px left and right
		@include gridle_gutter(10px 20px);

		// 5px top, 10px right, 15px bottom, 20px left
		@include gridle_gutter(5px 10px 15px 20px);
		}
		```


		### Gridle state

		This mixin is really, really, really... I mean REALLY useful. It allows you to write some specific CSS on an element for certain states (cf. States). You can also specify min-width and/or max-width as parameters.
		@@ -290,6 +509,6 @@
		@include gridle_state ( {state} ) {
		{custom-css}
		{custom-css}
		}
		@include gridle_state ( {min-width} , {max-width} ) {
		{custom-css}
		{custom-css}
		}
		@@ -300,9 +519,9 @@ ```
		#header {
		@include gridle ( 12 );
		@include gridle_grid ( 12 );
		}
		#content {
		@include gridle ( 8 );
		@include gridle_grid ( 8 );
		}
		#sidebar {
		@include gridle ( 4 );
		@include gridle_grid ( 4 );

		@@ -323,3 +542,3 @@ /* We change the background to yellow and we
		*/
		@include gridle_state ( mobile "tablet" ) {
		@include gridle_state ( mobile tablet ) {
		// ... your custom css here
		@@ -343,11 +562,9 @@ }
		#footer {
		@include gridle ( 12 );
		@include gridle_grid ( 12 );
		}
		```

		> Do not include all the others grid mixins into the gridle_state one. This is because SASS does not handle nested media queries correctly – instead, always use the {state} parameter of the gridle(), gridle_push(), etc... mixins and everything will work just as expected.

		### Gridle set

		### Set multiple mixins at once NEW

		Sometime you want to apply more than one mixin on your item. This can be a pain to write multiple times @include gridle_... You have now this mixin to help you with this.
		@@ -408,5 +625,5 @@
		@include gridle_generate_classes ( );
		@include gridle_generate_classes ( {stateName} );
		@include gridle_generate_classes ( {stateName} , {what} );
		@include gridle_generate_classes ( {stateName} , {what} , {scope} );
		@include gridle_generate_classes ( {states} );
		@include gridle_generate_classes ( {states} , {what} );
		@include gridle_generate_classes ( {states} , {what} , {scope} );
		```
		@@ -444,8 +661,8 @@
		*/
		@include gridle_generate_classes( default, ( push, pull ) );
		@include gridle_generate_classes( default, push pull );

		/**
		* Generate the push, pull, grid and visible classes for all states in a specific order
		* Generate all the classes without the visible and hide package
		*/
		@include gridle_generate_classes( null, ( visible, pull, grid, push ) );
		@include gridle_generate_classes( all , -visible -hide );
		```
		@@ -455,3 +672,2 @@

		> The "what" parameter define also the order in witdh the classes will be generated

		@@ -464,7 +680,19 @@ #### The what parameter
		// packages :
		default : all the default classes listed bellow
		default : all the default classes listed bellow
		helpers : all the helpers classes listed bellow
		debug : all the debug classes listed bellow

		// default :
		grid : all the grid- classes
		container : the container classes
		row : the row classes
		row-align : all the row-align-... classes
		col : the col classes
		row-full : the row-full classes
		nowrap : the nowrap classes
		wrap : the wrap classes
		grid : all the gr- classes
		grid-table : the grid-table classes
		grid-grow : the grid-grow classes
		grid-adapt : the grid-adapt classes
		grid-centered : the grid-centered classes
		push : all the push- classes
		@@ -479,93 +707,37 @@ pull : all the pull-classes
		gutter : all the gutter- classes
		no_gutter : all the no-gutter- classes
		margin : alias for gutter
		no_margin : alias for no_gutter
		centered : all the centered- classes
		parent : all the parent- classes
		vertical_align : all the vertical-align- classes
		no-gutter : all the no-gutter- classes
		hide : all the hide- classes
		show : all the show- classes (+ show-inline-)
		not_visible : all the not-visible- classes
		visible : all the visible- classes
		clear_each : all the clear-each- classes
		```
		show : all the show- classes
		show-inline : all the show-inline- classes
		not-visible : all the not-visible- classes
		visible : all the visible- classes
		clear-each : all the clear-each- classes
		order : all the order classes


		### Float

		This mixin is used to make element float left, right or both, like a normal float does, but with state capabilities.

		```fn
		@include gridle_float( {left \| right \| both}, {state} );

		@include gridle_set((
		float : {left \| right \| both}
		), {state} );
		// debug
		row-debug : the row-debug classes
		```

		```scss
		#sidebar {
		@include gridle_float ( right ); // float right normally...
		@include gridle_float ( left, 'mobile' ); // ... but left on mobile
		}
		```

		### Selector

		### Clear
		If needed, you can apply some css to specifiy gridle selectors. This can be useful if you cannot target some grid elements by using something like [class*="gr-"]...

		This mixin work exactly like the float one, but to clear floats... Pretty simple no?

		```fn
		@include gridle_clear( {left \| right \| both}, {state} );

		@include gridle_set((
		clear : {left \| right \| both}
		), {state} );
		```

		```markup
		#sidebar {
		@include gridle_clear( right ); // clear right normally...
		@include gridle_clear( left, 'mobile' ); // ... but left on mobile
		@include gridle_selector( {packages} , {states} ) {
		// your custom css here...
		}
		```


		### Gutters

		These mixins are available to manage gutter on grid elements.
		In gridle, the gutters are actually paddings.

		```fn
		@include gridle_gutter( {sides}, {state} );
		@include gridle_no_gutter( {sides}, {state} );

		@include gridle_set((
		gutter : {sides},
		margin : {sides},
		no_gutter : {sides},
		no_margin : {sides}
		), {state} );
		```

		```scss
		#sidebar {
		@include gridle_gutter(); // add padding to left and right of $gridle-gutter-width value

		/**
		* You can specify a list of side as first param :
		* top left right bottom are supported
		*/
		@include gridle_gutter ( top left ); // add gutter to top and left only
		@include gridle_selector(grid grid-grow grid-adapt) {
		content : "I will target all the grid, grid-grow and grid-adapt elements of all states";
		}
		#content {
		@include gridle_no_gutter(); // remove padding to left and right

		@include gridle_no_gutter ( top left ); // remove gutter to top and left only
		@include gridle_selector(grid, mobile) {
		content : "I will target all the grid elements of the mobile state"
		}
		```

		> Secret : The mixins "gridle_margin" and "gridle_no_margin" work too...


		### What is the context ?
		@@ -572,0 +744,0 @@

js/gridle.js

		@@ -9,4 +9,4 @@
		* @created 20.05.14
		* @updated 09.02.15
		* @version 1.0.12
		* @updated 29.09.15
		* @version 1.0.13
		*/
		@@ -137,3 +137,2 @@ (function() {
		settings = response.match(/#gridle-settings(?:\s)\{(?:\s)content(?:\s):(?:\s)\'(.+)\'(;\s\|\s)\}/) && RegExp.$1;
		console.log('settings', settings);
		if (!settings) {
		@@ -143,2 +142,3 @@ _this._noSettingsFindedInThisCss(link);
		}
		settings = settings.toString().replace(/\\/g, '');
		settings = JSON.parse(settings);
		@@ -218,3 +218,12 @@ _this._cssSettings = settings;
		updatedStates = [];
		return this._updateStatesStatus();
		this._updateStatesStatus();
		if (this.getActiveStatesNames().length) {
		this._debug('active states', this.getActiveStatesNames().join(','));
		}
		if (this.getInactiveStatesNames().length) {
		this._debug('inactive states', this.getInactiveStatesNames().join(','));
		}
		if (this.getUpdatedStatesNames().length) {
		return this._debug('updated states', this.getUpdatedStatesNames().join(','));
		}
		},
		@@ -243,3 +252,6 @@
		_updateStatesStatus: function() {
		var key, state, _ref;
		var defaultState, defaultStateIdx, key, state, wasDefault, _ref;
		defaultState = this.getDefaultState();
		defaultStateIdx = this._states.indexOf(defaultState);
		wasDefault = defaultState.status;
		this._activeStates = [];
		@@ -266,6 +278,6 @@ this._activeStatesNames = [];
		this._activeStatesNames.push(state.name);
		} else {
		} else if (state.name !== 'default') {
		if (this._states[key].status) {
		this._updatedStates.push(state);
		this._updatedStatesNames.push(state);
		this._updatedStatesNames.push(state.name);
		}
		@@ -277,2 +289,19 @@ this._states[key].status = false;
		}
		if (!this._activeStates.length) {
		this._states[defaultStateIdx].status = true;
		this._activeStates.push(defaultState);
		this._activeStatesNames.push('default');
		if (!wasDefault) {
		this._updatedStates.push(defaultState);
		this._updatedStatesNames.push('default');
		}
		} else {
		this._states[defaultStateIdx].status = false;
		this._inactiveStates.push(defaultState);
		this._inactiveStatesNames.push('default');
		if (wasDefault) {
		this._updatedStates.push(defaultState);
		this._updatedStatesNames.push('default');
		}
		}
		if (this._updatedStates.length) {
		@@ -337,3 +366,3 @@ this._crossEmit('update', this._updatedStates, this._activeStates, this._inactiveStates);
		}
		http.open(args.type, args.url, false);
		http.open(args.type, args.url, true);
		http.onreadystatechange = function() {
		@@ -362,2 +391,16 @@ var response;
		/*
		Get default state
		*/
		getDefaultState: function() {
		var state, _i, _len, _ref;
		_ref = this.getRegisteredStates();
		for (_i = 0, _len = _ref.length; _i < _len; _i++) {
		state = _ref[_i];
		if (state.name === 'default') {
		return state;
		}
		}
		},

		/*
		Get registered states
		@@ -364,0 +407,0 @@ */

js/gridle.min.js

		@@ -1,1 +0,1 @@
		!function(){var a;return a={convert:function(a,b){return b={},a.on=function(c,d){return(b[c]=b[c]\|\|[]).push(d),a},a.emit=function(c){var d,e,f,g;if(b[c]){for(g=b[c],e=0,f=g.length;f>e;e++)d=g[e],d.apply(a,Array.prototype.slice.call(arguments,1));return a}},a}},window.Gridle={_inited:!1,_isReady:!1,_statesInCss:null,_statesFindedInCss:!1,_cssLinks:[],_cssSettings:[],_states:[],_activeStates:[],_activeStatesNames:[],_inactiveStates:[],_inactiveStatesNames:[],_updatedStates:[],_updatedStatesNames:[],resizeTimeout:null,_settings:{cssPath:null,onUpdate:null,debug:null},init:function(a){var b,c,d,e,f;if(this._inited=!0,null!=a&&(this._settings=a),a&&null!=a.debug&&(null!=(e=this._settings.debug)\|\|a.debug),a&&null!=a.onStatesChange&&(null!=(f=this._settings.onStatesChange)\|\|a.onStatesChange),this._debug("ajax request on stylesheets to find gridle states"),this._settings.cssPath)this._cssLinks.push({href:this._settings.cssPath});else{d=document.getElementsByTagName("link");for(b in d){if(c=d[b],!c)return!1;this._cssLinks.push(c)}}return this._loadAndParseCss(this._cssLinks.length?void 0:this._launch)},_loadAndParseCss:function(){var a,b,c;c=this._cssLinks;for(a in c){if(b=c[a],this._statesFindedInCss)return!1;b&&b.href&&(this._debug("\|--- ajax request on ",b.href),this._ajax({async:!0,url:b.href,success:function(a){return function(c){var d;return a._statesFindedInCss?!1:c?(d=c.match(/#gridle-settings(?:\s)\{(?:\s)content(?:\s):(?:\s)\'(.+)\'(;\s\|\s)\}/)&&RegExp.$1,console.log("settings",d),d?(d=JSON.parse(d),a._cssSettings=d,d.states?(a._debug("\|--- states finded in",b.href),a._statesFindedInCss=!0,a._statesInCss=d.states,a._processFindedStates()):(a._debug("no queries finded in css"),a._noSettingsFindedInThisCss(b),!1)):(a._noSettingsFindedInThisCss(b),!1)):(a._noSettingsFindedInThisCss(b),!1)}}(this),error:function(a){return function(){return a._statesFindedInCss?!1:a._noSettingsFindedInThisCss(b)}}(this),dataType:"text"}))}},_noSettingsFindedInThisCss:function(){return this._cssLinks.shift,this._cssLinks.length?void 0:this._debug("no settings finded in css")},_processFindedStates:function(){var a,b,c;this._debug("begin process finded states in css"),c=this._statesInCss;for(a in c)b=c[a],this._registerState(a,b);return this._launch()},_launch:function(){return this._debug("launch"),this._isReady=!0,this._crossEmit("ready"),this._addEvent(window,"resize",function(a){return function(){return clearTimeout(a.resizeTimeout),a.resizeTimeout=setTimeout(function(){return a._onResize()},100)}}(this)),this._onResize()},_onResize:function(){var a;return a=[],this._updateStatesStatus()},_registerState:function(a,b,c){var d;return d={name:a,query:b.query,settings:b,status:null,previous_status:null,updateOnResize:null!=c?c:!0},this._states.push(d),this._debug("\|--- register state",a,d)},_updateStatesStatus:function(){var a,b,c;this._activeStates=[],this._activeStatesNames=[],this._inactiveStates=[],this._inactiveStatesNames=[],this._updatedStates=[],this._updatedStatesNames=[],c=this._states;for(a in c)b=c[a],b.updateOnResize&&(this._states[a].previous_status=b.status,this._validateState(b)?(this._states[a].status\|\|(this._updatedStates.push(b),this._updatedStatesNames.push(b.name)),this._states[a].status=!0,this._activeStates.push(b),this._activeStatesNames.push(b.name)):(this._states[a].status&&(this._updatedStates.push(b),this._updatedStatesNames.push(b)),this._states[a].status=!1,this._inactiveStates.push(b),this._inactiveStatesNames.push(b.name)));return this._updatedStates.length&&this._crossEmit("update",this._updatedStates,this._activeStates,this._inactiveStates),this._updatedStates.length&&this._settings.onUpdate?this._settings.onUpdate(this._updatedStates,this._activeStates,this._inactiveStates):void 0},_validateState:function(a){return matchMedia(a.query).matches},_addEvent:function(a,b,c){return a?a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent?a.attachEvent("on"+b,c):a["on"+b]=c:!1},_crossEmit:function(a){return"undefined"!=typeof jQuery&&null!==jQuery&&(jQuery(this).trigger(a,Array.prototype.slice.call(arguments,1)),jQuery("body").trigger("gridle."+a,Array.prototype.slice.call(arguments,1))),this.emit.apply(this,arguments)},_ajax:function(a){var b,c;return b={type:a.type\|\|"GET",url:a.url,success:a.success,error:a.error,dataType:a.dataType\|\|"text",context:a.context},c=new XMLHttpRequest,b.context&&(c.context=b.context),c.open(b.type,b.url,!1),c.onreadystatechange=function(){var a;if(4!==c.readyState)return!1;switch(c.status){case 200:switch(b.dataType){case"json":a=JSON.parse(c.responseText);break;default:a=c.responseText}if(b.success)return b.success(a,c.status,c)}},c.send()},getRegisteredStates:function(){return this._states},getUpdatedStates:function(){return this._updatedStates},getUpdatedStatesNames:function(){return this._updatedStatesNames},getActiveStates:function(){return this._activeStates},getActiveStatesNames:function(){return this._activeStatesNames},getInactiveStates:function(){return this._inactiveStates},getInactiveStatesNames:function(){return this._inactiveStatesNames},isActive:function(a){var b,c,d,e;c=!1,e=this._activeStatesNames;for(b in e)d=e[b],a===d&&(c=!0);return c},isReady:function(){return this._isReady},_debug:function(){return this._settings.debug?console.log("GRIDLE",arguments):void 0}},a.convert(window.Gridle),setTimeout(function(){return Gridle._inited?void 0:Gridle.init()},500),"function"==typeof window.define&&window.define.amd?window.define([],function(){return window.Gridle}):void 0}();
		!function(){var a;return a={convert:function(a,b){return b={},a.on=function(c,d){return(b[c]=b[c]\|\|[]).push(d),a},a.emit=function(c){var d,e,f,g;if(b[c]){for(g=b[c],e=0,f=g.length;f>e;e++)d=g[e],d.apply(a,Array.prototype.slice.call(arguments,1));return a}},a}},window.Gridle={_inited:!1,_isReady:!1,_statesInCss:null,_statesFindedInCss:!1,_cssLinks:[],_cssSettings:[],_states:[],_activeStates:[],_activeStatesNames:[],_inactiveStates:[],_inactiveStatesNames:[],_updatedStates:[],_updatedStatesNames:[],resizeTimeout:null,_settings:{cssPath:null,onUpdate:null,debug:null},init:function(a){var b,c,d,e,f;if(this._inited=!0,null!=a&&(this._settings=a),a&&null!=a.debug&&(null!=(e=this._settings.debug)\|\|a.debug),a&&null!=a.onStatesChange&&(null!=(f=this._settings.onStatesChange)\|\|a.onStatesChange),this._debug("ajax request on stylesheets to find gridle states"),this._settings.cssPath)this._cssLinks.push({href:this._settings.cssPath});else{d=document.getElementsByTagName("link");for(b in d){if(c=d[b],!c)return!1;this._cssLinks.push(c)}}return this._loadAndParseCss(this._cssLinks.length?void 0:this._launch)},_loadAndParseCss:function(){var a,b,c;c=this._cssLinks;for(a in c){if(b=c[a],this._statesFindedInCss)return!1;b&&b.href&&(this._debug("\|--- ajax request on ",b.href),this._ajax({async:!0,url:b.href,success:function(a){return function(c){var d;return a._statesFindedInCss?!1:c&&(d=c.match(/#gridle-settings(?:\s)\{(?:\s)content(?:\s):(?:\s)\'(.+)\'(;\s\|\s)\}/)&&RegExp.$1)?(d=d.toString().replace(/\\/g,""),d=JSON.parse(d),a._cssSettings=d,d.states?(a._debug("\|--- states finded in",b.href),a._statesFindedInCss=!0,a._statesInCss=d.states,a._processFindedStates()):(a._debug("no queries finded in css"),a._noSettingsFindedInThisCss(b),!1)):(a._noSettingsFindedInThisCss(b),!1)}}(this),error:function(a){return function(){return a._statesFindedInCss?!1:a._noSettingsFindedInThisCss(b)}}(this),dataType:"text"}))}},_noSettingsFindedInThisCss:function(){return this._cssLinks.shift,this._cssLinks.length?void 0:this._debug("no settings finded in css")},_processFindedStates:function(){var a,b,c;this._debug("begin process finded states in css"),c=this._statesInCss;for(a in c)b=c[a],this._registerState(a,b);return this._launch()},_launch:function(){return this._debug("launch"),this._isReady=!0,this._crossEmit("ready"),this._addEvent(window,"resize",function(a){return function(){return clearTimeout(a.resizeTimeout),a.resizeTimeout=setTimeout(function(){return a._onResize()},100)}}(this)),this._onResize()},_onResize:function(){var a;return a=[],this._updateStatesStatus(),this.getActiveStatesNames().length&&this._debug("active states",this.getActiveStatesNames().join(",")),this.getInactiveStatesNames().length&&this._debug("inactive states",this.getInactiveStatesNames().join(",")),this.getUpdatedStatesNames().length?this._debug("updated states",this.getUpdatedStatesNames().join(",")):void 0},_registerState:function(a,b,c){var d;return d={name:a,query:b.query,settings:b,status:null,previous_status:null,updateOnResize:null!=c?c:!0},this._states.push(d),this._debug("\|--- register state",a,d)},_updateStatesStatus:function(){var a,b,c,d,e,f;a=this.getDefaultState(),b=this._states.indexOf(a),e=a.status,this._activeStates=[],this._activeStatesNames=[],this._inactiveStates=[],this._inactiveStatesNames=[],this._updatedStates=[],this._updatedStatesNames=[],f=this._states;for(c in f)d=f[c],d.updateOnResize&&(this._states[c].previous_status=d.status,this._validateState(d)?(this._states[c].status\|\|(this._updatedStates.push(d),this._updatedStatesNames.push(d.name)),this._states[c].status=!0,this._activeStates.push(d),this._activeStatesNames.push(d.name)):"default"!==d.name&&(this._states[c].status&&(this._updatedStates.push(d),this._updatedStatesNames.push(d.name)),this._states[c].status=!1,this._inactiveStates.push(d),this._inactiveStatesNames.push(d.name)));return this._activeStates.length?(this._states[b].status=!1,this._inactiveStates.push(a),this._inactiveStatesNames.push("default"),e&&(this._updatedStates.push(a),this._updatedStatesNames.push("default"))):(this._states[b].status=!0,this._activeStates.push(a),this._activeStatesNames.push("default"),e\|\|(this._updatedStates.push(a),this._updatedStatesNames.push("default"))),this._updatedStates.length&&this._crossEmit("update",this._updatedStates,this._activeStates,this._inactiveStates),this._updatedStates.length&&this._settings.onUpdate?this._settings.onUpdate(this._updatedStates,this._activeStates,this._inactiveStates):void 0},_validateState:function(a){return matchMedia(a.query).matches},_addEvent:function(a,b,c){return a?a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent?a.attachEvent("on"+b,c):a["on"+b]=c:!1},_crossEmit:function(a){return"undefined"!=typeof jQuery&&null!==jQuery&&(jQuery(this).trigger(a,Array.prototype.slice.call(arguments,1)),jQuery("body").trigger("gridle."+a,Array.prototype.slice.call(arguments,1))),this.emit.apply(this,arguments)},_ajax:function(a){var b,c;return b={type:a.type\|\|"GET",url:a.url,success:a.success,error:a.error,dataType:a.dataType\|\|"text",context:a.context},c=new XMLHttpRequest,b.context&&(c.context=b.context),c.open(b.type,b.url,!0),c.onreadystatechange=function(){var a;if(4!==c.readyState)return!1;switch(c.status){case 200:switch(b.dataType){case"json":a=JSON.parse(c.responseText);break;default:a=c.responseText}if(b.success)return b.success(a,c.status,c)}},c.send()},getDefaultState:function(){var a,b,c,d;for(d=this.getRegisteredStates(),b=0,c=d.length;c>b;b++)if(a=d[b],"default"===a.name)return a},getRegisteredStates:function(){return this._states},getUpdatedStates:function(){return this._updatedStates},getUpdatedStatesNames:function(){return this._updatedStatesNames},getActiveStates:function(){return this._activeStates},getActiveStatesNames:function(){return this._activeStatesNames},getInactiveStates:function(){return this._inactiveStates},getInactiveStatesNames:function(){return this._inactiveStatesNames},isActive:function(a){var b,c,d,e;c=!1,e=this._activeStatesNames;for(b in e)d=e[b],a===d&&(c=!0);return c},isReady:function(){return this._isReady},_debug:function(){return this._settings.debug?console.log("GRIDLE",arguments):void 0}},a.convert(window.Gridle),setTimeout(function(){return Gridle._inited?void 0:Gridle.init()},500),"function"==typeof window.define&&window.define.amd?window.define([],function(){return window.Gridle}):void 0}();

package.json

		{
		"name": "gridle",
		"description": "Gridle grid system",
		"version": "1.3.40",
		"version": "2.0.0",
		"main": "sass/gridle/_gridle.scss",
		@@ -24,4 +24,8 @@ "scripts": {
		"grunt-contrib-watch": ">=0.5.3",
		"grunt-notify": ">=0.2.13"
		"grunt-notify": ">=0.2.13",
		"grunt-sass": "1.0.0",
		"gulp": "^3.9.0",
		"gulp-sass": "^2.0.4",
		"node-sass": "^3.3.3"
		}
		}

README.md

		@@ -1,2 +0,2 @@
		# gridle (v1.3.40)
		# gridle (v2.0.0)

		@@ -57,10 +57,10 @@
		```markup
		<div class="container">
		<div class="grid-12 hide-print">
		<div class="row">
		<div class="gr-12 hide-print">
		Header
		</div>
		<div class="grid-8 grid-mobile-12">
		<div class="gr-8 gr-12@mobile">
		Content
		</div>
		<div class="grid-4 grid-mobile-12 hide-print">
		<div class="gr-4 gr-12@mobile">
		Sidebar
		@@ -74,4 +74,4 @@ </div>
		```scss
		.container {
		@include gridle_container();
		.row {
		@include gridle_row();
		max-width:960px;
		@@ -81,14 +81,21 @@ margin:0 auto;
		#header {
		@include gridle(12);
		@include gridle_grid(12);
		}
		#sidebar {
		@include gridle(8);
		@include gridle(12, mobile );
		@include gridle_grid(8);
		@include gridle_state( mobile tablet ) {
		@include gridle_grid(12);
		content : "#{gridle_current_state_name()}";
		}
		}
		#sidebar {
		@include gridle(4);
		@include gridle_hide( mobile );
		@include gridle_set( (
		grid : 4,
		mobile : (
		hide : true
		)
		) );
		}
		@footer {
		@include gridle(12);
		@include gridle_grid(12);
		}
		@@ -109,2 +116,6 @@ ```

		## Flex as a choice

		Gridle allows you to choose between a standard grid generated with float, etc... and a flex one that use the flexbox model. All of this power with the same exact classes.

		## Generate custom classes
		@@ -154,2 +165,20 @@
		// see documentation for more informations...
		```
		```


		## And more...

		That's not finished. Gridle offer you a lot of features and advanced settings that you can discover on the full website. When I say that Gridle is powerful and fully customizable, I really mean it!

		## [Visit Website](http://gridle.org/) for full documentation


		## Tested with

		\| \| Generator \| Version \|
		\| ------------- \| ------------- \| ------------- \|
		\| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Sass_Logo_Color.svg/1280px-Sass_Logo_Color.svg.png" height="20" /> \| Sass \| 3.4.18 \|
		\| <img src="http://www.codingpedia.org/wp-content/uploads/2014/04/gulp-2x.png" height="30" /> \| Gulp \| 3.9.0 \|
		\| <img src="https://www.npmjs.com/static/images/npm-logo.svg" height="20" /> \| NPM \| 2.5.1 \|
		\| <img src="https://cms-assets.tutsplus.com/uploads/users/30/posts/23114/preview_image/libsass.png" height="20" /> \| Libsass \| 3.3.3 \|
		\| <img src="http://rhumaric.com/wp-content/uploads/2013/05/bower-logo.png" height="20" /> \| Grunt \| 0.4.4 \|

css/grid-bootstrap.css

css/grid-bootstrap.min.css

css/style-bootstrap.css

css/style-bootstrap.min.css

doc/02.add-states.md

doc/06.internet-explorer.md

doc/07.debug.md

doc/08.advanced-settings.md

doc/09.gridle-js.md

sass/grid-bootstrap.scss

sass/gridle/_common-mixins.scss

sass/gridle/_silent-classes.scss

sass/style-bootstrap.scss

CHANGELOG