Skip to content
This repository
Browse code

updated marketing site and compass generator

  • Loading branch information...
commit 3a7793740851d0a4e34c4ef4b961b24d90533f48 1 parent 72c872a
Mark Hayes mhayes authored

Showing 170 changed files with 10,492 additions and 0 deletions. Show diff stats Hide diff stats

  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
1  .gitignore
@@ -16,3 +16,4 @@ test/tmp
16 16 test/version_tmp
17 17 tmp
18 18 *.DS_Store
  19 +marketing/.sass-cache/*
214 marketing/404.html
... ... @@ -0,0 +1,214 @@
  1 +<!DOCTYPE html>
  2 +
  3 +<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
  4 +<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
  5 +<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
  6 +<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
  7 +<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
  8 +<head>
  9 + <meta charset="utf-8" />
  10 +
  11 + <!-- Set the viewport width to device width for mobile -->
  12 + <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  13 +
  14 + <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." />
  15 +
  16 + <title>Foundation: Lost Yeti (404)</title>
  17 + <link rel="apple-touch-icon" href="apple-touch-icon.png" />
  18 + <link rel="icon" type="image/ico" href="favicon.ico">
  19 +
  20 + <!-- Included CSS Files -->
  21 + <link rel="stylesheet" href="../stylesheets/globals.css">
  22 + <link rel="stylesheet" href="../stylesheets/typography.css">
  23 + <link rel="stylesheet" href="../stylesheets/grid.css">
  24 + <link rel="stylesheet" href="../stylesheets/ui.css">
  25 + <link rel="stylesheet" href="../stylesheets/forms.css">
  26 + <link rel="stylesheet" href="../stylesheets/orbit.css">
  27 + <link rel="stylesheet" href="../stylesheets/reveal.css">
  28 + <link rel="stylesheet" href="../stylesheets/app.css">
  29 + <link rel="stylesheet" href="../stylesheets/mobile.css">
  30 + <link rel="stylesheet" href="presentation.css">
  31 +
  32 + <!--[if lt IE 9]>
  33 + <link rel="stylesheet" href="src/stylesheets/ie.css">
  34 + <![endif]-->
  35 +
  36 + <!-- IE Fix for HTML5 Tags -->
  37 + <!--[if lt IE 9]>
  38 + <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  39 + <![endif]-->
  40 +
  41 + <script src="../javascripts/jquery.min.js"></script>
  42 + <script src="jswipe.js"></script>
  43 + <script src="../javascripts/jquery.reveal.js"></script>
  44 + <script src="../javascripts/jquery.orbit-1.4.0.js"></script>
  45 + <script src="../javascripts/jquery.customforms.js"></script>
  46 + <script src="../javascripts/jquery.placeholder.min.js"></script>
  47 + <script src="../javascripts/app.js"></script>
  48 + <script src="swipe.js"></script>
  49 + <script src="github.js"></script>
  50 +
  51 +
  52 + <script>
  53 + $(window).load(function() {
  54 + $('#featured').orbit({
  55 + animation: 'fade',
  56 + animationSpeed: 800,
  57 + timer: true,
  58 + advanceSpeed: 12000,
  59 + captionAnimation: "fade",
  60 + captionAnimationSpeed: 800
  61 + });
  62 + });
  63 + </script>
  64 +
  65 +
  66 +</head>
  67 +<body>
  68 +
  69 +
  70 + <!-- ZURBar -->
  71 + <div id="zurBar" class="container">
  72 + <div class="row">
  73 + <div class="four columns">
  74 + <h1><a href="./">Foundation</a></h1>
  75 + </div>
  76 + <div class="eight columns hide-on-phones">
  77 + <strong class="right">
  78 + <a href="grid.php">Features</a>
  79 + <a href="case-soapbox.php">Case Studies</a>
  80 + <a href="docs/">Documentation</a>
  81 + <a href="http://github.com/zurb/foundation">Github</a>
  82 + <a href="files/foundation-download.zip" class="small blue nice button src-download">Download</a>
  83 +
  84 + </strong>
  85 + </div>
  86 + <!--
  87 +<div class="two columns">
  88 + <h2 class="right"><a href="http://www.zurb.com">by ZURB</a></h2>
  89 + </div>
  90 +-->
  91 + </div>
  92 + </div>
  93 + <!-- /ZURBar -->
  94 +
  95 +
  96 + <!-- Grid BG -->
  97 + <div id="gridBgShort" class="container">
  98 + <div class="white-fade hide-on-phones"></div>
  99 + <div class="row">
  100 + <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>
  101 + </div>
  102 + </div>
  103 + <!-- /Grid BG -->
  104 +
  105 + <div id="insideContainer" class="container">
  106 + <div class="row hide-on-phones">
  107 + <a href="index.php" class="back two columns hide-on-phones">&larr; Home</a>
  108 + </div>
  109 +
  110 +
  111 + <div class="row">
  112 + <div class="nine columns">
  113 + <h1>Crap. We can't find that.</h1>
  114 + <h5 class="subheader">Nerdy technical code: 404</h5>
  115 +
  116 + <div class="row">
  117 + <div class="three columns">
  118 + <p>
  119 + <a href="/">Home &rarr;</a><br />
  120 + <a href="grid.php">Features &rarr;</a><br />
  121 + <a href="docs/">Documentation &rarr;</a><br />
  122 + <a href="files/foundation-download.zip">Download &rarr;</a><br />
  123 + <a href="http://github.com/zurb/foundation">Foundation on Github &rarr;</a>
  124 + </p>
  125 + </div>
  126 + <div class="six columns">
  127 + <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>
  128 + </div>
  129 + </div>
  130 + </div>
  131 + </div>
  132 +
  133 +
  134 +
  135 + <div class="row">
  136 + <nav class="ten columns show-on-phones">
  137 + <ul>
  138 + <li><a href="#">Documentation</a></li>
  139 + <li><a href="#">On Github</a></li>
  140 + <li><a class="nice small blue button src-download" href="files/foundation-download.zip">Download</a></li>
  141 + </ul>
  142 + </nav>
  143 + </div>
  144 +
  145 +
  146 +
  147 + <!-- Das Footer -->
  148 + <footer class="row">
  149 + <section class="five columns">
  150 + <h6><strong>Made by ZURB</strong></h6>
  151 + <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>
  152 + </section>
  153 +
  154 + <section class="three columns">
  155 + <h6><strong>Using Foundation?</strong></h6>
  156 + <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>
  157 + </section>
  158 +
  159 + <section class="four columns">
  160 + <h6><strong>Need some help?</strong></h6>
  161 + <p>For quick answers or help <a href="mailto:foundation@zurb.com">email us &rarr;</a></p>
  162 +
  163 + <ul class="block-grid three-up">
  164 + <li>
  165 + <!-- Place this tag where you want the +1 button to render -->
  166 + <g:plusone size="medium"></g:plusone>
  167 +
  168 + <!-- Place this render call where appropriate -->
  169 + <script>
  170 + (function() {
  171 + var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  172 + po.src = 'https://apis.google.com/js/plusone.js';
  173 + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  174 + })();
  175 + </script>
  176 + </li>
  177 + <li>
  178 +
  179 + <iframe allowtransparency="true" frameborder="0" scrolling="no"
  180 + src="http://platform.twitter.com/widgets/follow_button.html?screen_name=foundationzurb"
  181 + style="width:80px; height:20px;"></iframe>
  182 + </li>
  183 + <li>
  184 + <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>
  185 + </li>
  186 + </div>
  187 + </section>
  188 + </footer>
  189 + <!-- /Das Footer -->
  190 + </div>
  191 + <!-- /Main Container -->
  192 +
  193 + <script>
  194 +
  195 + var _gaq = _gaq || [];
  196 + _gaq.push(
  197 + ['_setAccount', 'UA-2195009-2'],
  198 + ['_trackPageview'],
  199 + ['b._setAccount', 'UA-2195009-27'],
  200 + ['b._trackPageview']
  201 + );
  202 +
  203 + (function() {
  204 + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  205 + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  206 + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  207 + })();
  208 +
  209 + $(document).on('click', '.src-download', function (event) {
  210 + _gaq.push(['_trackEvent', 'Foundation', 'Downloaded']);
  211 + });
  212 + </script>
  213 +</body>
  214 +</html>
113 marketing/about.php
... ... @@ -0,0 +1,113 @@
  1 +<? $page_title = "Goodies" ?>
  2 +<?php include("includes/_header.php"); ?>
  3 +
  4 + <!-- Grid BG -->
  5 + <div id="gridBgShort" class="container hide-on-phones">
  6 + <div class="white-fade hide-on-phones"></div>
  7 + <div class="row">
  8 + <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>
  9 + </div>
  10 + </div>
  11 + <!-- /Grid BG -->
  12 +
  13 + <div id="insideContainer" class="container">
  14 + <div class="row hide-on-phones">
  15 + <a href="index.php" class="back two columns hide-on-phones">&larr; Home</a>
  16 + </div>
  17 +
  18 +
  19 + <div class="row">
  20 + <div class="two columns">
  21 + <img src="images/foundation-yeti.png" />
  22 + </div>
  23 + <div class="eight columns">
  24 + <h1>All About Foundation</h1>
  25 + <h4>Foundation was developed by the team at <a href="http://www.zurb.com">ZURB</a>, an interaction design agency in Campbell, CA.</h4>
  26 + </div>
  27 + </div>
  28 + <br />
  29 + <br />
  30 +
  31 + <div class="row">
  32 + <div class="four columns">
  33 + <h4>Why build it?</h4>
  34 + <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>
  35 + </div>
  36 + <div class="four columns">
  37 + <h4>What's the catch?</h4>
  38 + <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>
  39 + </div>
  40 + <div class="four columns">
  41 + <h4>Something's wrong!</h4>
  42 + <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>
  43 + </div>
  44 + </div>
  45 +
  46 + <div class="row">
  47 + <hr /><br /><br />
  48 + </div>
  49 +
  50 + <div class="row">
  51 + <div class="six columns">
  52 + <h2>Why a yeti?</h2>
  53 + <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>
  54 + <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>
  55 + </div>
  56 + <div class="six columns hide-on-phones">
  57 + <div class="row">
  58 + <div class="six columns">
  59 + <img src="files/lurking-yeti-400x300.jpg" />
  60 + <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>
  61 + </div>
  62 + <div class="six columns">
  63 + <img src="files/tropical-yeti-400x300.jpg" />
  64 + <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>
  65 + </div>
  66 + </div>
  67 + <br /><br />
  68 + <div class="row">
  69 + <div class="six columns">
  70 + <img src="files/yeti-dance-400x300.jpg" />
  71 + <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>
  72 + </div>
  73 + <div class="six columns">
  74 + <img src="files/yeti-love-400x300.jpg" />
  75 + <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>
  76 + </div>
  77 + </div>
  78 + </div>
  79 + <div class="six columns show-on-phones">
  80 + <h5>iPhone Desktops</h5>
  81 + <ul class="block-grid four-up">
  82 + <li>
  83 + <a href="files/lurking-yeti-640x960.jpg"><img src="files/lurking-yeti-640x960.jpg" /></a>
  84 + </li>
  85 + <li>
  86 + <a href="files/tropical-yeti-640x960.jpg"><img src="files/tropical-yeti-640x960.jpg" /></a>
  87 + </li>
  88 + <li>
  89 + <a href="files/yeti-dance-640x960.jpg"><img src="files/yeti-dance-640x960.jpg" /></a>
  90 + </li>
  91 + <li>
  92 + <a href="files/yeti-love-640x960.jpg"><img src="files/yeti-love-640x960.jpg" /></a>
  93 + </li>
  94 + </ul>
  95 + </div>
  96 + </div>
  97 +
  98 +
  99 +
  100 +
  101 + <br><br>
  102 + <div class="row">
  103 + <nav class="ten columns hide-on-desktops">
  104 + <ul>
  105 + <li><a href="docs/">Documentation</a></li>
  106 + <li><a href="http://github.com/zurb/foundation">On Github</a></li>
  107 + <li><a class="nice small blue button src-download" href="files/foundation-download-<?= $version ?>.zip">Download</a></li>
  108 + </ul>
  109 + </nav>
  110 + </div>
  111 +
  112 +
  113 +<?php include("includes/_footer.php"); ?>
BIN  marketing/apple-touch-icon.png
308 marketing/boxsizing.htc
... ... @@ -0,0 +1,308 @@
  1 +/**
  2 +* CSS-JS-BOOSTER
  3 +*
  4 +* A polyfill for box-sizing: border-box for IE6 & IE7.
  5 +*
  6 +* JScript
  7 +*
  8 +* This program is free software: you can redistribute it and/or modify
  9 +* it under the terms of the GNU Lesser General Public License as published
  10 +* by the Free Software Foundation, either version 3 of the License, or
  11 +* (at your option) any later version.
  12 +*
  13 +* This program is distributed in the hope that it will be useful,
  14 +* but WITHOUT ANY WARRANTY; without even the implied warranty of
  15 +* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  16 +* GNU Lesser General Public License for more details.
  17 +*
  18 +* See <http://www.gnu.org/licenses/lgpl-3.0.txt>
  19 +*
  20 +* @category JScript
  21 +* @package box-sizing-polyfill
  22 +* @author Christian Schepp Schaefer <schaepp@gmx.de> <http://twitter.com/derSchepp>
  23 +* @copyright 2010 Christian Schepp Schaefer
  24 +* @license http://www.gnu.org/copyleft/lesser.html The GNU LESSER GENERAL PUBLIC LICENSE, Version 3.0
  25 +* @link http://github.com/Schepp/box-sizing-polyfill
  26 +*
  27 +* PREFACE:
  28 +*
  29 +* This box-sizing polyfill is based on previous work done by Erik Arvidsson,
  30 +* which he published in 2002 on http://webfx.eae.net/dhtml/boxsizing/boxsizing.html.
  31 +*
  32 +* USAGE:
  33 +*
  34 +* Add the behavior/HTC after every `box-sizing: border-box;` that you assign:
  35 +*
  36 +* box-sizing: border-box;
  37 +* *behavior: url(/scripts/boxsizing.htc);`
  38 +*
  39 +* If you prefix the `behavior` property with a star, like seen above, it will only be seen by
  40 +* IE6 & IE7, not by IE8+ (it's a hack) which is better for the performance on those newer browsers.
  41 +*
  42 +* The URL to the HTC file must be relative to your HTML(!) document, not relative to your CSS.
  43 +* That's why I'd advise you to use absolute paths like in the example.
  44 +*
  45 +*/
  46 +<component lightWeight="true">
  47 +<attach event="onpropertychange" onevent="checkPropertyChange()" />
  48 +<attach event="ondetach" onevent="restore()" />
  49 +<attach event="onresize" for="window" onevent="restore();init()" />
  50 +<script type="text/javascript">
  51 +//<![CDATA[
  52 +
  53 +var viewportwidth = (typeof window.innerWidth != 'undefined' ? window.innerWidth : element.document.documentElement.clientWidth);
  54 +// Shortcut for the document object
  55 +var doc = element.document;
  56 +
  57 +/*
  58 +* init gets called once at the start and then never again,
  59 +* triggers box-sizing calculations and updates width and height
  60 +*/
  61 +function init(){
  62 + // check for IE8+
  63 + if(typeof(element.style.boxSizing) == "undefined"){
  64 + updateBorderBoxWidth();
  65 + updateBorderBoxHeight();
  66 + }
  67 +}
  68 +
  69 +/*
  70 +* restore gets called when the behavior is being detached (see event binding at the top),
  71 +* resets everything like it was before applying the behavior
  72 +*/
  73 +function restore(){
  74 + // check for IE8+
  75 + if(typeof(element.style.boxSizing) == "undefined"){
  76 + element.runtimeStyle.width = "";
  77 + element.runtimeStyle.height = "";
  78 + }
  79 +}
  80 +
  81 +/*
  82 +* checkPropertyChange gets called as soon as an element property changes
  83 +* (see event binding at the top), it then checks if any property influencing its
  84 +* dimensions was changed and if yes recalculates width and height
  85 +*/
  86 +function checkPropertyChange(){
  87 + // check for IE8+
  88 + if(typeof(element.style.boxSizing) == "undefined"){
  89 + var pn = event.propertyName;
  90 + var undef;
  91 + if(pn == "style.boxSizing" && element.style.boxSizing == ""){
  92 + element.style.removeAttribute("boxSizing");
  93 + element.runtimeStyle.boxSizing = undef;
  94 + }
  95 + switch (pn){
  96 + case "style.width":
  97 + case "style.borderLeftWidth":
  98 + case "style.borderLeftStyle":
  99 + case "style.borderRightWidth":
  100 + case "style.borderRightStyle":
  101 + case "style.paddingLeft":
  102 + case "style.paddingRight":
  103 + updateBorderBoxWidth();
  104 + break;
  105 +
  106 + case "style.height":
  107 + case "style.borderTopWidth":
  108 + case "style.borderTopStyle":
  109 + case "style.borderBottomWidth":
  110 + case "style.borderBottomStyle":
  111 + case "style.paddingTop":
  112 + case "style.paddingBottom":
  113 + updateBorderBoxHeight();
  114 + break;
  115 +
  116 + case "className":
  117 + case "style.boxSizing":
  118 + updateBorderBoxWidth();
  119 + updateBorderBoxHeight();
  120 + break;
  121 + }
  122 + }
  123 +}
  124 +
  125 +/*
  126 + * Helper function, taken from Dean Edward's IE7 framework,
  127 + * added by Schepp on 12.06.2010.
  128 + * http://code.google.com/p/ie7-js/
  129 + *
  130 + * Allows us to convert from relative to pixel-values.
  131 + */
  132 +function getPixelValue(value){
  133 + var PIXEL = /^\d+(px)?$/i;
  134 + if (PIXEL.test(value)) return parseInt(value);
  135 + var style = element.style.left;
  136 + var runtimeStyle = element.runtimeStyle.left;
  137 + element.runtimeStyle.left = element.currentStyle.left;
  138 + element.style.left = value || 0;
  139 + value = parseInt(element.style.pixelLeft);
  140 + element.style.left = style;
  141 + element.runtimeStyle.left = runtimeStyle;
  142 +
  143 + return value;
  144 +}
  145 +
  146 +function getPixelWidth(object, value){
  147 + // For Pixel Values
  148 + var PIXEL = /^\d+(px)?$/i;
  149 + if (PIXEL.test(value)) return parseInt(value);
  150 +
  151 + // For Percentage Values
  152 + var PERCENT = /^[\d\.]+%$/i;
  153 + if (PERCENT.test(value)){
  154 + try{
  155 + parentWidth = getPixelWidth(object.parentElement,(object.parentElement.currentStyle.width != "auto" ? object.parentElement.currentStyle.width : "100%"));
  156 + value = (parseFloat(value) / 100) * parentWidth;
  157 + }
  158 + catch(e){
  159 + value = (parseFloat(value) / 100) * element.document.documentElement.clientWidth;
  160 + }
  161 + return parseInt(value);
  162 + }
  163 +
  164 + // For EM Values
  165 + var style = object.style.left;
  166 + var runtimeStyle = object.runtimeStyle.left;
  167 + object.runtimeStyle.left = object.currentStyle.left;
  168 + object.style.left = value || 0;
  169 + value = parseInt(object.style.pixelLeft);
  170 + object.style.left = style;
  171 + object.runtimeStyle.left = runtimeStyle;
  172 +
  173 + return value;
  174 +}
  175 +
  176 +
  177 +/*
  178 + * getBorderWidth & friends
  179 + * Border width getters
  180 + */
  181 +function getBorderWidth(sSide){
  182 + if(element.currentStyle["border" + sSide + "Style"] == "none"){
  183 + return 0;
  184 + }
  185 + var n = getPixelValue(element.currentStyle["border" + sSide + "Width"]);
  186 + return n || 0;
  187 +}
  188 +function getBorderLeftWidth() { return getBorderWidth("Left"); }
  189 +function getBorderRightWidth() { return getBorderWidth("Right"); }
  190 +function getBorderTopWidth() { return getBorderWidth("Top"); }
  191 +function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
  192 +
  193 +
  194 +/*
  195 + * getPadding & friends
  196 + * Padding width getters
  197 + */
  198 +function getPadding(sSide) {
  199 + var n = getPixelValue(element.currentStyle["padding" + sSide]);
  200 + return n || 0;
  201 +}
  202 +function getPaddingLeft() { return getPadding("Left"); }
  203 +function getPaddingRight() { return getPadding("Right"); }
  204 +function getPaddingTop() { return getPadding("Top"); }
  205 +function getPaddingBottom() { return getPadding("Bottom"); }
  206 +
  207 +
  208 +
  209 +/*
  210 + * getBoxSizing
  211 + * Get the box-sizing value for the current element
  212 + */
  213 +function getBoxSizing(){
  214 + var s = element.style;
  215 + var cs = element.currentStyle
  216 + if(typeof s.boxSizing != "undefined" && s.boxSizing != ""){
  217 + return s.boxSizing;
  218 + }
  219 + if(typeof s["box-sizing"] != "undefined" && s["box-sizing"] != ""){
  220 + return s["box-sizing"];
  221 + }
  222 + if(typeof cs.boxSizing != "undefined" && cs.boxSizing != ""){
  223 + return cs.boxSizing;
  224 + }
  225 + if(typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != ""){
  226 + return cs["box-sizing"];
  227 + }
  228 + return getDocumentBoxSizing();
  229 +}
  230 +
  231 +
  232 +/*
  233 + * getDocumentBoxSizing
  234 + * Get the default document box sizing (check for quirks mode)
  235 + */
  236 +function getDocumentBoxSizing(){
  237 + if(doc.compatMode == null || doc.compatMode == "BackCompat"){
  238 + return "border-box";
  239 + }
  240 + return "content-box"
  241 +}
  242 +
  243 +
  244 +/*
  245 + * setBorderBoxWidth & friends
  246 + * Width and height setters
  247 + */
  248 +function setBorderBoxWidth(n){
  249 + element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
  250 + getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
  251 +}
  252 +function setBorderBoxHeight(n){
  253 + element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
  254 + getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
  255 +}
  256 +function setContentBoxWidth(n){
  257 + element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
  258 + getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
  259 +}
  260 +function setContentBoxHeight(n){
  261 + element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
  262 + getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
  263 +}
  264 +
  265 +
  266 +/*
  267 + * updateBorderBoxWidth & updateBorderBoxHeight
  268 + *
  269 + */
  270 +function updateBorderBoxWidth() {
  271 + if(getDocumentBoxSizing() == getBoxSizing()){
  272 + return;
  273 + }
  274 + var csw = element.currentStyle.width;
  275 + if(csw != "auto"){
  276 + csw = getPixelWidth(element,csw);
  277 + if(getBoxSizing() == "border-box"){
  278 + setBorderBoxWidth(parseInt(csw));
  279 + }
  280 + else{
  281 + setContentBoxWidth(parseInt(csw));
  282 + }
  283 + }
  284 +}
  285 +
  286 +function updateBorderBoxHeight() {
  287 + if(getDocumentBoxSizing() == getBoxSizing()){
  288 + return;
  289 + }
  290 + var csh = element.currentStyle.height;
  291 + if(csh != "auto"){
  292 + csh = getPixelValue(csh);
  293 + if(getBoxSizing() == "border-box"){
  294 + setBorderBoxHeight(parseInt(csh));
  295 + }
  296 + else{
  297 + setContentBoxHeight(parseInt(csh));
  298 + }
  299 + }
  300 +}
  301 +
  302 +
  303 +// Run the calculations
  304 +init();
  305 +
  306 +//]]>
  307 +</script>
  308 +</component>
