Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

updated marketing site and compass generator

  • Loading branch information...
commit 3a7793740851d0a4e34c4ef4b961b24d90533f48 1 parent 72c872a
@mhayes mhayes authored
Showing with 10,492 additions and 0 deletions.
  1. +1 −0  .gitignore
  2. +214 −0 marketing/404.html
  3. +113 −0 marketing/about.php
  4. BIN  marketing/apple-touch-icon.png
  5. +308 −0 marketing/boxsizing.htc
  6. +95 −0 marketing/cache/navigation_bar.html
  7. +106 −0 marketing/case-flite.php
  8. +85 −0 marketing/case-foundation.php
  9. +85 −0 marketing/case-reel.php
  10. +85 −0 marketing/case-soapbox.php
  11. +86 −0 marketing/case-swizzle.php
  12. +87 −0 marketing/case-zurbjobs.php
  13. +10 −0 marketing/config.rb
  14. +122 −0 marketing/docs/buttons.php
  15. +278 −0 marketing/docs/forms.php
  16. +127 −0 marketing/docs/gems.php
  17. +469 −0 marketing/docs/grid.php
  18. +90 −0 marketing/docs/includes/_documentation_foot.php
  19. +84 −0 marketing/docs/includes/_documentation_head.php
  20. +18 −0 marketing/docs/includes/_download.php
  21. +126 −0 marketing/docs/index.php
  22. +127 −0 marketing/docs/layout.php
  23. +84 −0 marketing/docs/orbit.php
  24. +179 −0 marketing/docs/presentation.css
  25. +5 −0 marketing/docs/presentation.js
  26. +164 −0 marketing/docs/qa.php
  27. +87 −0 marketing/docs/reveal.php
  28. +461 −0 marketing/docs/ui.php
  29. BIN  marketing/favicon.ico
  30. BIN  marketing/files/foundation-download-2.1.2.zip
  31. BIN  marketing/files/foundation-download-2.1.3.zip
  32. BIN  marketing/files/foundation-download-2.1.4.zip
  33. BIN  marketing/files/foundation-download-2.1.5.zip
  34. BIN  marketing/files/foundation-download-2.2.1.zip
  35. BIN  marketing/files/foundation-download-2.2.zip
  36. BIN  marketing/files/foundation-psd-templates.zip
  37. BIN  marketing/files/lurking-yeti-1024x768.jpg
  38. BIN  marketing/files/lurking-yeti-1440x900.jpg
  39. BIN  marketing/files/lurking-yeti-1680x1050.jpg
  40. BIN  marketing/files/lurking-yeti-400x300.jpg
  41. BIN  marketing/files/lurking-yeti-640x960.jpg
  42. BIN  marketing/files/tropical-yeti-1024x768.jpg
  43. BIN  marketing/files/tropical-yeti-1440x900.jpg
  44. BIN  marketing/files/tropical-yeti-1680x1050.jpg
  45. BIN  marketing/files/tropical-yeti-400x300.jpg
  46. BIN  marketing/files/tropical-yeti-640x960.jpg
  47. BIN  marketing/files/yeti-dance-1024x768.jpg
  48. BIN  marketing/files/yeti-dance-1440x900.jpg
  49. BIN  marketing/files/yeti-dance-1680x1050.jpg
  50. BIN  marketing/files/yeti-dance-400x300.jpg
  51. BIN  marketing/files/yeti-dance-640x960.jpg
  52. BIN  marketing/files/yeti-love-1024x768.jpg
  53. BIN  marketing/files/yeti-love-1440x900.jpg
  54. BIN  marketing/files/yeti-love-1680x1050.jpg
  55. BIN  marketing/files/yeti-love-400x300.jpg
  56. BIN  marketing/files/yeti-love-640x960.jpg
  57. BIN  marketing/files/yeti.zip
  58. +39 −0 marketing/github.js
  59. +126 −0 marketing/grid-example1.php
  60. +116 −0 marketing/grid-example2.php
  61. +100 −0 marketing/grid-example3.php
  62. +75 −0 marketing/grid.php
  63. +77 −0 marketing/humans.txt
  64. BIN  marketing/images/button-gloss.png
  65. BIN  marketing/images/by-zurb.png
  66. BIN  marketing/images/case-flite1.jpg
  67. BIN  marketing/images/case-flite2.jpg
  68. BIN  marketing/images/case-foundation-1.jpg
  69. BIN  marketing/images/case-foundation-2.jpg
  70. BIN  marketing/images/case-foundation-3.jpg
  71. BIN  marketing/images/case-foundation.jpg
  72. BIN  marketing/images/case-reel-1.jpg
  73. BIN  marketing/images/case-reel-2.jpg
  74. BIN  marketing/images/case-reel-3.jpg
  75. BIN  marketing/images/case-reel.jpg
  76. BIN  marketing/images/case-soapbox-1.jpg
  77. BIN  marketing/images/case-soapbox-2.jpg
  78. BIN  marketing/images/case-soapbox-3.jpg
  79. BIN  marketing/images/case-soapbox.jpg
  80. BIN  marketing/images/case-swizzle-1.jpg
  81. BIN  marketing/images/case-swizzle-2.jpg
  82. BIN  marketing/images/case-swizzle-3.jpg
  83. BIN  marketing/images/case-swizzle.jpg
  84. BIN  marketing/images/case-zurbjobs-1.jpg
  85. BIN  marketing/images/case-zurbjobs-2.jpg
  86. BIN  marketing/images/case-zurbjobs-3.jpg
  87. BIN  marketing/images/case-zurbjobs.jpg
  88. BIN  marketing/images/check.png
  89. BIN  marketing/images/device-shadow.png
  90. BIN  marketing/images/devices-awesomeness.png
  91. BIN  marketing/images/error.png
  92. +1 −0  marketing/images/foundation
  93. BIN  marketing/images/foundation-yeti.png
  94. BIN  marketing/images/grid-banner.jpg
  95. BIN  marketing/images/grid-bg.png
  96. BIN  marketing/images/grid-example-1.jpg
  97. BIN  marketing/images/grid-example-2.jpg
  98. BIN  marketing/images/grid-example-3.jpg
  99. BIN  marketing/images/homepage-yeti.png
  100. BIN  marketing/images/icon-docs.png
  101. BIN  marketing/images/icon-download.png
  102. BIN  marketing/images/icon-grid.png
  103. BIN  marketing/images/icon-left-arrow.png
  104. BIN  marketing/images/icon-mobile.png
  105. BIN  marketing/images/icon-right-arrow.jpg
  106. BIN  marketing/images/icon-right-arrow.png
  107. BIN  marketing/images/icon-swipe.png
  108. BIN  marketing/images/icon-ui.png
  109. BIN  marketing/images/img-foundation.jpg
  110. BIN  marketing/images/img-reel.jpg
  111. BIN  marketing/images/img-soapbox.jpg
  112. BIN  marketing/images/img-swizzle.jpg
  113. BIN  marketing/images/img-zurbjobs.jpg
  114. BIN  marketing/images/logo-coke-alt.png
  115. BIN  marketing/images/logo-coke.png
  116. BIN  marketing/images/logo-dynamo.png
  117. BIN  marketing/images/logo-fb-alt.png
  118. BIN  marketing/images/logo-fb.png
  119. BIN  marketing/images/logo-netflix-alt.png
  120. BIN  marketing/images/logo-netflix.png
  121. BIN  marketing/images/logo-nytimes-alt.png
  122. BIN  marketing/images/logo-nytimes.png
  123. BIN  marketing/images/logo-rcs-alt.png
  124. BIN  marketing/images/logo-rcs.png
  125. BIN  marketing/images/logo-reel-alt.png
  126. BIN  marketing/images/logo-reel.png
  127. BIN  marketing/images/logo-soapbox-alt.png
  128. BIN  marketing/images/logo-soapbox.png
  129. BIN  marketing/images/logo-venyu-alt.png
  130. BIN  marketing/images/mobile-banner.jpg
  131. BIN  marketing/images/mobile-example-1.jpg
  132. BIN  marketing/images/mobile-example-2.jpg
  133. BIN  marketing/images/mobile-example-3.jpg
  134. BIN  marketing/images/mobileimg-foundation.jpg
  135. BIN  marketing/images/mobileimg-reel.jpg
  136. BIN  marketing/images/mobileimg-soapbox.jpg
  137. BIN  marketing/images/mobileimg-swizzle.jpg
  138. BIN  marketing/images/mobileimg-zurbjobs.jpg
  139. BIN  marketing/images/octocat.png
  140. BIN  marketing/images/orbit-demo/captions.jpg
  141. BIN  marketing/images/orbit-demo/coffee.jpg
  142. BIN  marketing/images/orbit-demo/ezio.jpg
  143. BIN  marketing/images/orbit-demo/features.jpg
  144. BIN  marketing/images/orbit-demo/link.jpg
  145. BIN  marketing/images/orbit-demo/marcusfenix.jpg
  146. BIN  marketing/images/orbit-demo/masterchief.jpg
  147. BIN  marketing/images/orbit-demo/overflow.jpg
  148. BIN  marketing/images/orbit-demo/slider-background.jpg
  149. BIN  marketing/images/prototype-banner.jpg
  150. BIN  marketing/images/prototype-example-1.jpg
  151. BIN  marketing/images/prototype-example-2.jpg
  152. BIN  marketing/images/prototype-example-3.jpg
  153. BIN  marketing/images/spinner.gif
  154. BIN  marketing/images/white-fade.png
  155. +95 −0 marketing/includes/_footer.php
  156. +87 −0 marketing/includes/_header.php
  157. +158 −0 marketing/index.php
  158. +1 −0  marketing/javascripts/foundation
  159. +433 −0 marketing/jswipe.js
  160. +94 −0 marketing/mobile-example1.php
  161. +63 −0 marketing/mobile-example2.php
  162. +129 −0 marketing/mobile-example3.php
  163. +75 −0 marketing/mobile.php
  164. +110 −0 marketing/prototype-example1.php
  165. +153 −0 marketing/prototype-example2.php
  166. +78 −0 marketing/prototyping.php
  167. +4 −0 marketing/robots.txt
  168. +601 −0 marketing/sass/presentation.sass
  169. +4,062 −0 marketing/stylesheets/presentation.css
  170. +119 −0 marketing/swipe.js
