index.haml

.row
  .large-12.columns
    %h1 Welcome to Foundation
.row
  .large-12.columns
    .panel
      %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://github.com/zurb/foundation"} Foundation on Github
            = succeed "Latest" do
              %br/
            code, issue reports, feature requests and more.
        .large-4.medium-4.columns
          %p
            %a{:href => "http://twitter.com/foundationzurb"} @foundationzurb
            = succeed "Ping" do
              %br/
            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).
.row
  .large-8.medium-8.columns
    %h5 Here’s your basic grid:
    / Grid Example
    .row
      .large-12.columns
        .callout.panel
          %p
            %strong This is a twelve column section in a row.
            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.
    .row
      .large-6.medium-6.columns
        .callout.panel
          %p Six columns
      .large-6.medium-6.columns
        .callout.panel
          %p Six columns
    .row
      .large-4.medium-4.small-4.columns
        .callout.panel
          %p Four columns
      .large-4.medium-4.small-4.columns
        .callout.panel
          %p Four columns
      .large-4.medium-4.small-4.columns
        .callout.panel
          %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
            .small-9.columns
              %input{:placeholder => "small-9.columns", :type => "text"}/
            .small-3.columns
              %span.postfix .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.small.button{:href => "#"} Simple Button
      %br/
      %a.small.radius.button{:href => "#"} Radius Button
      %br/
      %a.small.round.button{:href => "#"} Round Button
      %br/
      %a.medium.success.button{:href => "#"} Success Btn
      %br/
      %a.medium.alert.button{:href => "#"} Alert Btn
      %br/
      %a.medium.secondary.button{:href => "#"} Secondary Btn
    .panel
      %h5 So many components, girl!
      %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.
      %a.small.button{:href => "http://foundation.zurb.com/docs/"} Go to Foundation Docs
%script{:src => "bower_components/jquery/dist/jquery.min.js"}
%script{:src => "bower_components/foundation/js/foundation.min.js"}
%script{:src => "js/app.js"}