modularis 0.0.1

data/docs/_sidebar-components.html.erb

@@ -0,0 +1,115 @@
+<div class="docs section-container accordion" data-section data-options="one_up: false">
+  <section class="section <%= @side_nav == 'using' ? 'active': '' %>">
+    <p class="title"><a href="#">Using Modularis</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a href="../">Get Started</a></li>
+        <li><a href="../javascript.html">Javascript</a></li>
+        <li><a href="../sass.html">Sass</a></li>
+        <li><a href="../rails.html">Rails</a></li>
+        <li><a href="../media-queries.html">Media Queries</a></li>
+        <li><a class="<%= @page_title == 'Visibility Classes' ? 'active': '' %>" href="visibility.html">Visibility Classes</a></li>
+        <li><a href="../rtl.html">Right-to-Left Support</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section <%= @side_nav == 'grid' ? 'active': '' %>">
+    <p class="title"><a href="#">Grid</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a class="<%= @page_title == 'Grid' ? 'active': '' %>" href="grid.html">Grid</a></li>
+        <li><a class="<%= @page_title == 'Block Grid' ? 'active': '' %>" href="block-grid.html">Block Grid</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section <%= @side_nav == 'nav' ? 'active': '' %>">
+    <p class="title"><a href="#">Navigation</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a class="<%= @page_title == 'Pagination' ? 'active': '' %>" href="pagination.html">Pagination</a></li>
+        <li><a class="<%= @page_title == 'Side Nav' ? 'active': '' %>" href="side-nav.html">Side Nav</a></li>
+        <li><a class="<%= @page_title == 'Sub Nav' ? 'active': '' %>" href="sub-nav.html">Sub Nav</a></li>
+        <li><a class="<%= @page_title == 'Top Bar' ? 'active': '' %>" href="top-bar.html">Top Bar</a></li>
+        <li><a class="<%= @page_title == 'Breadcrumbs' ? 'active': '' %>" href="breadcrumbs.html">Breadcrumbs</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section <%= @side_nav == 'buttons' ? 'active': '' %>">
+    <p class="title"><a href="#">Buttons</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a class="<%= @page_title == 'Buttons' ? 'active': '' %>" href="buttons.html">Buttons</a></li>
+        <li><a class="<%= @page_title == 'Button Groups' ? 'active': '' %>" href="button-groups.html">Button Groups</a></li>
+        <li><a class="<%= @page_title == 'Dropdown Buttons' ? 'active': '' %>" href="dropdown-buttons.html">Dropdown Buttons</a></li>
+        <li><a class="<%= @page_title == 'Split Buttons' ? 'active': '' %>" href="split-buttons.html">Split Buttons</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section <%= @side_nav == 'forms' ? 'active': '' %>">
+    <p class="title"><a href="#">Forms</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a class="<%= @page_title == 'Forms' ? 'active': '' %>" href="forms.html">Forms</a></li>
+        <li><a class="<%= @page_title == 'Custom Forms' ? 'active': '' %>" href="custom-forms.html">Custom Forms</a></li>
+        <li><a class="<%= @page_title == 'Switch' ? 'active': '' %>" href="switch.html">Switch</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section <%= @side_nav == 'type' ? 'active': '' %>">
+    <p class="title"><a href="#">Typography</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a class="<%= @page_title == 'Typography' ? 'active': '' %>" href="type.html">Type</a></li>
+        <li><a class="<%= @page_title == 'Inline Lists' ? 'active': '' %>" href="inline-lists.html">Inline Lists</a></li>
+        <li><a class="<%= @page_title == 'Labels' ? 'active': '' %>" href="labels.html">Labels</a></li>
+        <li><a class="<%= @page_title == 'Keystrokes' ? 'active': '' %>" href="keystrokes.html">Keystrokes</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section <%= @side_nav == 'css' ? 'active': '' %>">
+    <p class="title"><a href="#">CSS Components</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a class="<%= @page_title == 'Global' ? 'active': '' %>" href="global.html">Global Styles</a></li>
+        <li><a class="<%= @page_title == 'Alert Boxes' ? 'active': '' %>" href="alert-boxes.html">Alert Boxes</a></li>
+        <li><a class="<%= @page_title == 'Panels' ? 'active': '' %>" href="panels.html">Panels</a></li>
+        <li><a class="<%= @page_title == 'Pricing Tables' ? 'active': '' %>" href="pricing-tables.html">Pricing Tables</a></li>
+        <li><a class="<%= @page_title == 'Progress Bars' ? 'active': '' %>" href="progress-bars.html">Progress Bars</a></li>
+        <li><a class="<%= @page_title == 'Tables' ? 'active': '' %>" href="tables.html">Tables</a></li>
+        <li><a class="<%= @page_title == 'Thumbnails' ? 'active': '' %>" href="thumbnails.html">Thumbnails</a></li>
+        <li><a class="<%= @page_title == 'Flex Video' ? 'active': '' %>" href="flex-video.html">Flex Video</a></li>
+        <li class="divider"></li>
+        <li><a target="_blank" style="font-style: italic" class="<%= @page_title == 'Kitchen Sink' ? 'active': '' %>" href="kitchen-sink.html">Kitchen Sink</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section <%= @side_nav == 'js' ? 'active': '' %>">
+    <p class="title"><a href="#">Javascript</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a class="<%= @page_title == 'Clearing' ? 'active': '' %>" href="clearing.html">Clearing</a></li>
+        <li><a class="<%= @page_title == 'Dropdown' ? 'active': '' %>" href="dropdown.html">Dropdown</a></li>
+        <li><a class="<%= @page_title == 'Joyride' ? 'active': '' %>" href="joyride.html">Joyride</a></li>
+        <li><a class="<%= @page_title == 'Magellan' ? 'active': '' %>" href="magellan.html">Magellan</a></li>
+        <li><a class="<%= @page_title == 'Orbit' ? 'active': '' %>" href="orbit.html">Orbit</a></li>
+        <li><a class="<%= @page_title == 'Reveal' ? 'active': '' %>" href="reveal.html">Reveal</a></li>
+        <li><a class="<%= @page_title == 'Sections' ? 'active': '' %>" href="section.html">Section</a></li>
+        <li><a class="<%= @page_title == 'Tooltips' ? 'active': '' %>" href="tooltips.html">Tooltips</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section <%= @page_title == 'FAQ' ? 'active': '' %>">
+    <p class="title"><a href="../faq.html">FAQ</a></p>
+  </section>
+  <section class="section <%= @page_title == 'Support' ? 'active': '' %>">
+    <p class="title"><a href="../support.html">Support</a></p>
+  </section>
+</div>
+
+<p><a href="http://modularis.themepile.com/download.php" class="button expand" style="margin-bottom: 0;">Download Modularis 4</a></p>
+
+<div class="jobs hide-for-small">
+  <h5>Awesome product jobs:</h5>
+  <script type="text/javascript" src="http://www.themepile.com/jobs/widgets/jobs.js?limit=3&variation=modularis-sidebar"></script>
+  <a id="via" href="http://themepilejobs.com">via&nbsp;<span class="jobs-link">ZURBjobs</span></a>
+</div>

