zurb-foundation 3.2.5 → 4.0.0.rc1

data/docs/components/progress-bars.html.erb

@@ -0,0 +1,120 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Progress Bars" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader"><p>A simple way to add a progress bars to your layouts. You only need two HTML elements to make them and they're easy to customize.</h4>
+
+        <div class="progress large-6"><span class="meter" style="width: 40%"></span></div>
+        <div class="radius progress success large-8"><span class="meter" style="width: 80%"></span></div>
+        <div class="nice round progress alert large-10"><span class="meter" style="width: 30%"></span></div>
+        <div class="nice secondary progress"><span class="meter" style="width: 50%"></span></div>
+
+        <hr>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to add progress bars labels in Foundation 4: with our predefined HTML classes or with our mixins. Building progress bars using our predefined classes is simple, you'll just need to write a <code>&lt;div class="progress"&gt;</code> and inside of that a <code>&lt;span class="meter"&gt;</code>. The meter is the element that you can set a width to, either inline or programatically on your own accord. The simplest way to do this is to change the <code>style="width:%"</code> property on the meter, itself.</p>
+
+<%= code_example '
+<div class="progress"><span class="meter"></span></div>', :html %>
+
+        <div class="progress"><span class="meter"></span></div>
+
+        <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>
+          <li>You may also you the grid width classes: <code>.small-#</code> or <code>.large-#</code></li>
+        </ul>
+
+<%= code_example '
+<div class="progress large-6 success round"><span class="meter" style="width: 40%"></span></div>', :html %>
+
+        <div class="progress large-6 success round"><span class="meter" style="width: 40%"></span></div>
+
+        <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 progress bars. 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="#">_progress-bars.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>Container Mixin</h5>
+        <p>Progress bars are made from a container and a meter. The container element holds most of the styles that come across and holds the meter, itself. You can create progress bars by creating a <code>&lt;div&gt;</code> and giving it a unique class or ID, then applying the mixin styles to it.</p>
+
+<%= code_example '
+.your-class-name { @include progress-container; }', :css %>
+
+        <div class="progress"></div>
+
+        <h5>Meter Mixin</h5>
+        <p>The next step is to include an element inside of your container that will be styled as the meter.
+
+<%= code_example '
+.your-class-name { @include progress-container;
+  & > span { @include progress-meter($bg); }
+}
+
+/* We can set the background color of the meter to a variable or any color value */
+$bg: $primary-color
+', :css %>
+
+        <div class="progress"><span class="meter"></span></div>
+
+        <h5>Adding Border Radius</h5>
+        <p>Like we mentioned on a few of the other component pages, you have access to some global mixins that can add even more style to elements like this. Here's an example of using border radius:</p>
+
+<%= code_example '
+.your-class-name {
+  @include progress-container;
+  @include radius(6px);
+  & > span {
+    @include progress-meter(pink);
+    @include radius(5px);
+  }
+}', :css %>
+
+        <div class="progress-custom"><span style="width:33%"></span></div>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use this to se the prog bar height */
+$progress-bar-height: emCalc(25px);
+
+/* We use these to control the border styles */
+$progress-bar-border-color: darken(#fff, 20%);
+$progress-bar-border-size: 1px;
+$progress-bar-border-style: solid;
+$progress-bar-border-radius: $button-radius;
+
+/* We use these to control the margin & padding */
+$progress-bar-pad: emCalc(2px);
+$progress-bar-margin-bottom: emCalc(10px);
+
+/* We use these to set the meter colors */
+$progress-meter-color: $primary-color;
+$progress-meter-secondary-color: $secondary-color;
+$progress-meter-success-color: $success-color;
+$progress-meter-alert-color: $alert-color;', :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/reveal.html.erb

@@ -0,0 +1,147 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Reveal" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Modal dialogs, or pop-up windows, are handy for prototyping and production. Foundation includes Reveal our jQuery modal plugin, to make this easy for you.</h4>
+
+        <a href="#" data-reveal-id="firstModal" class="radius button">Example Modal&hellip;</a>
+        <a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a>
+
+        <hr>
+
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h3>Build With HTML Classes</h3>
+        <p>Reveal modals are easy to build, just make sure they live right above your closing <code>body</code> tag or they won't work properly. Follow the markup below to get started:</p>
+
+<%= code_example '
+<div id="myModal" class="reveal-modal">
+  <h2>Awesome. I have it.</h2>
+  <p class="lead">Your couch.  It is mine.</p>
+  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
+  <a class="close-reveal-modal">&#215;</a>
+</div>', :html %>
+
+        <p>The class options:</p>
+        <ul class="disc">
+          <li><code>tiny</code>: Set the width to 30%.</li>
+          <li><code>small</code>: Set the width to 40%.</li>
+          <li><code>medium</code>: Set the width to 60%.</li>
+          <li><code>large</code>: Set the width to 70%.</li>
+          <li><code>xlarge</code>: Set the width to 95%.</li>
+        </ul>
+
+        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected reveal from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+
+        <h5>Firing a Reveal Modal</h5>
+        <p>To launch a modal, just add a <code>data-reveal-id</code> to the object which you want to fire the modal when clicked. The <code>data-reveal-id</code> needs to match the <code>id</code> of your reveal.</p>
+
+    <%= code_example '
+<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>', :html %>
+
+        <hr>
+
+        <h5>Default SCSS Variables</h5>
+
+    <%= code_example '
+/* We use these to control the style of the reveal overlay. */
+$reveal-overlay-bg:      rgba(#000, .45);
+$reveal-overlay-bg-old:  #000;
+
+/* We use these to control the style of the modal itself. */
+$reveal-modal-bg:        #fff;
+$reveal-position-top:    emCalc(15px);
+$reveal-default-width:   80%;
+$reveal-modal-padding:   emCalc(20px);
+$reveal-box-shadow:      0 0 10px rgba(#000,.4);
+
+/* We use these to style the reveal close button */
+$reveal-close-font-size: emCalc(22px);
+$reveal-close-top:       emCalc(8px);
+$reveal-close-side:      emCalc(11px);
+$reveal-close-color:     #aaa;
+$reveal-close-weight:    bold;
+
+/* We use these to control the modal border */
+$reveal-border-style:    solid;
+$reveal-border-width:    1px;
+$reveal-border-color:    #666;', :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.reveal.js</code></p>
+
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>Reveal options can only be passed in during initialization at this time. However, you can bind to the <i>open</i>, <i>opened</i>, <i>close</i>, and <i>closed</i> events.</p>
+
+    <%= code_example "
+{
+  animation: 'fadeAndPop',
+  animationSpeed: 250,
+  closeOnBackgroundClick: true,
+  dismissModalClass: 'close-reveal-modal',
+  bgClass: 'reveal-modal-bg',
+  open: function(){},
+  opened: function(){},
+  close: function(){},
+  closed: function(){},
+  bg : $('.reveal-modal-bg'),
+  css : {
+    open : {
+      'opacity': 0,
+      'visibility': 'visible',
+      'display' : 'block'
+    },
+    close : {
+      'opacity': 1,
+      'visibility': 'hidden',
+      'display': 'none'
+    }
+  }
+}", :json %>
+
+      </div>
+    </div>
+
+    <div id="firstModal" class="reveal-modal">
+      <h2>This is a modal.</h2>
+      <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
+      <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
+      <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal…</a></p>
+      <a class="close-reveal-modal">&#215;</a>
+    </div>
+
+    <div id="secondModal" class="reveal-modal">
+      <h2>This is a second modal.</h2>
+      <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
+      <a class="close-reveal-modal">&#215;</a>
+    </div>
+
+    <div id="videoModal" class="reveal-modal large">
+      <h2>This modal has video</h2>
+      <div class="flex-video">
+        <iframe width="800" height="315" src="http://www.youtube.com/embed/IkOQw96cfyE" frameborder="0" allowfullscreen></iframe>
+      </div>
+
+      <a class="close-reveal-modal">&#215;</a>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/section.html.erb

@@ -0,0 +1,156 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Sections" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Sections are similar to tabs as a way to selectively show a single panel of content at a time.</h4>
+
+        <div class="row">
+          <div class="large-3 columns">
+            <div class="section-container vertical-nav" data-section data-options="deep_linking: false">
+              <section class="section">
+                <p class="title"><a href="#panel1">Section 1</a></p>
+                <div class="content">
+                  <ul class="side-nav">
+                    <li><a href="#">Link 1</a></li>
+                    <li><a href="#">Link 2</a></li>
+                    <li><a href="#">Link 3</a></li>
+                    <li class="divider"></li>
+                    <li><a href="#">Link 1</a></li>
+                  </ul>
+                </div>
+              </section>
+              <section class="section">
+                <p class="title"><a href="#panel2">Section 2</a></p>
+                <div class="content">
+                  <ul class="side-nav">
+                    <li><a href="#">Link 1</a></li>
+                    <li><a href="#">Link 2</a></li>
+                    <li><a href="#">Link 3</a></li>
+                    <li class="divider"></li>
+                    <li><a href="#">Link 1</a></li>
+                  </ul>
+                </div>
+              </section>
+            </div>
+          </div>
+          <div class="large-9 columns">
+            <div class="section-container tabs" data-section data-options="deep_linking: true">
+              <section class="section">
+                <p class="title"><a href="#panel1">Section 1</a></p>
+                <div class="content" data-slug="panel1">
+                  <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                </div>
+              </section>
+              <section class="section">
+                <p class="title"><a href="#panel2">Section 2 Section 2</a></p>
+                <div class="content" data-slug="panel2">
+                  <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                </div>
+              </section>
+            </div>
+          </div>
+        </div>
+
+        <hr>
+
+        <h3>Sections Replace Accordion, Tabs &amp; Vertical Nav</h3>
+        <p>Sections replace a few things that you are used to from Foundation 3. We've taken the accordion, the tabs and the vertical nav and combined them into this really flexible plugin that can handle all of those. The single JS file handles all the interactionss, but the classes you add to the element control how it gets rendered and styled across our breakpoint.</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 sections in Foundation 4, with our predefined HTML classes or with our structure and mixins. Building a sections using our predefined classes is super-easy, you just need to create a <code>&lt;div class="section-container" data-section&gt;</code> as a wrapper for the sections themselves. Inside of this wrapper, you'll create either a <code>&lt;section class="section"&gt;</code> or <code>&lt;div class="section"&gt;</code>. Within that you'll include some sort of <code>.title</code> (this can be headers or a paragragh) and a <code>&lt;div class="content"&gt;</code>. Here is the markup you'll need:</p>
+
+<%= code_example '
+<section class="section">
+  <p class="title"><a href="#panel1">Section 1</a></p>
+  <div class="content" data-slug="panel1">
+    <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  </div>
+</section>
+<section class="section">
+  <p class="title"><a href="#panel2">Section 2 Section 2</a></p>
+  <div class="content" data-slug="panel2">
+    <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  </div>
+</section>', :html %>
+
+        <p>The class options:</p>
+        <ul class="disc">
+
+        </ul>
+
+        <p>For these styles to come across, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>section from a custom package</strong>. These should be linked up following our default <a href="#getting-started">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h5>Default SCSS Variables</h5>
+<%= code_example '
+/* We use these to set padding and hover factor */
+$section-padding:                emCalc(15px);
+$section-function-factor:        10%;
+
+/* These style the titles */
+$section-title-color:            #333;
+$section-title-bg:               #efefef;
+$section-title-bg-active:        darken($section-title-bg, $section-function-factor);
+$section-title-bg-active-tabs:   #fff;
+
+/* Want to control border size, here ya go! */
+$section-border-size:            1px;
+$section-border-style:           solid;
+$section-border-color:           #ccc;
+
+/* Control the color of the background and some size options */
+$section-content-bg:             #fff;
+$section-vertical-nav-min-width: emCalc(200px);
+$section-bottom-margin:          emCalc(20px);
+', :css %>
+
+    <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>.</p>
+
+        <hr>
+
+        <h3>Using the JavaScript</h3>
+        <p>You don't need ths JS to create alert boxes with Foundation. The only reason you'll need to include <code>foundation.alerts.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.section.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 '
+<div data-alert class="alert-box">
+  <!-- Your content goes here -->
+  <a href="#" class="close">&times;</a>
+</div>
+', :html %>
+
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>You can either set these options in a <code>data-options</code> attribute in the markup, <code>data-options="option: value; option2: value syntax"</code>, or pass in on initialization.</p>
+
+    <%= code_example "
+{
+  deep_linking: false,
+  one_up: true,
+  callback: function (){}
+}", :json %>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/side-nav.html.erb

@@ -0,0 +1,122 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Side Nav" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h1><%= @page_title %></h1>
+        <h4 class="subheader">Side nav, like you'll see on Foundation's main site, is useful for sections of either a site or a page.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <div class="row">
+          <div class="large-4 columns end">
+            <ul class="side-nav">
+              <li class="active"><a href="#">Link 1</a></li>
+              <li><a href="#">Link 2</a></li>
+              <li class="divider"></li>
+              <li><a href="#">Link 3</a></li>
+              <li><a href="#">Link 4</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build a side nav in Foundation 4: either with our predefined HTML classes or our mixins. Building side nav using our predefined classes is simple, you'll just need to write a <code>&lt;ul class="side-nav"&gt;</code> and fill it full of list items. The width of the side nav is controlled by the columns you put it inside.</p>
+
+        <p>The list item options:</p>
+        <ul class="disc">
+          <li><code>active</code> Will add style to denote the active link.</li>
+          <li><code>divider</code> Creates a divider between list items.</li>
+        </ul>
+
+<%= code_example '
+<ul class="side-nav">
+  <li class="active"><a href="#">Link 1</a></li>
+  <li><a href="#">Link 2</a></li>
+  <li class="divider"></li>
+  <li><a href="#">Link 3</a></li>
+  <li><a href="#">Link 4</a></li>
+</ul>', :html %>
+
+
+
+        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected side nav 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 side nav. 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="#">_side-nav.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/side-nav";
+', :css %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your side nav using our global mixin by including it on a 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 side-nav; }', :css %>
+
+    <p>There are also three options you can customize on the fly when writing this mixin. These controls things like: divider color, text size and font color.</p>
+
+<%= code_example '
+/* Using the available options */
+.your-class-name { @include side-nav($divider-color, $font-size, $link-color); }
+
+/* Control the color of the divider between links */
+$divider-color: $side-nav-divider-color
+
+/* Control your font-size per label */
+$font-size: $side-nav-font-size
+
+/* Change the background color for your labels */
+$link-color: $side-nav-link-color
+', :css %>
+
+        <ul class="side-nav-custom large-3">
+          <li class="active"><a href="#">Link 1</a></li>
+          <li><a href="#">Link 2</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Link 3</a></li>
+          <li><a href="#">Link 4</a></li>
+        </ul>
+
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use this to control padding. */
+$side-nav-padding:           emCalc(14px) 0;
+
+/* We use these to control list styles. */
+$side-nav-list-type:         none;
+$side-nav-list-position:     inside;
+$side-nav-list-margin:       0 0 emCalc(7px) 0;
+
+/* We use these to control link styles. */
+$side-nav-link-color: $primary-color;
+$side-nav-link-color-active: lighten(#000, 30%);
+$side-nav-font-size:         emCalc(14px);
+$side-nav-font-weight:       bold;
+
+/* We use these to control border styles */
+$side-nav-divider-size:      1px;
+$side-nav-divider-style:     solid;
+$side-nav-divider-color:     darken(#fff, 10%);', :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>