zurb-foundation 3.2.5 → 4.0.0.rc1

data/docs/_zurb-jobs.html.erb

@@ -0,0 +1,5 @@
+<div class="jobs hide-on-phones">
+  <h5>Awesome product jobs:</h5>
+  <script type="text/javascript" src="http://www.zurb.com/jobs/widgets/jobs.js?limit=3&variation=foundation-sidebar"></script>
+  <a id="via" href="http://zurbjobs.com">via&nbsp;<span class="jobs-link">ZURBjobs</span></a>
+</div>

data/docs/changelog.html.erb

@@ -0,0 +1,185 @@
+<div class="row">
+  <div class="large-3 columns">
+    <%= render "_sidebar.html.erb" %>
+  </div>
+
+  <div class="large-9 columns">
+
+    <% @page_title = "Changelog" %>
+    <h2><%= @page_title %></h2>
+    
+    <h4 class="subheader">We'll keep you up to date with what we've released so you at least have a gist of what goes into each update. For the most part, we'll try to list things out as detailed as we see necessary.</h4>
+    
+    <hr />
+    
+    <h5><strong>4.0</strong> &mdash; Feburary 28, 2013</h5>
+    <p>Initial launch of Foundation 4, a rewritten, mobile-first implementation of the framework. Major enhancements include a mobile-first approach across the board, Scss tools to allow for all-semantic coding, and rewritten JS plugins for speed and ease of use. Marketing site updates, new docs, refined and simplified styles and more. Review the <a href="../migration.php">migration guide</a> for more information.</p>
+    
+    <h5>3.2.5 &mdash; January 26, 2013</h5>
+    <p>This patch fixes compatability with jQuery 1.9. This patch includes:</p>
+    <ul class="disc">
+      <li>Bumped Topbar to 2.04 and removed deprecated jQuery die() and live() events.</li>
+      <li>Fixed magellan destination undefined error.</li>
+      <li>Add Clearing and Joyride to SCSS project templates.</li>
+    </ul>
+
+    <h5>3.2.4 &mdash; January 14, 2013</h5>
+    <p>This patch includes bug fixes and a few style improvements for small UI elements. This patch includes:</p>
+    <ul class="disc">
+      <li>Bumped Joyride to version 2.0.3</li>
+      <li>Added centered pagination style</li>
+      <li>Fixed bug with Orbit captions</li>
+      <li>Fixed bugs with clicking on accordion element</li>
+      <li>Added styling for buttons inside dropdowns</li>
+      <li>We're now using max-width instead of width on tooltips</li>
+      <li>Added class, .tip-centered-top and .top-centered-bottom for positioning tooltips</li>
+      <li>Added functionality to create a stick top bar that enables it to be down the page in the markup and stick when it hits the browser edge.</li>
+      <li>Fixes to the semantic grid mixin</li>
+      <li>Added better :focus styles for error inputs</li>
+      <li>Added settings for Top Bar Toggle color</li>
+      <li>Updated Modular Scale to version 1.0.6</li>
+      <li>Fixed bug with printing styles</li>
+    </ul>
+
+    <hr>
+
+    <h5>3.2.3</h5>
+    <p>This patch fixes a few quick bugs.</p>
+
+    <hr>
+
+    <h5>3.2.2 &mdash; November 10, 2012</h5>
+    <p>This patch fixes a typo found in the tabs plugin.</p>
+
+    <hr>
+
+    <h5>3.2.1 &mdash; November 9, 2012</h5>
+    <p>This patch include bug fixes for various elements, such as:</p>
+    <ul class="disc">
+      <li>Adding a missing line for mqueries.scss into app.scss</li>
+      <li>Height of fixed magellan element</li>
+      <li>Update viewport tag with initial-scale</li>
+      <li>Dropdown button fixes</li>
+      <li>Clearing bug fixes</li>
+      <li>Added a font-smoothing variable</li>
+      <li>Added close support to accordions</li>
+      <li>Removed deep linking hashes from tabs</li>
+      <li>Topbar now resets on close for small layouts</li>
+    </ul>
+
+    <hr>
+
+    <h5><strong>3.2</strong> &mdash; October 26, 2012</h5>
+    <p>With this update we've revamped our documentation to be more organized and explain details regarding Scss, Compass and Javascripts.</p>
+
+    <p>The updates to Foundation itself are as follows:</p>
+    <ul class="disc">
+      <li>Added <a href="http://foundation.zurb.com/docs/magellan.php">Magellan</a>, a plugin for building design agnostic sticky navs that know where you are on the page.</li>
+      <li>Added <a href="http://foundation.zurb.com/docs/joyride.php">Joyride</a>, our plugin for creating tours of your website or app.</li>
+      <li>Added <a href="http://foundation.zurb.com/docs/clearing.php">Clearing</a>, our new responsive image gallery lightbox plugin.</li>
+      <li>Cleaned up Orbit a bit. We now use opacity on each slide so you don't have stacking problems or different image size problems. You can now optionally stack slides on mobile. Orbit can now be swipable on mobile as well.</li>
+      <li>Updated Reveal</li>
+      <li>Updated index files to use defined header and footer structure</li>
+      <li>Cleaned up some Compass included</li>
+      <li>RTL for ui and navbar.</li>
+      <li>Tabs can now use unordered lists or definition lists, replacing the definition title with an li.section-title.</li>
+      <li>Added definition list styles.</li>
+      <li>Added mobile-#-up classes to use in conjunction with regular block-grid classes for a different mobile grid.</li>
+      <li>Updated block grids to be really flexible and customizable based on a variable.</li>
+      <li>Added better responsive styling for tooltips.</li>
+      <li>Separated all media queries into their own file for easy droppping.</li>
+      <li>Updated modular scale to use new functions, doesn't effect end-users.</li>
+      <li>Updated visibility classes to use inherit instead of block to accomodate for spans.</li>
+      <li>Removed HTML5 Shiv from header since its included in modernizr.</li>
+      <li>Added <a href="http://foundation.zurb.com/docs/elements.php#pricing-tables">pricing tables</a> UI element</li>
+      <li>Added many new Scss variables to control styling for things like: topbar, clearing, joyride, pricint tables, etc.</li>
+      <li>Bug fixes for Topbar.</li>
+      <li>Added 5 <a href="http://foundation.zurb.com/templates.php">HTML templates</a> to the add-ons section.</li>
+    </ul>
+
+    <hr>
+
+    <h5>3.1.1 &mdash; September 19, 2012</h5>
+    <p>Updating Top Bar navigation implementation pattern to wrap <code>.contain-to-grid</code> and/or <code>.fixed</code> around the <code>nav</code> element to prevent horizontal scroll bars when using <code>.contain-to-grid</code>. Updated the topBar breakpoint option so users only need to update the Scss variable.</p>
+
+    <hr>
+
+    <h5><strong>3.1</strong> &mdash; September 14, 2012</h5>
+    <p>Launched new features, a new Add-ons section to the marketing site, Right to left language support, and fixed bugs.</p>
+    <p>With this release of Foundation, we include:</p>
+    <ul class="disc" style="list-style: outside;">
+      <li>Downloadable HTML template pages that can be copy/pasted into an existing project or added to your project upon downloading from the customizer.</li>
+      <li>The Add-on's section includes a round-up of all the playground pieces, etc that aren't officially included in Foundation, but built to work with it. This includes: <a href="../templates.php">Templates</a>, <a href="../icon-fonts.php">Icon Fonts</a>, <a href="../off-canvas.php">Off-Canvas Layouts</a>, <a href="../responsive-tables.php">Responsive Tables</a>, <a href="../social-icons.php">SVG Social Icons</a>, and <a href="../stencils.php">Omnigraffle Stencils</a>.</li>
+      <li>Foundation now includes a <a href="navigation.php">responsive top navigation</a> bar that lets you have control over when it responds and what you include in it. We've made it really easy to customize using Scss.</li>
+      <li>Right-to-left language support straight out of the box. You can adjust this in the settings.scss file or upon downloading with the customizer.</li>
+      <li>New UI Styles for Progress Bars and Image Thumbs.</li>
+      <li>Updated to include jQuery 1.8.1</li>
+      <li>Orbit thumbnail documentation.</li>
+      <li>Better Reveal size documentation.</li>
+    </ul>
+
+    <hr>
+
+    <h5>3.0.9 &mdash; August 14, 2012</h5>
+    <p>Bug fixes and locking down dependencies.</p>
+
+    <hr>
+
+    <h5>3.0.8 &mdash; August 10, 2012</h5>
+    <p>Numerous bugfixes. Added media query toggle plugin. Removed marketing site from repository and included a new <strong>test/</strong> directory to help contributors test patches.</p>
+    <p>New features: Media Query Toggler, block-grid mobile layouts, font-size customizer options and included modular scale gem as dependancy for SCSS version.</p>
+
+    <h5>3.0.7 &mdash; July 30, 2012</h5>
+    <p>Numerous JS bug fixes, added generators for Rails and refactored SCSS directory for better maintainability and scalability over time. CSS files weren't affected by this refactoring.</p>
+
+    <hr>
+
+    <h5>3.0.6 &mdash; July 20, 2012</h5>
+    <p>Numerous bugfixes including dropdown buttons on touch devices, Modernizr update with IE8Compat, split button colors, and more. Split out the functions in app.js to be part of the Gem and only initialized in app.js, so you can keep a clean distinction between your JS and Foundation's (if you want to). Added an <a href="elements.php">accordion</a> element.</p>
+
+    <hr>
+
+    <h5>3.0.5 &mdash; July 10, 2012</h5>
+    <p>Fixed Compass performance issues by separating out each Foundation file and removing extraneous imports.</p>
+
+    <hr>
+
+    <h5>3.0.4 &mdash; July 6, 2012</h5>
+    <p>Fixed a number of bugs around the Sass/Gem installs and documentation. Some smaller items:</p>
+    <ul class="disc" style="list-style: outside;">
+      <li>Fixed a bug with dropdown buttons to allow clicking on their anchors again.</li>
+      <li>Added styles for HTML5 (and other) input styles, not just text.</li>
+      <li>Added error states back to the forms documentation.</li>
+      <li>Flyouts in a nav bar can now expand up as well as down.</li>
+      <li>In SCSS you can now set $base-size correctly, but we're still working to correct modifying the $ratio variable.</li>
+    </ul>
+
+    <hr>
+
+    <h5>3.0.1 to 3.0.3 &mdash; July 2 to July 4</h5>
+    <p>Various bug fixes with the downloader, gem, and Sass install.</p>
+
+    <hr>
+
+    <h5><strong>3.0</strong> &mdash; June 30, 2012</h5>
+    <p>Initial launch of Foundation 3, deprecating Foundation 2.2.1. Major enhancements include Sass/SCSS development, new grid system with box-sizing: border-box, new form styles, new UI elements, retooled download and install options, new docs, new marketing site.</p>
+
+    <hr>
+
+    <div class="panel">
+      <h3>Where Does Foundation Work?</h3>
+      <h5 class="subheader">Foundation is the most advanced front-end framework in existence. We've ditched IE7 so that we can do more awesome things and push the web to where it needs to be.</h5>
+      <a class="button" href="support.php">Browser Support &raquo;</a> <a class="secondary button" href="faq.php">Frequently Asked Questions &raquo;</a>
+    </div>
+    
+    
+  </div>
+</div>
+
+
+
+
+
+
+
+

