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
data/test/forms.html DELETED
@@ -1,371 +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 Forms 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 Forms Testing</h2>
25
- <hr />
26
- <dl class="sub-nav">
27
- <dt>Go to:</dt>
28
- <dd><a href="#row-layout">Row Layout</a></dd>
29
- <dd><a href="#fieldsets">Fieldsets</a></dd>
30
- <dd><a href="#collapsed">Collapsed Columns</a></dd>
31
- <dd><a href="#errors">Errors</a></dd>
32
- <dd><a href="#custom">Custom Inputs</a></dd>
33
- </dl>
34
- </div>
35
- </div>
36
-
37
- <!-- Test Foundation Components Here -->
38
- <div class="row">
39
- <div class="twelve columns">
40
- <a name="general"></a>
41
- <h3>Forms</h3>
42
- <h4 class="subheader">We set out in Foundation 3 to create an easy to handle, powerful, and versatile form layout system. A combination of form styles and the Foundation grid means you can do basically anything.</h4>
43
- <br>
44
-
45
- <div class="row">
46
- <div class="four columns">
47
- <a name="row-layout"></a>
48
- <h4>Row Layouts</h4>
49
- <p>Here's an example of a form layout controlled with rows and columns.</p>
50
- </div>
51
- <br>
52
- <div class="eight columns">
53
- <form>
54
- <label for="standard_input">This is a label.</label>
55
- <input type="text" placeholder="Standard Input" id="standard_input" />
56
-
57
- <label for="address_1">Address</label>
58
- <input type="text" class="twelve" placeholder="Street" id="address_1" />
59
- <div class="row">
60
- <div class="six columns">
61
- <input type="text" placeholder="City" />
62
- </div>
63
- <div class="three columns">
64
- <input type="text" placeholder="State" />
65
- </div>
66
- <div class="three columns">
67
- <input type="text" placeholder="ZIP" />
68
- </div>
69
- </div>
70
- <textarea placeholder="Message"></textarea>
71
- </form>
72
- <p>Sometimes you want a form with labels to the left of your inputs. Piece of cake. You can add a class of <code>.right</code> to a label to have it align to the right, and if your label is next to an input (in another column) adding a class of <code>.inline</code> will have it vertically center against an input.</p>
73
-
74
- <br>
75
-
76
- <form>
77
- <div class="row">
78
- <div class="two mobile-one columns">
79
- <label class="right inline" for="address_name">Address Name:</label>
80
- </div>
81
- <div class="ten mobile-three columns">
82
- <input type="text" placeholder="e.g. Home" class="eight" id="address_name" />
83
- </div>
84
- </div>
85
- <div class="row">
86
- <div class="two mobile-one columns">
87
- <label class="right inline" for="city">City:</label>
88
- </div>
89
- <div class="ten mobile-three columns">
90
- <input type="text" class="eight" id="city" />
91
- </div>
92
- </div>
93
- <div class="row">
94
- <div class="two mobile-one columns">
95
- <label class="right inline" for="zip">ZIP:</label>
96
- </div>
97
- <div class="ten mobile-three columns">
98
- <input type="text" class="three" id="zip" />
99
- </div>
100
- </div>
101
- </form>
102
- </div>
103
- </div>
104
-
105
- <br>
106
-
107
- <div class="row">
108
- <div class="four columns">
109
- <a name="fieldsets"></a>
110
- <h4>Fieldsets</h4>
111
- <p>Simple elements that can contain all or part of a form to create better division.</p>
112
- </div>
113
- <div class="eight columns">
114
- <form class="custom">
115
- <fieldset>
116
-
117
- <legend>Fieldset Name</legend>
118
-
119
- <label for="standard_input_2">This is a label.</label>
120
- <input type="text" placeholder="Standard Input" id="standard_input_2"/>
121
-
122
- <label for="address_2">Address</label>
123
- <input type="text" id="address_2" />
124
- <input type="text" class="six" />
125
-
126
- </fieldset>
127
- </form>
128
- </div>
129
- </div>
130
-
131
- <br>
132
-
133
- <div class="row">
134
- <div class="four columns">
135
- <a name="collapsed"></a>
136
- <h4>Labels and Actions with Collapsed Columns</h4>
137
- <p>Foundation forms support actions tied to buttons, and prefix / postfix labels. Essentially you can use a 'collapsed' row to create label / action / input combinations. Here are a few examples.</p>
138
- </div>
139
- <br>
140
- <div class="eight columns">
141
- <label for="input_prefix">Input with a prefix character</label>
142
- <div class="row">
143
- <div class="eight columns">
144
- <div class="row collapse">
145
- <div class="two mobile-one columns">
146
- <span class="prefix">#</span>
147
- </div>
148
- <div class="ten mobile-three columns">
149
- <input type="text" id="input_prefix" />
150
- </div>
151
- </div>
152
- </div>
153
- </div>
154
- <label for="input_postfix">Input with a postfix label</label>
155
- <div class="row">
156
- <div class="eight columns">
157
- <div class="row collapse">
158
- <div class="nine mobile-three columns">
159
- <input type="text" id="input_postfix" />
160
- </div>
161
- <div class="three mobile-one columns">
162
- <span class="postfix">.com</span>
163
- </div>
164
- </div>
165
- </div>
166
- </div>
167
- <label for="input_postfix_button">Input with a postfix action (button)</label>
168
- <div class="row">
169
- <div class="eight columns">
170
- <div class="row collapse">
171
- <div class="eight mobile-three columns">
172
- <input type="text" id="input_postfix_button" />
173
- </div>
174
- <div class="four mobile-one columns">
175
- <a class="button expand postfix">Search</a>
176
- </div>
177
- </div>
178
- </div>
179
- </div>
180
- </div>
181
- </div>
182
-
183
- <br><br>
184
-
185
- <div class="row">
186
- <div class="four columns">
187
- <a name="errors"></a>
188
- <h4>Error States</h4>
189
- <p>Foundation includes error states for labels, inputs and messaging that you can have your app generate programatically.
190
- </div>
191
- <br>
192
- <div class="eight columns">
193
- <div class="row">
194
- <div class="six columns">
195
- <label class="error" for="error">Field with Error</label>
196
- <input type="text" class="error" id="error" />
197
- <small class="error">Invalid entry</small>
198
- </div>
199
-
200
- <div class="six columns end error">
201
- <label for="error_2">Another Error</label>
202
- <input type="text" id="error_2" />
203
- <small>Invalid entry</small>
204
- </div>
205
- </div>
206
- </div>
207
- </div>
208
-
209
- <div class="row">
210
- <div class="four columns">
211
- <h4>Large Form Example</h4>
212
- <p>Here's an example of a really extensive form.</p>
213
- </div>
214
- <div class="eight columns">
215
- <form>
216
- <fieldset>
217
- <legend>Large Form Example</legend>
218
-
219
- <div class="row">
220
- <div class="five columns">
221
-
222
- <label for="name">Name</label>
223
- <input type="text" id="name" />
224
-
225
- <label for="occupation">Occupation</label>
226
- <input type="text" id="occupation" />
227
-
228
- <label for="twitter">Twitter</label>
229
- <div class="row collapse">
230
- <div class="two mobile-one columns">
231
- <span class="prefix">@</span>
232
- </div>
233
- <div class="ten mobile-three columns">
234
- <input type="text" placeholder="foundationzurb" id="twitter" />
235
- </div>
236
- </div>
237
-
238
- <label for="url">URL</label>
239
- <div class="row collapse">
240
- <div class="nine mobile-three columns">
241
- <input type="text" placeholder="foundation.zurb" id="url"/>
242
- </div>
243
- <div class="three mobile-one columns">
244
- <span class="postfix">.com</span>
245
- </div>
246
- </div>
247
-
248
- </div>
249
-
250
- <div class="five columns">
251
-
252
- <label class="error" for="error_3">Field with Error</label>
253
- <input type="text" class="error" id="error_3" />
254
- <small class="error">Invalid entry</small>
255
-
256
- <div class="error">
257
- <label for="error_4">Another Error</label>
258
- <input type="text" id="error_4" />
259
- <small>Invalid entry</small>
260
- </div>
261
-
262
- </div>
263
- </div>
264
-
265
- <label for="address_3">Address</label>
266
- <input type="text" placeholder="Street (e.g. 123 Awesome St.)" id="address_3" />
267
-
268
- <div class="row">
269
- <div class="six columns">
270
- <input type="text" placeholder="City" />
271
- </div>
272
- <div class="two columns">
273
- <select>
274
- <option>CA</option>
275
- </select>
276
- </div>
277
- <div class="four columns">
278
- <input type="text" placeholder="ZIP" />
279
- </div>
280
- </div>
281
-
282
- <textarea placeholder="Type something here..."></textarea>
283
- </fieldset>
284
- </form>
285
- </div>
286
- </div>
287
-
288
- <br><br>
289
-
290
- <div class="row">
291
- <div class="four columns">
292
- <a name="custom"></a>
293
- <h4>Custom Inputs</h4>
294
- <p>Custom form input types that are included with Foundation.</p>
295
- </div>
296
- <div class="eight columns">
297
- <form class="custom">
298
-
299
- <h5>Radio Buttons and Checkboxes</h5>
300
- <div class="row">
301
- <div class="four columns">
302
- <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 1</label>
303
- <label for="radio2"><input name="radio1" type="radio" id="radio2" style="display:none;"><span class="custom radio checked"></span> Radio Button 2</label>
304
- <label for="radio3"><input name="radio1" type="radio" id="radio3" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
305
- </div>
306
- <div class="four columns">
307
- <label for="radio4"><input name="radio2" type="radio" id="radio4"> Radio Button 1</label>
308
- <label for="radio5"><input name="radio2" CHECKED type="radio" id="radio5"> Radio Button 2</label>
309
- <label for="radio6"><input name="radio2" type="radio" id="radio6"> Radio Button 3</label>
310
- </div>
311
- <div class="four columns">
312
- <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>
313
- <label for="checkbox2"><input type="checkbox" id="checkbox2" checked style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
314
- <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3"> Label for Checkbox</label>
315
- </div>
316
- </div>
317
-
318
- <br />
319
- <h5>Dropdown / Select Elements</h5>
320
-
321
- <label for="customDropdown">Dropdown Label</label>
322
- <select style="display:none;" id="customDropdown">
323
- <option SELECTED>This is a dropdown</option>
324
- <option>This is another option</option>
325
- <option>Look, a third option</option>
326
- </select>
327
- <div class="custom dropdown">
328
- <a href="#" class="current">
329
- This is a dropdown
330
- </a>
331
- <a href="#" class="selector"></a>
332
- <ul>
333
- <li>This is a dropdown</li>
334
- <li>This is another option</li>
335
- <li>Look, a third option</li>
336
- </ul>
337
- </div>
338
-
339
- <label for="customDropdown2">Dropdown Label</label>
340
- <select id="customDropdown2">
341
- <option>This is a dropdown</option>
342
- <option SELECTED>This is another option</option>
343
- <option>Look, a third option</option>
344
- </select>
345
-
346
- </form>
347
- </div>
348
- </div>
349
-
350
- </div>
351
- </div>
352
-
353
- <!-- Included JS Files -->
354
- <script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
355
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
356
- <script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
357
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
358
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
359
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
360
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
361
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
362
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
363
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
364
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
365
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
366
- <script src="../vendor/assets/javascripts/foundation/app.js"></script>
367
- <script type="text/javascript">
368
- // Page-Specific JavaScript Goes Here
369
- </script>
370
- </body>
371
- </html>
data/test/grid.html DELETED
@@ -1,543 +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 Grid Testing</title>
12
-
13
- <!-- Included CSS Files -->
14
- <link rel="stylesheet" href="stylesheets/styles.css">
15
- <style type="text/css">
16
- .row.display {
17
- background: #F4F4F4;
18
- margin-bottom: 10px;
19
- }
20
- .row.display .column, .row.display .columns, .block-grid li {
21
- background: #E7E7E7;
22
- border: 1px solid #DDD;
23
- font-size: 11px;
24
- text-indent: 3px;
25
- padding-top: 6px;
26
- padding-bottom: 6px;
27
- }
28
- </style>
29
- <script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
30
-
31
- </head>
32
- <body>
33
-
34
- <div class="row">
35
- <div class="twelve columns">
36
- <p><a href="index.html">&laquo; Back</a></p>
37
- <h2>Foundation Grid Testing</h2>
38
- <hr />
39
- <dl class="sub-nav">
40
- <dt>Go to:</dt>
41
- <dd><a href="#base-ex">Grid Example</a></dd>
42
- <dd><a href="#offset">Offsets</a></dd>
43
- <dd><a href="#center">Centered</a></dd>
44
- <dd><a href="#order">Source Ordering</a></dd>
45
- <dd><a href="#mobile">Mobile Grid</a></dd>
46
- <dd><a href="#block">Block Grids</a></dd>
47
- </dl>
48
- </div>
49
- </div>
50
-
51
- <!-- Test Foundation Components Here -->
52
- <div class="row">
53
- <div class="twelve columns">
54
- <h3>The Grid</h3>
55
- <h4 class="subheader">Create powerful multi-device layouts quickly and easily with the 12-column, nestable Foundation 3 grid. If you're familiar with grid systems, you'll feel right at home.</h4>
56
-
57
- <br>
58
-
59
- <div class="row">
60
- <div class="four columns">
61
- <a name="base-ex"></a>
62
- <h4>Examples</h4>
63
- <p>These are examples of different ways to use the Foundation Grid. Foundation 3 uses <kbd>border-box</kbd> so that borders and padding do not effect the overall width.</p>
64
- <h5>Nesting</h5>
65
- <p>The grid allows for nesting down as far as you'd like, though at a certain point it will get absurd. You can use this nesting to create quite complex layouts, as well as some other tricks like form layouts or visual elements.</p>
66
- </div>
67
-
68
- <div class="eight columns">
69
- <div class="row display">
70
- <div class="four columns">
71
- .four.columns
72
- </div>
73
- <div class="four columns">
74
- .four.columns
75
- </div>
76
- <div class="four columns">
77
- .four.columns
78
- </div>
79
- </div>
80
- <div class="row display">
81
- <div class="three columns">
82
- .three.columns
83
- </div>
84
- <div class="six columns">
85
- .six.columns
86
- </div>
87
- <div class="three columns">
88
- .three.columns
89
- </div>
90
- </div>
91
- <div class="row display">
92
- <div class="two columns">
93
- .two.columns
94
- </div>
95
- <div class="eight columns">
96
- .eight.columns
97
- </div>
98
- <div class="two columns">
99
- .two.columns
100
- </div>
101
- </div>
102
- <div class="row display">
103
- <div class="one columns">
104
- .one
105
- </div>
106
- <div class="eleven columns">
107
- .eleven.columns
108
- </div>
109
- </div>
110
- <div class="row display">
111
- <div class="two columns">
112
- .two.columns
113
- </div>
114
- <div class="ten columns">
115
- .ten.columns
116
- </div>
117
- </div>
118
- <div class="row display">
119
- <div class="three columns">
120
- .three.columns
121
- </div>
122
- <div class="nine columns">
123
- .nine.columns
124
- </div>
125
- </div>
126
- <div class="row display">
127
- <div class="four columns">
128
- .four.columns
129
- </div>
130
- <div class="eight columns">
131
- .eight.columns
132
- </div>
133
- </div>
134
- <div class="row display">
135
- <div class="five columns">
136
- .five.columns
137
- </div>
138
- <div class="seven columns">
139
- .seven.columns
140
- </div>
141
- </div>
142
- <div class="row display">
143
- <div class="six columns">
144
- .six.columns
145
- </div>
146
- <div class="six columns">
147
- .six.columns
148
- </div>
149
- </div>
150
- <div class="row display">
151
- <div class="seven columns">
152
- .seven.columns
153
- </div>
154
- <div class="five columns">
155
- .five.columns
156
- </div>
157
- </div>
158
- <div class="row display">
159
- <div class="eight columns">
160
- .eight.columns
161
- </div>
162
- <div class="four columns">
163
- .four.columns
164
- </div>
165
- </div>
166
- <div class="row display">
167
- <div class="nine columns">
168
- .nine.columns
169
- </div>
170
- <div class="three columns">
171
- .three.columns
172
- </div>
173
- </div>
174
- <div class="row display">
175
- <div class="ten columns">
176
- .ten.columns
177
- </div>
178
- <div class="two columns">
179
- .two.columns
180
- </div>
181
- </div>
182
- <div class="row display">
183
- <div class="eleven columns">
184
- .eleven.columns
185
- </div>
186
- <div class="one columns">
187
- .one
188
- </div>
189
- </div>
190
- <div class="row display">
191
- <div class="twelve columns">
192
- .twelve.columns
193
- </div>
194
- </div>
195
- </div>
196
- </div>
197
-
198
- <br><br>
199
-
200
- <div class="row">
201
- <div class="four columns">
202
- <a name="offset"></a>
203
- <h4>Offsets</h4>
204
- <p>Offsets allow you to create additional space between columns in a row. Like the rest of the grid, they're nestable.</p>
205
- </div>
206
- <div class="eight columns">
207
- <div class="row display">
208
- <div class="one columns">
209
- .one
210
- </div>
211
- <div class="eleven columns">
212
- .eleven.columns
213
- </div>
214
- </div>
215
- <div class="row display">
216
- <div class="one columns">
217
- .one
218
- </div>
219
- <div class="ten columns offset-by-one">
220
- .ten.columns.offset-by-one
221
- </div>
222
- </div>
223
- <div class="row display">
224
- <div class="one columns">
225
- .one
226
- </div>
227
- <div class="nine columns offset-by-two">
228
- .nine.columns.offset-by-two
229
- </div>
230
- </div>
231
- <div class="row display">
232
- <div class="one columns">
233
- .one
234
- </div>
235
- <div class="eight columns offset-by-three">
236
- .eight.columns.offset-by-three
237
- </div>
238
- </div>
239
- <div class="row display">
240
- <div class="seven columns offset-by-five">
241
- .seven.columns.offset-by-five
242
- </div>
243
- </div>
244
- <div class="row display">
245
- <div class="six columns offset-by-six">
246
- .six.columns.offset-by-six
247
- </div>
248
- </div>
249
- <div class="row display">
250
- <div class="five columns offset-by-seven">
251
- .five.columns.offset-by-seven
252
- </div>
253
- </div>
254
- <div class="row display">
255
- <div class="four columns offset-by-eight">
256
- .four.columns.offset-by-eight
257
- </div>
258
- </div>
259
- </div>
260
- </div>
261
-
262
- <br><br>
263
-
264
- <div class="row">
265
- <div class="four columns">
266
- <a name="center"></a>
267
- <h4>Centered Columns</h4>
268
- <p>Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element itself.</p>
269
- </div>
270
- <div class="eight columns">
271
- <div class="row display">
272
- <div class="one columns centered">
273
- .one.columns.centered
274
- </div>
275
- </div>
276
- <div class="row display">
277
- <div class="two columns centered">
278
- .two.columns.centered
279
- </div>
280
- </div>
281
- <div class="row display">
282
- <div class="three columns centered">
283
- .three.columns.centered
284
- </div>
285
- </div>
286
- <div class="row display">
287
- <div class="four columns centered">
288
- .four.columns.centered
289
- </div>
290
- </div>
291
- <div class="row display">
292
- <div class="five columns centered">
293
- .five.columns.centered
294
- </div>
295
- </div>
296
- <div class="row display">
297
- <div class="six columns centered">
298
- .six.columns.centered
299
- </div>
300
- </div>
301
- <div class="row display">
302
- <div class="seven columns centered">
303
- .seven.columns.centered
304
- </div>
305
- </div>
306
- <div class="row display">
307
- <div class="eight columns centered">
308
- .eight.columns.centered
309
- </div>
310
- </div>
311
- <div class="row display">
312
- <div class="nine columns centered">
313
- .nine.columns.centered
314
- </div>
315
- </div>
316
- <div class="row display">
317
- <div class="ten columns centered">
318
- .ten.columns.centered
319
- </div>
320
- </div>
321
- <div class="row display">
322
- <div class="eleven columns centered">
323
- .eleven.columns.centered
324
- </div>
325
- </div>
326
- <div class="row display">
327
- <div class="twelve columns centered">
328
- .twelve.columns.centered
329
- </div>
330
- </div>
331
- </div>
332
- </div>
333
-
334
- <br><br>
335
-
336
- <div class="row">
337
- <div class="four columns">
338
- <a name="order"></a>
339
- <h4>Source Ordering</h4>
340
- <p>Using these source ordering classes, you can shift columns around on desktops and tablets. On phones, the grid will still be linearized into the order of the markup.</p>
341
- </div>
342
- <div class="eight columns">
343
- <div class="row display">
344
- <div class="two columns push-ten">
345
- .two.columns
346
- </div>
347
- <div class="ten columns pull-two">
348
- .ten.columns (last)
349
- </div>
350
- </div>
351
- <div class="row display">
352
- <div class="three columns push-nine">
353
- .three.columns
354
- </div>
355
- <div class="nine columns pull-three">
356
- .nine.columns (last)
357
- </div>
358
- </div>
359
- <div class="row display">
360
- <div class="four columns push-eight">
361
- .four.columns
362
- </div>
363
- <div class="eight columns pull-four">
364
- .eight.columns (last)
365
- </div>
366
- </div>
367
- <div class="row display">
368
- <div class="five columns push-seven">
369
- .five.columns
370
- </div>
371
- <div class="seven columns pull-five">
372
- .seven.columns (last)
373
- </div>
374
- </div>
375
- <div class="row display">
376
- <div class="six columns push-six">
377
- .six.columns
378
- </div>
379
- <div class="six columns pull-six">
380
- .six.columns (last)
381
- </div>
382
- </div>
383
- <div class="row display">
384
- <div class="seven columns push-five">
385
- .seven.columns
386
- </div>
387
- <div class="five columns pull-seven">
388
- .five.columns (last)
389
- </div>
390
- </div>
391
- <div class="row display">
392
- <div class="eight columns push-four">
393
- .eight.columns
394
- </div>
395
- <div class="four columns pull-eight">
396
- .four.columns (last)
397
- </div>
398
- </div>
399
- <div class="row display">
400
- <div class="nine columns push-three">
401
- .nine.columns
402
- </div>
403
- <div class="three columns pull-nine">
404
- .three.columns (last)
405
- </div>
406
- </div>
407
- <div class="row display">
408
- <div class="ten columns push-two">
409
- .ten.columns
410
- </div>
411
- <div class="two columns pull-ten">
412
- .two (last)
413
- </div>
414
- </div>
415
- </div>
416
- </div>
417
-
418
- <br><br>
419
-
420
- <div class="row">
421
- <div class="four columns">
422
- <a name="mobile"></a>
423
- <h4>Mobile Grid</h4>
424
- <p>When you're creating your layout you can optionally attach classes that take your existing grid elements and attach them to a phone grid.</p>
425
- <h5>Mobile Source Ordering</h5>
426
- <p>The syntax includes <code>.pull-one-mobile</code>, <code>.pull-two-mobile</code>, <code>.pull-three-mobile</code>, <code>.push-one-mobile</code>, <code>.push-two-mobile</code>, <code>.push-three-mobile</code>.</p>
427
- </div>
428
- <div class="eight columns">
429
- <div class="row display">
430
- <div class="three mobile-one columns">
431
- .three.mobile-one.columns
432
- </div>
433
- <div class="nine mobile-three columns">
434
- .nine.mobile-three.columns
435
- </div>
436
- </div>
437
- <div class="row display">
438
- <div class="six mobile-two columns">
439
- .six.mobile-two.columns
440
- </div>
441
- <div class="six mobile-two columns">
442
- .six.mobile-two.columns
443
- </div>
444
- </div>
445
- <div class="row display">
446
- <div class="nine mobile-three columns">
447
- .nine.mobile-three.columns
448
- </div>
449
- <div class="three mobile-one columns">
450
- .three.mobile-one.columns
451
- </div>
452
- </div>
453
- <div class="row display">
454
- <div class="six mobile-two columns">
455
- .six.mobile-two.columns
456
- </div>
457
- <div class="six mobile-two columns">
458
- .six.mobile-two.columns
459
- </div>
460
- </div>
461
- <div class="row display">
462
- <div class="nine mobile-three columns">
463
- .nine.mobile-three.columns
464
- </div>
465
- <div class="three mobile-one columns">
466
- .three.mobile-one.columns
467
- </div>
468
- </div>
469
- </div>
470
- </div>
471
-
472
- <br><br>
473
-
474
- <div class="row">
475
- <div class="four columns">
476
- <a name="block"></a>
477
- <h4>Block Grids</h4>
478
- <p>Block grids are <code>ul</code> with <code>.two-up</code>, <code>.three-up</code>, <code>.four-up</code> and <code>.five-up</code> styles. These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly.</p>
479
- </div>
480
- <div class="eight columns">
481
- <h6>Two-up</h6>
482
- <ul class="block-grid two-up">
483
- <li>Two-up element</li>
484
- <li>Two-up element</li>
485
- <li>Two-up element</li>
486
- <li>Two-up element</li>
487
- <li>Two-up element</li>
488
- </ul>
489
-
490
- <h6>Three-up</h6>
491
- <ul class="block-grid three-up">
492
- <li>Three-up element</li>
493
- <li>Three-up element</li>
494
- <li>Three-up element</li>
495
- <li>Three-up element</li>
496
- <li>Three-up element</li>
497
- </ul>
498
-
499
- <h6>Four-up (Mobile)</h6>
500
- <ul class="block-grid mobile four-up">
501
- <li>Four-up element</li>
502
- <li>Four-up element</li>
503
- <li>Four-up element</li>
504
- <li>Four-up element</li>
505
- <li>Four-up element</li>
506
- <li>Four-up element</li>
507
- </ul>
508
-
509
- <h6>Five-up</h6>
510
- <ul class="block-grid five-up mobile-three-up">
511
- <li>Five-up element</li>
512
- <li>Five-up element</li>
513
- <li>Five-up element</li>
514
- <li>Five-up element</li>
515
- <li>Five-up element</li>
516
- <li>Five-up element</li>
517
- <li>Five-up element</li>
518
- </ul>
519
- </div>
520
- </div>
521
-
522
- </div>
523
- </div>
524
-
525
- <!-- Included JS Files -->
526
- <script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
527
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
528
- <script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
529
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
530
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
531
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
532
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
533
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
534
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
535
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
536
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
537
- <script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
538
- <script src="../vendor/assets/javascripts/foundation/app.js"></script>
539
- <script type="text/javascript">
540
- // Page-Specific JavaScript Goes Here
541
- </script>
542
- </body>
543
- </html>