zurb-foundation 3.2.5 → 4.0.0.rc1

data/docs/components/breadcrumbs.html.erb

@@ -0,0 +1,146 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Breadcrumbs" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Breadcrumbs come in handy to show a navigation trail for users clicking through a site or app. They'll conform to 100% of the container width you put them in.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <ul class="breadcrumbs">
+          <li><a href="#">Home</a></li>
+          <li><a href="#">Features</a></li>
+          <li class="unavailable"><a href="#">Gene Splicing</a></li>
+          <li class="current"><a href="#">Cloning</a></li>
+        </ul>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build breadcrumbs in Foundation 4: with our predefined HTML classes or with our structure and mixins. Building breadcrumbs using our predefined class is easy. You'll need an <code>&lt;ul class="breadcrumbs"&gt;</code> with <code>&lt;li&gt;</code> elements inside. You have access to two state classes: <code>&lt;li class="unavailable"&gt;</code> and <code>&lt;li class="current"&gt;</code> to control link intentions. The default markup looks like this:</p>
+
+<%= code_example '
+<ul class="breadcrumbs">
+  <li><a href="#">Home</a></li>
+  <li><a href="#">Features</a></li>
+  <li class="unavailable"><a href="#">Gene Splicing</a></li>
+  <li class="current"><a href="#">Cloning</a></li>
+</ul>', :html %>
+
+        <p>For these styles to come across, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>breadcrumbs 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 alert boxes. 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> and <a href="#">_alerts.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/breadcrumbs";
+', :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 '
+<ul class="your-class-name">
+  <li><a href="#">Home</a></li>
+  <li><a href="#">Features</a></li>
+  <li class="unavailable"><a href="#">Gene Splicing</a></li>
+  <li class="current"><a href="#">Cloning</a></li>
+</ul>', :html %>
+
+        <h5>Container Mixin</h5>
+        <p>You can build your breadcrumbs using our global mixin by including it on your custom class or ID in your stylesheet. The container mixin will create the necessary style for the <code>&lt;ul&gt;</code>. The global mixin looks like this:</p>
+
+<%= code_example '
+.your-class-name { @include crumb-container; }
+', :css %>
+
+    <ul class="crumb-container">
+      <li><a href="#">Home</a></li>
+      <li><a href="#">Features</a></li>
+      <li class="unavailable"><a href="#">Gene Splicing</a></li>
+      <li class="current"><a href="#">Cloning</a></li>
+    </ul>
+
+        <h5>Crumbs Mixin</h5>
+        <p>Use this mixin to apply the list item and link styles to items inside the breadcrumb container. You attach this mixin to the list items inside of your container.</p>
+
+
+<%= code_example '
+.your-class-name {
+  @include crumb-container;
+
+  li { @include crumbs; }
+}
+', :css %>
+
+    <ul class="crumb-container crumbs">
+      <li><a href="#">Home</a></li>
+      <li><a href="#">Features</a></li>
+      <li class="unavailable"><a href="#">Gene Splicing</a></li>
+      <li class="current"><a href="#">Cloning</a></li>
+    </ul>
+
+        <h5>Radius Mixin</h5>
+        <p>We've also created a global radius mixin that you can use to add border-radius to any element you'd like.</p>
+
+<%= code_example '
+.your-class-name {
+  @include crumb-container;
+  @include radius($radius);
+
+  li { @include crumbs; }
+}
+', :css %>
+
+    <ul class="crumb-container crumbs radius">
+      <li><a href="#">Home</a></li>
+      <li><a href="#">Features</a></li>
+      <li class="unavailable"><a href="#">Gene Splicing</a></li>
+      <li class="current"><a href="#">Cloning</a></li>
+    </ul>
+
+        <h5>Default SCSS Variables</h5>
+<%= code_example '
+/* We use this to set the background color for the breadcrumb container */
+$crumb-bg:                     lighten($secondaryColor, 5%);
+
+/* We use these to set the padding around the breadcrumbs. */
+$crumb-padding:                emCalc(6px) emCalc(14px) emCalc(9px);
+$crumb-side-padding:           emCalc(12px);
+
+/* We use these to control border styles. */
+$crumb-function-factor:        10%;
+$crumb-border-size:            1px;
+$crumb-border-style:           solid;
+$crumb-border-color:           darken($crumb-bg, $crumb-function-factor);
+$crumb-radius:                 $button-radius;
+
+/* We use these to set various text styles for breadcrumbs. */
+$crumb-font-size:              emCalc(11px);
+$crumb-font-color:             $primary-color;
+$crumb-font-color-current:     #333;
+$crumb-font-color-unavailable: #999;
+$crumb-font-transform:         uppercase;
+$crumb-link-decor:             underline;
+
+/* We use these to control the slash between breadcrumbs */
+$crumb-slash-color:            #aaa;
+$crumb-slash:                  "/";
+', :css %>
+
+        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>.</p>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/button-groups.html.erb

