# Mixins

Gridle offer a bunch of usefull SASS mixins that you can use.

## Generate custom class

Gridle allows you to generate some classes that are integrated with the gridle states system.

```fn
@include g-custom-class( {classname} , {statesNames} )
```

```scss
@include g-custom-class('center') {
	text-align: center;
}
```

This will generate the classes according the fact that you have the (tablet, desktop) states registered:

```fn
.center
.center@tablet
.center@desktop
```

## State

Gridle provide a nice way to customize the look and feel of your site depending on the current state. Here's how:

```fn
@include g-state({stateName}) {
  {custom-css-code}
}
```

```scss
#sidebar {
	background : red;

	@include g-state(tablet) {
		background : green;
	}
}
```

## Setup

This mixin is used to setup your grid.

```fn
@include g-setup({settings});
```

```scss
@include g-setup((
  min-width: null,
  max-width: null,
  query: null,
  columns: 12,
  rows: 12,
  column-width: 60,
  width: 1200,
  container-width: 85vw,
  container-max-width: 1200px
));
```

## Register default mobile first states

This mixin is useful to register quickly some nice mobile first states.
Here's the states that will be registered by this mixin:

```fn
@include g-register-mobile-first-states();
- tablet : 640px to infinite
- desktop : 992px to infinite
- large : 1200px to infinite
```

```scss
// setup
@include g-setup(());
// register states
@include g-register-mobile-first-state();
// generate classes
@include g-classes();
```

## Generate classes

To output your grid, you'll need to call this mixin where you want the grid classes.

```scss
@include g-classes();
```