95 marketing/cache/navigation_bar.html
... ... @@ -0,0 +1,95 @@
  1 +<div class="container" id="megaDrop" style="display: none; ">
  2 + <div class="mobile-main-nav-padding">
  3 + <div class="row">
  4 + <div class="twelve columns">
  5 + <div class="sitemap-link"><a href="http://www.zurb.com/sitemap">Sitemap</a></div>
  6 + </div>
  7 + </div>
  8 + <div class="row">
  9 + <div class="twelve columns center-content">
  10 + <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>
  11 + <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>
  12 + </div>
  13 + </div>
  14 +
  15 + <div class="row">
  16 + <div class="tablet-padding">
  17 + <div class="three columns property" id="zurbApps">
  18 + <h4><a href="http://zurb.com/apps"><small class="gray">ZURBapps</small></a></h4>
  19 + <p><a href="http://zurb.com/apps">ZURBapps helps you design great products faster through rapid prototyping, iteration and user feedback. →</a></p>
  20 + <hr>
  21 + <p>Check out some of our apps:</p>
  22 + <div class="row">
  23 + <div class="six columns">
  24 + <ul class="zurb-apps">
  25 + <li class="influence"><a href="http://www.influenceapp.com">Influence</a></li>
  26 + <li class="verify"><a href="http://www.verifyapp.com">Verify</a></li>
  27 + </ul>
  28 + </div>
  29 + <div class="six columns">
  30 + <ul class="zurb-apps">
  31 + <li class="notable"><a href="http://www.notableapp.com">Notable</a></li>
  32 + <li class="solidify"><a href="http://www.influenceapp.com">Solidify</a></li>
  33 + </ul>
  34 + </div>
  35 + </div>
  36 + </div>
  37 + <div class="show-on-phones"><br><br></div>
  38 + <div class="three columns property" id="zurbEvents">
  39 + <h4><a href="http://zurb.com/events"><small class="magenta">ZURBevents</small></a></h4>
  40 + <p><a href="http://zurb.com/events">Our ZURBevents explore the intersection of product design and business. →</a></p>
  41 + <hr>
  42 + <p>Come to ZURBsoapbox:</p>
  43 + <div class="zurb-soapbox">
  44 + <p>
  45 + <a href="http://www.zurb.com/soapbox/rsvp">
  46 + <strong>Jeff Atwood</strong>,
  47 + Founder of Stack Overflow, gets on his soapbox on
  48 + <strong>May 04, 2012</strong>
  49 + at ZURB HQ.<br>
  50 + RSVP Now →
  51 + </a>
  52 + </p>
  53 + </div>
  54 +
  55 + </div>
  56 + <div class="show-on-phones"><br><br></div>
  57 + <div class="three columns property" id="zurbExpo">
  58 + <h4><a href="http://zurb.com/expo"><small class="yellow">ZURBexpo</small></a></h4>
  59 + <p><a href="http://zurb.com/expo">ZURBexpo is an exhibition of product design ideas to help you design great products faster. →</a></p>
  60 + <hr>
  61 + <p>Our latest blog post:</p>
  62 + <div class="zurb-blog">
  63 + <p>
  64 + <a href="http://www.zurb.com/blog/953">
  65 + <strong>Has Getting Our Attention Come Down to A Bear and A Flaming Meteor?</strong><br>
  66 + Read More →
  67 +</a> </p>
  68 + </div>
  69 + </div>
  70 + <div class="show-on-phones"><br><br></div>
  71 + <div class="three columns property" id="zurbJobs">
  72 + <h4><a href="http://zurb.com/jobs"><small class="blue">ZURBjobs</small></a></h4>
  73 + <p><a href="http://zurb.com/jobs">ZURBjobs is a job board focused solely on mobile/web product designers &amp; engineers. →</a></p>
  74 + <hr>
  75 +
  76 + <div class="zurb-jobs">
  77 + <p>Interested in this job?</p>
  78 + <p>
  79 + <a href="http://www.zurb.com/jobs/130-zurb-design-lead">
  80 + <strong>Design Lead</strong> at
  81 + <strong>ZURB</strong><br>
  82 + Read More →
  83 +</a> </p>
  84 + </div>
  85 + </div>
  86 + </div>
  87 + </div>
  88 +
  89 + <div class="row">
  90 + <div class="drop-down-foundation">
  91 + <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>
  92 + </div>
  93 + </div>
  94 + </div>
  95 +</div>
