# 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, use NPM like so:

```
$ npm install @coffeekraken/gridle
```

## 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 "node_modules/@coffeekraken/gridle/index";

// setting up the grid
@include g-setup((
	columns: 12,
	column-width: 60,
	width: 1200,
	container-width: 85vw,
	container-max-width: 1440px
));

// make the use of media queries really easy
@include g-register-state(tablet, (
	min-width : 640px
));
@include g-register-state(desktop, (
	min-width : 992px
));

// even with full custom queries :
@include g-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 ```g-classes``` mixin in order to get your classes.

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

// generate classes :
@include g-classes();
```

### index.html

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

```html
<!-- If want to use mixins, no need to add classes -->
<div class="container">
	<div class="gr">
		<div class="col col--12" id="header">
			I'm the header, 12 columns width
		</div>
		<div class="col col--12 col--8@tablet" id="content">
			I'm the content, 12 columns on mobile, but 8 from tablet
		</div>
		<div class="col col--12 col--4@tablet" id="sidebar">
			I'm the sidebar, 12 columns on mobile, but 4 from tablet
		</div>
	</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';

#sidebar {
	background : yellow;

	// update sidebar look and feel for tablet
	@include g-state(tablet) {
		background : red;
	}
}
```