## Get Started

Below is the basic usage of gridle and how to use it in your own project. From here you can make adjustments to the setup and states to suit your specific needs.

### Installation

To install gridle in your project, you can use one of these options

```
$ npm install gridle
```

```
$ bower install gridle
```

```
$ gem install gridle
```

Or simply by downloading the package :
[Download the package](https://github.com/olivierbossel/gridle/archive/2.0.0.zip)

### Files structure

This is the file structure that we use in our project. Feel free to adapt this depending on your needs...

#### _settings.scss

This file contains all your grid setup instructions.

```scss
// import gridle
@import "gridle/gridle";

// setting up the grid
@include gridle_setup( (
	context : 12,
	gutter-width : 20px,
	direction : rtl,
	// etc...
) );

// make the use of media queries really easy
@include gridle_register_state ( mobile , (
	max-width : 480px 
) );
@include gridle_register_state ( tablet , (
	min-width : 481px,
	max-width : 1024px
) ) ;

// even with full custom queries :
@include gridle_register_state ( landscape, (
	query : "(orientation : landscape)"
) );
```

#### grid.scss

This file will be your actual grid classes. You need to import the settings and use the gridle_generate_classes mixin in order to get your classes.

```scss
// import settings :
@import 'settings';

// generate classes :
@include gridle_generate_classes ( );

// manage container width :
.container {
	max-width : 960px;
	margin : 0 auto;
}
```

#### index.html

Here's how you use your grid classes in your html.

```markup
<!-- If want to use mixins, no need to add classes -->
<div class="container">
	<div class="gr-12" id="header">
		I'm the header, 12 columns width
	</div>
	<div class="gr-8 gr-12@mobile" id="content">
		I'm the content, 8 columns width, but 12 on mobile
	</div>
	<div class="gr-4 gr-12@mobile" id="sidebar">
		I'm the sidebar, 4 columns width, but 12 on mobile
	</div>
</div>
```


#### style.css

In your style.scss file, you need also to include the settings, then you can use all the gridle mixins inside your code like so:

```scss
// import settings :
@import 'settings';

#header {
	@include gridle_grid ( 12 );
}
#content {
	@include gridle_grid ( 8 );
	@include gridle_state ( mobile ) {
		@include gridle_grid ( 12 );
	}
}
#sidebar {
	// sidebar will make 4 columns width
	@include gridle_grid ( 4 );
	background : yellow ;

	// update sidebar look and feel for mobile and tablet
	@include gridle_state (  mobile tablet  ) {
		background : red;
	}
}
```