-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
768 lines (691 loc) · 36.4 KB
/
index.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
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
<!doctype html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/favicons/apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/favicons/apple-touch-icon-114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/favicons/apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="img/favicons/apple-touch-icon-precomposed.png">
<link rel="icon" href="img/favicons/favicon.ico" type="image/x-icon">
<title>Foundation Docs: Getting Started</title>
<link rel="stylesheet" href="/assets/normalize.css" />
<link rel="stylesheet" href="/assets/docs.css" />
<script src="/assets/vendor/custom.modernizr.js"></script>
</head>
<body class="antialiased off-canvas hide-extras">
<nav class="top-bar hide-for-small">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><a href="/">Foundation</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li><a href="/grid.php">Features</a></li>
<li class="divider"></li>
<li><a href="/templates.php">Add-ons</a></li>
<li class="divider"></li>
<li><a href="/case-jacquelinewest.php">Case Studies</a></li>
<li class="divider"></li>
<li><a href="/docs/">Docs</a></li>
<li class="divider"></li>
<li><a href="/training.php">Training</a></li>
<li class="divider"></li>
<li class="has-form">
<a href="http://foundation.zurb.com/docs" class="button">Getting Started</a>
</li>
</ul>
</section>
</nav>
<section class="main">
<header class="show-for-small">
<a class='sidebar-button show-for-small' id="sidebarButton" href="#sidebar" ><img src="/assets/offcanvas/menu-wht.png" alt="ZURB Menu"><h4>Foundation</h4></a>
</header>
<div class="row">
<div class="large-12 columns">
<h1 class="docs header"><a href="http://foundation.zurb.com/docs/">Foundation 4 Documentation</a></h1>
<h6 class="docs subheader"><a href="http://foundation.zurb.com/old-docs/f3">Want F3 Docs?</a></h6>
<hr>
</div>
</div>
<div class="row">
<div class="large-9 push-3 columns">
<h2>Getting Started</h2>
<h5 class="subheader">Whether you are using Scss or CSS, we've made it easy to start a project so that you can help take over the world one responsive site at a time.</h5>
<p>Foundation is developed in <a href="http://www.sass-lang.com">Sass</a>, which is powerful CSS pre-processor that helps you write cleaner, more organized, CSS that you can more easily maintain over time without the typical headaches of vanilla CSS. On top of our minimal styling, we've written powerful Javascript plugins that will make useful interactions easier to implement across screen sizes.</p>
<div class="" style="font-size: 14px;">
<p><strong>Looking for Foundation 3?</strong><br>
We're still supporting Foundation 3 for those who don't want to take the leap into the future with us. You can view the docs, download a package or visit the Github page.</p>
<ul class="button-group">
<li><a class="small button secondary" style="margin-bottom: 0;" href="../download-f3.php">Download</a></li>
<li><a class="small button secondary" style="margin-bottom: 0;" href="../old-docs/f3">Docs</a></li>
<li><a class="small button secondary" style="margin-bottom: 0;" href="https://github.com/zurb/foundation/tree/3-2-stable">Github</a></li>
</ul>
<hr>
<p><strong>Ready to Move to 4?</strong><br>
We've got you covered with a migration guide that explains the differences.</p>
<a class="small button secondary" href="../migration.php">Migration Guide</a>
</div>
<hr>
<h3>What comes with Foundation?</h3>
<h5 class="subheader">We've got you covered when it comes to useful features and we've made it easy to take out what you don't need. Here's what you'll get when you create a project using our Sass version or the default CSS version:</h5>
<div class="row">
<div class="large-4 columns">
<dl>
<dt><a href="components/grid.html">The Grid</a></dt>
<dd>Our grid works on almost any device and has support for nesting, source ordering, offsets and device presentation. It almost makes creating layouts too easy!</dd>
</dl>
</div>
<div class="large-4 columns">
<dl>
<dt><a href="components/type.html">Typography</a></dt>
<dd>Our type is based on a golden ratio modular scale that creates meaningful relationships for the copy on the page. It's easily updated using Scss or our CSS customizer.</dd>
</dl>
</div>
<div class="large-4 columns">
<dl>
<dt><a href="components/buttons.html">Buttons</a></dt>
<dd>Buttons are a core interactive element of the Web. We've included styles for creating simple marketing CTAs to complex application toolbars.</dd>
</dl>
</div>
</div>
<div class="row">
<div class="large-4 columns">
<dl>
<dt><a href="components/top-bar.html">Navigation</a></dt>
<dd>People have to get around. Navigation styles in Foundation include a complex top bar that supports 3-level dropdown navigation for simple bars, sidebars and subnav pills.</dd>
</dl>
</div>
<div class="large-4 columns">
<dl>
<dt><a href="components/forms.html">Forms</a></dt>
<dd>Built with the Foundation Grid, you can create simple or complicated forms quickly and easily— validation states, custom select, radio buttons and more.</dd>
</dl>
</div>
<div class="large-4 columns">
<dl>
<dt><a href="components/panels.html">UI Elements</a></dt>
<dd>We've also included lots of useful elements like visibility classes (to hide or show things based on screen size or orientation), labels, alerts, tooltips, panels and a lot more.</dd>
</dl>
</div>
</div>
<div class="row">
<div class="large-4 columns">
<dl>
<dt><a href="components/section.html">Section</a></dt>
<dd>Whether it's entire pages or simple tabbed content, Foundation's tabs get the job done. Not only stylish, but interactive out of the box.</dd>
</dl>
</div>
<div class="large-4 columns">
<dl>
<dt><a href="components/orbit.html">Orbit</a></dt>
<dd>A powerful image or content slider that works responsively and includes tons of useful options, such as timers, paddles, bullet thumbs and more.</dd>
</dl>
</div>
<div class="large-4 columns">
<dl>
<dt><a href="components/reveal.html">Reveal</a></dt>
<dd>You can easily call modals without writing any JS, even spawn subsequent modals cleanly on the same page. Reveal works across devices.</dd>
</dl>
</div>
</div>
<div class="row">
<div class="large-4 columns">
<dl>
<dt><a href="components/clearing.html">Clearing</a></dt>
<dd>Show off your images in style with our easy to use gallery plugin. It's built with simple unordered lists that can be styled to your hearts content.</dd>
</dl>
</div>
<div class="large-4 columns">
<dl>
<dt><a href="components/magellan.html">Magellan</a></dt>
<dd>A flexible sticky navigation that knows where you are on the page. You just tell it what to recognize and set it off.</dd>
</dl>
</div>
<div class="large-4 columns">
<dl>
<dt><a href="components/joyride.html">Joyride</a></dt>
<dd>This plugin lets you give users a tour of your site or app. Joyride is easy to customize using CSS or our Scss variables.</dd>
</dl>
</div>
</div>
<div class="row">
<div class="large-4 columns">
<dl>
<dt><a href="components/tooltips.html">Tooltips</a></dt>
<dd>Tooltips lets you add quick hover or tap tooltips to elements.</dd>
</dl>
</div>
<div class="large-4 columns end">
<dl>
<dt><a href="components/dropdown.html">Dropdown</a></dt>
<dd>We've made a dropdown plugin that makes it easy to attach a popover dropdown to any element on the page.</dd>
</dl>
</div>
<div class="large-4 columns end">
<dl>
<dt><a href="components/interchange.html">Interchange</a></dt>
<dd>This plugin lets you load up the appropriate size image based on media queries that you define.</dd>
</dl>
</div>
</div>
<div class="row">
<div class="large-4 columns">
<dl>
<dt><a href="components/abide.html">Abide</a></dt>
<dd>Abide is an HTML5 form validation library that supports the native API by using patterns and required attributes.</dd>
</dl>
</div>
</div>
<hr>
<h3>How is a project structured?</h3>
<h5 class="subheader">We follow common patterns for directory structure that are logical and easily maintained. Below is an explanation of each file you'll get when you create a project using our gem or download via our <a href="http://foundation.zurb.com/migration.php">customizer</a>.</h5>
<div class="row">
<div class="large-4 columns">
<dl>
<dt>css</dt>
<dd>Includes <code>foundation.css</code> and <code>foundation.min.css</code> so you can choose which to use. You'll also see <code>normalize.css</code>, which we use for resets. Add another stylesheet on top of Foundation to override defaults.</dd>
</dl>
</div>
<div class="large-4 columns">
<dl>
<dt>js</dt>
<dd>All of our plugins and the necessary JavaScript to make Foundation work properly. <strong>All JS is initiated by default</strong>.</dd>
</dl>
</div>
<div class="large-4 columns">
<dl>
<dt>img</dt>
<dd>This directory actually comes empty in Foundation 4! We no longer have any images included in the core of Foundation.</dd>
</dl>
</div>
</div>
<div class="row">
<div class="large-4 columns">
<dl>
<dt>index.html</dt>
<dd>A sample structure for page content, giving you something to use as a basic structural template for the rest of the pages in your project.</dd>
</dl>
</div>
<div class="large-4 columns">
<dl>
<dt>humans.txt</dt>
<dd>A way to tell the world about the people that worked on the sites you build, giving them kudos they deserve.</dd>
</dl>
</div>
<div class="large-4 columns">
<dl>
<dt>robots.txt</dt>
<dd>Give instructions to web robots so search engines know what to do when they crawl your site for content.</dd>
</dl>
</div>
</div>
<br>
<div class="row">
<div class="large-12 columns">
<div class="panel">
<h6 class="subheader"><strong>Using the Gem?</strong> You'll see a couple extra pieces in your project upon creation. These are:</h6>
<dl>
<dt>scss/</dt>
<dd>Your main style folder is named <strong>scss/</strong> and contains <code>app.scss</code> (which has the foundation gem import and commented portions you can pick and choose). Override the Foundation styles within your <code>app.scss</code> file. You can see the compiled CSS in your stylesheets directory after you manually <span class="has-tip top" title="$ compass compile <filename>">compile</span> or <span class="has-tip top" title="$ compass watch <directory>">watch</span>. This directory also includes <code>_settings.scss</code>, which is used to control variables that help easily style Foundation. You'll also notice that the directory names are slightly different. Compass defaults to "stylesheets", "javascripts", and "image".</dd>
<dt>config.rb</dt>
<dd>This file is used by <a href="http://compass-style.org">Compass</a> to compile your project. Here you can control the output style of your CSS, the structure of your directories and other useful settings.</dd>
</dl>
</div>
</div>
</div>
<hr>
<h3 id="basicHTMLMarkup">HTML Page Markup</h3>
<h5 class="subheader">Our markup structure is straight forward and gives you the flexibility you need to create to your hearts desires. Here's an example page that includes the basics:</h5>
<div class='html'><div class='highlight'><pre class="">
<span class="cp"><!DOCTYPE html></span>
<span class="c"><!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--></span>
<span class="c"><!--[if gt IE 8]><!--></span> <span class="nt"><html</span> <span class="na">class=</span><span class="s">"no-js"</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span> <span class="c"><!--<![endif]--></span>
<span class="nt"><head></span>
<span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width"</span> <span class="nt">/></span>
<span class="nt"><title></span>Foundation 4<span class="nt"></title></span>
<span class="c"><!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"css/normalize.css"</span> <span class="nt">/></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"css/foundation.css"</span> <span class="nt">/></span>
<span class="c"><!-- If you are using the gem version, you need this only --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"css/app.css"</span> <span class="nt">/></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/vendor/custom.modernizr.js"</span><span class="nt">></script></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="c"><!-- body content here --></span>
<span class="nt"><script></span>
<span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s1">'<script src='</span> <span class="o">+</span>
<span class="p">(</span><span class="s1">'__proto__'</span> <span class="k">in</span> <span class="p">{}</span> <span class="p">?</span> <span class="s1">'js/vendor/zepto'</span> <span class="p">:</span> <span class="s1">'js/vendor/jquery'</span><span class="p">)</span> <span class="o">+</span>
<span class="s1">'.js><\/script>'</span><span class="p">)</span>
<span class="nt"></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/foundation/foundation.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/foundation/foundation.alerts.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/foundation/foundation.clearing.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/foundation/foundation.cookie.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/foundation/foundation.dropdown.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/foundation/foundation.forms.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/foundation/foundation.joyride.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/foundation/foundation.magellan.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/foundation/foundation.orbit.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/foundation/foundation.placeholder.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/foundation/foundation.reveal.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/foundation/foundation.section.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/foundation/foundation.tooltips.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/foundation/foundation.topbar.js"</span><span class="nt">></script></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"js/foundation/foundation.interchange.js"</span><span class="nt">></script></span>
<span class="nt"><script></span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">foundation</span><span class="p">();</span>
<span class="nt"></script></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</pre></div></div>
<div class="row">
<div class="large-4 columns">
<dl>
<dt>Doctype & Head</dt>
<dd>We use the HTML doctype declaration to tell the browser what to expect. From there we've used a <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">technique by Paul Irish</a> that attaches classes to the HTML for IE. After that, we set the character set to UTF-8.</dd>
<dt>Meta Viewport tag</dt>
<dd>This is used to make sure smaller devices use the device width as the viewport width.</dd>
<dt>Title Tag</dt>
<dd>This one is pretty self-explanatory. You're setting the name of the current page with this value.</dd>
</dl>
</div>
<div class="large-4 columns">
<dl>
<dt>CSS & Modernizr</dt>
<dd>The default CSS download includes everything you need to get going, including necessary styles and our custom Modernizr script.</dd>
<dt>CSS</dt>
<dd>We include <code>foundation.min.css</code> and <code>foundation.css</code> with a default CSS download. The difference here is whether or not you want minified code or not (link whichever you want, but not both).</dd>
</dl>
</div>
<div class="large-4 columns">
<dl>
<dt>Modernizr</dt>
<dd>We use this to give us the HTML5 Shiv, touch classes and JS media queries that help us control Foundation.</dd>
<dt>Javascripts</dt>
<dd>Our JS is linked up right before the closing body tag and includes all necessary plugins and initializers to hit the ground running.</dd>
</dl>
</div>
</div>
<hr>
<div class="panel">
<h3>Get going!</h3>
<h5 class="subheader">Now that you understand the gist of what Foundation is and how it works, it's time to start a project! We've got two different ways for you to build projects with Foundation, a Compass Gem using Scss or a with plain CSS.</h5>
<a href="./sass.html" class="button">Using the Gem</a>
<a href="http://foundation.zurb.com/migration.php" class="button secondary">Quickstart with CSS</a>
</div>
</div>
<div class="large-3 pull-9 columns">
<div class="docs section-container accordion" data-section="accordion" data-options="one_up: false">
<section class="section active">
<p class="title"><a href="#">Using Foundation</a></p>
<div class="content">
<ul class="side-nav">
<li><a class="active" href="index.html">Get Started</a></li>
<li><a class="" href="javascript.html">Javascript</a></li>
<li><a class="" href="sass.html">Sass</a></li>
<li><a class="" href="rails.html">Rails</a></li>
<li><a class="" href="media-queries.html">Media Queries</a></li>
<li><a href="components/visibility.html">Visibility Classes</a></li>
<li><a class="" href="rtl.html">Right-to-Left Support</a></li>
</ul>
</div>
</section>
<section class="section">
<p class="title"><a href="#">Grid</a></p>
<div class="content">
<ul class="side-nav">
<li><a href="components/grid.html">Grid</a></li>
<li><a href="components/block-grid.html">Block Grid</a></li>
</ul>
</div>
</section>
<section class="section">
<p class="title"><a href="#">Navigation</a></p>
<div class="content">
<ul class="side-nav">
<li><a href="components/pagination.html">Pagination</a></li>
<li><a href="components/side-nav.html">Side Nav</a></li>
<li><a href="components/sub-nav.html">Sub Nav</a></li>
<li><a href="components/top-bar.html">Top Bar</a></li>
<li><a href="components/breadcrumbs.html">Breadcrumbs</a></li>
</ul>
</div>
</section>
<section class="section">
<p class="title"><a href="#">Buttons</a></p>
<div class="content">
<ul class="side-nav">
<li><a href="components/buttons.html">Buttons</a></li>
<li><a href="components/button-groups.html">Button Groups</a></li>
<li><a href="components/dropdown-buttons.html">Dropdown Buttons</a></li>
<li><a href="components/split-buttons.html">Split Buttons</a></li>
</ul>
</div>
</section>
<section class="section">
<p class="title"><a href="#">Forms</a></p>
<div class="content">
<ul class="side-nav">
<li><a href="components/forms.html">Forms</a></li>
<li><a href="components/custom-forms.html">Custom Forms</a></li>
<li><a href="components/switch.html">Switch</a></li>
</ul>
</div>
</section>
<section class="section">
<p class="title"><a href="#">Typography</a></p>
<div class="content">
<ul class="side-nav">
<li><a href="components/type.html">Type</a></li>
<li><a href="components/inline-lists.html">Inline Lists</a></li>
<li><a href="components/labels.html">Labels</a></li>
<li><a href="components/keystrokes.html">Keystrokes</a></li>
</ul>
</div>
</section>
<section class="section">
<p class="title"><a href="#">CSS Components</a></p>
<div class="content">
<ul class="side-nav">
<li><a href="components/global.html">Global Styles</a></li>
<li><a href="components/alert-boxes.html">Alert Boxes</a></li>
<li><a href="components/panels.html">Panels</a></li>
<li><a href="components/pricing-tables.html">Pricing Tables</a></li>
<li><a href="components/progress-bars.html">Progress Bars</a></li>
<li><a href="components/tables.html">Tables</a></li>
<li><a href="components/thumbnails.html">Thumbnails</a></li>
<li><a href="components/flex-video.html">Flex Video</a></li>
<li class="divider"></li>
<li><a target="_blank" style="font-style: italic" href="components/kitchen-sink.html">Kitchen Sink</a></li>
</ul>
</div>
</section>
<section class="section">
<p class="title"><a href="#">Javascript</a></p>
<div class="content">
<ul class="side-nav">
<li><a href="components/abide.html">Abide</a></li>
<li><a href="components/clearing.html">Clearing</a></li>
<li><a href="components/dropdown.html">Dropdown</a></li>
<li><a href="components/interchange.html">Interchange</a></li>
<li><a href="components/joyride.html">Joyride</a></li>
<li><a href="components/magellan.html">Magellan</a></li>
<li><a href="components/orbit.html">Orbit</a></li>
<li><a href="components/reveal.html">Reveal</a></li>
<li><a href="components/section.html">Section</a></li>
<li><a href="components/tooltips.html">Tooltips</a></li>
</ul>
</div>
</section>
<section class="section ">
<p class="title"><a href="faq.html">FAQ</a></p>
</section>
<section class="section ">
<p class="title"><a href="support.html">Support</a></p>
</section>
</div>
<p><a href="http://foundation.zurb.com/download.php" class="button expand" style="margin-bottom: 0;">Download Foundation 4</a></p>
<div class="jobs hide-for-small">
<h5>Awesome product jobs:</h5>
<div id="zurbJobsWidget"></div>
<a id="via" href="http://zurbjobs.com">via <span class="jobs-link">ZURBjobs</span></a>
</div>
</div>
</div>
<br>
<div class="zurb-footer-top bg-blue">
<div class="row property">
<div class="large-4 columns">
<div class="property-info">
<h3><a href="http://foundation.zurb.com/">Foundation</a></h3>
<p>Foundation is made by <a href="http://www.zurb.com/">ZURB</a>, a product design company in Campbell, California. We've put more than 15 years of experience building web products, services and websites into this framework.</p>
</div>
</div>
<div class="large-8 columns">
<div class="row collapse">
<div class="large-4 columns">
<div class="learn-links">
<h4 class="hide-for-small">Want More?</h4>
<ul>
<li><a href="http://zurb.com/expo/foundation-intro">Foundation Training</a></li>
<li><a href="http://zurb.com/expo/custom">Responsive</a></li>
<li><a href="http://zurb.com/services/our-work">Our Work</a></li>
<li><a href="http://zurb.com/apps">ZURB Apps</a></li>
</ul>
</div>
</div>
<div class="large-4 columns">
<div class="support-links">
<h4 class="hide-for-small">Talk to us</h4>
<p>Call us at <strong>(408) 341-0600</strong></p>
<p>Not a big talker? Email us at <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<div class="large-4 columns">
<div class="connect-links">
<h4 class="hide-for-small">Stay in touch</h4>
<p>Keep up with the latest on Foundation. Find us on Github.</p>
<a href="https://github.com/zurb/foundation" target="_blank" class="small button">Stay Connected</a>
</div>
</div>
</div>
</div>
</div>
<div class="row global">
<div class="large-3 small-6 columns">
<a href="http://zurb.com/services" class="footer-link-block services">
<span class="title">Services</span>
<span>Helping more than 200 startups succeed since 1998.</span>
</a>
</div>
<div class="large-3 small-6 columns">
<a href="http://foundation.zurb.com/" class="footer-link-block foundation">
<span class="title">Foundation</span>
<span>The most advanced front-end framework in the world.</span>
</a>
</div>
<div class="large-3 small-6 columns">
<a href="http://zurb.com/apps" class="footer-link-block apps">
<span class="title">Products</span>
<span>Prototype, iterate and collect feedback on your products.</span>
</a>
</div>
<div class="large-3 small-6 columns">
<a href="http://zurb.com/expo" class="footer-link-block expo">
<span class="title">Expo</span>
<span>Ideas, thoughts and design resources shared with you.</span>
</a>
</div>
</div>
</div>
<div class="zurb-footer-bottom">
<div class="row">
<div class="large-4 push-8 columns">
<ul class="home-social">
<li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
<li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
<li><a href="http://zurb.com/contact" class="mail"></a></li>
</ul>
</div>
<div class="large-8 pull-4 columns">
<a href="http://www.zurb.com" class="zurb-logo regular"></a>
<ul class="zurb-links">
<li><a href="http://zurb.com/about">About</a></li>
<li><a href="http://zurb.com/blog">Blog</a></li>
<li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> & Events</span></a></li>
<li><a href="http://zurb.com/contact">Contact</a></li>
<li><a href="http://zurb.com/sitemap">Sitemap</a></li>
</ul>
<p class="copyright">© 1998–2020 ZURB, Inc. All rights reserved.</p>
</div>
</div>
</div>
<div class="joyride-modal-bg"></div>
</section>
<aside id="sidebar" role="complementary">
<!-- For Future Use
<div id="passport">
<a id="user" href="#">
<h5>Firstname LastName</h5><br>
<p>sign out</p>
</a>
<a id="ava" href="#">
<div class="avatar"><img src="placehold.it/75x75"></div>
</a>
</div>
-->
<!-- This is the apps main navigation -->
<div class="main-menu">
<h6>Foundation</h6>
<nav id="sideMenu" role="navigation">
<ul id="sideMainNav" class="nav-bar">
<li class="show-for-small">
<a href="index.html">Home</a>
</li>
<li>
<a href="http://foundation.zurb.com/grid.php">Features</a>
</li>
<li>
<a href="http://foundation.zurb.com/templates.php">Add-ons</a>
</li>
<li>
<a href="http://foundation.zurb.com/case-jacquelinewest.php">Case Studies</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/">Docs</a>
</li>
<li>
<a href="http://foundation.zurb.com/training.php">Training</a>
</li>
</ul>
</nav>
</div>
<hr>
<!-- These links will vary depending on what app it is -->
<div class="more-goodness">
<h6>More ZURB Goodness</h6>
<nav role="navigation">
<ul id="secondarySideMainNav" class="nav-bar goodness">
<li><a href="http://zurb.com/expo/foundation-intro">Foundation Training</a></li>
<li><a href="http://zurb.com/services/our-work">Our Work</a></li>
<li><a href="http://zurb.com/apps">ZURB Apps</a></li>
</ul>
</nav>
</div>
<hr>
<!-- These links will be the same across all of our proprties & apps -->
<div class="zurb-links">
<ul class="top">
<li class="logo"><a href="http://zurb.com"><img src="/assets/offcanvas/zurb-logo.png" alt="ZURB"></a></li>
<li><a href="http://zurb.com/about">About</a></li>
<li><a href="http://zurb.com/blog">Blog</a></li>
<li><a href="http://zurb.com/contact">Contact</a></li>
</ul>
<ul class="pillars">
<li>
<a href="http://www.zurb.com/services" class="footer-link-block services">
<span class="title">Studios</span>
<span>Helping startups win since '98.</span>
</a>
</li>
<li>
<a href="http://foundation.zurb.com/" class="footer-link-block foundation">
<span class="title">Foundation</span>
<span>World's most advanced responsive framework.</span>
</a>
</li>
<li>
<a href="http://zurb.com/apps" class="footer-link-block apps">
<span class="title">ZURB Apps</span>
<span>Tools to rapidly prototype and iterate.</span>
</a>
</li>
<li>
<a href="http://zurb.com/expo" class="footer-link-block expo">
<span class="title">Expo</span>
<span>Online training for smarter product design.</span>
</a>
</li>
</ul>
</div>
</aside>
<!-- Reveal Modals begin -->
<div id="firstModal" class="reveal-modal">
<h2>This is a modal.</h2>
<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>
<p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
<p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
<a class="close-reveal-modal">×</a>
</div>
<div id="secondModal" class="reveal-modal">
<h2>This is a second modal.</h2>
<p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
<a class="close-reveal-modal">×</a>
</div>
<div id="videoModal" class="reveal-modal large">
<h2>This modal has video</h2>
<div class="flex-video">
<iframe width="800" height="315" src="http://www.youtube.com/embed/IkOQw96cfyE" frameborder="0" allowfullscreen></iframe>
</div>
<a class="close-reveal-modal">×</a>
</div>
<!-- Reveal Modals end -->
<script>
// Google Analytics
var _gaq = _gaq || [];
_gaq.push(
['_setAccount', 'UA-2195009-2'],
['_trackPageview'],
['b._setAccount', 'UA-2195009-27'],
['b._trackPageview']
);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
document.write('<script src="/assets/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js"><\/script>');
</script>
<script src="/assets/docs.js"></script>
<script>
$(document)
.foundation();
$.ajax({
url: '//zurb.com/jobs/widgets/jobs.json?limit=3',
dataType: 'jsonp',
success: function(data) {
var list = $("<ul></ul>");
$.each(data.jobs, function(idx, job) {
var item = "<li><a href='"+job.url+"' target='_blank'>" +
"<span class='positionTitle'>"+job.title+"</span>" +
"<span class='location'><span class='companyName'>"+job.company_name+"</span> in "+job.location+"</span>" +
"</a>" +
"</li>";
list.append(item);
});
// Customize This
$("#zurbJobsWidget").html(list);
}
});
// For Kitchen Sink Page
$('#start-jr').on('click', function() {
$(document).foundation('joyride','start');
});
</script>
</body>
</html>