Browse files

removed marketing site

  • Loading branch information...
1 parent acfb652 commit 4f9427e9dd88186806ca0dfab757d6ba7b19575c @mhayes mhayes committed Aug 1, 2012
Showing with 0 additions and 14,999 deletions.
  1. +0 −58 config/assets.yml
  2. +0 −63 marketing/404.php
  3. +0 −217 marketing/about.php
  4. +0 −95 marketing/cache/navigation_bar.html
  5. +0 −71 marketing/case-flite.php
  6. +0 −61 marketing/case-reel.php
  7. +0 −63 marketing/case-soapbox.php
  8. +0 −62 marketing/case-swizzle.php
  9. +0 −62 marketing/case-zurbjobs.php
  10. +0 −9 marketing/config.rb
  11. +0 −169 marketing/docs/buttons.php
  12. +0 −262 marketing/docs/elements.php
  13. +0 −122 marketing/docs/f2/buttons.php
  14. +0 −278 marketing/docs/f2/forms.php
  15. +0 −127 marketing/docs/f2/gems.php
  16. +0 −469 marketing/docs/f2/grid.php
  17. BIN marketing/docs/f2/images/check.png
  18. BIN marketing/docs/f2/images/error.png
  19. BIN marketing/docs/f2/images/misc/button-gloss.png
  20. BIN marketing/docs/f2/images/misc/button-overlay.png
  21. BIN marketing/docs/f2/images/misc/custom-form-sprites.png
  22. BIN marketing/docs/f2/images/misc/input-bg-outset.png
  23. BIN marketing/docs/f2/images/misc/input-bg.png
  24. BIN marketing/docs/f2/images/misc/modal-gloss.png
  25. BIN marketing/docs/f2/images/misc/table-sorter.png
  26. BIN marketing/docs/f2/images/orbit/bullets.jpg
  27. BIN marketing/docs/f2/images/orbit/left-arrow.png
  28. BIN marketing/docs/f2/images/orbit/loading.gif
  29. BIN marketing/docs/f2/images/orbit/mask-black.png
  30. BIN marketing/docs/f2/images/orbit/pause-black.png
  31. BIN marketing/docs/f2/images/orbit/right-arrow.png
  32. BIN marketing/docs/f2/images/orbit/rotator-black.png
  33. BIN marketing/docs/f2/images/orbit/timer-black.png
  34. +0 −86 marketing/docs/f2/includes/_documentation_foot.php
  35. +0 −43 marketing/docs/f2/includes/_documentation_head.php
  36. +0 −18 marketing/docs/f2/includes/_download.php
  37. +0 −126 marketing/docs/f2/index.php
  38. +0 −90 marketing/docs/f2/javascripts/app.js
  39. +0 −510 marketing/docs/f2/javascripts/jquery.customforms.js
  40. +0 −4 marketing/docs/f2/javascripts/jquery.min.js
  41. +0 −636 marketing/docs/f2/javascripts/jquery.orbit-1.4.0.js
  42. +0 −2 marketing/docs/f2/javascripts/jquery.placeholder.min.js
  43. +0 −153 marketing/docs/f2/javascripts/jquery.reveal.js
  44. +0 −157 marketing/docs/f2/javascripts/jquery.tooltips.js
  45. +0 −4 marketing/docs/f2/javascripts/modernizr.foundation.js
  46. +0 −127 marketing/docs/f2/layout.php
  47. +0 −84 marketing/docs/f2/orbit.php
  48. +0 −179 marketing/docs/f2/presentation.css
  49. +0 −5 marketing/docs/f2/presentation.js
  50. +0 −164 marketing/docs/f2/qa.php
  51. +0 −87 marketing/docs/f2/reveal.php
  52. +0 −29 marketing/docs/f2/stylesheets/app.css
  53. +0 −134 marketing/docs/f2/stylesheets/forms.css
  54. +0 −138 marketing/docs/f2/stylesheets/globals.css
  55. +0 −127 marketing/docs/f2/stylesheets/grid.css
  56. +0 −12 marketing/docs/f2/stylesheets/ie.css
  57. +0 −235 marketing/docs/f2/stylesheets/mobile.css
  58. +0 −231 marketing/docs/f2/stylesheets/orbit.css
  59. +0 −98 marketing/docs/f2/stylesheets/reveal.css
  60. +0 −61 marketing/docs/f2/stylesheets/typography.css
  61. +0 −420 marketing/docs/f2/stylesheets/ui.css
  62. +0 −461 marketing/docs/f2/ui.php
  63. +0 −351 marketing/docs/forms.php
  64. +0 −306 marketing/docs/gem-install.php
  65. +0 −500 marketing/docs/grid.php
  66. +0 −92 marketing/docs/includes/_documentation_foot.php
  67. +0 −104 marketing/docs/includes/_documentation_head.php
  68. +0 −18 marketing/docs/includes/_download.php
  69. +0 −92 marketing/docs/index.php
  70. +0 −59 marketing/docs/installing.php
  71. +0 −208 marketing/docs/navigation.php
  72. +0 −122 marketing/docs/orbit.php
  73. +0 −5 marketing/docs/presentation.js
  74. +0 −82 marketing/docs/reveal.php
  75. +0 −176 marketing/docs/support.php
  76. +0 −135 marketing/docs/tabs.php
  77. +0 −177 marketing/docs/typography.php
  78. +0 −281 marketing/download.php
  79. BIN marketing/files/f3/foundation-monster-1024x768.png
  80. BIN marketing/files/f3/foundation-monster-1440x900.png
  81. BIN marketing/files/f3/foundation-monster-1680x1050.png
  82. BIN marketing/files/f3/foundation-monster-2880x1800.png
  83. BIN marketing/files/f3/foundation-monster-640x960.png
  84. BIN marketing/files/f3/foundation-monster-th.png
  85. BIN marketing/files/f3/stretch-yeti-1024x768.png
  86. BIN marketing/files/f3/stretch-yeti-1440x900.png
  87. BIN marketing/files/f3/stretch-yeti-1680x1050.png
  88. BIN marketing/files/f3/stretch-yeti-2880x1800.png
  89. BIN marketing/files/f3/stretch-yeti-640x960.png
  90. BIN marketing/files/f3/stretch-yeti-th.png
  91. BIN marketing/files/f3/tiny-yeti-1024x768.png
  92. BIN marketing/files/f3/tiny-yeti-1440x900.png
  93. BIN marketing/files/f3/tiny-yeti-1680x1050.png
  94. BIN marketing/files/f3/tiny-yeti-2880x1800.png
  95. BIN marketing/files/f3/tiny-yeti-640x960.png
  96. BIN marketing/files/f3/tiny-yeti-th.png
  97. BIN marketing/files/f3/tools-1024x768.png
  98. BIN marketing/files/f3/tools-1440x900.png
  99. BIN marketing/files/f3/tools-1680x1050.png
  100. BIN marketing/files/f3/tools-2880x1800.png
  101. BIN marketing/files/f3/tools-640x960.png
  102. BIN marketing/files/f3/tools-th.png
  103. BIN marketing/files/f3/yeti-lab-1024x768.png
  104. BIN marketing/files/f3/yeti-lab-1440x900.png
  105. BIN marketing/files/f3/yeti-lab-1680x1050.png
  106. BIN marketing/files/f3/yeti-lab-2880x1800.png
  107. BIN marketing/files/f3/yeti-lab-640x960.png
  108. BIN marketing/files/f3/yeti-lab-th.png
  109. BIN marketing/files/f3/yeti-moon-1024x768.png
  110. BIN marketing/files/f3/yeti-moon-1440x900.png
  111. BIN marketing/files/f3/yeti-moon-1680x1050.png
  112. BIN marketing/files/f3/yeti-moon-2880x1800.png
  113. BIN marketing/files/f3/yeti-moon-640x960.png
  114. BIN marketing/files/f3/yeti-moon-th.png
  115. BIN marketing/files/f3/yeti-vortex-1024x768.png
  116. BIN marketing/files/f3/yeti-vortex-1440x900.png
  117. BIN marketing/files/f3/yeti-vortex-1680x1050.png
  118. BIN marketing/files/f3/yeti-vortex-2880x1800.png
  119. BIN marketing/files/f3/yeti-vortex-640x960.png
  120. BIN marketing/files/f3/yeti-vortex-th.png
  121. BIN marketing/files/f3/yetified-3-1024x768.png
  122. BIN marketing/files/f3/yetified-3-1440x900.png
  123. BIN marketing/files/f3/yetified-3-1680x1050.png
  124. BIN marketing/files/f3/yetified-3-2880x1800.png
  125. BIN marketing/files/f3/yetified-3-640x960.png
  126. BIN marketing/files/f3/yetified-3-th.png
  127. BIN marketing/files/foundation-3.0.5.zip
  128. BIN marketing/files/foundation-3.0.6.zip
  129. BIN marketing/files/foundation-3.0.7.zip
  130. BIN marketing/files/foundation-download-2.1.2.zip
  131. BIN marketing/files/foundation-download-2.1.3.zip
  132. BIN marketing/files/foundation-download-2.1.4.zip
  133. BIN marketing/files/foundation-download-2.1.5.zip
  134. BIN marketing/files/foundation-download-2.2.1.zip
  135. BIN marketing/files/foundation-download-2.2.zip
  136. BIN marketing/files/foundation-psd-templates.zip
  137. BIN marketing/files/foundation3.zip
  138. BIN marketing/files/lurking-yeti-1024x768.jpg
  139. BIN marketing/files/lurking-yeti-1440x900.jpg
  140. BIN marketing/files/lurking-yeti-1680x1050.jpg
  141. BIN marketing/files/lurking-yeti-400x300.jpg
  142. BIN marketing/files/lurking-yeti-640x960.jpg
  143. BIN marketing/files/tropical-yeti-1024x768.jpg
  144. BIN marketing/files/tropical-yeti-1440x900.jpg
  145. BIN marketing/files/tropical-yeti-1680x1050.jpg
  146. BIN marketing/files/tropical-yeti-400x300.jpg
  147. BIN marketing/files/tropical-yeti-640x960.jpg
  148. BIN marketing/files/yeti-dance-1024x768.jpg
  149. BIN marketing/files/yeti-dance-1440x900.jpg
  150. BIN marketing/files/yeti-dance-1680x1050.jpg
  151. BIN marketing/files/yeti-dance-400x300.jpg
  152. BIN marketing/files/yeti-dance-640x960.jpg
  153. BIN marketing/files/yeti-love-1024x768.jpg
  154. BIN marketing/files/yeti-love-1440x900.jpg
  155. BIN marketing/files/yeti-love-1680x1050.jpg
  156. BIN marketing/files/yeti-love-400x300.jpg
  157. BIN marketing/files/yeti-love-640x960.jpg
  158. BIN marketing/files/yeti.zip
  159. +0 −24 marketing/github.js
  160. +0 −102 marketing/grid-example1.php
  161. +0 −89 marketing/grid-example2.php
  162. +0 −73 marketing/grid-example3.php
  163. +0 −59 marketing/grid.php
  164. +0 −73 marketing/humans.txt
  165. BIN marketing/images/404.png
  166. BIN marketing/images/advanced-th.png
  167. BIN marketing/images/case-flite-1.jpg
  168. BIN marketing/images/case-flite-2.png
  169. BIN marketing/images/case-reel-1.jpg
  170. BIN marketing/images/case-soapbox-1.jpg
  171. BIN marketing/images/case-soapbox-2.jpg
  172. BIN marketing/images/case-study-bg.png
  173. BIN marketing/images/case-study-flite.png
  174. BIN marketing/images/case-study-reel.png
  175. BIN marketing/images/case-study-soapbox.png
  176. BIN marketing/images/case-study-swizzle.png
  177. BIN marketing/images/case-swizzle-1.jpg
  178. BIN marketing/images/case-swizzle-2.jpg
  179. BIN marketing/images/case-zurbjobs-1.jpg
  180. BIN marketing/images/device-bg-retina.png
  181. BIN marketing/images/device-bg.png
  182. BIN marketing/images/favicons/apple-touch-icon-114x114-precomposed.png
  183. BIN marketing/images/favicons/apple-touch-icon-144x144-precomposed.png
  184. BIN marketing/images/favicons/apple-touch-icon-72x72-precomposed.png
  185. BIN marketing/images/favicons/apple-touch-icon-precomposed.png
  186. BIN marketing/images/favicons/favicon.ico
  187. BIN marketing/images/feature-grid-1.png
  188. BIN marketing/images/feature-grid-2.png
  189. BIN marketing/images/feature-grid-3.png
  190. BIN marketing/images/feature-grid-4.png
  191. BIN marketing/images/feature-mobile-1.jpg
  192. BIN marketing/images/feature-mobile-2.png
  193. BIN marketing/images/feature-mobile-3.png
  194. BIN marketing/images/feature-mobile-4.png
  195. BIN marketing/images/feature-prototyping-1.jpg
  196. BIN marketing/images/feature-prototyping-2.png
  197. BIN marketing/images/feature-prototyping-3.png
  198. BIN marketing/images/feature-prototyping-4.png
  199. BIN marketing/images/feature-th.png
  200. BIN marketing/images/featureDevices-retina.png
  201. BIN marketing/images/featureDevices.png
  202. BIN marketing/images/featureGrid-retina.png
  203. BIN marketing/images/featureGrid.png
  204. BIN marketing/images/featurePrototype-retina.png
  205. BIN marketing/images/featurePrototype.png
  206. +0 −1 marketing/images/foundation
  207. BIN marketing/images/homepageImgAdvanced-retina.png
  208. BIN marketing/images/homepageImgAdvanced.png
  209. BIN marketing/images/homepageImgFeatures-retina.png
  210. BIN marketing/images/homepageImgFeatures.png
  211. BIN marketing/images/homepageImgSass-retina.png
  212. BIN marketing/images/homepageImgSass.png
  213. BIN marketing/images/icon-all-customers.png
  214. BIN marketing/images/orbit-demo/demo1.jpg
  215. BIN marketing/images/orbit-demo/demo2.jpg
  216. BIN marketing/images/orbit-demo/demo3.jpg
  217. BIN marketing/images/orbit-demo/slider-background.jpg
  218. BIN marketing/images/plus-toggle-2-retina.png
  219. BIN marketing/images/sass-th.png
  220. BIN marketing/images/usingAxe.png
  221. BIN marketing/images/usingFelix.png
  222. BIN marketing/images/usingFlite.png
  223. BIN marketing/images/usingLosAlamos.png
  224. BIN marketing/images/usingMozilla.png
  225. BIN marketing/images/usingPixar.png
  226. BIN marketing/images/usingReel.png
  227. BIN marketing/images/usingSoapbox.png
  228. BIN marketing/images/usingSpur.png
  229. BIN marketing/images/usingZURB.png
  230. BIN marketing/images/yeti9000.png
  231. +0 −73 marketing/includes/_footer.php
  232. +0 −84 marketing/includes/_header.php
  233. +0 −171 marketing/index.php
  234. +0 −240 marketing/javascripts/download.js
  235. +0 −1 marketing/javascripts/foundation
  236. +0 −105 marketing/javascripts/foundation.top-bar.js
  237. +0 −433 marketing/jswipe.js
  238. +0 −144 marketing/migration.php
  239. +0 −69 marketing/mobile-example1.php
  240. +0 −42 marketing/mobile-example2.php
  241. +0 −94 marketing/mobile-example3.php
  242. +0 −59 marketing/mobile.php
  243. +0 −108 marketing/prototype-example1.php
  244. +0 −102 marketing/prototype-example2.php
  245. +0 −140 marketing/prototype-example3.php
  246. +0 −60 marketing/prototyping.php
  247. +0 −1 marketing/public
  248. +0 −4 marketing/robots.txt
  249. +0 −402 marketing/sass/docs/presentation.scss
  250. +0 −1 marketing/sass/index.scss
  251. +0 −225 marketing/sass/presentation.scss
  252. +0 −1,243 marketing/stylesheets/docs/presentation.css
  253. BIN marketing/stylesheets/fonts/OpenSans-Bold-webfont.eot
  254. +0 −146 marketing/stylesheets/fonts/OpenSans-Bold-webfont.svg
  255. BIN marketing/stylesheets/fonts/OpenSans-Bold-webfont.ttf
  256. BIN marketing/stylesheets/fonts/OpenSans-Bold-webfont.woff
  257. BIN marketing/stylesheets/fonts/OpenSans-BoldItalic-webfont.eot
  258. +0 −146 marketing/stylesheets/fonts/OpenSans-BoldItalic-webfont.svg
  259. BIN marketing/stylesheets/fonts/OpenSans-BoldItalic-webfont.ttf
  260. BIN marketing/stylesheets/fonts/OpenSans-BoldItalic-webfont.woff
  261. BIN marketing/stylesheets/fonts/OpenSans-ExtraBold-webfont.eot
  262. +0 −146 marketing/stylesheets/fonts/OpenSans-ExtraBold-webfont.svg
  263. BIN marketing/stylesheets/fonts/OpenSans-ExtraBold-webfont.ttf
  264. BIN marketing/stylesheets/fonts/OpenSans-ExtraBold-webfont.woff
  265. BIN marketing/stylesheets/fonts/OpenSans-ExtraBoldItalic-webfont.eot
  266. +0 −146 marketing/stylesheets/fonts/OpenSans-ExtraBoldItalic-webfont.svg
  267. BIN marketing/stylesheets/fonts/OpenSans-ExtraBoldItalic-webfont.ttf
  268. BIN marketing/stylesheets/fonts/OpenSans-ExtraBoldItalic-webfont.woff
  269. BIN marketing/stylesheets/fonts/OpenSans-Italic-webfont.eot
  270. +0 −146 marketing/stylesheets/fonts/OpenSans-Italic-webfont.svg
  271. BIN marketing/stylesheets/fonts/OpenSans-Italic-webfont.ttf
  272. BIN marketing/stylesheets/fonts/OpenSans-Italic-webfont.woff
  273. BIN marketing/stylesheets/fonts/OpenSans-Light-webfont.eot
  274. +0 −146 marketing/stylesheets/fonts/OpenSans-Light-webfont.svg
  275. BIN marketing/stylesheets/fonts/OpenSans-Light-webfont.ttf
  276. BIN marketing/stylesheets/fonts/OpenSans-Light-webfont.woff
  277. BIN marketing/stylesheets/fonts/OpenSans-LightItalic-webfont.eot
  278. +0 −146 marketing/stylesheets/fonts/OpenSans-LightItalic-webfont.svg
  279. BIN marketing/stylesheets/fonts/OpenSans-LightItalic-webfont.ttf
  280. BIN marketing/stylesheets/fonts/OpenSans-LightItalic-webfont.woff
  281. BIN marketing/stylesheets/fonts/OpenSans-Regular-webfont.eot
  282. +0 −146 marketing/stylesheets/fonts/OpenSans-Regular-webfont.svg
  283. BIN marketing/stylesheets/fonts/OpenSans-Regular-webfont.ttf
  284. BIN marketing/stylesheets/fonts/OpenSans-Regular-webfont.woff
  285. BIN marketing/stylesheets/fonts/OpenSans-Semibold-webfont.eot
  286. +0 −146 marketing/stylesheets/fonts/OpenSans-Semibold-webfont.svg
  287. BIN marketing/stylesheets/fonts/OpenSans-Semibold-webfont.ttf
  288. BIN marketing/stylesheets/fonts/OpenSans-Semibold-webfont.woff
  289. BIN marketing/stylesheets/fonts/OpenSans-SemiboldItalic-webfont.eot
  290. +0 −146 marketing/stylesheets/fonts/OpenSans-SemiboldItalic-webfont.svg
  291. BIN marketing/stylesheets/fonts/OpenSans-SemiboldItalic-webfont.ttf
  292. BIN marketing/stylesheets/fonts/OpenSans-SemiboldItalic-webfont.woff
  293. BIN marketing/stylesheets/fonts/foundation-icons-general-enclosed.eot
