themepile-abstractio 1.0.4 → 4.1.7

data/docs/components/tooltips.html.erb

@@ -0,0 +1,76 @@
+<% @side_nav = "js" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Tooltips" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Tooltips are a quick way to provide <span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span> on a term or action on a page.</h4>
+
+        <hr>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <a name="tooltips"></a>
+        <h4>Building With HTML Classes</h4>
+        <p>Tooltips work cross browser and cross platform and are easily added to a page with a simple markup and class structure. You can apply the <strong>has-tip</strong> class to any element.</p>
+
+        <p>By default, the tooltip takes the width of the element that it is applied to, but you can override this behavior by applying a <strong>data-width</strong> attribute to the target element. The tooltip takes on the content of the targets <strong>title</strong> attribute.</p>
+
+        <p>The tooltips can be positioned on the <span data-tooltip class="has-tip" data-width="210" title="I'm on bottom and the default position.">"tip-bottom"</span>, which is the default position, <span data-tooltip class="has-tip tip-top noradius" data-width="210" title="I'm on the top and I'm not rounded!">"tip-top" (hehe)</span>, <span data-tooltip="left" class="has-tip tip-left" data-width="90" title="I'm on the left!">"tip-left"</span>, or <span data-tooltip="right" class="has-tip tip-right" data-width="120" title="I'm on the right!">"tip-right"</span> of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.</p>
+
+<%= code_example '
+<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
+', :html %>
+
+        <p>Available class options:</p>
+        <ul class="disc">
+          <li><code>tip-top</code>: Align the tip above the element you attach it to.</li>
+          <li><code>tip-bottom</code>: Align the tip below the element you attach it to.</li>
+          <li><code>tip-left</code>: Align the tip to the left the element you attach it to.</li>
+          <li><code>tip-right</code>: Align the tip to the right the element you attach it to.</li>
+        </ul>
+
+        <hr>
+
+        <h3>Using the Javascript</h3>
+        <p>You'll need to include <code>abstractio.tooltips.js</code> to make sure everything works properly. You'll also need to make sure to include <code>zepto.js</code> and <code>abstractio.js</code> above the 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 Abstractio JavaScript">Read how to install Abstractio JavaScript</a></p>
+
+        <p>Required Abstractio Library: <code>abstractio.tooltips.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 '
+<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">...</span>
+', :html %>
+
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>Tooltips now support <code>data-options</code> configuration. You can use this functionality to disable tooltips selectively by defining <code>data-options="disable-for-touch: true"</code> on your tip target.</p>
+
+    <%= code_example "
+{
+  selector : '.has-tip',
+  additionalInheritableClasses : [],
+  tooltipClass : '.tooltip',
+  disable-for-touch: false,
+  tipTemplate : function (selector, content) {
+    return '<span data-selector=\"' + selector + '\" class=\"'
+      + Abstractio.libs.tooltips.settings.tooltipClass.substring(1)
+      + '\">' + content + '<span class=\"nub\"></span></span>';
+  }
+}", :js %>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/top-bar.html.erb

