## Mixins

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.


### Container

The container mixin just set a clearfix to avoid you any problem to the display

```fn
@include gridle_container();
```

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

// universal mixin
@include gridle(container);
```


### Row

The row mixin need to be applied on the elements that will contains your columns items

```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
) );

// universal mixin
@include gridle(row);	
```

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


### Row align

This mixin is used to align your grid items in your row.

```fn
// possible values :
$align : top | middle | bottom || left | center | right;

@include gridle_row_align ( {align} );

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

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

// universal mixin
@include gridle(row-align {align});
```

```scss
.my-row {
	@include gridle_row();
	@include gridle_row_align ( center middle );

	// same with universal mixin
	@include gridle( row row-align center middle );
}
```


### 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
) );

// universal mixin
@include gridle(row-full);
```


### Grid

These are your actual grid columns.

```fn
// $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((
	grid : {columns-number}
) );

// universal mixin
@include gridle( {columns-number} );
```

```scss
.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 8 columns width...
	@include gridle_state( mobile tablet ) {
		@include gridle_grid ( 12 ); // ... but 12 columns width on mobile and tablet
	}

	// same using universal mixin
	@include gridle( 8 mobile 12 tablet 12 );
}
#sidebar {
	@include gridle_grid ( 4 ); // I made 4 columns width...
	@include gridle_state ( mobile ) {
		@include gridle_grid ( 12 ); // ... but 12 columns width on "mobile"
	}

	// same using universal mixin
	@include gridle( 4 mobile 12 );
}
#footer {
	@include gridle_grid ( 12 );

	// same using universal mixin
	@include gridle( 12 );
}
```


### Grid adapt / grow

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

```fn
@include gridle_grid_adapt();
// same as @include gridle_grid ( adapt );

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

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

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

// universal mixin
@include gridle( grow );
@include gridle( adapt );
```

```scss
.my-grid-element {
	@include gridle_grid_adapt();
	@include gridle_grid ( adapt ); // same as line abow

	// using universal mixin
	@include gridle( adapt );
}
```


### Grid centered

This mixin will center your grid element

```fn
@include gridle_grid_centered();

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

// gridle_set :
@include gridle_set ( (
	grid-centered : true
) );

// universal mixin
@include gridle( grid-centered );
```


### 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}
) );

// universal mixin
@include gridle( order {order} );
```


### Push & Pull

The push and pull mixins are used to offset the grid elements or event swap 2 of them for SEO purpose. The html structure will not be touched as well 

```fn
@include gridle_push ( {column-number} ); 
@include gridle_pull ( {column-number} );

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

// gridle_set :
@include gridle_set((
	push : {column-number},
	pull : {column-number}
));

// universal mixin
@include gridle( push {column-number} );
@include gridle( pull {column-number} );
```

```scss
/**
 * This code will visualy swap the 2 columns "content" and "sidebar"
 * The HTML structure is not changed as well
 */
#content {
	@include gridle_grid ( 8 );
	@include gridle_push ( 4 ); // I will be offset by 4 columns on the right

	// same with universal mixin
	@include gridle ( 8 push 4 );
}
#sidebar {
	@include gridle_grid ( 4 );
	@include gridle_pull ( 8 ); // I will be effset 8 columns on the left

	// same with universal mixin
	@include gridle ( 4 pull 8 );

}
```


### Prefix & Suffix

The prefix and suffix classes are used to create dead spaces before or after a grid element. 

```fn
@include gridle_prefix ( {column-number} ); 
@include gridle_suffix ( {column-number} );

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

// gridle_set :
@include gridle_set((
	prefix : {column-number},
	suffix : {column-number}
), {state} );

// universal mixin
@include gridle( prefix {column-number} );
@include gridle( suffix {column-number} );
```

```scss
/**
 * This code will generate an "checkerboard" style grid
 */
#box1 {
	@include gridle_grid ( 3 );
	@include gridle_prefix ( 3 ); // 3 columns of dead space to the right

	// same with universal mixin
	@include gridle( 3 prefix 3 );
}
#box2 {
	@include gridle( 3 prefix 3 );
}
#box3 {
	@include gridle( 3 suffix 3 );
}
#box4 {
	@include gridle( 3 suffix 3 );
}
```


### 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
) );

// universal mixin
@include gridle( wrap );
@include gridle( nowrap );
```

