zurb-foundation 3.2.5 → 4.0.0.rc1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (239) hide show
  1. data/.gitignore +6 -2
  2. data/CHANGELOG.md +1 -26
  3. data/CONTRIBUTING.md +18 -0
  4. data/Gemfile.lock +19 -0
  5. data/Gruntfile.js +27 -0
  6. data/README.md +5 -6
  7. data/{Capfile → docs/Capfile} +0 -1
  8. data/docs/Gemfile +8 -0
  9. data/docs/Gemfile.lock +43 -0
  10. data/docs/Procfile +2 -0
  11. data/docs/README.md +1 -0
  12. data/docs/_sidebar-components.html.erb +109 -0
  13. data/docs/_sidebar.html.erb +109 -0
  14. data/docs/_zurb-jobs.html.erb +5 -0
  15. data/docs/changelog.html.erb +185 -0
  16. data/docs/compile.rb +43 -0
  17. data/docs/components/alert-boxes.html.erb +202 -0
  18. data/docs/components/block-grid.html.erb +118 -0
  19. data/docs/components/breadcrumbs.html.erb +146 -0
  20. data/docs/components/button-groups.html.erb +174 -0
  21. data/docs/components/buttons.html.erb +220 -0
  22. data/docs/components/clearing.html.erb +152 -0
  23. data/docs/components/custom-forms.html.erb +306 -0
  24. data/docs/components/dropdown-buttons.html.erb +233 -0
  25. data/docs/components/dropdown.html.erb +186 -0
  26. data/docs/components/flex-video.html.erb +93 -0
  27. data/docs/components/forms.html.erb +468 -0
  28. data/docs/components/grid.html.erb +355 -0
  29. data/docs/components/inline-lists.html.erb +89 -0
  30. data/docs/components/joyride.html.erb +178 -0
  31. data/docs/components/keystrokes.html.erb +74 -0
  32. data/docs/components/labels.html.erb +98 -0
  33. data/docs/components/magellan.html.erb +84 -0
  34. data/docs/components/orbit.html.erb +262 -0
  35. data/docs/components/pagination.html.erb +181 -0
  36. data/docs/components/panels.html.erb +121 -0
  37. data/docs/components/pricing-tables.html.erb +154 -0
  38. data/docs/components/progress-bars.html.erb +120 -0
  39. data/docs/components/reveal.html.erb +147 -0
  40. data/docs/components/section.html.erb +156 -0
  41. data/docs/components/side-nav.html.erb +122 -0
  42. data/docs/components/split-buttons.html.erb +218 -0
  43. data/docs/components/sub-nav.html.erb +120 -0
  44. data/docs/components/switch.html.erb +288 -0
  45. data/docs/components/tables.html.erb +123 -0
  46. data/docs/components/thumbnails.html.erb +87 -0
  47. data/docs/components/tooltips.html.erb +73 -0
  48. data/docs/components/top-bar.html.erb +219 -0
  49. data/docs/components/type.html.erb +359 -0
  50. data/docs/components/visibility.html.erb +102 -0
  51. data/docs/config.ru +12 -0
  52. data/docs/config/deploy.rb +33 -0
  53. data/docs/controller.rb +43 -0
  54. data/docs/css/_coderay.scss +116 -0
  55. data/docs/css/_settings.scss +1 -0
  56. data/docs/css/docs.scss +174 -0
  57. data/docs/css/normalize.scss +396 -0
  58. data/docs/css/qunit-composite.css +13 -0
  59. data/docs/css/qunit.css +235 -0
  60. data/docs/faq.html.erb +61 -0
  61. data/docs/img/demos/demo1-th.png +0 -0
  62. data/docs/img/demos/demo1.png +0 -0
  63. data/docs/img/demos/demo2-th.png +0 -0
  64. data/docs/img/demos/demo2.png +0 -0
  65. data/docs/img/demos/demo3-th.png +0 -0
  66. data/docs/img/demos/demo3.png +0 -0
  67. data/docs/img/demos/demo4-th.png +0 -0
  68. data/docs/img/demos/demo4.png +0 -0
  69. data/docs/img/demos/demo5-th.png +0 -0
  70. data/docs/img/demos/demo5.png +0 -0
  71. data/docs/index.html.erb +299 -0
  72. data/docs/javascript.html.erb +133 -0
  73. data/docs/js/docs.js +3 -0
  74. data/docs/js/qunit-composite.js +105 -0
  75. data/docs/js/qunit.js +1977 -0
  76. data/docs/js/tests/tabs/simple_tabs.html +57 -0
  77. data/docs/js/tests/tabs/simple_tabs.js +54 -0
  78. data/docs/js/tests/tooltips/tooltips.html +39 -0
  79. data/docs/js/tests/tooltips/tooltips.js +11 -0
  80. data/docs/layout.html.erb +99 -0
  81. data/docs/rails.html.erb +66 -0
  82. data/docs/sass.html.erb +299 -0
  83. data/docs/support.html.erb +134 -0
  84. data/foundation.gemspec +2 -4
  85. data/index.html +3 -23
  86. data/js/foundation/foundation.alerts.js +50 -0
  87. data/js/foundation/foundation.clearing.js +478 -0
  88. data/{vendor/assets/javascripts/foundation/jquery.cookie.js → js/foundation/foundation.cookie.js} +3 -1
  89. data/js/foundation/foundation.dropdown.js +122 -0
  90. data/js/foundation/foundation.forms.js +403 -0
  91. data/js/foundation/foundation.joyride.js +613 -0
  92. data/js/foundation/foundation.js +331 -0
  93. data/js/foundation/foundation.magellan.js +130 -0
  94. data/js/foundation/foundation.orbit.js +355 -0
  95. data/{vendor/assets/javascripts/foundation/jquery.placeholder.js → js/foundation/foundation.placeholder.js} +4 -2
  96. data/js/foundation/foundation.reveal.js +264 -0
  97. data/js/foundation/foundation.section.js +180 -0
  98. data/js/foundation/foundation.tooltips.js +195 -0
  99. data/js/foundation/foundation.topbar.js +187 -0
  100. data/js/foundation/index.js +16 -0
  101. data/{vendor/assets/javascripts/foundation/modernizr.foundation.js → js/vendor/custom.modernizr.js} +0 -0
  102. data/js/vendor/jquery.js +9597 -0
  103. data/js/vendor/zepto.js +1782 -0
  104. data/lib/foundation/engine.rb +8 -1
  105. data/lib/foundation/generators/install_generator.rb +24 -1
  106. data/lib/foundation/generators/templates/application.html.erb +20 -6
  107. data/lib/foundation/generators/templates/application.html.haml +2 -6
  108. data/lib/foundation/generators/templates/application.html.slim +2 -5
  109. data/lib/foundation/version.rb +1 -1
  110. data/lib/zurb-foundation.rb +7 -9
  111. data/package.json +9 -0
  112. data/scss/foundation.scss +42 -15
  113. data/scss/foundation/_foundation-global.scss +226 -0
  114. data/scss/foundation/components/_alert-boxes.scss +106 -0
  115. data/scss/foundation/components/_block-grid.scss +63 -0
  116. data/scss/foundation/components/_breadcrumbs.scss +117 -0
  117. data/scss/foundation/components/_button-groups.scss +59 -0
  118. data/scss/foundation/components/_buttons.scss +217 -0
  119. data/scss/foundation/components/_clearing.scss +209 -0
  120. data/scss/foundation/components/_custom-forms.scss +232 -0
  121. data/scss/foundation/components/_dropdown-buttons.scss +114 -0
  122. data/scss/foundation/components/_dropdown.scss +137 -0
  123. data/scss/foundation/components/_flex-video.scss +45 -0
  124. data/scss/foundation/components/_forms.scss +309 -0
  125. data/scss/foundation/components/_grid.scss +149 -71
  126. data/scss/foundation/components/_inline-lists.scss +47 -0
  127. data/scss/foundation/components/_joyride.scss +193 -0
  128. data/scss/foundation/components/_keystrokes.scss +56 -0
  129. data/scss/foundation/components/_labels.scss +81 -0
  130. data/scss/foundation/components/_magellan.scss +15 -0
  131. data/scss/foundation/components/_orbit.scss +193 -0
  132. data/scss/foundation/components/_pagination.scss +99 -0
  133. data/scss/foundation/components/_panels.scss +76 -0
  134. data/scss/foundation/components/_pricing-tables.scss +130 -0
  135. data/scss/foundation/components/_progress-bars.scss +68 -0
  136. data/scss/foundation/components/_reveal.scss +131 -0
  137. data/scss/foundation/components/_section.scss +194 -0
  138. data/scss/foundation/components/_side-nav.scss +68 -0
  139. data/scss/foundation/components/_split-buttons.scss +159 -0
  140. data/scss/foundation/components/_sub-nav.scss +67 -0
  141. data/scss/foundation/components/_switch.scss +242 -0
  142. data/scss/foundation/components/_tables.scss +80 -0
  143. data/scss/foundation/components/_thumbs.scss +45 -0
  144. data/scss/foundation/components/_tooltips.scss +113 -0
  145. data/scss/foundation/components/_top-bar.scss +443 -0
  146. data/scss/foundation/components/_type.scss +411 -0
  147. data/scss/foundation/components/_visibility.scss +117 -0
  148. data/scss/normalize.scss +396 -0
  149. data/templates/project/config.rb +26 -0
  150. data/templates/project/index.html +28 -43
  151. data/templates/project/manifest.rb +21 -28
  152. data/templates/project/scss/_settings.scss +4 -243
  153. data/templates/project/scss/app.scss +37 -44
  154. data/templates/project/scss/normalize.scss +396 -0
  155. data/test/stylesheets/styles.css +955 -0
  156. metadata +144 -153
  157. data/config/deploy.rb +0 -42
  158. data/lib/foundation/generators/layout_generator.rb +0 -28
  159. data/scss/foundation/_settings.scss +0 -281
  160. data/scss/foundation/common/_base.scss +0 -4
  161. data/scss/foundation/common/_forms.scss +0 -117
  162. data/scss/foundation/common/_globals.scss +0 -35
  163. data/scss/foundation/common/_ratios.scss +0 -19
  164. data/scss/foundation/common/_typography.scss +0 -104
  165. data/scss/foundation/components/modules/_all.scss +0 -10
  166. data/scss/foundation/components/modules/_buttons.scss +0 -178
  167. data/scss/foundation/components/modules/_clearing.scss +0 -61
  168. data/scss/foundation/components/modules/_joyride.scss +0 -33
  169. data/scss/foundation/components/modules/_mqueries.scss +0 -458
  170. data/scss/foundation/components/modules/_navbar.scss +0 -74
  171. data/scss/foundation/components/modules/_offcanvas.scss +0 -55
  172. data/scss/foundation/components/modules/_orbit.scss +0 -90
  173. data/scss/foundation/components/modules/_reveal.scss +0 -34
  174. data/scss/foundation/components/modules/_tabs.scss +0 -67
  175. data/scss/foundation/components/modules/_topbar.scss +0 -167
  176. data/scss/foundation/components/modules/_ui.scss +0 -292
  177. data/scss/foundation/functions/_all.scss +0 -2
  178. data/scss/foundation/functions/_convert-number-to-word.scss +0 -10
  179. data/scss/foundation/functions/_grid-calc.scss +0 -5
  180. data/scss/foundation/functions/modular-scale.scss +0 -3
  181. data/scss/foundation/mixins/_all.scss +0 -5
  182. data/scss/foundation/mixins/_clearfix.scss +0 -13
  183. data/scss/foundation/mixins/_css-triangle.scss +0 -22
  184. data/scss/foundation/mixins/_font-size.scss +0 -13
  185. data/scss/foundation/mixins/_respond-to.scss +0 -11
  186. data/scss/foundation/mixins/_semantic-grid.scss +0 -66
  187. data/test/buttons.html +0 -189
  188. data/test/clearing.html +0 -85
  189. data/test/config.rb +0 -11
  190. data/test/elements.html +0 -490
  191. data/test/forms.html +0 -371
  192. data/test/grid.html +0 -543
  193. data/test/images/orbit-demo/demo1.jpeg +0 -0
  194. data/test/images/orbit-demo/demo2.jpeg +0 -0
  195. data/test/images/orbit-demo/demo3.jpeg +0 -0
  196. data/test/images/orbit-demo/slider-background.jpeg +0 -0
  197. data/test/index.html +0 -83
  198. data/test/joyride.html +0 -127
  199. data/test/magellan.html +0 -112
  200. data/test/navigation.html +0 -269
  201. data/test/orbit.html +0 -112
  202. data/test/reveal.html +0 -91
  203. data/test/scss/_settings.scss +0 -245
  204. data/test/scss/styles.scss +0 -50
  205. data/test/tabs.html +0 -197
  206. data/test/template.html +0 -52
  207. data/test/topbar-login.html +0 -194
  208. data/test/topbar.html +0 -139
  209. data/test/type.html +0 -188
  210. data/vendor/assets/images/foundation/orbit/bullets.jpg +0 -0
  211. data/vendor/assets/images/foundation/orbit/left-arrow-small.png +0 -0
  212. data/vendor/assets/images/foundation/orbit/left-arrow.png +0 -0
  213. data/vendor/assets/images/foundation/orbit/loading.gif +0 -0
  214. data/vendor/assets/images/foundation/orbit/mask-black.png +0 -0
  215. data/vendor/assets/images/foundation/orbit/pause-black.png +0 -0
  216. data/vendor/assets/images/foundation/orbit/right-arrow-small.png +0 -0
  217. data/vendor/assets/images/foundation/orbit/right-arrow.png +0 -0
  218. data/vendor/assets/images/foundation/orbit/rotator-black.png +0 -0
  219. data/vendor/assets/images/foundation/orbit/timer-black.png +0 -0
  220. data/vendor/assets/javascripts/foundation/app.js +0 -41
  221. data/vendor/assets/javascripts/foundation/index.js +0 -19
  222. data/vendor/assets/javascripts/foundation/jquery.event.move.js +0 -580
  223. data/vendor/assets/javascripts/foundation/jquery.event.swipe.js +0 -130
  224. data/vendor/assets/javascripts/foundation/jquery.foundation.accordion.js +0 -47
  225. data/vendor/assets/javascripts/foundation/jquery.foundation.alerts.js +0 -20
  226. data/vendor/assets/javascripts/foundation/jquery.foundation.buttons.js +0 -83
  227. data/vendor/assets/javascripts/foundation/jquery.foundation.clearing.js +0 -413
  228. data/vendor/assets/javascripts/foundation/jquery.foundation.forms.js +0 -502
  229. data/vendor/assets/javascripts/foundation/jquery.foundation.joyride.js +0 -639
  230. data/vendor/assets/javascripts/foundation/jquery.foundation.magellan.js +0 -96
  231. data/vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js +0 -27
  232. data/vendor/assets/javascripts/foundation/jquery.foundation.navigation.js +0 -55
  233. data/vendor/assets/javascripts/foundation/jquery.foundation.orbit.js +0 -919
  234. data/vendor/assets/javascripts/foundation/jquery.foundation.reveal.js +0 -794
  235. data/vendor/assets/javascripts/foundation/jquery.foundation.tabs.js +0 -66
  236. data/vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js +0 -211
  237. data/vendor/assets/javascripts/foundation/jquery.foundation.topbar.js +0 -174
  238. data/vendor/assets/javascripts/foundation/jquery.js +0 -9555
  239. data/vendor/assets/javascripts/foundation/jquery.offcanvas.js +0 -50
