# The Grid

Problem: You've got tons of content, each needing different sized cells, and don't know how to quick and easily get it all done. Solution: The awesome XY grid!

--- ## Overview The grid is built around two key elements: grid-x and cells. grid-container create a max-width and contain the grid, and cells create the final structure. Everything on your page that you don't give a specific structural style to should be within a grid-x or cell. --- ## Nesting In the Grid you can nest cells down as far as you'd like. Just embed grid-x inside cells and go from there. Each embedded grid-x can contain up to 12 cells. --- ## How to Use Using this framework is easy. Here's how your code will look when you use a series of `
` tags to create cells. ```html
...
...
```
4
4
4
3
6
3
2
8
2
3
9
4
8
5
7
6
6
--- ## Nesting grid-x In the Grid you can nest cells down as far as you'd like. Just embed grid-x inside cells and go from there. Each embedded grid-x can contain up to 12 cells. ```html
8
8 Nested
8 Nested Again
4
4
4
```
8
8 Nested
8 Nested Again
4
4
4
--- ## Small Grid As you've probably noticed in the examples above, you have access to a small, medium, and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding medium or large grid classes. ```html
2
10, last
3
9, last
```
2
10, last
3
9, last
# Colors

Below you can find the different values we created that support the primary color variable you can change at any time in \_settings.scss

---
#2199e8
#3adb76
#ffae00
#ec5840
#0a0a0a
# Typography

This design uses Helvetica Neue for headings and paragraph text.

--- ## Headings Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest) --- ## Paragraphs Paragraphs are groups of sentences, each with a lead (first sentence) and transition (last sentence). They are block level elements, meaning they stack vertically when repeated. Use them as such. ---

Heading Level 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.

Heading Level 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.

Heading Level 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.

Heading Level 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
Heading Level 5
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.
Heading Level 6
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. # Buttons

Buttons are tied to an action of some kind, whether that button is on a cheese dispenser or launches the rocket that you're strapped to. On the web, we follow similar conventions.

--- ## Primary Buttons These buttons are primary calls to action and should be used sparingly. Their size can be adjusted with the `.tiny`, `.small`, and `.large` classes. ```html_example Large button Regular button Small button Tiny button ``` --- ## Secondary Buttons These buttons are used for less important, secondary actions on a page. ```html_example Large button Regular button Small button Tiny button ``` # Forms

Use forms to allow users to interact with the site and provide information to the company.

--- ## Elements of a Form A form should be marked up using its default HTML properties. The ones we make use of include (in hierarchical order): - Form - Label - Input - Select - Text area - Button --- ## How to Use Make forms great and easy to use with the following rules: - Wrap checkboxes and radio buttons within labels for larger hit areas, and be sure to set the for, name, and id attributes for all applicable elements. - Series of checkboxes and radio buttons below within a `