106 marketing/case-flite.php
... ... @@ -0,0 +1,106 @@
  1 +<?
  2 + $page_title = "Flite Case Study";
  3 + $caseStudiesTab = true;
  4 +?>
  5 +<?php include("includes/_header.php"); ?>
  6 +
  7 +<style type="text/css">
  8 +.snipt-embed-meta-container { display: none; }
  9 +.snipt-embed-code { height: 370px; }
  10 +.snipt-embed-byline { display: block; }
  11 +</style>
  12 +
  13 +
  14 + <!-- Grid BG -->
  15 + <div id="gridBgShort" class="container hide-on-phones">
  16 + <div class="white-fade"></div>
  17 + <div class="row">
  18 + <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>
  19 + </div>
  20 + </div>
  21 + <!-- /Grid BG -->
  22 +
  23 + <div id="insideContainer" class="container">
  24 + <div class="row hide-on-phones">
  25 + <a href="index.php" class="back two columns hide-on-phones">&larr; Home</a>
  26 + </div>
  27 +
  28 + <div class="row">
  29 + <div class="twelve columns">
  30 + <nav class="on-page hide-on-phones">
  31 + <ul>
  32 + <li><a href="case-swizzle.php">Swizzle</a></li>
  33 + <li><a href="case-soapbox.php">ZURBsoapbox</a></li>
  34 + <li><a href="case-foundation.php">Foundation</a></li>
  35 + <li><a href="case-reel.php">Reel</a></li>
  36 + <li><a href="case-zurbjobs.php">ZURBjobs</a></li>
  37 + <li class="current"><a href="case-flite.php">Flite</a></li>
  38 + </ul>
  39 + </nav>
  40 + <h1 class="light-weight">Flite</h1>
  41 + </div>
  42 + </div>
  43 + <div class="row">
  44 + <div class="eight columns">
  45 + <div class="frame"><a href="http://www.flite.com/" target="_blank"><img src="images/case-flite1.jpg"></a></div>
  46 + </div>
  47 + <div class="four columns">
  48 + <h4>Flite: Foundation Was the Way To Go</h4>
  49 + <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>
  50 +
  51 + <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:
  52 + <blockquote>
  53 + “Getting up to speed was super easy.”
  54 + </blockquote>
  55 +
  56 +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>
  57 + </div>
  58 + </div>
  59 + <br/><br />
  60 +
  61 + <div class="row">
  62 + <div class="seven columns">
  63 + <h5>Integrating Their Design with Foundation</h5>
  64 + <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>
  65 +
  66 + <h5>Retina Display ... No Problem</h5>
  67 + <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>
  68 +
  69 + </div>
  70 + <div class="five columns">
  71 +
  72 + <a href="http://www.flite.com/" target="_blank">
  73 + <img src="images/case-flite2.jpg">
  74 + </a>
  75 +
  76 + <br/>
  77 + <br/>
  78 + <h5>Would Use it Again</h5>
  79 + <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.
  80 + <blockquote>
  81 + “Overall, I would definitely use it again for other projects” — Andy
  82 + </blockquote>
  83 + </p>
  84 + </div>
  85 + </div>
  86 +
  87 + <br><br>
  88 + <div class="row">
  89 + <div class="twelve columns">
  90 + <a class="hide-on-phones nice blue button right" href="case-swizzle.php">Case Study: Swizzle &rarr;</a>
  91 + <!-- <a class="left hide-on-desktops" href="mobile.php">&larr; Mobility</a> -->
  92 + <a class="right show-on-phones" href="case-swizzle.php">Case Study: Swizzle &rarr;</a>
  93 + </div>
  94 + <br><br>
  95 + <nav class="ten columns show-on-phones">
  96 + <ul>
  97 + <li><a href="#">Documentation</a></li>
  98 + <li><a href="#">On Github</a></li>
  99 + <li><a class="nice small blue button src-download" href="files/foundation-download-<?= $version ?>.zip">Download</a></li>
  100 + </ul>
  101 + </nav>
  102 + </div>
  103 +
  104 +
  105 +
  106 +<?php include("includes/_footer.php"); ?>