data/docs/_sidebar.html.erb

@@ -0,0 +1,115 @@
+<div class="docs section-container accordion" data-section data-options="one_up: false">
+  <section class="section <%= @side_nav == 'using' ? 'active': '' %>">
+    <p class="title"><a href="#">Using Modularis</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a class="<%= @page_title == 'Getting Started' ? 'active': '' %>" href="index.html">Get Started</a></li>
+        <li><a class="<%= @page_title == 'Javascript' ? 'active': '' %>" href="javascript.html">Javascript</a></li>
+        <li><a class="<%= @page_title == 'Sass' ? 'active': '' %>" href="sass.html">Sass</a></li>
+        <li><a class="<%= @page_title == 'Rails' ? 'active': '' %>" href="rails.html">Rails</a></li>
+        <li><a class="<%= @page_title == 'Media Queries' ? 'active': '' %>" href="media-queries.html">Media Queries</a></li>
+        <li><a href="components/visibility.html">Visibility Classes</a></li>
+        <li><a class="<%= @page_title == 'Right-to-Left Support' ? 'active': '' %>" href="rtl.html">Right-to-Left Support</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section">
+    <p class="title"><a href="#">Grid</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a href="components/grid.html">Grid</a></li>
+        <li><a href="components/block-grid.html">Block Grid</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section">
+    <p class="title"><a href="#">Navigation</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a href="components/pagination.html">Pagination</a></li>
+        <li><a href="components/side-nav.html">Side Nav</a></li>
+        <li><a href="components/sub-nav.html">Sub Nav</a></li>
+        <li><a href="components/top-bar.html">Top Bar</a></li>
+        <li><a href="components/breadcrumbs.html">Breadcrumbs</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section">
+    <p class="title"><a href="#">Buttons</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a href="components/buttons.html">Buttons</a></li>
+        <li><a href="components/button-groups.html">Button Groups</a></li>
+        <li><a href="components/dropdown-buttons.html">Dropdown Buttons</a></li>
+        <li><a href="components/split-buttons.html">Split Buttons</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section">
+    <p class="title"><a href="#">Forms</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a href="components/forms.html">Forms</a></li>
+        <li><a href="components/custom-forms.html">Custom Forms</a></li>
+        <li><a href="components/switch.html">Switch</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section">
+    <p class="title"><a href="#">Typography</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a href="components/type.html">Type</a></li>
+        <li><a href="components/inline-lists.html">Inline Lists</a></li>
+        <li><a href="components/labels.html">Labels</a></li>
+        <li><a href="components/keystrokes.html">Keystrokes</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section">
+    <p class="title"><a href="#">CSS Components</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a href="components/global.html">Global Styles</a></li>
+        <li><a href="components/alert-boxes.html">Alert Boxes</a></li>
+        <li><a href="components/panels.html">Panels</a></li>
+        <li><a href="components/pricing-tables.html">Pricing Tables</a></li>
+        <li><a href="components/progress-bars.html">Progress Bars</a></li>
+        <li><a href="components/tables.html">Tables</a></li>
+        <li><a href="components/thumbnails.html">Thumbnails</a></li>
+        <li><a href="components/flex-video.html">Flex Video</a></li>
+        <li class="divider"></li>
+        <li><a target="_blank" style="font-style: italic" href="components/kitchen-sink.html">Kitchen Sink</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section">
+    <p class="title"><a href="#">Javascript</a></p>
+    <div class="content">
+      <ul class="side-nav">
+        <li><a href="components/clearing.html">Clearing</a></li>
+        <li><a href="components/dropdown.html">Dropdown</a></li>
+        <li><a href="components/joyride.html">Joyride</a></li>
+        <li><a href="components/magellan.html">Magellan</a></li>
+        <li><a href="components/orbit.html">Orbit</a></li>
+        <li><a href="components/reveal.html">Reveal</a></li>
+        <li><a href="components/section.html">Section</a></li>
+        <li><a href="components/tooltips.html">Tooltips</a></li>
+      </ul>
+    </div>
+  </section>
+  <section class="section <%= @page_title == 'FAQ' ? 'active': '' %>">
+    <p class="title"><a href="faq.html">FAQ</a></p>
+  </section>
+  <section class="section <%= @page_title == 'Support' ? 'active': '' %>">
+    <p class="title"><a href="support.html">Support</a></p>
+  </section>
+</div>
+
+<p><a href="http://modularis.themepile.com/download.php" class="button expand" style="margin-bottom: 0;">Download Modularis 4</a></p>
+
+<div class="jobs hide-for-small">
+  <h5>Awesome product jobs:</h5>
+  <script type="text/javascript" src="http://www.themepile.com/jobs/widgets/jobs.js?limit=3&variation=modularis-sidebar"></script>
+  <a id="via" href="http://themepilejobs.com">via&nbsp;<span class="jobs-link">ZURBjobs</span></a>
+</div>

