zurb-foundation 3.2.5 → 4.0.0.rc1

data/docs/css/qunit-composite.css

@@ -0,0 +1,13 @@
+iframe.qunit-subsuite {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    
+    margin: 0;
+    padding: 0;
+    border-width: 1px 0 0;
+    height: 45%;
+    width: 100%;
+
+    background: #fff;
+}

data/docs/css/qunit.css

@@ -0,0 +1,235 @@
+/**
+ * QUnit v1.10.0 - A JavaScript Unit Testing Framework
+ *
+ * http://qunitjs.com
+ *
+ * Copyright 2012 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+
+/** Font Family and Sizes */
+
+#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
+	font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
+}
+
+#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
+#qunit-tests { font-size: smaller; }
+
+
+/** Resets */
+
+#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
+	margin: 0;
+	padding: 0;
+}
+
+
+/** Header */
+
+#qunit-header {
+	padding: 0.5em 0 0.5em 1em;
+
+	color: #8699a4;
+	background-color: #0d3349;
+
+	font-size: 1.5em;
+	line-height: 1em;
+	font-weight: normal;
+
+	border-radius: 5px 5px 0 0;
+	-moz-border-radius: 5px 5px 0 0;
+	-webkit-border-top-right-radius: 5px;
+	-webkit-border-top-left-radius: 5px;
+}
+
+#qunit-header a {
+	text-decoration: none;
+	color: #c2ccd1;
+}
+
+#qunit-header a:hover,
+#qunit-header a:focus {
+	color: #fff;
+}
+
+#qunit-testrunner-toolbar label {
+	display: inline-block;
+	padding: 0 .5em 0 .1em;
+}
+
+#qunit-banner {
+	height: 5px;
+}
+
+#qunit-testrunner-toolbar {
+	padding: 0.5em 0 0.5em 2em;
+	color: #5E740B;
+	background-color: #eee;
+	overflow: hidden;
+}
+
+#qunit-userAgent {
+	padding: 0.5em 0 0.5em 2.5em;
+	background-color: #2b81af;
+	color: #fff;
+	text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
+}
+
+#qunit-modulefilter-container {
+	float: right;
+}
+
+/** Tests: Pass/Fail */
+
+#qunit-tests {
+	list-style-position: inside;
+}
+
+#qunit-tests li {
+	padding: 0.4em 0.5em 0.4em 2.5em;
+	border-bottom: 1px solid #fff;
+	list-style-position: inside;
+}
+
+#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running  {
+	display: none;
+}
+
+#qunit-tests li strong {
+	cursor: pointer;
+}
+
+#qunit-tests li a {
+	padding: 0.5em;
+	color: #c2ccd1;
+	text-decoration: none;
+}
+#qunit-tests li a:hover,
+#qunit-tests li a:focus {
+	color: #000;
+}
+
+#qunit-tests ol {
+	margin-top: 0.5em;
+	padding: 0.5em;
+
+	background-color: #fff;
+
+	border-radius: 5px;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+}
+
+#qunit-tests table {
+	border-collapse: collapse;
+	margin-top: .2em;
+}
+
+#qunit-tests th {
+	text-align: right;
+	vertical-align: top;
+	padding: 0 .5em 0 0;
+}
+
+#qunit-tests td {
+	vertical-align: top;
+}
+
+#qunit-tests pre {
+	margin: 0;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+#qunit-tests del {
+	background-color: #e0f2be;
+	color: #374e0c;
+	text-decoration: none;
+}
+
+#qunit-tests ins {
+	background-color: #ffcaca;
+	color: #500;
+	text-decoration: none;
+}
+
+/*** Test Counts */
+
+#qunit-tests b.counts                       { color: black; }
+#qunit-tests b.passed                       { color: #5E740B; }
+#qunit-tests b.failed                       { color: #710909; }
+
+#qunit-tests li li {
+	padding: 5px;
+	background-color: #fff;
+	border-bottom: none;
+	list-style-position: inside;
+}
+
+/*** Passing Styles */
+
+#qunit-tests li li.pass {
+	color: #3c510c;
+	background-color: #fff;
+	border-left: 10px solid #C6E746;
+}
+
+#qunit-tests .pass                          { color: #528CE0; background-color: #D2E0E6; }
+#qunit-tests .pass .test-name               { color: #366097; }
+
+#qunit-tests .pass .test-actual,
+#qunit-tests .pass .test-expected           { color: #999999; }
+
+#qunit-banner.qunit-pass                    { background-color: #C6E746; }
+
+/*** Failing Styles */
+
+#qunit-tests li li.fail {
+	color: #710909;
+	background-color: #fff;
+	border-left: 10px solid #EE5757;
+	white-space: pre;
+}
+
+#qunit-tests > li:last-child {
+	border-radius: 0 0 5px 5px;
+	-moz-border-radius: 0 0 5px 5px;
+	-webkit-border-bottom-right-radius: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+}
+
+#qunit-tests .fail                          { color: #000000; background-color: #EE5757; }
+#qunit-tests .fail .test-name,
+#qunit-tests .fail .module-name             { color: #000000; }
+
+#qunit-tests .fail .test-actual             { color: #EE5757; }
+#qunit-tests .fail .test-expected           { color: green;   }
+
+#qunit-banner.qunit-fail                    { background-color: #EE5757; }
+
+
+/** Result */
+
+#qunit-testresult {
+	padding: 0.5em 0.5em 0.5em 2.5em;
+
+	color: #2b81af;
+	background-color: #D2E0E6;
+
+	border-bottom: 1px solid white;
+}
+#qunit-testresult .module-name {
+	font-weight: bold;
+}
+
+/** Fixture */
+
+#qunit-fixture {
+	position: absolute;
+	top: -10000px;
+	left: -10000px;
+	width: 1000px;
+	height: 1000px;
+}

