Clone
---
title: Home page
published: true
---
!!!
%html.no-js{:lang => "en"}
%head
%meta{:charset => "utf-8"}
%meta{:content => "ie=edge", "http-equiv" => "x-ua-compatible"}
%meta{:content => "width=device-width, initial-scale=1.0", :name => "viewport"}
%title Foundation for Sites
{{ 'app.css' | stylesheet_tag }}
%body
.row
.large-12.columns
%h1 Welcome to Foundation
.row
.large-12.columns
.callout
%h3 We’re stoked you want to try Foundation!
%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 Once you've exhausted the fun in this document, you should check out:
.row
.large-4.medium-4.columns
%p
%a{:href => "http://foundation.zurb.com/docs"} Foundation Documentation
= succeed "Everything" do
%br/
you need to know about using the framework.
.large-4.medium-4.columns
%p
%a{:href => "http://zurb.com/university/code-skills"} Foundation Code Skills
= succeed "These" do
%br/
online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.
.large-4.medium-4.columns
%p
%a{:href => "http://foundation.zurb.com/forum"} Foundation Forum
= succeed "Join" do
%br/
the Foundation community to ask a question or show off your knowlege.
.row
.large-4.medium-4.medium-push-2.columns
%p
%a{:href => "http://github.com/zurb/foundation"} Foundation on Github
= succeed "Latest" do
%br/
code, issue reports, feature requests and more.
.large-4.medium-4.medium-pull-2.columns
%p
%a{:href => "https://twitter.com/ZURBfoundation"} @zurbfoundation
= succeed "Ping" do
%br/
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).
.row
.large-8.medium-8.columns
%h5 Here’s your basic grid:
/ Grid Example
.row
.large-12.columns
.primary.callout
%p
%strong This is a twelve column section in a row.
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.
.row
.large-6.medium-6.columns
.primary.callout
%p Six columns
.large-6.medium-6.columns
.primary.callout
%p Six columns
.row
.large-4.medium-4.small-4.columns
.primary.callout
%p Four columns
.large-4.medium-4.small-4.columns
.primary.callout
%p Four columns
.large-4.medium-4.small-4.columns
.primary.callout
%p Four columns
%hr/
%h5 We bet you’ll need a form somewhere:
%form
.row
.large-12.columns
%label Input Label
%input{:placeholder => "large-12.columns", :type => "text"}/
.row
.large-4.medium-4.columns
%label Input Label
%input{:placeholder => "large-4.columns", :type => "text"}/
.large-4.medium-4.columns
%label Input Label
%input{:placeholder => "large-4.columns", :type => "text"}/
.large-4.medium-4.columns
.row.collapse
%label Input Label
.input-group
%input.input-group-field{:placeholder => "small-9.columns", :type => "text"}/
%span.input-group-label .com
.row
.large-12.columns
%label Select Box
%select
%option{:value => "husker"} Husker
%option{:value => "starbuck"} Starbuck
%option{:value => "hotdog"} Hot Dog
%option{:value => "apollo"} Apollo
.row
.large-6.medium-6.columns
%label Choose Your Favorite
%input#pokemonRed{:name => "pokemon", :type => "radio", :value => "Red"}
%label{:for => "pokemonRed"} Radio 1
%input#pokemonBlue{:name => "pokemon", :type => "radio", :value => "Blue"}
%label{:for => "pokemonBlue"} Radio 2
.large-6.medium-6.columns
%label Check these out
%input#checkbox1{:type => "checkbox"}
%label{:for => "checkbox1"} Checkbox 1
%input#checkbox2{:type => "checkbox"}
%label{:for => "checkbox2"} Checkbox 2
.row
.large-12.columns
%label Textarea Label
%textarea{:placeholder => "small-12.columns"}
.large-4.medium-4.columns
%h5 Try one of these buttons:
%p
%a.button{:href => "#"} Simple Button
%br/
%a.success.button{:href => "#"} Success Btn
%br/
%a.alert.button{:href => "#"} Alert Btn
%br/
%a.secondary.button{:href => "#"} Secondary Btn
.callout
%h5 So many components, girl!
%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.
%a.small.button{:href => "http://foundation.zurb.com/sites/docs/"} Go to Foundation Docs
%script{:crossorigin => "anonymous", :integrity => "sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=", :src => "https://code.jquery.com/jquery-2.2.3.min.js"}
{{'vendor/what-input.min.js' | javascript_tag }}
{{ 'vendor/foundation.min.js' | javascript_tag }}
{{'app.js' | javascript_tag }}