## Quick Reference

These quick guides will help you get started. For more detailed instructions check out the documentation.

### Grid (_layout.scss)

Mixin | Usage
--- | ---
`@include container()` | Apply to an element wrapping the column structure
`@include columns($columns, $offset, $gutter)` | `@include columns(8, 0, 0)`
`@include responsive-columns($breakpoint, $columns, $offset);` | Apply to overwrite default breakpoint columns

### Grid Settings(_variables.scss)

Grid breakpoints and settings are set in `_variables.scss`

Check grid examples here

### Breakpoints (_variables.scss)

Mixin | Usage
--- | ---
`@include respond-to($breakpoint-name)` | `@include respond-to('mobile') { /* custom styles */ }`

### Buttons (_buttons.scss)

Social icons are achived by prefixing icon text with:
`<span class="icon-[socialNework]">`

### Forms (_forms.scss)

All HTML5 form elements are normalized to a set of core styles.

### Mixins (_mixins.scss)

Base includes scss mixins for CSS3 properties, animations, gradients and some utility mixins. Check the source to see what's available.

### Type (_type.scss)

Typography is controlled in `_type.scss`. Base provides a clean and sensible reset for heading styles, paragraphs, tables, lists and others.

### Variables (_variables.scss)

Control colors and fonts across the site. Begins with:

- Heading font-family - @headingFont
- Paragraph font-family - @paragraphFont
- Text color - @textColor
- Base color - @baseColor
- Primary color - @primaryColor
- Secondary color - @secondaryColor

## Resources

#### Documentation

More detailed documentation is available on the GitHub repo.

#### CSS Compiler

Base includes Grunt configuration and tasks to watch and compile scss files. With npm installed, navigate to the Base directory in command line and run `npm install` then `grunt dev`.

#### Sidebar Content

This is a sidebar block to demonstrate a basic Base grid. Change the columns in `_layout.scss` and resize the page to see how the compiled responsive files work