85 marketing/case-foundation.php
... ... @@ -0,0 +1,85 @@
  1 +<?
  2 + $page_title = "Foundation Case Study";
  3 + $caseStudiesTab = true;
  4 +?>
  5 +<?php include("includes/_header.php"); ?>
  6 +
  7 + <!-- Grid BG -->
  8 + <div id="gridBgShort" class="container hide-on-phones">
  9 + <div class="white-fade"></div>
  10 + <div class="row">
  11 + <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>
  12 + </div>
  13 + </div>
  14 + <!-- /Grid BG -->
  15 +
  16 + <div id="insideContainer" class="container">
  17 + <div class="row hide-on-phones">
  18 + <a href="index.php" class="back two columns hide-on-phones">&larr; Home</a>
  19 + </div>
  20 +
  21 + <div class="row">
  22 + <div class="twelve columns">
  23 + <nav class="on-page hide-on-phones">
  24 + <ul>
  25 + <li><a href="case-swizzle.php">Swizzle</a></li>
  26 + <li><a href="case-soapbox.php">ZURBsoapbox</a></li>
  27 + <li class="current"><a href="case-foundation.php">Foundation</a></li>
  28 + <li><a href="case-reel.php">Reel</a></li>
  29 + <li><a href="case-zurbjobs.php">ZURBjobs</a></li>
  30 + <li><a href="case-flite.php">Flite</a></li>
  31 + </ul>
  32 + </nav>
  33 + <h1 class="light-weight">Launching Foundation</h1>
  34 + </div>
  35 + </div>
  36 + <div class="row">
  37 + <div class="eight columns">
  38 + <div class="frame"><img src="images/case-foundation.jpg"></div>
  39 + </div>
  40 + <div class="four columns">
  41 + <h4>Pretty meta, we know.</h4>
  42 + <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>
  43 + </div>
  44 + </div>
  45 + <br /><br />
  46 +
  47 + <div class="row">
  48 + <div class="four columns">
  49 + <h5>Showing the Grid</h5>
  50 + <div class="frame"><img src="images/case-foundation-1.jpg"></div>
  51 + <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>
  52 + </div>
  53 + <div class="four columns">
  54 + <h5>Mobile Slider</h5>
  55 + <img src="images/case-foundation-2.jpg">
  56 + <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>
  57 + </div>
  58 + <div class="four columns">
  59 + <h5>Next Steps: Case Studies</h5>
  60 + <img src="images/case-foundation-3.jpg">
  61 + <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>
  62 + </div>
  63 + </div>
  64 +
  65 +
  66 + <br><br>
  67 + <div class="row">
  68 + <div class="twelve columns">
  69 + <a class="hide-on-phones nice blue button right" href="case-reel.php">Case Study: Reel &rarr;</a>
  70 + <!-- <a class="left hide-on-desktops" href="mobile.php">&larr; Mobility</a> -->
  71 + <a class="right show-on-phones" href="case-reel.php">Case Study: Reel &rarr;</a>
  72 + </div>
  73 + <br><br>
  74 + <nav class="ten columns show-on-phones">
  75 + <ul>
  76 + <li><a href="#">Documentation</a></li>
  77 + <li><a href="#">On Github</a></li>
  78 + <li><a class="nice small blue button src-download" href="files/foundation-download-<?= $version ?>.zip">Download</a></li>
  79 + </ul>
  80 + </nav>
  81 + </div>
  82 +
  83 +
  84 +
  85 +<?php include("includes/_footer.php"); ?>
