source: spip-zone/_plugins_/foundation_6/trunk/content/foundation-test-4.html @ 93756

Last change on this file since 93756 was 93756, checked in by p@…, 5 years ago

Forker foundation

File size: 36.2 KB
Line 
1<header class="show-for-small">
2  <a class='sidebar-button show-for-small' id="sidebarButton" href="#sidebar" ><img src="http://foundation3.zurb.com/docs/assets/offcanvas/menu-wht.png" alt="ZURB Menu"><h4>Foundation</h4></a>
3</header>
4
5
6<div class="row">
7  <div class="large-12 columns">
8    <h1 class="docs header"><a href="http://foundation.zurb.com/docs/">Foundation 4 Documentation</a></h1>
9    <h6 class="docs subheader"><a href="http://foundation.zurb.com/old-docs/f3">Want F3 Docs?</a></h6>
10    <hr>
11  </div>
12</div>
13
14<div id="kitchen-sink" class="row">
15  <div class="large-12 columns">
16    <div class="row">
17      <div class="large-12 columns">
18
19        <h2>Kitchen Sink</h2>
20        <h4 class="subheader">This page includes every single Foundation element so that we can make sure things work together smoothly.</h4>
21        <hr>
22      </div>
23    </div>
24
25    <div class="row">
26      <div class="large-12 columns">
27
28        <h4>Alert Boxes</h4>
29
30        <div data-alert class="alert-box radius">
31          This is a standard alert (div.alert-box).
32          <a href="" class="close">&times;</a>
33        </div>
34
35        <div data-alert class="alert-box success">
36          This is a success alert (div.alert-box.success).
37          <a href="" class="close">&times;</a>
38        </div>
39
40        <div data-alert class="alert-box alert round">
41          This is an alert (div.alert-box.alert.round).
42          <a href="" class="close">&times;</a>
43        </div>
44
45        <div data-alert class="alert-box secondary">
46          This is a secondary alert (div.alert-box.secondary).
47          <a href="" class="close">&times;</a>
48        </div>
49
50        <hr>
51
52        <h4>Block Grid</h4>
53
54        <ul class="small-block-grid-2 large-block-grid-4">
55          <li><img class="th" src="http://lorempixel.com/800/800/"></li>
56          <li><img class="th" src="http://lorempixel.com/800/800/"></li>
57          <li><img class="th" src="http://lorempixel.com/800/800/"></li>
58          <li><img class="th" src="http://lorempixel.com/800/800/"></li>
59        </ul>
60
61        <hr>
62
63        <h4>Breadcrumbs</h4>
64
65        <ul class="breadcrumbs">
66          <li><a href="#">Home</a></li>
67          <li><a href="#">Features</a></li>
68          <li class="unavailable"><a href="#">Gene Splicing</a></li>
69          <li class="current"><a href="#">Cloning</a></li>
70        </ul>
71
72        <hr>
73
74        <h4>Buttons</h4>
75
76        <div class="row">
77          <div class="small-6 large-6 columns">
78            <a href="#" class="tiny button">.tiny.button</a><br>
79            <a href="#" class="small button">.small.button</a><br>
80            <a href="#" class="button">.button</a><br>
81          </div>
82          <div class="small-6 large-6 columns">
83            <a href="#" class="tiny button secondary">.tiny.secondary</a><br>
84            <a href="#" class="small button success radius">.small.success.radius</a><br>
85            <a href="#" class="button alert round disabled">.round.disabled</a><br>
86          </div>
87        </div>
88
89        <hr>
90
91        <h4>Button Groups</h4>
92
93        <ul class="button-group">
94          <li><a href="#" class="small button">Button 1</a></li>
95          <li><a href="#" class="small button">Button 2</a></li>
96          <li><a href="#" class="small button">Button 3</a></li>
97        </ul>
98        <ul class="button-group radius">
99          <li><a href="#" class="button secondary">Button 1</a></li>
100          <li><a href="#" class="button secondary">Button 2</a></li>
101          <li><a href="#" class="button secondary">Button 3</a></li>
102          <li><a href="#" class="button secondary">Button 4</a></li>
103        </ul>
104        <ul class="button-group round even-3">
105          <li><a href="#" class="button alert">Button 1</a></li>
106          <li><a href="#" class="button alert">Button 2</a></li>
107          <li><a href="#" class="button alert">Button 3</a></li>
108        </ul>
109        <ul class="button-group round even-3">
110          <li><input type="submit" class="button success" value="Button 1"></li>
111          <li><input type="submit" class="button success" value="Button 2"></li>
112          <li><input type="submit" class="button success" value="Button 3"></li>
113        </ul>
114
115        <hr>
116
117        <h4>Dropdown Buttons</h4>
118        <ul id="drop" class="f-dropdown content" data-dropdown-content>
119          <li><a href="#">This is a link</a></li>
120          <li><a href="#">This is another</a></li>
121          <li><a href="#">Yet another</a></li>
122        </ul>
123
124        <a href="#" data-dropdown="drop" class="tiny button dropdown">Dropdown Button</a><br>
125        <a href="#" data-dropdown="drop" class="small secondary radius button dropdown">Dropdown Button</a><br>
126        <a href="#" data-dropdown="drop" class="button alert round dropdown">Dropdown Button</a><br>
127        <a href="#" data-dropdown="drop" class="large success button dropdown">Dropdown Button</a><br>
128        <a href="#" data-dropdown="drop" class="large button dropdown expand">Dropdown Button</a>
129
130        <hr>
131
132        <h4>Split Buttons</h4>
133
134        <a href="#" class="tiny button split">Split Button <span data-dropdown="drop"></span></a><br>
135        <a href="#" class="small secondary radius button split">Split Button <span data-dropdown="drop"></span></a><br>
136        <a href="#" class="button alert round split">Split Button <span data-dropdown="drop"></span></a><br>
137        <a href="#" class="large success button split">Split Button <span data-dropdown="drop"></span></a>
138
139        <hr>
140
141        <h4>Clearing</h4>
142
143        <div>
144          <ul class="clearing-thumbs" data-clearing>
145            <li><a class="th" href="http://lorempixel.com/800/800/"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." src="http://lorempixel.com/100/100/"></a></li>
146            <li><a class="th" href="http://lorempixel.com/800/800/"><img src="http://lorempixel.com/100/100/"></a></li>
147            <li><a class="th" href="http://lorempixel.com/800/800/"><img data-caption="Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus." src="http://lorempixel.com/100/100/"></a></li>
148            <li><a class="th" href="http://lorempixel.com/800/800/"><img src="http://lorempixel.com/100/100/"></a></li>
149            <li><a class="th" href="http://lorempixel.com/800/800/"><img data-caption="Integer posuere erat a ante venenatis dapibus posuere velit aliquet." src="http://lorempixel.com/100/100/"></a></li>
150          </ul>
151        </div>
152
153        <hr>
154
155        <h4>Forms</h4>
156
157        <form>
158          <fieldset>
159            <legend>Fieldset</legend>
160
161            <div class="row">
162              <div class="large-12 columns">
163                <label>Input Label</label>
164                <input type="text" placeholder="large-12.columns">
165              </div>
166            </div>
167
168            <div class="row">
169              <div class="large-4 columns">
170                <label>Input Label</label>
171                <input type="text" placeholder="large-4.columns">
172              </div>
173              <div class="large-4 columns">
174                <label>Input Label</label>
175                <input type="text" placeholder="large-4.columns">
176              </div>
177              <div class="large-4 columns">
178                <div class="row collapse">
179                  <label>Input Label</label>
180                  <div class="small-9 columns">
181                    <input type="text" placeholder="small-9.columns">
182                  </div>
183                  <div class="small-3 columns">
184                    <span class="postfix">.com</span>
185                  </div>
186                </div>
187              </div>
188            </div>
189
190            <div class="row">
191              <div class="large-12 columns">
192                <label>Textarea Label</label>
193                <textarea placeholder="small-12.columns"></textarea>
194              </div>
195            </div>
196
197          </fieldset>
198        </form>
199
200        <hr>
201
202        <h4>Custom Forms</h4>
203
204        <form class="custom">
205          <div class="row">
206            <div class="large-4 columns">
207              <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
208              <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
209              <label for="radio1"><input name="radio1" type="radio" id="radio1" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
210            </div>
211            <div class="large-4 columns">
212              <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>
213              <label for="checkbox2"><input type="checkbox" id="checkbox2" CHECKED style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
214              <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3" style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
215            </div>
216            <div class="large-4 columns">
217              <label for="customDropdown1">Medium Example</label>
218              <select id="customDropdown1" class="medium">
219                <option DISABLED>This is a dropdown</option>
220                <option>This is another option</option>
221                <option>This is another option too</option>
222                <option>Look, a third option</option>
223              </select>
224            </div>
225          </div>
226        </form>
227
228        <hr>
229
230        <h4>Dropdowns</h4>
231
232        <a href="#" class="button" data-dropdown="tinyDrop">Link Dropdown &raquo;</a>
233        <a href="#" class="button" data-dropdown="contentDrop">Content Dropdown &raquo;</a>
234        <!-- Dropdowns -->
235        <ul id="tinyDrop" class="f-dropdown" data-dropdown-content>
236          <li><a href="#">This is a link</a></li>
237          <li><a href="#">This is another</a></li>
238          <li><a href="#">Yet another</a></li>
239        </ul>
240        <div id="contentDrop" class="f-dropdown content medium" data-dropdown-content>
241          <h4>Title</h4>
242          <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
243          <img src="http://lorempixel.com/800/800/">
244          <p>More test.</p>
245          <a href="#" class="button">Button</a>
246        </div>
247
248        <hr>
249
250        <h4>Flex Video</h4>
251
252        <div class="flex-video">
253          <iframe width="420" height="315" src="http://www.youtube.com/embed/0_EW8aNgKlA" frameborder="0" allowfullscreen></iframe>
254        </div>
255
256        <hr>
257
258        <h4>Inline Lists</h4>
259
260        <ul class="inline-list">
261          <li><a href="#">Link 1</a></li>
262          <li><a href="#">Link 2</a></li>
263          <li><a href="#">Link 3</a></li>
264          <li><a href="#">Link 4</a></li>
265          <li><a href="#">Link 5</a></li>
266        </ul>
267
268        <hr>
269
270        <h4>Joyride</h4>
271
272        <a id="start-jr" class="secondary button">Start Joyride</a>
273        <h5 id="numero1" class="so-awesome">Build Joyride with HTML</h5>
274        <p id="numero2" class="so-awesome">Stop Number 2 for You!</p>
275
276        <hr>
277
278        <h4>Keystroke</h4>
279
280        <p>To make something pretty, press and hold <kbd>cmd + alt + shift + w + a + !</kbd></p>
281
282        <hr>
283
284        <h4>Labels</h4>
285
286        <p>
287          <span class="label">Regular Label</span><br>
288          <span class="radius secondary label">Radius Secondary Label</span><br>
289          <span class="round alert label">Round Alert Label</span><br>
290          <span class="success label">Success Label</span><br>
291        </p>
292
293        <hr>
294
295        <h4>Magellan</h4>
296
297        <div data-magellan-expedition="fixed">
298          <dl class="sub-nav">
299            <dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
300            <dd data-magellan-arrival="js"><a href="#js">Using Javascript</a></dd>
301          </dl>
302        </div>
303
304        <h5 data-magellan-destination="build">Build With Predefined HTML Structure</h5>
305        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.</p>
306        <h5 data-magellan-destination="js">Awesome JS Goodness</h5>
307        <p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.</p>
308
309        <hr>
310
311        <h4>Orbit</h4>
312
313        <div class="row">
314          <div class="large-6 columns">
315            <ul id="featured1" data-orbit data-options="timer_speed:5000;">
316              <li>
317                <img src="http://lorempixel.com/800/800/" />
318                <div class="orbit-caption">
319                  Caption One. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
320                </div>
321              </li>
322              <li>
323                <img src="http://lorempixel.com/800/800/" />
324                <div class="orbit-caption">
325                  Caption Two. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
326                </div>
327              </li>
328              <li>
329                <img src="http://lorempixel.com/800/800/" />
330                <div class="orbit-caption">
331                  Caption Three. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
332                </div>
333              </li>
334            </ul>
335          </div>
336        </div>
337
338        <hr>
339
340        <h4>Pagination</h4>
341
342        <ul class="pagination">
343          <li class="arrow unavailable"><a href="">&laquo;</a></li>
344          <li class="current"><a href="">1</a></li>
345          <li><a href="">2</a></li>
346          <li><a href="">3</a></li>
347          <li><a href="">4</a></li>
348          <li class="unavailable"><a href="">&hellip;</a></li>
349          <li><a href="">12</a></li>
350          <li><a href="">13</a></li>
351          <li class="arrow"><a href="">&raquo;</a></li>
352        </ul>
353
354        <hr>
355
356        <h4>Panels</h4>
357
358        <div class="row">
359          <div class="large-6 columns">
360            <div class="panel">
361              <h5>This is a regular panel.</h5>
362              <p>It has an easy to override visual style, and is appropriately subdued.</p>
363            </div>
364          </div>
365          <div class="large-6 columns">
366            <div class="panel callout radius">
367              <h5>This is a callout panel.</h5>
368              <p>It's a little ostentatious, but useful for important content.</p>
369            </div>
370          </div>
371        </div>
372
373        <hr>
374
375        <h4>Pricing Tables</h4>
376
377        <div class="row">
378          <div class="large-4 columns">
379            <ul class="pricing-table">
380              <li class="title">Standard</li>
381              <li class="price">$99.99</li>
382              <li class="description">An awesome description</li>
383              <li class="bullet-item">1 Database</li>
384              <li class="bullet-item">5GB Storage</li>
385              <li class="bullet-item">20 Users</li>
386              <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
387            </ul>
388          </div>
389        </div>
390
391        <hr>
392
393        <h4>Progress Bars</h4>
394
395        <div class="progress large-6"><span class="meter" style="width: 40%"></span></div>
396        <div class="radius progress success large-8"><span class="meter" style="width: 80%"></span></div>
397        <div class="nice round progress alert large-10"><span class="meter" style="width: 30%"></span></div>
398        <div class="nice secondary progress"><span class="meter" style="width: 50%"></span></div>
399
400        <hr>
401
402        <h4>Reveal</h4>
403
404        <a href="#" data-reveal-id="firstModal" class="radius button">Example Modal&hellip;</a>
405        <a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a>
406
407        <hr>
408
409        <h4>Section</h4>
410
411        <div class="row">
412          <div class="large-3 columns">
413            <div class="section-container vertical-nav" data-section="vertical-nav">
414              <section class="section">
415                <p class="title"><a href="#">Section 1</a></p>
416                <div class="content">
417                  <ul class="side-nav">
418                    <li><a href="#">Link 1</a></li>
419                    <li><a href="#">Link 2</a></li>
420                    <li><a href="#">Link 3</a></li>
421                    <li class="divider"></li>
422                    <li><a href="#">Link 1</a></li>
423                  </ul>
424                </div>
425              </section>
426              <section class="section">
427                <p class="title"><a href="#">Section 2</a></p>
428                <div class="content">
429                  <ul class="side-nav">
430                    <li><a href="#">Link 1</a></li>
431                    <li><a href="#">Link 2</a></li>
432                    <li><a href="#">Link 3</a></li>
433                    <li class="divider"></li>
434                    <li><a href="#">Link 1</a></li>
435                  </ul>
436                </div>
437              </section>
438            </div>
439          </div>
440          <div class="large-8 columns">
441            <div class="section-container horizontal-nav" data-section="horizontal-nav">
442              <section class="section">
443                <p class="title"><a href="#">Section 1</a></p>
444                <div class="content">
445                  <ul class="side-nav">
446                    <li><a href="#">Link 1</a></li>
447                    <li><a href="#">Link 2</a></li>
448                    <li><a href="#">Link 3</a></li>
449                    <li class="divider"></li>
450                    <li><a href="#">Link 1</a></li>
451                  </ul>
452                </div>
453              </section>
454              <section class="section">
455                <p class="title"><a href="#">Section 2</a></p>
456                <div class="content">
457                  <ul class="side-nav">
458                    <li><a href="#">Link 1</a></li>
459                    <li><a href="#">Link 2</a></li>
460                    <li><a href="#">Link 3</a></li>
461                    <li class="divider"></li>
462                    <li><a href="#">Link 1</a></li>
463                  </ul>
464                </div>
465              </section>
466            </div>
467            <div class="section-container auto" data-section data-options="deep_linking: true;">
468              <section class="section">
469                <p class="title"><a href="#panel1">Section 1</a></p>
470                <div class="content" data-slug="panel1">
471                  <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
472                </div>
473              </section>
474              <section class="section">
475                <p class="title"><a href="#panel2">Section 2</a></p>
476                <div class="content" data-slug="panel2">
477                  <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
478                </div>
479              </section>
480              <div class="section">
481                <p class="title"><a href="#panel3">Section 3</a></p>
482                <div class="content" data-slug="panel3">
483                  <form>
484                    <div class="row collapse">
485                      <div class="large-2 columns">
486                        <label class="inline">Your Name</label>
487                      </div>
488                      <div class="large-10 columns">
489                        <input type="text" id="yourName" placeholder="Jane Smith">
490                      </div>
491                    </div>
492                    <div class="row collapse">
493                      <div class="large-2 columns">
494                        <label class="inline"> Your Email</label>
495                      </div>
496                      <div class="large-10 columns">
497                        <input type="text" id="yourEmail" placeholder="jane@smithco.com">
498                      </div>
499                    </div>
500                    <label>What's up?</label>
501                    <textarea rows="4"></textarea>
502                    <button type="submit" class="radius button">Submit</button>
503                  </form>
504                </div>
505              </div>
506            </div>
507            <div class="section-container accordion" data-section="accordion">
508              <section class="section">
509                <p class="title"><a href="#panel1">Section 1</a></p>
510                <div class="content" data-slug="panel1">
511                  <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
512                </div>
513              </section>
514              <section class="section">
515                <p class="title"><a href="#panel2">Section 2</a></p>
516                <div class="content" data-slug="panel2">
517                  <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
518                </div>
519              </section>
520              <section class="section">
521                <p class="title"><a href="#panel3">Section 3</a></p>
522                <div class="content" data-slug="panel3">
523                  <p>Section 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
524                </div>
525              </section>
526            </div>
527            <div class="section-container tabs" data-section="tabs">
528              <section class="section">
529                <p class="title"><a href="#panel1">Section 1</a></p>
530                <div class="content" data-slug="panel1">
531                  <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
532                </div>
533              </section>
534              <section class="section">
535                <p class="title"><a href="#panel2">Section 2</a></p>
536                <div class="content" data-slug="panel2">
537                  <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
538                </div>
539              </section>
540              <section class="section">
541                <p class="title"><a href="#panel3">Section 3</a></p>
542                <div class="content" data-slug="panel3">
543                  <p>Section 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
544                </div>
545              </section>
546            </div>
547          </div>
548        </div>
549
550        <hr>
551
552        <h4>Side Nav</h4>
553
554        <div class="row">
555          <div class="large-4 columns end">
556            <ul class="side-nav">
557              <li class="active"><a href="#">Link 1</a></li>
558              <li><a href="#">Link 2</a></li>
559              <li class="divider"></li>
560              <li><a href="#">Link 3</a></li>
561              <li><a href="#">Link 4</a></li>
562            </ul>
563          </div>
564        </div>
565
566        <hr>
567
568        <h4>Sub Nav</h4>
569
570        <dl class="sub-nav">
571          <dt>Filter:</dt>
572          <dd class="active"><a href="#">All</a></dd>
573          <dd><a href="#">Active</a></dd>
574          <dd><a href="#">Pending</a></dd>
575          <dd><a href="#">Suspended</a></dd>
576        </dl>
577
578        <hr>
579
580        <h4>Switch</h4>
581
582        <div class="small-2 switch tiny">
583          <input id="a" name="switch-a" type="radio" checked>
584          <label for="a" onclick="">Off</label>
585
586          <input id="a1" name="switch-a" type="radio">
587          <label for="a1" onclick="">On</label>
588
589          <span></span>
590        </div>
591
592        <div class="small-3 switch small">
593          <input id="b" name="switch-b" type="radio" checked>
594          <label for="b" onclick="">Off</label>
595
596          <input id="b1" name="switch-b" type="radio">
597          <label for="b1" onclick="">On</label>
598
599          <span></span>
600        </div>
601
602        <div class="small-4 switch radius">
603          <input id="c" name="switch-c" type="radio" checked>
604          <label for="c" onclick="">Off</label>
605
606          <input id="c1" name="switch-c" type="radio">
607          <label for="c1" onclick="">On</label>
608
609          <span></span>
610        </div>
611
612        <div class="small-6 switch large round">
613          <input id="d" name="switch-d" type="radio" checked>
614          <label for="d" onclick="">Off</label>
615
616          <input id="d1" name="switch-d" type="radio">
617          <label for="d1" onclick="">On</label>
618
619          <span></span>
620        </div>
621
622        <hr>
623
624        <h4>Tables</h4>
625
626        <table>
627          <thead>
628            <tr>
629              <th width="200">Table Header</th>
630              <th>Table Header</th>
631              <th width="150">Table Header</th>
632              <th width="150">Table Header</th>
633            </tr>
634          </thead>
635          <tbody>
636            <tr>
637              <td>Content Goes Here</td>
638              <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
639              <td>Content Goes Here</td>
640              <td>Content Goes Here</td>
641            </tr>
642            <tr>
643              <td>Content Goes Here</td>
644              <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
645              <td>Content Goes Here</td>
646              <td>Content Goes Here</td>
647            </tr>
648            <tr>
649              <td>Content Goes Here</td>
650              <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
651              <td>Content Goes Here</td>
652              <td>Content Goes Here</td>
653            </tr>
654          </tbody>
655        </table>
656
657        <hr>
658
659        <h4>Thumbnails</h4>
660
661        <p><a class="th" href="http://lorempixel.com/800/800/"><img src="../img/demos/demo1-th.jpg"></a></p>
662        <img class="th" src="http://lorempixel.com/800/800/">
663
664        <hr>
665
666        <h4>Tooltips</h4>
667
668        <p>The tooltips can be positioned on the <span data-tooltip class="has-tip" data-width="210" title="I'm on bottom and the default position.">"tip-bottom"</span>, which is the default position, <span data-tooltip class="has-tip tip-top" data-width="210" title="I'm on the top!">"tip-top" (hehe)</span>, <span data-tooltip="left" class="has-tip tip-left" data-width="90" title="I'm on the left!">"tip-left"</span>, or <span data-tooltip="right" class="has-tip tip-right" data-width="120" title="I'm on the right!">"tip-right"</span> of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.</p>
669
670        <hr>
671
672        <h4>Top Bar</h4>
673
674        <nav class="top-bar">
675          <ul class="title-area">
676            <!-- Title Area -->
677            <li class="name">
678              <h1><a href="/">Top Bar</a></h1>
679            </li>
680            <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
681            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
682          </ul>
683
684          <section class="top-bar-section">
685            <ul class="left">
686              <li class="divider"></li>
687              <li class="has-dropdown"><a href="/grid.php">Item 1</a>
688
689                <ul class="dropdown">
690                  <li><label>Level One</label></li>
691                  <li><a href="#">Sub-item 1</a></li>
692                  <li><a href="#">Sub-item 2</a></li>
693                  <li class="divider"></li>
694                  <li><a href="#">Sub-item 3</a></li>
695                  <li class="has-dropdown"><a href="#">Sub-item 4</a>
696
697                    <ul class="dropdown">
698                      <li><label>Level Two</label></li>
699                      <li class="has-dropdown"><a href="#">Sub-item 1</a>
700
701                        <ul class="dropdown">
702                          <li><label>Level Three</label></li>
703                          <li class="has-dropdown"><a href="#">Sub-item 1</a>
704
705                            <ul class="dropdown">
706                              <li><label>Level Four</label></li>
707                              <li><a href="http://zurb.com">Sub-item 1</a></li>
708                            </ul>
709                          </li>
710                          <li><a href="#">Sub-item 2</a></li>
711                          <li><a href="#">Sub-item 3</a></li>
712                          <li class="divider"></li>
713                          <li><a href="#">Sub-item 4</a></li>
714                        </ul>
715                      </li>
716                      <li><a href="#">Sub-item 2</a></li>
717                      <li><a href="#">Sub-item 3</a></li>
718                      <li><a href="#">Sub-item 4</a></li>
719                    </ul>
720                      </li>
721                      <li><a href="#">Sub-item 5</a></li>
722                </ul>
723                  </li>
724                  <li class="divider"></li>
725            </ul>
726            <!-- Right Nav Section -->
727            <ul class="right">
728              <li class="divider hide-for-small"></li>
729              <li><a href="#">Item 2</a></li>
730            </ul>
731          </section>
732        </nav>
733
734        <hr>
735
736        <h4>Type</h4>
737
738        <h1>h1. This is a very large header.</h1>
739        <h2>h2. This is a large header.</h2>
740        <h3>h3. This is a medium header.</h3>
741        <h4>h4. This is a moderate header.</h4>
742        <h5>h5. This is a small header. h1.</h5>
743        <h6>h6. This is a tiny header. h1.</h6>
744
745        <br>
746
747        <h1 class="subheader">h1.subheader</h1>
748        <h2 class="subheader">h2.subheader</h2>
749        <h3 class="subheader">h3.subheader</h3>
750        <h4 class="subheader">h4.subheader</h4>
751        <h5 class="subheader">h5.subheader</h5>
752        <h6 class="subheader">h6.subheader</h6>
753
754        <br>
755
756        <ul class="disc">
757          <li>List item with a much longer description or more content.</li>
758          <li>List item</li>
759          <li>List item
760            <ul>
761              <li>Nested List Item</li>
762              <li>Nested List Item</li>
763              <li>Nested List Item</li>
764            </ul>
765          </li>
766          <li>List item</li>
767          <li>List item</li>
768          <li>List item</li>
769        </ul>
770
771        <!-- Ordered lists are great for lists that need order, duh -->
772        <ol>
773          <li>List Item 1</li>
774          <li>List Item 2</li>
775          <li>List Item 3</li>
776        </ol>
777
778        <!-- Definition lists are great for small block of copy that describe the header -->
779        <dl>
780          <dt>Definition List</dt>
781          <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
782        </dl>
783
784        <br>
785
786        <blockquote>I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.<cite>Isaac Asimov</cite></blockquote>
787
788        <br>
789
790        <ul class="vcard">
791          <li class="fn">Gaius Baltar</li>
792          <li class="street-address">123 Colonial Ave.</li>
793          <li class="locality">Caprica City</li>
794          <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
795          <li class="email"><a href="#"><span class="__cf_email__" data-cfemail="e98ec78b88859d889ba98a84888085c78a8684">[email&#160;protected]</span><script cf-hash='f9e31' type="text/javascript">
796                                                                                                                                                       /* <![CDATA[ */!function(){try{var t="currentScript"in document?document.currentScript:function(){for(var t=document.getElementsByTagName("script"),e=t.length;e--;)if(t[e].getAttribute("cf-hash"))return t[e]}();if(t&&t.previousSibling){var e,r,n,i,c=t.previousSibling,a=c.getAttribute("data-cfemail");if(a){for(e="",r=parseInt(a.substr(0,2),16),n=2;a.length-n;n+=2)i=parseInt(a.substr(n,2),16)^r,e+=String.fromCharCode(i);e=document.createTextNode(e),c.parentNode.replaceChild(e,c)}}}catch(u){}}();/* ]]> */</script></a></li>
797        </ul>
798
799        <hr>
800
801        <h4>Visibility Classes</h4>
802
803        <h5>Screen Size Visibility Control (Show)</h5>
804        <p>The following text should describe the screen size you're using:</p>
805        <p class="panel">
806          <strong class="show-for-small">You are on a small screen.</strong>
807          <strong class="show-for-medium">You are on a medium screen.</strong>
808          <strong class="show-for-medium-up">You are on a medium, large or xlarge screen.</strong>
809          <strong class="show-for-medium-down">You are on a medium or small screen.</strong>
810          <strong class="show-for-large">You are on a large screen.</strong>
811          <strong class="show-for-large-up">You are on a large or xlarge screen.</strong>
812          <strong class="show-for-large-down">You are on a large, medium or small screen.</strong>
813          <strong class="show-for-xlarge">You are on a xlarge screen.</strong>
814        </p>
815
816        <h5>Screen Size Visibility Control (Hide)</h5>
817        <p>The following text should describe the screen size you aren't using:</p>
818        <p class="panel">
819          <strong class="hide-for-small">You are <em>not</em> on a small screen.</strong>
820          <strong class="hide-for-medium">You are <em>not</em> on a medium screen.</strong>
821          <strong class="hide-for-medium-up">You are <em>not</em> on a medium, large or xlarge screen.</strong>
822          <strong class="hide-for-medium-down">You are <em>not</em> on a medium or small screen.</strong>
823          <strong class="hide-for-large">You are <em>not</em> on a large screen.</strong>
824          <strong class="hide-for-large-up">You are <em>not</em> on a large or xlarge screen.</strong>
825          <strong class="hide-for-large-down">You are <em>not</em> on a large, medium or small screen.</strong>
826          <strong class="hide-for-xlarge">You are <em>not</em> on a xlarge screen.</strong>
827        </p>
828
829        <h5>Orientation Detection</h5>
830        <p>The following text should describe the device orientation you're using:</p>
831        <p class="panel">
832          <strong class="show-for-landscape">You are in landscape orientation.</strong>
833          <strong class="show-for-portrait">You are in portrait orientation.</strong>
834        </p>
835
836        <h5>Touch Detection</h5>
837        <p>The following text should describe if you're using a touch device:</p>
838        <p class="panel">
839          <strong class="show-for-touch">You are on a touch-enabled device.</strong>
840          <strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
841        </p>
842
843      </div>
844    </div>
845
846  </div>
847
848</div>
849
850<!-- Joyride -->
851<ol class="joyride-list" data-joyride>
852  <li data-id="numero1" data-class="custom so-awesome" data-text="Next">
853    <h4>Stop #1</h4>
854    <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
855  </li>
856  <li data-id="numero2" data-button="Next">
857    <h4>Stop #2</h4>
858    <p>Get the details right by styling Joyride with a custom stylesheet!</p>
859  </li>
860  <li data-button="Next">
861    <h4>Stop #3</h4>
862    <p>It works as a modal too!</p>
863  </li>
864</ol>
865
866<script type="text/javascript">
867  $(document).foundation('joyride', 'start');
868</script>
Note: See TracBrowser for help on using the repository browser.