-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfaq.html
516 lines (454 loc) · 22.1 KB
/
faq.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
<!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: FAQ</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>FAQ</h2>
<h4 class="subheader">We hear a lot of questions from people using Foundation and realized that a lot of the same ones were being asked. We put together this list of FAQs to help you find answers to common questions.</h4>
<h4>Why doesn't Foundation 4 support IE7 or IE8?</h4>
<p>Foundation 4 is mobile-first, meaning it relies on media queries to layer in more complex layouts and components. Browsers or devices that don't support media queries will be restricted to a simple, single-column layout. In some ways, Foundation 4 better supports IE6-7 inasmuch as it provides a mobile but not broken experience. In IE8 Foundation 4 will provide less than Foundation 3, but with IE8's market share in such steep decline we thought this was the right time.</p>
<p>If IE8 support is important for your users / customers, you can use <a href="../files/foundation-3.2.5.zip">Foundation 3.2</a>, which supports IE8. It's not mobile first but it's pretty good stuff.</p>
<h4>Can I use Foundation for something I'm going to sell?</h4>
<p>Yes! Foundation is licensed under the MIT open source license, meaning you can do almost anything with it. The only thing you can't do is imply that Foundation itself is what you're selling.</p>
<h4>Is Foundation tested on [some other device or browser]?</h4>
<p>We try and be comprehensive in our testing, but there are thousands of devices so it's often just not feasible. We'd love to hear about Foundation's behaviour on other devices, but the list above is what we test each release on. If your browser or device is not listed your results may vary.</p>
<h4>Where can I find the Foundation 3 docs?</h4>
<p>For those of you still working on Foundation 3 sites, or who need to continue supporting IE8 with Foundation, we keep the Foundation 3 docs available. <a href="../old-docs/f3">View the Foundation 3 Docs →</a></p>
<hr>
<h2>Getting Help</h2>
<h5 class="subheader">If the documentation and questions above aren't enough, there are several avenues of support available for you to pursue.</h5>
<h5><a href="https://groups.google.com/forum/?fromgroups#!forum/foundation-framework-">Foundation Framework Google Group</a></h5>
<p>This is an active group of Foundation users who can answer questions about implementation or approach. If you aren't sure how to do something, or something isn't working like you'd expect, reach out here.</p>
<h5><a href="http://github.com/zurb/foundation/issues">Github Issues</a></h5>
<p>If you've found a bug in the framework (or think you have) you can file it here. We try and address these as part of ongoing development. Please use this only for bugs or things that seem incorrect, support requests will not be addressed quickly here.</p>
<h5><a href="http://twitter.com/foundationzurb">@foundationzurb</a></h5>
<p><a href="http://twitter.com/foundationzurb">Follow us on Twitter</a> to hear about new sites using Foundation, code examples, playground pieces from ZURB and more. You can also ping us with quick questions or other support issues, we're usually pretty speedy.</p>
<h5><a href="mailto:[email protected]">Get in Touch</a></h5>
<p>If you're totally stuck and need some help, shoot us <a href="mailto:[email protected]">an email</a> and we'll typically get back within a day or two.</p>
<hr>
<div class="panel">
<h3>What's Changed Recently?</h3>
<h5 class="subheader">Foundation is the most advanced front-end framework in existence. We've ditched IE7 so that we can do more awesome things and push the web to where it needs to be. Take a look at our changelog to know what's recently been changed or updated.</h5>
<a class="button" href="support.html">Browser Support »</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 active">
<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>