View
1  .gitignore
@@ -16,3 +16,4 @@ test/tmp
test/version_tmp
tmp
*.DS_Store
+marketing/.sass-cache/*
View
214 marketing/404.html
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
+<head>
+ <meta charset="utf-8" />
+
+ <!-- Set the viewport width to device width for mobile -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+ <meta name="description" content="Foundation is an easy to use, powerful, and flexible framework for building rapid prototypes and production code on any kind of device." />
+
+ <title>Foundation: Lost Yeti (404)</title>
+ <link rel="apple-touch-icon" href="apple-touch-icon.png" />
+ <link rel="icon" type="image/ico" href="favicon.ico">
+
+ <!-- Included CSS Files -->
+ <link rel="stylesheet" href="../stylesheets/globals.css">
+ <link rel="stylesheet" href="../stylesheets/typography.css">
+ <link rel="stylesheet" href="../stylesheets/grid.css">
+ <link rel="stylesheet" href="../stylesheets/ui.css">
+ <link rel="stylesheet" href="../stylesheets/forms.css">
+ <link rel="stylesheet" href="../stylesheets/orbit.css">
+ <link rel="stylesheet" href="../stylesheets/reveal.css">
+ <link rel="stylesheet" href="../stylesheets/app.css">
+ <link rel="stylesheet" href="../stylesheets/mobile.css">
+ <link rel="stylesheet" href="presentation.css">
+
+ <!--[if lt IE 9]>
+ <link rel="stylesheet" href="src/stylesheets/ie.css">
+ <![endif]-->
+
+ <!-- IE Fix for HTML5 Tags -->
+ <!--[if lt IE 9]>
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+ <script src="../javascripts/jquery.min.js"></script>
+ <script src="jswipe.js"></script>
+ <script src="../javascripts/jquery.reveal.js"></script>
+ <script src="../javascripts/jquery.orbit-1.4.0.js"></script>
+ <script src="../javascripts/jquery.customforms.js"></script>
+ <script src="../javascripts/jquery.placeholder.min.js"></script>
+ <script src="../javascripts/app.js"></script>
+ <script src="swipe.js"></script>
+ <script src="github.js"></script>
+
+
+ <script>
+ $(window).load(function() {
+ $('#featured').orbit({
+ animation: 'fade',
+ animationSpeed: 800,
+ timer: true,
+ advanceSpeed: 12000,
+ captionAnimation: "fade",
+ captionAnimationSpeed: 800
+ });
+ });
+ </script>
+
+
+</head>
+<body>
+
+
+ <!-- ZURBar -->
+ <div id="zurBar" class="container">
+ <div class="row">
+ <div class="four columns">
+ <h1><a href="./">Foundation</a></h1>
+ </div>
+ <div class="eight columns hide-on-phones">
+ <strong class="right">
+ <a href="grid.php">Features</a>
+ <a href="case-soapbox.php">Case Studies</a>
+ <a href="docs/">Documentation</a>
+ <a href="http://github.com/zurb/foundation">Github</a>
+ <a href="files/foundation-download.zip" class="small blue nice button src-download">Download</a>
+
+ </strong>
+ </div>
+ <!--
+<div class="two columns">
+ <h2 class="right"><a href="http://www.zurb.com">by ZURB</a></h2>
+ </div>
+-->
+ </div>
+ </div>
+ <!-- /ZURBar -->
+
+
+ <!-- Grid BG -->
+ <div id="gridBgShort" class="container">
+ <div class="white-fade hide-on-phones"></div>
+ <div class="row">
+ <div class="one columns"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div>
+ </div>
+ </div>
+ <!-- /Grid BG -->
+
+ <div id="insideContainer" class="container">
+ <div class="row hide-on-phones">
+ <a href="index.php" class="back two columns hide-on-phones">&larr; Home</a>
+ </div>
+
+
+ <div class="row">
+ <div class="nine columns">
+ <h1>Crap. We can't find that.</h1>
+ <h5 class="subheader">Nerdy technical code: 404</h5>
+
+ <div class="row">
+ <div class="three columns">
+ <p>
+ <a href="/">Home &rarr;</a><br />
+ <a href="grid.php">Features &rarr;</a><br />
+ <a href="docs/">Documentation &rarr;</a><br />
+ <a href="files/foundation-download.zip">Download &rarr;</a><br />
+ <a href="http://github.com/zurb/foundation">Foundation on Github &rarr;</a>
+ </p>
+ </div>
+ <div class="six columns">
+ <p>Here are a few common locations that you might have been looking for. If none of these work for you and you're absolutely, totally, crazy go nuts positive you've got the right address you can send us an email at <a href="mailto:foundation@zurb.com">foundation@zurb.com</a> and let us know.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+
+ <div class="row">
+ <nav class="ten columns show-on-phones">
+ <ul>
+ <li><a href="#">Documentation</a></li>
+ <li><a href="#">On Github</a></li>
+ <li><a class="nice small blue button src-download" href="files/foundation-download.zip">Download</a></li>
+ </ul>
+ </nav>
+ </div>
+
+
+
+ <!-- Das Footer -->
+ <footer class="row">
+ <section class="five columns">
+ <h6><strong>Made by ZURB</strong></h6>
+ <p>Foundation is made by <a href="http://www.zurb.com/">ZURB</a>, an <a href="http://www.zurb.com/words/design-process">interaction design and strategy company</a> located in Campbell, California. We've put over 10 years of experience building web products, services and websites into this framework. <a href="about.php">Foundation Info and Goodies &rarr;</a></p>
+ </section>
+
+ <section class="three columns">
+ <h6><strong>Using Foundation?</strong></h6>
+ <p>Let us know how you're using Foundation and we might feature you as an example! <a href="mailto:foundation@zurb.com?subject=I'm%20using%20Foundation">Get in touch &rarr;</a></p>
+ </section>
+
+ <section class="four columns">
+ <h6><strong>Need some help?</strong></h6>
+ <p>For quick answers or help <a href="mailto:foundation@zurb.com">email us &rarr;</a></p>
+
+ <ul class="block-grid three-up">
+ <li>
+ <!-- Place this tag where you want the +1 button to render -->
+ <g:plusone size="medium"></g:plusone>
+
+ <!-- Place this render call where appropriate -->
+ <script>
+ (function() {
+ var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
+ po.src = 'https://apis.google.com/js/plusone.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
+ })();
+ </script>
+ </li>
+ <li>
+
+ <iframe allowtransparency="true" frameborder="0" scrolling="no"
+ src="http://platform.twitter.com/widgets/follow_button.html?screen_name=foundationzurb"
+ style="width:80px; height:20px;"></iframe>
+ </li>
+ <li>
+ <iframe src="http://www.facebook.com/plugins/like.php?app_id=273982815961057&amp;href=foundation.zurb.com&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=lucida+grande&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
+ </li>
+ </div>
+ </section>
+ </footer>
+ <!-- /Das Footer -->
+ </div>
+ <!-- /Main Container -->
+
+ <script>
+
+ var _gaq = _gaq || [];
+ _gaq.push(
+ ['_setAccount', 'UA-2195009-2'],
+ ['_trackPageview'],
+ ['b._setAccount', 'UA-2195009-27'],
+ ['b._trackPageview']
+ );
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+ $(document).on('click', '.src-download', function (event) {
+ _gaq.push(['_trackEvent', 'Foundation', 'Downloaded']);
+ });
+ </script>
+</body>
+</html>
View
113 marketing/about.php
@@ -0,0 +1,113 @@
+<? $page_title = "Goodies" ?>
+<?php include("includes/_header.php"); ?>
+
+ <!-- Grid BG -->
+ <div id="gridBgShort" class="container hide-on-phones">
+ <div class="white-fade hide-on-phones"></div>
+ <div class="row">
+ <div class="one columns"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div>
+ </div>
+ </div>
+ <!-- /Grid BG -->
+
+ <div id="insideContainer" class="container">
+ <div class="row hide-on-phones">
+ <a href="index.php" class="back two columns hide-on-phones">&larr; Home</a>
+ </div>
+
+
+ <div class="row">
+ <div class="two columns">
+ <img src="images/foundation-yeti.png" />
+ </div>
+ <div class="eight columns">
+ <h1>All About Foundation</h1>
+ <h4>Foundation was developed by the team at <a href="http://www.zurb.com">ZURB</a>, an interaction design agency in Campbell, CA.</h4>
+ </div>
+ </div>
+ <br />
+ <br />
+
+ <div class="row">
+ <div class="four columns">
+ <h4>Why build it?</h4>
+ <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">
+ <h4>What's the catch?</h4>
+ <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">
+ <h4>Something's wrong!</h4>
+ <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">
+ <hr /><br /><br />
+ </div>
+
+ <div class="row">
+ <div class="six columns">
+ <h2>Why a yeti?</h2>
+ <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 class="show-on-desktops">Also if you're interested in covering Foundation for any sort of press, you can download a nice hi-res yeti below.</p><p class="hide-on-desktops">Also if you're interested in covering Foundation for any sort of press, you can download a nice hi-res yeti on this page on a desktop computer.</p>
+ <p class="show-on-desktops"><a href="files/yeti.zip">&darr; Download the yeti</a><br /><small>Bet you never thought you'd click a link like that.</small></p>
+ </div>
+ <div class="six columns hide-on-phones">
+ <div class="row">
+ <div class="six columns">
+ <img src="files/lurking-yeti-400x300.jpg" />
+ <a href="files/lurking-yeti-1024x768.jpg">1024x768</a> &bull; <a href="files/lurking-yeti-1440x900.jpg">1440x900</a> &bull; <a href="files/lurking-yeti-1680x1050.jpg">1680x1050</a>
+ </div>
+ <div class="six columns">
+ <img src="files/tropical-yeti-400x300.jpg" />
+ <a href="files/tropical-yeti-1024x768.jpg">1024x768</a> &bull; <a href="files/tropical-yeti-1440x900.jpg">1440x900</a> &bull; <a href="files/tropical-yeti-1680x1050.jpg">1680x1050</a>
+ </div>
+ </div>
+ <br /><br />
+ <div class="row">
+ <div class="six columns">
+ <img src="files/yeti-dance-400x300.jpg" />
+ <a href="files/yeti-dance-1024x768.jpg">1024x768</a> &bull; <a href="files/yeti-dance-1440x900.jpg">1440x900</a> &bull; <a href="files/yeti-dance-1680x1050.jpg">1680x1050</a>
+ </div>
+ <div class="six columns">
+ <img src="files/yeti-love-400x300.jpg" />
+ <a href="files/yeti-love-1024x768.jpg">1024x768</a> &bull; <a href="files/yeti-love-1440x900.jpg">1440x900</a> &bull; <a href="files/yeti-love-1680x1050.jpg">1680x1050</a>
+ </div>
+ </div>
+ </div>
+ <div class="six columns show-on-phones">
+ <h5>iPhone Desktops</h5>
+ <ul class="block-grid four-up">
+ <li>
+ <a href="files/lurking-yeti-640x960.jpg"><img src="files/lurking-yeti-640x960.jpg" /></a>
+ </li>
+ <li>
+ <a href="files/tropical-yeti-640x960.jpg"><img src="files/tropical-yeti-640x960.jpg" /></a>
+ </li>
+ <li>
+ <a href="files/yeti-dance-640x960.jpg"><img src="files/yeti-dance-640x960.jpg" /></a>
+ </li>
+ <li>
+ <a href="files/yeti-love-640x960.jpg"><img src="files/yeti-love-640x960.jpg" /></a>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+
+
+
+ <br><br>
+ <div class="row">
+ <nav class="ten columns hide-on-desktops">
+ <ul>
+ <li><a href="docs/">Documentation</a></li>
+ <li><a href="http://github.com/zurb/foundation">On Github</a></li>
+ <li><a class="nice small blue button src-download" href="files/foundation-download-<?= $version ?>.zip">Download</a></li>
+ </ul>
+ </nav>
+ </div>
+
+
+<?php include("includes/_footer.php"); ?>
View
BIN  marketing/apple-touch-icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
308 marketing/boxsizing.htc
@@ -0,0 +1,308 @@
+/**
+* CSS-JS-BOOSTER
+*
+* A polyfill for box-sizing: border-box for IE6 & IE7.
+*
+* JScript
+*
+* This program is free software: you can redistribute it and/or modify
+* it under the terms of the GNU Lesser General Public License as published
+* by the Free Software Foundation, either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+* GNU Lesser General Public License for more details.
+*
+* See <http://www.gnu.org/licenses/lgpl-3.0.txt>
+*
+* @category JScript
+* @package box-sizing-polyfill
+* @author Christian Schepp Schaefer <schaepp@gmx.de> <http://twitter.com/derSchepp>
+* @copyright 2010 Christian Schepp Schaefer
+* @license http://www.gnu.org/copyleft/lesser.html The GNU LESSER GENERAL PUBLIC LICENSE, Version 3.0
+* @link http://github.com/Schepp/box-sizing-polyfill
+*
+* PREFACE:
+*
+* This box-sizing polyfill is based on previous work done by Erik Arvidsson,
+* which he published in 2002 on http://webfx.eae.net/dhtml/boxsizing/boxsizing.html.
+*
+* USAGE:
+*
+* Add the behavior/HTC after every `box-sizing: border-box;` that you assign:
+*
+* box-sizing: border-box;
+* *behavior: url(/scripts/boxsizing.htc);`
+*
+* If you prefix the `behavior` property with a star, like seen above, it will only be seen by
+* IE6 & IE7, not by IE8+ (it's a hack) which is better for the performance on those newer browsers.
+*
+* The URL to the HTC file must be relative to your HTML(!) document, not relative to your CSS.
+* That's why I'd advise you to use absolute paths like in the example.
+*
+*/
+<component lightWeight="true">
+<attach event="onpropertychange" onevent="checkPropertyChange()" />
+<attach event="ondetach" onevent="restore()" />
+<attach event="onresize" for="window" onevent="restore();init()" />
+<script type="text/javascript">
+//<![CDATA[
+
+var viewportwidth = (typeof window.innerWidth != 'undefined' ? window.innerWidth : element.document.documentElement.clientWidth);
+// Shortcut for the document object
+var doc = element.document;
+
+/*
+* init gets called once at the start and then never again,
+* triggers box-sizing calculations and updates width and height
+*/
+function init(){
+ // check for IE8+
+ if(typeof(element.style.boxSizing) == "undefined"){
+ updateBorderBoxWidth();
+ updateBorderBoxHeight();
+ }
+}
+
+/*
+* restore gets called when the behavior is being detached (see event binding at the top),
+* resets everything like it was before applying the behavior
+*/
+function restore(){
+ // check for IE8+
+ if(typeof(element.style.boxSizing) == "undefined"){
+ element.runtimeStyle.width = "";
+ element.runtimeStyle.height = "";
+ }
+}
+
+/*
+* checkPropertyChange gets called as soon as an element property changes
+* (see event binding at the top), it then checks if any property influencing its
+* dimensions was changed and if yes recalculates width and height
+*/
+function checkPropertyChange(){
+ // check for IE8+
+ if(typeof(element.style.boxSizing) == "undefined"){
+ var pn = event.propertyName;
+ var undef;
+ if(pn == "style.boxSizing" && element.style.boxSizing == ""){
+ element.style.removeAttribute("boxSizing");
+ element.runtimeStyle.boxSizing = undef;
+ }
+ switch (pn){
+ case "style.width":
+ case "style.borderLeftWidth":
+ case "style.borderLeftStyle":
+ case "style.borderRightWidth":
+ case "style.borderRightStyle":
+ case "style.paddingLeft":
+ case "style.paddingRight":
+ updateBorderBoxWidth();
+ break;
+
+ case "style.height":
+ case "style.borderTopWidth":
+ case "style.borderTopStyle":
+ case "style.borderBottomWidth":
+ case "style.borderBottomStyle":
+ case "style.paddingTop":
+ case "style.paddingBottom":
+ updateBorderBoxHeight();
+ break;
+
+ case "className":
+ case "style.boxSizing":
+ updateBorderBoxWidth();
+ updateBorderBoxHeight();
+ break;
+ }
+ }
+}
+
+/*
+ * Helper function, taken from Dean Edward's IE7 framework,
+ * added by Schepp on 12.06.2010.
+ * http://code.google.com/p/ie7-js/
+ *
+ * Allows us to convert from relative to pixel-values.
+ */
+function getPixelValue(value){
+ var PIXEL = /^\d+(px)?$/i;
+ if (PIXEL.test(value)) return parseInt(value);
+ var style = element.style.left;
+ var runtimeStyle = element.runtimeStyle.left;
+ element.runtimeStyle.left = element.currentStyle.left;
+ element.style.left = value || 0;
+ value = parseInt(element.style.pixelLeft);
+ element.style.left = style;
+ element.runtimeStyle.left = runtimeStyle;
+
+ return value;
+}
+
+function getPixelWidth(object, value){
+ // For Pixel Values
+ var PIXEL = /^\d+(px)?$/i;
+ if (PIXEL.test(value)) return parseInt(value);
+
+ // For Percentage Values
+ var PERCENT = /^[\d\.]+%$/i;
+ if (PERCENT.test(value)){
+ try{
+ parentWidth = getPixelWidth(object.parentElement,(object.parentElement.currentStyle.width != "auto" ? object.parentElement.currentStyle.width : "100%"));
+ value = (parseFloat(value) / 100) * parentWidth;
+ }
+ catch(e){
+ value = (parseFloat(value) / 100) * element.document.documentElement.clientWidth;
+ }
+ return parseInt(value);
+ }
+
+ // For EM Values
+ var style = object.style.left;
+ var runtimeStyle = object.runtimeStyle.left;
+ object.runtimeStyle.left = object.currentStyle.left;
+ object.style.left = value || 0;
+ value = parseInt(object.style.pixelLeft);
+ object.style.left = style;
+ object.runtimeStyle.left = runtimeStyle;
+
+ return value;
+}
+
+
+/*
+ * getBorderWidth & friends
+ * Border width getters
+ */
+function getBorderWidth(sSide){
+ if(element.currentStyle["border" + sSide + "Style"] == "none"){
+ return 0;
+ }
+ var n = getPixelValue(element.currentStyle["border" + sSide + "Width"]);
+ return n || 0;
+}
+function getBorderLeftWidth() { return getBorderWidth("Left"); }
+function getBorderRightWidth() { return getBorderWidth("Right"); }
+function getBorderTopWidth() { return getBorderWidth("Top"); }
+function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
+
+
+/*
+ * getPadding & friends
+ * Padding width getters
+ */
+function getPadding(sSide) {
+ var n = getPixelValue(element.currentStyle["padding" + sSide]);
+ return n || 0;
+}
+function getPaddingLeft() { return getPadding("Left"); }
+function getPaddingRight() { return getPadding("Right"); }
+function getPaddingTop() { return getPadding("Top"); }
+function getPaddingBottom() { return getPadding("Bottom"); }
+
+
+
+/*
+ * getBoxSizing
+ * Get the box-sizing value for the current element
+ */
+function getBoxSizing(){
+ var s = element.style;
+ var cs = element.currentStyle
+ if(typeof s.boxSizing != "undefined" && s.boxSizing != ""){
+ return s.boxSizing;
+ }
+ if(typeof s["box-sizing"] != "undefined" && s["box-sizing"] != ""){
+ return s["box-sizing"];
+ }
+ if(typeof cs.boxSizing != "undefined" && cs.boxSizing != ""){
+ return cs.boxSizing;
+ }
+ if(typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != ""){
+ return cs["box-sizing"];
+ }
+ return getDocumentBoxSizing();
+}
+
+
+/*
+ * getDocumentBoxSizing
+ * Get the default document box sizing (check for quirks mode)
+ */
+function getDocumentBoxSizing(){
+ if(doc.compatMode == null || doc.compatMode == "BackCompat"){
+ return "border-box";
+ }
+ return "content-box"
+}
+
+
+/*
+ * setBorderBoxWidth & friends
+ * Width and height setters
+ */
+function setBorderBoxWidth(n){
+ element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
+ getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
+}
+function setBorderBoxHeight(n){
+ element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
+ getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
+}
+function setContentBoxWidth(n){
+ element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
+ getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
+}
+function setContentBoxHeight(n){
+ element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
+ getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
+}
+
+
+/*
+ * updateBorderBoxWidth & updateBorderBoxHeight
+ *
+ */
+function updateBorderBoxWidth() {
+ if(getDocumentBoxSizing() == getBoxSizing()){
+ return;
+ }
+ var csw = element.currentStyle.width;
+ if(csw != "auto"){
+ csw = getPixelWidth(element,csw);
+ if(getBoxSizing() == "border-box"){
+ setBorderBoxWidth(parseInt(csw));
+ }
+ else{
+ setContentBoxWidth(parseInt(csw));
+ }
+ }
+}
+
+function updateBorderBoxHeight() {
+ if(getDocumentBoxSizing() == getBoxSizing()){
+ return;
+ }
+ var csh = element.currentStyle.height;
+ if(csh != "auto"){
+ csh = getPixelValue(csh);
+ if(getBoxSizing() == "border-box"){
+ setBorderBoxHeight(parseInt(csh));
+ }
+ else{
+ setContentBoxHeight(parseInt(csh));
+ }
+ }
+}
+
+
+// Run the calculations
+init();
+
+//]]>
+</script>
+</component>
View
95 marketing/cache/navigation_bar.html
@@ -0,0 +1,95 @@
+<div class="container" id="megaDrop" style="display: none; ">
+ <div class="mobile-main-nav-padding">
+ <div class="row">
+ <div class="twelve columns">
+ <div class="sitemap-link"><a href="http://www.zurb.com/sitemap">Sitemap</a></div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="twelve columns center-content">
+ <a href="http://www.zurb.com"><img alt="Zurb-logo-drop-down" src="http://www.zurb.com/assets/logo/zurb-logo-drop-down.png"></a>
+ <p class="zurb-info-hover"><a href="http://www.zurb.com">ZURB is a close-knit team of product designers who help companies design better products faster. →</a></p>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="tablet-padding">
+ <div class="three columns property" id="zurbApps">
+ <h4><a href="http://zurb.com/apps"><small class="gray">ZURBapps</small></a></h4>
+ <p><a href="http://zurb.com/apps">ZURBapps helps you design great products faster through rapid prototyping, iteration and user feedback. →</a></p>
+ <hr>
+ <p>Check out some of our apps:</p>
+ <div class="row">
+ <div class="six columns">
+ <ul class="zurb-apps">
+ <li class="influence"><a href="http://www.influenceapp.com">Influence</a></li>
+ <li class="verify"><a href="http://www.verifyapp.com">Verify</a></li>
+ </ul>
+ </div>
+ <div class="six columns">
+ <ul class="zurb-apps">
+ <li class="notable"><a href="http://www.notableapp.com">Notable</a></li>
+ <li class="solidify"><a href="http://www.influenceapp.com">Solidify</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="show-on-phones"><br><br></div>
+ <div class="three columns property" id="zurbEvents">
+ <h4><a href="http://zurb.com/events"><small class="magenta">ZURBevents</small></a></h4>
+ <p><a href="http://zurb.com/events">Our ZURBevents explore the intersection of product design and business. →</a></p>
+ <hr>
+ <p>Come to ZURBsoapbox:</p>
+ <div class="zurb-soapbox">
+ <p>
+ <a href="http://www.zurb.com/soapbox/rsvp">
+ <strong>Jeff Atwood</strong>,
+ Founder of Stack Overflow, gets on his soapbox on
+ <strong>May 04, 2012</strong>
+ at ZURB HQ.<br>
+ RSVP Now →
+ </a>
+ </p>
+ </div>
+
+ </div>
+ <div class="show-on-phones"><br><br></div>
+ <div class="three columns property" id="zurbExpo">
+ <h4><a href="http://zurb.com/expo"><small class="yellow">ZURBexpo</small></a></h4>
+ <p><a href="http://zurb.com/expo">ZURBexpo is an exhibition of product design ideas to help you design great products faster. →</a></p>
+ <hr>
+ <p>Our latest blog post:</p>
+ <div class="zurb-blog">
+ <p>
+ <a href="http://www.zurb.com/blog/953">
+ <strong>Has Getting Our Attention Come Down to A Bear and A Flaming Meteor?</strong><br>
+ Read More →
+</a> </p>
+ </div>
+ </div>
+ <div class="show-on-phones"><br><br></div>
+ <div class="three columns property" id="zurbJobs">
+ <h4><a href="http://zurb.com/jobs"><small class="blue">ZURBjobs</small></a></h4>
+ <p><a href="http://zurb.com/jobs">ZURBjobs is a job board focused solely on mobile/web product designers &amp; engineers. →</a></p>
+ <hr>
+
+ <div class="zurb-jobs">
+ <p>Interested in this job?</p>
+ <p>
+ <a href="http://www.zurb.com/jobs/130-zurb-design-lead">
+ <strong>Design Lead</strong> at
+ <strong>ZURB</strong><br>
+ Read More →
+</a> </p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="drop-down-foundation">
+ <p><a href="http://foundation.zurb.com/"><span class="foundation-zurb">Foundation</span> An easy to use, powerful &amp; flexible framework for building prototypes and production code on any kind of device. →</a></p>
+ </div>
+ </div>
+ </div>
+</div>
View
106 marketing/case-flite.php
@@ -0,0 +1,106 @@
+<?
+ $page_title = "Flite Case Study";
+ $caseStudiesTab = true;
+?>
+<?php include("includes/_header.php"); ?>
+
+<style type="text/css">
+.snipt-embed-meta-container { display: none; }
+.snipt-embed-code { height: 370px; }
+.snipt-embed-byline { display: block; }
+</style>
+
+
+ <!-- Grid BG -->
+ <div id="gridBgShort" class="container hide-on-phones">
+ <div class="white-fade"></div>
+ <div class="row">
+ <div class="one columns"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div>
+ </div>
+ </div>
+ <!-- /Grid BG -->
+
+ <div id="insideContainer" class="container">
+ <div class="row hide-on-phones">
+ <a href="index.php" class="back two columns hide-on-phones">&larr; Home</a>
+ </div>
+
+ <div class="row">
+ <div class="twelve columns">
+ <nav class="on-page hide-on-phones">
+ <ul>
+ <li><a href="case-swizzle.php">Swizzle</a></li>
+ <li><a href="case-soapbox.php">ZURBsoapbox</a></li>
+ <li><a href="case-foundation.php">Foundation</a></li>
+ <li><a href="case-reel.php">Reel</a></li>
+ <li><a href="case-zurbjobs.php">ZURBjobs</a></li>
+ <li class="current"><a href="case-flite.php">Flite</a></li>
+ </ul>
+ </nav>
+ <h1 class="light-weight">Flite</h1>
+ </div>
+ </div>
+ <div class="row">
+ <div class="eight columns">
+ <div class="frame"><a href="http://www.flite.com/" target="_blank"><img src="images/case-flite1.jpg"></a></div>
+ </div>
+ <div class="four columns">
+ <h4>Flite: Foundation Was the Way To Go</h4>
+ <p>When online advertising tech firm <a href="http://www.flite.com/" target="_blank">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:
+ <blockquote>
+ “Getting up to speed was super easy.”
+ </blockquote>
+
+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>
+ <br/><br />
+
+ <div class="row">
+ <div class="seven columns">
+ <h5>Integrating Their Design with Foundation</h5>
+ <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>
+
+ <h5>Retina Display ... No Problem</h5>
+ <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: <script src="http://snipt.org/embed/vaGc7"></script> </p>
+
+ </div>
+ <div class="five columns">
+
+ <a href="http://www.flite.com/" target="_blank">
+ <img src="images/case-flite2.jpg">
+ </a>
+
+ <br/>
+ <br/>
+ <h5>Would Use it Again</h5>
+ <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.
+ <blockquote>
+ “Overall, I would definitely use it again for other projects” — Andy
+ </blockquote>
+ </p>
+ </div>
+ </div>
+
+ <br><br>
+ <div class="row">
+ <div class="twelve columns">
+ <a class="hide-on-phones nice blue button right" href="case-swizzle.php">Case Study: Swizzle &rarr;</a>
+ <!-- <a class="left hide-on-desktops" href="mobile.php">&larr; Mobility</a> -->
+ <a class="right show-on-phones" href="case-swizzle.php">Case Study: Swizzle &rarr;</a>
+ </div>
+ <br><br>
+ <nav class="ten columns show-on-phones">
+ <ul>
+ <li><a href="#">Documentation</a></li>
+ <li><a href="#">On Github</a></li>
+ <li><a class="nice small blue button src-download" href="files/foundation-download-<?= $version ?>.zip">Download</a></li>
+ </ul>
+ </nav>
+ </div>
+
+
+
+<?php include("includes/_footer.php"); ?>
View
85 marketing/case-foundation.php
@@ -0,0 +1,85 @@
+<?
+ $page_title = "Foundation Case Study";
+ $caseStudiesTab = true;
+?>
+<?php include("includes/_header.php"); ?>
+
+ <!-- Grid BG -->
+ <div id="gridBgShort" class="container hide-on-phones">
+ <div class="white-fade"></div>
+ <div class="row">
+ <div class="one columns"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div>
+ </div>
+ </div>
+ <!-- /Grid BG -->
+
+ <div id="insideContainer" class="container">
+ <div class="row hide-on-phones">
+ <a href="index.php" class="back two columns hide-on-phones">&larr; Home</a>
+ </div>
+
+ <div class="row">
+ <div class="twelve columns">
+ <nav class="on-page hide-on-phones">
+ <ul>
+ <li><a href="case-swizzle.php">Swizzle</a></li>
+ <li><a href="case-soapbox.php">ZURBsoapbox</a></li>
+ <li class="current"><a href="case-foundation.php">Foundation</a></li>
+ <li><a href="case-reel.php">Reel</a></li>
+ <li><a href="case-zurbjobs.php">ZURBjobs</a></li>
+ <li><a href="case-flite.php">Flite</a></li>
+ </ul>
+ </nav>
+ <h1 class="light-weight">Launching Foundation</h1>
+ </div>
+ </div>
+ <div class="row">
+ <div class="eight columns">
+ <div class="frame"><img src="images/case-foundation.jpg"></div>
+ </div>
+ <div class="four columns">
+ <h4>Pretty meta, we know.</h4>
+ <p>Since day one we've built the Foundation documentation, and now this new site, with Foundation. Dating back to the original fixed-width Foundation (born of the ZURB global CSS) we've always built with the tool to better understand how it works, explain it, and test it.</p><p>See any mistakes on this site or the docs? <a href="mailto:foundation@zurb.com">Let us know</a> and we'll get right on it. We want Foundation to be as badass and bulletproof as possible.</p>
+ </div>
+ </div>
+ <br /><br />
+
+ <div class="row">
+ <div class="four columns">
+ <h5>Showing the Grid</h5>
+ <div class="frame"><img src="images/case-foundation-1.jpg"></div>
+ <p>One thing you may have noticed is the grid background on each page. Try scaling down the homepage &mdash; the background grid actually resizes based on the screen (the lines are attached to divs, not a background image). Nerdy, but we wanted to show the real grid.</p>
+ </div>
+ <div class="four columns">
+ <h5>Mobile Slider</h5>
+ <img src="images/case-foundation-2.jpg">
+ <p>The case studies slider on the homepage is powered by <a href="docs/orbit.php">Orbit</a>, a jQuery plugin we created to quickly create image or content sliders. On mobile devices we swap that out in favor of a slider you can actually swipe with gestures, powered by <a href="http://plugins.jquery.com/project/swipe" rel="nofollow">jQuery Swipe</a>.</p>
+ </div>
+ <div class="four columns">
+ <h5>Next Steps: Case Studies</h5>
+ <img src="images/case-foundation-3.jpg">
+ <p>Are you using Foundation? We'd love to hear about it! Let us know how you're using Foundation and we might feature you as a case study for the framework. Just <a href="mailto:foundation@zurb.com?subject=I'm%20using%20Foundation">let us know via email &rarr;</a></p>
+ </div>
+ </div>
+
+
+ <br><br>
+ <div class="row">
+ <div class="twelve columns">
+ <a class="hide-on-phones nice blue button right" href="case-reel.php">Case Study: Reel &rarr;</a>
+ <!-- <a class="left hide-on-desktops" href="mobile.php">&larr; Mobility</a> -->
+ <a class="right show-on-phones" href="case-reel.php">Case Study: Reel &rarr;</a>
+ </div>
+ <br><br>
+ <nav class="ten columns show-on-phones">
+ <ul>
+ <li><a href="#">Documentation</a></li>
+ <li><a href="#">On Github</a></li>
+ <li><a class="nice small blue button src-download" href="files/foundation-download-<?= $version ?>.zip">Download</a></li>
+ </ul>
+ </nav>
+ </div>
+
+
+
+<?php include("includes/_footer.php"); ?>
View
85 marketing/case-reel.php
@@ -0,0 +1,85 @@
+<?
+ $page_title = "Reel Case Study";
+ $caseStudiesTab = true;
+?>
+<?php include("includes/_header.php"); ?>
+
+ <!-- Grid BG -->
+ <div id="gridBgShort" class="container hide-on-phones">
+ <div class="white-fade"></div>
+ <div class="row">
+ <div class="one columns"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div>
+ </div>
+ </div>
+ <!-- /Grid BG -->
+
+ <div id="insideContainer" class="container">
+ <div class="row hide-on-phones">
+ <a href="index.php" class="back two columns hide-on-phones">&larr; Home</a>
+ </div>
+
+ <div class="row">
+ <div class="twelve columns">
+ <nav class="on-page hide-on-phones">
+ <ul>
+ <li><a href="case-swizzle.php">Swizzle</a></li>
+ <li><a href="case-soapbox.php">ZURBsoapbox</a></li>
+ <li><a href="case-foundation.php">Foundation</a></li>
+ <li class="current"><a href="case-reel.php">Reel</a></li>
+ <li><a href="case-zurbjobs.php">ZURBjobs</a></li>
+ <li><a href="case-flite.php">Flite</a></li>
+ </ul>
+ </nav>
+ <h1 class="light-weight">Reeling in Feedback</h1>
+ </div>
+ </div>
+ <div class="row">
+ <div class="eight columns">
+ <div class="frame"><img src="images/case-reel.jpg"></div>
+ </div>
+ <div class="four columns">
+ <h4>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) and get quick, thumbs up / thumbs down feedback. 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>
+ </div>
+ </div>
+ <br /><br />
+
+ <div class="row">
+ <div class="four columns">
+ <h5>Identical Templates</h5>
+ <img src="images/case-reel-1.jpg" />
+ <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>
+ </div>
+ <div class="four columns">
+ <h5>Easy Organization</h5>
+ <img src="images/case-reel-2.jpg" />
+ <p>We use 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="four columns">
+ <h5>Next Steps: New App</h5>
+ <img src="images/case-reel-3.jpg" />
+ <p>That's not all - we're just getting started. We're working on Reel's big brother, a new app (also based on Foundation) that will include private presos, letting viewers add their own notes, and more! Stay tuned for details&hellip;</p>
+ </div>
+ </div>
+
+
+ <br><br>
+ <div class="row">
+ <div class="twelve columns">
+ <a class="hide-on-phones nice blue button right" href="case-zurbjobs.php">Case Study: ZURBjobs &rarr;</a>
+ <!-- <a class="left hide-on-desktops" href="mobile.php">&larr; Mobility</a> -->
+ <a class="right show-on-phones" href="case-zurbjobs.php">Case Study: ZURBjobs &rarr;</a>
+ </div>
+ <br><br>
+ <nav class="ten columns show-on-phones">
+ <ul>
+ <li><a href="#">Documentation</a></li>
+ <li><a href="#">On Github</a></li>
+ <li><a class="nice small blue button src-download" href="files/foundation-download-<?= $version ?>.zip">Download</a></li>
+ </ul>
+ </nav>
+ </div>
+
+
+
+<?php include("includes/_footer.php"); ?>
View
85 marketing/case-soapbox.php
@@ -0,0 +1,85 @@
+<?
+ $page_title = "ZURBsoapbox Case Study";
+ $caseStudiesTab = true;
+?>
+<?php include("includes/_header.php"); ?>
+
+ <!-- Grid BG -->
+ <div id="gridBgShort" class="container hide-on-phones">
+ <div class="white-fade"></div>
+ <div class="row">
+ <div class="one columns"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div>
+ </div>
+ </div>
+ <!-- /Grid BG -->
+
+ <div id="insideContainer" class="container">
+ <div class="row hide-on-phones">
+ <a href="index.php" class="back two columns hide-on-phones">&larr; Home</a>
+ </div>
+
+ <div class="row">
+ <div class="twelve columns">
+ <nav class="on-page hide-on-phones">
+ <ul>
+ <li><a href="case-swizzle.php">Swizzle</a></li>
+ <li class="current"><a href="case-soapbox.php">ZURBsoapbox</a></li>
+ <li><a href="case-foundation.php">Foundation</a></li>
+ <li><a href="case-reel.php">Reel</a></li>
+ <li><a href="case-zurbjobs.php">ZURBjobs</a></li>
+ <li><a href="case-flite.php">Flite</a></li>
+ </ul>
+ </nav>
+ <h1 class="light-weight">Building ZURBsoapbox</h1>
+ </div>
+ </div>
+ <div class="row">
+ <div class="eight columns">
+ <div class="frame"><a href="http://www.zurbsoapbox.com"><img src="images/case-soapbox.jpg"></a></div>
+ </div>
+ <div class="four columns">
+ <h4>Rapidly launching and iterating for our audience.</h4>
+ <p>ZURBsoapbox is a speaking series we host at the ZURB offices, 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>
+ </div>
+ </div>
+ <br /><br />
+
+ <div class="row">
+ <div class="four columns">
+ <h5>Instant Mobile Site</h5>
+ <div class="frame"><img src="images/case-soapbox-1.jpg"></div>
+ <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, for tablets and phones.</p>
+ </div>
+ <div class="four columns">
+ <h5>Device-Specific Function</h5>
+ <img src="images/case-soapbox-2.jpg">
+ <p>Mobile devices can't handle our standard flash audio player, so we used <a href="docs/layout.php">Foundation's mobile visibility classes</a> to selectively hide the flash element, and show a mobile-friendly audio file link.</p>
+ </div>
+ <div class="four columns">
+ <h5>Next Steps: Images</h5>
+ <img src="images/case-soapbox-3.jpg">
+ <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.</p>
+ </div>
+ </div>
+
+
+ <br><br>
+ <div class="row">
+ <div class="twelve columns">
+ <a class="hide-on-phones nice blue button right" href="case-foundation.php">Case Study: Foundation &rarr;</a>
+ <!-- <a class="left hide-on-desktops" href="mobile.php">&larr; Mobility</a> -->
+ <a class="right show-on-phones" href="case-foundation.php">Case Study: Foundation &rarr;</a>
+ </div>
+ <br><br>
+ <nav class="ten columns show-on-phones">
+ <ul>
+ <li><a href="#">Documentation</a></li>
+ <li><a href="#">On Github</a></li>
+ <li><a class="nice small blue button src-download" href="files/foundation-download-<?= $version ?>.zip">Download</a></li>
+ </ul>
+ </nav>
+ </div>
+
+
+
+<?php include("includes/_footer.php"); ?>
View
86 marketing/case-swizzle.php
@@ -0,0 +1,86 @@
+<?
+ $page_title = "Swizzle Case Study";
+ $caseStudiesTab = true;
+?>
+<?php include("includes/_header.php"); ?>
+
+ <!-- Grid BG -->
+ <div id="gridBgShort" class="container hide-on-phones">
+ <div class="white-fade"></div>
+ <div class="row">
+ <div class="one columns"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div>
+ </div>
+ </div>
+ <!-- /Grid BG -->
+
+ <div id="insideContainer" class="container">
+ <div class="row hide-on-phones">
+ <a href="index.php" class="back two columns hide-on-phones">&larr; Home</a>
+ <!-- / Nav -->
+ </div>
+
+ <div class="row">
+ <div class="twelve columns">
+ <nav class="on-page hide-on-phones">
+ <ul>
+ <li class="current"><a href="case-swizzle.php">Swizzle</a></li>
+ <li><a href="case-soapbox.php">ZURBsoapbox</a></li>
+ <li><a href="case-foundation.php">Foundation</a></li>
+ <li><a href="case-reel.php">Reel</a></li>
+ <li><a href="case-zurbjobs.php">ZURBjobs</a></li>
+ <li><a href="case-flite.php">Flite</a></li>
+ </ul>
+ </nav>
+ <h1 class="light-weight">Get Swizzle</h1>
+ </div>
+ </div>
+ <div class="row">
+ <div class="eight columns">
+ <div class="frame"><img src="images/case-swizzle.jpg"></div>
+ </div>
+ <div class="four columns">
+ <h4>Beautiful and Built<br />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>
+ </div>
+ </div>
+ <br /><br />
+
+ <div class="row">
+ <div class="four columns">
+ <h5>Built in the Browser</h5>
+ <img src="images/case-swizzle-1.jpg">
+ <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="four columns">
+ <h5>Device-Specific Navigation</h5>
+ <div class="frame"><img src="images/case-swizzle-2.jpg"></div>
+ <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>
+ </div>
+ <div class="four columns">
+ <h5>Next Steps: Client Friendly</h5>
+ <div class="frame"><img src="images/case-swizzle-3.jpg"></div>
+ <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 Reveal for some great interactive features.</p>
+ </div>
+ </div>
+
+
+ <br><br>
+ <div class="row">
+ <div class="twelve columns">
+ <a class="hide-on-phones nice blue button right" href="case-reel.php">Case Study: Reel &rarr;</a>
+ <!-- <a class="left hide-on-desktops" href="mobile.php">&larr; Mobility</a> -->
+ <a class="right show-on-phones" href="case-reel.php">Case Study: Reel &rarr;</a>
+ </div>
+ <br><br>
+ <nav class="ten columns show-on-phones">
+ <ul>
+ <li><a href="#">Documentation</a></li>
+ <li><a href="#">On Github</a></li>
+ <li><a class="nice small blue button src-download" href="files/foundation-download-<?= $version ?>.zip">Download</a></li>
+ </ul>
+ </nav>
+ </div>
+
+
+
+<?php include("includes/_footer.php"); ?>
View
87 marketing/case-zurbjobs.php
@@ -0,0 +1,87 @@
+<?
+ $page_title = "ZURBjobs Case Study";
+ $caseStudiesTab = true;
+?>
+<?php include("includes/_header.php"); ?>
+
+ <!-- Grid BG -->
+ <div id="gridBgShort" class="container hide-on-phones">
+ <div class="white-fade"></div>
+ <div class="row">
+ <div class="one columns"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div><div class="one columns hide-on-phones"></div>
+ </div>
+ </div>
+ <!-- /Grid BG -->
+
+ <div id="insideContainer" class="container">
+ <div class="row hide-on-phones">
+ <a href="index.php" class="back two columns hide-on-phones">&larr; Home</a>
+ </div>
+
+ <div class="row">
+ <div class="twelve columns">
+ <nav class="on-page hide-on-phones">
+ <ul>
+ <li><a href="case-swizzle.php">Swizzle</a></li>
+ <li><a href="case-soapbox.php">ZURBsoapbox</a></li>
+ <li><a href="case-foundation.php">Foundation</a></li>
+ <li><a href="case-reel.php">Reel</a></li>
+ <li class="current"><a href="case-zurbjobs.php">ZURBjobs</a></li>
+ <li><a href="case-flite.php">Flite</a></li>
+ </ul>
+ </nav>
+ <h1 class="light-weight">ZURBjobs</h1>
+ </div>
+ </div>
+ <div class="row">
+ <div class="eight columns">
+ <div class="frame"><a href="http://www.zurbjobs.com"><img src="images/case-zurbjobs.jpg"></a></div>
+ </div>
+ <div class="four columns">
+ <h4>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>
+ </div>
+ </div>
+ <br /><br />
+
+ <div class="row">
+ <div class="four columns">
+ <h5>Minimal Code Required</h5>
+ <img src="images/case-zurbjobs-1.jpg" />
+ <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, simply adapt the existing ones with light custom styles.</p>
+ </div>
+ <div class="four columns">
+ <h5>Mobile Optimized</h5>
+ <img src="images/case-zurbjobs-2.jpg" />
+ <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>
+ </div>
+ <div class="four columns">
+ <h5>Next Steps: Managing Jobs</h5>
+ <div class="frame"><img src="images/case-zurbjobs-3.jpg" /></div>
+ <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>
+
+
+ <br><br>
+ <div class="row">
+ <div class="twelve columns">
+ <a class="hide-on-phones nice blue button right" href="case-flite.php">Case Study: Flite &rarr;</a>
+ <!-- <a class="left hide-on-desktops" href="mobile.php">&larr; Mobility</a> -->
+ <a class="right show-on-phones" href="case-swizzle.php">Case Study: Swizzle &rarr;</a>
+ </div>
+ <br><br>
+ <nav class="ten columns show-on-phones">
+ <ul>
+ <li><a href="#">Documentation</a></li>
+ <li><a href="#">On Github</a></li>
+ <li><a class="nice small blue button src-download" href="files/foundation-download-<?= $version ?>.zip">Download</a></li>
+ </ul>
+ </nav>
+ </div>
+
+
+
+<?php include("includes/_footer.php"); ?>
View
10 marketing/config.rb
@@ -0,0 +1,10 @@
+http_path = "/"
+project_path = File.dirname(__FILE__)
+add_import_path File.join("..", "stylesheets")
+images_path = File.join(project_path, "..", "vendor", "assets", "images", "foundation")
+javascripts_path = File.join(project_path, "..", "vendor", "assets", "javascripts", "foundation")
+
+line_comments = false
+relative_assets = true
+output_style = :expand
+sass_options = { :cache => "false" }
View
122 marketing/docs/buttons.php
@@ -0,0 +1,122 @@
+<? $page_title = "Buttons"; ?>
+<?php include("includes/_documentation_head.php"); ?>
+
+ <div class="container">
+ <div class="row">
+ <div class="twelve columns">
+ <div class="foundation-header">
+ <h1><a href="index.php">Foundation Docs</a></h1>
+ <h4 class="subheader">Rapid prototyping and building library from ZURB.</h4>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="two columns">
+ <dl class="nice tabs vertical hide-on-phones">
+ <dd><a href="index.php">Getting Started</a></dd>
+ <dd><a href="grid.php">Grid</a></dd>
+ <dd><a href="buttons.php" class="active">Buttons</a></dd>
+ <dd><a href="forms.php">Forms</a></dd>
+ <dd><a href="layout.php">Layout</a></dd>
+ <dd><a href="ui.php">UI</a></dd>
+ <dd><a href="orbit.php">Orbit</a></dd>
+ <dd><a href="reveal.php">Reveal</a></dd>
+ <dd><a href="gems.php">Gems</a></dd>
+ <dd><a href="qa.php">QA</a></dd>
+ </dl>
+ </div>
+ <div class="six columns">
+ <h3>Buttons</h3>
+ <h4 class="subheader">We &lt;3 buttons. And so do you! That's why Foundation has multiple buttons styles and color that are not only badass out of the box, but easy to customize for your projects.</h4>
+ <hr />
+
+ <h4>Simple Buttons</h4>
+ <p>Foundation buttons have a number of parameters and styles - you can see a few examples below. The out of the box classes include size, color and style (square, slightly rounded, and completely rounded).</p>
+ <p><script src="http://snipt.net/embed/269a08f1db74949e80ee8b40351e609c"></script></p><br />
+ <div class="row">
+ <div class="six columns">
+ <a href="#" class="small blue button radius">Button &raquo;</a><br /><br />
+ <a href="#" class="blue button radius">Button &raquo;</a><br /><br />
+ <a href="#" class="large blue button radius">Button &raquo;</a><br /><br />
+ <br /><br />
+ <a href="#" class="small red button radius">Button &raquo;</a><br /><br />
+ <a href="#" class="red button radius">Button &raquo;</a><br /><br />
+ <a href="#" class="large red button radius">Button &raquo;</a><br /><br />
+ <br /><br />
+ </div>
+ <div class="six columns">
+ <a href="#" class="small white button radius">Button &raquo;</a><br /><br />
+ <a href="#" class="white radius button">Button &raquo;</a><br /><br />
+ <a href="#" class="large white button radius">Button &raquo;</a><br /><br />
+ <br /><br />
+ <a href="#" class="small black button radius">Button &raquo;</a><br /><br />
+ <a href="#" class="black button radius">Button &raquo;</a><br /><br />
+ <a href="#" class="large black button radius">Button &raquo;</a><br /><br />
+ <br /><br />
+ </div>
+ <div class="six columns">
+ <a href="#" class="small green button radius">Button &raquo;</a><br /><br />
+ <a href="#" class="green radius button">Button &raquo;</a><br /><br />
+ <a href="#" class="large green button radius">Button &raquo;</a><br /><br />
+ <br /><br />
+ </div>
+
+ </div>
+
+ <hr />
+
+ <h4>Nice Buttons</h4>
+ <p>Nice buttons have a little more pizazz using a background image, but they still support the same classes as any other button including color, size, and corner radius.</p>
+ <p><script type="text/javascript" src="http://snipt.net/embed/ac514168311a363dd4b5130a20cd1efb"></script></p><br />
+ <div class="row">
+ <div class="six columns">
+ <a href="#" class="small blue nice button radius">Button &raquo;</a><br /><br />
+ <a href="#" class="blue nice button radius">Button &raquo;</a><br /><br />
+ <a href="#" class="large blue nice button radius">Button &raquo;</a><br /><br />
+ <br /><br />
+ <a href="#" class="small red nice button radius">Button &raquo;</a><br /><br />
+ <a href="#" class="red nice button radius">Button &raquo;</a><br /><br />
+ <a href="#" class="large red nice button radius">Button &raquo;</a><br /><br />
+ <br /><br />
+ </div>
+ <div class="six columns">
+ <a href="#" class="small white nice button radius">Button &raquo;</a><br /><br />
+ <a href="#" class="white radius nice button">Button &raquo;</a><br /><br />
+ <a href="#" class="large white nice button radius">Button &raquo;</a><br /><br />
+ <br /><br />
+ <a href="#" class="small black nice button radius">Button &raquo;</a><br /><br />
+ <a href="#" class="black nice button radius">Button &raquo;</a><br /><br />
+ <a href="#" class="large black nice button radius">Button &raquo;</a><br /><br />
+ <br /><br />
+ </div>
+ <div class="six columns">
+ <a href="#" class="small green nice button radius">Button &raquo;</a><br /><br />
+ <a href="#" class="green radius nice button">Button &raquo;</a><br /><br />
+ <a href="#" class="large green nice button radius">Button &raquo;</a><br /><br />
+ <br /><br />
+ </div>
+ </div>
+ </div>
+ <div class="four columns">
+ <? include("includes/_download.php"); ?>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="twelve columns">
+ <dl class="nice tabs mobile show-on-phones">
+ <dd><a href="index.php">Getting Started</a></dd>
+ <dd><a href="grid.php">Grid</a></dd>
+ <dd><a href="buttons.php" class="active">Buttons</a></dd>
+ <dd><a href="forms.php">Forms</a></dd>
+ <dd><a href="layout.php">Layout</a></dd>
+ <dd><a href="ui.php">UI</a></dd>
+ <dd><a href="orbit.php">Orbit</a></dd>
+ <dd><a href="reveal.php">Reveal</a></dd>
+ <dd><a href="qa.php">QA</a></dd>
+ </dl>
+ </div>
+ </div>
+
+<?php include("includes/_documentation_foot.php"); ?>
View
278 marketing/docs/forms.php
@@ -0,0 +1,278 @@
+<? $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"); ?>
View
127 marketing/docs/gems.php
@@ -0,0 +1,127 @@
+<? $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>
+ </div>
+
+ <div class="row">
+ <div class="twelve columns">
+ <dl class="nice tabs mobile show-on-phones">
+ <dd><a href="index.php">Getting Started</a></dd>
+ <dd><a href="grid.php">Grid</a></dd>
+ <dd><a href="buttons.php" class="active">Buttons</a></dd>
+ <dd><a href="forms.php">Forms</a></dd>
+ <dd><a href="layout.php">Layout</a></dd>
+ <dd><a href="ui.php">UI</a></dd>
+ <dd><a href="orbit.php">Orbit</a></dd>
+ <dd><a href="reveal.php">Reveal</a></dd>
+ <dd><a href="qa.php">QA</a></dd>
+ </dl>
+ </div>
+ </div>
+
+<?php include("includes/_documentation_foot.php"); ?>
View
469 marketing/docs/grid.php
@@ -0,0 +1,469 @@
+<? $page_title = "The Grid" ?>
+<?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" class="active">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">Gems</a></dd>
+ <dd><a href="qa.php">QA</a></dd>
+ </dl>
+ </div>
+ <div class="six columns">
+ <h3>The Grid</h3>
+ <h4 class="subheader">The Grid lets you quickly put together page layouts for mobile devices and the desktop. You don't need two different sites - the Grid is built to create a rock-solid experience on all kinds of devices with the exact same markup.</h4>
+
+ <hr />
+
+ <h4>The Basics</h4>
+ <p>The grid is built around three key elements: containers, rows, and columns. Containers create base padding for the page; rows create a max-width and contain the columns; and columns create the final structure. Everything on your page that you don't give a specific structural style to should be within a container, row and column.</p>
+
+ <p>What you need to know is that <strong>columns don't have a fixed width:</strong> they can vary based on the resolution of the screen, or the size of the window (try scaling down this window to see what we mean). Design with that in mind.</p>
+ <script src="http://snipt.net/embed/3b3c66062f90d4cdf9d5e1f7b61c8ce8"></script>
+
+ <hr />
+
+ <h4>Nesting Support</h4>
+ <p>In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.</p>
+ <script src="http://snipt.net/embed/00599221b2f133b974b012dbe0ed001e"></script>
+
+ <hr />
+
+ <h4>Examples</h4>
+ <p>Take this page for example - we've set up this page by containing this section in eight columns, and the sidebar in four. When the screen is larger than iPad resolution you'll see them laid out normally - smaller than that and columns become 100% width objects for mobile devices.</p>
+
+ <p>Below you can see how the rows and columns come together. All columns are inside a row and for this we've colored the rows and columns for visibility. You can also see how nesting works - this example is inside an eight column container, but below we have all 12 columns to use. You can nest them down quite a ways before the percentage widths become absurdly small.</p>
+
+ <div class="row display">
+ <div class="four columns">
+ .four.columns
+ </div>
+ <div class="four columns">
+ .four.columns
+ </div>
+ <div class="four columns">
+ .four.columns
+ </div>
+ </div>
+ <div class="row display">
+ <div class="three columns">
+ .three.columns
+ </div>
+ <div class="six columns">
+ .six.columns
+ </div>
+ <div class="three columns">
+ .three.columns
+ </div>
+ </div>
+ <div class="row display">
+ <div class="two columns">
+ .two.columns
+ </div>
+ <div class="eight columns">
+ .eight.columns
+ </div>
+ <div class="two columns">
+ .two.columns
+ </div>
+ </div>
+ <div class="row display">
+ <div class="one columns">
+ .one
+ </div>
+ <div class="eleven columns">
+ .eleven.columns
+ </div>
+ </div>
+ <div class="row display">
+ <div class="two columns">
+ .two.columns
+ </div>
+ <div class="ten columns">
+ .ten.columns
+ </div>
+ </div>
+ <div class="row display">
+ <div class="three columns">
+ .three.columns
+ </div>
+ <div class="nine columns">
+ .nine.columns
+ </div>
+ </div>
+ <div class="row display">
+ <div class="four columns">
+ .four.columns
+ </div>
+ <div class="eight columns">
+ .eight.columns
+ </div>
+ </div>
+ <div class="row display">
+ <div class="five columns">
+ .five
+ </div>
+ <div class="seven columns">
+ .seven.columns
+ </div>
+ </div>
+ <div class="row display">
+ <div class="six columns">
+ .six.columns
+ </div>
+ <div class="six columns">
+ .six.columns
+ </div>
+ </div>
+ <div class="row display">
+ <div class="seven columns">
+ .seven.columns
+ </div>