moovui 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (116) hide show
  1. checksums.yaml +15 -0
  2. data/.gitignore +2 -0
  3. data/Gemfile +4 -0
  4. data/Gemfile.lock +17 -0
  5. data/LICENSE.txt +22 -0
  6. data/README.md +1 -0
  7. data/Rakefile +1 -0
  8. data/bourbon/_bourbon-deprecated-upcoming.scss +13 -0
  9. data/bourbon/_bourbon.scss +59 -0
  10. data/bourbon/addons/_button.scss +273 -0
  11. data/bourbon/addons/_clearfix.scss +29 -0
  12. data/bourbon/addons/_font-family.scss +5 -0
  13. data/bourbon/addons/_hide-text.scss +5 -0
  14. data/bourbon/addons/_html5-input-types.scss +56 -0
  15. data/bourbon/addons/_position.scss +42 -0
  16. data/bourbon/addons/_prefixer.scss +49 -0
  17. data/bourbon/addons/_retina-image.scss +32 -0
  18. data/bourbon/addons/_size.scss +44 -0
  19. data/bourbon/addons/_timing-functions.scss +32 -0
  20. data/bourbon/addons/_triangle.scss +45 -0
  21. data/bourbon/css3/_animation.scss +52 -0
  22. data/bourbon/css3/_appearance.scss +3 -0
  23. data/bourbon/css3/_backface-visibility.scss +6 -0
  24. data/bourbon/css3/_background-image.scss +48 -0
  25. data/bourbon/css3/_background.scss +103 -0
  26. data/bourbon/css3/_border-image.scss +55 -0
  27. data/bourbon/css3/_border-radius.scss +22 -0
  28. data/bourbon/css3/_box-sizing.scss +4 -0
  29. data/bourbon/css3/_columns.scss +47 -0
  30. data/bourbon/css3/_flex-box.scss +52 -0
  31. data/bourbon/css3/_font-face.scss +23 -0
  32. data/bourbon/css3/_hidpi-media-query.scss +10 -0
  33. data/bourbon/css3/_image-rendering.scss +13 -0
  34. data/bourbon/css3/_inline-block.scss +8 -0
  35. data/bourbon/css3/_keyframes.scss +43 -0
  36. data/bourbon/css3/_linear-gradient.scss +41 -0
  37. data/bourbon/css3/_perspective.scss +8 -0
  38. data/bourbon/css3/_placeholder.scss +29 -0
  39. data/bourbon/css3/_radial-gradient.scss +44 -0
  40. data/bourbon/css3/_transform.scss +15 -0
  41. data/bourbon/css3/_transition.scss +34 -0
  42. data/bourbon/css3/_user-select.scss +3 -0
  43. data/bourbon/functions/_compact.scss +11 -0
  44. data/bourbon/functions/_flex-grid.scss +39 -0
  45. data/bourbon/functions/_grid-width.scss +13 -0
  46. data/bourbon/functions/_linear-gradient.scss +13 -0
  47. data/bourbon/functions/_modular-scale.scss +40 -0
  48. data/bourbon/functions/_px-to-em.scss +8 -0
  49. data/bourbon/functions/_radial-gradient.scss +23 -0
  50. data/bourbon/functions/_tint-shade.scss +9 -0
  51. data/bourbon/functions/_transition-property-name.scss +22 -0
  52. data/bourbon/helpers/_deprecated-webkit-gradient.scss +39 -0
  53. data/bourbon/helpers/_gradient-positions-parser.scss +13 -0
  54. data/bourbon/helpers/_linear-positions-parser.scss +61 -0
  55. data/bourbon/helpers/_radial-arg-parser.scss +69 -0
  56. data/bourbon/helpers/_radial-positions-parser.scss +18 -0
  57. data/bourbon/helpers/_render-gradients.scss +26 -0
  58. data/bourbon/helpers/_shape-size-stripper.scss +10 -0
  59. data/chosen.jquery.js +1166 -0
  60. data/custom.modernizr.js +4 -0
  61. data/fonts/TSTARPRO-BoldWeb.eot +0 -0
  62. data/fonts/TSTARPRO-BoldWeb.woff +0 -0
  63. data/fonts/entypo.eot +0 -0
  64. data/fonts/entypo.svg +235 -0
  65. data/fonts/entypo.ttf +0 -0
  66. data/fonts/entypo.woff +0 -0
  67. data/foundation.alerts.js +52 -0
  68. data/foundation.dropdown.js +177 -0
  69. data/foundation.js +440 -0
  70. data/foundation.reveal.js +330 -0
  71. data/foundation.section.js +400 -0
  72. data/foundation.tooltips.custom.js +222 -0
  73. data/globals/_base.scss +41 -0
  74. data/globals/_entypo.scss +711 -0
  75. data/globals/_footer.scss +29 -0
  76. data/globals/_header.scss +64 -0
  77. data/globals/_mixins.scss +69 -0
  78. data/globals/_normalize.scss +405 -0
  79. data/globals/_vars.scss +67 -0
  80. data/index.html +1254 -0
  81. data/lib/moovui/version.rb +3 -0
  82. data/lib/moovui.rb +4 -0
  83. data/modules/_accordion.scss +51 -0
  84. data/modules/_btn.scss +130 -0
  85. data/modules/_btnbar.scss +56 -0
  86. data/modules/_code.scss +55 -0
  87. data/modules/_copy.scss +99 -0
  88. data/modules/_definition.scss +34 -0
  89. data/modules/_docs.scss +127 -0
  90. data/modules/_dropdown.scss +32 -0
  91. data/modules/_flex.scss +300 -0
  92. data/modules/_grid.scss +72 -0
  93. data/modules/_input.scss +59 -0
  94. data/modules/_label.scss +6 -0
  95. data/modules/_list.scss +57 -0
  96. data/modules/_media.scss +17 -0
  97. data/modules/_modal.scss +71 -0
  98. data/modules/_notice.scss +111 -0
  99. data/modules/_pane.scss +25 -0
  100. data/modules/_resp.scss +71 -0
  101. data/modules/_select.scss +94 -0
  102. data/modules/_sidebar.scss +117 -0
  103. data/modules/_syntax-highlighter.scss +100 -0
  104. data/modules/_table.scss +63 -0
  105. data/modules/_tooltip.scss +59 -0
  106. data/moovui.gemspec +21 -0
  107. data/moovui.scss +43 -0
  108. data/shBrushBash.js +59 -0
  109. data/shBrushJScript.js +52 -0
  110. data/shBrushNull.js +35 -0
  111. data/shBrushSass.js +90 -0
  112. data/shBrushTritium.js +46 -0
  113. data/shBrushXml.js +69 -0
  114. data/shCore.custom.js +2399 -0
  115. data/shInit.js +14 -0
  116. metadata +187 -0
