# Code
To make sure our code stays DRY we want you to know a couple of things.

# Overview
We use `matise-stack`, `matise-assets` and `matise-grid`. We use classes and SCSS functions to make our lives easier.

# Foundations
# Grid & spacing

#### The Row
A ".row" needs to be made every time you create a new row.

`<div class="row"></div>`

#### The column
To create columns, make sure you always have a row as direct parent. Columns without rows dont get any styling.

```
<div class="row">
  <div class="column"></div>
</div>
```
#### The columns size
To give a column a certain width, give the .column a class. This can be classes based on how many columns (out of 24) you need, or this can be done with parts (half, quarter, see below for more options).

```
<div class="row">
  <div class="column column-12">This is a column half the width of the row</div>
  <div class="column column-half">This column will look exactly the same like the one above</div>
</div>
```

#### The column size on different screens
Sometimes, you want to be able to change the size of the column based on the screen width. This can be done by giving simple classes based on the screen width breakpoints and the width you want to give the column.

Names and widths can be found below under "Breakpoints"

```
<div class="row">
  <div class="column small-12 medium-8 large-6">
    This column will be;
      - half the width on a small screen.
      - One third of the width of the row on a medium screen
      - And a quarter on a large screen
  </div>
</div>
```