@@ -1,189 +0,0 @@
1
- <!DOCTYPE html>
2
- <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
3
- <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
4
- <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
5
- <head>
6
- <meta charset="utf-8" />
7
-
8
- <!-- Set the viewport width to device width for mobile -->
9
- <meta name="viewport" content="width=device-width" />
10
-
11
- <title>Foundation Button Testing</title>
12
-
13
- <!-- Included CSS Files -->
14
- <link rel="stylesheet" href="stylesheets/styles.css">
15
-
16
- <script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
17
-
18
- </head>
19
- <body>
20
-
21
- <div class="row">
22
- <div class="twelve columns">
23
- <p><a href="index.html">&laquo; Back</a></p>
24
- <h2>Foundation Button Testing</h2>
25
- <hr />
26
- <dl class="sub-nav">
27
- <dt>Go to:</dt>
28
- <dd><a href="#buttons">Buttons</a></dd>
29
- <dd><a href="#button-groups">Button Groups</a></dd>
30
- <dd><a href="#dropdown-buttons">Dropdown Buttons</a></dd>
31
- </dl>
32
- </div>
33
- </div>
34
-
35
- <!-- Test Foundation Components Here -->
36
- <div class="row">
37
- <div class="twelve columns">
38
-
39
- <h3>Buttons</h3>
40
- <h4 class="subheader">Buttons are a convenient tool when it comes to more traditional actions. To that end, Foundation includes a lot of easy to use button styles that you can customize or override.</h4>
41
- <br>
42
- <div class="row">
43
- <div class="four columns">
44
- <a name="buttons"></a>
45
- <h4>Basic Buttons</h4>
46
- <p>Foundation buttons have a number of parameters and styles &mdash; you can see a few examples below. The out of the box classes include size, type (color) and style (square, slightly rounded, and completely rounded).</p>
47
- </div>
48
- <br>
49
- <div class="eight columns">
50
- <div class="row">
51
- <div class="six columns">
52
- <a href="#" class="tiny button">Tiny Button &raquo;</a><br /><br />
53
- <a href="#" class="small button">Small Button &raquo;</a><br /><br />
54
- <a href="#" class="button">Regular Button &raquo;</a><br /><br />
55
- <a href="#" class="large button">Large Button &raquo;</a><br /><br />
56
- <br /><br />
57
- <a href="#" class="tiny secondary button">Secondary Button &raquo;</a><br /><br />
58
- <a href="#" class="small secondary button">Secondary Button &raquo;</a><br /><br />
59
- <a href="#" class="secondary button">Secondary Button &raquo;</a><br /><br />
60
- <a href="#" class="large secondary button">Secondary Button &raquo;</a><br /><br />
61
- <br /><br />
62
- </div>
63
- <div class="six columns">
64
- <a href="#" class="tiny success button">Success Button &raquo;</a><br /><br />
65
- <a href="#" class="small success button">Success Button &raquo;</a><br /><br />
66
- <a href="#" class="success button">Success Button &raquo;</a><br /><br />
67
- <a href="#" class="large success button">Success Button &raquo;</a><br /><br />
68
- <br /><br />
69
- <a href="#" class="tiny alert button">Alert Button &raquo;</a><br /><br />
70
- <a href="#" class="small alert button">Alert Button &raquo;</a><br /><br />
71
- <a href="#" class="alert button">Alert Button &raquo;</a><br /><br />
72
- <a href="#" class="large alert button">Alert Button &raquo;</a><br /><br />
73
- <br /><br />
74
- </div>
75
- </div>
76
- <p>Button classes can also be applied to <code>button</code> elements, as well as <code>input type="submit"</code> elements.</p>
77
-
78
- <button class="button">Form Button</button>
79
- <input type="submit" class="button" value="Input Submit Button" />
80
- <a href="#" class="button">Regular Button &raquo;</a>
81
- </div>
82
- </div>
83
-
84
- <br><br><br>
85
-
86
- <div class="row">
87
- <div class="four columns">
88
- <a name="button-groups"></a>
89
- <h4>Button Groups</h4>
90
- <p>When you need a group of actions, button groups give you some easy-to-use options. These can have a class of <code>.rounded</code> or <code>.even</code>. You can even create button bars by using <code>.button-bar</code>.</p>
91
- </div>
92
- <br>
93
- <div class="eight columns">
94
- <ul class="button-group radius">
95
- <li><a href="#" class="button radius">Button 1</a></li>
96
- <li><a href="#" class="button radius">Button 2</a></li>
97
- <li><a href="#" class="button radius">Button 3</a></li>
98
- </ul>
99
- <ul class="button-group even three-up">
100
- <li><a href="#" class="button">Button 1</a></li>
101
- <li><a href="#" class="button">Button 2</a></li>
102
- <li><a href="#" class="button">Button 3</a></li>
103
- </ul>
104
- <div class="button-bar">
105
- <ul class="button-group">
106
- <li><a href="#" class="button">Button 1</a></li>
107
- <li><a href="#" class="button">Button 2</a></li>
108
- <li><a href="#" class="button">Button 3</a></li>
109
- </ul>
110
-
111
- <ul class="button-group">
112
- <li><a href="#" class="button">Button 1</a></li>
113
- <li><a href="#" class="button">Button 2</a></li>
114
- <li><a href="#" class="button">Button 3</a></li>
115
- </ul>
116
- </div>
117
- </div>
118
- </div>
119
-
120
- <br><br>
121
-
122
- <div class="row">
123
- <div class="four columns">
124
- <a name="dropdown-buttons"> </a>
125
- <h4>Dropdown Buttons</h4>
126
- <p>These are useful when an action has several possible outcomes to select from, or when there are secondary choices you can make in lieu of a primary action.</p>
127
- <p>If you need your dropdown to go up, simple add a class of <code>.up</code> to <code>.button.dropdown</code>.</p>
128
- </div>
129
- <div class="eight columns">
130
- <p>
131
- <div href="#" class="large button dropdown">
132
- Dropdown Button
133
- <ul>
134
- <li><a href="#">Dropdown Item</a></li>
135
- <li><a href="#">Another Dropdown Item</a></li>
136
- <li><button name="action" onclick="javascript: alert('button clicked')">Button Element</button></li>
137
- <li class="divider"></li>
138
- <li><a href="#">Last Item</a></li>
139
- </ul>
140
- </div>
141
- </p>
142
- <p>
143
- <div href="#" class="large alert button split dropdown">
144
- <a href="#">Split Button</a>
145
- <span></span>
146
- <ul>
147
- <li><a href="#">Dropdown Item</a></li>
148
- <li><a href="#">Another Dropdown Item</a></li>
149
- <li class="divider"></li>
150
- <li><a href="#">Last Item</a></li>
151
- </ul>
152
- </div>
153
- <div href="#" class="large alert button split dropdown">
154
- <a href="#">Split Button</a>
155
- <span></span>
156
- <ul>
157
- <li><a href="#">Dropdown Item</a></li>
158
- <li><a href="#">Another Dropdown Item</a></li>
159
- <li class="divider"></li>
160
- <li><a href="#">Last Item</a></li>
161
- </ul>
162
- </div>
163
- </p>
164
- <p>Notice that in a split button, the <code>span</code> is the dropdown affordance and the main anchor is the primary button action.</p>
165
- </div>
166
- </div>
167
-
168
- </div>
169
- </div>
170
-
171
- <!-- Included JS Files -->
172
- <script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
173
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
174
- <script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
175
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
176
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
177
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
178
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
179
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
180
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
181
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
182
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
183
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
184
- <script src="../vendor/assets/javascripts/foundation/app.js"></script>
185
- <script type="text/javascript">
186
- // Page-Specific JavaScript Goes Here
187
- </script>
188
- </body>
189
- </html>
@@ -1,85 +0,0 @@
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 Clearing 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
- </head>
20
- <body>
21
-
22
- <div class="row">
23
- <div class="twelve columns">
24
- <p><a href="index.html">&laquo; Back</a></p>
25
- <h2>Foundation Clearing Testing</h2>
26
- <hr />
27
- </div>
28
- </div>
29
-
30
- <!-- Test Foundation Components Here -->
31
- <div class="row">
32
- <div class="twelve columns">
33
-
34
- <div class="row">
35
- <div class="eight columns">
36
- <div>
37
- <h4>Clearing Show</h4>
38
- <p>Click on an image to open it.</p>
39
-
40
- <ul class="block-grid three-up" data-clearing>
41
- <li><a class="th" href="http://placekitten.com/1000/700"><img src="http://placekitten.com/200/200"></a></li>
42
- <li><a class="th" href="http://placekitten.com/1000/800"><img src="http://placekitten.com/300/300"></a></li>
43
- <li><a class="th" href="http://placekitten.com/1000/900"><img src="http://placekitten.com/400/400"></a></li>
44
- <li><a class="th" href="http://placekitten.com/1000/1000"><img src="http://placekitten.com/500/500"></a></li>
45
- <li><a class="th" href="http://placekitten.com/1000/1100"><img src="http://placekitten.com/700/700"></a></li>
46
- <li><a class="th" href="http://placekitten.com/1000/1100"><img src="http://placekitten.com/700/700"></a></li>
47
- </ul>
48
- </div>
49
- </div>
50
- <div class="four columns">
51
- <!-- <h4>Photo Gallery</h4>
52
-
53
- <ul class="block-grid three-up" data-clearing>
54
- <li class="clearing-feature"><a href="http://placekitten.com/g/1000/800"><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/100/100"></a></li>
55
- <li><img src="http://placekitten.com/g/1200/500"></li>
56
- <li><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet." src="http://placekitten.com/g/100/80"></li>
57
- <li><img data-caption="Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum." src="http://placekitten.com/g/1200/800"></li>
58
- <li><img data-caption="Etiam porta sem malesuada magna mollis euismod." src="http://placekitten.com/g/1200/1000"></li>
59
- <li><img data-caption="WDuis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit." src="http://placekitten.com/g/1400/800"></li>
60
- </ul> -->
61
- </div>
62
- </div>
63
- </div>
64
- </div>
65
-
66
- <!-- Included JS Files -->
67
- <script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
68
- <script src="../vendor/assets/javascripts/foundation/jquery.event.move.js"></script>
69
- <script src="../vendor/assets/javascripts/foundation/jquery.event.swipe.js"></script>
70
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
71
- <script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
72
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
73
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
74
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
75
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
76
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
77
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
78
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
79
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
80
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.magellan.js"></script>
81
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.clearing.js"></script>
82
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
83
- <script src="../vendor/assets/javascripts/foundation/app.js"></script>
84
- </body>
85
- </html>
@@ -1,11 +0,0 @@
1
- require File.join(File.dirname(__FILE__),"../lib/zurb-foundation")
2
- # require "foundation"
3
- project_type = :stand_alone
4
- http_path = "/"
5
- sass_dir = "scss"
6
- css_dir = "stylesheets"
7
- images_dir = "../vendor/assets/images"
8
- line_comments = false
9
- preferred_syntax = :scss
10
- output_style = :compact
11
- relative_assets = true
@@ -1,490 +0,0 @@
1
- <!DOCTYPE html>
2
- <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
3
- <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
4
- <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
5
- <head>
6
- <meta charset="utf-8" />
7
-
8
- <!-- Set the viewport width to device width for mobile -->
9
- <meta name="viewport" content="width=device-width" />
10
-
11
- <title>Foundation Elements Testing</title>
12
-
13
- <!-- Included CSS Files -->
14
- <link rel="stylesheet" href="stylesheets/styles.css">
15
-
16
- <script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
17
-
18
- </head>
19
- <body>
20
-
21
- <div class="row">
22
- <div class="twelve columns">
23
- <p><a href="index.html">&laquo; Back</a></p>
24
- <h2>Foundation Elements Testing</h2>
25
- <hr />
26
- <dl class="sub-nav">
27
- <dt>Go to:</dt>
28
- <dd><a href="#visibility-classes">Visibility Classes</a></dd>
29
- <dd><a href="#alerts">Alerts</a></dd>
30
- <dd><a href="#labels">Labels</a></dd>
31
- <dd><a href="#tooltips">Tooltips</a></dd>
32
- <dd><a href="#accordion">Accordion</a></dd>
33
- <dd><a href="#keystrokes">Keystrokes</a></dd>
34
- <dd><a href="#panels">Panels</a></dd>
35
- <dd><a href="#inline-list">Inline List</a></dd>
36
- <dd><a href="#tables">Tables</a></dd>
37
- <dd><a href="#progress-bars">Progress Bars</a></dd>
38
- <dd><a href="#pricing-tables">Pricing Tables</a></dd>
39
- <dd><a href="#thumbs">Thumbs</a></dd>
40
- <dd><a href="#video">Video</a></dd>
41
-
42
- </dl>
43
- </div>
44
- </div>
45
-
46
- <!-- Test Foundation Components Here -->
47
- <div class="row">
48
- <div class="twelve columns">
49
- <h3>Elements</h3>
50
- <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>
51
-
52
- <br>
53
-
54
- <div class="row">
55
- <div class="four columns">
56
- <a name="visibility-classes"></a>
57
- <h4>Visibility Classes</h4>
58
- <p>Foundation 3 allows you to easily turn elements on and off based on certain device criteria, like screen size, touch, or orientation.</p>
59
- </div>
60
- <div class="eight columns">
61
- <h5>Screen Size</h5>
62
- <p>The following text should describe the device you're using:
63
- <strong class="show-for-xlarge">You are on a very large screen.</strong>
64
- <strong class="show-for-large">You are on a large screen.</strong>
65
- <strong class="show-for-large-up">You are on a large or very large screen.</strong>
66
- <strong class="show-for-medium">You are on a medium screen.</strong>
67
- <strong class="show-for-medium-down">You are on a medium or small screen.</strong>
68
- <strong class="show-for-small">You are on a small screen, like a smartphone.</strong>
69
- </p>
70
-
71
- <p>This example uses the opposite rules, so the following text should inversely describe the device you're using:
72
- <strong class="hide-for-xlarge">You are not on a very large screen.</strong>
73
- <strong class="hide-for-large">You are not on a large screen.</strong>
74
- <strong class="hide-for-large-up">You are not on a large or very large screen.</strong>
75
- <strong class="hide-for-medium-down">You are not on a medium or small screen.</strong>
76
- <strong class="hide-for-medium">You are not on a medium screen.</strong>
77
- <strong class="hide-for-small">You are not on a small screen.</strong>
78
- </p>
79
-
80
- <h5>Orientation Detection</h5>
81
- <p>The following text should describe the device you're using:
82
- <strong class="show-for-landscape">You are in landscape orientation.</strong>
83
- <strong class="show-for-portrait">You are in portrait orientation.</strong>
84
- </p>
85
-
86
- <h5>Touch Detection</h5>
87
- <p>The following text should describe the device you're using:
88
- <strong class="show-for-touch">You are on a touch-enabled device.</strong>
89
- <strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
90
- </p>
91
-
92
- <h5>Media Query Viewer</h5>
93
- <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>
94
- </div>
95
- </div>
96
-
97
- <br><br>
98
-
99
- <div class="row">
100
- <div class="four columns">
101
- <a name="alerts"></a>
102
- <h4>Alerts</h4>
103
- <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>
104
- </div>
105
- <br>
106
- <div class="eight columns">
107
- <div class="alert-box">
108
- This is a standard alert (div.alert-box).
109
- <a href="" class="close">&times;</a>
110
- </div>
111
-
112
- <div class="alert-box success">
113
- This is a success alert (div.alert-box.success).
114
- <a href="" class="close">&times;</a>
115
- </div>
116
-
117
- <div class="alert-box alert">
118
- This is an alert (div.alert-box.alert).
119
- <a href="" class="close">&times;</a>
120
- </div>
121
-
122
- <div class="alert-box secondary">
123
- This is a secondary alert (div.alert-box.secondary).
124
- <a href="" class="close">&times;</a>
125
- </div>
126
- </div>
127
- </div>
128
-
129
- <br><br>
130
-
131
- <div class="row">
132
- <div class="four columns">
133
- <a name="labels"></a>
134
- <h4>Labels</h4>
135
- <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>
136
- </div>
137
- <br>
138
- <div class="eight columns">
139
- <div class="row">
140
- <div class="three columns phone-two">
141
- <p>
142
- <span class="label">Regular Label</span><br />
143
- <span class="radius label">Radius Label</span><br />
144
- <span class="round label">Round Label</span>
145
- </p>
146
- </div>
147
- <div class="three columns end phone-two">
148
- <p>
149
- <span class="secondary radius label">Secondary Label</span><br />
150
- <span class="alert label">Alert Label</span><br />
151
- <span class="success round label">Success Label</span><br />
152
- </p>
153
- </div>
154
- </div>
155
- <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>
156
- </div>
157
- </div>
158
-
159
- <br><br>
160
-
161
- <div class="row">
162
- <div class="four columns">
163
- <a name="tooltips"></a>
164
- <h4>Tooltips</h4>
165
- <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>
166
-
167
- <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>
168
- </div>
169
- <br>
170
- <div class="eight columns">
171
- <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. Centered tips are avaliable in bottom <span class="has-tip tip-centered-bottom" data-width="180" title="I'm a centered tip below the target element.">tip-centered-bottom</span> and in top <span class="has-tip tip-centered-top" data-width="120" title="I'm a centered tip above the target element.">tip-centered-top</span> flavors for an element. On a small device, the tooltips are full width and bottom aligned.</p>
172
-
173
- <h3>Custom Options</h3>
174
- <p>
175
- I have <span class="has-tip-custom" title="See? Custom class here.">custom attributes.</span>
176
- </p>
177
- </div>
178
- </div>
179
-
180
- <br><br>
181
-
182
- <div class="row">
183
- <div class="four columns">
184
- <a name="accordion"></a>
185
- <h4>Accordion</h4>
186
- <p>Accordions are similar to tabs as a way to selectively show a single panel of content at a time. You can add a <code>.hover</code> class to the accordion <code>ul</code> to make it open on hover.</p>
187
- </div>
188
- <br>
189
- <div class="eight columns">
190
- <ul class="accordion">
191
- <li class="active">
192
- <div class="title">
193
- <h5>Accordion Panel 1</h5>
194
- </div>
195
- <div class="content">
196
- <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>
197
- <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>
198
- </div>
199
- </li>
200
- <li>
201
- <div class="title">
202
- <h5>Accordion Panel 2</h5>
203
- </div>
204
- <div class="content">
205
- <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>
206
- <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>
207
- </div>
208
- </li>
209
- <li>
210
- <div class="title">
211
- <h5>Accordion Panel 3</h5>
212
- </div>
213
- <div class="content">
214
- <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>
215
- <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>
216
- </div>
217
- </li>
218
- </ul>
219
- </div>
220
- </div>
221
-
222
- <br><br>
223
-
224
- <div class="row">
225
- <div class="four columns">
226
- <a name="keystrokes"></a>
227
- <h4>Keystrokes</h4>
228
- <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>
229
- </div>
230
- <br>
231
- <div class="eight columns">
232
- <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>
233
- </div>
234
- </div>
235
-
236
- <br><br>
237
-
238
- <div class="row">
239
- <div class="four columns">
240
- <a name="panels"></a>
241
- <h4>Panels</h4>
242
- <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>
243
- </div>
244
- <br><br>
245
- <div class="eight columns">
246
- <div class="row">
247
- <div class="six columns">
248
- <div class="panel">
249
- <h5>This is a regular panel.</h5>
250
- <p>It has an easy to override visual style, and is appropriately subdued.</p>
251
- </div>
252
- </div>
253
- <div class="six columns">
254
- <div class="panel callout radius">
255
- <h5>This is a callout panel.</h5>
256
- <p>It's a little ostentatious, but useful for important content.</p>
257
- </div>
258
- </div>
259
- </div>
260
- </div>
261
- </div>
262
-
263
- <br><br>
264
-
265
- <div class="row">
266
- <div class="four columns">
267
- <a name="inline-list"></a>
268
- <h4>Inline List</h4>
269
- <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>
270
- </div>
271
- <br>
272
- <div class="eight columns">
273
- <ul class="inline-list">
274
- <li><a href="#">Link 1</a></li>
275
- <li><a href="#">Link 2</a></li>
276
- <li><a href="#">Link 3</a></li>
277
- <li><a href="#">Link 4</a></li>
278
- <li><a href="#">Link 5</a></li>
279
- </ul>
280
- </div>
281
- </div>
282
-
283
- <br><br>
284
-
285
- <div class="row">
286
- <div class="four columns">
287
- <a name="tables"></a>
288
- <h4>Tables</h4>
289
- <p>Okay, they're not the sexiest things ever, but tables get the job done (for tabular data).</p>
290
- </div>
291
- <br>
292
- <div class="eight columns">
293
- <table>
294
- <thead>
295
- <tr>
296
- <th>Table Header</th>
297
- <th>Table Header</th>
298
- <th>Table Header</th>
299
- <th>Table Header</th>
300
- </tr>
301
- </thead>
302
- <tbody>
303
- <tr>
304
- <td>Content</td>
305
- <td>This is longer content</td>
306
- <td>Content</td>
307
- <td>Content</td>
308
- </tr>
309
- <tr>
310
- <td>Content</td>
311
- <td>This is longer content</td>
312
- <td>Content</td>
313
- <td>Content</td>
314
- </tr>
315
- <tr>
316
- <td>Content</td>
317
- <td>This is longer content</td>
318
- <td>Content</td>
319
- <td>Content</td>
320
- </tr>
321
- <tr>
322
- <td>Content</td>
323
- <td>This is longer content</td>
324
- <td>Content</td>
325
- <td>Content</td>
326
- </tr>
327
- </tbody>
328
- </table>
329
- </ul>
330
- </div>
331
- </div>
332
-
333
-
334
-
335
- <br><br>
336
-
337
- <div class="row">
338
- <div class="four columns">
339
- <a name="progress-bars"></a>
340
- <h4>Progress Bars</h4>
341
- <p>A simple way to add a progress bar to your layout. You can edit the border radius by adding a class of <code>.radius</code> or <code>.round</code>. You can change the color by adding the classes <code>.secondary</code>, <code>.success</code>, or <code>.alert</code>. If you want to adjust the length, just use a number class. For example <code>class="progress four"</code> will make the progress bar 33% wide.</p>
342
- </div>
343
- <br>
344
- <div class="eight columns">
345
- <br>
346
- <div class="progress six"><span class="meter"></span></div>
347
- <div class="radius progress success eight"><span class="meter"></span></div>
348
- <div class="nice round progress alert ten"><span class="meter"></span></div>
349
- <div class="nice secondary progress"><span class="meter"></span></div>
350
- </div>
351
- </div>
352
-
353
- <br><br>
354
-
355
- <div class="row">
356
- <div class="four columns">
357
- <a name="pricing-tables"></a>
358
- <h4>Pricing Tables</h4>
359
- <p>We've created a simple structure that will help you quickly style a set of pricing tables using the grid.</p>
360
- </div>
361
- <div class="eight columns">
362
- <div class="row">
363
- <div class="four columns">
364
- <ul class="pricing-table">
365
- <li class="title">Standard</li>
366
- <li class="price">$99.99</li>
367
- <li class="description">
368
- Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus sit amet.
369
- </li>
370
- <li class="bullet-item">1 Database</li>
371
- <li class="bullet-item">5GB Storage</li>
372
- <li class="bullet-item">20 Users</li>
373
- <li class="cta-button">
374
- <a class="button" href="#">Buy it Now &raquo;</a>
375
- </li>
376
- </ul>
377
- </div>
378
- <div class="four columns">
379
- <ul class="pricing-table">
380
- <li class="title">Premium</li>
381
- <li class="price">$199.99</li>
382
- <li class="description">
383
- Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius.
384
- </li>
385
- <li class="bullet-item">2 Database</li>
386
- <li class="bullet-item">10GB Storage</li>
387
- <li class="bullet-item">40 Users</li>
388
- <li class="cta-button">
389
- <a class="button" href="#">Buy it Now &raquo;</a>
390
- </li>
391
- </ul>
392
- </div>
393
- <div class="four columns">
394
- <div class="pricing-table">
395
- <div class="title">Executive</div>
396
- <div class="price">$999.99</div>
397
- <div class="description">
398
- Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit.
399
- </div>
400
- <div class="bullet-item">Unlimited Database</div>
401
- <div class="bullet-item">Unlimited Storage</div>
402
- <div class="bullet-item">Unlimited Users</div>
403
- <div class="cta-button">
404
- <a class="button" href="#">Buy it Now &raquo;</a>
405
- </div>
406
- </div>
407
- </div>
408
- </div>
409
- </div>
410
- </div>
411
-
412
- <br><br>
413
-
414
- <div class="row">
415
- <div class="four columns">
416
- <a name="thumbs"></a>
417
- <h4>Image Thumbnails</h4>
418
- <p>When you need an image thumbnail that is slightly more styled than just a plain old image.</p>
419
- </div>
420
- <div class="four mobile-two columns">
421
- <a class="th" href="#"><img src="http://placehold.it/350x200"></a>
422
- </div>
423
- <div class="four mobile-two columns">
424
- <a class="th" href="#"><img src="http://placehold.it/350x200"></a>
425
- </div>
426
- </div>
427
-
428
- <br><br>
429
-
430
- <div class="row">
431
- <div class="four columns">
432
- <a name="video"></a>
433
- <h4>Video</h4>
434
- <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>
435
- </div>
436
- <br>
437
- <div class="eight columns">
438
- <dl class="tabs contained">
439
- <dd class="active"><a href="#video1">4:3</a></dd>
440
- <dd><a href="#video2">Widescreen</a></dd>
441
- <dd><a href="#video3">Vimeo</a></dd>
442
- </dl>
443
- <ul class="tabs-content contained">
444
- <li class="active" id="video1Tab">
445
- <div class="flex-video">
446
- <iframe width="420" height="315" src="http://www.youtube.com/embed/9otNWTHOJi8" frameborder="0" allowfullscreen></iframe>
447
- </div>
448
- 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.
449
- </li>
450
- <li id="video2Tab">
451
- <div class="flex-video widescreen">
452
- <iframe width="560" height="315" src="http://www.youtube.com/embed/N966cATFWjI" frameborder="0" allowfullscreen></iframe>
453
- </div>
454
- 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.
455
- </li>
456
- <li id="video3Tab">
457
- <div class="flex-video widescreen vimeo">
458
- <iframe src="http://player.vimeo.com/video/21762736?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
459
- </div>
460
- 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.
461
- </li>
462
- </ul>
463
- </div>
464
- </div>
465
-
466
- </div>
467
- </div>
468
-
469
- <!-- Included JS Files -->
470
- <script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
471
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
472
- <script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
473
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
474
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
475
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
476
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
477
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
478
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
479
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
480
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
481
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
482
- <script src="../vendor/assets/javascripts/foundation/app.js"></script>
483
- <script type="text/javascript">
484
- $(document).foundationTooltips({
485
- targetClass: '.has-tip-custom, .has-tip'
486
- });
487
-
488
- </script>
489
- </body>
490
- </html>