zurb-foundation 3.0.7 → 3.0.8.rc1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +2 -0
- data/CONTRIBUTING.md +43 -0
- data/Gemfile.lock +2 -27
- data/README.md +2 -2
- data/foundation.gemspec +1 -3
- data/index.html +12 -6
- data/lib/foundation/version.rb +1 -1
- data/lib/zurb-foundation.rb +11 -4
- data/{stylesheets → scss}/foundation/_settings.scss +17 -2
- data/{stylesheets → scss}/foundation/common/_base.scss +0 -0
- data/{stylesheets → scss}/foundation/common/_forms.scss +2 -2
- data/{stylesheets → scss}/foundation/common/_globals.scss +3 -0
- data/{stylesheets → scss}/foundation/common/_typography.scss +7 -5
- data/{stylesheets → scss}/foundation/components/_grid.scss +34 -19
- data/{stylesheets → scss}/foundation/components/modules/_all.scss +1 -1
- data/{stylesheets → scss}/foundation/components/modules/_buttons.scss +14 -12
- data/{stylesheets → scss}/foundation/components/modules/_navbar.scss +0 -0
- data/{stylesheets → scss}/foundation/components/modules/_offcanvas.scss +0 -0
- data/{stylesheets → scss}/foundation/components/modules/_orbit.scss +0 -0
- data/{stylesheets → scss}/foundation/components/modules/_reveal.scss +1 -0
- data/{stylesheets → scss}/foundation/components/modules/_tabs.scss +6 -4
- data/{stylesheets → scss}/foundation/components/modules/_ui.scss +19 -29
- data/{stylesheets → scss}/foundation/functions/_all.scss +0 -0
- data/{stylesheets → scss}/foundation/functions/_convert-number-to-word.scss +0 -0
- data/{stylesheets → scss}/foundation/functions/_grid-calc.scss +0 -0
- data/{stylesheets → scss}/foundation/functions/_modular-scale.sass +0 -0
- data/{stylesheets → scss}/foundation/mixins/_all.scss +0 -0
- data/{stylesheets → scss}/foundation/mixins/_clearfix.scss +0 -0
- data/{stylesheets → scss}/foundation/mixins/_css-triangle.scss +0 -0
- data/{stylesheets → scss}/foundation/mixins/_font-size.scss +2 -0
- data/{stylesheets → scss}/foundation/mixins/_respond-to.scss +0 -0
- data/{stylesheets → scss}/foundation/mixins/_semantic-grid.scss +28 -8
- data/{stylesheets → scss}/foundation.scss +2 -2
- data/templates/project/index.html +12 -12
- data/templates/project/manifest.rb +27 -42
- data/templates/project/{sass → scss}/_settings.scss +17 -0
- data/templates/project/{sass → scss}/app.scss +4 -4
- data/templates/upgrade/manifest.rb +39 -0
- data/test/buttons.html +184 -0
- data/test/config.rb +11 -0
- data/test/elements.html +339 -0
- data/test/forms.html +376 -0
- data/test/grid.html +560 -0
- data/test/images/orbit-demo/demo1.jpeg +0 -0
- data/test/images/orbit-demo/demo2.jpeg +0 -0
- data/test/images/orbit-demo/demo3.jpeg +0 -0
- data/test/images/orbit-demo/slider-background.jpeg +0 -0
- data/test/index.html +84 -0
- data/test/navigation.html +239 -0
- data/test/orbit.html +106 -0
- data/test/reveal.html +78 -0
- data/test/scss/_settings.scss +75 -0
- data/test/scss/styles.scss +2 -0
- data/test/tabs.html +184 -0
- data/test/template.html +60 -0
- data/test/type.html +194 -0
- data/vendor/assets/javascripts/foundation/app.js +5 -4
- data/vendor/assets/javascripts/foundation/index.js +1 -0
- data/vendor/assets/javascripts/foundation/jquery.foundation.buttons.js +6 -2
- data/vendor/assets/javascripts/foundation/jquery.foundation.forms.js +7 -7
- data/vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js +21 -0
- data/vendor/assets/javascripts/foundation/jquery.foundation.orbit.js +2 -1
- metadata +73 -75
- data/config/assets.yml +0 -58
- data/public/assets/foundation.js +0 -11
- data/public/assets/jquery.js +0 -23
- data/test.html +0 -232
- data/test2.html +0 -320
- data/type.html +0 -134
data/test/elements.html
ADDED
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
|
|
3
|
+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
|
4
|
+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
|
5
|
+
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
|
6
|
+
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
|
7
|
+
<head>
|
|
8
|
+
<meta charset="utf-8" />
|
|
9
|
+
|
|
10
|
+
<!-- Set the viewport width to device width for mobile -->
|
|
11
|
+
<meta name="viewport" content="width=device-width" />
|
|
12
|
+
|
|
13
|
+
<title>Foundation Elements Testing</title>
|
|
14
|
+
|
|
15
|
+
<!-- Included CSS Files -->
|
|
16
|
+
<link rel="stylesheet" href="stylesheets/styles.css">
|
|
17
|
+
|
|
18
|
+
<script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
|
|
19
|
+
|
|
20
|
+
<!-- IE Fix for HTML5 Tags -->
|
|
21
|
+
<!--[if lt IE 9]>
|
|
22
|
+
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
23
|
+
<![endif]-->
|
|
24
|
+
</head>
|
|
25
|
+
<body>
|
|
26
|
+
|
|
27
|
+
<div class="row">
|
|
28
|
+
<div class="twelve columns">
|
|
29
|
+
<p><a href="index.html">« Back</a></p>
|
|
30
|
+
<h2>Foundation Elements Testing</h2>
|
|
31
|
+
<hr />
|
|
32
|
+
<dl class="sub-nav">
|
|
33
|
+
<dt>Go to:</dt>
|
|
34
|
+
<dd><a href="#visibility-classes">Visibility Classes</a></dd>
|
|
35
|
+
<dd><a href="#alerts">Alerts</a></dd>
|
|
36
|
+
<dd><a href="#labels">Labels</a></dd>
|
|
37
|
+
<dd><a href="#tooltips">Tooltips</a></dd>
|
|
38
|
+
<dd><a href="#accordion">Accordion</a></dd>
|
|
39
|
+
<dd><a href="#keystrokes">Keystrokes</a></dd>
|
|
40
|
+
<dd><a href="#panels">Panels</a></dd>
|
|
41
|
+
<dd><a href="#link-list">Link List</a></dd>
|
|
42
|
+
<dd><a href="#video">Video</a></dd>
|
|
43
|
+
|
|
44
|
+
</dl>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<!-- Test Foundation Components Here -->
|
|
49
|
+
<div class="row">
|
|
50
|
+
<div class="twelve columns">
|
|
51
|
+
<h3>Elements</h3>
|
|
52
|
+
<h4 class="subheader">Prototyping and production requires more than just navigation or tabs or typography. We've created a number of additional elements to help rapidly prototype, and like everything else they are production-ready and easy to restyle or override.</h4>
|
|
53
|
+
|
|
54
|
+
<br>
|
|
55
|
+
|
|
56
|
+
<div class="row">
|
|
57
|
+
<div class="four columns">
|
|
58
|
+
<a name="visibility-classes"></a>
|
|
59
|
+
<h4>Visibility Classes</h4>
|
|
60
|
+
<p>Foundation 3 allows you to easily turn elements on and off based on certain device criteria, like screen size, touch, or orientation.</p>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="eight columns">
|
|
63
|
+
<h5>Screen Size</h5>
|
|
64
|
+
<p>The following text should describe the device you're using:
|
|
65
|
+
<strong class="show-for-xlarge">You are on a very large screen.</strong>
|
|
66
|
+
<strong class="show-for-large">You are on a large screen.</strong>
|
|
67
|
+
<strong class="show-for-large-up">You are on a large or very large screen.</strong>
|
|
68
|
+
<strong class="show-for-medium">You are on a medium screen.</strong>
|
|
69
|
+
<strong class="show-for-medium-down">You are on a medium or small screen.</strong>
|
|
70
|
+
<strong class="show-for-small">You are on a small screen, like a smartphone.</strong>
|
|
71
|
+
</p>
|
|
72
|
+
|
|
73
|
+
<p>This example uses the opposite rules, so the following text should inversely describe the device you're using:
|
|
74
|
+
<strong class="hide-for-xlarge">You are not on a very large screen.</strong>
|
|
75
|
+
<strong class="hide-for-large">You are not on a large screen.</strong>
|
|
76
|
+
<strong class="hide-for-large-up">You are not on a large or very large screen.</strong>
|
|
77
|
+
<strong class="hide-for-medium-down">You are not on a medium or small screen.</strong>
|
|
78
|
+
<strong class="hide-for-medium">You are not on a medium screen.</strong>
|
|
79
|
+
<strong class="hide-for-small">You are not on a small screen.</strong>
|
|
80
|
+
</p>
|
|
81
|
+
|
|
82
|
+
<h5>Orientation Detection</h5>
|
|
83
|
+
<p>The following text should describe the device you're using:
|
|
84
|
+
<strong class="show-for-landscape">You are in landscape orientation.</strong>
|
|
85
|
+
<strong class="show-for-portrait">You are in portrait orientation.</strong>
|
|
86
|
+
</p>
|
|
87
|
+
|
|
88
|
+
<h5>Touch Detection</h5>
|
|
89
|
+
<p>The following text should describe the device you're using:
|
|
90
|
+
<strong class="show-for-touch">You are on a touch-enabled device.</strong>
|
|
91
|
+
<strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
|
|
92
|
+
</p>
|
|
93
|
+
|
|
94
|
+
<h5>Media Query Viewer</h5>
|
|
95
|
+
<p>Easily add the ability to show which media query you are currently viewing. To activate the viewer, make sure you have <strong>jquery.foundation.mediaQueryToggle.js</strong> linked up on your page. From there, simply add the markup to your page or press <kbd>M</kbd>. The keyboard toggle won't work on mobile devices so make sure you add the markup in those cases.</p>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<br><br>
|
|
100
|
+
|
|
101
|
+
<div class="row">
|
|
102
|
+
<div class="four columns">
|
|
103
|
+
<a name="alerts"></a>
|
|
104
|
+
<h4>Alerts</h4>
|
|
105
|
+
<p>Alerts are a handy element you can drop into a form or inline on a page to communicate success, warnings, failure or just information. The syntax is extremely simple and like everything else in Foundation, easy to customize.</p>
|
|
106
|
+
</div>
|
|
107
|
+
<br>
|
|
108
|
+
<div class="eight columns">
|
|
109
|
+
<div class="alert-box">
|
|
110
|
+
This is a standard alert (div.alert-box).
|
|
111
|
+
<a href="" class="close">×</a>
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<div class="alert-box success">
|
|
115
|
+
This is a success alert (div.alert-box.success).
|
|
116
|
+
<a href="" class="close">×</a>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<div class="alert-box alert">
|
|
120
|
+
This is an alert (div.alert-box.alert).
|
|
121
|
+
<a href="" class="close">×</a>
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<div class="alert-box secondary">
|
|
125
|
+
This is a secondary alert (div.alert-box.secondary).
|
|
126
|
+
<a href="" class="close">×</a>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
<br><br>
|
|
132
|
+
|
|
133
|
+
<div class="row">
|
|
134
|
+
<div class="four columns">
|
|
135
|
+
<a name="labels"></a>
|
|
136
|
+
<h4>Labels</h4>
|
|
137
|
+
<p>Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. Examples might be noting when something was updated or that something is new. The syntax is simple, just a <code>span</code> element with a class of .label. The border styling mirrors that of the Foundation buttons.</p>
|
|
138
|
+
</div>
|
|
139
|
+
<br>
|
|
140
|
+
<div class="eight columns">
|
|
141
|
+
<div class="row">
|
|
142
|
+
<div class="three columns phone-two">
|
|
143
|
+
<p>
|
|
144
|
+
<span class="label">Regular Label</span><br />
|
|
145
|
+
<span class="radius label">Radius Label</span><br />
|
|
146
|
+
<span class="round label">Round Label</span>
|
|
147
|
+
</p>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="three columns end phone-two">
|
|
150
|
+
<p>
|
|
151
|
+
<span class="secondary radius label">Secondary Label</span><br />
|
|
152
|
+
<span class="alert label">Alert Label</span><br />
|
|
153
|
+
<span class="success round label">Success Label</span><br />
|
|
154
|
+
</p>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
<p><span class="radius label">Example Label</span> This label could read a date for an update or it could include an author name or anything really. Inline labels are pretty handy when you need to draw attention or visually separate a short piece of content.</p>
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<br><br>
|
|
162
|
+
|
|
163
|
+
<div class="row">
|
|
164
|
+
<div class="four columns">
|
|
165
|
+
<a name="tooltips"></a>
|
|
166
|
+
<h4>Tooltips</h4>
|
|
167
|
+
<p>Tooltips are a quick way to provide extended information on a term or action on a page. They work cross browser and cross platform and are easily added to a page by including the jquery.tooltip.js plugin. You can apply the <strong>has-tip</strong> class to any element.</p>
|
|
168
|
+
|
|
169
|
+
<p>By default, the tooltip takes the width of the element that it is applied to, but you can override this behavior by applying a <strong>data-width</strong> attribute to the target element. The tooltip takes on the content of the targets <strong>title</strong> attribute.</p>
|
|
170
|
+
</div>
|
|
171
|
+
<br>
|
|
172
|
+
<div class="eight columns">
|
|
173
|
+
<p>The tooltips can be positioned on the <span class="has-tip" data-width="210" title="I'm on bottom and the default position.">"tip-bottom"</span>, which is the default position, <span class="has-tip tip-top noradius" data-width="210" title="I'm on the top and I'm not rounded!">"tip-top" (hehe)</span>, <span class="has-tip tip-left" data-width="90" title="I'm on the left!">"tip-left"</span>, or <span class="has-tip tip-right" data-width="120" title="I'm on the right!">"tip-right"</span> of the target element. On a small device, the tooltips are full width and bottom aligned.</p>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
|
|
177
|
+
<br><br>
|
|
178
|
+
|
|
179
|
+
<div class="row">
|
|
180
|
+
<div class="four columns">
|
|
181
|
+
<a name="accordion"></a>
|
|
182
|
+
<h4>Accordion</h4>
|
|
183
|
+
<p>Accordions are similar to tabs as a way to selectively show a single panel of content at a time.</p>
|
|
184
|
+
</div>
|
|
185
|
+
<br>
|
|
186
|
+
<div class="eight columns">
|
|
187
|
+
<ul class="accordion">
|
|
188
|
+
<li class="active">
|
|
189
|
+
<div class="title">
|
|
190
|
+
<h5>Accordion Panel 1</h5>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="content">
|
|
193
|
+
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
194
|
+
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
195
|
+
</div>
|
|
196
|
+
</li>
|
|
197
|
+
<li>
|
|
198
|
+
<div class="title">
|
|
199
|
+
<h5>Accordion Panel 2</h5>
|
|
200
|
+
</div>
|
|
201
|
+
<div class="content">
|
|
202
|
+
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
203
|
+
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
204
|
+
</div>
|
|
205
|
+
</li>
|
|
206
|
+
<li>
|
|
207
|
+
<div class="title">
|
|
208
|
+
<h5>Accordion Panel 3</h5>
|
|
209
|
+
</div>
|
|
210
|
+
<div class="content">
|
|
211
|
+
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
212
|
+
<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
213
|
+
</div>
|
|
214
|
+
</li>
|
|
215
|
+
</ul>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
|
|
219
|
+
<br><br>
|
|
220
|
+
|
|
221
|
+
<div class="row">
|
|
222
|
+
<div class="four columns">
|
|
223
|
+
<a name="keystrokes"></a>
|
|
224
|
+
<h4>Keystrokes</h4>
|
|
225
|
+
<p>If you have keyboard affordances you might need to explain them, and to that end there's a simple keystroke character affordance in Foundation.</p>
|
|
226
|
+
</div>
|
|
227
|
+
<br>
|
|
228
|
+
<div class="eight columns">
|
|
229
|
+
<p>For example, to close your browser hit <kbd>Cmd</kbd> + <kbd>Q</kbd>. Don't actually do it. There's more docs to read.</p>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
|
|
233
|
+
<br><br>
|
|
234
|
+
|
|
235
|
+
<div class="row">
|
|
236
|
+
<div class="four columns">
|
|
237
|
+
<a name="panels"></a>
|
|
238
|
+
<h4>Panels</h4>
|
|
239
|
+
<p>A panel is a simple, helpful css class that enables you to outline sections of your page easily. This allows you to view your page sections as you add content to them, or add emphasis to a section. There are two styles built in, and they support a class of <code>.radius</code> to round them off.</p>
|
|
240
|
+
</div>
|
|
241
|
+
<br><br>
|
|
242
|
+
<div class="eight columns">
|
|
243
|
+
<div class="row">
|
|
244
|
+
<div class="six columns">
|
|
245
|
+
<div class="panel">
|
|
246
|
+
<h5>This is a regular panel.</h5>
|
|
247
|
+
<p>It has an easy to override visual style, and is appropriately subdued.</p>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
<div class="six columns">
|
|
251
|
+
<div class="panel callout radius">
|
|
252
|
+
<h5>This is a callout panel.</h5>
|
|
253
|
+
<p>It's a little ostentatious, but useful for important content.</p>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
259
|
+
|
|
260
|
+
<br><br>
|
|
261
|
+
|
|
262
|
+
<div class="row">
|
|
263
|
+
<div class="four columns">
|
|
264
|
+
<a name="link-list"></a>
|
|
265
|
+
<h4>Link List</h4>
|
|
266
|
+
<p>When you just need a horizontal list of links, like in a footer, and you want more control than just spaces between them you can use this simple construct.</p>
|
|
267
|
+
</div>
|
|
268
|
+
<br>
|
|
269
|
+
<div class="eight columns">
|
|
270
|
+
<ul class="link-list">
|
|
271
|
+
<li><a href="#">Link 1</a></li>
|
|
272
|
+
<li><a href="#">Link 2</a></li>
|
|
273
|
+
<li><a href="#">Link 3</a></li>
|
|
274
|
+
<li><a href="#">Link 4</a></li>
|
|
275
|
+
<li><a href="#">Link 5</a></li>
|
|
276
|
+
</ul>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
|
|
280
|
+
<br><br>
|
|
281
|
+
|
|
282
|
+
<div class="row">
|
|
283
|
+
<div class="four columns">
|
|
284
|
+
<a name="video"></a>
|
|
285
|
+
<h4>Video</h4>
|
|
286
|
+
<p>If you're embedding video from YouTube, Vimeo, or another site that uses iframe, embed or object elements you can wrap your video in <code>div.flex-video</code> to create an intrinsic ratio that will properly scale your video on any device.</p>
|
|
287
|
+
</div>
|
|
288
|
+
<br>
|
|
289
|
+
<div class="eight columns">
|
|
290
|
+
<dl class="tabs contained">
|
|
291
|
+
<dd class="active"><a href="#video1">4:3</a></dd>
|
|
292
|
+
<dd><a href="#video2">Widescreen</a></dd>
|
|
293
|
+
<dd><a href="#video3">Vimeo</a></dd>
|
|
294
|
+
</dl>
|
|
295
|
+
<ul class="tabs-content contained">
|
|
296
|
+
<li class="active" id="video1Tab">
|
|
297
|
+
<div class="flex-video">
|
|
298
|
+
<iframe width="420" height="315" src="http://www.youtube.com/embed/9otNWTHOJi8" frameborder="0" allowfullscreen></iframe>
|
|
299
|
+
</div>
|
|
300
|
+
4:3 is the default size for the .flex-video element, and the assumption for .flex-video for chrome (controls) height is based on YouTube.
|
|
301
|
+
</li>
|
|
302
|
+
<li id="video2Tab">
|
|
303
|
+
<div class="flex-video widescreen">
|
|
304
|
+
<iframe width="560" height="315" src="http://www.youtube.com/embed/N966cATFWjI" frameborder="0" allowfullscreen></iframe>
|
|
305
|
+
</div>
|
|
306
|
+
By adding a class of .widescreen we change the ratio to 16:9, ideal for more recent video and most popular YouTube or Vimeo embeds.
|
|
307
|
+
</li>
|
|
308
|
+
<li id="video3Tab">
|
|
309
|
+
<div class="flex-video widescreen vimeo">
|
|
310
|
+
<iframe src="http://player.vimeo.com/video/21762736?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
|
|
311
|
+
</div>
|
|
312
|
+
Because Vimeo places their chrome on the player itself, adding a class of .vimeo creates a container that is sized for the video only - no extra padding for the controls.
|
|
313
|
+
</li>
|
|
314
|
+
</ul>
|
|
315
|
+
</div>
|
|
316
|
+
</div>
|
|
317
|
+
|
|
318
|
+
</div>
|
|
319
|
+
</div>
|
|
320
|
+
|
|
321
|
+
<!-- Included JS Files -->
|
|
322
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
|
|
323
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
|
|
324
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
|
|
325
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
|
|
326
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
|
|
327
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
|
|
328
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
|
|
329
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
|
|
330
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
|
|
331
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
|
|
332
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
|
|
333
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
|
|
334
|
+
<script src="../vendor/assets/javascripts/foundation/app.js"></script>
|
|
335
|
+
<script type="text/javascript">
|
|
336
|
+
// Page-Specific JavaScript Goes Here
|
|
337
|
+
</script>
|
|
338
|
+
</body>
|
|
339
|
+
</html>
|