## States

Gridle includes all you need to generate a **fully customizable, responsive grid system**.
The principle is a piece of cake. Gridle provides you with a mixin which creates (or registers) "states". States are Gridle's convention that helps you specifically name your responsive breakpoints. Refer to the Gridle state directly within the element's scss rule or by adding auto generated class to the element. Here's how to use states:

### Register a State

To register a state, Gridle provides a simple and unique mixin:

```fn
@include gridle_register_state ( name , {settings} );
```

```scss
/**
* States are usually initialized with screen sizes :
*/
@include gridle_register_state( mobile , (
	max-width : 400px
) );
@include gridle_register_state( tablet, (
	min-width : 401px,
	max-width : 767px,
	gutter-width : 30px 	// change the gutters for this state

	// available options
	// - min-width
	// - max-width
	// - query
	// - gutter-width
	// - gutter-height
	// - gutter-top
	// - gutter-right
	// - gutter-bottom
	// - gutter-left
	// - classes : if need to generate classes
) );

/**
 * States can also be generated without creating classes:
 * Useful when you need a state that cover both the mobile
 * and the tablet for example...
 */
@include gridle_register_state( moblet , (
	min-width : 767px,
	classes : false
) ); 

/**
* State with can also include media queries:
*/
@include gridle_register_state( iphone-landscape , (
	query : "only screen and (max-device-width: ..."
) );
```

> The state can have all the settings available in gridle. If your state doesn't specify gutter width for example, it will default to what has been set in `gridle_setup()`.


### Using States

After you have registered you states, the `@include gridle_generate_classes()` mixin will generate additional classes to be used in your HTML. Here's an example with classes and mixins:

#### Classes

```markup
<div class="container">
	<div class="gr-3 gr-6@tablet gr-12@mobile">
		3 columns, 6 on tablet, 12 on mobile
	</div>
	<div class="gr-12 hide@mobile">
		12 columns but I'm hidden on mobile 
	</div>
</div>
```

#### Mixins

```scss
/**
* Using mixins :
*/
#content {
	@include gridle_grid( 8 );
	@include gridle_state( mobile ) {
		@include gridle_grid( 12 );
	}

	// or by using gridle_set mixin :
	@include gridle_set ( (
		grid : 8,
		mobile : (
			grid : 12,
			hide : true
		)
	) );

	// universal mixin
	@include gridle( 8 mobile 12 hide );
}
#sidebar {
	@include gridle( 4 );
	@include gridle_state( mobile ) {
		@include gridle_hide();
	}

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

> Register state has to be done **before** generating classes (cf. Generate Classes Mixin)


### Register custom classes

You can also add your own custom class to be created for every state:

```fn
@include gridle_generate_custom_class( {pattern} )
```

```scss
// the pattern is a list element or sass
@include gridle_generate_custom_class( ( 'center', '@', '%state' ) ) {
	text-align : center;
}
```

This will generate the following classes if you have registered the states (mobile, tablet, coco)

```fn
.center
.center@mobile
.center@tablet
.center@coco
```

> Make sure to use only the -, --, _, __ or @ as class separators.