-
Notifications
You must be signed in to change notification settings - Fork 0
/
minisink.jade
130 lines (130 loc) · 5.02 KB
/
minisink.jade
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
extends layouts/default.jade
block content
.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')