Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

removed marketing site

  • Loading branch information...
commit 4f9427e9dd88186806ca0dfab757d6ba7b19575c 1 parent acfb652
Mark Hayes mhayes authored
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 (303) changed.
58 config/assets.yml
View
@@ -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
63 marketing/404.php
View
@@ -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"); ?>
217 marketing/about.php
View
@@ -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"); ?>
95 marketing/cache/navigation_bar.html
View
@@ -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>
71 marketing/case-flite.php
View
@@ -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"); ?>
61 marketing/case-reel.php
View
@@ -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"); ?>
63 marketing/case-soapbox.php
View
@@ -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"); ?>
62 marketing/case-swizzle.php
View
@@ -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"); ?>
62 marketing/case-zurbjobs.php
View
@@ -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"); ?>
9 marketing/config.rb
View
@@ -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 }
169 marketing/docs/buttons.php
View
@@ -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"); ?>
262 marketing/docs/elements.php
View
@@ -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"); ?>
122 marketing/docs/f2/buttons.php
View
@@ -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"); ?>
278 marketing/docs/f2/forms.php
View
@@ -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>
-
- <label for="largeNiceInput">Large Input</label>
- <input type="text" class="large input-text" id="largeNiceInput" />
-
- <label for="expandedNiceInput">Expanded (Full Width) Input</label>
- <input type="text" class="expand input-text" id="expandedNiceInput" />
-
- <label for="oversizeNiceInput">Oversize Input</label>
- <input type="text" class="oversize input-text" id="oversizeNiceInput" />
-
- <label for="niceTextarea">Textarea</label>
- <textarea id="niceTextarea">This is a textarea</textarea>
-
- <label for="inlineNiceTextarea">Inline Label Textarea</label>
- <textarea placeholder="This is a text area" id="inlineNiceTextarea"></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="niceDropdown">Dropdown Label</label>
- <select id="niceDropdown">
- <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 H2</h5>
- <p>This is a paragraph within a fieldset.</p>
-
- <label for="niceFieldsetInput">Standard Input</label>
- <input type="text" class="input-text" id="niceFieldssetInput" />
- </fieldset>
- </div>
- </div>
- </form>
-
- <hr />
-
- <h3>Custom Forms</h3>
-
- <form class="custom">
- <p>Creating easy to style custom form elements is so crazy easy, it's practically a crime. Just add a class of 'custom' to a form and, if you want, jquery.customforms.js will do everything for you.</p>
- <p>The Foundation forms js will look for any checkbox, radio button, or select element and replace it with custom markup that is already styled with forms.css.</p>
- <p>If you want to avoid a potential flash (waiting for js to load and replace your default elements) you can supply the custom markup as part of the page, and the js will instead simply map the custom elements to the inputs.</p>
- <p>Foundation custom forms will even correctly respect and apply default states for radio, checkbox and select elements. You can use the 'checked' or 'selected' properties just like normal, and the js will apply that as soon as the page loads.</p>
- <p>
- <script type="text/javascript" src="http://snipt.net/embed/d1ce9f919728c0d52fc0ed0ef4600224"></script>
- </p>
-
-
-
- <h5>Radio Buttons</h5>
- <p>
- <script type="text/javascript" src="http://snipt.net/embed/8fcb1d67179ebc3e79b873419be04bf2"></script>
- </p>
-
- <h5>Checkboxes</h5>
- <p>
- <script type="text/javascript" src="http://snipt.net/embed/01d86277dee91bab34dd1baed52d2c18"></script>
- </p>
-
- <div class="row">
- <div class="four columns">
- <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 1</label>
- <label for="radio2"><input name="radio1" type="radio" id="radio2" style="display:none;"><span class="custom radio checked"></span> Radio Button 2</label>
- <label for="radio3"><input name="radio1" type="radio" id="radio3" style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
- </div>
- <div class="four columns">
- <label for="radio4"><input name="radio2" type="radio" id="radio4"> Radio Button 1</label>
- <label for="radio5"><input name="radio2" CHECKED type="radio" id="radio5"> Radio Button 2</label>
- <label for="radio6"><input name="radio2" type="radio" id="radio6"> Radio Button 3</label>
- </div>
- <div class="four columns">
- <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>
- <label for="checkbox2"><input type="checkbox" id="checkbox2" checked style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
- <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3"> Label for Checkbox</label>
- </div>
- </div>
-
- <h5>Dropdown / Select Elements</h5>
- <p>
- <script type="text/javascript" src="http://snipt.net/embed/bb153a86cba41617b41d91268828bb42"></script>
- </p>
-
- <label for="customDropdown">Dropdown Label</label>
- <select style="display:none;" id="customDropdown">
- <option SELECTED>This is a dropdown</option>
- <option>This is another option</option>
- <option>Look, a third option</option>
- </select>
- <div class="custom dropdown">
- <a href="#" class="current">
- This is a dropdown
- </a>
- <a href="#" class="selector"></a>
- <ul>
- <li>This is a dropdown</li>
- <li>This is another option</li>
- <li>Look, a third option</li>
- </ul>
- </div>
-
- <label for="customDropdown2">Dropdown Label</label>
- <select id="customDropdown2">
- <option>This is a dropdown</option>
- <option SELECTED>This is another option</option>
- <option>Look, a third option</option>
- </select>
-
- </form>
-
- <h5>Adding Custom Forms with JavaScript</h5>
-
- <p>If you are creating these custom forms using JavaScript (via AJAX, JavaScript templates or whatever), you will also need to create the custom markup that Foundation typically creates for you.</p>
-
- <p>Foundation detects any custom forms when the document has loaded and adds the custom markup required to make the forms pretty. However if you are adding these forms after the document has loaded, Foundation does not know to append this markup.</p>
-
- <p>All the custom forms events are bound using jQuery.fn.on(), so you don't need to worry about event handlers not being bound to new elements.</p>
-
- </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">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="qa.php">QA</a></dd>
- </dl>
- </div>
- </div>
-
-
-<?php include("includes/_documentation_foot.php"); ?>
127 marketing/docs/f2/gems.php
View
@@ -1,127 +0,0 @@
-<? $page_title = "Rails Gem"; ?>
-<?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">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" class="active">Gems</a></dd>
- <dd><a href="qa.php">QA</a></dd>
- </dl>
- </div>
- <div class="six columns">
- <h3>Gems</h3>
- <h4 class="subheader">We've created a couple awesome gems that will help you use Foundation in new ways!</h4>
- <!-- <h4 class="subheader">Want to use Foundation in a Rails 3.1+ application? Use our gem, it'll make it super duper easy!</h4> -->
-
- <dl class="tabs">
- <dd><a href="#compass" class="active"><strong>Compass/SASS</strong></a></dd>
- <dd><a href="#rails"><strong>Rails</strong></a></dd>
- </dl>
-
- <ul class="tabs-content">
- <li class="active" id="compassTab">
- <h4>What is this Thing?</h4>
- <p>Our Foundation Compass Gem makes is really easy to create a project that uses Compass and SASS to add to the speed and flexibility of Foundation. Following our instructions will ensure you have all the dependencies installed on your machine and are ready to rock 'n roll.</p>
-
- <h4>Installation</h4>
- <p>The following line of code, ran in the command line, will install our Foundation Compass Gem, as well as, all its dependencies onto your machine. From here you'll be able to create your first project and start crushing it.</p>
- <p><script type="text/javascript" src="http://snipt.net/embed/6c8d15f730bd05a7f6e19ac7777ec3db"></script></p>
-
- <h4>Create Your First Project</h4>
- <p>In the command line, navigate to the directory you'd like to use for your new project or include the path with your 'compass create' command. This will create a directory that includes all the Foundation files.</p>
- <p><script type="text/javascript" src="http://snipt.net/embed/7dadb17aa6b95f469d55c1c3fffd6b53"></script></p>
- <p>Our Compass Gem defaults to SCSS, but can easily be switched to SASS on the fly when you create a project, just run the following:</p>
- <p><script type="text/javascript" src="http://snipt.net/embed/1f8dc276f8040001419c64e9d18f09cd"></script></p>
-
- <h5>Adding to Existing Projects</h5>
- <p>We've also made it very easy to add our gem to existing project. You just need to make sure to add <strong>require "ZURB-foundation"</strong> to the top of your config file. Then navigate to your project directory and run:</p>
- <p><script type="text/javascript" src="http://snipt.net/embed/49b9cebdffc1ef28654b73c1e656602b"></script></p>
-
- <h5>Customizable Settings</h5>
- <p>We're in the process of making our gem even more customizable! Here are the settings we've extrapolated so far, just uncomment them and change to what you need:</p>
- <ul class="disc">
- <li><strong>$experimental-support-for-khtml</strong>&ndash; Set this to true to add support </li>
- <li><strong>$experimental-support-for-microsoft</strong>&ndash; Set this to true to add support </li>
- <li><strong>$helvetica-font-stack</strong>&ndash; Customize the default font stack we use.</li>
- <li><strong>$body-font-size</strong>&ndash; Default font size.</li>
- <li><strong>$body-font-family</strong>&ndash; Default font family.</li>
- <li><strong>$body-background</strong>&ndash; Default background color.</li>
- <li><strong>$body-line-height</strong>&ndash; Default line height.</li>
- <li><strong>$body-color</strong>&ndash; Default font color.</li>
- <li><strong>$grid-max-width</strong>&ndash; Change the size of the grid.</li>
- <li><strong>$grid-min-width</strong>&ndash; How small the grid can go.</li>
- <li><strong>$support-block-grid-nth-child</strong>&ndash; Set to true if you want support.</li>
- <li><strong>$button-transition-duration</strong>&ndash; How long the hover effects will last.</li>
- <li><strong>$default-color</strong>&ndash; The main color for styling your elements.</li>
- </ul>
-
- <h4>Using Compass to Compile Your SASS/SCSS into CSS</h4>
- <p>Navigate into your new project directory from the command line and run the following line, which will tell Compass to watch your sass files for when you save. Each time you save, Compass will compile the file into plain CSS and give you error if there are any.</p>
- <p><script type="text/javascript" src="http://snipt.net/embed/c9c8c237f2e7ad74c01ef6e272513dd6"></script></p>
-
- <h4>Contributing to the Gem</h4>
- <p>This little gem is <a href="https://github.com/zurb/foundation-sass">hosted on git</a>. If you have questions or bugs please file them through Git, but you can also talk to us if you want to get into Foundation and help build out the next generation way of rapidly prototyping. Yeah, we're thinking big.</p>
- </li>
-
- <li id="railsTab">
- <h4>Installation</h4>
- <p>Inside your Gemfile add the following line:</p>
-
- <p><script src="http://snipt.net/embed/23791244b304c2be8b57d1d123472d11"></script></p>
-
- <h4>Get Started</h4>
- <p>If you want to include Foundation on all of your application pages (and why wouldn't you!) then run the following to append foundation to your application sprockets files:</p>
-
- <p><script type="text/javascript" src="http://snipt.net/embed/60fc96068ebfe0ef56e0cb43ba360c30"></script></p>
-
- <h4>Advanced</h4>
- <p>You can also manually include Foundation on specific pages using:</p>
-
- <p><script type="text/javascript" src="http://snipt.net/embed/115425310b7fff02bb26554c5abef947"></script></p>
-
- <h4>Contributing to the Gem</h4>
- <p>This little gem is <a href="https://github.com/zurb/foundation-rails">hosted on git</a>. If you have questions or bugs please file them through Git, but you can also talk to us if you want to get into Foundation and help build out the next generation way of rapidly prototyping. Yeah, we're thinking big.</p>
- </li>
- </ul>
-
- </div>
- <div class="four columns">
- <? include("includes/_download.php"); ?>
- </div>