@@ -0,0 +1,174 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Button Groups" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Button groups are great when you need to display a group of actions in a bar. These build off the button styles and work perfectly with the grid.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <ul class="button-group">
+          <li><a href="#" class="small button">Button 1</a></li>
+          <li><a href="#" class="small button">Button 2</a></li>
+          <li><a href="#" class="small button">Button 3</a></li>
+        </ul>
+        <ul class="button-group radius">
+          <li><a href="#" class="button secondary">Button 1</a></li>
+          <li><a href="#" class="button secondary">Button 2</a></li>
+          <li><a href="#" class="button secondary">Button 3</a></li>
+          <li><a href="#" class="button secondary">Button 4</a></li>
+        </ul>
+        <ul class="button-group round even-3">
+          <li><a href="#" class="button alert">Button 1</a></li>
+          <li><a href="#" class="button alert">Button 2</a></li>
+          <li><a href="#" class="button alert">Button 3</a></li>
+        </ul>
+        <ul class="button-group round even-3">
+          <li><input type="submit" class="button success" value="Button 1"></li>
+          <li><input type="submit" class="button success" value="Button 2"></li>
+          <li><input type="submit" class="button success" value="Button 3"></li>
+        </ul>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build button groups in Foundation 4: with our predefined HTML classes or with our structure and mixins. Building button groups using our predefined classes is a breeze, you'll just wrap a <a href="button.html">button</a> inside an <code>&lt;ul&gt;</code>.</p>
+
+        <p>The button styles will work the same as they do when building a single button, but they'll float next to each other to create a group. You also have access to the same radius classes as buttons, only they'll go on the unordered list instead of the button. You can even make sure the buttons take up even space within the container you put them in.</p>
+
+        <ul class="disc">
+          <li>The radius classes: <code>.radius</code> or <code>.round</code>.</li>
+          <li>The even classes: <code>.even-2</code> through <code>.even-8</code> to control the even widths.</li>
+        </ul>
+
+<%= code_example '
+<!-- A default button-group with small buttons inside -->
+<ul class="button-group">
+  <li><a href="#" class="small button">Button 1</a></li>
+  <li><a href="#" class="small button">Button 2</a></li>
+  <li><a href="#" class="small button">Button 3</a></li>
+</ul>
+
+<!-- A round, even-3 button-group with default alert buttons inside. -->
+<!-- Do not put the radius classes on the buttons themselves. -->
+<ul class="button-group round even-3">
+  <li><a href="#" class="button alert">Button 1</a></li>
+  <li><a href="#" class="button alert">Button 2</a></li>
+  <li><a href="#" class="button alert">Button 3</a></li>
+</ul>
+', :html %>
+
+        <p>For these styles to take effect, make sure you have the <strong>default Foundation CSS package</strong> or that you've selected <strong>buttons and button-groups 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 button groups. 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="#">_button-groups.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/button-groups";
+', :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 '
+<ul class="your-class-name">
+  <li><a href="#" class="your-button-class">Button 1</a></li>
+  <li><a href="#" class="your-button-class">Button 2</a></li>
+  <li><a href="#" class="your-button-class">Button 3</a></li>
+</ul>
+', :html %>
+
+        <h5>Container Mixin</h5>
+        <p>Since button groups need to be within a list to work properly, you'll need to create some styles for the list container that you use.</p>
+
+<%= code_example '
+.your-class-name { @include button-group-container; }
+', :css %>
+
+        <p>You'll also need to make sure to include some styles for your buttons inside the group. Either use a class you've already styled, or apply it specifically here.</p>
+
+<%= code_example '
+.your-class-name { @include button-group-container;
+  .your-button-class { @include button; }
+}
+', :css %>
+
+        <ul class="button-group-docs">
+          <li><a href="#" class="button-class">Button 1</a></li>
+          <li><a href="#" class="button-class">Button 2</a></li>
+          <li><a href="#" class="button-class">Button 3</a></li>
+        </ul>
+
+        <h5>Style Mixin</h5>
+        <p>With this mixin, you'll be able to make the rest of the button-group, including: radius, even with styles and floats. You'll apply this mixin to the <code>&lt;li&gt;</code> elements of the button group list.</p>
+
+<%= code_example '
+.your-class-name { @include button-group-container;
+  .your-button-class { @include button; }
+
+  & > li { @include button-group-style($radius, $even, $float); }
+}
+
+/* This controls the radius of the left and right edges. */
+/* Set to true or px value */
+$radius: false
+
+/* This makes the buttons take up even space in their container */
+/* Set to the number of buttons in the group */
+$even: false
+
+/* Controls how the buttons in the group floatm set to left or right */
+$float: left
+', :css %>
+
+    <ul class="button-group-docs list">
+      <li><a href="#" class="button-class">Button 1</a></li>
+      <li><a href="#" class="button-class">Button 2</a></li>
+      <li><a href="#" class="button-class">Button 3</a></li>
+    </ul>
+
+          <h5>Inset Shadow, Border Radius &amp; Transition Mixin</h5>
+          <p>Sometimes you want to add a nice fancy shine to the edge of your buttons. 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 buttons a fade effect.</p>
+
+<%= code_example '
+.your-class-name { @include button-group-container;
+  .your-button-class {
+    @include button;
+    @include inset-shadow;
+    @include single-transition;
+  }
+
+  & > li { @include button-group-style(true); }
+}
+', :css %>
+
+    <ul class="button-group-docs list extras">
+      <li><a href="#" class="button-class">Button 1</a></li>
+      <li><a href="#" class="button-class">Button 2</a></li>
+      <li><a href="#" class="button-class">Button 3</a></li>
+    </ul>
+
+        <h5>Default SCSS Variables</h5>
+<%= code_example '
+/* We use this to set the margin below button groups. */
+$button-group-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>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>
+

