zurb-foundation 3.2.5 → 4.0.0.rc1

data/docs/components/tables.html.erb

@@ -0,0 +1,123 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Tables" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Okay, they're not the sexiest things ever, but tables get the job done (for tabular data, of course).</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <table>
+          <thead>
+            <tr>
+              <th width="200">Table Header</th>
+              <th>Table Header</th>
+              <th width="150">Table Header</th>
+              <th width="150">Table Header</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Content Goes Here</td>
+              <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+              <td>Content Goes Here</td>
+              <td>Content Goes Here</td>
+            </tr>
+            <tr>
+              <td>Content Goes Here</td>
+              <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+              <td>Content Goes Here</td>
+              <td>Content Goes Here</td>
+            </tr>
+            <tr>
+              <td>Content Goes Here</td>
+              <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+              <td>Content Goes Here</td>
+              <td>Content Goes Here</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>Tables are built from a mixin, but since tables don't rely on any classes to build, you can use the table element and customize with your CSS. If you are using SCSS, the variables will help you customize the look and feel.</p>
+
+<%= code_example '
+<table>
+  <thead>
+    <tr>
+      <th width="200">Table Header</th>
+      <th>Table Header</th>
+      <th width="150">Table Header</th>
+      <th width="150">Table Header</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Content Goes Here</td>
+      <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+      <td>Content Goes Here</td>
+      <td>Content Goes Here</td>
+    </tr>
+    <tr>
+      <td>Content Goes Here</td>
+      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+      <td>Content Goes Here</td>
+      <td>Content Goes Here</td>
+    </tr>
+    <tr>
+      <td>Content Goes Here</td>
+      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+      <td>Content Goes Here</td>
+      <td>Content Goes Here</td>
+    </tr>
+  </tbody>
+</table>', :html %>
+
+        <hr>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* These control the background color for the table and even rows */
+$table-bg:               #fff;
+$table-even-row-bg:      #f9f9f9;
+
+/* These control the table cell border style */
+$table-border-style:     solid;
+$table-border-size:      1px;
+$table-border-color:     #ddd;
+
+/* These control the table head styles */
+$table-head-bg:          #f5f5f5;
+$table-head-font-size:   emCalc(14px);
+$table-head-font-color:  #222;
+$table-head-font-weight: bold;
+$table-head-padding:     emCalc(8px) emCalc(10px) emCalc(10px);
+
+/* These control the row padding and font styles */
+$table-row-padding:      emCalc(9px) emCalc(10px);
+$table-row-font-size:    emCalc(14px);
+$table-row-font-color:   #222;
+$table-line-height:      emCalc(18px);
+
+/* These are for controlling the display and margin of tables */
+$table-display:          table-cell;
+$table-margin-bottom:    emCalc(20px);', :css %>
+
+        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_foundation-global.scss</strong>.</p>
+
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/thumbnails.html.erb

