zurb-foundation 3.2.5 → 4.0.0.rc1

data/docs/components/pagination.html.erb

@@ -0,0 +1,181 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Pagination" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h1><%= @page_title %></h1>
+        <h4 class="subheader">Moving between pages has become less common with the advent of longer pages and AJAX loading, but it can still be useful for long, repetitive listings or content.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <ul class="pagination">
+          <li class="arrow unavailable"><a href="">&laquo;</a></li>
+          <li class="current"><a href="">1</a></li>
+          <li><a href="">2</a></li>
+          <li><a href="">3</a></li>
+          <li><a href="">4</a></li>
+          <li class="unavailable"><a href="">&hellip;</a></li>
+          <li><a href="">12</a></li>
+          <li><a href="">13</a></li>
+          <li class="arrow"><a href="">&raquo;</a></li>
+        </ul>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build pagination in Foundation 4: with our predefined HTML or with our mixin. Building pagination using our predefined classes isn't hard at all. You'll start with an unordered list and add a class of <code>.pagination</code> to it. From there, you just need to add list items with links in them. Those list items have a few options you can use:</p>
+
+        <ul class="disc">
+          <li>To create the arrows, make sure you have <code>&lt;li class="arrow"&gt;</code> as your first and last list items.</li>
+          <li>To mark the current page, use <code>&lt;li class="current"&gt;</code></li>
+          <li>Add a class of <code>.inactive</code> to a list item to make it not clickable, like for the ellipsis in the middle.</li>
+          <li>The page numbers and symbols are always inside of an anchor that you'll link to the page.</li>
+        </ul>
+
+<%= code_example '
+<ul class="pagination">
+  <li class="arrow unavailable"><a href="">&laquo;</a></li>
+  <li class="current"><a href="">1</a></li>
+  <li><a href="">2</a></li>
+  <li><a href="">3</a></li>
+  <li><a href="">4</a></li>
+  <li class="unavailable"><a href="">&hellip;</a></li>
+  <li><a href="">12</a></li>
+  <li><a href="">13</a></li>
+  <li class="arrow"><a href="">&raquo;</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 pagination from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+
+        <h5>Centered Pagination</h5>
+        <p>In some instances, you'll want you pagination to be centered within a container. We've got you covered! Just wrap your unordered list in something that has a defined width and add the class, <code>.pagination-centered</code>.</p>
+
+<%= code_example '
+<div class="pagination-centered">
+  <ul class="pagination">
+    <li class="arrow unavailable"><a href="">&laquo;</a></li>
+    <li class="current"><a href="">1</a></li>
+    <li><a href="">2</a></li>
+    <li><a href="">3</a></li>
+    <li><a href="">4</a></li>
+    <li class="unavailable"><a href="">&hellip;</a></li>
+    <li><a href="">12</a></li>
+    <li><a href="">13</a></li>
+    <li class="arrow"><a href="">&raquo;</a></li>
+  </ul>
+</div>', :html %>
+
+        <div class="pagination-centered">
+          <ul class="pagination">
+            <li class="arrow unavailable"><a href="">&laquo;</a></li>
+            <li class="current"><a href="">1</a></li>
+            <li><a href="">2</a></li>
+            <li><a href="">3</a></li>
+            <li><a href="">4</a></li>
+            <li class="unavailable"><a href="">&hellip;</a></li>
+            <li><a href="">12</a></li>
+            <li><a href="">13</a></li>
+            <li class="arrow"><a href="">&raquo;</a></li>
+          </ul>
+        </div>
+
+        <hr>
+
+        <h3>Build with a Mixin</h3>
+        <p>We've included SCSS mixins used to style pagination. 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="#">_pagination.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/pagination";
+', :css %>
+
+        <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like to the unordered list. The interior classes come with the mixin, just make sure you follow our markup structure:</p>
+
+<%= code_example '
+<ul class="your-class-name">
+  <li class="arrow unavailable"><a href="">&laquo;</a></li>
+  <li class="current"><a href="">1</a></li>
+  <li><a href="">2</a></li>
+  <li><a href="">3</a></li>
+  <li><a href="">4</a></li>
+  <li class="unavailable"><a href="">&hellip;</a></li>
+  <li><a href="">12</a></li>
+  <li><a href="">13</a></li>
+  <li class="arrow"><a href="">&raquo;</a></li>
+</ul>
+', :html %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your pagination using our global mixin by including it on your own custom class. The mixin contains all the necessary styles for positioning and styling the unordered full list of items, the code looks like this:</p>
+
+<%= code_example '
+.your-class-name { @include pagination; }', :css %>
+
+        <ul class="pagination">
+          <li class="arrow unavailable"><a href="">&laquo;</a></li>
+          <li class="current"><a href="">1</a></li>
+          <li><a href="">2</a></li>
+          <li><a href="">3</a></li>
+          <li><a href="">4</a></li>
+          <li class="unavailable"><a href="">&hellip;</a></li>
+          <li><a href="">12</a></li>
+          <li><a href="">13</a></li>
+          <li class="arrow"><a href="">&raquo;</a></li>
+        </ul>
+
+        <h5>Centering</h5>
+        <p>Just like with the CSS, we've made it easy to center the pagination element using the quick mixin.</p>
+
+<%= code_example '
+.your-class-name { @include pagination($centered, $base-styles); }
+
+/* Setting this to true will add styles to the parent of your pagination element for centering */
+$centered: false
+
+/* This controls whether or not the base styles come across. Useful when applying the centered option. */
+$base-style: true
+', :css %>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use these to control the pagination container */
+$pagination-height:                      emCalc(24px);
+$pagination-margin:                      emCalc(-5px);
+
+/* We use these to set the list-item properties */
+$pagination-li-float:                    $default-float;
+$pagination-li-height:                   emCalc(24px);
+$pagination-li-font-color:               #222;
+$pagination-li-font-size:                emCalc(14px);
+$pagination-li-margin:                   emCalc(5px);
+
+/* We use these for the pagination anchor links */
+$pagination-link-pad:                    emCalc(1px) emCalc(7px) emCalc(1px);
+$pagination-link-font-color:             #999;
+$pagination-link-active-bg:              darken(#fff, 10%);
+
+/* We use these for disabled anchor links */
+$pagination-link-unavailable-cursor:     default;
+$pagination-link-unavailable-font-color: #999;
+$pagination-link-unavailable-bg-active:  transparent;
+
+/* We use these for currently selected anchor links */
+$pagination-link-current-background:     $primary-color;
+$pagination-link-current-font-color:     #fff;
+$pagination-link-current-font-weight:    bold;
+$pagination-link-current-cursor:         default;
+$pagination-link-current-active-bg:      $primary-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/panels.html.erb

@@ -0,0 +1,121 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Panels" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">A panel is a simple, helpful Foundation component that enables you to outline sections of your page easily. This allows you to view your page sections as you add content to them or add emphasis to a section. The width is controlled by the grid columns you put them inside.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <div class="row">
+          <div class="large-6 columns">
+            <div class="panel">
+              <h5>This is a regular panel.</h5>
+              <p>It has an easy to override visual style, and is appropriately subdued.</p>
+            </div>
+          </div>
+          <div class="large-6 columns">
+            <div class="panel callout radius">
+              <h5>This is a callout panel.</h5>
+              <p>It's a little ostentatious, but useful for important content.</p>
+            </div>
+          </div>
+        </div>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build panels in Foundation 4, either with our predefined HTML or with our mixin. Building panels using our predefined class isn't hard at all. You'll start with <code>&lt;div&gt;</code> and add a class of <code>.panel</code> to it. From there, you just need to add content inside, anything will do.</p>
+
+        <p>Available HTML class options:</p>
+        <ul class="disc">
+          <li>Adding <code>.callout</code> to your panel will make it our default blue and add a shiny top edge to help it stand out.</li>
+          <li>You may also you <code>.radius</code> to add a tasteful border-radius to thie mix.</li>
+        </ul>
+
+<%= code_example '
+<div class="panel">
+  <!-- Content here -->
+</div>', :html %>
+
+        <div class="panel">Basic panel with content.</div>
+
+        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected panels from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Build with a Mixin</h3>
+        <p>We've included SCSS mixins used to style panels so that you can code smarter. 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="#">_panels.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/panels";
+', :css %>
+
+        <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like to the <code>&lt;div&gt;</code>.</p>
+
+<%= code_example '
+<div class="your-class-name">
+  <!-- Content here -->
+</div>', :html %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your panel using our global mixin by including it on your own custom class or ID. The mixin contains all the necessary styles and they can be customized a bit within the mixin. The rest of the important styles are controlled by variables. The code looks like this:</p>
+
+<%= code_example '
+.your-class-name { @include panel; }', :css %>
+
+        <div class="panel">
+          Panel content goes here...
+        </div>
+
+        <p>You also have <strong>two options</strong> available to customize the panel within the mixin. These control the background color (which also effect border and font color) and the interior padding of the panel itself.</p>
+
+<%= code_example '
+.your-class-name { @include panel($bg, $padding); }
+
+/* This controls the background color, border color and type color based on brightness of the bg. */
+$bg: $secondary-color
+
+/* This controls the interior padding */
+$padding: $panel-padding
+', :css %>
+
+        <div class="panel-custom">
+          Custom panel. Hell yeah! We used @include panel(pink, 40px);
+        </div>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use these to control the background and border styles */
+$panel-bg:              darken(#fff, 5%);
+$panel-border-style:    solid;
+$panel-border-size:     1px;
+
+/* We use this % to control how much we darken things on hover */
+$panel-function-factor: 10%;
+$panel-border-color:    darken($panel-bg, $panel-function-factor);
+
+/* We use these to set default inner padding and bottom margin */
+$panel-margin-bottom:   emCalc(20px);
+$panel-padding:         emCalc(20px);
+
+/* We use these to set default font colors */
+$panel-font-color:      #333;
+$panel-font-color-alt:  #fff;', :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/pricing-tables.html.erb

@@ -0,0 +1,154 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Pricing Tables" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">If you're making a rockin' marketing site for a subscription-based product, you are likely in need of a pricing table. These fill 100% of the their container and are made from a simple unorderd list.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <div class="row">
+          <div class="large-4 columns large-centered">
+            <ul class="pricing-table">
+              <li class="title">Standard</li>
+              <li class="price">$99.99</li>
+              <li class="description">An awesome description</li>
+              <li class="bullet-item">1 Database</li>
+              <li class="bullet-item">5GB Storage</li>
+              <li class="bullet-item">20 Users</li>
+              <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build pricing tables in Foundation 4: with our predefined HTML or with our mixins. Building pricing tables with our predefined classes is quite easy. You'll start with an <code>&lt;ul&gt;</code> and add a class of <code>.pricing-table</code> to it. From there, you just need to add list items inside that represent each piece of the table.</p>
+
+        <p>Available HTML class options for the list items:</p>
+        <ul class="disc">
+          <li><code>&lt;li class="title"&gt;</code>: Creates the styles for a title.</li>
+          <li><code>&lt;li class="price"&gt;</code>: Add a price that stands out.</li>
+          <li><code>&lt;li class="description"&gt;</code>: If you need to descript the plan, add this.</li>
+          <li><code>&lt;li class="bullet-item"&gt;</code>: To call out features, use this list item.</li>
+          <li><code>&lt;li class="cta-button"&gt;</code>: To add a button inside a list item, use this.</li>
+        </ul>
+
+<%= code_example '
+<ul class="pricing-table">
+  <li class="title">Standard</li>
+  <li class="price">$99.99</li>
+  <li class="description">An awesome description</li>
+  <li class="bullet-item">1 Database</li>
+  <li class="bullet-item">5GB Storage</li>
+  <li class="bullet-item">20 Users</li>
+  <li class="cta-button"><a class="button" href="#">Buy Now</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 pricing-tables from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Build with a Mixin</h3>
+        <p>We've included SCSS mixins used to style pricing tables so that you can code how you want to. 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="#">_pricing-tables.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/pricing-tables";
+', :css %>
+
+        <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like with the <code>&lt;ul&gt;</code> and the list items inside it.</p>
+
+<%= code_example '
+<ul class="your-pricing-class">
+  <li class="your-title-class">Title</li>
+  <li class="your-price-class">$$$</li>
+  <li class="your-desc-class">...</li>
+  <li class="your-bullet-class">Bullet</li>
+  <li class="your-cta-class"><a class="your-button-class" href="#">Button</a></li>
+</ul>', :html %>
+
+        <h5>The Container Mixin</h5>
+        <p>Pricing tables are built up from an unordered list. We give this container some necessary styles by using our container mixin. There are no customizable options within the mixin, but everything can be changed using the SCSS variables below.</p>
+
+<%= code_example '
+.your-pricing-class  { @include pricing-table-container;
+  .your-title-class  { @include pricing-table-title; }
+  .your-price-class  { @include pricing-table-price; }
+  .your-desc-class   { @include pricing-description-title; }
+  .your-bullet-class { @include pricing-table-bullet; }
+  .your-cta-class    { @include pricing-table-cta; }
+}', :css %>
+
+        <ul class="pricing-table">
+          <li class="title">Standard</li>
+          <li class="price">$99.99</li>
+          <li class="description">An awesome description</li>
+          <li class="bullet-item">1 Database</li>
+          <li class="bullet-item">5GB Storage</li>
+          <li class="bullet-item">20 Users</li>
+          <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
+        </ul>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use this to control the border color */
+$price-table-border:        solid 1px #ddd;
+
+/* We use this to control the bottom margin of the pricing table */
+$price-table-margin-bottom: emCalc(20px);
+
+/* We use these to control the title styles */
+$price-title-bg:            #ddd;
+$price-title-padding:       emCalc(15px) emCalc(20px);
+$price-title-align:         center;
+$price-title-color:         #333;
+$price-title-weight:        bold;
+$price-title-size:          emCalc(16px);
+
+/* We use these to control the price styles */
+$price-money-bg:            #eee;
+$price-money-padding:       emCalc(15px) emCalc(20px);
+$price-money-align:         center;
+$price-money-color:         #333;
+$price-money-weight:        normal;
+$price-money-size:          emCalc(20px);
+
+/* We use these to control the description styles */
+$price-bg:                  #fff;
+$price-desc-color:          #777;
+$price-desc-padding:        emCalc(15px);
+$price-desc-align:          center;
+$price-desc-font-size:      emCalc(12px);
+$price-desc-weight:         normal;
+$price-desc-line-height:    1.4;
+$price-desc-bottom-border:  dotted 1px #ddd;
+
+/* We use these to control the list item styles */
+$price-item-color:          #333;
+$price-item-padding:        emCalc(15px);
+$price-item-align:          center;
+$price-item-font-size:      emCalc(14px);
+$price-item-weight:         normal;
+$price-item-bottom-border:  dotted 1px #ddd;
+
+/* We use these to control the CTA area styles */
+$price-cta-bg:              #f5f5f5;
+$price-cta-align:           center;
+$price-cta-padding:         emCalc(20px) emCalc(20px) 0;', :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>