zurb-foundation 3.2.5 → 4.0.0.rc1

data/docs/components/keystrokes.html.erb

@@ -0,0 +1,74 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Keystrokes" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">If you have keyboard affordances, you might need to explain them. To that end, there's a simple keystroke character affordance in Foundation.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <p>For example, to close your browser hit <kbd>Cmd</kbd> + <kbd>Q</kbd>. Don't actually do it. There's more docs to read.</p>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build keystrokes in Foundation 4: with our predefined HTML or with our mixins. Building keystrokes using our predefined classes is simple, you simply wrap <code>kbd</code> or <code>.keystroke</code> around whatever you want to call out.</p>
+
+<%= code_example '
+<p>For example, to close your browser hit <kbd>Cmd</kbd> + <kbd>Q</kbd>', :html %>
+
+        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected keystrokes from a custom package. These should be linked up following our default HTML page structure.</p>
+
+        <hr>
+
+        <h3>Build with a Mixin</h3>
+        <p>We've included SCSS mixins used to style keystrokes. 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="#">_keystrokes.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/keystrokes";
+', :css %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your keystrokes using our global mixin by including it on your custom class or the <code>kbd</code> element in your own stylesheet. The mixin contains options for changing the background color, which also controls the border and text color. The rest of the defaults can be modified using the available variables. The global mixin looks like this:</p>
+
+<%= code_example '
+.your-class-name { @include keystroke($bg); }
+
+/* You can set the background color of your keystrokes, which also effects text and border */
+$bg: $keystroke-bg', :css %>
+
+        <p class="custom-keystroke">Here's an example of a custom <kbd>keystroke</kbd> style.</p>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use these to control text styles. */
+$keystroke-font:            "Consolas", "Menlo", "Courier", monospace;
+$keystroke-font-size:       emCalc(15px);
+$keystroke-font-color:      #222;
+$keystroke-font-color-alt:  #fff;
+$keystroke-function-factor: 7%;
+
+/* We use this to control keystroke padding. */
+$keystroke-padding:         emCalc(2px) emCalc(4px) emCalc(0px);
+
+/* We use these to control background and border styles. */
+$keystroke-bg:              darken(#fff, $keystroke-function-factor);
+$keystroke-border-style:    solid;
+$keystroke-border-width:    1px;
+$keystroke-border-color:    darken($keystroke-bg, $keystroke-function-factor);
+$keystroke-radius:          $button-radius;', :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/labels.html.erb

@@ -0,0 +1,98 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Labels" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. Examples might be noting when something was updated or that something is new.</h4>
+
+        <p>
+          <span class="label">Regular Label</span><br>
+          <span class="radius secondary label">Radius Secondary Label</span><br>
+          <span class="round alert label">Round Alert Label</span><br>
+          <span class="success label">Success Label</span><br>
+        </p>
+
+        <hr>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build labels in Foundation 4: with our predefined HTML classes or with our mixins. Building labels using our predefined classes is simple, you'll just need to write a <code>&lt;span class="label"&gt;</code> and apply the classes you want.</p>
+
+<%= code_example '
+<span class="label">Regular Label</span>
+<span class="radius secondary label">Radius Secondary Label</span>
+<span class="round alert label">Round Alert Label</span>
+<span class="success label">Success Label</span>', :html %>
+
+        <p>The class options:</p>
+        <ul class="disc">
+          <li>The color classes include: <code>.secondary, .alert</code> or <code>.success</code></li>
+          <li>The radius classes include: <code>.radius</code> or <code>.round</code>.</li>
+        </ul>
+
+        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected labels from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+
+        <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="#">_labels.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 label; }', :css %>
+
+    <p>There are also four options you can customize on the fly when writing this mixin. These control things like: padding, text size, background color and radius. Setting any of these options to false will negate those styles.</p>
+
+<%= code_example '
+/* Using the available options */
+.your-class-name { @include label($padding,$text-size,$bg,$radius); }
+
+/* Controls the padding, set to a string following top, right, bottom, left rules or change the variable */
+$padding: $label-padding
+
+/* Control your text-size per label */
+$text-size: $label-font-size
+
+/* Change the background color for your labels */
+$bg: $primary-color
+
+/* Control how much radius is put on the labels */
+$radius: false
+', :css %>
+
+        <p class="custom-keystroke">Here's an example of a custom <span class="label-custom">label</span> style.</p>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use these to style the labels */
+$label-padding:     emCalc(3px) emCalc(6px) emCalc(4px);
+$label-radius:      $button-radius;
+
+/* We use these to style the label text */
+$label-font-size:   emCalc(14px);
+$label-font-weight: bold;', :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/magellan.html.erb