```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} );

// universal mixin
@include gridle( clear-each {each} {what} );
```

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

	// same using universal mixin
	@include gridle( clear-each 2 left );
}
```


### Hide, show, etc...

These mixins are used to hide, show or set visibility to some elements for certain states (cf. States) 

```fn
@include gridle_hide(); 
@include gridle_show(); 
@include gridle_show_inline(); 
@include gridle_not_visible(); 
@include gridle_visible();

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

// gridle_set :
@include gridle_set((
	hide : true | false,
	show : true | false,
	show_inline : true | false,
	not_visible : true | false,
	visible : true | false
), {state} );

// universal mixin
@include gridle( hide );
@include gridle( show );
@include gridle( show-inline );
@include gridle( not-visible );
@include gridle( visible );
```

```scss
#sidebar {
	@include gridle ( 4 );
	@include gridle_state ( mobile ) {
		@include gridle_hide (); // Not enough space on mobile so we hide it
	}

	// same using universal mixin
	@include gridle( 4 mobile hide );
}
```


### 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} );

// universal mixin
@include gridle( float {left | right | both} );
```

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

	// same using universal mixin
	@include gridle( float right mobile float left );
}
```


### 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} );

// universal mixin
@include gridle( clear {left | right | both} );
```

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

	// same using universal mixin
	@include gridle( clear right mobile clear left );
}
```


### 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},
	no-gutter : {sides}
) );

// universal mixin
@include gridle( gutter );
@include gridle( gutter {sides} );
@include gridle( no-gutter );
@include gridle( no-gutter {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

	// same using universal mixin
	@include gridle( gutter top left );
}
#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);

	// same using universal mixin
	@include gridle( gutter 5px 10px 15px 20px );
}
```


### Universal mixin

All these mixins described above are great but this force you to write a lot of @include... to do complexe things. The universal mixin is here to help you with that.
It allow to write in 1 line all you want from gridle in your element.

```fn
@include gridle( {properties-list} );

// syntax
@include gridle( {property} {value} {value} {property} {value} {state} {property} {value} {state} {property} {value}...);
```

```scss
.my-cool-element {
	// make a grid 12 that push from 5 and will be hided on mobile
	@include gridle(12 push 5 mobile hide);

	// make something more complexe
	@include gridle(4 push 3 suffix 4
		mobile 12 suffix 0 push 0
		tablet hide);
}
```


### 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.

```fn
@include gridle_state ( {state} ) { 
	{custom-css} 
} 
@include gridle_state ( {min-width} , {max-width} ) { 
	{custom-css} 
}
```

```scss
#header {
	@include gridle_grid ( 12 );
}
#content {
	@include gridle_grid ( 8 );
}
#sidebar {
	@include gridle_grid ( 4 );

	/* We change the background to yellow and we	
	 * add a pink border to the sidebar only on tablet...
	 * ... JUST BECAUSE I CAN!
	 */
	@include gridle_state ( tablet ) {
		background : yellow;
		border : 1px solid pink;
	}

	/**
	 * You can specify multiple states directly width gridle_state :
	 * !!! multiple states names are the 1st parameter, so NO comma between them...
	 * The states can be within quotes or not...
	 */
	@include gridle_state ( mobile tablet ) {
		// ... your custom css here
	}

	/**
	 * Even make a custom query
	 * When passing a custom map state object, it will be extended with the default
	 * settings that you have in your gridle_setup
	 * !!! query and (max-width, min-width) cannot be used together...
	 */
	@include gridle_state ( (
		query : 'only print'
		// or maybe a max-width : 900px
	) ) {
		background : red;
	}

}
#footer {
	@include gridle_grid ( 12 );
}
```


### Gridle element queries