@@ -0,0 +1,87 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Thumbnails" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">If you are going to use an image as an anchor, we got you covered. All you gotta do is wrap an <code>a.th</code> around your image and voilà!</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <a class="th" href="../img/demos/demo1.png"><img src="../img/demos/demo1-th.png"></a>
+
+        <hr>
+
+        <h3>Building With Predefined HTML Class</h3>
+        <p>We make it really easy to create thumbnails links out of images. Simply wrap your <code>&lt;img&gt;</code> inside a <code>&lt;a class="th"&gt;</code> and you're good to go! You may alternately choose to add a class of <code>.radius</code> to give it a neat little border-radius.</p>
+
+<%= code_example '
+<a class="th radius" href="../img/demos/demo2.png">
+<img src="../img/demos/demo2-th.png">
+</a>', :html %>
+
+        <a class="th radius" href="../img/demos/demo2.png"><img src="../img/demos/demo2-th.png"></a>
+
+        <hr>
+
+        <h3>Build with our Mixins</h3>
+        <p>We've included SCSS mixins used to style labels. To use the mixin, you'll need to have the <a href="#extention-install">extension installed</a> or grab <a href="#">_foundation-global.scss</a> and <a href="#">_thumbs.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+
+<%= code_example '
+@import "foundation/foundation-global", "foundation/labels";
+', :css %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your labels using our global mixin by including it on your custom class or ID  in your own stylesheet. The mixin contains options for changing the background color, which also controls the border and text color. You'll also have the ability to change the font-size and padding. The rest of the defaults can be modified using the available variables. The global mixin looks like this:</p>
+
+<%= code_example '
+/* Using the default styles */
+.your-class-name { @include thumb; }', :css %>
+
+        <p><a class="th" href="../img/demos/demo3.png"><img src="../img/demos/demo3-th.png"></a></p>
+
+        <p>There are also three options you can customize on the fly when writing this mixin. These controls things like: border-width and hover styles for the box-shadow.</p>
+
+<%= code_example '
+/* Using the available options */
+.your-class-name { @include thumb($border-width, $box-shadow, $box-shadow-hover); }
+
+/* Control the width of the white area around the thumnails */
+$border-width: $thumb-border-width
+
+/* Control the default box-shadow that looks like a 1px border */
+$box-shadow: $thumb-box-shadow
+
+/* Change up the style of that box-shadow on hover */
+$box-shadow-hover: $thumb-box-shadow-hover
+', :css %>
+
+        <p>You can also add the radius and single-transition mixin on top of this to create even more versatility!</p>
+
+        <p><a class="th-custom" href="../img/demos/demo4.png"><img src="../img/demos/demo4-th.png"></a></p>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use these to control border styles */
+$thumb-border-style:     solid;
+$thumb-border-width:     4px;
+$thumb-border-color:     #fff;
+$thumb-box-shadow:       0 0 0 1px rgba(#000,.2);
+$thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
+
+/* Radius and transition speed for thumbs */
+$thumb-radius:           $global-radius;
+$thumb-transition-speed: 200ms;', :css %>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/tooltips.html.erb

@@ -0,0 +1,73 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Tooltips" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Tooltips are a quick way to provide <span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span> on a term or action on a page.</h4>
+
+        <hr>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <a name="tooltips"></a>
+        <h4>Building With HTML Classes</h4>
+        <p>Tooltips work cross browser and cross platform and are easily added to a page with a simple markup and class structure. You can apply the <strong>has-tip</strong> class to any element.</p>
+
+        <p>By default, the tooltip takes the width of the element that it is applied to, but you can override this behavior by applying a <strong>data-width</strong> attribute to the target element. The tooltip takes on the content of the targets <strong>title</strong> attribute.</p>
+
+        <p>The tooltips can be positioned on the <span data-tooltip class="has-tip" data-width="210" title="I'm on bottom and the default position.">"tip-bottom"</span>, which is the default position, <span data-tooltip class="has-tip tip-top noradius" data-width="210" title="I'm on the top and I'm not rounded!">"tip-top" (hehe)</span>, <span data-tooltip="left" class="has-tip tip-left" data-width="90" title="I'm on the left!">"tip-left"</span>, or <span data-tooltip="right" class="has-tip tip-right" data-width="120" title="I'm on the right!">"tip-right"</span> of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.</p>
+
+<%= code_example '
+<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
+', :html %>
+
+        <p>Available class options:</p>
+        <ul class="disc">
+          <li><code>tip-top</code>: Align the tip above the element you attach it to.</li>
+          <li><code>tip-bottom</code>: Align the tip below the element you attach it to.</li>
+          <li><code>tip-left</code>: Align the tip to the left the element you attach it to.</li>
+          <li><code>tip-right</code>: Align the tip to the right the element you attach it to.</li>
+        </ul>
+
+        <hr>
+
+        <h3>Using the Javascript</h3>
+        <p>You'll need to include <code>foundation.tooltips.js</code> to make sure everything works properly. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the plugin. Above your closing <code>&lt;/body&gt;</code> tag include the following line of code and make sure you have the JS in your directory:</p>
+
+        <p><a href="../javascript.html" title="How to install Foundation JavaScript">Read how to install Foundation JavaScript</a></p>
+
+        <p>Required Foundation Library: <code>foundation.tooltips.js</code></p>
+
+        <p>Then, you'll need to add a data-attribute to make the JS work properly on that element. That looks like:</p>
+
+<%= code_example '
+<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">...</span>
+', :html %>
+
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>Tooltip options can only be passed in during initialization at this time.</p>
+
+    <%= code_example "
+{
+  selector : '.has-tip',
+  additionalInheritableClasses : [],
+  tooltipClass : '.tooltip',
+  tipTemplate : function (selector, content) {
+    return '<span data-selector=\"' + selector + '\" class=\"'
+      + Foundation.libs.tooltips.settings.tooltipClass.substring(1)
+      + '\">' + content + '<span class=\"nub\"></span></span>';
+  }
+}", :json %>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/top-bar.html.erb

@@ -0,0 +1,219 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Top Bar" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h1><%= @page_title %></h1>
+        <h4 class="subheader">The Foundation Top Bar gives you a great way to display a complex navigation bar on small or large screens.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <p>The topbar is only designed to have one per page, so we can't include a demo on this page due to the fact that we have one on the page already. Take a look at the code we have below and checkout our topbar to get a feel for how it works. The only thing about the one on this page is it doesn't have a dropdown.</p>
+        <hr>
+
+        <h3>Build With HTML Classes</h3>
+        <p>The top bar is a pretty complex piece of magical UI goodness, which makes it really difficult to create a mixin from it. We rely on many presentational classes to accomplish the styles and there's a lot happening in the JS.</p>
+
+        <h5>Basic Needs</h5>
+        <p>The top bar has four main elements, three of which are needed for proper functionality: <code>ul.title-area</code>, one of the section <code>ul class="right/left</code> elements and the <code>li.toggle-topbar</code> element that will expand the menu in the mobile layout. You can leave out the li class="name" as long as you include the .toggle-topbar element.</p>
+
+        <h5>Positioning the Bar</h5>
+        <p>The top bar is built with a single <code>nav</code> element with a class of <code>top-bar</code>. It will take on full-browser width by default. To make the top bar stay fixed as you scroll, wrap it in <code>div class="fixed"</code>. If you want your navigation to be set to your grid width, wrap it in <code>div class="contain-to-grid"</code>. You may use <code>fixed</code> and <code>contain-to-grid</code> together.</p>
+
+        <h5>Building the Nav</h5>
+        <p>When building your bar it is good to be aware of how many links your're going to need in it so you can customize your responsive breakpoint accordingly. Build your navigation with <code>ul.left</code> and/or <code>ul.right</code> depending where you want links. To add items, simply include <code>li</code> elements with and anchor inside them for your top-level. To build a dropdown menu, you'll need to add <code>has-dropdown</code> to the <code>li</code> and include <code>ul.dropdown</code> after that anchor. Add a class of <code>active</code> to mark the current page.</p>
+
+        <h5>Other Elements</h5>
+        <p>To make this navigation nice and flexible, we've included patterns for elements like buttons, inputs and dividers. To create dividers between your navigation, just add an empty <code>li.divider</code> and you'll get some separation. You can use a small Foundation button in the nav, just include <code>has-button</code> as a class for its parent li. You can include two different input types: search and text. To use these, add a class of search to the parent li.</p>
+
+        <h5>Sticky Top Bar</h5>
+        <p>You may also wrap your top bar in <code>div class="contain-to-grid sticky"</code> and put it anywhere within your markup. When the navigation hits the top of the browser, it will act like the fixed top bar and stick to the top as users continue to scroll.</p>
+
+<%= code_example '
+<nav class="top-bar">
+  <ul class="title-area">
+    <!-- Title Area -->
+    <li class="name">
+      <h1><a href="#">Top Bar Title </a></h1>
+    </li>
+    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
+    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
+  </ul>
+
+  <section class="top-bar-section">
+    <!-- Left Nav Section -->
+    <ul class="left">
+      <li class="divider"></li>
+      <li class="active"><a href="#">Main Item 1</a></li>
+      <li class="divider"></li>
+      <li><a href="#">Main Item 2</a></li>
+      <li class="divider"></li>
+      <li class="has-dropdown"><a href="#">Main Item 3</a>
+
+        <ul class="dropdown">
+          <li class="has-dropdown"><a href="#">Dropdown Level 1a</a>
+
+            <ul class="dropdown">
+              <li><label>Dropdown Level 2 Label</label></li>
+              <li><a href="#">Dropdown Level 2a</a></li>
+              <li><a href="#">Dropdown Level 2b</a></li>
+              <li class="has-dropdown"><a href="#">Dropdown Level 2c</a>
+
+                <ul class="dropdown">
+                  <li><label>Dropdown Level 3 Label</label></li>
+                  <li><a href="#">Dropdown Level 3a</a></li>
+                  <li><a href="#">Dropdown Level 3b</a></li>
+                  <li class="divider"></li>
+                  <li><a href="#">Dropdown Level 3c</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Dropdown Level 2d</a></li>
+              <li><a href="#">Dropdown Level 2e</a></li>
+              <li><a href="#">Dropdown Level 2f</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Dropdown Level 1b</a></li>
+          <li><a href="#">Dropdown Level 1c</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Dropdown Level 1d</a></li>
+          <li><a href="#">Dropdown Level 1e</a></li>
+          <li><a href="#">Dropdown Level 1f</a></li>
+          <li class="divider"></li>
+          <li><a href="#">See all &rarr;</a></li>
+        </ul>
+      </li>
+      <li class="divider"></li>
+    </ul>
+
+    <!-- Right Nav Section -->
+    <ul class="right">
+      <li class="divider hide-for-small"></li>
+      <li class="has-dropdown"><a href="#">Main Item 4</a>
+
+        <ul class="dropdown">
+          <li><label>Dropdown Level 1 Label</label></li>
+          <li class="has-dropdown"><a href="#" class="">Dropdown Level 1a</a>
+
+            <ul class="dropdown">
+              <li><a href="#">Dropdown Level 2a</a></li>
+              <li><a href="#">Dropdown Level 2b</a></li>
+              <li class="has-dropdown"><a href="#">Dropdown Level 2c</a>
+
+                <ul class="dropdown">
+                  <li><a href="#">Dropdown Level 3a</a></li>
+                  <li><a href="#">Dropdown Level 3b</a></li>
+                  <li><a href="#">Dropdown Level 3c</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Dropdown Level 2d</a></li>
+              <li><a href="#">Dropdown Level 2e</a></li>
+              <li><a href="#">Dropdown Level 2f</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Dropdown Level 1b</a></li>
+          <li><a href="#">Dropdown Level 1c</a></li>
+          <li class="divider"></li>
+          <li><label>Dropdown Level 1 Label</label></li>
+          <li><a href="#">Dropdown Level 1d</a></li>
+          <li><a href="#">Dropdown Level 1e</a></li>
+          <li><a href="#">Dropdown Level 1f</a></li>
+          <li class="divider"></li>
+          <li><a href="#">See all &rarr;</a></li>
+        </ul>
+      </li>
+      <li class="divider"></li>
+      <li class="has-form">
+        <form>
+          <div class="row collapse">
+            <div class="small-8 columns">
+              <input type="text">
+            </div>
+            <div class="small-4 columns">
+              <a href="#" class="alert button">Search</a>
+            </div>
+          </div>
+        </form>
+      </li>
+      <li class="divider show-for-small"></li>
+      <li class="has-form">
+        <a class="button" href="#">Button!</a>
+      </li>
+    </ul>
+  </section>
+</nav>', :html %>
+
+      <h4>Available SCSS Variables</h4>
+      <p>We do include SCSS variable to help you control some of the styles for the top bar. Overall the styles are written mobile first, so they are much easier to override than the previous iteration of the top bar.</p>
+
+<%= code_example '
+/* Background color for the top bar */
+$topbar-bg: #111;
+
+/* Height and margin */
+$topbar-height: 45px;
+$topbar-margin-bottom: emCalc(30px);
+
+/* Control Input height for top bar */
+$topbar-input-height: 2.45em;
+
+/* Controlling the styles for the title in the top bar */
+$topbar-title-weight: bold;
+$topbar-title-font-size: emCalc(17px);
+
+/* Set the link colors and styles for top-level nav */
+$topbar-link-color: #fff;
+$topbar-link-weight: bold;
+$topbar-link-font-size: emCalc(13px);
+
+/* Style the top bar dropdown elements */
+$topbar-dropdown-bg: #333;
+$topbar-dropdown-link-color: #fff;
+$topbar-dropdown-toggle-size: 5px;
+$topbar-dropdown-toggle-color: #fff;
+$topbar-dropdown-toggle-alpha: 0.5;
+
+/* Top menu icon styles */
+$topbar-menu-link-transform: uppercase;
+$topbar-menu-link-font-size: emCalc(13px);
+$topbar-menu-link-weight: bold;
+$topbar-menu-link-color: #fff;
+$topbar-menu-icon-color: #fff;
+$topbar-menu-link-color-toggled: #888;
+$topbar-menu-icon-color-toggled: #888;
+
+/* Transitions and breakpoint styles */
+$topbar-transition-speed: 300ms;
+$topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout', :css %>
+
+        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_foundation-global.scss</strong>.</p>
+
+        <hr>
+
+        <h3>Using the JavaScript</h3>
+        <p>You don't need ths JS to create reveal modals with Foundation. The only reason you'll need to include <code>foundation.reveal.js</code> is if you want to add the ability to close an alert. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the alert plugin. Above your closing <code>&lt;/body&gt;</code> tag include the following line of code and make sure you have the JS in your directory.</p>
+
+        <p><a href="../javascript.html" title="How to install Foundation JavaScript">Read how to install Foundation JavaScript</a></p>
+
+        <p>Required Foundation Library: <code>foundation.topbar.js</code></p>
+
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>Top bar options can only be passed in during initialization at this time.</p>
+
+    <%= code_example "
+{
+  index : 0,
+  stickyClass : 'sticky',
+  init : false
+}", :json %>
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>