+**Please open all issues with this template on the main [Foundation for Sites](https://github.com/zurb/foundation-sites/issues) repo.**
+
+This is the official ZURB Template for use with [Foundation for Sites](http://foundation.zurb.com/sites). We use this template at ZURB to deliver static code to our clients. It has a Gulp-powered build system with these features:
+
+- Handlebars HTML templates with Panini
+- Sass compilation and prefixing
+- JavaScript concatenation
+- Built-in BrowserSync server
+- For production builds:
+ - CSS compression
+ - JavaScript compression
+ - Image compression
+
+## Installation
+
+To use this template, your computer needs:
+
+- [NodeJS](https://nodejs.org/en/) (0.12 or greater)
+- [Git](https://git-scm.com/)
+
+This template can be installed with the Foundation CLI, or downloaded and set up manually.
+
+### Using the CLI
+
+Install the Foundation CLI with this command:
+
+```bash
+npm install foundation-cli --global
+```
+
+Use this command to set up a blank Foundation for Sites project with this template:
+
+```bash
+foundation new --framework sites --template zurb
+```
+
+The CLI will prompt you to give your project a name. The template will be downloaded into a folder with this name.
+
+### Manual Setup
+
+To manually set up the template, first download it with Git:
+ <h3>We’re stoked you want to try Foundation! </h3>
+ <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
+ <p>Once you've exhausted the fun in this document, you should check out:</p>
+ <div class="row">
+ <div class="large-4 medium-4 columns">
+ <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
+ </div>
+ <div class="large-4 medium-4 columns">
+ <p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
+ </div>
+ <div class="large-4 medium-4 columns">
+ <p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowlege.</p>
+ <p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="row">
+ <div class="large-8 medium-8 columns">
+ <h5>Here’s your basic grid:</h5>
+ <!-- Grid Example -->
+
+ <div class="row">
+ <div class="large-12 columns">
+ <div class="primary callout">
+ <p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.callout element so you can see where the columns are - it's not required at all for the grid.</p>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="large-6 medium-6 columns">
+ <div class="primary callout">
+ <p>Six columns</p>
+ </div>
+ </div>
+ <div class="large-6 medium-6 columns">
+ <div class="primary callout">
+ <p>Six columns</p>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="large-4 medium-4 small-4 columns">
+ <div class="primary callout">
+ <p>Four columns</p>
+ </div>
+ </div>
+ <div class="large-4 medium-4 small-4 columns">
+ <div class="primary callout">
+ <p>Four columns</p>
+ </div>
+ </div>
+ <div class="large-4 medium-4 small-4 columns">
+ <div class="primary callout">
+ <p>Four columns</p>
+ </div>
+ </div>
+ </div>
+
+ <hr />
+
+ <h5>We bet you’ll need a form somewhere:</h5>
+<p class="lead">Problem: You've got tons of content, each needing different sized vertical columns, and don't know how to quick and easily get it all done. Solution: The awesome grid!</p>
+
+---
+
+## Overview
+
+The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns, and columns create the final structure. Everything on your page that you don't give a specific structural style to should be within a row or column.
+
+---
+
+## Nesting
+
+In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.
+
+---
+
+## How to Use
+
+Using this framework is easy. Here's how your code will look when you use a series of <div> tags to create vertical columns.
+In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.
+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
+<div class="row">
+ <div class="small-2 columns">2</div>
+ <div class="small-10 columns">10, last</div>
+</div>
+<div class="row">
+ <div class="small-3 columns">3</div>
+ <div class="small-9 columns">9, last</div>
+</div>
+```
+
+<div class="row display">
+ <div class="small-2 columns">2</div>
+ <div class="small-10 columns">10, last</div>
+</div>
+<div class="row display">
+ <div class="small-3 columns">3</div>
+ <div class="small-9 columns">9, last</div>
+</div>
+
+
+
+# Colors
+
+<p class="lead">Below you can find the different values we created that support the primary color variable you can change at any time in <code>\_settings.scss</code></p>
+
+---
+
+<div class="row up-1 medium-up-3 large-up-5">
+ <div class="column">
+ <div class="color-block">
+ <span style="background: #2199e8"></span>
+ #2199e8
+ </div>
+ </div>
+ <div class="column">
+ <div class="color-block">
+ <span style="background: #3adb76"></span>
+ #3adb76
+ </div>
+ </div>
+ <div class="column">
+ <div class="color-block">
+ <span style="background: #ffae00"></span>
+ #ffae00
+ </div>
+ </div>
+ <div class="column">
+ <div class="color-block">
+ <span style="background: #ec5840"></span>
+ #ec5840
+ </div>
+ </div>
+ <div class="column">
+ <div class="color-block">
+ <span style="background: #0a0a0a"></span>
+ #0a0a0a
+ </div>
+ </div>
+</div>
+
+
+
+# Typography
+
+<p class="lead">This design uses Helvetica Neue for headings and paragraph text.</p>
+
+---
+
+## 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.
+
+---
+
+<h1>Heading Level 1</h1>
+
+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.
+
+<h2>Heading Level 2</h2>
+
+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.
+
+<h3>Heading Level 3</h3>
+
+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.
+
+<h4>Heading Level 4</h4>
+
+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.
+
+<h5>Heading Level 5</h5>
+
+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.
+
+<h6>Heading Level 6</h6>
+
+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
+
+<p class="lead">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.</p>
+
+---
+
+## 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
+<a href="#" class="primary large button">Large button</a>
+<p class="lead">Use forms to allow users to interact with the site and provide information to the company.</p>
+
+---
+
+## 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 `<ul class="inline-list">`.
+- Before selecting any set of fields to use for a required input, explore other options (e.g., radio buttons over select lists).
+
+---
+
+## Learn All About Forms
+
+Check out the [Foundation Docs](http://foundation.zurb.com/sites/docs) to learn about how flexible our forms are for creating different layouts. It works perfectly with the grid to meet all your form needs.
+
+---
+
+## Form Layouts
+
+Form elements in Foundation are styled based on their type attribute rather than a class. Inputs in Foundation have another major advantage — they are full width by default. That means that inputs will run as wide as the column that contains them. However, you have two options which make these forms extremely versatile:
+
+- You can size inputs using column sizes, like `.medium-6`, `.small-6`.
+- You can create row elements inside your form and use columns for the form, including inputs, labels and more. Rows inside a form inherit some special padding to even up input spacing.
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora omnis suscipit id ut laborum recusandae molestias hic aliquid **expedita!** [Non dicta](zurb.com), autem obcaecati error, id ab voluptate unde culpa nulla.
+ /* This styles the color blocks used in the color documentation. */
+ .color-block {
+ border-radius: 2px;
+ display: block;
+ padding: 8px 8px 6px;
+ color: #333;
+ text-transform: uppercase;
+ border: 1px solid #ddd;
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+ }
+ .color-block span {
+ display: block;
+ width: 100%;
+ height: 100px;
+ margin-bottom: 0.42857rem;
+ }
+ </style>
+ </head>
+ <body>
+
+ <div class="column row">
+ <h1>Client Style Guide</h1>
+ <p class="lead">This style guide was built with Foundation for Sites. For more information on how to use this responsive front-end framework, check out the documentation, get help from the Foundation community, or request immediate technical support.</p>
+ <a href="http://foundation.zurb.com/docs/" class="button">Visit the Docs</a>