Gridle has a support for element queries (Thanks to [Marc J Schmidt](https://github.com/marcj/css-element-queries) for his wonderfull work on the "polyfill"). To make your element responsive to his own width, use this mixin as described bellow

```fn
@include gridle_eq( {width} );
```

```scss
.component {
	background: yellow;

	@include gridle_eq(+600px) {
		// when the component is 600px and greater
		background: pink;
	}
	@include gridle_eq(-300px) {
		// when the component is 300px and lower
		background: green;
	}
	@include gridle_eq(-100px) {
		// when the component is 100px and lower
		background: black;

		.my-nested-element {
			display: none;
		}
	}
}
```

> The browsers did not support them natively. To use element queries, you need to integrate the <strong>gridle-eq.js</strong> file.


### Gridle set

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.

```fn
@include gridle_set( {settings} , {state} );
```

```scss
#myCoolSidebar {

	/**
	 * Default usage :
	 */
	// set the default values
	@include gridle_set( (
		grid : 4,
		push : 8
	) );

	// erase values for tablet
	@include gridle_set( (
		grid : 12,
		push : 0
	), tablet );
	// you can also pass tablet mobile as {state} param to apply to multiple states at once

	/**
	 * ------------------ OR --------------------
	 */

	/**
	 * Or pass your states directly in one gridle_set call :
	 * !!! do not set any state as second parameter with this solution
	 * Be careful to not have any states that match a reserved gridle setting name like push, pull, etc...
	 */
	@include gridle_set( (
		grid : 4,
		push : 8,
		tablet : (
			grid : 12,
			push : 0
		)
	) );
}
```


### Generate Classes

This mixin is used to generate all the needed classes for your grid system. This mixin is quite modular and allows you to generate all the classes, or if you need, only the classes of a particular state, or only the push and pull classes, etc...

```fn
@include gridle_generate_classes ( ); 
@include gridle_generate_classes ( {states} );
@include gridle_generate_classes ( {states} , {what} );
@include gridle_generate_classes ( {states} , {what} , {scope} );
```

```scss
/**
* Setting up your grid :
*/
@include gridle_setup( (
	context : 12,
	gutter-width : 20px
) );

/**
* Register your states if needed :
*/
@include gridle_register_state ( mobile , (
	max-width : 500px
) );

/**
* Generate all the classes :
*/
@include gridle_generate_classes ( );

/**
 * Generate only the classes of the state mobile
 */
@include gridle_generate_classes( mobile );

/**
 * Generate only the push and pull classes of the default state
 * Note that the what parameter is a list
 */
@include gridle_generate_classes( default, push pull );

/**
 * Generate all the classes without the visible and hide package
 */
@include gridle_generate_classes( all , -visible -hide );
```

> If you generate classes for a large grid with multiple states and a lot of columns, I encourage you to make a separated SASS file that contains the grid system only. This will prevent all the classes to be calculated each time you save your working file.


#### The what parameter

The parameter {what} can be very useful. It allows you to specify witch classes you want to generate. Here's a list of available values that you can use :

```scss
// packages :
default 	: all the default classes listed bellow
helpers 	: all the helpers classes listed bellow
debug 		: all the debug classes listed bellow

// default :
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
pull 		: all the pull-classes
prefix 		: all the prefix- classes
suffix 		: all the suffix- classes

// helpers :
float 		: all the float- classes
clear 		: all the clear- classes
gutter 		: all the gutter- classes
no-gutter 	: all the no-gutter- classes
hide 		: all the hide- 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

// debug
row-debug 	: the row-debug classes
```


### Selector

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-"]...

```fn
@include gridle_selector( {packages} , {states} ) {
	// your custom css here...
}
```

```scss
@include gridle_selector(grid grid-grow grid-adapt) {
	content : "I will target all the grid, grid-grow and grid-adapt elements of all states";
}

@include gridle_selector(grid, mobile) {
	content : "I will target all the grid elements of the mobile state"
}
```


### What is the context ?

The context is **the number of columns in your grid used to calculate the widths**. By default, if not specified in the mixins that support the context, it will be equal as the $gridle-columns-count configuration.

For example, if your configuration is set to **$gridle-columns-count : 12;** and that you do **@include gridle( 6 );**, this will set your width to **100% / 12 * 6 = 50%**

If you set the context like so **@include gridle( 6 , 10 );**, even if your configuration is **$gridle-columns-count : 12;** , the width will be set to **100% / 10 * 6 = 60%**