@@ -0,0 +1,84 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Magellan" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Magellan is a style agnostic plugin that lets you style a sticky navigation that denotes where you are on the page.</h4>
+
+        <div data-magellan-expedition="fixed">
+          <dl class="sub-nav">
+            <dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
+            <dd data-magellan-arrival="js"><a href="#js">Using Javascript</a></dd>
+          </dl>
+        </div>
+
+        <hr>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <a name="build"></a>
+        <h3 data-magellan-destination="build">Build With Predefined HTML Structure</h3>
+        <p>When we set out to build Magellan, we wanted it to be really lightweight and stay out of your way. With that in mind, we kept custom styles out of the game. Magellan is style agnostic, meaning you can attach it to anything. There are a few built-in lists in Foundation that will work, including the sub-nav. If you look at the top of this page you'll see our sub-nav. As you scroll, you'll see Magellan in action!</p>
+
+<%= code_example '
+<div data-magellan-expedition="fixed">
+  <dl class="sub-nav">
+    <dd data-magellan-arrival="build"><a href="#build">Build with HTML</a></dd>
+    <dd data-magellan-arrival="js"><a href="#js">Arrival 2</a></dd>
+  </dl>
+</div>
+
+<div data-magellan-expedition="fixed">
+  <ul class="sub-nav">
+    <li data-magellan-arrival="build"><a href="#build">Build with HTML</a></li>
+    <li data-magellan-arrival="js"><a href="#js">Arrival 2</a></li>
+  </ul>
+</div>
+', :html %>
+
+        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected <strong>magellan from a custom package</strong>. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+
+        <hr>
+
+        <a name="js"></a>
+        <h3 data-magellan-destination="js">Using Our JavaScript</h3>
+        <p>You'll need to include <code>foundation.magellan.js</code> to get everything to work 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.magellan.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 '
+<h3 data-magellan-destination="js">Using Our Javascript</h3>
+
+<div data-magellan-expedition="fixed">
+  <ul class="sub-nav">
+    <li data-magellan-arrival="build"><a href="#build">Build with HTML</a></li>
+    <li data-magellan-arrival="js"><a href="#js">Arrival 2</a></li>
+  </ul>
+</div>
+', :html %>
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>Magellan options can only be passed in during initialization at this time.</p>
+
+    <%= code_example "
+{
+  // specify the class used for active sections
+  activeClass: 'active'
+}", :json %>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/orbit.html.erb

