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

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

Forker foundation

File size: 36.4 KB
Line 
1<h1 id="kitchen-sink">Kitchen sink</h1>
2<h3 class="subheader">This page includes every single Foundation element so that we can make sure things work together smoothly.</h3>
3
4<h4 id="joyride">Joyride</h4>
5<div>
6  <a class="secondary button" id="start-jr" name="start-jr">Start Joyride</a>
7
8  <h5 class="so-awesome" id="numero1">Build Joyride with HTML</h5>
9
10  <p class="so-awesome" id="numero2">Stop Number 2 for You!</p><!--stops-->
11
12  <ol class="joyride-list" data-joyride="">
13    <li data-class="custom so-awesome" data-id="numero1" data-text="Next">
14      <h4>Stop #1</h4>
15
16      <p>You can control all the details for your tour stop. Any valid HTML will
17        work inside of Joyride.</p>
18    </li>
19
20    <li data-button="Next" data-id="numero2">
21      <h4>Stop #2</h4>
22
23      <p>Get the details right by styling Joyride with a custom stylesheet!</p>
24    </li>
25
26    <li data-button="Next">
27      <h4>Stop #3</h4>
28
29      <p>It works as a modal too!</p>
30    </li>
31  </ol>
32</div>
33
34
35
36<hr>
37<h4 id="alert-boxes">Alert Boxes</h4>
38<div data-alert class="alert-box radius">
39  This is a standard alert (div.alert-box.radius).
40  <a href="" class="close">&times;</a>
41</div>
42
43<div data-alert class="alert-box success">
44  This is a success alert (div.alert-box.success).
45  <a href="" class="close">&times;</a>
46</div>
47
48<div data-alert class="alert-box alert round">
49  This is an alert (div.alert-box.alert.round).
50  <a href="" class="close">&times;</a>
51</div>
52
53<div data-alert class="alert-box secondary">
54  This is a secondary alert (div.alert-box.secondary).
55  <a href="" class="close">&times;</a>
56</div>
57
58
59<hr>
60<h4 id="block-grid">Block Grid</h4>
61<ul class="small-block-grid-2 large-block-grid-4">
62  <li><img class="th" src="http://lorempixel.com/800/800/"></li>
63  <li><img class="th" src="http://lorempixel.com/800/800/"></li>
64  <li><img class="th" src="http://lorempixel.com/800/800/"></li>
65  <li><img class="th" src="http://lorempixel.com/800/800/"></li>
66</ul>
67
68<hr>
69<h4 id="breadcrumbs">Breadcrumbs</h4>
70<ul class="breadcrumbs">
71  <li><a href="#">Home</a></li>
72  <li><a href="#">Features</a></li>
73  <li class="unavailable"><a href="#">Gene Splicing</a></li>
74  <li class="current"><a href="#">Cloning</a></li>
75</ul>
76
77<hr>
78<h4 id="buttons">Buttons</h4>
79<div class="row">
80  <div class="small-6 large-6 columns">
81    <a href="#" class="tiny button">.tiny.button</a><br>
82    <a href="#" class="small button">.small.button</a><br>
83    <a href="#" class="button">.button</a><br>
84    <a href="#" class="button expand">.expand</a><br>
85  </div>
86  <div class="small-6 large-6 columns">
87    <a href="#" class="tiny button secondary">.tiny.secondary</a><br>
88    <a href="#" class="small button success radius">.small.success.radius</a><br>
89    <a href="#" class="button alert round disabled">.round.disabled</a><br>
90
91  </div>
92</div>
93
94<hr>
95<h4 id="button-groups">Button Groups</h4>
96<ul class="button-group">
97  <li><a href="#" class="small button">Button 1</a></li>
98  <li><a href="#" class="small button">Button 2</a></li>
99  <li><a href="#" class="small button">Button 3</a></li>
100</ul>
101<ul class="button-group radius">
102  <li><a href="#" class="button secondary">Button 1</a></li>
103  <li><a href="#" class="button secondary">Button 2</a></li>
104  <li><a href="#" class="button secondary">Button 3</a></li>
105  <li><a href="#" class="button secondary">Button 4</a></li>
106</ul>
107<ul class="button-group round even-3">
108  <li><a href="#" class="button alert">Button 1</a></li>
109  <li><a href="#" class="button alert">Button 2</a></li>
110  <li><a href="#" class="button alert">Button 3</a></li>
111</ul>
112<ul class="button-group round even-3">
113  <li><input type="submit" class="button success" value="Button 1"></li>
114  <li><input type="submit" class="button success" value="Button 2"></li>
115  <li><input type="submit" class="button success" value="Button 3"></li>
116</ul>
117
118<hr>
119<h4 id="dropdown-buttons">Dropdown Buttons</h4>
120<ul id="drop" class="f-dropdown" data-dropdown-content>
121  <li><a href="#">This is a link</a></li>
122  <li><a href="#">This is another</a></li>
123  <li><a href="#">Yet another link</a></li>
124</ul>
125
126<p><a href="#" data-dropdown="drop" class="tiny button dropdown">Tiny Dropdown Button</a><br>
127  <a href="#" data-dropdown="drop" class="small secondary radius button dropdown">Small Secondary Radius Dropdown Button</a><br>
128  <a href="#" data-dropdown="drop" class="button alert round dropdown">Button Alert Round Dropdown Button</a><br>
129  <a href="#" data-dropdown="drop" class="large success button dropdown">Large Success Dropdown Button</a><br>
130  <a href="#" data-dropdown="drop" class="large button dropdown expand">Large Expanded Dropdown Button</a></p>
131<hr>
132<h4 id="split-buttons">Split Buttons</h4>
133<p> <a href="#" class="tiny button split">Tiny Split Button <span data-dropdown="drop"></span></a><br>
134  <a href="#" class="small secondary radius button split">Small Secondary Radius Split Button <span data-dropdown="drop"></span></a><br>
135  <a href="#" class="button alert round split">Round Alert Split Button <span data-dropdown="drop"></span></a><br>
136  <a href="#" class="large success button split">Large Success Split Button <span data-dropdown="drop"></span></a></p>
137<hr>
138<h4 id="switches">Switches</h4>
139<div class="small-2 switch tiny">
140  <input id="a" name="switch-a" type="radio" checked>
141  <label for="a" onclick="">Off</label>
142
143  <input id="a1" name="switch-a" type="radio">
144  <label for="a1" onclick="">On</label>
145
146  <span></span>
147</div>
148
149<div class="small-3 switch small">
150  <input id="b" name="switch-b" type="radio" checked>
151  <label for="b" onclick="">Off</label>
152
153  <input id="b1" name="switch-b" type="radio">
154  <label for="b1" onclick="">On</label>
155
156  <span></span>
157</div>
158
159<div class="small-4 switch radius">
160  <input id="c" name="switch-c" type="radio" checked>
161  <label for="c" onclick="">Off</label>
162
163  <input id="c1" name="switch-c" type="radio">
164  <label for="c1" onclick="">On</label>
165
166  <span></span>
167</div>
168
169<div class="small-6 switch large round">
170  <input id="d" name="switch-d" type="radio" checked>
171  <label for="d" onclick="">Off</label>
172
173  <input id="d1" name="switch-d" type="radio">
174  <label for="d1" onclick="">On</label>
175
176  <span></span>
177</div>
178
179
180<hr>
181<h4 id="clearing">Clearing</h4>
182<div>
183  <ul class="clearing-thumbs" data-clearing>
184    <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>
185
186    <li><a class="th" href="http://lorempixel.com/800/800/"><img src="http://lorempixel.com/100/100/"></a></li>
187
188    <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>
189
190    <li><a class="th" href="http://lorempixel.com/800/800/"><img src="http://lorempixel.com/100/100/"></a></li>
191
192    <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>
193  </ul>
194</div>
195
196
197<hr>
198<h4 id="forms">Forms</h4>
199<form>
200  <fieldset>
201    <legend>Fieldset</legend>
202
203    <div class="row">
204      <div class="large-12 columns">
205        <label>Input Label</label>
206        <input type="text" placeholder="large-12.columns">
207      </div>
208    </div>
209
210    <div class="row">
211      <div class="large-4 columns">
212        <label>Input Label</label>
213        <input type="text" placeholder="large-4.columns">
214      </div>
215      <div class="large-4 columns">
216        <label>Input Label</label>
217        <input type="text" placeholder="large-4.columns">
218      </div>
219      <div class="large-4 columns">
220        <div class="row collapse">
221          <label>Input Label</label>
222          <div class="small-9 columns">
223            <input type="text" placeholder="small-9.columns">
224          </div>
225          <div class="small-3 columns">
226            <span class="postfix">.com</span>
227          </div>
228        </div>
229      </div>
230    </div>
231
232    <div class="row">
233      <div class="large-12 columns">
234        <label>Textarea Label</label>
235        <textarea placeholder="small-12.columns"></textarea>
236      </div>
237    </div>
238
239  </fieldset>
240</form>
241
242<hr>
243<h4 id="dropdowns">Dropdowns</h4>
244<p><a class="button" data-dropdown="tinyDrop" href="#">Link Dropdown &raquo;</a>
245  <a class="button" data-dropdown="contentDrop" href="#">Content Dropdown &raquo;</a>
246  <!-- Dropdowns --></p>
247<ul class="f-dropdown" data-dropdown-content="" id="tinyDrop">
248  <li><a href="#">This is a link</a></li>
249
250  <li><a href="#">This is another</a></li>
251
252  <li><a href="#">Yet another</a></li>
253</ul>
254
255<div class="f-dropdown content medium" data-dropdown-content="" id=
256     "contentDrop">
257  <h4>Title</h4>
258
259  <p>Some text that people will think is awesome! Some text that people will
260    think is awesome! Some text that people will think is awesome!</p><img src=
261                                                                           "http://lorempixel.com/800/800/">
262
263  <p>Launching a Discovery Mission</p><a class="button" href="#">Button</a>
264</div>
265
266
267<hr>
268<h4 id="flex-video">Flex Video</h4>
269<div class="flex-video">
270  <iframe width="420" height="315" src="http://www.youtube.com/embed/0_EW8aNgKlA" frameborder="0" allowfullscreen></iframe>
271</div>
272
273<hr>
274<h4 id="inline-lists">Inline Lists</h4>
275<ul class="inline-list">
276  <li><a href="#">Link 1</a></li>
277  <li><a href="#">Link 2</a></li>
278  <li><a href="#">Link 3</a></li>
279  <li><a href="#">Link 4</a></li>
280  <li><a href="#">Link 5</a></li>
281</ul>
282
283<hr>
284<h4 id="keystroke">Keystroke</h4>
285<p>To make something pretty, press and hold <kbd>cmd + alt + shift + w + a + !</kbd></p>
286<hr>
287<h4 id="labels">Labels</h4>
288<p>
289  <span class="label">Regular Label</span><br>
290  <span class="radius secondary label">Radius Secondary Label</span><br>
291  <span class="round alert label">Round Alert Label</span><br>
292  <span class="success label">Success Label</span><br>
293</p>
294
295<hr>
296<h4 id="magellan">Magellan</h4>
297<div class="magellan-container" 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<p><a name="build"></a></p>
305<p><h5 data-magellan-destination="build">Build With Predefined HTML Structure</h5></p>
306<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>
307
308<p><a name="js"></a></p>
309<p><h5 data-magellan-destination="js">Awesome JS Goodness</h5></p>
310<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>
311
312<hr>
313<h4 id="orbit">Orbit</h4>
314<div class="row">
315  <div class="large-12 columns">
316    <ul id="featured1" data-orbit data-options="timer_speed:5000;">
317      <li>
318        <img src="http://lorempixel.com/800/800/" />
319        <div class="orbit-caption">
320          Caption One. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
321        </div>
322      </li>
323      <li>
324        <img src="http://lorempixel.com/800/800/" />
325        <div class="orbit-caption">
326          Caption Two. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
327        </div>
328      </li>
329      <li>
330        <img src="http://lorempixel.com/800/800/" />
331        <div class="orbit-caption">
332          Caption Three. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
333        </div>
334      </li>
335    </ul>
336  </div>
337</div>
338
339<hr>
340<h4 id="pagination">Pagination</h4>
341<ul class="pagination">
342  <li class="arrow unavailable"><a href="">&laquo;</a></li>
343  <li class="current"><a href="">1</a></li>
344  <li><a href="">2</a></li>
345  <li><a href="">3</a></li>
346  <li><a href="">4</a></li>
347  <li class="unavailable"><a href="">&hellip;</a></li>
348  <li><a href="">12</a></li>
349  <li><a href="">13</a></li>
350  <li class="arrow"><a href="">&raquo;</a></li>
351</ul>
352
353<hr>
354<h4 id="panels">Panels</h4>
355<div class="row">
356  <div class="large-6 columns">
357    <div class="panel">
358      <h5>This is a regular panel.</h5>
359      <p>It has an easy to override visual style, and is appropriately subdued.</p>
360    </div>
361  </div>
362  <div class="large-6 columns">
363    <div class="panel callout radius">
364      <h5>This is a radius callout panel.</h5>
365      <p>It&#39;s a little ostentatious, but useful for important content.</p>
366    </div>
367  </div>
368
369</div>
370<h4 id="pricing-tables">Pricing Tables</h4>
371<div class="row">
372  <div class="large-4 columns">
373    <ul class="pricing-table">
374      <li class="title">Standard</li>
375      <li class="price">$99.99</li>
376      <li class="description">An awesome description</li>
377      <li class="bullet-item">1 Database</li>
378      <li class="bullet-item">5GB Storage</li>
379      <li class="bullet-item">20 Users</li>
380      <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
381    </ul>
382  </div>
383</div>
384
385<hr>
386<h4 id="progress-bars">Progress Bars</h4>
387<div class="progress large-6"><span class="meter" style="width: 40%"></span></div>
388<div class="radius progress success large-8"><span class="meter" style="width: 80%"></span></div>
389<div class="nice round progress alert large-10"><span class="meter" style="width: 30%"></span></div>
390<div class="nice secondary progress"><span class="meter" style="width: 50%"></span></div>
391
392<hr>
393<h4 id="reveal">Reveal</h4>
394<p><a href="#" data-reveal-id="firstModal" class="radius button">Example Modal&hellip;</a>
395  <a href="#" data-reveal-id="videoModal" class="radius button">Example Video Modal&hellip;</a></p>
396<!-- Reveal Modals begin -->
397  <div id="firstModal" class="reveal-modal" data-reveal>
398    <h2>This is a modal.</h2>
399    <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
400    <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
401    <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal&hellip;</a></p>
402    <a class="close-reveal-modal">&#215;</a>
403  </div>
404
405  <div id="secondModal" class="reveal-modal" data-reveal>
406    <h2>This is a second modal.</h2>
407    <p>See? It just slides into place after the first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
408    <a class="close-reveal-modal">&#215;</a>
409  </div>
410
411  <div id="videoModal" class="reveal-modal large" data-reveal>
412    <h2>This modal has video</h2>
413    <div class="flex-video">
414      <iframe width="420" height="315" src="//www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
415    </div>
416
417    <a class="close-reveal-modal">&#215;</a>
418  </div>
419  <!-- Reveal Modals end -->
420
421  <hr>
422  <h4 id="sliders">Sliders</h4>
423  <div class="range-slider" data-slider>
424    <span class="range-slider-handle"></span>
425    <span class="range-slider-active-segment"></span>
426    <input type="hidden">
427  </div>
428  <div class="range-slider radius" data-slider>
429    <span class="range-slider-handle"></span>
430    <span class="range-slider-active-segment"></span>
431    <input type="hidden">
432  </div>
433  <div class="range-slider round" data-slider>
434    <span class="range-slider-handle"></span>
435    <span class="range-slider-active-segment"></span>
436    <input type="hidden">
437  </div>
438  <div class="range-slider" data-slider data-options="step: 20;">
439    <span class="range-slider-handle"></span>
440    <span class="range-slider-active-segment"></span>
441    <input type="hidden">
442  </div>
443
444
445  <hr>
446  <h4 id="accordion">Accordion</h4>
447  <ul class="accordion" data-accordion>
448    <li class="accordion-navigation">
449      <a href="#panel1a">Accordion 1</a>
450      <div id="panel1a" class="content active">
451        <ul class="small-block-grid-2 large-block-grid-3 ">
452          <li><img src="http://lorempixel.com/800/800/"></li>
453          <li><img src="http://lorempixel.com/800/800/"></li>
454          <li><img src="http://lorempixel.com/800/800/"></li>
455        </ul>
456      </div>
457    </li>
458    <li class="accordion-navigation">
459      <a href="#panel2a">Accordion 2</a>
460      <div id="panel2a" class="content">
461        <div class="row">
462          <div class="small-6 columns">
463            <p>Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
464          </div>
465          <div class="small-6 columns">
466            <img src="http://lorempixel.com/800/800/">
467          </div>
468        </div>
469      </div>
470    </li>
471    <li class="accordion-navigation">
472      <a href="#panel3a">Accordion 3</a>
473      <div id="panel3a" class="content">
474        Panel 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.
475      </div>
476    </li>
477  </ul>
478
479  <hr>
480  <h4 id="tabs">Tabs</h4>
481  <dl class="tabs" data-tab>
482    <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
483    <dd><a href="#panel2-2">Tab 2</a></dd>
484    <dd><a href="#panel2-3">Tab 3</a></dd>
485    <dd><a href="#panel2-4">Tab 4</a></dd>
486  </dl>
487  <div class="tabs-content">
488    <div class="content active" id="panel2-1">
489      <p>First panel content goes here...</p>
490    </div>
491    <div class="content" id="panel2-2">
492      <p>Second panel content goes here...</p>
493    </div>
494    <div class="content" id="panel2-3">
495      <p>Third panel content goes here...</p>
496    </div>
497    <div class="content" id="panel2-4">
498      <p>Fourth panel content goes here...</p>
499    </div>
500  </div>
501
502  <dl class="tabs vertical" data-tab="">
503    <dd class="active"><a href="#panel1a">Tab 1</a></dd>
504
505    <dd><a href="#panel2a">Tab 2</a></dd>
506
507    <dd><a href="#panel3a">Tab 3</a></dd>
508
509    <dd><a href="#panel4a">Tab 4</a></dd>
510  </dl>
511
512  <div class="tabs-content vertical">
513    <div class="content active" id="panel1a">
514      <p>Panel 1 content goes here.</p>
515    </div>
516
517    <div class="content" id="panel2a">
518      <p>Panel 2 content goes here.</p>
519    </div>
520
521    <div class="content" id="panel3a">
522      <p>Panel 3 content goes here.</p>
523    </div>
524
525    <div class="content" id="panel4a">
526      <p>Panel 4 content goes here.</p>
527    </div>
528  </div>
529
530
531
532  <hr>
533  <h4 id="side-nav">Side Nav</h4>
534  <div class="row">
535    <div class="large-4 columns end">
536      <ul class="side-nav">
537        <li class="active"><a href="#">Link 1</a></li>
538        <li><a href="#">Link 2</a></li>
539        <li class="divider"></li>
540        <li><a href="#">Link 3</a></li>
541        <li><a href="#">Link 4</a></li>
542      </ul>
543    </div>
544  </div>
545
546  <hr>
547  <h4 id="sub-nav">Sub Nav</h4>
548  <dl class="sub-nav">
549    <dt>Filter:</dt>
550    <dd class="active"><a href="#">All</a></dd>
551    <dd><a href="#">Active</a></dd>
552    <dd><a href="#">Pending</a></dd>
553    <dd><a href="#">Suspended</a></dd>
554  </dl>
555
556  <hr>
557  <h4 id="tables">Tables</h4>
558  <table>
559    <thead>
560      <tr>
561        <th width="200">Table Header</th>
562        <th>Table Header</th>
563        <th width="150">Table Header</th>
564        <th width="150">Table Header</th>
565      </tr>
566    </thead>
567    <tbody>
568      <tr>
569        <td>Content Goes Here</td>
570        <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
571        <td>Content Goes Here</td>
572        <td>Content Goes Here</td>
573      </tr>
574      <tr>
575        <td>Content Goes Here</td>
576        <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
577        <td>Content Goes Here</td>
578        <td>Content Goes Here</td>
579      </tr>
580      <tr>
581        <td>Content Goes Here</td>
582        <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
583        <td>Content Goes Here</td>
584        <td>Content Goes Here</td>
585      </tr>
586    </tbody>
587  </table>
588
589  <hr>
590  <h4 id="thumbnails">Thumbnails</h4>
591  <p><img class="th" src="http://lorempixel.com/800/800/"><img class="th" src="http://lorempixel.com/800/800/"></p>
592  <hr>
593  <h4 id="tooltips">Tooltips</h4>
594  <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.">&quot;tip-bottom&quot;</span>, which is the default position, <span data-tooltip class="has-tip tip-top noradius" data-width="210" title="I'm on the top and I'm not rounded!">&quot;tip-top&quot; (hehe)</span>, <span data-tooltip="left" class="has-tip tip-left" data-width="90" title="I'm on the left!">&quot;tip-left&quot;</span>, or <span data-tooltip="right" class="has-tip tip-right" data-width="120" title="I'm on the right!">&quot;tip-right&quot;</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>
595
596  <hr>
597  <h4 id="top-bar">Top Bar</h4>
598  <nav class="top-bar" data-topbar>
599    <ul class="title-area">
600      <!-- Title Area -->
601      <li class="name">
602        <h1>
603          <a href="#">
604            Top Bar Title
605          </a>
606        </h1>
607      </li>
608      <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
609    </ul>
610
611    <section class="top-bar-section">
612      <!-- Right Nav Section -->
613      <ul class="right">
614        <li class="divider"></li>
615        <li class="has-dropdown">
616          <a href="#">Main Item 1</a>
617          <ul class="dropdown">
618            <li><label>Section Name</label></li>
619            <li class="has-dropdown">
620              <a href="#" class="">Has Dropdown, Level 1</a>
621              <ul class="dropdown">
622                <li><a href="#">Dropdown Options</a></li>
623                <li><a href="#">Dropdown Options</a></li>
624                <li><a href="#">Level 2</a></li>
625                <li><a href="#">Subdropdown Option</a></li>
626                <li><a href="#">Subdropdown Option</a></li>
627                <li><a href="#">Subdropdown Option</a></li>
628              </ul>
629            </li>
630            <li><a href="#">Dropdown Option</a></li>
631            <li><a href="#">Dropdown Option</a></li>
632            <li class="divider"></li>
633            <li><label>Section Name</label></li>
634            <li><a href="#">Dropdown Option</a></li>
635            <li><a href="#">Dropdown Option</a></li>
636            <li><a href="#">Dropdown Option</a></li>
637            <li class="divider"></li>
638            <li><a href="#">See all &rarr;</a></li>
639          </ul>
640        </li>
641        <li class="divider"></li>
642        <li class="has-dropdown">
643          <a href="#">Main Item 2</a>
644          <ul class="dropdown">
645            <li><a href="#">Dropdown Option</a></li>
646            <li><a href="#">Dropdown Option</a></li>
647            <li><a href="#">Dropdown Option</a></li>
648            <li class="divider"></li>
649            <li><a href="#">See all &rarr;</a></li>
650          </ul>
651        </li>
652      </ul>
653    </section>
654  </nav>
655
656  <!-- End Top Bar -->
657
658  <hr>
659  <h4 id="type">Type</h4>
660  <div class="type-demo">
661
662    <h1>h1. This is a very large header.</h1>
663    <h2>h2. This is a large header.</h2>
664    <h3>h3. This is a medium header.</h3>
665    <h4>h4. This is a moderate header.</h4>
666    <h5>h5. This is a small header.</h5>
667    <h6>h6. This is a tiny header.</h6>
668
669    <br>
670
671    <h1 class="subheader">h1. subheader</h1>
672    <h2 class="subheader">h2. subheader</h2>
673    <h3 class="subheader">h3. subheader</h3>
674    <h4 class="subheader">h4. subheader</h4>
675    <h5 class="subheader">h5. subheader</h5>
676    <h6 class="subheader">h6. subheader</h6>
677
678    <hr>
679
680    <h3>Definition List</h3>
681    <h5>Definition lists are great for small block of copy that describe the header</h5>
682    <dl>
683      <dt>Lower cost</dt>
684      <dd>The new version of this product costs significantly less than the previous one!</dd>
685      <dt>Easier to use</dt>
686      <dd>We&#39;ve changed the product so that it&#39;s much easier to use!</dd>
687      <dt>Safe for kids</dt>
688      <dd>You can leave your kids alone in a room with this product and they won&#39;t get hurt (not a guarantee).</dd>
689    </dl>
690    <hr>
691
692    <h5>Un-ordered lists are great for making quick outlines bulleted.</h5>
693    <ul class="disc">
694      <li>List item with a much longer description or more content.</li>
695      <li>List item</li>
696      <li>List item
697        <ul>
698          <li>Nested List Item</li>
699          <li>Nested List Item</li>
700          <li>Nested List Item</li>
701        </ul>
702      </li>
703      <li>List item</li>
704      <li>List item</li>
705      <li>List item</li>
706    </ul>
707
708    <h5>Ordered lists are great for lists that need order, duh.</h5>
709    <ol>
710      <li>List Item 1</li>
711      <li>List Item 2</li>
712      <li>List Item 3</li>
713    </ol>
714
715
716
717    <br>
718    <h5>Blockquote</h5>
719    <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>
720
721    <br>
722    <h5>Vcard</h5>
723    <ul class="vcard">
724      <li class="fn">Gaius Baltar</li>
725      <li class="street-address">123 Colonial Ave.</li>
726      <li class="locality">Caprica City</li>
727      <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
728      <li class="email"><a href="#">mail@email.be</a></li>
729    </ul>
730
731  </div>
732
733  <hr>
734  <h4 id="visibility-classes">Visibility Classes</h4>
735  <h5 id="screen-size-visibility-control-show-">Screen Size Visibility Control (Show)</h5>
736  <p>The following text should describe the screen size you&#39;re using:</p>
737  <div class="row">
738    <div class="large-6 columns">
739      <h4>HTML</h4>
740      <pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">&quot;panel&quot;</span>&gt;</span>
741        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-small-only&quot;</span>&gt;</span>This text is shown only on a small screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
742        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-medium-up&quot;</span>&gt;</span>This text is shown on medium screens and up.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
743        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-medium-only&quot;</span>&gt;</span>This text is shown only on a medium screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
744        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-large-up&quot;</span>&gt;</span>This text is shown on large screens and up.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
745        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-large-only&quot;</span>&gt;</span>This text is shown only on a large screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
746        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-xlarge-up&quot;</span>&gt;</span>This text is shown on xlarge screens and up.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
747        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-xlarge-only&quot;</span>&gt;</span>This text is shown only on an xlarge screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
748        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-xxlarge-up&quot;</span>&gt;</span>This text is shown on xxlarge screens and up.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
749        <span class="tag">&lt;/<span class="title">p</span>&gt;</span></div></code></pre>
750
751    </div>
752    <div class="large-6 columns">
753      <h4>Rendered HTML</h4>
754      <p class="panel">
755        <strong class="show-for-small-only">This text is shown only on a small screen.</strong>
756        <strong class="show-for-medium-up">This text is shown on medium screens and up.</strong>
757        <strong class="show-for-medium-only">This text is shown only on a medium screen.</strong>
758        <strong class="show-for-large-up">This text is shown on large screens and up.</strong>
759        <strong class="show-for-large-only">This text is shown only on a large screen.</strong>
760        <strong class="show-for-xlarge-up">This text is shown on xlarge screens and up.</strong>
761        <strong class="show-for-xlarge-only">This text is shown only on an xlarge screen.</strong>
762        <strong class="show-for-xxlarge-up">This text is shown on xxlarge screens and up.</strong>
763      </p>
764    </div>
765  </div>
766
767
768
769  <h5 id="screen-size-visibility-control-hide-">Screen Size Visibility Control (Hide)</h5>
770  <p>The following text should describe the screen size you aren&#39;t using:</p>
771  <div class="row">
772    <div class="large-6 columns">
773      <h4>HTML</h4>
774      <pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">&quot;panel&quot;</span>&gt;</span>
775        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-small-only&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on a small screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
776        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-medium-up&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on a medium, large, xlarge, or xxlarge screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
777        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-medium-only&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on a medium screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
778        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-large-up&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on a large, xlarge, or xxlarge screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
779        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-large-only&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on a large screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
780        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-xlarge-up&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on an xlarge screen and up.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
781        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-xlarge-only&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on an xlarge screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
782        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-xxlarge-up&quot;</span>&gt;</span>You are <span class="tag">&lt;<span class="title">em</span>&gt;</span>not<span class="tag">&lt;/<span class="title">em</span>&gt;</span> on an xxlarge screen.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
783        <span class="tag">&lt;/<span class="title">p</span>&gt;</span></div></code></pre>
784
785    </div>
786    <div class="large-6 columns">
787      <h4>Rendered HTML</h4>
788      <p class="panel">
789        <strong class="hide-for-small-only">You are <em>not</em> on a small screen.</strong>
790        <strong class="hide-for-medium-up">You are <em>not</em> on a medium, large, xlarge, or xxlarge screen.</strong>
791        <strong class="hide-for-medium-only">You are <em>not</em> on a medium screen.</strong>
792        <strong class="hide-for-large-up">You are <em>not</em> on a large, xlarge, or xxlarge screen.</strong>
793        <strong class="hide-for-large-only">You are <em>not</em> on a large screen.</strong>
794        <strong class="hide-for-xlarge-up">You are <em>not</em> on an xlarge screen and up.</strong>
795        <strong class="hide-for-xlarge-only">You are <em>not</em> on an xlarge screen.</strong>
796        <strong class="hide-for-xxlarge-up">You are <em>not</em> on an xxlarge screen.</strong>
797      </p>
798    </div>
799  </div>
800
801
802
803  <h5 id="orientation-detection">Orientation Detection</h5>
804  <p>The following text should describe the device orientation you&#39;re using:</p>
805  <div class="row">
806    <div class="large-6 columns">
807      <h4>HTML</h4>
808      <pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">&quot;panel&quot;</span>&gt;</span>
809        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-landscape&quot;</span>&gt;</span>You are in landscape orientation.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
810        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-portrait&quot;</span>&gt;</span>You are in portrait orientation.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
811        <span class="tag">&lt;/<span class="title">p</span>&gt;</span></div></code></pre>
812
813    </div>
814    <div class="large-6 columns">
815      <h4>Rendered HTML</h4>
816      <p class="panel">
817        <strong class="show-for-landscape">You are in landscape orientation.</strong>
818        <strong class="show-for-portrait">You are in portrait orientation.</strong>
819      </p>
820    </div>
821  </div>
822
823
824
825  <h5 id="touch-detection">Touch Detection</h5>
826  <p>The following text should describe if you&#39;re using a touch device:</p>
827  <div class="row">
828    <div class="large-6 columns">
829      <h4>HTML</h4>
830      <pre><code class="language-html"><div class="code-container"><span class="tag">&lt;<span class="title">p</span> <span class="attribute">class</span>=<span class="value">&quot;panel&quot;</span>&gt;</span>
831        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;show-for-touch&quot;</span>&gt;</span>You are on a touch-enabled device.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
832        <span class="tag">&lt;<span class="title">strong</span> <span class="attribute">class</span>=<span class="value">&quot;hide-for-touch&quot;</span>&gt;</span>You are not on a touch-enabled device.<span class="tag">&lt;/<span class="title">strong</span>&gt;</span>
833        <span class="tag">&lt;/<span class="title">p</span>&gt;</span></div></code></pre>
834
835    </div>
836    <div class="large-6 columns">
837      <h4>Rendered HTML</h4>
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    </div>
843  </div>
844  <script type="text/javascript">
845   $(document).foundation('joyride', 'start');
846  </script>
Note: See TracBrowser for help on using the repository browser.