Clone
---
title: Home page
published: true
---
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ site.name }}</title>
{{ 'application.css' | stylesheet_tag }}
{{ 'vendor/modernizr.min.js' | javascript_tag }}
{% inline_editor %}
</head>
<body>
{% block 'main' %}
<div class="row">
<div class="large-12 columns">
<h1>{{ page.title }}</h1>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="panel">
<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://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
</div>
<div class="large-4 medium-4 columns">
<p><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If 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="callout panel">
<p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.panel 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="callout panel">
<p>Six columns</p>
</div>
</div>
<div class="large-6 medium-6 columns">
<div class="callout panel">
<p>Six columns</p>
</div>
</div>
</div>
<div class="row">
<div class="large-4 medium-4 small-4 columns">
<div class="callout panel">
<p>Four columns</p>
</div>
</div>
<div class="large-4 medium-4 small-4 columns">
<div class="callout panel">
<p>Four columns</p>
</div>
</div>
<div class="large-4 medium-4 small-4 columns">
<div class="callout panel">
<p>Four columns</p>
</div>
</div>
</div>
<hr />
<h5>
We bet you’ll need a form somewhere:
</h5>
<form>
<div class="row">
<div class="large-12 columns">
<label>Input Label</label>
<input type="text" placeholder="large-12.columns" />
</div>
</div>
<div class="row">
<div class="large-4 medium-4 columns">
<label>Input Label</label>
<input type="text" placeholder="large-4.columns" />
</div>
<div class="large-4 medium-4 columns">
<label>Input Label</label>
<input type="text" placeholder="large-4.columns" />
</div>
<div class="large-4 medium-4 columns">
<div class="row collapse">
<label>Input Label</label>
<div class="small-9 columns">
<input type="text" placeholder="small-9.columns" />
</div>
<div class="small-3 columns">
<span class="postfix">
.com
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Select Box</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
</div>
</div>
<div class="row">
<div class="large-6 medium-6 columns">
<label>Choose Your Favorite</label>
<input type="radio" name="pokemon" value="Red" id="pokemonRed">
<label for="pokemonRed">Radio 1</label>
<input type="radio" name="pokemon" value="Blue" id="pokemonBlue">
<label for="pokemonBlue">Radio 2</label>
</div>
<div class="large-6 medium-6 columns">
<label>Check these out</label>
<input id="checkbox1" type="checkbox">
<label for="checkbox1">Checkbox 1</label>
<input id="checkbox2" type="checkbox">
<label for="checkbox2">Checkbox 2</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Textarea Label</label>
<textarea placeholder="small-12.columns"></textarea>
</div>
</div>
</form>
</div>
<div class="large-4 medium-4 columns">
<h5>
Try one of these buttons:
</h5>
<p><a href="#" class="small button">Simple Button</a><br/>
<a href="#" class="small radius button">Radius Button</a><br/>
<a href="#" class="small round button">Round Button</a><br/>
<a href="#" class="medium success button">Success Btn</a><br/>
<a href="#" class="medium alert button">Alert Btn</a><br/>
<a href="#" class="medium secondary button">Secondary Btn</a></p>
<div class="panel">
<h5>
So many components, girl!
</h5>
<p>A whole kitchen sink of goodies comes with Foundation. Checkout the docs to see them all, along with details on making them your own.</p>
<a href="http://foundation.zurb.com/docs/" class="small button">Go to Foundation Docs</a>
</div>
</div>
</div>
{% endblock %}
{{ 'vendor/jquery.min.js' | javascript_tag }}
{{ 'foundation.min.js' | javascript_tag }}
<!--
{{ 'foundation.abide.js' | javascript_tag }}
{{ 'foundation.accordion.js' | javascript_tag }}
{{ 'foundation.alert.js' | javascript_tag }}
{{ 'foundation.clearing.js' | javascript_tag }}
{{ 'foundation.dropdown.js' | javascript_tag }}
{{ 'foundation.interchange.js' | javascript_tag }}
{{ 'foundation.joyride.js' | javascript_tag }}
{{ 'foundation.js' | javascript_tag }}
{{ 'foundation.magellan.js' | javascript_tag }}
{{ 'foundation.offcanvas.js' | javascript_tag }}
{{ 'foundation.orbit.js' | javascript_tag }}
{{ 'foundation.reveal.js' | javascript_tag }}
{{ 'foundation.tab.js' | javascript_tag }}
{{ 'foundation.tooltip.js' | javascript_tag }}
{{ 'foundation.topbar.js' | javascript_tag }}
-->
<script>
$(document).foundation();
</script>
</body>
</html>