zurb-foundation 3.2.5 → 4.0.0.rc1

data/docs/components/dropdown-buttons.html.erb

@@ -0,0 +1,233 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Dropdown Buttons" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">We've simplified our dropdown buttons by getting rid of the dedicated dropdown associated with them. Instead, you'll use our <a href="#">new dropdown plugin</a> to attach a dropdown to the button style of your choice.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <a href="#" data-dropdown="drop" class="tiny button dropdown">Dropdown Button</a><br>
+        <a href="#" data-dropdown="drop2" class="small secondary radius button dropdown">Dropdown Button</a><br>
+        <a href="#" data-dropdown="drop3" class="button alert round dropdown">Dropdown Button</a><br>
+        <a href="#" data-dropdown="drop4" class="large success button dropdown">Dropdown Button</a><br>
+        <a href="#" data-dropdown="drop5" class="large button dropdown expand">Dropdown Button</a><br>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build buttons in Foundation 4: with our predefined HTML classes or with our structure and mixins. Building buttons using our predefined classes is simple, you'll need an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code> or <code>&lt;input&gt;</code> with a class of <code>.button.dropdown</code>. This will create a default medium button. You can also use size, color and radius classes to control more of the style.</p>
+
+        <p>The classes options:</p>
+        <ul class="disc">
+          <li>The size classes include: <code>.tiny, .small, .medium</code> or <code>.large</code></li>
+          <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>
+
+<%= code_example '
+<!-- Size Classes -->
+<a href="#" class="button dropdown">Default Button</a>
+<a href="#" class="tiny button dropdown">Tiny Button</a>
+<a href="#" class="small button dropdown">Small Button</a>
+<a href="#" class="large button dropdown">Large Button</a>
+
+<!-- Color Classes -->
+<a href="#" class="button dropdown secondary">Secondary Button</a>
+<a href="#" class="button dropdown success">Success Button</a>
+<a href="#" class="button dropdown alert">Alert Button</a>
+
+<!-- Radius Classes -->
+<a href="#" class="button dropdown radius">Radius Button</a>
+<a href="#" class="button dropdown round">Round Button</a>
+', :html %>
+
+        <p>You may chain one class from each group to build up desired default styles. For these styles to take effect, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>dropdown buttons from a custom package</strong>. These should be linked up following our default <a href="#getting-started">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Build with Mixins</h3>
+        <p>We've included SCSS mixins used to style buttons. To use these mixins, you'll need to have the <a href="#extention-install">extension installed</a> or grab <a href="#">_foundation-global.scss</a>, <a href="#">_buttons.scss</a> and <a href="#">_dropdown-buttons.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/buttons", "foundation/dropdown-buttons";
+', :css %>
+
+        <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:</p>
+
+<%= code_example '
+<a href="#" class="your-class-name">Button Text</a>
+', :html %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can quickly build entire dropdown buttons using our global mixin by including it on your custom class or ID in your stylesheet. The global mixin will create the necessary style for the button. The global mixin looks like this:</p>
+
+<%= code_example '
+/* Using the default styles */
+.your-class-name {
+  @include button;
+  @include dropdown-button;
+}
+', :css %>
+
+        <a href="" data-dropdown="drop7 "class="dropdown button">Default Dropdown Button</a>
+
+        <p>There are also <strong>three options</strong> you can customize on the fly when writing this mixin. These control things like: background color, pip color and base styles. Setting any of these options to <strong>false</strong> will not include the styles.</p>
+
+<%= code_example '
+/* Using the available options */
+.your-class-name {
+  @include button;
+  @include dropdown-button($padding, $pip-color, $base-style);
+}
+
+/* This controls padding around the dropdown buttons. Use tiny, small, medium, or large */
+$padding: $button-med
+
+/* This controls the dropdown pip color. Set to one of our variables or a custom hex value */
+$pip-color: #fff
+
+/* This controls whether or not base styles come through. Set to false to negate */
+/* Handy when you want to have many different styles */
+$base-style: true
+', :css %>
+
+          <h5>Inset Shadow, Border Radius &amp; Transition Mixin</h5>
+          <p>Sometimes you want to add a nice fancy shine to the edge of your button. And sometimes you want to make that shine look like it gets depressed upon tap or click. We've got you covered with our quick inset shadow mixin. You can use our radius mixin to quickly apply rounded corners or a transition mixin to give the button a nice zero-fade.</p>
+
+<%= code_example '
+.your-class-name {
+  @include button;
+  @include dropdown-button;
+  @include radius;
+  @include single-transition;
+  @include inset-shadow;
+}
+', :css %>
+
+    <a href="#" data-dropdown="drop6" class="customized-dropdown-docs">Button Base, Size, Style &amp; Shine</a>
+
+        <h5>Default SCSS Variables</h5>
+<%= code_example '
+/* We use these to set the color of the pip in dropdown buttons */
+$dropdown-button-pip-color:     #fff;
+$dropdown-button-pip-color-alt: #333;
+
+/* We use these to style tiny dropdown buttons */
+$dropdown-button-padding-tny:   $button-tny * 5;
+$dropdown-button-pip-size-tny:  $button-tny;
+$dropdown-button-pip-right-tny: $button-tny * 2;
+$dropdown-button-pip-top-tny:   -$button-tny / 2 + emCalc(1px);
+
+/* We use these to style small dropdown buttons */
+$dropdown-button-padding-sml:   $button-sml * 5;
+$dropdown-button-pip-size-sml:  $button-sml;
+$dropdown-button-pip-right-sml: $button-sml * 2;
+$dropdown-button-pip-top-sml:   -$button-sml / 2 + emCalc(2px);
+
+/* We use these to style medium dropdown buttons */
+$dropdown-button-padding-med:   $button-med * 4 + emCalc(3px);
+$dropdown-button-pip-size-med:  $button-med - emCalc(3px);
+$dropdown-button-pip-right-med: $button-med * 2;
+$dropdown-button-pip-top-med:   -$button-med / 2 + emCalc(2px);
+
+/* We use these to style large dropdown buttons */
+$dropdown-button-padding-lrg:   $button-lrg * 4;
+$dropdown-button-pip-size-lrg:  $button-lrg - emCalc(6px);
+$dropdown-button-pip-right-lrg: $button-lrg + emCalc(12px);
+$dropdown-button-pip-top-lrg:   -$button-lrg / 2 + emCalc(3px);
+', :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 dropdown button styles with Foundation. The only reason you'll need to include <code>foundation.dropdown.js</code> is if you want to add one of our dropdown to the button. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the dropdown 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.dropdown.js</code></p>
+
+        <h5>Creating the Dropdown</h5>
+        <p>To create the dropdown, you'll need to attach a data-attribute to whatever element you want the dropdown attached to (in this case a button). From there you'll create a list that holds the links or content and add another data-attribute that associates with the element it belongs to. Here's an example of that markup:</p>
+
+<%= code_example '
+<a href="#" data-dropdown="drop1" class="button dropdown">Dropdown Button</a><br>
+
+<ul id="drop1" class="f-dropdown">
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>
+', :html %>
+
+        <a href="#" data-dropdown="drop1" class="button dropdown">Dropdown Button</a><br>
+
+        <p>Required Foundation Library: <code>foundation.dropdown.js</code></p>
+
+        <p>You'll notice that <code>data-dropdown="drop1"</code> and <code>id="drop1"</code> have similar values. This is what tells the dropdown plugin where to look to find the position to attach the dropdown element to.</p>
+
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>Dropdown options can only be passed in during initialization at this time.</p>
+
+<%= code_example "
+{
+  activeClass: 'open'
+}", :json %>
+      </div>
+    </div>
+
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>
+
+
+<ul id="drop" data-dropdown-content class="f-dropdown">
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>
+<ul id="drop1" data-dropdown-content class="f-dropdown">
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>
+<ul id="drop2" data-dropdown-content class="f-dropdown">
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>
+<ul id="drop3" data-dropdown-content class="f-dropdown">
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>
+<ul id="drop4" data-dropdown-content class="f-dropdown">
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>
+<ul id="drop5" data-dropdown-content class="f-dropdown">
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>
+<ul id="drop6" data-dropdown-content class="f-dropdown">
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>
+<ul id="drop7" data-dropdown-content class="f-dropdown">
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>