data/docs/compile.rb

@@ -0,0 +1,43 @@
+require 'bundler'
+Bundler.require
+require 'fileutils'
+
+class FoundationDocs
+    def initialize
+      @environment = Sprockets::Environment.new
+      @environment.append_path File.expand_path('../../scss', __FILE__)
+      @environment.append_path File.expand_path('../css', __FILE__)
+      @environment.append_path File.expand_path('../../js', __FILE__)
+      @environment.append_path File.expand_path('../js', __FILE__)
+    end
+    def compile
+      FileUtils.mkdir_p('public/assets/vendor')
+      File.delete("public/assets/normalize.css") if File.exists?("public/assets/normalize.css")
+      File.delete("public/assets/docs.css") if File.exists?("public/assets/docs.css")
+      File.delete("public/assets/docs.js") if File.exists?("public/assets/docs.js")
+      File.delete("public/assets/vendor/custom.modernizr.js") if File.exists?("public/assets/vendor/custom.modernizr.js")
+      File.delete("public/assets/vendor/zepto.js") if File.exists?("public/assets/vendor/zepto.js")
+      File.delete("public/assets/vendor/jquery.js") if File.exists?("public/assets/vendor/jquery.js")
+
+      normalize_css_code = @environment["normalize.css"].to_s
+      docs_css_code = @environment["docs.css"].to_s
+      docs_js_code = Uglifier.compile(@environment["docs.js"].to_s)
+      modernizr_code = Uglifier.compile(@environment["vendor/custom.modernizr.js"].to_s)
+      jquery_code = Uglifier.compile(@environment["vendor/jquery.js"].to_s)
+      zepto_code = Uglifier.compile(@environment["vendor/zepto.js"].to_s)
+
+      File.open("public/assets/normalize.css","w") {|f| f.puts normalize_css_code } 
+      File.open("public/assets/docs.css","w") {|f| f.puts  docs_css_code}
+      File.open("public/assets/docs.js","w") {|f| f.puts  docs_js_code}
+
+      File.open("public/assets/vendor/custom.modernizr.js","w") {|f| f.puts modernizr_code }
+      File.open("public/assets/vendor/zepto.js","w") {|f| f.puts zepto_code}
+      File.open("public/assets/vendor/jquery.js","w") {|f| f.puts jquery_code}
+    end
+end
+
+#s = Stasis.new(File.expand_path('.',__FILE__), File.expand_path('./public', __FILE__))
+#s.render
+`bundle exec stasis`
+f=FoundationDocs.new
+f.compile