@@ -0,0 +1,262 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Orbit" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Orbit is an easy to use, powerful image slider that's responsive, allowing you to swipe on a touch-enabled device.</h4>
+
+        <ul id="featured1" data-orbit>
+          <li>
+            <img src="../img/demos/demo1.png" />
+            <div class="orbit-caption">
+              Caption One. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+            </div>
+          </li>
+          <li>
+            <img src="../img/demos/demo2.png" />
+            <div class="orbit-caption">
+              Caption Two. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+            </div>
+          </li>
+          <li>
+            <img src="../img/demos/demo3.png" />
+            <div class="orbit-caption">
+              Caption Three. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+            </div>
+          </li>
+        </ul>
+
+        <hr>
+
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h3>Build Orbit With HTML</h3>
+        <p>Building Orbit is pretty simple using our HTML classes and structure; you'll just need to write the markup, find some images or text, fire up the Javascript and you'll be ready to go. On touch-enabled devices, Orbit has swipe functionality that makes it easy to switch slides. On screens without touch interfaces, you'll see bullet and arrow navigation if you have the options setup in your JS. Here's markup structure for Orbit:</p>
+
+<%= code_example '
+<!-- Basic orbit markup -->
+<ul data-orbit>
+  <li>
+    <img src="../img/demos/demo1.png" />
+    <div class="orbit-caption">...</div>
+  </li>
+  <li>
+    <img src="../img/demos/demo2.png" />
+    <div class="orbit-caption">...</div>
+  </li>
+  <li>
+    <img src="../img/demos/demo3.png" />
+    <div class="orbit-caption">...</div>
+  </li>
+</ul>', :html %>
+
+        <h5>We'll Automatically Add HTML</h5>
+        <p>To keep your markup really clean, we've let JS add what's needed for the navigation, bullets and other parts of the plugin. Once the page has been loaded, your markup will look different. Below is an example of the markup so you know what to target.</p>
+
+<%= code_example '
+<!-- Orbit Container -->
+<div class="orbit-container">
+  <ul data-orbit="" class="orbit-slides-container">
+    <li>
+      <img src="../img/demos/demo3.png">
+      <div class="orbit-caption">...</div>
+    </li>
+    <li class="active">
+      <img src="../img/demos/demo1.png">
+      <div class="orbit-caption">...</div>
+    </li>
+    <li>
+      <img src="../img/demos/demo2.png">
+      <div class="orbit-caption">...</div>
+    </li>
+    <li>
+      <img src="../img/demos/demo3.png">
+      <div class="orbit-caption">...</div>
+    </li>
+    <li>
+      <img src="../img/demos/demo1.png">
+      <div class="orbit-caption">...</div>
+    </li>
+  </ul>
+
+  <!-- Prev/Next Arrows -->
+  <a href="#" class="orbit-prev">Prev <span></span></a>
+  <a href="#" class="orbit-next">Next <span></span></a>
+
+  <!-- Slide Numbers -->
+  <div class="orbit-slide-number">
+    <span>1</span> of <span>3</span>
+  </div>
+
+  <!-- Timer and Play/Pause Button -->
+  <div class="orbit-timer">
+    <span></span>
+    <div class="orbit-progress" style="width: 100%; -webkit-transition: width 10s linear;"></div>
+  </div>
+</div>
+
+<!-- Orbit Bullet Slide Indicator -->
+<ol class="orbit-bullets">
+  <li data-orbit-slide-number="1"></li>
+  <li data-orbit-slide-number="2" class="active"></li>
+  <li data-orbit-slide-number="3"></li>
+</ol>
+', :html %>
+
+        <hr>
+
+        <ul id="featured2" data-orbit>
+          <li data-orbit-slide="headline-1">
+            <h2>Headline 1</h2>
+            <h3>Subheadline</h3>
+            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+          </li>
+          <li data-orbit-slide="headline-2">
+            <h2>Headline 2</h2>
+            <h3>Subheadline</h3>
+            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+          </li>
+          <li data-orbit-slide="headline-3">
+            <h2>Headline 3</h2>
+            <h3>Subheadline</h3>
+            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
+          </li>
+        </ul>
+
+        <hr>
+
+        <h3>Deep Linking Support</h3>
+        <p>
+          You can now link to slides in Orbit. This is useful when constructing
+          custom bullets or referencing a particular slide in a description. To
+          see it in action click on one of the links below:
+        </p>
+
+        <ul class="disc">
+          <li><a href="#" data-orbit-link="headline-1">Goto Slide 1</a></li>
+          <li><a href="#" data-orbit-link="headline-2">Goto Slide 2</a></li>
+          <li><a href="#" data-orbit-link="headline-3">Goto Slide 3</a></li>
+        </ul>
+
+        <p>
+          The markup is simple, each <kbd>&lt;li&gt;</kbd> should
+          have a <kbd>data-orbit-slide</kbd> data attribute with a
+          unique identifier for the slide. Then anywhere outside
+          of your Orbit slider you can use <kbd>data-orbit-link</kbd>
+          to reference that slide.
+        </p>
+
+<%= code_example '
+<ul id="featured2" data-orbit>
+  <li data-orbit-slide="headline-1">
+    <h2>Headline 1</h2>
+    <h3>Subheadline</h3>
+    <p>Pellentesque habitant morbi tristique senectus.</p>
+  </li>
+  <li data-orbit-slide="headline-2">
+    <h2>Headline 2</h2>
+    <h3>Subheadline</h3>
+    <p>Pellentesque habitant morbi tristique senectus.</p>
+  </li>
+  <li data-orbit-slide="headline-3">
+    <h2>Headline 3</h2>
+    <h3>Subheadline</h3>
+    <p>Pellentesque habitant morbi tristique senectus.</p>
+  </li>
+</ul>
+
+<!-- Now link to the slides above -->
+<ul class="disc">
+  <li><a href="#" data-orbit-link="headline-1">Goto Slide 1</a></li>
+  <li><a href="#" data-orbit-link="headline-2">Goto Slide 2</a></li>
+  <li><a href="#" data-orbit-link="headline-3">Goto Slide 3</a></li>
+</ul>
+', :html %>
+
+        <hr>
+
+        <h3>Available SCSS Variables</h3>
+        <p>We've included a bunch of variables that you'll be able to use if you're into getting SASSy with things.</p>
+
+<%= code_example '
+/* We use these to control the caption styles */
+$orbit-caption-bg-old-browser: #000;
+$orbit-caption-bg-old: rgb(0,0,0);
+$orbit-caption-bg: rgba(0,0,0,0.6);
+$orbit-caption-font-color: #fff;
+
+/* We use these to control the left/right nav styles */
+$orbit-nav-bg-old: rgb(0,0,0);
+$orbit-nav-bg: rgba(0,0,0,0.6);
+
+/* We use these to control the timer styles */
+$orbit-timer-bg-old: rgb(0,0,0);
+$orbit-timer-bg: rgba(0,0,0,0.6);
+
+/* We use these to control the bullet nav styles */
+$orbit-bullet-nav-color: #999;
+$orbit-bullet-nav-color-active: #222;
+
+/* We use thes to controls the style of slide numbers */
+$orbit-slide-number-bg: rgb(0,0,0);
+$orbit-slide-number-font-color: #fff;
+$orbit-slide-number-padding: emCalc(5px);
+', :css %>
+
+        <hr>
+
+        <h3>Using the JavaScript</h3>
+        <p>You'll need to include <code>foundation.orbit.js</code> if you want to use Orbit. You'll also need to make sure to include <code>zepto.js</code> and/or <code>jquery.js</code> along with <code>foundation.js</code> above the Orbit 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.orbit.js</code></p>
+
+        <p>Then, you'll need to add a <kbd>data-orbit</kbd> data attribute to make the JS work properly on that element. That looks like:</p>
+
+<%= code_example '
+<ul data-orbit>
+  ...
+</ul>
+', :html %>
+
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>Orbit options can only be passed in during initialization at this time.</p>
+
+    <%= code_example "
+{
+  timer_speed: 10000,
+  animation_speed: 500,
+  bullets: true,
+  stack_on_small: true,
+  container_class: 'orbit-container',
+  stack_on_small_class: 'orbit-stack-on-small',
+  next_class: 'orbit-next',
+  prev_class: 'orbit-prev',
+  timer_container_class: 'orbit-timer',
+  timer_paused_class: 'paused',
+  timer_progress_class: 'orbit-progress',
+  slides_container_class: 'orbit-slides-container',
+  bullets_container_class: 'orbit-bullets',
+  bullets_active_class: 'active',
+  slide_number_class: 'orbit-slide-number',
+  caption_class: 'orbit-caption',
+  active_slide_class: 'active',
+  orbit_transition_class: 'orbit-transitioning'
+}", :json %>
+
+      </div>
+    </div>
+
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>