@@ -0,0 +1,300 @@
+<% @side_nav = "nav" %>
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Top Bar" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h1><%= @page_title %></h1>
+        <h4 class="subheader">The Abstractio Top Bar gives you a great way to display a complex navigation bar on small or large screens.</h4>
+
+        <nav class="top-bar">
+          <ul class="title-area">
+            <!-- Title Area -->
+            <li class="name">
+              <h1><a href="/">Top Bar</a></h1>
+            </li>
+            <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
+            <li class="toggle-topbar menu-icon"><a href=""><span>Menu</span></a></li>
+          </ul>
+
+          <section class="top-bar-section">
+            <ul class="left">
+              <li class="divider"></li>
+              <li class="has-dropdown"><a href="<%= features_path %>">Item 1</a>
+
+                <ul class="dropdown">
+                  <li><label>Level One</label></li>
+                  <li><a href="#">Sub-item 1</a></li>
+                  <li><a href="#">Sub-item 2</a></li>
+                  <li class="divider"></li>
+                  <li><a href="#">Sub-item 3</a></li>
+                  <li class="has-dropdown"><a href="#">Sub-item 4</a>
+
+                    <ul class="dropdown">
+                      <li><label>Level Two</label></li>
+                      <li class="has-dropdown"><a href="#">Sub-item 1</a>
+
+                        <ul class="dropdown">
+                          <li><label>Level Three</label></li>
+                          <li class="has-dropdown"><a href="#">Sub-item 1</a>
+
+                            <ul class="dropdown">
+                              <li><label>Level Four</label></li>
+                              <li><a href="#">Sub-item 1</a></li>
+                            </ul>
+                          </li>
+                          <li><a href="#">Sub-item 2</a></li>
+                          <li><a href="#">Sub-item 3</a></li>
+                          <li class="divider"></li>
+                          <li><a href="#">Sub-item 4</a></li>
+                        </ul>
+                      </li>
+                      <li><a href="#">Sub-item 2</a></li>
+                      <li><a href="#">Sub-item 3</a></li>
+                      <li><a href="#">Sub-item 4</a>
+                    </ul>
+                  </li>
+                  <li><a href="#">Sub-item 5</a></li>
+                </ul>
+              </li>
+              <li class="divider"></li>
+            </ul>
+            <!-- Right Nav Section -->
+            <ul class="right">
+              <li class="divider hide-for-small"></li>
+              <li><a href="#">Item 2</a></li>
+            </ul>
+          </section>
+        </nav>
+
+        <hr>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h3>Build With HTML Classes</h3>
+        <p>The top bar is a pretty complex piece of magical UI goodness, which makes it really difficult to create a mixin from it. We rely on many presentational classes to accomplish the styles and there's a lot happening in the JS.</p>
+
+        <h5>Basic Needs</h5>
+        <p>The top bar has four main elements, three of which are needed for proper functionality: <code>ul.title-area</code>, a <code>ul class="right/left</code> element enclosed in a <code>section class="top-bar-section"</code>, and the <code>li.toggle-topbar</code> element that will expand the menu in the mobile layout. You can leave out the li class="name" as long as you include the .toggle-topbar element.</p>
+
+        <h5>Positioning the Bar</h5>
+        <p>The top bar is built with a single <code>nav</code> element with a class of <code>top-bar</code>. It will take on full-browser width by default. To make the top bar stay fixed as you scroll, wrap it in <code>div class="fixed"</code>. If you want your navigation to be set to your grid width, wrap it in <code>div class="contain-to-grid"</code>. You may use <code>fixed</code> and <code>contain-to-grid</code> together.</p>
+
+        <h5>Building the Nav</h5>
+        <p>When building your bar it is good to be aware of how many links you're going to need in it so you can customize your responsive breakpoint accordingly. Build your navigation with <code>ul.left</code> and/or <code>ul.right</code> depending where you want links. To add items, simply include <code>li</code> elements with and anchor inside them for your top-level. To build a dropdown menu, you'll need to add <code>has-dropdown</code> to the <code>li</code> and include <code>ul.dropdown</code> after that anchor. Add a class of <code>active</code> to mark the current page.</p>
+
+        <h5>Other Elements</h5>
+        <p>To make this navigation nice and flexible, we've included patterns for elements like buttons, inputs and dividers. To create dividers between your navigation, just add an empty <code>li.divider</code> and you'll get some separation. You can use a small Abstractio button in the nav, just include <code>has-form</code> as a class for its parent li. You can include two different input types: search and text. To use these, add a class of search to the parent li.</p>
+
+        <h5>Sticky Top Bar</h5>
+        <p>You may also wrap your top bar in <code>div class="contain-to-grid sticky"</code> and put it anywhere within your markup. When the navigation hits the top of the browser, it will act like the fixed top bar and stick to the top as users continue to scroll. <strong>Note:</strong> If you are using Scss, you can control the default <code>sticky</code> class by adjusting the <code>$topbar-sticky-class</code> variable. <strong>Make sure the JS variable for <code>stickyClass</code> matches whatever class you use in the variable.</strong></p>
+
+<%= code_example '
+<nav class="top-bar">
+  <ul class="title-area">
+    <!-- Title Area -->
+    <li class="name">
+      <h1><a href="#">Top Bar Title </a></h1>
+    </li>
+    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
+    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
+  </ul>
+
+  <section class="top-bar-section">
+    <!-- Left Nav Section -->
+    <ul class="left">
+      <li class="divider"></li>
+      <li class="active"><a href="#">Main Item 1</a></li>
+      <li class="divider"></li>
+      <li><a href="#">Main Item 2</a></li>
+      <li class="divider"></li>
+      <li class="has-dropdown"><a href="#">Main Item 3</a>
+
+        <ul class="dropdown">
+          <li class="has-dropdown"><a href="#">Dropdown Level 1a</a>
+
+            <ul class="dropdown">
+              <li><label>Dropdown Level 2 Label</label></li>
+              <li><a href="#">Dropdown Level 2a</a></li>
+              <li><a href="#">Dropdown Level 2b</a></li>
+              <li class="has-dropdown"><a href="#">Dropdown Level 2c</a>
+
+                <ul class="dropdown">
+                  <li><label>Dropdown Level 3 Label</label></li>
+                  <li><a href="#">Dropdown Level 3a</a></li>
+                  <li><a href="#">Dropdown Level 3b</a></li>
+                  <li class="divider"></li>
+                  <li><a href="#">Dropdown Level 3c</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Dropdown Level 2d</a></li>
+              <li><a href="#">Dropdown Level 2e</a></li>
+              <li><a href="#">Dropdown Level 2f</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Dropdown Level 1b</a></li>
+          <li><a href="#">Dropdown Level 1c</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Dropdown Level 1d</a></li>
+          <li><a href="#">Dropdown Level 1e</a></li>
+          <li><a href="#">Dropdown Level 1f</a></li>
+          <li class="divider"></li>
+          <li><a href="#">See all &rarr;</a></li>
+        </ul>
+      </li>
+      <li class="divider"></li>
+    </ul>
+
+    <!-- Right Nav Section -->
+    <ul class="right">
+      <li class="divider hide-for-small"></li>
+      <li class="has-dropdown"><a href="#">Main Item 4</a>
+
+        <ul class="dropdown">
+          <li><label>Dropdown Level 1 Label</label></li>
+          <li class="has-dropdown"><a href="#" class="">Dropdown Level 1a</a>
+
+            <ul class="dropdown">
+              <li><a href="#">Dropdown Level 2a</a></li>
+              <li><a href="#">Dropdown Level 2b</a></li>
+              <li class="has-dropdown"><a href="#">Dropdown Level 2c</a>
+
+                <ul class="dropdown">
+                  <li><a href="#">Dropdown Level 3a</a></li>
+                  <li><a href="#">Dropdown Level 3b</a></li>
+                  <li><a href="#">Dropdown Level 3c</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Dropdown Level 2d</a></li>
+              <li><a href="#">Dropdown Level 2e</a></li>
+              <li><a href="#">Dropdown Level 2f</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Dropdown Level 1b</a></li>
+          <li><a href="#">Dropdown Level 1c</a></li>
+          <li class="divider"></li>
+          <li><label>Dropdown Level 1 Label</label></li>
+          <li><a href="#">Dropdown Level 1d</a></li>
+          <li><a href="#">Dropdown Level 1e</a></li>
+          <li><a href="#">Dropdown Level 1f</a></li>
+          <li class="divider"></li>
+          <li><a href="#">See all &rarr;</a></li>
+        </ul>
+      </li>
+      <li class="divider"></li>
+      <li class="has-form">
+        <form>
+          <div class="row collapse">
+            <div class="small-8 columns">
+              <input type="text">
+            </div>
+            <div class="small-4 columns">
+              <a href="#" class="alert button">Search</a>
+            </div>
+          </div>
+        </form>
+      </li>
+      <li class="divider show-for-small"></li>
+      <li class="has-form">
+        <a class="button" href="#">Button!</a>
+      </li>
+    </ul>
+  </section>
+</nav>', :html %>
+
+      <h4>Available SCSS Variables</h4>
+      <p>We do include SCSS variable to help you control some of the styles for the top bar. Overall the styles are written mobile first, so they are much easier to override than the previous iteration of the top bar.</p>
+
+<%= code_example '
+/* Background color for the top bar */
+$topbar-bg:                            #111;
+
+/* Height and margin */
+$topbar-height:                        45px;
+$topbar-margin-bottom:                 emCalc(30px);
+
+/* Control Input height for top bar */
+$topbar-input-height:                  2.45em;
+
+/* Controlling the styles for the title in the top bar */
+$topbar-title-weight:                  bold;
+$topbar-title-font-size:               emCalc(17px);
+
+/* Style the top bar dropdown elements */
+$topbar-dropdown-bg:                   #222;
+$topbar-dropdown-link-color:           #fff;
+$topbar-dropdown-link-bg:              lighten($topbar-bg, 5%);
+$topbar-dropdown-toggle-size:          5px;
+$topbar-dropdown-toggle-color:         #fff;
+$topbar-dropdown-toggle-alpha:         0.5;
+
+/* Set the link colors and styles for top-level nav */
+$topbar-link-color:                    #fff;
+$topbar-link-color-hover:              #fff;
+$topbar-link-color-active:             #fff;
+$topbar-link-weight:                   bold;
+$topbar-link-font-size:                emCalc(13px);
+$topbar-link-hover-lightness:          -30%; /* Darken by 30% */
+$topbar-link-bg-hover:                 darken($topbar-bg, 3%);
+$topbar-link-bg-active:                darken($topbar-bg, 3%);
+
+$topbar-dropdown-label-color:          #555;
+$topbar-dropdown-label-text-transform: uppercase;
+$topbar-dropdown-label-font-weight:    bold;
+$topbar-dropdown-label-font-size:      emCalc(10px);
+
+/* Top menu icon styles */
+$topbar-menu-link-transform:           uppercase;
+$topbar-menu-link-font-size:           emCalc(13px);
+$topbar-menu-link-weight:              bold;
+$topbar-menu-link-color:               #fff;
+$topbar-menu-icon-color:               #fff;
+$topbar-menu-link-color-toggled:       #888;
+$topbar-menu-icon-color-toggled:       #888;
+
+/* Transitions and breakpoint styles */
+$topbar-transition-speed:              300ms;
+$topbar-breakpoint:                    emCalc(940px); /* Change to 9999px for always mobile layout */
+$topbar-media-query:                   "only screen and (min-width:"#{$topbar-breakpoint}")";
+
+/* Divider Styles */
+$topbar-divider-border-bottom:         solid 1px lighten($topbar-bg, 10%);
+$topbar-divider-border-top:            solid 1px darken($topbar-bg, 10%);
+
+// Sticky Class
+$topbar-sticky-class:                  ".sticky";', :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>_abstractio-global.scss</strong>.</p>
+
+        <hr>
+
+        <h3>Using the JavaScript</h3>
+        <p>You'll need to include <code>abstractio.topbar.js</code> to get the topbar to play nice. You'll also need to make sure to include <code>zepto.js</code> and <code>abstractio.js</code> above the topbar 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 Abstractio JavaScript">Read how to install Abstractio JavaScript</a></p>
+
+        <p>Required Abstractio Library: <code>abstractio.topbar.js</code></p>
+
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>Top bar now supports <code>data-options</code> configuration.</p>
+
+    <%= code_example "
+{
+  index : 0,
+  stickyClass : 'sticky',
+  custom_back_text: true, // Set this to false and it will pull the top level link name as the back text
+  back_text: 'Back', // Define what you want your custom back text to be if custom_back_text: true
+  init : false
+}", :js %>
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>