data/docs/components/alert-boxes.html.erb

@@ -0,0 +1,202 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+    <div class="row">
+      <div class="large-12 columns">
+        <% @page_title = "Alert Boxes" %>
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Alerts are a handy element you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They'll conform to 100% of the container width you put them in.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <div data-alert class="alert-box radius">
+          This is a standard alert (div.alert-box).
+          <a href="" class="close">&times;</a>
+        </div>
+
+        <div data-alert class="alert-box success">
+          This is a success alert (div.alert-box.success).
+          <a href="" class="close">&times;</a>
+        </div>
+
+        <div data-alert class="alert-box alert round">
+          This is an alert (div.alert-box.alert.round).
+          <a href="" class="close">&times;</a>
+        </div>
+
+        <div data-alert class="alert-box secondary">
+          This is a secondary alert (div.alert-box.secondary).
+          <a href="" class="close">&times;</a>
+        </div>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build alerts in Foundation 4: with our predefined HTML classes or with our structure and mixins. Building an alert using our predefined class is super-easy, you only need a block-level element with a class of <code>.alert-box</code> (we usually use a <code>&lt;div&gt;</code>). You may also include an anchor with a class of <code>.close</code> to create a close box. Here is the markup you'll need:</p>
+
+<%= code_example '
+<div data-alert class="alert-box">
+  <!-- Your content goes here -->
+  <a href="#" class="close">&times;</a>
+</div>', :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>alerts 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/alerts";
+', :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 '
+<div data-alert class="your-class-name">
+  <!-- Your content goes here -->
+  <a href="#" class="close">&times;</a>
+</div>', :html %>
+
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your alert using our global mixin by including it on your custom class or ID in your stylesheet. The mixin contains options for changing the background color, which also controls the border and text color. The rest of the defaults can be modified using the available variables. The global mixin looks like this:</p>
+
+<%= code_example '
+/* Using the default styles */
+.your-class-name { @include alert; }
+
+/* Using the available options */
+.your-class-name { @include alert(#ff6c3c); }
+', :css %>
+
+    <div data-alert class="alert-box">
+    This is a default alert.
+    <a href="#" class="close">&times;</a>
+    </div>
+
+    <div data-alert class="alert-base custom-bg">
+    This is an alert with a custom background set.
+    <a href="#" class="close">&times;</a>
+    </div>
+
+        <h5>Base Mixin</h5>
+        <p>Use this mixin to create the base styles for alert boxes. This will include styles that create the basic structure of an alert box.</p>
+
+
+<%= code_example '
+.your-class-name { @include alert-base; }
+', :css %>
+
+    <div class="alert-base">This is the base mixin.</div>
+
+        <h5>Background Mixin</h5>
+        <p>You can control the background, border and text styles for the alert using this mixin. We base the border and text style on the background color you choose using some sweet Sass logic.</p>
+
+<%= code_example '
+.your-class-name {
+  @include alert-base;
+  @include alert-style($bg);
+}', :css %>
+
+    <div data-alert class="alert-base bg">This is base and bg mixins.</div>
+
+        <p>You can set <code>$bg</code> color to any of our predefined color variables or any hexadecimal color of your choosing. To set this value to something other than our default, use <code>@include alert-bg(#hexcolor);</code></p>
+
+        <h5>Close Box Mixin</h5>
+        <p>You can include a close box with each of the alert boxes by adding an anchor right before the closing <code>&lt;/div&gt;</code>. This anchor should have a class of <code>.close</code> in order to work with <strong>foundation.alerts.js</strong>, which contains the interaction for closing.</p>
+
+<%= code_example '
+.your-class-name {
+  @include alert-base;
+  @include alert-style;
+  .close { @include alert-close; }
+}', :css %>
+
+        <div data-alert class="alert-base bg">
+          This is base, bg and close mixins.
+          <a href="" class="close">&times;</a>
+        </div>
+
+        <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 alert-base;
+  @include alert-style($success-color);
+  @include radius($radius);
+}', :css %>
+
+    <div data-alert class="alert-base bg radius success">
+    This is base, bg and radius mixins.
+    <a href="" class="close">&times;</a>
+    </div>
+
+        <h5>Default SCSS Variables</h5>
+<%= code_example '
+/* We use this to control alert padding. */
+$alert-padding-top:         emCalc(11px);
+$alert-padding-left:        $alert-padding-top;
+$alert-padding-right:       $alert-padding-top + emCalc(10px);
+$alert-padding-bottom:      $alert-padding-top + emCalc(1px);
+
+/* We use these to control text style. */
+$alert-font-weight:         bold;
+$alert-font-size:           emCalc(14px);
+$alert-font-color:          #fff;
+$alert-font-color-alt:      darken($secondary-color, 60%);
+
+/* We use this for close hover effect. */
+$alert-function-factor:     10%;
+
+/* We use these to control border styles. */
+$alert-border-style:        solid;
+$alert-border-width:        1px;
+$alert-border-color:        darken($primary-color, $alert-function-factor);
+$alert-bottom-margin:       emCalc(20px);
+
+/* We use these to style the close buttons */
+$alert-close-color:         #333;
+$alert-close-position:      emCalc(5px);
+$alert-close-font-size:     emCalc(22px);
+$alert-close-opacity:       0.3;
+$alert-close-opacity-hover: 0.5;
+$alert-close-padding:       5px 4px 4px;
+
+/* We use this to control border radius */
+$alert-radius:              $global-radius;
+', :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.alerts.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 %>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+
+</div>
+

data/docs/components/block-grid.html.erb

@@ -0,0 +1,118 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Block Grid" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Block grids give you a way to evenly split contents of a list within the grid. If you wanted to create a row of 5 images or paragraphs that need to stay evenly spaced no matter the screen size, the block grid is for you.</h4>
+
+        <ul class="small-block-grid-2 large-block-grid-5">
+          <li><img src="../img/demos/demo1.png"></li>
+          <li><img src="../img/demos/demo2.png"></li>
+          <li><img src="../img/demos/demo3.png"></li>
+          <li><img src="../img/demos/demo4.png"></li>
+        </ul>
+
+        <hr>
+
+        <h3>Building With Predefined HTML Classes</h3>
+        <p>Block grids are made from a <code>ul.small-block-grid-#</code> or <code>ul.large-block-grid-#</code>. These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly.</p>
+
+        <p>These have a bit of flexibility since you have access to two separate grids between our built in 768px breakpoint. If you use the <code>small-block-grid</code> only, the grid will keep its spacing and configuration no matter the screen size. If you use <code>large-block-grid</code> only, the list items will stack on top of eachother for small devices. If you use both of those classes combined, you can control the configuration and layout separately for each breakpoint.</p>
+
+<%= code_example '
+<!-- Using only the small-block-grid -->
+<ul class="small-block-grid-2">
+  <li><img src="../img/demos/demo1.png"></li>
+  <li><img src="../img/demos/demo2.png"></li>
+  <li><img src="../img/demos/demo3.png"></li>
+  <li><img src="../img/demos/demo4.png"></li>
+</ul>
+
+<!-- Using only the large-block-grid -->
+<ul class="large-block-grid-4">
+  <li><img src="../img/demos/demo1.png"></li>
+  <li><img src="../img/demos/demo2.png"></li>
+  <li><img src="../img/demos/demo3.png"></li>
+  <li><img src="../img/demos/demo4.png"></li>
+</ul>
+
+<!-- Using both block grids together for different layouts -->
+<ul class="small-block-grid-2 large-block-grid-4">
+  <li><img src="../img/demos/demo1.png"></li>
+  <li><img src="../img/demos/demo2.png"></li>
+  <li><img src="../img/demos/demo3.png"></li>
+  <li><img src="../img/demos/demo4.png"></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 <strong>selected block grid from a custom package</strong>. These should be linked up following our default <a href="#">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Using The Mixin</h3>
+        <p>We've included SCSS mixins used to style block-grids. 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="#">_block-grid.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/block-grid";
+', :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. Since we don't have any media queries baked into the mixin itself, you can apply the styles at whatever breakpoint you want! Just change the configuration within each.</p>
+
+<%= code_example '
+<ul class="your-class-name">
+  <li><img src="../img/demos/demo1.png"></li>
+  <li><img src="../img/demos/demo2.png"></li>
+  <li><img src="../img/demos/demo3.png"></li>
+  <li><img src="../img/demos/demo4.png"></li>
+</ul>', :html %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your block-grid using our global mixin by including it on your custom class or ID in your own stylesheet. The mixin contains options configuring the block grid layout and margin on the fly. The global mixin looks like this:</p>
+
+<%= code_example '
+/* Mixin and configurable options */
+.your-class-name { @import block-grid($per-row, $spacing, $base-styles); }
+
+/* This controls how many elements will be on each row of the block grid. */
+/* Set this to whatever number you need, up to the max allowed in the variable */
+$per-row: false
+
+/* This controls how much space is between each item in the block grid */
+$spacing: $block-grid-default-spacing
+
+/* This controls whether or not base styles come through, set to false to leave out */
+/* This is handy for when you create multiple block-grids and want less CSS output repetition */
+$base-style: true
+', :css %>
+
+        <ul class="small-block-grid-5">
+          <li><img src="../img/demos/demo1.png"></li>
+          <li><img src="../img/demos/demo2.png"></li>
+          <li><img src="../img/demos/demo3.png"></li>
+          <li><img src="../img/demos/demo4.png"></li>
+          <li><img src="../img/demos/demo5.png"></li>
+        </ul>
+
+        <h5>Available SCSS Variables</h5>
+
+<%= code_example '
+/* We use this to control the maximum blocks and spacing */
+$block-grid-elements: 12;
+$block-grid-default-spacing: 10px;
+', :css %>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>
+
+
+
+