## Mobile First

Gridle is the perfect fit for your mobile first projects. Here how you can start :


### Setting up the grid

For mobile first, you have to set the different states for your grid like so

```scss
@include gridle_register_state( xs, (
	max-width : 768px
) );
@include gridle_register_state( sm , (
	min-width : 768px
) );
@include gridle_register_state( md, (
	min-width : 992px
) );
@include gridle_register_state( lg, (
	min-width : 1200px
) );
```

> You can use the mixin **gridle_register_default_mobile_first_states()** that will make this part for you. The values are bases on **bootstrap settings**


### Grid items

Then, you have to tell your grid items to take the full width on small state (if you need so).
This is only if you don't want to write each time grid-xs-12 in your html (if your number of columns are 12).

```scss
[class*="gr-"] {
	@include gridle_state( xs ) {
		@include gridle_grid( 12 );
	}
}
```

And your good to go!