85 marketing/case-reel.php
... ... @@ -0,0 +1,85 @@
  1 +<?
  2 + $page_title = "Reel Case Study";
  3 + $caseStudiesTab = true;
  4 +?>
  5 +<?php include("includes/_header.php"); ?>
  6 +
  7 + <!-- Grid BG -->
  8 + <div id="gridBgShort" class="container hide-on-phones">
  9 + <div class="white-fade"></div>
  10 + <div class="row">
  11 + <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>
  12 + </div>
  13 + </div>
  14 + <!-- /Grid BG -->
  15 +
  16 + <div id="insideContainer" class="container">
  17 + <div class="row hide-on-phones">
  18 + <a href="index.php" class="back two columns hide-on-phones">&larr; Home</a>
  19 + </div>
  20 +
  21 + <div class="row">
  22 + <div class="twelve columns">
  23 + <nav class="on-page hide-on-phones">
  24 + <ul>
  25 + <li><a href="case-swizzle.php">Swizzle</a></li>
  26 + <li><a href="case-soapbox.php">ZURBsoapbox</a></li>
  27 + <li><a href="case-foundation.php">Foundation</a></li>
  28 + <li class="current"><a href="case-reel.php">Reel</a></li>
  29 + <li><a href="case-zurbjobs.php">ZURBjobs</a></li>
  30 + <li><a href="case-flite.php">Flite</a></li>
  31 + </ul>
  32 + </nav>
  33 + <h1 class="light-weight">Reeling in Feedback</h1>
  34 + </div>
  35 + </div>
  36 + <div class="row">
  37 + <div class="eight columns">
  38 + <div class="frame"><img src="images/case-reel.jpg"></div>
  39 + </div>
  40 + <div class="four columns">
  41 + <h4>Powerpoint sucks, especially online.</h4>
  42 + <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>
  43 + </div>
  44 + </div>
  45 + <br /><br />
  46 +
  47 + <div class="row">
  48 + <div class="four columns">
  49 + <h5>Identical Templates</h5>
  50 + <img src="images/case-reel-1.jpg" />
  51 + <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>
  52 + </div>
  53 + <div class="four columns">
  54 + <h5>Easy Organization</h5>
  55 + <img src="images/case-reel-2.jpg" />
  56 + <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>
  57 + </div>
  58 + <div class="four columns">
  59 + <h5>Next Steps: New App</h5>
  60 + <img src="images/case-reel-3.jpg" />
  61 + <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>
  62 + </div>
  63 + </div>
  64 +
  65 +
  66 + <br><br>
  67 + <div class="row">
  68 + <div class="twelve columns">
  69 + <a class="hide-on-phones nice blue button right" href="case-zurbjobs.php">Case Study: ZURBjobs &rarr;</a>
  70 + <!-- <a class="left hide-on-desktops" href="mobile.php">&larr; Mobility</a> -->
  71 + <a class="right show-on-phones" href="case-zurbjobs.php">Case Study: ZURBjobs &rarr;</a>
  72 + </div>
  73 + <br><br>
  74 + <nav class="ten columns show-on-phones">
  75 + <ul>
  76 + <li><a href="#">Documentation</a></li>
  77 + <li><a href="#">On Github</a></li>
  78 + <li><a class="nice small blue button src-download" href="files/foundation-download-<?= $version ?>.zip">Download</a></li>
  79 + </ul>
  80 + </nav>
  81 + </div>
  82 +
  83 +
  84 +
  85 +<?php include("includes/_footer.php"); ?>