data/docs/faq.html.erb

@@ -0,0 +1,61 @@
+<div class="row">
+  <div class="large-3 columns">
+    <%= render "_sidebar.html.erb" %>
+  </div>
+
+  <div class="large-9 columns">
+
+    <% @page_title = "FAQ" %>
+    <h2><%= @page_title %></h2>
+    
+    <h4 class="subheader">We hear a lot of questions from people using Foundation and realized that a lot of the same ones were being asked. We put together this list of FAQs to help you find answers to common questions.</h4>
+    
+    <h4>Why doesn't Foundation 3 support IE7 or IE8?</h4>
+    <p>Foundation 4 is mobile-first, meaning it relies on media queries to layer in more complex layouts and components. Browsers or devices that don't support media queries will be restricted to a simple, single-column layout. In some ways, Foundation 4 better supports IE6-7 inasmuch as it provides a mobile but not broken experience. In IE8 Foundation 4 will provide less than Foundation 3, but with IE8's market share in such steep decline we thought this was the right time.</p>
+    
+    <p>If IE8 support is important for your users / customers, you can use <a href="../files/foundation-download-2.2.1.zip">Foundation 3.2</a>, which supports IE8. It's not mobile first but it's pretty good stuff.</p>
+
+    <h4>Can I use Foundation for something I'm going to sell?</h4>
+    <p>Yes! Foundation is licensed under the MIT open source license, meaning you can do almost anything with it. The only thing you can't do is imply that Foundation itself is what you're selling.</p>
+
+    <h4>Is Foundation tested on [some other device or browser]?</h4>
+    <p>We try and be comprehensive in our testing, but there are thousands of devices so it's often just not feasible. We'd love to hear about Foundation's behaviour on other devices, but the list above is what we test each release on. If your browser or device is not listed your results may vary.</p>
+
+    <h4>Where can I find the Foundation 3 docs?</h4>
+    <p>For those of you still working on Foundation 2 sites, or who need to continue supporting IE8 with Foundation, we keep the Foundation 3 docs available. <a href="f3/">View the Foundation 3 Docs &rarr;</a></p>
+
+    <hr>
+
+    <h2>Getting Help</h2>
+    <h5 class="subheader">If the documentation and questions above aren't enough, there are several avenues of support available for you to pursue.</h5>
+
+    <h5><a href="https://groups.google.com/forum/?fromgroups#!forum/foundation-framework-">Foundation Framework Google Group</a></h5>
+    <p>This is an active group of Foundation users who can answer questions about implementation or approach. If you aren't sure how to do something, or something isn't working like you'd expect, reach out here.</p>
+
+    <h5><a href="http://github.com/zurb/foundation/issues">Github Issues</a></h5>
+    <p>If you've found a bug in the framework (or think you have) you can file it here. We try and address these as part of ongoing development. Please use this only for bugs or things that seem incorrect, support requests will not be addressed quickly here.</p>
+
+    <h5><a href="http://twitter.com/foundationzurb">@foundationzurb</a></h5>
+    <p><a href="http://twitter.com/foundationzurb">Follow us on Twitter</a> to hear about new sites using Foundation, code examples, playground pieces from ZURB and more. You can also ping us with quick questions or other support issues, we're usually pretty speedy.</p>
+
+    <h5><a href="mailto:foundation@zurb.com">Get in Touch</a></h5>
+    <p>If you're totally stuck and need some help, shoot us <a href="mailto:foundation@zurb.com">an email</a> and we'll typically get back within a day or two.</p>
+
+    <hr>
+
+    <div class="panel">
+      <h3>What's Changed Recently?</h3>
+      <h5 class="subheader">Foundation is the most advanced front-end framework in existence. We've ditched IE7 so that we can do more awesome things and push the web to where it needs to be. Take a look at our changelog to know what's recently been changed or updated.</h5>
+      <a class="button" href="support.php">Browser Support &raquo;</a> <a class="secondary button" href="changelog.php">See the Version Changelog &raquo;</a>
+    </div>
+
+  </div>
+</div>
+
+
+
+
+
+
+
+

