Foundation is a front-end framework, much like Bootstrap, that aims to give you some bass styling and functionality for common elements you'll use
## Download Foundation
To download it:
1. Go to https://foundation.zurb.com/ and click the "Download Foundation" button
1. You'll be taken to another page where you can select different versions of the framework
1. Choose "Download Everything"
1. Unzip the file downloaded
1. Open the `foundation-X.X.X-complete` dir in your code editor
## Use some common Foundation elements
Inside your downloaded directory, you'll see an index.html file which provides you lots of good examples for components you might want to use. Most notably:
Grid systems are great for laying out a site. Most sites adhere to a 12 vertical grid system, where the page is visually divided into 12 vertical columns (each with a gutter, or margin, between them):
Each visual element can take up somewhere between 1 and 12 of these columns. This make spacing uniform across the page, and brings a sense of cohesion to the visual design.
```html
<divclass="grid-x grid-padding-x">
<divclass="large-12 cell">
<divclass="primary callout">
<p><strong>This is a twelve cell section in a grid-x.</strong> Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.</p>
</div>
</div>
</div>
<divclass="grid-x grid-padding-x">
<divclass="large-6 medium-6 cell">
<divclass="primary callout">
<p>Six cell</p>
</div>
</div>
<divclass="large-6 medium-6 cell">
<divclass="primary callout">
<p>Six cell</p>
</div>
</div>
</div>
<divclass="grid-x grid-padding-x">
<divclass="large-4 medium-4 small-4 cell">
<divclass="primary callout">
<p>Four cell</p>
</div>
</div>
<divclass="large-4 medium-4 small-4 cell">
<divclass="primary callout">
<p>Four cell</p>
</div>
</div>
<divclass="large-4 medium-4 small-4 cell">
<divclass="primary callout">
<p>Four cell</p>
</div>
</div>
</div>
```
**Note** that when declaring a cell, you can specify how many columns an element will take up at smaller sized screens:
```html
<divclass="large-4 medium-4 small-4 cell">
<divclass="primary callout">
<p>Four cell</p>
</div>
</div>
```
The above example takes up 4 columns in large screens, 4 columns in medium screens, and 4 columns in small screens.
If you omit these classes, on the screen sizes, omitted, the cell will default to 12 columns.
### Callouts
Box off a section:
```html
<divclass="callout">
<h5>So many components, girl!</h5>
<p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
<ahref="http://foundation.zurb.com/sites/docs/"class="small button">Go to Foundation Docs</a>
</div>
```
### Form elements:
Most inputs don't need classes
```html
<inputtype="text"placeholder="just like normal"/>
<select>
<optionvalue="husker">Husker</option>
<optionvalue="starbuck">Starbuck</option>
<optionvalue="hotdog">Hot Dog</option>
<optionvalue="apollo">Apollo</option>
</select>
<inputtype="radio"/>
<inputtype="checkbox"/>
<textareaplaceholder="Basic text area"></textarea>
```
You can put inputs together with other elements:
```html
<divclass="input-group">
<inputtype="text"placeholder="input with element"class="input-group-field"/>
<spanclass="input-group-label">.com</span>
</div>
```
### BUT WAIT THERE'S MORE!!
Visit [the docs](https://foundation.zurb.com/sites/docs/) for more information. Zurb has put a lot of effort into making the documentation easy to use, including videos! Just copy, paste, and modify all you want!
## Build Foundation using the CLI
You also have the option to create a foundation site using source code. To do this, we'll use an npm packaged called `foundation-sites`
```
sudo npm install --global foundation-cli
```
Now that you have that, you can do to following to create a new site:
```
foundation new
```
After following the prompts, you have a new site generate
1. Open up the directory in your IDE.
1. Open the index.html in your browser
1. In your terminal, run: `npm run start`
This will recompile your css files whenever you make a change.