data/index.html ADDED
@@ -0,0 +1,1254 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>The Works</title>
6
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700%7CSource+Code+Pro">
7
+ <link rel="stylesheet" href="moovui.css">
8
+ <style>
9
+ .example {
10
+ box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px;
11
+ border-radius: 4px;
12
+ background: #fff;
13
+ margin: 0 0 30px;
14
+ padding: 10px;
15
+ }
16
+ .example-head {
17
+ border-radius: 4px 4px 0 0;
18
+ background: #f5f5f5;
19
+ border-bottom: 1px solid #e0e0e0;
20
+ margin: -10px -10px 20px;
21
+ padding: 10px;
22
+ }
23
+ .example-head * {
24
+ margin: 0;
25
+ }
26
+ .example-head h1 {
27
+ font-size: 14px;
28
+ letter-spacing: 1px;
29
+ text-transform: uppercase;
30
+ }
31
+ .example > div:last-child {
32
+ margin: 20px -10px -30px;
33
+ }
34
+ .example > pre:last-child {
35
+ display: none;
36
+ }
37
+ .example > div:last-child .syntaxhighlighter-wrapper {
38
+ border-radius: 0 0 4px 4px;
39
+ }
40
+ </style>
41
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
42
+ <script src="chosen.jquery.js"></script>
43
+ <script src="shCore.custom.js"></script>
44
+ <script src="shBrushJScript.js"></script>
45
+ <script src="shBrushSass.js"></script>
46
+ <script src="shBrushTritium.js"></script>
47
+ <script src="shBrushXml.js"></script>
48
+ <script src="shInit.js"></script>
49
+ <script>
50
+ $(function() {
51
+ $("select:not(.autocomplete)").chosen({disable_search_threshold: Infinity});
52
+ $("select.autocomplete").chosen();
53
+ });
54
+ $(document).on("click", "[data-section='accordion'] [data-section-title]", function() {
55
+ $(this).parent().siblings().children("[data-section-content]").slideUp(250);
56
+ $(this).next().slideToggle(250);
57
+ });
58
+
59
+ if (/Win/.test(navigator.userAgent))
60
+ $("html").addClass("win");
61
+ </script>
62
+ </head>
63
+ <body>
64
+ <header id="header" class="affix">
65
+ <div class="content">
66
+ <a href="#" class="pull-right" data-dropdown="menu">
67
+ <div style="background: #eee; border-radius: 4px; width: 30px; height: 30px; margin: 9px 0; pointer-events: none"></div>
68
+ </a>
69
+ <ul id="menu" data-dropdown-content>
70
+ <li><a>Link 1</a></li>
71
+ <li><a>Link 2</a></li>
72
+ <li><a>Link 3</a></li>
73
+ <li><a>Link 4</a></li>
74
+ <li><a>Link 5</a></li>
75
+ </ul>
76
+ <ul class="header-links">
77
+ <li><a>Link 1</a></li>
78
+ <li><a>Link 2</a></li>
79
+ <li><a>Link 3</a></li>
80
+ <li><a>Link 4</a></li>
81
+ </ul>
82
+ <input type="text" class="pull-left">
83
+ </div>
84
+ </header>
85
+
86
+ <div id="page">
87
+ <div class="example">
88
+ <div class="example-head">
89
+ <h1>Foundation</h1>
90
+ </div>
91
+ <p>MoovUI uses <a href="http://foundation.zurb.com/" target="_blank">Foundation</a>.</p>
92
+ <p>Remember to initialize Foundation at the bottom of <code>&lt;body&gt;</code> or when the page has loaded.</p>
93
+ <pre data-lang="js">
94
+ $(document).foundation("alerts dropdown reveal tooltips").foundation("section", {one_up: false});
95
+ </pre>
96
+ </div>
97
+ <div class="example">
98
+ <div class="example-head">
99
+ <h1>Responsive Use</h1>
100
+ </div>
101
+ <div class="mobile-omit">Mobile: false</div>
102
+ <div class="mobile-only">Mobile: true</div>
103
+ <div class="tablet-omit">Tablet: false</div>
104
+ <div class="tablet-only">Tablet: true</div>
105
+ <div class="desktop-omit">Desktop: false</div>
106
+ <div class="desktop-only">Desktop: true</div>
107
+ <br>
108
+ <p>There are also Sass helper mixins available e.g. <code>@include mobile { &hellip; }</code> or <code>@include not-mobile { &hellip; }</code></p>
109
+ <p>There are also different ways to import MoovUI:</p>
110
+ <ul style="list-style: disc; margin: 0 0 0 2em">
111
+ <li>
112
+ If using little or no pure responsive design:
113
+ <pre data-lang="scss" class="hide">
114
+ @import "moovui/moovui"; // outputs .btn { ... }
115
+ </pre>
116
+ </li>
117
+ <li>
118
+ If radically altering another site using MoovUI, original classes can be ignored:
119
+ <pre data-lang="scss" class="hide">
120
+ $moovui-prefix: "_";
121
+ @import "moovui/moovui"; // outputs ._btn { ... } so existing .btn elements aren't styled
122
+ </pre>
123
+ </li>
124
+ <li>
125
+ If using discrete classes similar to Foundation: (Note that base styles are only generated the first time your import MoovUI.)
126
+ <pre data-lang="scss" class="hide">
127
+ @import "moovui/moovui"; // outputs .btn { ... } meant for all screen sizes
128
+ @media #{$mobile-query} {
129
+ $moovui-prefix: "m-";
130
+ @import "moovui/moovui"; // outputs @media &hellip; { .m-btn { ... } } meant for small screens
131
+ }
132
+ @media #{$desktop-query} {
133
+ $moovui-prefix: "d-";
134
+ @import "moovui/moovui"; // outputs @media &hellip; { .d-btn { ... } } meant for large screens
135
+ }
136
+ </pre>
137
+ </li>
138
+ </ul>
139
+ <pre data-lang="html">
140
+ <div class="mobile-omit">Mobile: false</div>
141
+ <div class="mobile-only">Mobile: true</div>
142
+ <div class="tablet-omit">Tablet: false</div>
143
+ <div class="tablet-only">Tablet: true</div>
144
+ <div class="desktop-omit">Desktop: false</div>
145
+ <div class="desktop-only">Desktop: true</div>
146
+ </pre>
147
+ </div>
148
+ <div class="example">
149
+ <div class="example-head">
150
+ <h1>Entypo icon font</h1>
151
+ <p>Find icon names by mousing over icons in the <a href="http://www.entypo.com/characters/" target="_blank">character map</a>.</p>
152
+ </div>
153
+ <span class="icon-phone"></span>
154
+ <span class="icon-mobile"></span>
155
+ <span class="icon-mouse"></span>
156
+ <span class="icon-address"></span>
157
+ <span class="icon-mail"></span>
158
+ <span class="icon-paper-plane"></span>
159
+ <pre data-lang="html">
160
+ <span class="icon-phone"></span>
161
+ <span class="icon-mobile"></span>
162
+ <span class="icon-mouse"></span>
163
+ <span class="icon-address"></span>
164
+ <span class="icon-mail"></span>
165
+ <span class="icon-paper-plane"></span>
166
+ </pre>
167
+ </div>
168
+ <div class="example">
169
+ <div class="example-head">
170
+ <h1>Container</h1>
171
+ <p>An element with id <code>page</code> behaves the same and can be a general wrapper for content between the header and footer.</p>
172
+ </div>
173
+ <div class="content">This content will have automatic margins to fit in the default 960px.</div>
174
+ <pre data-lang="html">
175
+ <div class="content">This content will have automatic margins to fit in the default 960px.</div>
176
+ </pre>
177
+ </div>
178
+ <div class="example">
179
+ <div class="example-head">
180
+ <h1>Section</h1>
181
+ </div>
182
+ <div class="section">Content</div>
183
+ <div class="section">Content with margin</div>
184
+ <pre data-lang="html">
185
+ <div class="section">Content</div>
186
+ <div class="section">Content with margin</div>
187
+ </pre>
188
+ </div>
189
+ <div class="example">
190
+ <div class="example-head">
191
+ <h1>Header</h1>
192
+ <p>Add the class <code>affix</code> to fix it to the top of the page.</p>
193
+ </div>
194
+ You can find an example fixed to the top of this page.
195
+ <pre data-lang="html">
196
+ <header id="header" class="affix">
197
+ <div class="content">
198
+ ...
199
+ <ul class="header-links">
200
+ ...
201
+ </ul>
202
+ <input type="text" class="pull-left">
203
+ </div>
204
+ </header>
205
+ </pre>
206
+ </div>
207
+ <div class="example">
208
+ <div class="example-head">
209
+ <h1>Footer</h1>
210
+ </div>
211
+ You can find an example at the bottom of this page.
212
+ <pre data-lang="html">
213
+ <footer id="footer">
214
+ <div class="content">
215
+ ...
216
+ </div>
217
+ </footer>
218
+ </pre>
219
+ </div>
220
+ <div class="example">
221
+ <div class="example-head">
222
+ <h1>Dropdown menu</h1>
223
+ </div>
224
+ You can find the example in the header.
225
+ <pre data-lang="html">
226
+ <a href="#" class="pull-right" data-dropdown="menu"></a>
227
+ <ul id="menu" data-dropdown-content>
228
+ <li><a>Link 1</a></li>
229
+ <li><a>Link 2</a></li>
230
+ <li><a>Link 3</a></li>
231
+ <li><a>Link 4</a></li>
232
+ <li><a>Link 5</a></li>
233
+ </ul>
234
+ </pre>
235
+ </div>
236
+ <div class="example">
237
+ <div class="example-head">
238
+ <h1>Notices</h1>
239
+ </div>
240
+ <div class="info" data-alert>
241
+ <a class="close" href="#"></a>
242
+ Info (default)
243
+ </div>
244
+ <div class="success" data-alert>
245
+ <a class="close" href="#"></a>
246
+ Success
247
+ </div>
248
+ <div class="warning" data-alert>
249
+ <a class="close" href="#"></a>
250
+ Warning/Caution
251
+ </div>
252
+ <div class="error" data-alert>
253
+ <a class="close" href="#"></a>
254
+ Error
255
+ </div>
256
+ <pre data-lang="html">
257
+ <div class="info" data-alert>
258
+ <a class="close" href="#"></a>
259
+ Info (default)
260
+ </div>
261
+ <div class="success" data-alert>
262
+ <a class="close" href="#"></a>
263
+ Success
264
+ </div>
265
+ <div class="warning" data-alert>
266
+ <a class="close" href="#"></a>
267
+ Warning/Caution
268
+ </div>
269
+ <div class="error" data-alert>
270
+ <a class="close" href="#"></a>
271
+ Error
272
+ </div>
273
+ </pre>
274
+ </div>
275
+ <div class="example">
276
+ <div class="example-head">
277
+ <h1>Statuses</h1>
278
+ </div>
279
+ <div class="text-success">Success: message</div>
280
+ <div class="text-warning">Warning: message</div>
281
+ <div class="text-error">Error: message</div>
282
+ <pre data-lang="html">
283
+ <div class="text-success">Success: ...</div>
284
+ <div class="text-warning">Warning: message</div>
285
+ <div class="text-error">Error: ...</div>
286
+ </pre>
287
+ </div>
288
+ <div class="example">
289
+ <div class="example-head">
290
+ <h1>Headers</h1>
291
+ </div>
292
+ <h1>Header 1</h1>
293
+ <h2>Header 2</h2>
294
+ <h3>Header 3</h3>
295
+ <h4>Header 4</h4>
296
+ <h5>Header 5</h5>
297
+ <pre data-lang="html">
298
+ <h1>Header 1</h1>
299
+ <h2>Header 2</h2>
300
+ <h3>Header 3</h3>
301
+ <h4>Header 4</h4>
302
+ <h5>Header 5</h5>
303
+ </pre>
304
+ </div>
305
+ <div class="example">
306
+ <div class="example-head">
307
+ <h1>Headers (copy)</h1>
308
+ <p>You can add a <code>copy</code> class to an ancestor or the element itself</p>
309
+ </div>
310
+ <h1 class="copy">Header 1</h1>
311
+ <div class="copy">
312
+ <h2>Header 2</h2>
313
+ <h3>Header 3</h3>
314
+ <h4>Header 4</h4>
315
+ <h5>Header 5</h5>
316
+ </div>
317
+ <pre data-lang="html">
318
+ <h1 class="copy">Header 1</h1>
319
+ <div class="copy">
320
+ <h2>Header 2</h2>
321
+ <h3>Header 3</h3>
322
+ <h4>Header 4</h4>
323
+ <h5>Header 5</h5>
324
+ </div>
325
+ </pre>
326
+ </div>
327
+ <div class="example">
328
+ <div class="example-head">
329
+ <h1>Lists</h1>
330
+ <p>You can add a <code>copy</code> class to an ancestor or the element itself. You can add a <code>link-list</code> class for the example style.</p>
331
+ <p>You can add a <code>section-list</code> to add spacing in a list of sections.</p>
332
+ </div>
333
+ <div class="copy">
334
+ <ul>
335
+ <li>Item 1</li>
336
+ <li>Item 2</li>
337
+ <li>Item 3</li>
338
+ </ul>
339
+ </div>
340
+ <ol class="copy">
341
+ <li>Item 1</li>
342
+ <li>Item 2</li>
343
+ <li>Item 3</li>
344
+ </ol>
345
+ <ul class="link-list">
346
+ <li>Item 1</li>
347
+ <li>Item 2</li>
348
+ <li>Item 3</li>
349
+ </ul>
350
+ <ul class="section-list">
351
+ <li>Item 1</li>
352
+ <li>Item 2</li>
353
+ <li>Item 3</li>
354
+ </ul>
355
+ <pre data-lang="html">
356
+ <div class="copy">
357
+ <ul>
358
+ <li>Item 1</li>
359
+ <li>Item 2</li>
360
+ <li>Item 3</li>
361
+ </ul>
362
+ </div>
363
+ <ol class="copy">
364
+ <li>Item 1</li>
365
+ <li>Item 2</li>
366
+ <li>Item 3</li>
367
+ </ol>
368
+ <ul class="link-list">
369
+ <li>Item 1</li>
370
+ <li>Item 2</li>
371
+ <li>Item 3</li>
372
+ </ul>
373
+ <ul class="section-list">
374
+ <li>Item 1</li>
375
+ <li>Item 2</li>
376
+ <li>Item 3</li>
377
+ </ul>
378
+ </pre>
379
+ </div>
380
+ <div class="example">
381
+ <div class="example-head">
382
+ <h1>Definition Lists</h1>
383
+ </div>
384
+ <dl>
385
+ <dt>Term 1</dt>
386
+ <dd>Definition 1</dd>
387
+ <dt>Term 2</dt>
388
+ <dd>Definition 2</dd>
389
+ <dt>Term 3</dt>
390
+ <dd>Definition 3</dd>
391
+ </dl>
392
+ <pre data-lang="html">
393
+ <dl>
394
+ <dt>Term 1</dt>
395
+ <dd>Definition 1</dd>
396
+ <dt>Term 2</dt>
397
+ <dd>Definition 2</dd>
398
+ <dt>Term 3</dt>
399
+ <dd>Definition 3</dd>
400
+ </dl>
401
+ </pre>
402
+ </div>
403
+ <div class="example">
404
+ <div class="example-head">
405
+ <h1>Text (copy)</h1>
406
+ <p>You can add a <code>copy</code> class to an ancestor or the element itself</p>
407
+ </div>
408
+ <p class="copy">
409
+ Lorem ipsum <a>dolor sit</a> amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
410
+ </p>
411
+ <pre data-lang="html">
412
+ <p class="copy">
413
+ Lorem ipsum <a>dolor sit</a> amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
414
+ </p>
415
+ </pre>
416
+ </div>
417
+ <div class="example">
418
+ <div class="example-head">
419
+ <h1>Code</h1>
420
+ </div>
421
+ <p>Inline <code>code</code>.</p>
422
+ <code class="cmd">Shell line 1</code>
423
+ <code class="cmd">Shell line 2</code>
424
+ <pre data-lang="scss">@include mixin($var);</pre>
425
+ <pre data-lang="html" data-no-gutter>Highlighted <span>syntax</span> with no line numbers</pre>
426
+ <pre>Non-highlighted miscellaneous</pre>
427
+ <pre data-lang="html">
428
+ <p>Inline <code>code</code>.</p>
429
+ <code class="cmd">Shell line 1</code>
430
+ <code class="cmd">Shell line 2</code>
431
+ <pre data-lang="scss">@include mixin($var);</pre>
432
+ <pre data-lang="html" data-no-gutter>Highlighted &amp;lt;span&amp;gt;syntax&amp;lt;/span&amp;gt;</pre>
433
+ <pre>Non-highlighted miscellaneous</pre>
434
+ </pre>
435
+ </div>
436
+ <div class="example">
437
+ <div class="example-head">
438
+ <h1>Table</h1>
439
+ <p>You can add a <code>no-borders</code> class to remove the styling</p>
440
+ </div>
441
+ <table>
442
+ <thead>
443
+ <tr>
444
+ <th>Col 1</th>
445
+ <th>Col 2</th>
446
+ <th>Col 3</th>
447
+ <th>Col 4</th>
448
+ </tr>
449
+ </thead>
450
+ <tbody>
451
+ <tr>
452
+ <td>Column 1</td>
453
+ <td>Column 2</td>
454
+ <td>Column 3</td>
455
+ <td>Column 4</td>
456
+ </tr>
457
+ </tbody>
458
+ </table>
459
+ <table class="no-borders">
460
+ <thead>
461
+ <tr>
462
+ <th>Col 1</th>
463
+ <th>Col 2</th>
464
+ <th>Col 3</th>
465
+ <th>Col 4</th>
466
+ </tr>
467
+ </thead>
468
+ <tbody>
469
+ <tr>
470
+ <td>Column 1</td>
471
+ <td>Column 2</td>
472
+ <td>Column 3</td>
473
+ <td>Column 4</td>
474
+ </tr>
475
+ </tbody>
476
+ </table>
477
+ <pre data-lang="html">
478
+ <table>
479
+ <thead>
480
+ <tr>
481
+ <th>Col 1</th>
482
+ <th>Col 2</th>
483
+ <th>Col 3</th>
484
+ <th>Col 4</th>
485
+ </tr>
486
+ </thead>
487
+ <tbody>
488
+ <tr>
489
+ <td>Column 1</td>
490
+ <td>Column 2</td>
491
+ <td>Column 3</td>
492
+ <td>Column 4</td>
493
+ </tr>
494
+ </tbody>
495
+ </table>
496
+ <table class="no-borders">
497
+ <thead>
498
+ <tr>
499
+ <th>Col 1</th>
500
+ <th>Col 2</th>
501
+ <th>Col 3</th>
502
+ <th>Col 4</th>
503
+ </tr>
504
+ </thead>
505
+ <tbody>
506
+ <tr>
507
+ <td>Column 1</td>
508
+ <td>Column 2</td>
509
+ <td>Column 3</td>
510
+ <td>Column 4</td>
511
+ </tr>
512
+ </tbody>
513
+ </table>
514
+ </pre>
515
+ </div>
516
+ <div class="example">
517
+ <div class="example-head">
518
+ <h1>Media block</h1>
519
+ </div>
520
+ <style>
521
+ img {
522
+ width: 50%;
523
+ height: 200px;
524
+ }
525
+ </style>
526
+ <div>
527
+ <img alt="&lt;img&gt; tag" class="media-block">
528
+ </div>
529
+ <pre data-lang="html">
530
+ <img alt="&amp;lt;img&amp;gt; tag" class="media-block">
531
+ </pre>
532
+ </div>
533
+ <div class="example">
534
+ <div class="example-head">
535
+ <h1>Accordion</h1>
536
+ <p>You can add a <code>qna</code> class to the wrapper for the example style.
537
+ </div>
538
+ <div class="qna" data-section="accordion">
539
+ <section>
540
+ <div data-section-title>Question</div>
541
+ <div data-section-content>Answer content</div>
542
+ </section>
543
+ </div>
544
+ <pre data-lang="html">
545
+ <div class="qna" data-section="accordion">
546
+ <section>
547
+ <div data-section-title>Question</div>
548
+ <div data-section-content>Answer content</div>
549
+ </section>
550
+ </div>
551
+ </pre>
552
+ </div>
553
+ <div class="example">
554
+ <div class="example-head">
555
+ <h1>Nested Accordion</h1>
556
+ <p>You can add a <code>doc-sidebar</code> class to the wrapper for the example style.
557
+ </div>
558
+ <ul class="doc-sidebar">
559
+ <li data-section="accordion">
560
+ <section>
561
+ <div data-section-title>Head 1</div>
562
+ <ul data-section-content>
563
+ <li data-section="accordion">
564
+ <section>
565
+ <div data-section-title>Subhead 1</div>
566
+ <ul data-section-content>
567
+ <li><a>Item 1</a></li>
568
+ <li><a target="_blank">Item 2</a></li>
569
+ <li><a>Item 3</a></li>
570
+ </ul>
571
+ </section>
572
+ </li>
573
+ <li data-section="accordion">
574
+ <section>
575
+ <div data-section-title>Subhead 2</div>
576
+ <ul data-section-content>
577
+ <li><a>Item 4</a></li>
578
+ <li><a>Item 5</a></li>
579
+ <li><a>Item 6</a></li>
580
+ </ul>
581
+ </section>
582
+ </li>
583
+ <li><a>Top Link</a></li>
584
+ </ul>
585
+ </section>
586
+ <section>
587
+ <div data-section-title>Head 2</div>
588
+ <ul data-section-content>
589
+ <li data-section="accordion">
590
+ <section>
591
+ <div data-section-title>Subhead 3</div>
592
+ <ul data-section-content>
593
+ <li><a>Item 7</a></li>
594
+ <li><a>Item 8</a></li>
595
+ <li><a>Item 9</a></li>
596
+ <li><a>Item 10</a></li>
597
+ </ul>
598
+ </section>
599
+ </li>
600
+ <li data-section="accordion">
601
+ <section>
602
+ <div data-section-title>Subhead 4</div>
603
+ <ul data-section-content>
604
+ <li><a>Item 11</a></li>
605
+ <li><a>Item 12</a></li>
606
+ <li><a>Item 13</a></li>
607
+ </ul>
608
+ </section>
609
+ </li>
610
+ </ul>
611
+ </section>
612
+ </li>
613
+ </ul>
614
+ <pre data-lang="html">
615
+ <ul class="doc-sidebar">
616
+ <li data-section="accordion">
617
+ <section>
618
+ <div data-section-title>Head 1</div>
619
+ <ul data-section-content>
620
+ <li data-section="accordion">
621
+ <section>
622
+ <div data-section-title>Subhead 1</div>
623
+ <ul data-section-content>
624
+ <li><a>Item 1</a></li>
625
+ <li><a target="_blank">Item 2</a></li>
626
+ <li><a>Item 3</a></li>
627
+ </ul>
628
+ </section>
629
+ </li>
630
+ <li data-section="accordion">
631
+ <section>
632
+ <div data-section-title>Subhead 2</div>
633
+ <ul data-section-content>
634
+ <li><a>Item 4</a></li>
635
+ <li><a>Item 5</a></li>
636
+ <li><a>Item 6</a></li>
637
+ </ul>
638
+ </section>
639
+ </li>
640
+ <li><a>Top Link</a></li>
641
+ </ul>
642
+ </section>
643
+ <section>
644
+ <div data-section-title>Head 2</div>
645
+ <ul data-section-content>
646
+ <li data-section="accordion">
647
+ <section>
648
+ <div data-section-title>Subhead 3</div>
649
+ <ul data-section-content>
650
+ <li><a>Item 7</a></li>
651
+ <li><a>Item 8</a></li>
652
+ <li><a>Item 9</a></li>
653
+ <li><a>Item 10</a></li>
654
+ </ul>
655
+ </section>
656
+ </li>
657
+ <li data-section="accordion">
658
+ <section>
659
+ <div data-section-title>Subhead 4</div>
660
+ <ul data-section-content>
661
+ <li><a>Item 11</a></li>
662
+ <li><a>Item 12</a></li>
663
+ <li><a>Item 13</a></li>
664
+ </ul>
665
+ </section>
666
+ </li>
667
+ </ul>
668
+ </section>
669
+ </li>
670
+ </ul>
671
+ </pre>
672
+ </div>
673
+ <div class="example">
674
+ <div class="example-head">
675
+ <h1>Tabbed pane</h1>
676
+ </div>
677
+ <div class="pane">
678
+ <div data-section="vertical-tabs">
679
+ <section>
680
+ <a data-section-title href="#">Tab 1</a>
681
+ <div data-section-content>
682
+ <h3>Title 1</h3>
683
+ <div class="subpane">Content 1</div>
684
+ </div>
685
+ </section>
686
+ <section>
687
+ <a data-section-title href="#">Tab 2</a>
688
+ <div data-section-content>
689
+ <h3>Title 2</h3>
690
+ <div class="subpane">Content 2</div>
691
+ </div>
692
+ </section>
693
+ <section>
694
+ <a data-section-title href="#">Tab 3</a>
695
+ <div data-section-content>
696
+ <h3>Title 3</h3>
697
+ <div class="subpane">Content 3</div>
698
+ </div>
699
+ </section>
700
+ </div>
701
+ </div>
702
+ <pre data-lang="html">
703
+ <div class="pane">
704
+ <div data-section="vertical-tabs">
705
+ <section>
706
+ <a data-section-title href="#">Tab 1</a>
707
+ <div data-section-content>
708
+ <h3>Title 1</h3>
709
+ <div class="subpane">Content 1</div>
710
+ </div>
711
+ </section>
712
+ <section>
713
+ <a data-section-title href="#">Tab 2</a>
714
+ <div data-section-content>
715
+ <h3>Title 2</h3>
716
+ <div class="subpane">Content 2</div>
717
+ </div>
718
+ </section>
719
+ <section>
720
+ <a data-section-title href="#">Tab 3</a>
721
+ <div data-section-content>
722
+ <h3>Title 3</h3>
723
+ <div class="subpane">Content 3</div>
724
+ </div>
725
+ </section>
726
+ </div>
727
+ </div>
728
+ </pre>
729
+ </div>
730
+ <div class="example">
731
+ <div class="example-head">
732
+ <h1>Docs Section</h1>
733
+ </div>
734
+ <div class="doc-section copy">
735
+ <span class="doc-label">Local</span>
736
+ <h1>Doc Section Header</h1>
737
+ <p>Description.</p>
738
+ <div class="doc-links">
739
+ <div class="row">
740
+ <a class="col-4">Link 1</a>
741
+ <a class="col-4" target="_blank">Link 2</a>
742
+ <a class="col-4" target="_blank">Link 3</a>
743
+ </div>
744
+ <div class="row">
745
+ <a class="col-4">Link 4</a>
746
+ <a class="col-4">Link 5</a>
747
+ <a class="col-4">Link 6</a>
748
+ </div>
749
+ </div>
750
+ <div class="doc-kw">
751
+ <span>Keywords</span>
752
+ <a>Link 7</a>
753
+ <a>Link 8</a>
754
+ <a>Link 9</a>
755
+ </div>
756
+ </div>
757
+ <pre data-lang="html">
758
+ <div class="doc-section copy">
759
+ <span class="doc-label">Local</span>
760
+ <h1>Doc Section Header</h1>
761
+ <p>Description.</p>
762
+ <div class="doc-links">
763
+ <div class="row">
764
+ <a class="col-4">Link 1</a>
765
+ <a class="col-4" target="_blank">Link 2</a>
766
+ <a class="col-4" target="_blank">Link 3</a>
767
+ </div>
768
+ <div class="row">
769
+ <a class="col-4">Link 4</a>
770
+ <a class="col-4">Link 5</a>
771
+ <a class="col-4">Link 6</a>
772
+ </div>
773
+ </div>
774
+ <div class="doc-kw">
775
+ <span>Keywords</span>
776
+ <a>Link 7</a>
777
+ <a>Link 8</a>
778
+ <a>Link 9</a>
779
+ </div>
780
+ </div>
781
+ </pre>
782
+ </div>
783
+ <div class="example">
784
+ <div class="example-head">
785
+ <h1>Docs pane</h1>
786
+ </div>
787
+ <style>
788
+ .media {
789
+ background: #eee;
790
+ width: 87px;
791
+ height: 87px;
792
+ }
793
+ </style>
794
+ <div class="doc-panes row copy">
795
+ <div class="col-6">
796
+ <div class="doc-pane">
797
+ <span class="doc-label">Local</span>
798
+ <div class="media"></div>
799
+ <h5>Title</h5>
800
+ <p>Description.</p>
801
+ </div>
802
+ </div>
803
+ <div class="col-6">
804
+ <div class="doc-pane">
805
+ <span class="doc-label">Local</span>
806
+ <div class="media"></div>
807
+ <h5>Title</h5>
808
+ <p>Description.</p>
809
+ </div>
810
+ </div>
811
+ </div>
812
+ <pre data-lang="html">
813
+ <div class="doc-panes row copy">
814
+ <div class="col-6">
815
+ <div class="doc-pane">
816
+ <span class="doc-label">Local</span>
817
+ <div class="media"></div>
818
+ <h5>Title</h5>
819
+ <p>Description.</p>
820
+ </div>
821
+ </div>
822
+ <div class="col-6">
823
+ <div class="doc-pane">
824
+ <span class="doc-label">Local</span>
825
+ <div class="media"></div>
826
+ <h5>Title</h5>
827
+ <p>Description.</p>
828
+ </div>
829
+ </div>
830
+ </div>
831
+ </pre>
832
+ </div>
833
+ <div class="example">
834
+ <div class="example-head">
835
+ <h1>Buttons</h1>
836
+ </div>
837
+ <a class="btn pill">Pill Button</a>
838
+ <br>
839
+ <a class="btn small">Small Button</a>
840
+ <br>
841
+ <a class="btn">Button</a>
842
+ <br>
843
+ <a class="btn icon-check">Button with Icon</a>
844
+ <br>
845
+ <a class="btn big">Big Button</a>
846
+ <br>
847
+ <a class="btn warning">Warning Button</a>
848
+ <br>
849
+ <a class="btn action">Call to Action Button</a>
850
+ <pre data-lang="html">
851
+ <a class="btn pill">Pill Button</a>
852
+ <br>
853
+ <a class="btn small">Small Button</a>
854
+ <br>
855
+ <a class="btn">Button</a>
856
+ <br>
857
+ <a class="btn icon-check">Button with Icon</a>
858
+ <br>
859
+ <a class="btn big">Big Button</a>
860
+ <br>
861
+ <a class="btn warning">Warning Button</a>
862
+ <br>
863
+ <a class="btn action">Call to Action Button</a>
864
+ </pre>
865
+ </div>
866
+ <div class="example">
867
+ <div class="example-head">
868
+ <h1>Button group</h1>
869
+ </div>
870
+ <div class="btngroup">
871
+ <a class="btn">Button 1</a>
872
+ <a class="btn">Button 2</a>
873
+ <a class="btn">Button 3</a>
874
+ </div>
875
+ <pre data-lang="html">
876
+ <div class="btngroup">
877
+ <a class="btn">Button 1</a>
878
+ <a class="btn">Button 2</a>
879
+ <a class="btn">Button 3</a>
880
+ </div>
881
+ </pre>
882
+ </div>
883
+ <div class="example">
884
+ <div class="example-head">
885
+ <h1>Button bar</h1>
886
+ </div>
887
+ <div class="btnbar">
888
+ <a class="btn">Button 1</a>
889
+ <a class="btn">Button 2</a>
890
+ <a class="btn">Button 3</a>
891
+ </div>
892
+ <pre data-lang="html">
893
+ <div class="btnbar">
894
+ <a class="btn">Button 1</a>
895
+ <a class="btn">Button 2</a>
896
+ <a class="btn">Button 3</a>
897
+ </div>
898
+ </pre>
899
+ </div>
900
+ <div class="example">
901
+ <div class="example-head">
902
+ <h1>Select (dropdown)</h1>
903
+ <p>MoovUI uses the <a href="http://harvesthq.github.io/chosen/" target="_blank">Chosen</a> plugin. Add the class <code>autocomplete</code> to show a text input.</p>
904
+ </div>
905
+ <select>
906
+ <option>Option 1</option>
907
+ <option>Option 2</option>
908
+ <option>Option 3</option>
909
+ <option>Option 4</option>
910
+ <option>Option 5</option>
911
+ <option>Option 6</option>
912
+ </select>
913
+ <select class="autocomplete">
914
+ <option>Autocomplete Option 1</option>
915
+ <option>Autocomplete Option 2</option>
916
+ <option>Autocomplete Option 3</option>
917
+ <option>Autocomplete Option 4</option>
918
+ <option>Autocomplete Option 5</option>
919
+ <option>Autocomplete Option 6</option>
920
+ </select>
921
+ <pre data-lang="html">
922
+ <select>
923
+ <option>Option 1</option>
924
+ <option>Option 2</option>
925
+ <option>Option 3</option>
926
+ <option>Option 4</option>
927
+ <option>Option 5</option>
928
+ <option>Option 6</option>
929
+ </select>
930
+ <select class="autocomplete">
931
+ <option>Autocomplete Option 1</option>
932
+ <option>Autocomplete Option 2</option>
933
+ <option>Autocomplete Option 3</option>
934
+ <option>Autocomplete Option 4</option>
935
+ <option>Autocomplete Option 5</option>
936
+ <option>Autocomplete Option 6</option>
937
+ </select>
938
+ </pre>
939
+ </div>
940
+ <div class="example">
941
+ <div class="example-head">
942
+ <h1>Inputs</h1>
943
+ <p>Add the class <code>code</code> for a code input.</p>
944
+ </div>
945
+ <label>
946
+ <input type="checkbox"> Checkbox
947
+ </label>
948
+ <br>
949
+ <label for="input1">Label</label>
950
+ <input id="input1" type="text" placeholder="Placeholder">
951
+ <input class="error" type="text" placeholder="Placeholder">
952
+ <input class="code" type="text" value="<code>">
953
+ <textarea>Text area</textarea>
954
+ <pre data-lang="html">
955
+ <label>
956
+ <input type="checkbox"> Checkbox
957
+ </label>
958
+ <br>
959
+ <label for="input1">Label</label>
960
+ <input id="input1" type="text" placeholder="Placeholder">
961
+ <input class="error" type="text" placeholder="Placeholder">
962
+ <input class="code" type="text" value="<code>">
963
+ <textarea>Text area</textarea>
964
+ </pre>
965
+ </div>
966
+ <div class="example">
967
+ <div class="example-head">
968
+ <h1>Modal</h1>
969
+ </div>
970
+ <a data-reveal-id="modal1" href="#">Modal</a>
971
+ <div id="modal1" class="reveal-modal">
972
+ <div class="modal-header">
973
+ <a class="close-reveal-modal" href="#"></a>
974
+ <h3>Modal Heading</h3>
975
+ </div>
976
+ <div class="modal-body">Modal Content</div>
977
+ <div class="modal-footer">
978
+ <a class="close-reveal-modal btn big" href="#">OK</a>
979
+ </div>
980
+ </div>
981
+ <pre data-lang="html">
982
+ <a data-reveal-id="modal1" href="#">Modal</a>
983
+ <div id="modal1" class="reveal-modal">
984
+ <div class="modal-header">
985
+ <a class="close-reveal-modal" href="#"></a>
986
+ <h3>Modal Heading</h3>
987
+ </div>
988
+ <div class="modal-body">Modal Content</div>
989
+ <div class="modal-footer">
990
+ <a class="close-reveal-modal btn big" href="#">OK</a>
991
+ </div>
992
+ </div>
993
+ </pre>
994
+ </div>
995
+ <div class="example">
996
+ <div class="example-head">
997
+ <h1>Tooltip</h1>
998
+ </div>
999
+ <span data-tooltip title="tooltip text">Hover over me</span>
1000
+ <span class="tip-top" data-tooltip title="tooltip text">Hover over me</span>
1001
+ <span class="tip-left" data-tooltip title="tooltip text">Hover over me</span>
1002
+ <span class="tip-right" data-tooltip title="tooltip text">Hover over me</span>
1003
+ <pre data-lang="html">
1004
+ <span data-tooltip title="tooltip text">Hover over me</span>
1005
+ <span class="tip-top" data-tooltip title="tooltip text">Hover over me</span>
1006
+ <span class="tip-left" data-tooltip title="tooltip text">Hover over me</span>
1007
+ <span class="tip-right" data-tooltip title="tooltip text">Hover over me</span>
1008
+ </pre>
1009
+ </div>
1010
+ <div class="example">
1011
+ <div class="example-head">
1012
+ <h1>Callout</h1>
1013
+ </div>
1014
+ <div class="callout info">Callout info (default)</div>
1015
+ <div class="callout warning">Callout warning<br>with second line</div>
1016
+ <pre data-lang="html">
1017
+ <div class="callout info">Callout info (default)</div>
1018
+ <div class="callout warning">Callout warning<br>with second line</div>
1019
+ </pre>
1020
+ </div>
1021
+ <div class="example">
1022
+ <div class="example-head">
1023
+ <h1>Basic 12 Grid</h1>
1024
+ <p>Add the class <code>gutters</code> to add some spacing between columns.</p>
1025
+ </div>
1026
+ <style>
1027
+ .text-center [class^="col-"] {
1028
+ border: 1px solid #ccc;
1029
+ }
1030
+ .row.gutters .col-3 {
1031
+ border: 0;
1032
+ }
1033
+ .gutters .col-3 div {
1034
+ background: #eee;
1035
+ }
1036
+ </style>
1037
+ <div class="text-center">
1038
+ <div class="row">
1039
+ <div class="col-12">12</div>
1040
+ </div>
1041
+ <div class="row">
1042
+ <div class="col-1">1</div>
1043
+ <div class="col-11">11</div>
1044
+ </div>
1045
+ <div class="row">
1046
+ <div class="col-6">6</div>
1047
+ <div class="col-6">6</div>
1048
+ </div>
1049
+ <div class="row">
1050
+ <div class="col-4">4</div>
1051
+ <div class="col-4">4</div>
1052
+ <div class="col-4">4</div>
1053
+ </div>
1054
+ <div class="row gutters">
1055
+ <div class="col-3"><div>3</div></div>
1056
+ <div class="col-3"><div>3</div></div>
1057
+ <div class="col-3"><div>3</div></div>
1058
+ <div class="col-3"><div>3</div></div>
1059
+ </div>
1060
+ <div class="row">
1061
+ <div class="col-2">2</div>
1062
+ <div class="col-2">2</div>
1063
+ <div class="col-2">2</div>
1064
+ <div class="col-2">2</div>
1065
+ <div class="col-2">2</div>
1066
+ <div class="col-2">2</div>
1067
+ </div>
1068
+ <div class="row">
1069
+ <div class="col-1">1</div>
1070
+ <div class="col-1">1</div>
1071
+ <div class="col-1">1</div>
1072
+ <div class="col-1">1</div>
1073
+ <div class="col-1">1</div>
1074
+ <div class="col-1">1</div>
1075
+ <div class="col-1">1</div>
1076
+ <div class="col-1">1</div>
1077
+ <div class="col-1">1</div>
1078
+ <div class="col-1">1</div>
1079
+ <div class="col-1">1</div>
1080
+ <div class="col-1">1</div>
1081
+ </div>
1082
+ </div>
1083
+ <pre data-lang="html">
1084
+ <div class="row">
1085
+ <div class="col-12">12</div>
1086
+ </div>
1087
+ <div class="row">
1088
+ <div class="col-1">1</div>
1089
+ <div class="col-11">11</div>
1090
+ </div>
1091
+ <div class="row">
1092
+ <div class="col-6">6</div>
1093
+ <div class="col-6">6</div>
1094
+ </div>
1095
+ <div class="row">
1096
+ <div class="col-4">4</div>
1097
+ <div class="col-4">4</div>
1098
+ <div class="col-4">4</div>
1099
+ </div>
1100
+ <div class="row gutters">
1101
+ <div class="col-3"><div>3</div></div>
1102
+ <div class="col-3"><div>3</div></div>
1103
+ <div class="col-3"><div>3</div></div>
1104
+ <div class="col-3"><div>3</div></div>
1105
+ </div>
1106
+ <div class="row">
1107
+ <div class="col-2">2</div>
1108
+ <div class="col-2">2</div>
1109
+ <div class="col-2">2</div>
1110
+ <div class="col-2">2</div>
1111
+ <div class="col-2">2</div>
1112
+ <div class="col-2">2</div>
1113
+ </div>
1114
+ <div class="row">
1115
+ <div class="col-1">1</div>
1116
+ <div class="col-1">1</div>
1117
+ <div class="col-1">1</div>
1118
+ <div class="col-1">1</div>
1119
+ <div class="col-1">1</div>
1120
+ <div class="col-1">1</div>
1121
+ <div class="col-1">1</div>
1122
+ <div class="col-1">1</div>
1123
+ <div class="col-1">1</div>
1124
+ <div class="col-1">1</div>
1125
+ <div class="col-1">1</div>
1126
+ <div class="col-1">1</div>
1127
+ </div>
1128
+ </pre>
1129
+ </div>
1130
+ <div class="example">
1131
+ <div class="example-head">
1132
+ <h1>Flex</h1>
1133
+ <p>For now, use with caution if supporting IE versions &lt; 10. Add the class <code>center</code> to vertically align elements.</p>
1134
+ </div>
1135
+ <style>
1136
+ .text-center .flex > * {
1137
+ border: 1px solid #ccc;
1138
+ }
1139
+ </style>
1140
+ <div class="text-center">
1141
+ <div class="flex">
1142
+ <div>1</div>
1143
+ </div>
1144
+ <div class="flex">
1145
+ <div>1</div>
1146
+ <div>2</div>
1147
+ </div>
1148
+ <div class="flex">
1149
+ <div>1</div>
1150
+ <div>2</div>
1151
+ <div>3</div>
1152
+ </div>
1153
+ <div class="flex">
1154
+ <div>1</div>
1155
+ <div>2</div>
1156
+ <div>3</div>
1157
+ <div>4</div>
1158
+ </div>
1159
+ <div class="flex">
1160
+ <div>1</div>
1161
+ <div>2</div>
1162
+ <div>3</div>
1163
+ <div>4</div>
1164
+ <div>5</div>
1165
+ </div>
1166
+ <br>
1167
+ <div class="flex center">
1168
+ <div>1</div>
1169
+ <div>2<br>2</div>
1170
+ <div>3<br>3<br>3</div>
1171
+ </div>
1172
+ </div>
1173
+ <pre data-lang="html">
1174
+ <div class="flex">
1175
+ <div>1</div>
1176
+ </div>
1177
+ <div class="flex">
1178
+ <div>1</div>
1179
+ <div>2</div>
1180
+ </div>
1181
+ <div class="flex">
1182
+ <div>1</div>
1183
+ <div>2</div>
1184
+ <div>3</div>
1185
+ </div>
1186
+ <div class="flex">
1187
+ <div>1</div>
1188
+ <div>2</div>
1189
+ <div>3</div>
1190
+ <div>4</div>
1191
+ </div>
1192
+ <div class="flex">
1193
+ <div>1</div>
1194
+ <div>2</div>
1195
+ <div>3</div>
1196
+ <div>4</div>
1197
+ <div>5</div>
1198
+ </div>
1199
+ <br>
1200
+ <div class="flex center">
1201
+ <div>1</div>
1202
+ <div>2<br>2</div>
1203
+ <div>3<br>3<br>3</div>
1204
+ </div>
1205
+ </pre>
1206
+ </div>
1207
+ <div class="example">
1208
+ <div class="example-head">
1209
+ <h1>Helpers</h1>
1210
+ </div>
1211
+ <div class="pull-left">float left</div>
1212
+ <div class="pull-right">float right</div>
1213
+ <div class="text-center">center</div>
1214
+ <div class="text-left">left</div>
1215
+ <div class="text-right">right</div>
1216
+ <pre data-lang="html">
1217
+ <div class="pull-left">float left</div>
1218
+ <div class="pull-right">float right</div>
1219
+ <div class="text-center">center</div>
1220
+ <div class="text-left">left</div>
1221
+ <div class="text-right">right</div>
1222
+ </pre>
1223
+ </div>
1224
+ </div>
1225
+ <footer id="footer">
1226
+ <div class="content">
1227
+ <h2 class="copy">Footer</h2>
1228
+ <ul>
1229
+ <li><a>Link 1</a></li>
1230
+ <li><a>Link 2</a></li>
1231
+ <li><a>Link 3</a></li>
1232
+ <li><a>Link 4</a></li>
1233
+ </ul>
1234
+ </div>
1235
+ </footer>
1236
+ <script>
1237
+ $("pre[data-lang]").each(function() {
1238
+ // innerHTML makes boolean attributes have an empty string value
1239
+ var html = this.innerHTML;
1240
+ this.innerHTML = html.replace(/=""/g, "").replace(/</g, "&lt;").replace(/>/g, "&gt;");
1241
+ });
1242
+ </script>
1243
+ <script src="custom.modernizr.js"></script>
1244
+ <script src="foundation.js"></script>
1245
+ <script src="foundation.alerts.js"></script>
1246
+ <script src="foundation.dropdown.js"></script>
1247
+ <script src="foundation.reveal.js"></script>
1248
+ <script src="foundation.section.js"></script>
1249
+ <script src="foundation.tooltips.custom.js"></script>
1250
+ <script>
1251
+ $(document).foundation("alerts dropdown reveal tooltips").foundation("section", {one_up: false});
1252
+ </script>
1253
+ </body>
1254
+ </html>