data/docs/changelog.html.erb

@@ -0,0 +1,33 @@
+<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>
+
+    <%= render 'CHANGELOG.md' %>
+
+    <hr>
+
+    <div class="panel">
+      <h3>Where Does Modularis Work?</h3>
+      <h5 class="subheader">Modularis 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.html">Browser Support &raquo;</a> <a class="secondary button" href="faq.html">Frequently Asked Questions &raquo;</a>
+    </div>
+
+
+  </div>
+</div>
+
+
+
+
+
+
+
+

data/docs/compile.rb

@@ -0,0 +1,34 @@
+require 'bundler'
+Bundler.require
+require 'fileutils'
+
+class ModularisAssets
+
+    BUNDLES = [
+      "vendor/custom.modernizr.js", "vendor/zepto.js", "vendor/jquery.js", 
+      "docs.js", "docs.css", "normalize.css"
+    ]
+
+    def initialize
+      @env = Sprockets::Environment.new
+      @env.append_path File.expand_path('../../scss', __FILE__)
+      @env.append_path File.expand_path('../css', __FILE__)
+      @env.append_path File.expand_path('../../js', __FILE__)
+      @env.append_path File.expand_path('../js', __FILE__)
+    end
+
+    def compile
+      assets_path = "public/assets"
+      FileUtils.mkdir_p("#{assets_path}/vendor")
+      BUNDLES.each do |bundle|
+        pth = "#{assets_path}/#{bundle}"
+        File.delete(pth) if File.exists?(pth)
+        code = @env[bundle].to_s
+        File.open(pth, "w") {|f| f.puts code}
+      end
+    end
+end
+
+Stasis.new(File.expand_path('.'), File.expand_path('./public'), {:asset_path => "http://modularis.themepile.com/docs/assets"}).render
+assets = ModularisAssets.new
+assets.compile

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

