doctype html
html.no-js(lang='en')
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    title Foundation
    link(rel='stylesheet', href='styles/app.css')<% if (modernizr) { %>
    script(src='bower_components/modernizr/modernizr.js')<% } %>
  body
    .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
                br
                | Everything you need to know about using the framework.
            .large-4.medium-4.columns
              p
                a(href='http://github.com/zurb/foundation') Foundation on Github
                br
                | Latest code, issue reports, feature requests and more.
            .large-4.medium-4.columns
              p
                a(href='http://twitter.com/foundationzurb') @foundationzurb
                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).
    .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(type='text', placeholder='large-12.columns')
          .row
            .large-4.medium-4.columns
              label Input Label
              input(type='text', placeholder='large-4.columns')
            .large-4.medium-4.columns
              label Input Label
              input(type='text', placeholder='large-4.columns')
            .large-4.medium-4.columns
              .row.collapse
                label Input Label
                .small-9.columns
                  input(type='text', placeholder='small-9.columns')
                .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(type='radio', name='pokemon', value='Red')
              label(for='pokemonRed') Radio 1
              input#pokemonBlue(type='radio', name='pokemon', 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

    //- Scripts
    //- ==========================================
    // script(src='scripts/app.js')
    script(src='scripts/vendor.js')
    script(src='scripts/main.js')