Sorry, we could not display the entire diff because too many files (304) changed.
View
58 config/assets.yml
@@ -1,58 +0,0 @@
-compress_assets: on
-gzip_assets: off
-
-javascripts:
- jquery:
- - vendor/assets/javascripts/foundation/jquery.js
-
- foundation:
- - vendor/assets/javascripts/foundation/modernizr.foundation.js
- - vendor/assets/javascripts/foundation/jquery.placeholder.js
- - vendor/assets/javascripts/foundation/jquery.foundation.alerts.js
- - vendor/assets/javascripts/foundation/jquery.foundation.accordion.js
- - vendor/assets/javascripts/foundation/jquery.foundation.buttons.js
- - vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js
- - vendor/assets/javascripts/foundation/jquery.foundation.forms.js
- - vendor/assets/javascripts/foundation/jquery.foundation.tabs.js
- - vendor/assets/javascripts/foundation/jquery.foundation.navigation.js
- - vendor/assets/javascripts/foundation/jquery.foundation.reveal.js
- - vendor/assets/javascripts/foundation/jquery.foundation.orbit.js
-
- marketing:
- - vendor/assets/javascripts/foundation/jquery.js
- - vendor/assets/javascripts/foundation/modernizr.foundation.js
- - vendor/assets/javascripts/foundation/jquery.placeholder.js
- - vendor/assets/javascripts/foundation/jquery.foundation.alerts.js
- - vendor/assets/javascripts/foundation/jquery.foundation.accordion.js
- - vendor/assets/javascripts/foundation/jquery.foundation.buttons.js
- - vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js
- - vendor/assets/javascripts/foundation/jquery.foundation.forms.js
- - vendor/assets/javascripts/foundation/jquery.foundation.tabs.js
- - vendor/assets/javascripts/foundation/jquery.foundation.navigation.js
- - vendor/assets/javascripts/foundation/jquery.foundation.reveal.js
- - vendor/assets/javascripts/foundation/jquery.foundation.orbit.js
- - vendor/assets/javascripts/foundation/jquery.offcanvas.js
- - vendor/assets/javascripts/foundation/app.js
- - marketing/javascripts/foundation.top-bar.js
- - marketing/jswipe.js
- - marketing/swipe.js
- - marketing/javascripts/download.js
- - marketing/github.js
-
- marketing_docs:
- - vendor/assets/javascripts/foundation/jquery.js
- - vendor/assets/javascripts/foundation/modernizr.foundation.js
- - vendor/assets/javascripts/foundation/jquery.placeholder.js
- - vendor/assets/javascripts/foundation/jquery.foundation.alerts.js
- - vendor/assets/javascripts/foundation/jquery.foundation.accordion.js
- - vendor/assets/javascripts/foundation/jquery.foundation.buttons.js
- - vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js
- - vendor/assets/javascripts/foundation/jquery.foundation.forms.js
- - vendor/assets/javascripts/foundation/jquery.foundation.tabs.js
- - vendor/assets/javascripts/foundation/jquery.foundation.navigation.js
- - vendor/assets/javascripts/foundation/jquery.foundation.reveal.js
- - vendor/assets/javascripts/foundation/jquery.foundation.orbit.js
- - vendor/assets/javascripts/foundation/jquery.offcanvas.js
- - vendor/assets/javascripts/foundation/app.js
- - marketing/javascripts/foundation.top-bar.js
- - marketing/docs/presentation.js
View
63 marketing/404.php
@@ -1,63 +0,0 @@
-<? $page_title = "404 Error, the Yeti Couldn't Find What You Were Looking For" ?>
-<?php include("includes/_header.php"); ?>
-
- <section id="mainContent">
-
- <div class="row">
- <div class="twelve columns">
- <img src="images/404.png" style="margin-top: 30px; margin-left: -3px;" alt="404, page doesn't exist">
- <h1 class="text-center">Hmm, we couldn't find what you were looking for.</h1>
- <h4 class="subheader text-center">Don't mind our three eyes, we'll just be watching you until you move on.</h4>
- </div>
- </div>
- <br><br><br><br><br>
- <hr>
- <div class="row">
- <div class="four columns">
- <h3>Were you looking for a case study?</h3>
- <p>If so, here's some links to our current case studies so you can find out how we and others are using Foundation.</p>
-
- <ul class="side-nav">
- <li><a href="case-flite.php">Flite Case Study &rarr;</a></li>
- <li><a href="case-reel.php">Reel Case Study &rarr;</a></li>
- <li><a href="case-swizzle.php">Swizzle Case Study &rarr;</a></li>
- <li><a href="case-soapbox.php">ZURBsoapbox Case Study &rarr;</a></li>
- <li><a href="case-zurbjobs.php">ZURBjobs Case Study &rarr;</a></li>
- </ul>
- </div>
-
- <div class="four columns">
- <h3>Were you looking for documentation?</h3>
- <p>Here's the full list of doc pages. Whatever you're trying to do in Foundation, these should help you do it.</p>
-
- <ul class="side-nav">
- <li><a href="docs/installing.php">CSS Version &rarr;</a></li>
- <li><a href="docs/gem-install.php">Sass or Ruby Version &rarr;</a></li>
- <li><a href="docs/grid.php">The Grid &rarr;</a></li>
- <li><a href="docs/typography.php">Typography &rarr;</a></li>
- <li><a href="docs/buttons.php">Buttons &rarr;</a></li>
- <li><a href="docs/forms.php">Forms &rarr;</a></li>
- <li><a href="docs/navigation.php">Navigation &rarr;</a></li>
- <li><a href="docs/tabs.php">Tabs &rarr;</a></li>
- <li><a href="docs/elements.php">Elements &rarr;</a></li>
- <li><a href="docs/orbit.php">Orbit &rarr;</a></li>
- <li><a href="docs/reveal.php">Reveal &rarr;</a></li>
- <li><a href="docs/support.php">Support &rarr;</a></li>
- </ul>
- </div>
-
- <div class="four columns">
- <h3>Not what you needed? Hmmm&#8230;</h3>
- <p>If none of this is what you're looking for, here are some other resources to get you on the right path.</p>
-
- <ul class="side-nav">
- <li><a href="https://groups.google.com/forum/?fromgroups#!forum/foundation-framework-">Google Group &rarr;</a></li>
- <li><a href="http://twitter.com/foundationzurb">Ping us on Twitter &rarr;</a></li>
- <li><a href="mailto:foundation@zurb.com">Email Us Directly &rarr;</a></li>
- </ul>
- </div>
- </div>
- </section>
-
-
-<?php include("includes/_footer.php"); ?>
View
217 marketing/about.php
@@ -1,217 +0,0 @@
-<? $page_title = "Learn More and Get Goodies" ?>
-<?php include("includes/_header.php"); ?>
-
- <header>
- <div class="row">
- <div class="twelve columns">
- <h1>About Foundation</h1>
- <h4>Info, goodies and more about our favorite framework. We might be biased.</h4>
- </div>
- </div>
- </header>
-
- <section id="mainContent">
-
- <div class="row">
- <div class="four columns">
- <h3>Why build it?</h3>
- <p>We do a lot of front-end code, and Foundation helps us do it faster and better. We also want people to have the same tools we have to design, and we think Foundation helps with that.</p>
- </div>
- <div class="four columns">
- <h3>What's the catch?</h3>
- <p>If you read the EULA you'll see we have exclusive rights to your first-born. Don't worry, we'll only use them for good, not evil. Just kidding. No catch. This is all under the MIT license.</p>
- </div>
- <div class="four columns">
- <h3>Something's wrong!</h3>
- <p>So tell us! File it on <a href="http://www.github.com/zurb/foundation">Github</a> or simply <a href="mailto:foundation@zurb.com">email us</a>. We crave feedback, and we want to keep polishing Foundation until it's the best, most badass code framework you've ever seen.</p>
- </div>
- </div>
-
- <div class="row">
- <div class="twelve columns">
- <hr><br>
- </div>
- </div>
-
- <div class="row">
- <div class="twelve columns">
- <h3>Why a yeti?</h3>
- <p>We just really like yetis, and his vaguely nerdy, icy blue visage seemed to fit. If you like the yeti even slightly as much as we do, we've prepared some fun goodies for you. Think how great it would be to see that furry, confident mug on your desktop or phone!</p>
- </div>
- </div>
-
- <div class="row">
- <div class="twelve columns hide-for-small">
- <div class="row">
- <div class="three columns">
- <img style="border: solid 1px #eee;" src="files/f3/foundation-monster-th.png" />
- <ul class="link-list"><li>
- <li><a href="files/f3/foundation-monster-1024x768.png">1024x768</a></li>
- <li><a href="files/f3/foundation-monster-1440x900.png">1440x900</a></li>
- <li><a href="files/f3/foundation-monster-1680x1050.png">1680x1050</a></li>
- <li><a href="files/f3/foundation-monster-2880x1800.png">2880x1800</a></li>
- </ul>
- </div>
- <div class="three columns">
- <img style="border: solid 1px #eee;" src="files/f3/stretch-yeti-th.png" />
- <ul class="link-list"><li>
- <li><a href="files/f3/stretch-yeti-1024x768.png">1024x768</a></li>
- <li><a href="files/f3/stretch-yeti-1440x900.png">1440x900</a></li>
- <li><a href="files/f3/stretch-yeti-1680x1050.png">1680x1050</a></li>
- <li><a href="files/f3/stretch-yeti-2880x1800.png">2880x1800</a></li>
- </ul>
- </div>
- <div class="three columns">
- <img style="border: solid 1px #eee;" src="files/f3/tiny-yeti-th.png" />
- <ul class="link-list"><li>
- <li><a href="files/f3/tiny-yeti-1024x768.png">1024x768</a></li>
- <li><a href="files/f3/tiny-yeti-1440x900.png">1440x900</a></li>
- <li><a href="files/f3/tiny-yeti-1680x1050.png">1680x1050</a></li>
- <li><a href="files/f3/tiny-yeti-2880x1800.png">2880x1800</a></li>
- </ul>
- </div>
- <div class="three columns">
- <img style="border: solid 1px #eee;" src="files/f3/tools-th.png" />
- <ul class="link-list"><li>
- <li><a href="files/f3/tools-1024x768.png">1024x768</a></li>
- <li><a href="files/f3/tools-1440x900.png">1440x900</a></li>
- <li><a href="files/f3/tools-1680x1050.png">1680x1050</a></li>
- <li><a href="files/f3/tools-2880x1800.png">2880x1800</a></li>
- </ul>
- </div>
- </div>
-
- <div class="row">
- <div class="three columns">
- <img style="border: solid 1px #eee;" src="files/f3/yeti-lab-th.png" />
- <ul class="link-list"><li>
- <li><a href="files/f3/yeti-lab-1024x768.png">1024x768</a></li>
- <li><a href="files/f3/yeti-lab-1440x900.png">1440x900</a></li>
- <li><a href="files/f3/yeti-lab-1680x1050.png">1680x1050</a></li>
- <li><a href="files/f3/yeti-lab-2880x1800.png">2880x1800</a></li>
- </ul>
- </div>
- <div class="three columns">
- <img style="border: solid 1px #eee;" src="files/f3/yeti-moon-th.png" />
- <ul class="link-list"><li>
- <li><a href="files/f3/yeti-moon-1024x768.png">1024x768</a></li>
- <li><a href="files/f3/yeti-moon-1440x900.png">1440x900</a></li>
- <li><a href="files/f3/yeti-moon-1680x1050.png">1680x1050</a></li>
- <li><a href="files/f3/yeti-moon-2880x1800.png">2880x1800</a></li>
- </ul>
- </div>
- <div class="three columns">
- <img style="border: solid 1px #eee;" src="files/f3/yeti-vortex-th.png" />
- <ul class="link-list"><li>
- <li><a href="files/f3/yeti-vortex-1024x768.png">1024x768</a></li>
- <li><a href="files/f3/yeti-vortex-1440x900.png">1440x900</a></li>
- <li><a href="files/f3/yeti-vortex-1680x1050.png">1680x1050</a></li>
- <li><a href="files/f3/yeti-vortex-2880x1800.png">2880x1800</a></li>
- </ul>
- </div>
- <div class="three columns">
- <img style="border: solid 1px #eee;" src="files/f3/yetified-3-th.png" />
- <ul class="link-list"><li>
- <li><a href="files/f3/yetified-3-1024x768.png">1024x768</a></li>
- <li><a href="files/f3/yetified-3-1440x900.png">1440x900</a></li>
- <li><a href="files/f3/yetified-3-1680x1050.png">1680x1050</a></li>
- <li><a href="files/f3/yetified-3-2880x1800.png">2880x1800</a></li>
- </ul>
- </div>
- </div>
-
- <div class="row">
- <div class="three columns">
- <img style="border: solid 1px #eee;" src="files/lurking-yeti-400x300.jpg" />
- <ul class="link-list"><li>
- <li><a href="files/lurking-yeti-1024x768.jpg">1024x768</a></li>
- <li><a href="files/lurking-yeti-1440x900.jpg">1440x900</a></li>
- <li><a href="files/lurking-yeti-1680x1050.jpg">1680x1050</a></li>
- <!-- <li><a href="files/lurking-yeti-2880x1800.jpg">2880x1800</a></li> -->
- </ul>
- </div>
- <div class="three columns">
- <img style="border: solid 1px #eee;" src="files/tropical-yeti-400x300.jpg" />
- <ul class="link-list"><li>
- <li><a href="files/tropical-yeti-1024x768.jpg">1024x768</a></li>
- <li><a href="files/tropical-yeti-1440x900.jpg">1440x900</a></li>
- <li><a href="files/tropical-yeti-1680x1050.jpg">1680x1050</a></li>
- <!-- <li><a href="files/tropical-yeti-2880x1800.jpg">2880x1800</a></li> -->
- </ul>
- </div>
- <div class="three columns">
- <img style="border: solid 1px #eee;" src="files/yeti-dance-400x300.jpg" />
- <ul class="link-list"><li>
- <li><a href="files/yeti-dance-1024x768.jpg">1024x768</a></li>
- <li><a href="files/yeti-dance-1440x900.jpg">1440x900</a></li>
- <li><a href="files/yeti-dance-1680x1050.jpg">1680x1050</a></li>
- <!-- <li><a href="files/yeti-dance-2880x1800.jpg">2880x1800</a></li> -->
- </ul>
- </div>
- <div class="three columns">
- <img style="border: solid 1px #eee;" src="files/yeti-love-400x300.jpg" />
- <ul class="link-list"><li>
- <li><a href="files/yeti-love-1024x768.jpg">1024x768</a></li>
- <li><a href="files/yeti-love-1440x900.jpg">1440x900</a></li>
- <li><a href="files/yeti-love-1680x1050.jpg">1680x1050</a></li>
- <!-- <li><a href="files/yeti-love-2880x1800.jpg">2880x1800</a></li> -->
- </ul>
- </div>
- </div>
- </div>
- <div class="twelve columns show-for-small">
- <h5>iPhone Desktops</h5>
- <ul class="block-grid four-up">
- <li>
- <a href="files/f3/foundation-yeti-640x960.png"><img style="border: solid 1px #eee;" src="files/f3/foundation-monster-640x960.png" /></a>
- </li>
- <li>
- <a href="files/f3/stretch-yeti-640x960.png"><img style="border: solid 1px #eee;" src="files/f3/stretch-yeti-640x960.png" /></a>
- </li>
- <li>
- <a href="files/f3/tiny-yeti-640x960.png"><img style="border: solid 1px #eee;" src="files/f3/tiny-yeti-640x960.png" /></a>
- </li>
- <li>
- <a href="files/f3/tools-640x960.png"><img style="border: solid 1px #eee;" src="files/f3/tools-640x960.png" /></a>
- </li>
-
- <li>
- <a href="files/f3/yeti-lab-640x960.png"><img style="border: solid 1px #eee;" src="files/f3/yeti-lab-640x960.png" /></a>
- </li>
- <li>
- <a href="files/f3/yeti-moon-640x960.png"><img style="border: solid 1px #eee;" src="files/f3/yeti-moon-640x960.png" /></a>
- </li>
- <li>
- <a href="files/f3/yeti-vortex-640x960.png"><img style="border: solid 1px #eee;" src="files/f3/yeti-vortex-640x960.png" /></a>
- </li>
- <li>
- <a href="files/f3/yetified-3-640x960.png"><img style="border: solid 1px #eee;" src="files/f3/yetified-3-640x960.png" /></a>
- </li>
-
- <li>
- <a href="files/f3/lurking-yeti-640x960.jpg"><img style="border: solid 1px #eee;" src="files/lurking-yeti-640x960.jpg" /></a>
- </li>
- <li>
- <a href="files/tropical-yeti-640x960.jpg"><img style="border: solid 1px #eee;" src="files/tropical-yeti-640x960.jpg" /></a>
- </li>
- <li>
- <a href="files/yeti-dance-640x960.jpg"><img style="border: solid 1px #eee;" src="files/yeti-dance-640x960.jpg" /></a>
- </li>
- <li>
- <a href="files/yeti-love-640x960.jpg"><img style="border: solid 1px #eee;" src="files/yeti-love-640x960.jpg" /></a>
- </li>
- </ul>
- </div>
- </div>
- <br>
- <div class="row">
- <div class="twelve columns">
- <h3>Yeti for Download</h3>
- <p>We've made that really easy (as long as you have the right software) to download your very own vector yeti to use as you want. We'd love to see how you're using it or even if you create a new desktop wallpaper. Let us know and we might feature it on this page!</p>
- <a class="small button" href="files/yeti.zip" alt="Vector Yeti">Download the Yeti</a>
- </div>
- </div>
- <br><br>
- </section>
-
-<?php include("includes/_footer.php"); ?>
View
95 marketing/cache/navigation_bar.html
@@ -1,95 +0,0 @@
-<div class="container" id="megaDrop" style="display: none; ">
- <div class="mobile-main-nav-padding">
- <div class="row">
- <div class="twelve columns">
- <div class="sitemap-link"><a href="http://www.zurb.com/sitemap">Sitemap</a></div>
- </div>
- </div>
- <div class="row">
- <div class="twelve columns center-content">
- <a href="http://www.zurb.com"><img alt="Zurb-logo-drop-down" src="http://www.zurb.com/assets/logo/zurb-logo-drop-down.png"></a>
- <p class="zurb-info-hover"><a href="http://www.zurb.com">ZURB is a close-knit team of product designers who help companies design better products faster. →</a></p>
- </div>
- </div>
-
- <div class="row">
- <div class="tablet-padding">
- <div class="three columns property" id="zurbApps">
- <h4><a href="http://zurb.com/apps"><small class="gray">ZURBapps</small></a></h4>
- <p><a href="http://zurb.com/apps">ZURBapps helps you design great products faster through rapid prototyping, iteration and user feedback. →</a></p>
- <hr>
- <p>Check out some of our apps:</p>
- <div class="row">
- <div class="six columns">
- <ul class="zurb-apps">
- <li class="influence"><a href="http://www.influenceapp.com">Influence</a></li>
- <li class="verify"><a href="http://www.verifyapp.com">Verify</a></li>
- </ul>
- </div>
- <div class="six columns">
- <ul class="zurb-apps">
- <li class="notable"><a href="http://www.notableapp.com">Notable</a></li>
- <li class="solidify"><a href="http://www.influenceapp.com">Solidify</a></li>
- </ul>
- </div>
- </div>
- </div>
- <div class="show-on-phones"><br><br></div>
- <div class="three columns property" id="zurbEvents">
- <h4><a href="http://zurb.com/events"><small class="magenta">ZURBevents</small></a></h4>
- <p><a href="http://zurb.com/events">Our ZURBevents explore the intersection of product design and business. →</a></p>
- <hr>
- <p>Come to ZURBsoapbox:</p>
- <div class="zurb-soapbox">
- <p>
- <a href="http://www.zurb.com/soapbox/rsvp">
- <strong>Jeff Atwood</strong>,
- Founder of Stack Overflow, gets on his soapbox on
- <strong>May 04, 2012</strong>
- at ZURB HQ.<br>
- RSVP Now →
- </a>
- </p>
- </div>
-
- </div>
- <div class="show-on-phones"><br><br></div>
- <div class="three columns property" id="zurbExpo">
- <h4><a href="http://zurb.com/expo"><small class="yellow">ZURBexpo</small></a></h4>
- <p><a href="http://zurb.com/expo">ZURBexpo is an exhibition of product design ideas to help you design great products faster. →</a></p>
- <hr>
- <p>Our latest blog post:</p>
- <div class="zurb-blog">
- <p>
- <a href="http://www.zurb.com/blog/953">
- <strong>Has Getting Our Attention Come Down to A Bear and A Flaming Meteor?</strong><br>
- Read More →
-</a> </p>
- </div>
- </div>
- <div class="show-on-phones"><br><br></div>
- <div class="three columns property" id="zurbJobs">
- <h4><a href="http://zurb.com/jobs"><small class="blue">ZURBjobs</small></a></h4>
- <p><a href="http://zurb.com/jobs">ZURBjobs is a job board focused solely on mobile/web product designers &amp; engineers. →</a></p>
- <hr>
-
- <div class="zurb-jobs">
- <p>Interested in this job?</p>
- <p>
- <a href="http://www.zurb.com/jobs/130-zurb-design-lead">
- <strong>Design Lead</strong> at
- <strong>ZURB</strong><br>
- Read More →
-</a> </p>
- </div>
- </div>
- </div>
- </div>
-
- <div class="row">
- <div class="drop-down-foundation">
- <p><a href="http://foundation.zurb.com/"><span class="foundation-zurb">Foundation</span> An easy to use, powerful &amp; flexible framework for building prototypes and production code on any kind of device. →</a></p>
- </div>
- </div>
- </div>
-</div>
View
71 marketing/case-flite.php
@@ -1,71 +0,0 @@
-<? $page_title = "Flite Case Study" ?>
-<?php include("includes/_header.php"); ?>
-
- <header>
- <div class="row">
- <div class="twelve columns">
- <h1>Case Studies</h1>
- <h4>How people are using Foundation to build responsive, future-friendly sites.</h4>
- </div>
- </div>
- </header>
-
- <section id="mainContent">
-
- <div class="row">
- <div class="ten columns push-two">
- <div class="row">
- <div class="six columns">
- <p class="show-for-small"><a href="index.php">&larr; Back to Home</a></p>
- <h2>Flite</h2>
- <h4 class="subheader">Foundation was the way to go.</h4>
-
- <p>When online advertising tech firm <a href="http://www.flite.com/">Flite</a> needed to do a redesign of its website, it knew that it had to work on any device, not just desktops. So the company looked around for a responsive framework. George Penston, VP of Product Design, had been following all that we do at ZURB and knew that the company had to take a look at Foundation to meet its needs. Foundation integrated well with Sass and Compass, something Flite has made essential to its development toolkit. While there were other frameworks out there, George said that Foundation was the way to go.</p>
-
- <p>For the folks at Flite, Foundation had a nice, complete package with all the buttons and forms that they needed. As Andy Yang, Principal UX Designer, put it:</p>
- <blockquote>"Getting up to speed was super easy"</blockquote>
-
- <p>Andy had Foundation up and running in a day. Then it was just a matter of building out the entire site, which took about another two weeks.</p>
- </div>
- <div class="six columns">
- <img src="images/case-flite-1.jpg" id="sideDeviceDesktop" />
- </div>
- </div>
-
- <div class="row">
- <div class="six columns push-six">
- <h4>Integrating Their Design with Foundation</h4>
- <p>Flite started the design work on the site before deciding to use Foundation. The company had already solidified the design for their site. However, they didn't have much trouble backing the design into Foundation's framework. Not only that but Flite was able to integrate Foundation into its Sass+Compass workflow. George told us that was a real boon for the team.</p>
- </div>
- <div class="six columns pull-six">
- <img src="images/case-flite-2.png" />
- </div>
- </div>
-
- <h4>Retina display? No problem.</h4>
- <p>Preparing for the new iPad and its retina display ahead of time, the folks at Flite added retina support for key graphical elements into their SCSS/CSS. Take a look to see how they did it:</p>
-
- <script src="https://gist.github.com/2990579.js?file=f3-case-flite-retina.html"></script>
-
- <h4>Would Use Again</h4>
- <p>In the end, the new site looked fantastic on all devices thanks to Foundation. Flite found a new tool that easily integrates with the other tools, such as Sass and Compass, in its toolbox. And the team would use Foundation again.</p>
-
- <blockquote>"Overall, I would definitely use it again for other projects."<cite>Andy</cite></blockquote>
- </div>
-
- <div class="two columns pull-ten">
- <ul class="side-nav">
- <li><a href="index.php">&larr; Home</a></li>
- <li class="divider"></li>
- <li class="active"><a href="case-flite.php">Flite</a></li>
- <li><a href="case-swizzle.php">Swizzle</a></li>
- <li><a href="case-soapbox.php">ZURBsoapbox</a></li>
- <li><a href="case-reel.php">Reel</a></li>
- <li><a href="case-zurbjobs.php">ZURBjobs</a></li>
- </ul>
- </div>
- </div>
-
- </section>
-
-<?php include("includes/_footer.php"); ?>
View
61 marketing/case-reel.php
@@ -1,61 +0,0 @@
-<? $page_title = "Reelapp Case Study" ?>
-<?php include("includes/_header.php"); ?>
-
- <header>
- <div class="row">
- <div class="twelve columns">
- <h1>Case Studies</h1>
- <h4>How people are using Foundation to build responsive, future-friendly sites.</h4>
- </div>
- </div>
- </header>
-
- <section id="mainContent">
-
- <div class="row">
-
- <div class="ten columns push-two">
- <div class="row">
- <div class="six columns">
- <p class="show-for-small"><a href="index.php">&larr; Back to Home</a></p>
- <h2>Reeling in Feedback</h2>
- <h4 class="subheader">Powerpoint sucks, especially online.</h4>
- <p><a href="http://reelapp.com">Reel</a> is a little app we built to help people post mockups, sketches, wireframes, and entire presos (PDF or PPT). They can get quick "thumbs up or down" feedback. But it wasn't enough to just show slides, we wanted to be able to view the preso, give feedback, and review feedback on any device.</p>
-
- <h4>Identical Templates</h4>
- <p>The slideshow view uses the same HTML templates across all devices, but what the user sees differs pretty substantially between desktop and mobile. We used Foundation's media queries built into mobile.css to seamlessly show the right content for each device.</p>
-
- <h4>Easy Organization</h4>
- <p>We used the grid to easily organize content without needing to set custom positions for each block. Using the "centered" class in particular for those high-impact center blocks helped keep the markup simple.</p>
-
- </div>
- <div class="six columns">
- <img src="images/case-reel-1.jpg" id="sideDeviceDesktop" />
- </div>
- </div>
-
- <div class="row">
- <div class="twelve columns">
- <h4>Next Steps: Influence</h4>
- <p>That's not all &mdash; we're just getting started. We're working on Reel's big brother, a new app called Influence (also based on Foundation) that will include private presos, letting viewers add their own notes, and more! It's in private bet, so stay tuned&hellip;</p>
- </div>
- </div>
-
-
- </div>
- <div class="two columns pull-ten">
- <ul class="side-nav">
- <li><a href="index.php">&larr; Home</a></li>
- <li class="divider"></li>
- <li><a href="case-flite.php">Flite</a></li>
- <li><a href="case-swizzle.php">Swizzle</a></li>
- <li><a href="case-soapbox.php">ZURBsoapbox</a></li>
- <li class="active"><a href="case-reel.php">Reel</a></li>
- <li><a href="case-zurbjobs.php">ZURBjobs</a></li>
- </ul>
- </div>
- </div>
-
- </section>
-
-<?php include("includes/_footer.php"); ?>
View
63 marketing/case-soapbox.php
@@ -1,63 +0,0 @@
-<? $page_title = "ZURBsoapbox Case Study" ?>
-<?php include("includes/_header.php"); ?>
-
- <header>
- <div class="row">
- <div class="twelve columns">
- <h1>Case Studies</h1>
- <h4>How people are using Foundation to build responsive, future-friendly sites.</h4>
- </div>
- </div>
- </header>
-
- <section id="mainContent">
-
- <div class="row">
-
- <div class="ten columns push-two">
- <div class="row">
- <div class="six columns">
- <p class="show-for-small"><a href="index.php">&larr; Back to Home</a></p>
- <h2>ZURBsoapbox</h2>
- <h4 class="subheader">Rapidly launching and iterating for our audience.</h4>
- <p>ZURBsoapbox is a speaking series we host at ZURB HQ, where we invite influential entrepreneurs, designers, and other tech types to come and share their experiences.</p>
- <p>We launched <a href="http://www.zurbsoapbox.com">ZURBsoapbox</a>, the first site built with Foundation, in order to raise engagement and create a resource for anyone who can't attend in person. <strong>Here's some of the highlights.</strong></p>
-
- <h4>Instant Mobile Site</h4>
- <p>Thanks to Foundation's <a href="docs/grid.php">built-in responsive grid</a>, as soon as we put together the desktop prototype we already had a working mobile prototype, ready for tablets, phones and other devices.</p>
- </div>
- <div class="six columns">
- <img src="images/case-soapbox-1.jpg" id="sideDeviceDesktop" />
- </div>
- </div>
-
- <div class="row">
- <div class="six columns push-six">
- <h4>Device-Specific Function</h4>
- <p>Mobile devices can't handle our standard flash audio player, so we used <a href="docs/elements.php">Foundation's mobile visibility classes</a> to selectively hide the flash element, and show a mobile-friendly audio file link.</p>
-
- <h4>Next Steps: Images</h4>
- <p>We practice what we preach, and we're always iterating on Foundation-based sites. Our next step is to implement a more mobile-friendly image solution, so devices don't have to load quite as much data. There's a lot of good work going on in this area, but also a lot to figure out.</p>
- </div>
- <div class="six columns pull-six">
- <img src="images/case-soapbox-2.jpg" />
- </div>
- </div>
-
- </div>
- <div class="two columns pull-ten">
- <ul class="side-nav">
- <li><a href="index.php">&larr; Home</a></li>
- <li class="divider"></li>
- <li><a href="case-flite.php">Flite</a></li>
- <li><a href="case-swizzle.php">Swizzle</a></li>
- <li class="active"><a href="case-soapbox.php">ZURBsoapbox</a></li>
- <li><a href="case-reel.php">Reel</a></li>
- <li><a href="case-zurbjobs.php">ZURBjobs</a></li>
- </ul>
- </div>
- </div>
-
- </section>
-
-<?php include("includes/_footer.php"); ?>
View
62 marketing/case-swizzle.php
@@ -1,62 +0,0 @@
-<? $page_title = "Swizzle Case Study" ?>
-<?php include("includes/_header.php"); ?>
-
- <header>
- <div class="row">
- <div class="twelve columns">
- <h1>Case Studies</h1>
- <h4>How people are using Foundation to build responsive, future-friendly sites.</h4>
- </div>
- </div>
- </header>
-
- <section id="mainContent">
-
- <div class="row">
-
- <div class="ten columns push-two">
- <div class="row">
- <div class="six columns">
- <p class="show-for-small"><a href="index.php">&larr; Back to Home</a></p>
- <h2>Swizzle</h2>
- <h4 class="subheader">Beautiful, and built in the browser.</h4>
-
- <p>We were thrilled to see this site for Swizzle, an online service and design studio in Canada. Built on Foundation, it's not only beautiful, but scales in incredibly smart ways. <a href="http://www.getswizzle.com">Check it out</a> on your desktop or mobile device to see what we mean, or read below what Laura Hutchinson from Swizzle said about how Foundation helped and what they have in store next.</p>
-
- <h4>Built in the Browser</h4>
- <p>Using Foundation, we were able to quickly implement the desktop and mobile site. It was easy to setup the shell how we wanted because the overall width is customizable, and it was fun to experiment with different layouts on the fly using the built-in responsive grid.</p>
- </div>
- <div class="six columns">
- <img src="images/case-swizzle-1.jpg" id="sideDeviceiPad" />
- </div>
- </div>
-
- <div class="row">
- <div class="six columns push-six">
- <h4>Device-Specific Navigation</h4>
- <p>We used Foundation's mobile visibility classes to hide the top navigation from mobile devices, and replace it with a menu link (the menu link is hidden from desktops with the visibility classes too). The link anchors to the footer navigation, which uses a bit of CSS to change the layout.</p>
- <h4>Next Steps: Client Friendly</h4>
- <p>What's next is to switch our client portal over to using Foundation. We've got lots of forms in our client portal, and until now they've been a real headache to style. We're also going to use <a href="docs/reveal.php">Reveal</a> for some great interactive features.</p>
- </div>
- <div class="six columns pull-six">
- <img src="images/case-swizzle-2.jpg" />
- </div>
- </div>
-
- </div>
- <div class="two columns pull-ten">
- <ul class="side-nav">
- <li><a href="index.php">&larr; Home</a></li>
- <li class="divider"></li>
- <li><a href="case-flite.php">Flite</a></li>
- <li class="active"><a href="case-swizzle.php">Swizzle</a></li>
- <li><a href="case-soapbox.php">ZURBsoapbox</a></li>
- <li><a href="case-reel.php">Reel</a></li>
- <li><a href="case-zurbjobs.php">ZURBjobs</a></li>
- </ul>
- </div>
- </div>
-
- </section>
-
-<?php include("includes/_footer.php"); ?>
View
62 marketing/case-zurbjobs.php
@@ -1,62 +0,0 @@
-<? $page_title = "ZURBjobs Case Study" ?>
-<?php include("includes/_header.php"); ?>
-
- <header>
- <div class="row">
- <div class="twelve columns">
- <h1>Case Studies</h1>
- <h4>How people are using Foundation to build responsive, future-friendly sites.</h4>
- </div>
- </div>
- </header>
-
- <section id="mainContent">
-
- <div class="row">
-
- <div class="ten columns push-two">
- <div class="row">
- <div class="six columns">
- <p class="show-for-small"><a href="index.php">&larr; Back to Home</a></p>
- <h2>ZURBjobs</h2>
- <h4 class="subheader">Closing the Product Design Talent Gap</h4>
- <p>Lots of companies struggle to find great designers. Every week, clients ask us to recommend a designer for them to hire internally, and with our huge following of talented designers, we knew there had to be an easy way to bring the two together.</p>
-
- <p>We launched <a href="http://www.zurbjobs.com">ZURBjobs</a> to help companies find talent in their own quest for world domination. ZURBjobs had to look amazing on every device, so we used Foundation to quickly build the site. Here are some of the highlights of how we built and launched using Foundation.</p>
-
- <h4>Minimal Code Required</h4>
- <p>Using Foundation, we were able to quickly insert <a href="docs/forms.php">form elements</a> on the site using its preset elements. This kicked us into warp speed &mdash; we didn’t have to code entirely new elements. We simply had to adapt the existing ones with light custom styles.</p>
-
- </div>
- <div class="six columns">
- <img src="images/case-zurbjobs-1.jpg" id="sideDeviceDesktop" />
- </div>
- </div>
-
- <div class="row">
- <div class="twelve columns">
- <h4>Mobile Optimized</h4>
- <p>Of course, since we built with Foundation, the site works great on mobile devices. CSS3 helps us avoid extraneous image requests, ensuring that things feel snappy even on slower connections. The layout also adapts to be simple and straightforward.</p>
-
- <h4>Next Steps: Managing Jobs</h4>
- <p>Like any project there's more to do and more to refine. Up next, we'll be fleshing out the customer admin tools so people can create, modify, and close out their own postings.</p>
- </div>
- </div>
-
- </div>
- <div class="two columns pull-ten">
- <ul class="side-nav">
- <li><a href="index.php">&larr; Home</a></li>
- <li class="divider"></li>
- <li><a href="case-flite.php">Flite</a></li>
- <li><a href="case-swizzle.php">Swizzle</a></li>
- <li><a href="case-soapbox.php">ZURBsoapbox</a></li>
- <li><a href="case-reel.php">Reel</a></li>
- <li class="active"><a href="case-zurbjobs.php">ZURBjobs</a></li>
- </ul>
- </div>
- </div>
-
- </section>
-
-<?php include("includes/_footer.php"); ?>
View
9 marketing/config.rb
@@ -1,9 +0,0 @@
-#http_path = "/"
-require "rubygems"
-require "bundler"
-Bundler.require
-#add_import_path File.join("..", "stylesheets")
-line_comments = false
-relative_assets = true
-output_style = :compact
-sass_options = { :cache => true }
View
169 marketing/docs/buttons.php
@@ -1,169 +0,0 @@
-<? $page_title = "Buttons" ?>
-<?php include("includes/_documentation_head.php"); ?>
-
- <div class="row">
- <section role="main">
- <div class="row">
- <div class="eight columns">
- <h3>Buttons</h3>
- <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>
-
- <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>
-
- <script src="https://gist.github.com/2969496.js?file=f3-buttons.html"></script>
-
- <div class="row">
- <div class="six columns">
- <a href="#" class="tiny button">Tiny Button &raquo;</a><br /><br />
- <a href="#" class="small button">Small Button &raquo;</a><br /><br />
- <a href="#" class="button">Regular Button &raquo;</a><br /><br />
- <a href="#" class="large button">Large Button &raquo;</a><br /><br />
- <br /><br />
- <a href="#" class="tiny secondary button">Secondary Button &raquo;</a><br /><br />
- <a href="#" class="small secondary button">Secondary Button &raquo;</a><br /><br />
- <a href="#" class="secondary button">Secondary Button &raquo;</a><br /><br />
- <a href="#" class="large secondary button">Secondary Button &raquo;</a><br /><br />
- <br /><br />
- </div>
- <div class="six columns">
- <a href="#" class="tiny success button">Success Button &raquo;</a><br /><br />
- <a href="#" class="small success button">Success Button &raquo;</a><br /><br />
- <a href="#" class="success button">Success Button &raquo;</a><br /><br />
- <a href="#" class="large success button">Success Button &raquo;</a><br /><br />
- <br /><br />
- <a href="#" class="tiny alert button">Alert Button &raquo;</a><br /><br />
- <a href="#" class="small alert button">Alert Button &raquo;</a><br /><br />
- <a href="#" class="alert button">Alert Button &raquo;</a><br /><br />
- <a href="#" class="large alert button">Alert Button &raquo;</a><br /><br />
- <br /><br />
- </div>
- </div>
-
- <p>Button classes can also be applied to <code>button</code> elements, as well as <code>input type="submit"</code> elements.</p>
-
- <button class="button">Form Button</button>
- <input type="submit" class="button" value="Input Submit Button" />
- <a href="#" class="button">Regular Button &raquo;</a>
-
- <hr />
-
- <h4>Button Groups</h4>
- <p>When you need a group of actions, button groups give you some easy-to-use options.</p>
-
- <h5>Button Group - Radius</h5>
- <p>A button group is simply a <code>ul.button-group</code> in which each <code>li</code> contains a button. You can attach a button style, such as radius or rounded, to the entire group, and Foundation will apply the style to the first and last buttons in the group.</p>
- <ul class="button-group radius">
- <li><a href="#" class="button radius">Button 1</a></li>
- <li><a href="#" class="button radius">Button 2</a></li>
- <li><a href="#" class="button radius">Button 3</a></li>
- </ul>
-
- <script src="https://gist.github.com/2978952.js?file=f3-button-group.html"></script>
-
- <h5>Even Button Groups</h5>
- <p>If you want a button group to fill a grid column with evenly sized actions, you can simply add two classes to the group: <code>.even</code> and either <code>.two-up</code>, <code>.three-up</code>, <code>.four-up</code>, or <code>.five-up</code>.
-
- <ul class="button-group even three-up">
- <li><a href="#" class="button">Button 1</a></li>
- <li><a href="#" class="button">Button 2</a></li>
- <li><a href="#" class="button">Button 3</a></li>
- </ul>
-
- <script src="https://gist.github.com/2978962.js?file=f3-button-grou-even.html"></script>
-
- <h5>Button Bars</h5>
- <p>A button bar is a group of button groups (I N C E P T I O N), perfect for situations where you want groups of actions that are all related to a similar element or page. Simply wrap two or more button groups in a <code>div.button-bar</code> and Foundation takes care of the rest.</p>
-
- <div class="button-bar">
- <ul class="button-group">
- <li><a href="#" class="button">Button 1</a></li>
- <li><a href="#" class="button">Button 2</a></li>
- <li><a href="#" class="button">Button 3</a></li>
- </ul>
-
- <ul class="button-group">
- <li><a href="#" class="button">Button 1</a></li>
- <li><a href="#" class="button">Button 2</a></li>
- <li><a href="#" class="button">Button 3</a></li>
- </ul>
- </div>
-
- <script src="https://gist.github.com/2978972.js?file=f3-button-bar.html"></script>
-
- <p>Buttons within groups or bars can also be individually set to a particular type (color) or size. Obviously if you create a button bar with different sized buttons the visual presentation may suffer a bit, but we wanted these to be very flexible.</p>
-
- <hr />
-
- <h4>Dropdown Buttons</h4>
- <p>Foundation 3 includes two types of dropdown buttons: buttons which create a dropdown when you click them and buttons which have a dropdown when you click specifically on the down-arrow part of the button (a split button). 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>
-
- <h5>Dropdown Buttons</h5>
- <p>Dropdown buttons use the same classes as any other button, but a different structure.</p>
-
- <p>
- <div href="#" class="large button dropdown">
- Dropdown Button
- <ul>
- <li><a href="#">Dropdown Item</a></li>
- <li><a href="#">Another Dropdown Item</a></li>
- <li class="divider"></li>
- <li><a href="#">Last Item</a></li>
- </ul>
- </div>
- </p>
-
- <p>If you need your dropdown to go up, simple add a class of <code>.up</code> to <code>.button.dropdown</code>.</p>
-
- <script src="https://gist.github.com/2978975.js?file=f3-dropdown-button.html"></script>
-
- <h5>Split Button</h5>
- <p>Split buttons in turn use similar classes, and a different structure than regular or dropdown buttons.</p>
-
- <p>
- <div href="#" class="large alert button split dropdown">
- <a href="#">Split Button</a>
- <span></span>
- <ul>
- <li><a href="#">Dropdown Item</a></li>
- <li><a href="#">Another Dropdown Item</a></li>
- <li class="divider"></li>
- <li><a href="#">Last Item</a></li>
- </ul>
- </div>
- </p>
-
- <script src="https://gist.github.com/2978979.js?file=f3-split-button.html"></script>
-
- <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>
-
-
- </div>
- <div class="four columns">
- <? include("includes/_download.php"); ?>
- </div>
- </div>
- </section>
-
- <section id="sidebar" role="complementary">
-
- <dl class="tabs vertical hide-on-phones">
- <dd><a href="index.php">Getting Started</a></dd>
- <dd><a href="installing.php">CSS Version</a></dd>
- <dd><a href="gem-install.php">Gem Versions</a></dd>
- <dd><a href="grid.php">The Grid</a></dd>
- <dd><a href="typography.php">Typography</a></dd>
- <dd class="active"><a href="buttons.php">Buttons</a></dd>
- <dd><a href="forms.php">Forms</a></dd>
- <dd><a href="navigation.php">Navigation</a></dd>
- <dd><a href="tabs.php">Tabs</a></dd>
- <dd><a href="elements.php">Elements</a></dd>
- <dd><a href="orbit.php">Orbit</a></dd>
- <dd><a href="reveal.php">Reveal</a></dd>
- <dd><a href="support.php">Support</a></dd>
- </dl>
-
- </section>
- </div>
-
-
-<?php include("includes/_documentation_foot.php"); ?>
View
262 marketing/docs/elements.php
@@ -1,262 +0,0 @@
-<? $page_title = "UI Elements" ?>
-<?php include("includes/_documentation_head.php"); ?>
-
- <div class="row">
- <section role="main">
- <div class="row">
- <div class="eight columns">
- <h3>Elements</h3>
- <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>
-
- <hr />
-
- <h4>Visibility Classes</h4>
- <p>Foundation 3 allows you to easily turn elements on and off based on certain device criteria, like screen size, touch, or orientation.</p>
-
- <h5>Screen Size</h5>
- <p>The following text should describe the device you're using:
- <strong class="show-for-xlarge">You are on a very large screen.</strong>
- <strong class="show-for-large">You are on a large screen.</strong>
- <strong class="show-for-large-up">You are on a large or very large screen.</strong>
- <strong class="show-for-medium">You are on a medium screen.</strong>
- <strong class="show-for-medium-down">You are on a medium or small screen.</strong>
- <strong class="show-for-small">You are on a small screen, like a smartphone.</strong>
- </p>
-
- <script src="https://gist.github.com/2993794.js?file=f3-show-size.html"></script>
-
- <p>This example uses the opposite rules, so the following text should inversely describe the device you're using:
- <strong class="hide-for-xlarge">You are not on a very large screen.</strong>
- <strong class="hide-for-large">You are not on a large screen.</strong>
- <strong class="hide-for-large-up">You are not on a large or very large screen.</strong>
- <strong class="hide-for-medium-down">You are not on a medium or small screen.</strong>
- <strong class="hide-for-medium">You are not on a medium screen.</strong>
- <strong class="hide-for-small">You are not on a small screen.</strong>
- </p>
-
- <script src="https://gist.github.com/2993824.js?file=f3-hide-size.html"></script>
-
- <h5>Orientation Detection</h5>
- <p>The following text should describe the device you're using:
- <strong class="show-for-landscape">You are in landscape orientation.</strong>
- <strong class="show-for-portrait">You are in portrait orientation.</strong>
- </p>
-
- <script src="https://gist.github.com/2993845.js?file=f3-orientation.html"></script>
-
- <h5>Touch Detection</h5>
- <p>The following text should describe the device you're using:
- <strong class="show-for-touch">You are on a touch-enabled device.</strong>
- <strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
- </p>
-
- <script src="https://gist.github.com/2993838.js?file=f3-touch.html"></script>
-
- <p><strong>Note:</strong> These classes have been listed in order of precendence. Touch classes will override orientation, which will override size.</p>
-
- <hr />
-
- <h4>Alerts</h4>
- <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>
-
- <div class="alert-box">
- This is a standard alert (div.alert-box).
- <a href="" class="close">&times;</a>
- </div>
-
- <div class="alert-box success">
- This is a success alert (div.alert-box.success).
- <a href="" class="close">&times;</a>
- </div>
-
- <div class="alert-box alert">
- This is an alert (div.alert-box.alert).
- <a href="" class="close">&times;</a>
- </div>
-
- <div class="alert-box secondary">
- This is a secondary alert (div.alert-box.secondary).
- <a href="" class="close">&times;</a>
- </div>
-
- <script src="https://gist.github.com/2984343.js?file=f3-alert-box.html"></script>
-
- <hr />
-
- <h4>Labels</h4>
- <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>
-
- <div class="row">
- <div class="three columns phone-two">
- <p>
- <span class="label">Regular Label</span><br />
- <span class="radius label">Radius Label</span><br />
- <span class="round label">Round Label</span>
- </p>
- </div>
- <div class="three columns end phone-two">
- <p>
- <span class="secondary radius label">Secondary Label</span><br />
- <span class="alert label">Alert Label</span><br />
- <span class="success round label">Success Label</span><br />
- </p>
- </div>
- </div>
-
- <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>
-
- <script src="https://gist.github.com/2984340.js?file=f3-inline-labels.html"></script>
-
- <hr />
-
- <h4>Tooltips</h4>
- <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>
-
- <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>
-
- <p>The tooltips can be positioned on the <span class="has-tip" data-width="210" title="I'm on bottom and the default position.">"tip-bottom"</span>, which is the default position, <span class="has-tip tip-top noradius" data-width="210" title="I'm on the top and I'm not rounded!">"tip-top" (hehe)</span>, <span class="has-tip tip-left" data-width="90" title="I'm on the left!">"tip-left"</span>, or <span class="has-tip tip-right" data-width="120" title="I'm on the right!">"tip-right"</span> of the target element. On a small device, the tooltips are full width and bottom aligned.</p>
-
- <script src="https://gist.github.com/2984356.js?file=f3-tooltips.html"></script>
-
- <hr />
-
- <h4>Accordion</h4>
- <p>Accordions are similar to tabs as a way to selectively show a single panel of content at a time.</p>
-
- <ul class="accordion">
- <li class="active">
- <div class="title">
- <h5>Accordion Panel 1</h5>
- </div>
- <div class="content">
- <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>
- <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>
- </div>
- </li>
- <li>
- <div class="title">
- <h5>Accordion Panel 2</h5>
- </div>
- <div class="content">
- <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>
- <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>
- </div>
- </li>
- <li>
- <div class="title">
- <h5>Accordion Panel 3</h5>
- </div>
- <div class="content">
- <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>
- <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>
- </div>
- </li>
- </ul>
-
- <hr />
-
- <h4>Keystrokes</h4>
- <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>
- <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>
- <script src="https://gist.github.com/3000680.js?file=f3-keystroke.html"></script>
-
- <hr />
-
- <h4>Panels</h4>
- <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>
-
- <div class="row">
- <div class="six columns">
- <div class="panel">
- <h5>This is a regular panel.</h5>
- <p>It has an easy to override visual style, and is appropriately subdued.</p>
- </div>
- </div>
- <div class="six columns">
- <div class="panel callout radius">
- <h5>This is a callout panel.</h5>
- <p>It's a little ostentatious, but useful for important content.</p>
- </div>
- </div>
- </div>
-
- <script src="https://gist.github.com/2984372.js?file=f3-panels.html"></script>
-
- <hr />
-
- <h4>Link List</h4>
- <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>
-
- <ul class="link-list">
- <li><a href="#">Link 1</a></li>
- <li><a href="#">Link 2</a></li>
- <li><a href="#">Link 3</a></li>
- <li><a href="#">Link 4</a></li>
- <li><a href="#">Link 5</a></li>
- </ul>
-
- <script src="https://gist.github.com/2989329.js?file=f3-link-list.html"></script>
-
- <hr />
-
- <h4>Video</h4>
- <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>
-
- <dl class="tabs contained">
- <dd class="active"><a href="#video1">4:3</a></dd>
- <dd><a href="#video2">Widescreen</a></dd>
- <dd><a href="#video3">Vimeo</a></dd>
- </dl>
- <ul class="tabs-content contained">
- <li class="active" id="video1Tab">
- <div class="flex-video">
- <iframe width="420" height="315" src="http://www.youtube.com/embed/9otNWTHOJi8" frameborder="0" allowfullscreen></iframe>
- </div>
- 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.
- </li>
- <li id="video2Tab">
- <div class="flex-video widescreen">
- <iframe width="560" height="315" src="http://www.youtube.com/embed/N966cATFWjI" frameborder="0" allowfullscreen></iframe>
- </div>
- 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.
- </li>
- <li id="video3Tab">
- <div class="flex-video widescreen vimeo">
- <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>
- </div>
- 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.
- </li>
- </ul>
-
- <script src="https://gist.github.com/3055910.js?file=f3-flex-video.html"></script>
-
- </div>
- <div class="four columns">
- <? include("includes/_download.php"); ?>
- </div>
- </div>
- </section>
-
- <section id="sidebar" role="complementary">
-
- <dl class="tabs vertical hide-on-phones">
- <dd><a href="index.php">Getting Started</a></dd>
- <dd><a href="installing.php">CSS Version</a></dd>
- <dd><a href="gem-install.php">Gem Versions</a></dd>
- <dd><a href="grid.php">The Grid</a></dd>
- <dd><a href="typography.php">Typography</a></dd>
- <dd><a href="buttons.php">Buttons</a></dd>
- <dd><a href="forms.php">Forms</a></dd>
- <dd><a href="navigation.php">Navigation</a></dd>
- <dd><a href="tabs.php">Tabs</a></dd>
- <dd class="active"><a href="elements.php">Elements</a></dd>
- <dd><a href="orbit.php">Orbit</a></dd>
- <dd><a href="reveal.php">Reveal</a></dd>
- <dd><a href="support.php">Support</a></dd>
- </dl>
-
- </section>
- </div>
-
-
-<?php include("includes/_documentation_foot.php"); ?>
View
122 marketing/docs/f2/buttons.php
@@ -1,122 +0,0 @@
-<? $page_title = "Buttons"; ?>
-<?php include("includes/_documentation_head.php"); ?>
-
- <div class="container">
- <div class="row">
- <div class="twelve columns">
- <div class="foundation-header">
- <h1><a href="index.php">Foundation Docs</a></h1>
- <h4 class="subheader">Rapid prototyping and building library from ZURB.</h4>
- </div>
- </div>
- </div>
-
- <div class="row">
- <div class="two columns">
- <dl class="nice tabs vertical hide-on-phones">
- <dd><a href="index.php">Getting Started</a></dd>
- <dd><a href="grid.php">Grid</a></dd>
- <dd><a href="buttons.php" class="active">Buttons</a></dd>
- <dd><a href="forms.php">Forms</a></dd>
- <dd><a href="layout.php">Layout</a></dd>
- <dd><a href="ui.php">UI</a></dd>
- <dd><a href="orbit.php">Orbit</a></dd>
- <dd><a href="reveal.php">Reveal</a></dd>
- <dd><a href="gems.php">Gems</a></dd>
- <dd><a href="qa.php">QA</a></dd>
- </dl>
- </div>
- <div class="six columns">
- <h3>Buttons</h3>
- <h4 class="subheader">We &lt;3 buttons. And so do you! That's why Foundation has multiple buttons styles and color that are not only badass out of the box, but easy to customize for your projects.</h4>
- <hr />
-
- <h4>Simple Buttons</h4>
- <p>Foundation buttons have a number of parameters and styles - you can see a few examples below. The out of the box classes include size, color and style (square, slightly rounded, and completely rounded).</p>
- <p><script src="http://snipt.net/embed/269a08f1db74949e80ee8b40351e609c"></script></p><br />
- <div class="row">
- <div class="six columns">
- <a href="#" class="small blue button radius">Button &raquo;</a><br /><br />
- <a href="#" class="blue button radius">Button &raquo;</a><br /><br />
- <a href="#" class="large blue button radius">Button &raquo;</a><br /><br />
- <br /><br />
- <a href="#" class="small red button radius">Button &raquo;</a><br /><br />
- <a href="#" class="red button radius">Button &raquo;</a><br /><br />
- <a href="#" class="large red button radius">Button &raquo;</a><br /><br />
- <br /><br />
- </div>
- <div class="six columns">
- <a href="#" class="small white button radius">Button &raquo;</a><br /><br />
- <a href="#" class="white radius button">Button &raquo;</a><br /><br />
- <a href="#" class="large white button radius">Button &raquo;</a><br /><br />
- <br /><br />
- <a href="#" class="small black button radius">Button &raquo;</a><br /><br />
- <a href="#" class="black button radius">Button &raquo;</a><br /><br />
- <a href="#" class="large black button radius">Button &raquo;</a><br /><br />
- <br /><br />
- </div>
- <div class="six columns">
- <a href="#" class="small green button radius">Button &raquo;</a><br /><br />
- <a href="#" class="green radius button">Button &raquo;</a><br /><br />
- <a href="#" class="large green button radius">Button &raquo;</a><br /><br />
- <br /><br />
- </div>
-
- </div>
-
- <hr />
-
- <h4>Nice Buttons</h4>
- <p>Nice buttons have a little more pizazz using a background image, but they still support the same classes as any other button including color, size, and corner radius.</p>
- <p><script type="text/javascript" src="http://snipt.net/embed/ac514168311a363dd4b5130a20cd1efb"></script></p><br />
- <div class="row">
- <div class="six columns">
- <a href="#" class="small blue nice button radius">Button &raquo;</a><br /><br />
- <a href="#" class="blue nice button radius">Button &raquo;</a><br /><br />
- <a href="#" class="large blue nice button radius">Button &raquo;</a><br /><br />
- <br /><br />
- <a href="#" class="small red nice button radius">Button &raquo;</a><br /><br />
- <a href="#" class="red nice button radius">Button &raquo;</a><br /><br />
- <a href="#" class="large red nice button radius">Button &raquo;</a><br /><br />
- <br /><br />
- </div>
- <div class="six columns">
- <a href="#" class="small white nice button radius">Button &raquo;</a><br /><br />
- <a href="#" class="white radius nice button">Button &raquo;</a><br /><br />
- <a href="#" class="large white nice button radius">Button &raquo;</a><br /><br />
- <br /><br />
- <a href="#" class="small black nice button radius">Button &raquo;</a><br /><br />
- <a href="#" class="black nice button radius">Button &raquo;</a><br /><br />
- <a href="#" class="large black nice button radius">Button &raquo;</a><br /><br />
- <br /><br />
- </div>
- <div class="six columns">
- <a href="#" class="small green nice button radius">Button &raquo;</a><br /><br />
- <a href="#" class="green radius nice button">Button &raquo;</a><br /><br />
- <a href="#" class="large green nice button radius">Button &raquo;</a><br /><br />
- <br /><br />
- </div>
- </div>
- </div>
- <div class="four columns">
- <? include("includes/_download.php"); ?>
- </div>
- </div>
-
- <div class="row">
- <div class="twelve columns">
- <dl class="nice tabs mobile show-on-phones">
- <dd><a href="index.php">Getting Started</a></dd>
- <dd><a href="grid.php">Grid</a></dd>
- <dd><a href="buttons.php" class="active">Buttons</a></dd>
- <dd><a href="forms.php">Forms</a></dd>
- <dd><a href="layout.php">Layout</a></dd>
- <dd><a href="ui.php">UI</a></dd>
- <dd><a href="orbit.php">Orbit</a></dd>
- <dd><a href="reveal.php">Reveal</a></dd>
- <dd><a href="qa.php">QA</a></dd>
- </dl>
- </div>
- </div>
-
-<?php include("includes/_documentation_foot.php"); ?>
View
278 marketing/docs/f2/forms.php
@@ -1,278 +0,0 @@
-<? $page_title = "Forms" ?>
-<?php include("includes/_documentation_head.php"); ?>
-<style>
-/* input, select {display: inline !important;}*/
-</style>
- <div class="container">
- <div class="row">
- <div class="twelve columns">
- <div class="foundation-header">
- <h1><a href="index.php">Foundation Docs</a></h1>
- <h4 class="subheader">Rapid prototyping and building library from ZURB.</h4>
- </div>
- </div>
- </div>
-
- <div class="row">
- <div class="two columns">
- <dl class="nice tabs vertical hide-on-phones">
- <dd><a href="index.php">Getting Started</a></dd>
- <dd><a href="grid.php">Grid</a></dd>
- <dd><a href="buttons.php">Buttons</a></dd>
- <dd><a href="forms.php" class="active">Forms</a></dd>
- <dd><a href="layout.php">Layout</a></dd>
- <dd><a href="ui.php">UI</a></dd>
- <dd><a href="orbit.php">Orbit</a></dd>
- <dd><a href="reveal.php">Reveal</a></dd>
- <dd><a href="gems.php">Gems</a></dd>
- <dd><a href="qa.php">QA</a></dd>
- </dl>
- </div>
- <div class="six columns">
- <h3>Forms</h3>
- <h4 class="subheader">Forms are not a lot of fun. We've taken that lack of fun and dodged it with this ready-made code. In this release there are two sets of forms styles - basic and nice. Both are simple, both are flexible, both are easy to customize. <strong>Make sure to include app.js if you're going to use these forms.</strong></h4>
- <hr />
-
- <h4>Forms</h4>
- <form>
- <p>Inputs support a number of different base classes. Any text input has a class of 'input-text' and supports several sizes:</p>
- <label for="standardInput">Standard Input</label>
- <input type="text" class="input-text" id="standardInput" />
-
- <label for="smallInput">Small Input</label>
- <input type="text" class="small input-text" id="smallInput" />
-
- <label for="mediumInput">Medium Input</label>
- <input type="text" class="medium input-text" id="mediumInput" />
-
- <label for="largeInput">Large Input</label>
- <input type="text" class="large input-text" id="largeInput" />
-
- <label for="expandedInput">Expanded (Full Width) Input</label>
- <input type="text" class="expand input-text" id="expandedInput" />
-
- <label for="oversizeInput">Oversize Input</label>
- <input type="text" class="oversize input-text" id="oversizeInput" />
-
- <h5>Inline Labels</h5>
- <p>Inline labels are accomplished using the HTML5 Placeholder attribute, with a built-in JS fallback.</p>
- <input type="text" class="input-text" placeholder="Inline label" />
-
-
- <h5>Error States</h5>
- <p>Error states can be applied in two ways:</p>
- <ul class="disc">
- <li>Using a wrapper for div.form-field.error, which will apply styles to text inputs, labels, and a small.error message (optional). This is ideal for programmatically generated forms.</li>
- <li>You can also apply the .red class to labels, inputs, and also append a small.error.</li>
- </ul>
-
- <div class='form-field error'>
- <label for="mediumInputWrapper">Medium Input (with wrapper)</label>
- <input type="text" class="medium input-text" id="mediumInputWrapper" />
- <small>Whoa, cowboy. Try that again.</small>
- </div>
-
- <label class="red" for="errorInput">Medium Input</label>
- <input type="text" class="medium input-text red" id="errorInput" />
- <small class="error">Whoa, cowboy. Try that again.</small>
-
- <label for="standardTextarea">Textarea</label>
- <textarea id="standardTexted">This is a textarea</textarea>
-
- <label for="inlineTextarea">Inline Label Textarea</label>
- <textarea placeholder="This is a text area" id="inlineTextarea"></textarea>
-
- <label for="checkbox1"><input type="checkbox" id="checkbox1"> Label for Checkbox</label>
-
- <label for="radio1"><input type="radio" id="radio1"> Label for Radio</label>
-
- <label for="standardDropdown">Dropdown Label</label>
- <select id="standardDropdown">
- <option>This is a dropdown</option>
- <option>This is another option</option>
- <option>Look, a third option</option>
- </select>
-
- <div class="row">
- <div class="seven columns">
- <fieldset>
- <h5>Fieldset Header H5</h5>
- <p>This is a paragraph within a fieldset.</p>
-
- <label for="fieldsetInput">Standard Input</label>
- <input type="text" class="input-text" id="fieldsetInput" />
- </fieldset>
- </div>
- </div>
- </form>
-
- <hr />
-
- <h4>Nice Forms</h4>
- <form class="nice">
- <p>Changing the form style to a slightly fancier version is dead simple - just add a class of 'nice' to the form itself.</p>
-
- <label for="standardNiceInput">Standard Input</label>
- <input type="text" class="input-text" id="standardNiceInput" />
-
- <input type="text" placeholder="Inline label" class="input-text" />
-
- <label for="smallNiceInput">Small Input</label>
- <input type="text" class="small input-text" id="smallNiceInput" />
-
- <div class='form-field error'>
- <label for="mediumNiceInput">Medium Input (with wrapper)</label>
- <input type="text" class="medium input-text" id="mediumNiceInput" />
- <small>Whoa, cowboy. Try that again.</small>
- </div>
-
- <label class="red" for="errorNiceInput">Medium Input</label>
- <input type="text" class="medium red input-text" id="errorNiceInput" />
- <small class="error">Whoa, cowboy. Try that again.</small>
-