data/docs/components/type.html.erb

@@ -0,0 +1,396 @@
+<% @side_nav = "type" %>
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Typography" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Abstractio 4 typography is built with ems, making it easier to fine-tune your type across different breakpoints. By default, we include a single breakpoint in typography sizes and styles, but you can add more if you'd like.</h4>
+
+        <p>We're no longer depending on modular scale in the core of Abstractio. We made an effort with this release to be dependancy free other than Sass. This way people can use whatever framework and gems they want on top of Abstractio. We'll still use <a href="http://compass-style.org">Compass</a>.</p>
+
+        <hr>
+
+      </div>
+    </div>
+
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h1>h1. This is a very large header.</h1>
+        <h2>h2. This is a large header.</h2>
+        <h3>h3. This is a medium header.</h3>
+        <h4>h4. This is a moderate header.</h4>
+        <h5>h5. This is a small header.</h5>
+        <h6>h6. This is a tiny header.</h6>
+
+<%= code_example '
+<h1>h1. This is a very large header.</h1>
+<h2>h2. This is a large header.</h2>
+<h3>h3. This is a medium header.</h3>
+<h4>h4. This is a moderate header.</h4>
+<h5>h5. This is a small header.</h5>
+<h6>h6. This is a tiny header.</h6>
+', :html %>
+
+        <hr>
+
+        <h1 class="subheader">h1.subheader</h1>
+        <h2 class="subheader">h2.subheader</h2>
+        <h3 class="subheader">h3.subheader</h3>
+        <h4 class="subheader">h4.subheader</h4>
+        <h5 class="subheader">h5.subheader</h5>
+        <h6 class="subheader">h6.subheader</h6>
+
+<%= code_example '
+<h1 class="subheader">h1.subheader</h1>
+<h2 class="subheader">h2.subheader</h2>
+<h3 class="subheader">h3.subheader</h3>
+<h4 class="subheader">h4.subheader</h4>
+<h5 class="subheader">h5.subheader</h5>
+<h6 class="subheader">h6.subheader</h6>
+', :html %>
+
+        <hr>
+
+        <h1>h1. <small>Small segment header.</small></h1>
+        <h2>h2. <small>Small segment header.</small></h2>
+        <h3>h3. <small>Small segment header.</small></h3>
+        <h4>h4. <small>Small segment header.</small></h4>
+        <h5>h5. <small>Small segment header.</small></h5>
+        <h6>h6. <small>Small segment header.</small></h6>
+
+<%= code_example '
+<h1>h1. <small>Small segment header.</small></h1>
+<h2>h2. <small>Small segment header.</small></h2>
+<h3>h3. <small>Small segment header.</small></h3>
+<h4>h4. <small>Small segment header.</small></h4>
+<h5>h5. <small>Small segment header.</small></h5>
+<h6>h6. <small>Small segment header.</small></h6>
+', :html %>
+
+
+        <hr>
+
+        <p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap <code>&lt;strong&gt;</code> around type to <strong>make it bold!</strong>. You can also you <code>&lt;em&gt;</code> to <em>italicize your words</em>.</p>
+
+<%= code_example '
+<p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap <strong> around type to <strong>make it bold!</strong>. You can also you <em> to <em>italicize your words</em>.</p>
+', :html %>
+
+        <hr>
+
+        <h3>Links</h3>
+        <p>Links are very standard, and the <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0">color is preset</a> to the Abstractio primary color.</p>
+
+<%= code_example '
+<p>Links are very standard, and the <a href="#">color is preset</a> to the Abstractio primary color.</p>
+', :html %>
+
+        <hr>
+
+        <h3>Lists</h3>
+        <p>Lists are helpful for, well, lists of things.</p>
+
+        <div class="row">
+          <div class="large-4 columns">
+            <h6>ul.disc</h6>
+            <ul class="disc">
+              <li>List item with a much longer description or more content.</li>
+              <li>List item</li>
+              <li>List item
+                <ul>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                </ul>
+              </li>
+              <li>List item</li>
+              <li>List item</li>
+              <li>List item</li>
+            </ul>
+          </div>
+
+          <div class="large-4 columns">
+            <h6>ul.circle</h6>
+            <ul class="circle">
+              <li>List item with a much longer description or more content.</li>
+              <li>List item</li>
+              <li>List item
+                <ul>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                </ul>
+              </li>
+              <li>List item</li>
+              <li>List item</li>
+              <li>List item</li>
+            </ul>
+          </div>
+
+          <div class="large-4 columns">
+            <h6>ul.square</h6>
+            <ul class="square">
+              <li>List item with a much longer description or more content.</li>
+              <li>List item</li>
+              <li>List item
+                <ul>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                </ul>
+              </li>
+              <li>List item</li>
+              <li>List item</li>
+              <li>List item</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="large-4 columns">
+            <h6>ul.no-bullet</h6>
+            <ul class="no-bullet">
+              <li>List item with a much longer description or more content.</li>
+              <li>List item</li>
+              <li>List item
+                <ul>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                </ul>
+              </li>
+              <li>List item</li>
+            </ul>
+          </div>
+          <div class="large-4 columns">
+            <h6>Ordered Lists</h6>
+            <ol>
+              <li>List Item 1</li>
+              <li>List Item 2
+                <ol>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                  <li>Nested List Item</li>
+                </ol>
+              </li>
+              <li>List Item 3</li>
+            </ol>
+          </div>
+          <div class="large-4 columns">
+            <h6>Definition Lists</h6>
+            <dl>
+              <dt>Definition Title</dt>
+              <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
+            </dl>
+          </div>
+        </div>
+
+<%= code_example '
+<!-- Use .circle or .square to change the style of the bullets -->
+<ul class="disc">
+  <li>List item with a much longer description or more content.</li>
+  <li>List item</li>
+  <li>List item
+    <ul>
+      <li>Nested List Item</li>
+      <li>Nested List Item</li>
+      <li>Nested List Item</li>
+    </ul>
+  </li>
+  <li>List item</li>
+  <li>List item</li>
+  <li>List item</li>
+</ul>
+
+<!-- Sometimes you don\'t want bullets at all -->
+<ul class="no-bullet">
+  <li>List item with a much longer description or more content.</li>
+  <li>List item</li>
+  <li>List item
+    <ul>
+      <li>Nested List Item</li>
+      <li>Nested List Item</li>
+      <li>Nested List Item</li>
+    </ul>
+  </li>
+  <li>List item</li>
+</ul>
+
+<!-- Ordered lists are great for lists that need order, duh -->
+<ol>
+  <li>List Item 1</li>
+  <li>List Item 2</li>
+  <li>List Item 3</li>
+</ol>
+
+<!-- Definition lists are great for small block of copy that describe the header -->
+<dl>
+  <dt>Definition List</dt>
+  <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
+</dl>
+', :html %>
+
+        <hr>
+
+        <a name="blockquotes"></a>
+        <h3>Blockquotes</h3>
+        <p>Sometimes other people say smart things, and you may want to mention that through a blockquote callout. We've got you covered.</p>
+
+        <blockquote>I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.<cite>Isaac Asimov</cite></blockquote>
+
+<%= code_example '
+<blockquote>I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.<cite>Isaac Asimov</cite></blockquote>
+', :html %>
+
+        <hr>
+
+        <h3>V-Cards</h3>
+        <p>Here's a handy microformat-friendly list to <em>address</em> all your needs.</p>
+
+        <ul class="vcard">
+          <li class="fn">Gaius Baltar</li>
+          <li class="street-address">123 Colonial Ave.</li>
+          <li class="locality">Caprica City</li>
+          <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
+          <li class="email"><a href="#">g.baltar@cmail.com</a></li>
+        </ul>
+
+<%= code_example '
+<ul class="vcard">
+  <li class="fn">Gaius Baltar</li>
+  <li class="street-address">123 Colonial Ave.</li>
+  <li class="locality">Caprica City</li>
+  <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
+  <li class="email"><a href="#">g.baltar@cmail.com</a></li>
+</ul>
+', :html %>
+
+        <hr>
+
+        <h3>Print Styles</h3>
+        <p>Abstractio includes print styles developed by HTML5 Boilerplate to give you some basic print-specific styles. These are activated when you print through a media query. It includes:</p>
+
+        <ul class="disc">
+          <li>Clearing out backgrounds, box shadows, and text shadows</li>
+          <li>Appending link URLs after the anchor text</li>
+          <li>Bordering blockquotes and pre elements</li>
+          <li>Page cleanup and window minimization</li>
+        </ul>
+
+        <p>On top of that, Abstractio includes a couple of simple classes you can use to control elements printing, or not printing. Simply attach <code>.print-only</code> to an element to only show when printing, and <code>.hide-on-print</code> to hide something when printing.</p>
+
+        <hr>
+
+        <h3>Available SCSS Variables</h3>
+        <p>We've got a ton of variables for you to use to customize your typography.</p>
+
+<%= code_example '
+/* We use these to control header font styles */
+$header-font-family:                   "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+$header-font-weight:                   bold;
+$header-font-style:                    normal;
+$header-font-color:                    #222;
+$header-line-height:                   1.4;
+$header-top-margin:                    .2em;
+$header-bottom-margin:                 .5em;
+$header-text-rendering:                optimizeLegibility;
+
+/* We use these to control header font sizes */
+$h1-font-size:                         emCalc(44px);
+$h2-font-size:                         emCalc(37px);
+$h3-font-size:                         emCalc(27px);
+$h4-font-size:                         emCalc(23px);
+$h5-font-size:                         emCalc(18px);
+$h6-font-size:                         1em;
+
+/* These control how subheaders are styled. */
+$subheader-line-height:                1.4;
+$subheader-font-color:                 lighten($header-font-color, 30%);
+$subheader-font-weight:                300;
+$subheader-top-margin:                 .2em;
+$subheader-bottom-margin:              .5em;
+
+/* A general <small> styling */
+$small-font-size:                      60%;
+$small-font-color:                     lighten($header-font-color, 30%);
+
+/* We use these to style paragraphs */
+$paragraph-font-family:                inherit;
+$paragraph-font-weight:                normal;
+$paragraph-font-size:                  1em;
+$paragraph-line-height:                1.6;
+$paragraph-margin-bottom:              emCalc(20px);
+$paragraph-aside-font-size:            emCalc(14px);
+$paragraph-aside-line-height:          1.35;
+$paragraph-aside-font-style:           italic;
+$paragraph-text-rendering:             optimizeLegibility;
+
+/* We use these to style <code> tags */
+$code-color:                           darken($alert-color, 15%);
+$code-font-family:                     Consolas, "Liberation Mono", Courier, monospace;
+$code-font-weight:                     bold;
+
+/* We use these to style anchors */
+$anchor-text-decoration:               none;
+$anchor-font-color:                    $primary-color;
+$anchor-font-color-hover:              darken($primary-color, 5%);
+
+/* We use these to style the <hr> element */
+$hr-border-width:                      1px;
+$hr-border-style:                      solid;
+$hr-border-color:                      #ddd;
+$hr-margin:                            emCalc(20px);
+
+/* We use these to style lists */
+$list-style-position:                  outside;
+$list-side-margin:                     emCalc(18px);
+$definition-list-header-weight:        bold;
+$definition-list-header-margin-bottom: .3em;
+$definition-list-margin-bottom:        emCalc(12px);
+
+/* We use these to style blockquotes */
+$blockquote-font-color:                lighten($header-font-color, 30%);
+$blockquote-padding:                   emCalc(9px) emCalc(20px) 0 emCalc(19px);
+$blockquote-border:                    1px solid #ddd;
+$blockquote-cite-font-size:            emCalc(13px);
+$blockquote-cite-font-color:           lighten($header-font-color, 20%);
+$blockquote-cite-link-color:           $blockquote-cite-font-color;
+
+/* Acronym styles */
+$acronym-underline:                    1px dotted #ddd;
+
+/* We use these to control padding and margin */
+$microformat-padding:                  emCalc(10px) emCalc(12px);
+$microformat-margin:                    0 0 emCalc(20px) 0;
+
+/* We use these to control the border styles */
+$microformat-border-width:             1px;
+$microformat-border-style:             solid;
+$microformat-border-color:             #ddd;
+
+/* We use these to control full name font styles */
+$microformat-fullname-font-weight:     bold;
+$microformat-fullname-font-size:       emCalc(15px);
+
+/* We use this to control the summary font styles */
+$microformat-summary-font-weight:      bold;
+
+/* We use this to control abbr padding */
+$microformat-abbr-padding:             0 emCalc(1px);
+
+/* We use this to control abbr font styles */
+$microformat-abbr-font-weight:         bold;
+$microformat-abbr-font-decoration:     none;
+', :css %>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>