data/docs/components/dropdown.html.erb

@@ -0,0 +1,186 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Dropdown" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">In Foundation 4, we wanted to rid our codebase of many different dropdowns within various UI elements. So we created a univeral dropdown plugin that will attach dropdowns or popovers next to anything!</h4>
+
+        <a href="#" class="button" data-dropdown="tinyDrop">Link Dropdown &raquo;</a>
+        <a href="#" class="button" data-dropdown="contentDrop">Content Dropdown &raquo;</a>
+
+        <hr>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h5>Build With Predefined HTML Classes</h5>
+        <p>To create the dropdown you'll need to attach a <code>data-dropdown="your-id"</code> to whatever element you want the dropdown attached to. From there you'll create a list that holds the links or content and add an <code>id="your-id"</code> that associates with the element it belongs to. To style the dropdown, we've included a class of <code>.f-dropdown</code> that you can target and style to your hearts desire. If you want the dropdown to be content, simply chain the class <code>.content</code> to the dropdown. Here's an example of that markup:</p>
+
+<%= code_example '
+<a href="#" data-dropdown="drop1">Has Dropdown</a>
+<a href="#" data-dropdown="drop2">Has Content Dropdown</a>
+
+<ul id="drop1" class="f-dropdown">
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>
+
+<ul id="drop2" class="f-dropdown content">
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>
+', :html %>
+
+        <p><a href="#" data-dropdown="drop1">Has Dropdown</a> | <a href="#" data-dropdown="drop2">Has Content Dropdown</a></p>
+
+        <p>You'll notice that <code>data-dropdown="drop1"</code> and <code>id="drop1"</code> have the same value. This is what tells the dropdown plugin where to look to find the position to attach the dropdown.</p>
+
+        <p>Available class options:</p>
+        <ul class="disc">
+          <li><code>tiny</code>: Make the dropdown have a max-width of 200px</li>
+          <li><code>small</code>: Make the dropdown have a max-width of 300px</li>
+          <li><code>medium</code>: Make the dropdown have a max-width of 500px</li>
+          <li><code>large</code>: Make the dropdown have a max-width of 800px</li>
+          <li><code>content</code>: Add padding inside the dropdown for better looking content.</li>
+        </ul>
+
+        <p>You may chain one class from each group to build up desired default styles. For these styles to take effect, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>dropdowns from a custom package</strong>. 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 dropdowns. 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="#">_dropdown.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/dropdown";
+', :css %>
+
+        <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:</p>
+
+<%= code_example '
+<a href="#" data-dropdown="drop1">Has Dropdown</a>
+
+<ul id="drop1" class="your-class-name">
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>
+', :html %>
+
+        <h5>The Container Mixin</h5>
+        <p>There are two mixin you can use when building your dropdowns, the container and the list style. The container mixin will give you all the styles needed for the base styles of the dropdown, not including styles for the default link list style. The container mixin looks like this:</p>
+
+<%= code_example '
+/* Container mixin and its options */
+.your-class-name { @include dropdown-container($content, $triangle, $max-width); }
+
+/* This can be set to "list" or "content" depending on what you want inside. */
+$content: list
+
+/* If you do not want to attach the triangle pop, set this to false. */
+$triangle: true
+
+/* By default, the dropdown is 200px max-width, taking on 100% when gets smaller than that. */
+/* You can set this to any number you want or change it globally with the variable. */
+$max-width: $f-dropdown-max-width
+', :css %>
+
+        <h5>The List Style Mixin</h5>
+        <p>For content dropdowns, we don't add any extra style to the inside of the dropdown other than padding around the edges. For link lists, we wanted to predefined style that would look good out of the box and match the style of our custom select dropdowns. The style mixin looks like this:</p>
+
+<%= code_example '
+/* The style mixin - It has no options other than variables to make global changes */
+.your-class-name {
+  @include dropdown-container($content, $triangle, $max-width);
+
+  li { @include dropdown-style; }
+}
+', :css %>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use these to controls height and width styles. */
+$f-dropdown-max-width:            200px;
+$f-dropdown-height:               auto;
+$f-dropdown-max-height:           none;
+$f-dropdown-margin-top:           2px;
+
+/* We use this to control the background color */
+$f-dropdown-bg:                   #fff;
+
+/* We use this to set the border styles for dropdowns. */
+$f-dropdown-border-style:         solid;
+$f-dropdown-border-width:         1px;
+$f-dropdown-border-color:         darken(#fff, 20%);
+
+/* We use these to style the triangle pip. */
+$f-dropdown-triangle-size:        6px;
+$f-dropdown-triangle-color:       #fff;
+$f-dropdown-triangle-side-offset: 10px;
+
+/* We use these to control styles for the list elements. */
+$f-dropdown-list-style:           none;
+$f-dropdown-font-color:           #555;
+$f-dropdown-font-size:            emCalc(14px);
+$f-dropdown-list-padding:         emCalc(5px) emCalc(10px);
+$f-dropdown-line-height:          emCalc(18px);
+$f-dropdown-list-hover-bg:        #eeeeee;', :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'll need to include <code>foundation.joyride.js</code> to get plugin to work. 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.dropdown.js</code></p>
+
+      <h5>Optional JavaScript Configuration</h5>
+
+      <p>Dropdown options can only be passed in during initialization at this time.</p>
+
+    <%= code_example "
+{
+  // specify the class used for active sections
+  activeClass: 'open'
+}", :json %>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>
+
+<ul id="tinyDrop" class="f-dropdown" data-dropdown-content>
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>
+<div id="contentDrop" class="f-dropdown content medium" data-dropdown-content>
+  <h4>Title</h4>
+  <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
+  <img src="../img/demos/demo1.png">
+  <p>More test.</p>
+  <a href="#" class="button">Button</a>
+</div>
+<ul id="drop1" data-dropdown-content class="f-dropdown">
+  <li><a href="#">This is a link</a></li>
+  <li><a href="#">This is another</a></li>
+  <li><a href="#">Yet another</a></li>
+</ul>
+<div id="drop2" data-dropdown-content class="f-dropdown content">
+  <p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
+</div>

data/docs/components/flex-video.html.erb

@@ -0,0 +1,93 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Flex Video" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">If you're embedding a video from YouTube, Vimeo, or another site that uses iframe, embed or object elements, you can wrap your video in <code>div.flex-video</code> to create an intrinsic ratio that will properly scale your video on any device.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <div class="row">
+          <div class="large-6 columns">
+            <div class="flex-video">
+              <iframe width="420" height="315" src="http://www.youtube.com/embed/0_EW8aNgKlA" frameborder="0" allowfullscreen></iframe>
+            </div>
+
+            <p>4:3 is the default size for the .flex-video element, and the assumption for .flex-video for chrome (controls) height is based on YouTube.</p>
+          </div>
+          <div class="large-6 columns">
+            <div class="flex-video widescreen vimeo">
+              <iframe src="http://player.vimeo.com/video/21762736" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
+            </div>
+
+            <p>Because Vimeo places their chrome on the player itself, adding a class of .vimeo creates a container that is sized for the video only &mdash; no extra padding for the controls.</p>
+          </div>
+        </div>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build flex-video containers in Foundation 4: with our predefined HTML classes or with our mixins. Building flex-video containers using our classes is simple, you'll just need to create a <code>&lt;div class="flex-video"&gt;</code> and apply the classes you want to style it appropriately.</p>
+
+        <p>The available class options:</p>
+        <ul class="disc">
+          <li><code>widescreen</code>: Will give the player a widescreen aspect ratio.</li>
+          <li><code>vimeo</code>: This will ensure that we don't add extra padding since Vimeo has controls within the player, itself.</li>
+        </ul>
+
+<%= code_example '
+<div class="flex-video">
+  <iframe width="420" height="315" src="http://www.youtube.com/embed/0_EW8aNgKlA" frameborder="0" allowfullscreen></iframe>
+</div>', :html %>
+
+        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected flex-video 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="#">_flex-video.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/flex-video";
+', :css %>
+
+        <p>The markup is just like we showed you above, but you can apply the mixin to your own custom class or ID.</p>
+<%= code_example '
+<div class="your-class-name">
+  <iframe width="420" height="315" src="http://www.youtube.com/embed/0_EW8aNgKlA" frameborder="0" allowfullscreen></iframe>
+</div>
+', :html %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your flex-video containers using our global mixin by including it on your custom class or ID in your own stylesheet. 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 flex-video; }', :css %>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use these to control video container padding and margins */
+$flex-video-padding-top:               emCalc(25px);
+$flex-video-padding-bottom:            67.5%;
+$flex-video-margin-bottom:             emCalc(16px);
+
+/* We use this to control widescreen bottom padding */
+$flex-video-widescreen-padding-bottom: 57.25%;
+', :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>