teagles / wagon

---
title: Home page
published: true
---
!!!
%html.no-js{lang: "en"}
  %head
    %meta{charset: "utf-8"}/
    %meta{content: "width=device-width, initial-scale=1.0", name: "viewport"}/
    %title Foundation 5
    {{ 'app.min.css' | stylesheet_tag }}
    {{ 'vendor/modernizr.min.js' | javascript_tag }}
    {% inline_editor %}
  %body
    {% block 'main' %}
    .row
      .large-12.columns
        %h1 Welcome to Foundation 5
    .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/
            .large-4.medium-4.columns
              %p
                %a{href: "http://github.com/zurb/foundation"} Foundation on Github
                = succeed "Latest" do
                  %br/
            .large-4.medium-4.columns
              %p
                %a{href: "http://twitter.com/foundationzurb"} @foundationzurb
                = succeed "Ping" do
                  %br/
    .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
    {% 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 }}
    :javascript
      $(document).foundation();