## Setup

Gridle is a fully customizable grid system. To do that, you have to configure your grid with simple options.

### Configure your grid

In order for Gridle to work, the `gridle_setup()` mixin **needs to be run**. This is where you can pass core configuration variables like the amount of columns (context) and the width of the gutter.


```fn
@include gridle_setup( {settings} );
```

```scss
// default settings
$settings : (
	context : 12, 			// number of columns in your grid
	column-width : null, 	// by default it's percentage based depending on the context but you can specify a column width yourself
	gutter-width : 20px,	// size of the gutters
	gutter-height : 0, 		// size of top and bottom gutters
	gutter-top 	  : 0, 		// size of top gutter
	gutter-bottom : 0, 		// size of bottom gutter
	gutter-left   : 10px, 	// size of left gutter
	gutter-right  : 10px, 	// size of right gutter
	direction : ltr, 		// direction
	dir-attribute : false, 	// if need to generate support for dir="rtl" in order to set part of layout direction
	states-classes : false, // if we need to generate the states classes
	name-multiplicator : 1, // if 5, generate gr-5, gr-10, etc...
	classes-prefix : '' 	// the prefix used for all classes 
);
@include gridle_setup($settings);
```

You need to specify only the settings that you want to override

> Make sure that your states do not have the same name as a gridle option like gutter-width...


### Init your grid

If you use the grid with the gridle_generate_classes mixin only, this is not for you.
When you use gridle with the mixins, you have to init it in order to avoid some potential issues with libsass (sorry it's not me who's in charge of this project...).
To do that, it's really simple. You have to call the gridle_init() mixin **AFTER** the section where you have all your gridle setup kind of mixins (this includes gridle_setup, gridle_register_states, etc...) and **BEFORE** you call any gridle mixins that generate css output like gridle, gridle_container, etc...

```scss
// your gridle setup section :
@include gridle_setup(());
@include gridle_register_state(mobile, ...);
@include gridle_register_state(tablet, ...);
@include gridle_extend_base_class(...);
@include gridle_apply_css_for(...);

// init the grid here!
@include gridle_init();

// then use your grid as normal
.coco {
	@include gridle(4 push 2);
}
// etc...
```


### Choose a driver

Gridle offer you multiple drivers that you can choose. The default one will make your grid work with float, etc... and the flex one will use flexbox to layout your grid. All this power behind same and simple classes.

```scss
// default
@import 'gridle/gridle';

// flex
@import 'gridle/gridle-flex';
```