85 marketing/case-soapbox.php
... ... @@ -0,0 +1,85 @@
  1 +<?
  2 + $page_title = "ZURBsoapbox Case Study";
  3 + $caseStudiesTab = true;
  4 +?>
  5 +<?php include("includes/_header.php"); ?>
  6 +
  7 + <!-- Grid BG -->
  8 + <div id="gridBgShort" class="container hide-on-phones">
  9 + <div class="white-fade"></div>
  10 + <div class="row">
  11 + <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>
  12 + </div>
  13 + </div>
  14 + <!-- /Grid BG -->
  15 +
  16 + <div id="insideContainer" class="container">
  17 + <div class="row hide-on-phones">
  18 + <a href="index.php" class="back two columns hide-on-phones">&larr; Home</a>
  19 + </div>
  20 +
  21 + <div class="row">
  22 + <div class="twelve columns">
  23 + <nav class="on-page hide-on-phones">
  24 + <ul>
  25 + <li><a href="case-swizzle.php">Swizzle</a></li>
  26 + <li class="current"><a href="case-soapbox.php">ZURBsoapbox</a></li>
  27 + <li><a href="case-foundation.php">Foundation</a></li>
  28 + <li><a href="case-reel.php">Reel</a></li>
  29 + <li><a href="case-zurbjobs.php">ZURBjobs</a></li>
  30 + <li><a href="case-flite.php">Flite</a></li>
  31 + </ul>
  32 + </nav>
  33 + <h1 class="light-weight">Building ZURBsoapbox</h1>
  34 + </div>
  35 + </div>
  36 + <div class="row">
  37 + <div class="eight columns">
  38 + <div class="frame"><a href="http://www.zurbsoapbox.com"><img src="images/case-soapbox.jpg"></a></div>
  39 + </div>
  40 + <div class="four columns">
  41 + <h4>Rapidly launching and iterating for our audience.</h4>
  42 + <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>
  43 + </div>
  44 + </div>
  45 + <br /><br />
  46 +
  47 + <div class="row">
  48 + <div class="four columns">
  49 + <h5>Instant Mobile Site</h5>
  50 + <div class="frame"><img src="images/case-soapbox-1.jpg"></div>
  51 + <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>
  52 + </div>
  53 + <div class="four columns">
  54 + <h5>Device-Specific Function</h5>
  55 + <img src="images/case-soapbox-2.jpg">
  56 + <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>
  57 + </div>
  58 + <div class="four columns">
  59 + <h5>Next Steps: Images</h5>
  60 + <img src="images/case-soapbox-3.jpg">
  61 + <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>
  62 + </div>