-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathstyleguide.html
401 lines (377 loc) · 30.3 KB
/
styleguide.html
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Style Guide</title>
<link rel="stylesheet" href="assets/css/app.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
<!-- Style guide-specific CSS goes here. -->
<style>
/* This styles the vertical tabs used for the table of contents. */
.tabs.vertical {
width: 100%;
max-width: 100%;
}
/* This styles code blocks used for examples. */
.ss-code code {
display: block;
padding: 1rem;
overflow-x: scroll;
margin-bottom: 1.5rem;
}
/* This styles the example rows used in the grid documentation. */
.row.display {
background: #eee;
font-size: 11px;
margin-bottom: 10px;
line-height: 2rem;
border: solid 1px #c6c6c6;
margin-left: 0 !important;
margin-right: 0 !important; }
.row.display .columns:nth-child(2), .row.display .columns.small-centered, .row.display .columns.large-centered {
background: #e1e1e1; }
.row.display .columns.color-end {
background: #d4d4d4; }
/* This styles the color blocks used in the color documentation. */
.color-block {
border-radius: 2px;
display: block;
padding: 8px 8px 6px;
color: #333;
text-transform: uppercase;
border: 1px solid #ddd;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
.color-block span {
display: block;
width: 100%;
height: 100px;
margin-bottom: 0.42857rem;
}
</style>
</head>
<body>
<div class="column row">
<h1>Client Style Guide</h1>
<p class="lead">This style guide was built with Foundation for Sites. For more information on how to use this responsive front-end framework, check out the documentation, get help from the Foundation community, or request immediate technical support.</p>
<a href="http://foundation.zurb.com/docs/" class="button">Visit the Docs</a>
<a href="http://foundation.zurb.com/forum/" class="secondary button">Foundation Forum</a>
<a href="http://foundation.zurb.com/business/business-support.html" class="secondary button">Technical Support</a>
</div>
<div class="column row"><div class="row collapse">
<div class="large-3 medium-4 columns">
<ul class="vertical tabs" data-tabs id="ss-sections">
<li class="tabs-title is-active" aria-selected="true"><a href="#the-grid">The Grid</a></li>
<li class="tabs-title"><a href="#colors">Colors</a></li>
<li class="tabs-title"><a href="#typography">Typography</a></li>
<li class="tabs-title"><a href="#buttons">Buttons</a></li>
<li class="tabs-title"><a href="#forms">Forms</a></li>
</ul>
</div>
<div class="large-9 medium-8 columns" data-tabs-content="ss-sections">
<div class="tabs-content vertical">
<section class="tabs-panel is-active" id="the-grid">
<h1>The Grid</h1><p class="lead">Problem: You've got tons of content, each needing different sized vertical columns, and don't know how to quick and easily get it all done. Solution: The awesome grid!</p>
<hr>
<h2>Overview</h2><p>The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns, and columns create the final structure. Everything on your page that you don't give a specific structural style to should be within a row or column.</p>
<hr>
<h2>Nesting</h2><p>In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.</p>
<hr>
<h2>How to Use</h2><p>Using this framework is easy. Here's how your code will look when you use a series of <div> tags to create vertical columns.</p>
<div class="ss-code"><pre><code class="html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"small-6 medium-4 large-3 columns"</span>></span>...<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"small-6 medium-8 large-9 columns"</span>></span>...<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></code></pre></div><div class="row display">
<div class="small-12 large-4 columns">4</div>
<div class="small-12 large-4 columns">4</div>
<div class="small-12 large-4 columns">4</div>
</div>
<div class="row display">
<div class="small-12 large-3 columns">3</div>
<div class="small-12 large-6 columns">6</div>
<div class="small-12 large-3 columns">3</div>
</div>
<div class="row display">
<div class="small-12 large-2 columns">2</div>
<div class="small-12 large-8 columns">8</div>
<div class="small-12 large-2 columns">2</div>
</div>
<div class="row display">
<div class="small-12 large-3 columns">3</div>
<div class="small-12 large-9 columns">9</div>
</div>
<div class="row display">
<div class="small-12 large-4 columns">4</div>
<div class="small-12 large-8 columns">8</div>
</div>
<div class="row display">
<div class="small-12 large-5 columns">5</div>
<div class="small-12 large-7 columns">7</div>
</div>
<div class="row display">
<div class="small-12 large-6 columns">6</div>
<div class="small-12 large-6 columns">6</div>
</div>
<hr>
<h2>Nesting Rows</h2><p>In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.</p>
<div class="ss-code"><pre><code class="html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"small-8 columns"</span>></span>8
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"small-8 columns"</span>></span>8 Nested
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"small-8 columns"</span>></span>8 Nested Again<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"small-4 columns"</span>></span>4<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"small-4 columns"</span>></span>4<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"small-4 columns"</span>></span>4<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></code></pre></div><div class="row display">
<div class="small-8 columns">8
<div class="row">
<div class="small-8 columns">8 Nested
<div class="row">
<div class="small-8 columns">8 Nested Again</div>
<div class="small-4 columns">4</div>
</div>
</div>
<div class="small-4 columns">4</div>
</div>
</div>
<div class="small-4 columns">4</div>
</div>
<hr>
<h2>Small Grid</h2><p>As you've probably noticed in the examples above, you have access to a small, medium, and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding medium or large grid classes.</p>
<div class="ss-code"><pre><code class="html"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"small-2 columns"</span>></span>2<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"small-10 columns"</span>></span>10, last<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"small-3 columns"</span>></span>3<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"small-9 columns"</span>></span>9, last<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span></code></pre></div><div class="row display">
<div class="small-2 columns">2</div>
<div class="small-10 columns">10, last</div>
</div>
<div class="row display">
<div class="small-3 columns">3</div>
<div class="small-9 columns">9, last</div>
</div>
</section>
<section class="tabs-panel " id="colors">
<h1>Colors</h1><p class="lead">Below you can find the different values we created that support the primary color variable you can change at any time in <code>_settings.scss</code></p>
<hr>
<div class="row up-1 medium-up-3 large-up-5">
<div class="column">
<div class="color-block">
<span style="background: #2199e8"></span>
#2199e8
</div>
</div>
<div class="column">
<div class="color-block">
<span style="background: #3adb76"></span>
#3adb76
</div>
</div>
<div class="column">
<div class="color-block">
<span style="background: #ffae00"></span>
#ffae00
</div>
</div>
<div class="column">
<div class="color-block">
<span style="background: #ec5840"></span>
#ec5840
</div>
</div>
<div class="column">
<div class="color-block">
<span style="background: #0a0a0a"></span>
#0a0a0a
</div>
</div>
</div>
</section>
<section class="tabs-panel " id="typography">
<h1>Typography</h1><p class="lead">This design uses Helvetica Neue for headings and paragraph text.</p>
<hr>
<h2>Headings</h2><p>Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest)</p>
<hr>
<h2>Paragraphs</h2><p>Paragraphs are groups of sentences, each with a lead (first sentence) and transition (last sentence). They are block level elements, meaning they stack vertically when repeated. Use them as such.</p>
<hr>
<h1>Heading Level 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.</p>
<h2>Heading Level 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.</p>
<h3>Heading Level 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.</p>
<h4>Heading Level 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.</p>
<h5>Heading Level 5</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.</p>
<h6>Heading Level 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio.</p>
</section>
<section class="tabs-panel " id="buttons">
<h1>Buttons</h1><p class="lead">Buttons are tied to an action of some kind, whether that button is on a cheese dispenser or launches the rocket that you're strapped to. On the web, we follow similar conventions.</p>
<hr>
<h2>Primary Buttons</h2><p>These buttons are primary calls to action and should be used sparingly. Their size can be adjusted with the <code>.tiny</code>, <code>.small</code>, and <code>.large</code> classes.</p>
<div class="ss-code"><pre><code class="html"><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"primary large button"</span>></span>Large button<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"primary button"</span>></span>Regular button<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"primary small button"</span>></span>Small button<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"primary tiny button"</span>></span>Tiny button<span class="hljs-tag"></<span class="hljs-title">a</span>></span></code></pre></div>
<div class="ss-code-live"><a href="#" class="primary large button">Large button</a>
<a href="#" class="primary button">Regular button</a>
<a href="#" class="primary small button">Small button</a>
<a href="#" class="primary tiny button">Tiny button</a></div><hr>
<h2>Secondary Buttons</h2><p>These buttons are used for less important, secondary actions on a page.</p>
<div class="ss-code"><pre><code class="html"><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"secondary large button"</span>></span>Large button<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"secondary button"</span>></span>Regular button<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"secondary small button"</span>></span>Small button<span class="hljs-tag"></<span class="hljs-title">a</span>></span>
<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"#"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"secondary tiny button"</span>></span>Tiny button<span class="hljs-tag"></<span class="hljs-title">a</span>></span></code></pre></div>
<div class="ss-code-live"><a href="#" class="secondary large button">Large button</a>
<a href="#" class="secondary button">Regular button</a>
<a href="#" class="secondary small button">Small button</a>
<a href="#" class="secondary tiny button">Tiny button</a></div>
</section>
<section class="tabs-panel " id="forms">
<h1>Forms</h1><p class="lead">Use forms to allow users to interact with the site and provide information to the company.</p>
<hr>
<h2>Elements of a Form</h2><p>A form should be marked up using its default HTML properties. The ones we make use of include (in hierarchical order):</p>
<ul>
<li>Form</li>
<li>Label</li>
<li>Input</li>
<li>Select</li>
<li>Text area</li>
<li>Button</li>
</ul>
<hr>
<h2>How to Use</h2><p>Make forms great and easy to use with the following rules:</p>
<ul>
<li>Wrap checkboxes and radio buttons within labels for larger hit areas, and be sure to set the for, name, and id attributes for all applicable elements.</li>
<li>Series of checkboxes and radio buttons below within a <code><ul class="inline-list"></code>.</li>
<li>Before selecting any set of fields to use for a required input, explore other options (e.g., radio buttons over select lists).</li>
</ul>
<hr>
<h2>Learn All About Forms</h2><p>Check out the <a href="http://foundation.zurb.com/sites/docs">Foundation Docs</a> to learn about how flexible our forms are for creating different layouts. It works perfectly with the grid to meet all your form needs.</p>
<hr>
<h2>Form Layouts</h2><p>Form elements in Foundation are styled based on their type attribute rather than a class. Inputs in Foundation have another major advantage — they are full width by default. That means that inputs will run as wide as the column that contains them. However, you have two options which make these forms extremely versatile:</p>
<ul>
<li>You can size inputs using column sizes, like <code>.medium-6</code>, <code>.small-6</code>.</li>
<li>You can create row elements inside your form and use columns for the form, including inputs, labels and more. Rows inside a form inherit some special padding to even up input spacing.</li>
</ul>
<hr>
<h2>Form Example</h2><div class="ss-code"><pre><code class="html"><span class="hljs-tag"><<span class="hljs-title">form</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"large-12 columns"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Label<span class="hljs-tag"></<span class="hljs-title">label</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"placeholder"</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"large-6 columns"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Label<span class="hljs-tag"></<span class="hljs-title">label</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"placeholder"</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"large-6 columns"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row collapse"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Label<span class="hljs-tag"></<span class="hljs-title">label</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"input-group"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"input-group-field"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"placeholder"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">span</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"input-group-label"</span>></span>.com<span class="hljs-tag"></<span class="hljs-title">span</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"large-12 columns"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Select Box<span class="hljs-tag"></<span class="hljs-title">label</span>></span>
<span class="hljs-tag"><<span class="hljs-title">select</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"good"</span>></span>Good<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"better"</span>></span>Better<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"><<span class="hljs-title">option</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"best"</span>></span>Best<span class="hljs-tag"></<span class="hljs-title">option</span>></span>
<span class="hljs-tag"></<span class="hljs-title">select</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"large-6 columns"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Choose Your Favorite<span class="hljs-tag"></<span class="hljs-title">label</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"radio1"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"radio1"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"radio1"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"radio1"</span>></span>Red<span class="hljs-tag"></<span class="hljs-title">label</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"radio"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"radio2"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"radio2"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"radio2"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"radio2"</span>></span>Blue<span class="hljs-tag"></<span class="hljs-title">label</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"large-6 columns"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Check these out<span class="hljs-tag"></<span class="hljs-title">label</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"checkbox1"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"checkbox1"</span>></span>Checkbox 1<span class="hljs-tag"></<span class="hljs-title">label</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"checkbox2"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span>></span><span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"checkbox2"</span>></span>Checkbox 2<span class="hljs-tag"></<span class="hljs-title">label</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"large-12 columns"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Textarea Label<span class="hljs-tag"></<span class="hljs-title">label</span>></span>
<span class="hljs-tag"><<span class="hljs-title">textarea</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"placeholder"</span>></span><span class="hljs-tag"></<span class="hljs-title">textarea</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">form</span>></span></code></pre></div>
<div class="ss-code-live"><form>
<div class="row">
<div class="large-12 columns">
<label>Label</label>
<input type="text" placeholder="placeholder">
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Label</label>
<input type="text" placeholder="placeholder">
</div>
<div class="large-6 columns">
<div class="row collapse">
<label>Label</label>
<div class="input-group">
<input class="input-group-field" type="text" placeholder="placeholder">
<span class="input-group-label">.com</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Select Box</label>
<select>
<option value="good">Good</option>
<option value="better">Better</option>
<option value="best">Best</option>
</select>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Choose Your Favorite</label>
<input type="radio" name="radio1" value="radio1" id="radio1"><label for="radio1">Red</label>
<input type="radio" name="radio2" value="radio2" id="radio2"><label for="radio2">Blue</label>
</div>
<div class="large-6 columns">
<label>Check these out</label>
<input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
<input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Textarea Label</label>
<textarea placeholder="placeholder"></textarea>
</div>
</div>
</form></div>
</section>
</div>
</div>
</div></div>
<script src="assets/js/app.js"></script>
</body>
</html>