# 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 g-register-state ( name , {settings} );
```

```scss
/**
 * States are usually initialized with screen sizes :
 */
@include g-register-state(tablet, (
	min-width : 640px
));
@include g-register-state(desktop, (
	min-width : 992px
));
@include g-register-state(large, (
	min-width : 1200px
));

/**
 * Available settings for your states
 */
$settings: (
	min-width: null,
	max-width: null,
	query: null,
	columns: 12,
	rows: 12,
	column-width: 60,
	width: 1200,
	container-width: 85vw,
	container-max-width: 1440px
);


/**
 * State with can also include media queries:
 */
@include g-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 columns-width for example, it will take by default what has been set in `g-setup()`.