Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Jade version of index.html for Foundation 6
doctype html
html.no-js(lang='en')
head
meta(charset='utf-8')
meta(http-equiv='x-ua-compatible', content='ie=edge')
meta(name='viewport', content='width=device-width, initial-scale=1.0')
title Foundation for Sites
link(rel='stylesheet', href='css/app.css')
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
br
| Everything 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
br
| These 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
br
| Join 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
br
| Latest code, issue reports, feature requests and more.
.large-4.medium-4.medium-pull-2.columns
p
a(href='https://twitter.com/ZURBfoundation') @zurbfoundation
br
| Ping 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(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
.input-group
input.input-group-field(type='text', placeholder='small-9.columns')
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(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.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(src='bower_components/jquery/dist/jquery.js')
script(src='bower_components/what-input/what-input.js')
script(src='bower_components/foundation-sites/dist/foundation.js')
script(src='js/app.js')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.