@@ -0,0 +1,204 @@
+<% @side_nav = "css" %>
+
+<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 Modularis 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 Modularis 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="../sass.html">extension installed</a> or grab <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/_modularis-global.scss">_modularis-global.scss</a>, <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_global.scss">_global.scss</a> and <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_alert-boxes.scss">_alert-boxes.scss</a> from Github and throw them into a Modularis 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 "modularis/modularis-global", "modularis/components/global", "modularis/components/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>modularis.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 Modularis. The only reason you'll need to include <code>modularis.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>modularis.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 Modularis JavaScript">Read how to install Modularis JavaScript</a></p>
+
+        <p>Required Modularis Library: <code>modularis.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,132 @@
+<% @side_nav = "grid" %>
+
+<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-4">
+          <li><img class="th" src="../img/demos/demo1.jpg"></li>
+          <li><img class="th" src="../img/demos/demo2.jpg"></li>
+          <li><img class="th" src="../img/demos/demo3.jpg"></li>
+          <li><img class="th" src="../img/demos/demo4.jpg"></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 each other 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 Modularis 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="../index.html">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="../sass.html">extension installed</a> or grab <a href="https://github.com/themepile/modularis/tree/master/scss/modularis/components">_modularis-global.scss</a>, <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_global.scss">_global.scss</a> and <a href="https://github.com/themepile/modularis/tree/master/scss/modularis/components">_block-grid.scss</a> from Github and throw them into a modularis 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 "modularis/modularis-global", "modularis/components/global", "modularis/components/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 { @include 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.jpg"></li>
+          <li><img src="../img/demos/demo2.jpg"></li>
+          <li><img src="../img/demos/demo3.jpg"></li>
+          <li><img src="../img/demos/demo4.jpg"></li>
+          <li><img src="../img/demos/demo5.jpg"></li>
+        </ul>
+
+        <h5>Clearing Block Grid Rows</h5>
+        <p>We have this built into the CSS, but you'll need to add a bit of code if you want your block grid to change layout between breakpoints. If you don't use this, it will inherit whatever you put in the smallest media query. This code looks for the <code>n+1</code> of the grid so that it clears properly. That code looks like this:</p>
+
+<%= code_example '
+.your-small-class-name > li { clear: none !important; }
+', :css %>
+
+        <p><strong>Note:</strong> If you are using the same class across breakpoints, your mixin should override this and you won't need it. If you want to control the layout using different classes, use the above snippet.</p>
+
+        <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;
+
+/* Enables media queries for block-grid classes. Set to false if writing semantic HTML. */
+$block-grid-media-queries: true
+', :css %>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>
+
+
+
+