data/docs/components/buttons.html.erb

@@ -0,0 +1,220 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Buttons" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Buttons are a convenient tool when it comes to more traditional actions. To that end, Foundation has a lot of easy to use button styles that you can customize or override to fit your needs.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <div class="row">
+          <div class="small-6 large-6 columns">
+            <a href="#" class="tiny button">.tiny.button</a><br>
+            <a href="#" class="small button">.small.button</a><br>
+            <a href="#" class="button">.button</a><br>
+          </div>
+          <div class="small-6 large-6 columns">
+            <a href="#" class="tiny button secondary">.tiny.secondary</a><br>
+            <a href="#" class="small button success radius">.small.success.radius</a><br>
+            <a href="#" class="button alert round disabled">.round.disabled</a><br>
+          </div>
+        </div>
+        <a href="#" class="large button expand">.large.button.expand</a>
+
+        <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</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 class 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>
+          <li>You can also add <code>.disabled</code> to any button and it will look and act disabled</li>
+        </ul>
+
+<%= code_example '
+<!-- Size Classes -->
+<a href="#" class="button">Default Button</a>
+<a href="#" class="tiny button">Tiny Button</a>
+<a href="#" class="small button">Small Button</a>
+<a href="#" class="large button">Large Button</a>
+
+<!-- Color Classes -->
+<a href="#" class="button secondary">Secondary Button</a>
+<a href="#" class="button success">Success Button</a>
+<a href="#" class="button alert">Alert Button</a>
+
+<!-- Radius Classes -->
+<a href="#" class="button radius">Radius Button</a>
+<a href="#" class="button round">Round Button</a>
+
+<!-- Disabled Class -->
+<a href="#" class="button disabled">Disabled 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>button 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> and <a href="#">_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";
+', :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 an entire button 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; }
+', :css %>
+
+        <a href="#" class="button">Default Button</a>
+
+        <p>There are also <strong>six options</strong> you can customize on the fly when writing this mixin. These controls things like: background color, border color, text color, size and state. Setting any of these options to <strong>false</strong> will negate those styles.</p>
+
+<%= code_example '
+/* Using the available options */
+.your-class-name {
+  @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
+}
+
+/* This controls padding around the buttons. Use a variable or em value */
+$padding: $button-med
+
+/* This controls button color. Set to one of our variables or a custom hex value */
+$bg: $primary-color
+
+/* This controls button radius. Set to a variable, true/false, or custom px value */
+$radius: false
+
+/* This whether button is full-width. Set to true or false */
+$full-width: false
+
+/* This controls whether disabled styles are used. Set to true or false */
+$disabled: false
+
+/* This controls padding for inputs, they are a little different */
+$is-input: false
+', :css %>
+
+    <a href="#" class="custom buttony">Custom Button</a>
+
+        <h5>Base Mixin</h5>
+        <p>You also have access to a few internal mixins that can create parts of the button as needed. The base mixin will create a button base that only include structural styles.</p>
+
+<%= code_example '
+.your-class-name { @include button-base; }
+', :css %>
+
+    <a href="#" class="button-base">Button Base</a>
+
+        <h5>Size Mixin</h5>
+        <p>The size mixin will let you control the padding, which adjusts text size. You can also choose whether the button is full-width or an input button.</p>
+
+<%= code_example '
+.your-class-name {
+  @include button-base;
+  @include button-size($padding, $full-width, $is-input);
+}
+', :css %>
+
+    <a href="#" class="button-base size">Button Base &amp; Size</a>
+
+        <h5>Style Mixin</h5>
+        <p>The last internal mixin you have access to for buttons is the style mixin. This will help you style background color, text, border and radius.</p>
+
+<%= code_example '
+.your-class-name {
+  @include button-base;
+  @include button-size;
+  @include button-style($bg, $radius, $disabled);
+}
+', :css %>
+
+    <a href="#" class="button-base size style">Button Base, Size &amp; Style</a>
+
+          <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-base;
+  @include button-size;
+  @include button-style;
+  @include radius;
+  @include single-transition;
+  @include inset-shadow($active);
+}
+
+/* This controls whether or not you get the depressed look on tap/click. */
+/* Set to true or false, defaults to true. */
+$active: true
+', :css %>
+
+    <a href="#" class="button-base size style radius shine">Button Base, Size, Style &amp; Shine</a>
+
+        <h5>Default SCSS Variables</h5>
+<%= code_example '
+/* We use these to build padding for buttons. */
+$button-med:              emCalc(12px);
+$button-tny:              emCalc(7px);
+$button-sml:              emCalc(9px);
+$button-lrg:              emCalc(16px);
+
+/* We use this to control the display property. */
+$button-display:          inline-block;
+$button-margin-bottom:    emCalc(20px);
+
+/* We use these to control button text styles. */
+$button-font-color:       #fff;
+$button-font-color-alt:   #333;
+$button-font-med:         emCalc(16px);
+$button-font-tny:         emCalc(11px);
+$button-font-sml:         emCalc(13px);
+$button-font-lrg:         emCalc(20px);
+$button-font-weight:      bold;
+$button-font-align:       center;
+
+/* We use these to control various hover effects. */
+$button-function-factor:  10%;
+
+/* We use these to control button border styles. */
+$button-border-width:     1px;
+$button-border-style:     solid;
+$button-border-color:     darken($primary-color, $button-function-factor);
+
+/* We use this to set the default radius used throughout the core. */
+$button-radius:           $global-radius;
+
+/* We use this to set default opacity for disabled buttons. */
+$button-disabled-opacity: 0.6;
+', :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>