data/docs/index.html.erb

@@ -0,0 +1,299 @@
+<div class="row">
+  <div class="large-3 columns">
+    <%= render "_sidebar.html.erb" %>
+  </div>
+
+  <div class="large-9 columns">
+
+    <h2>Getting Started</h2>
+    <h5 class="subheader">Whether you are using Scss or CSS, we've made it easy to start a project so that you can help take over the world one responsive site at a time.</h5>
+    <p>Foundation is developed in <a href="http://www.sass-lang.com">Sass</a>, which is powerful CSS pre-processor that helps you write cleaner, more organized, CSS that you can more easily maintain over time without the typical headaches of vanilla CSS. On top of our minimal styling, we've written powerful Javascript plugins that will make useful interactions easier to implement across screen sizes.</p>
+
+    <hr>
+
+    <h3>What comes with Foundation?</h3>
+    <h5 class="subheader">We've got you covered when it comes to useful features and we've made it easy to take out what you don't need. Here's what you'll get when you create a project using our Sass version or the default CSS version:</h5>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/grid.html">The Grid</a></h5></dt>
+          <dd>Our grid works on almost any device and has support for nesting, source ordering, offsets and device presentation. It almost makes creating layouts too easy!</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/type.html">Typography</a></h5></dt>
+          <dd>Our type is based on a golden ratio modular scale that creates meaningful relationships for the copy on the page. It's easily updated using Scss or our CSS customizer.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/buttons.html">Buttons</a></h5></dt>
+          <dd>Buttons are a core interactive element of the Web. We've included styles for creating simple marketing CTAs to complex application toolbars.</dd>
+        </dl>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/top-bar.html">Navigation</a></h5></dt>
+          <dd>People have to get around. Navigation styles in Foundation include a complex top bar that supports 3-level dropdown navigation for simple bars, sidebars and subnav pills.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/forms.html">Forms</a></h5></dt>
+          <dd>Built with the Foundation Grid, you can create simple or complicated forms quickly and easily&mdash; validation states, custom select, radio buttons and more.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/panels.html">UI Elements</a></h5></dt>
+          <dd>We've also included lots of useful elements like visibility classes (to hide or show things based on screen size or orientation), labels, alerts, tooltips, panels and a lot more.</dd>
+        </dl>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/section.html">Section</a></h5></dt>
+          <dd>Whether it's entire pages or simple tabbed content, Foundation's tabs get the job done. Not only stylish, but interactive out of the box.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/orbit.html">Orbit</a></h5></dt>
+          <dd>A powerful image or content slider that works responsively and includes tons of useful options, such as timers, paddles, bullet thumbs and more.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/reveal.html">Reveal</a></h5></dt>
+          <dd>You can easily call modals without writing any JS, even spawn subsequent modals cleanly on the same page. Reveal works across devices.</dd>
+        </dl>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/clearing.html">Clearing</a></h5></dt>
+          <dd>Show off your images in style with our easy to use gallery plugin. It's built with simple unordered lists that can be styled to your hearts content.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/magellan.html">Magellan</a></h5></dt>
+          <dd>A flexible sticky navigation that knows where you are on the page. You just tell it what to recognize and set it off.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/joyride.html">Joyride</a></h5></dt>
+          <dd>This plugin lets you give users a tour of your site our app. Joyride is easy to customize using CSS or our Scss variables.</dd>
+        </dl>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5><a href="components/tooltips.html">Tooltips</a></h5></dt>
+          <dd>Tooltips lets you add quick hover or tap tooltips to elements.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns end">
+        <dl>
+          <dt><h5><a href="components/dropdown.html">Dropdown</a></h5></dt>
+          <dd>We've made a dropdown plugin that makes it easy to attach a popover dropdown to any element on the page.</dd>
+        </dl>
+      </div>
+    </div>
+
+    <hr>
+
+    <h3>How is a project structured?</h3>
+    <h5 class="subheader">We follow common patterns for directory structure that are logical and easily maintained. Below is an explanation of each file you'll get when you create a project using our gem or download via our <a href="/download.php">customizer</a>.</h5>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>css</h5></dt>
+          <dd>Includes <code>foundation.css</code> and <code>foundation.min.css</code> so you can choose which to use. We've also included <code>app.css</code> that you can use for custom styles that will sit on top of the Foundation core as overrides.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>js</h5></dt>
+          <dd>All of our plugins and the necessary JavaScript to make Foundation work properly. <strong>All JS is initiated by default</strong>.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>img</h5></dt>
+          <dd>This directory actually comes empty in Foundation 4! We no longer have any images included in the core of Foundation.</dd>
+        </dl>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>index.html</h5></dt>
+          <dd>A sample structure for page content, giving you something to use as a basic structural template for the rest of the pages in your project.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>humans.txt</h5></dt>
+          <dd>A way to tell the world about the people that worked on the sites you build, giving them kudos they deserve.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>robots.txt</h5></dt>
+          <dd>Give instructions to web robots so search engines know what to do when they crawl your site for content.</dd>
+        </dl>
+      </div>
+    </div>
+    <br>
+    <div class="row">
+      <div class="large-12 columns">
+        <div class="panel">
+          <h6 class="subheader"><strong>Using the Gem?</strong> You'll see a couple extra pieces in your project upon creation. These are:</h6>
+          <dl>
+            <dt>sass/</dt>
+            <dd>Your main style folder is named <strong>sass/</strong> and contains <code>app.scss</code>, <code>foundation.scss</code> (which imports Foundation, or the parts you want), and <code>normalize.scss</code>. Override the Foundation styles within your app.scss file. You can see the compiled CSS in your stylesheets directory after you manually <span class="has-tip top" title="$ compass compile <filename>">compile</span> or <span class="has-tip top" title="$ compass watch <directory>">watch</span>. This directory also includes <code>_settings.scss</code>, which is used to control variables that help easily style Foundation.</dd>
+            <dt></i>config.rb</dt>
+            <dd>This file is used by <a href="http://compass-style.org">Compass</a> to compile your project. Here you can control the output style of your CSS, the structure of your directories and other useful settings.</dd>
+          </dl>
+        </div>
+      </div>
+    </div>
+
+    <hr>
+
+    <h3>HTML Page Markup</h3>
+    <h5 class="subheader">Our markup structure is straight forward and gives you the flexibility you need to create to your hearts desires. Here's an example page that includes the basics:</h5>
+
+<%= code_example '
+
+<!DOCTYPE html>
+<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>Foundation 4</title>
+
+  <link rel="stylesheet" href="css/normalize.css" />
+  <link rel="stylesheet" href="css/foundation.css" />
+  <link rel="stylesheet" href="css/app.css" />
+
+  <script src="js/vendor/custom.modernizr.js"></script>
+
+</head>
+<body>
+
+  <!-- body content here -->
+
+  <script>
+  document.write(\'<script src=\' +
+  (\'__proto__\' in {} ? \'js/vendor/zepto\' : \'js/vendor/jquery\') +
+  \'.js><\/script>\')
+  </script>
+
+  <script src="js/foundation/foundation.alerts.js"></script>
+
+  <script src="js/foundation/foundation.clearing.js"></script>
+
+  <script src="js/foundation/foundation.cookie.js"></script>
+
+  <script src="js/foundation/foundation.dropdown.js"></script>
+
+  <script src="js/foundation/foundation.forms.js"></script>
+
+  <script src="js/foundation/foundation.joyride.js"></script>
+
+  <script src="js/foundation/foundation.js"></script>
+
+  <script src="js/foundation/foundation.magellan.js"></script>
+
+  <script src="js/foundation/foundation.orbit.js"></script>
+
+  <script src="js/foundation/foundation.placeholder.js"></script>
+
+  <script src="js/foundation/foundation.reveal.js"></script>
+
+  <script src="js/foundation/foundation.section.js"></script>
+
+  <script src="js/foundation/foundation.tooltips.js"></script>
+
+  <script src="js/foundation/foundation.topbar.js"></script>
+
+  <script src="js/foundation/app.js"></script>
+</body>
+</html>
+
+', :html %>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>Doctype &amp; Head</h5></dt>
+          <dd>We use the HTML doctype declaration to tell the browser what to expect. From there we've used a <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">technique by Paul Irish</a> that attaches classes to the HTML for IE. After that, we set the character set to UTF-8.</dd>
+          <dt>Meta Viewport tag</dt>
+          <dd>This is used to make sure smaller devices use the device width as the viewport width.</dd>
+          <dt>Title Tag</dt>
+          <dd>This one is pretty self-explanatory. You're setting the name of the current page with this value.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>CSS &amp; Modernizr</h5></dt>
+          <dd>The default CSS download includes everything you need to get going, including necessary styles and our custom Modernizr script.</dd>
+          <dt>CSS</dt>
+          <dd>We include <code>foundation.min.css</code> and <code>foundation.css</code>. The difference here is whether or not you want minified code or not (link whichever you want, but not both). You'll also notice <code>app.css</code>, which can be used for your own Foundation overrides.</dd>
+          <dt>Modernizr</dt>
+          <dd>We use this to give us the HTML5 Shiv, touch classes and JS media queries that help us control Foundation.</dd>
+        </dl>
+      </div>
+      <div class="large-4 columns">
+        <dl>
+          <dt><h5>Javascripts</h5></dt>
+          <dd>Our JS is linked up right before the closing body tag and includes all necessary plugins and initializers to hit the ground running.</dd>
+          <dt>jQuery</dt>
+          <dd>We stay as close as possible to the latest version of jQuery at all times. jQuery needs to be included before any Foundation JS.</dd>
+          <dt>Foundation JS</dt>
+          <dd>We include <code>foundation.min.js</code> by default, which includes all the available plugins. If you want to customize, we have every individual plugin commented for you to quickly pick and choose.</dd>
+        </dl>
+      </div>
+    </div>
+
+    <hr>
+
+    <div class="panel">
+      <h3>Get going!</h3>
+      <h5 class="subheader">Now that you understand the gist of what Foundation is and how it works, it's time to start a project! We've got two different ways for you to build projects with Foundation, a Compass Gem using Scss or a with plain CSS.</h5>
+      <a href="../sass.html" class="button">Using the Gem</a></li>
+      <a href="../download.php" class="button secondary">Quickstart with CSS</a></li>
+    </div>
+  </div>
+</div>
+</section>
+
+
+  </div>
+</div>
+
+
+
+
+
+
+
+