-
Notifications
You must be signed in to change notification settings - Fork 0
/
support.html
597 lines (535 loc) · 25.1 KB
/
support.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
<!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: Support</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>
<style type="text/css">
.row.support { padding: 9px 0; }
.row.support:nth-child(2n) { background: #f4f4f4; }
.support .win { color: #4ea600; font-weight: bold; }
.support .meh { color: #888; font-weight: bold; }
.support .fail { color: #cc0000; font-weight: bold; }
.tooltip { font-size: 14px; }
</style>
<div class="row">
<div class="large-9 push-3 columns">
<h2>Support</h2>
<h4 class="subheader">Foundation was designed for and tested on numerous browsers and devices. Here's the rundown on what's tested, and what to do if something misbehaves.</h4>
<h5>Browser and Device Support</h5>
<p>We go to great lengths to ensure that Foundation works as expected on a variety of common browsers and devices. Given how forward-facing Foundation is there are some aesthetic properties which are not supported in older browsers (border radii, box shadows, etc), but the core elements are reliable across the board.</p>
<div class="row support">
<div class="small-3 columns"><h5>Browser/OS</h5></div>
<div class="small-3 columns"><h5>The Grid</h5></div>
<div class="small-3 columns"><h5>Layout/UI</h5></div>
<div class="small-3 columns"><h5>JS</h5></div>
</div>
<div class="row support">
<div class="small-3 columns">Chrome</div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
</div>
<div class="row support">
<div class="small-3 columns">Firefox</div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
</div>
<div class="row support">
<div class="small-3 columns">Safari</div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
</div>
<div class="row support">
<div class="small-3 columns">IE10</div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
</div>
<div class="row support">
<div class="small-3 columns">IE9</div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
</div>
<div class="row support">
<div class="small-3 columns">IE8</div>
<div class="small-3 columns"><span data-tooltip class="meh has-tip tip-top" data-width="200" title="The grid is within a media query so IE8 gets the mobile layouts. If you need a full grid for IE8, see below for a link to a gist that will help out immensely.">●</span></div>
<div class="small-3 columns"><span data-tooltip class="meh has-tip tip-top" title="90% of our UI elements will work perfectly in IE8. There are a few cases, like radio switches, where we make sure IE8 just gets normal UI elements instead of custom ones." data-width="200">●</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
</div>
<div class="row support">
<div class="small-3 columns">IE7</div>
<div class="small-3 columns"><span class="fail">✗</span></div>
<div class="small-3 columns"><span data-tooltip title="While we don't officially support IE7, our UI styles should work for the most part" class="meh has-tip tip-top" data-width="200">●</span></div>
<div class="small-3 columns"><span data-tooltip title="While we don't officially support IE7, our JS works for the most part. Clearing and tooltips have some issues with style and position." class="meh has-tip tip-top" data-width="200">●</span></div>
</div>
<div class="row support">
<div class="small-3 columns">iOS (iPhone)</div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
</div>
<div class="row support">
<div class="small-3 columns">iOS (iPad)</div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
</div>
<div class="row support">
<div class="small-3 columns">Android 2, 4 (Phone)</div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
</div>
<div class="row support">
<div class="small-3 columns">Android 2, 4 (Tablet)</div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
</div>
<div class="row support">
<div class="small-3 columns">Windows Phone 7+</div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
</div>
<div class="row support">
<div class="small-3 columns">Surface</div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
<div class="small-3 columns"><span class="win">✓</span></div>
</div>
<hr>
<h5>Want IE8 Grid Support?</h5>
<p>We know it can be hard to get clients to ditch support for IE8. We're hoping with the auto-update to IE10 release from Microsoft, we won't need to worry about it anymore. Until then, here's a gist with a grid that will work in IE8, just like it did in Foundation 3.</p>
<a class="small button" href="https://gist.github.com/hatefulcrawdad/5068210">Foundation IE8 Grid</a>
<hr>
<h5>Upgrading from Foundation 3.x?</h5>
<p>We've written a comprehensive <a href="http://foundation.zurb.com/migration.php">Migration Guide</a> to help you update your code for an existing or work in progress project.</p>
<hr />
<div class="panel">
<h4>Get Answers</h4>
<h5 class="subheader">We've outlined some of the most common frequently asked questions so that you can easily find the answer, as well as given you a way to contact us directly with questions, feedback or concerns.</h5>
<a class="button" href="faq.html">Read the FAQ or Ask a Question »</a> <a class="secondary button" href="changelog.html">See the Version Changelog »</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 ">
<p class="title"><a href="#">Using Foundation</a></p>
<div class="content">
<ul class="side-nav">
<li><a class="" 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 active">
<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:foundation@zurb.com">foundation@zurb.com</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>