themepile-abstractio 1.0.4 → 4.1.7

data/docs/Capfile

@@ -0,0 +1,4 @@
+load 'deploy'
+# Uncomment if you are using Rails' asset pipeline
+    # load 'deploy/assets'
+load 'config/deploy' # remove this line to skip loading any of the default tasks

data/docs/Gemfile

@@ -0,0 +1,13 @@
+source 'https://rubygems.org'
+
+gem 'redcarpet'
+gem 'sprockets'
+gem 'foreman'
+gem 'stasis'
+gem 'sass', :require => false
+gem 'coderay'
+gem 'uglifier'
+
+group :production do
+  gem 'therubyracer'
+end

data/docs/Gemfile.lock

@@ -0,0 +1,45 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    coderay (1.0.9)
+    directory_watcher (1.4.1)
+    execjs (1.4.0)
+      multi_json (~> 1.0)
+    foreman (0.61.0)
+      thor (>= 0.13.6)
+    hike (1.2.1)
+    libv8 (3.3.10.4)
+    multi_json (1.6.1)
+    rack (1.5.2)
+    redcarpet (2.2.2)
+    sass (3.2.6)
+    slop (3.3.2)
+    sprockets (2.9.0)
+      hike (~> 1.2)
+      multi_json (~> 1.0)
+      rack (~> 1.0)
+      tilt (~> 1.1, != 1.3.0)
+    stasis (0.2.0)
+      directory_watcher (= 1.4.1)
+      slop (= 3.3.2)
+      tilt (= 1.3.3)
+    therubyracer (0.10.2)
+      libv8 (~> 3.3.10)
+    thor (0.17.0)
+    tilt (1.3.3)
+    uglifier (1.3.0)
+      execjs (>= 0.3.0)
+      multi_json (~> 1.0, >= 1.0.2)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  coderay
+  foreman
+  redcarpet
+  sass
+  sprockets
+  stasis
+  therubyracer
+  uglifier

data/docs/Procfile

@@ -0,0 +1,2 @@
+web: bundle exec rackup -p 4001
+stasis: bundle exec stasis -d 4000

data/docs/README.md

@@ -0,0 +1 @@
+From within the docs/ directory run `bundle install`. To get the docs to compile during development you'll want to run `bundle exec foreman start`. At that point you can access the docs by going to `http://localhost:4000`.

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 Abstractio</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://abstractio.themepile.co.uk/download.php" class="button expand" style="margin-bottom: 0;">Download Abstractio 4</a></p>
+
+<div class="jobs hide-for-small">
+  <h5>Awesome product jobs:</h5>
+  <script type="text/javascript" src="http://www.themepile.co.uk/jobs/widgets/jobs.js?limit=3&variation=abstractio-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 Abstractio</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://abstractio.themepile.co.uk/download.php" class="button expand" style="margin-bottom: 0;">Download Abstractio 4</a></p>
+
+<div class="jobs hide-for-small">
+  <h5>Awesome product jobs:</h5>
+  <script type="text/javascript" src="http://www.themepile.co.uk/jobs/widgets/jobs.js?limit=3&variation=abstractio-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 Abstractio Work?</h3>
+      <h5 class="subheader">Abstractio 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 AbstractioAssets
+
+    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://abstractio.themepile.co.uk/docs/assets"}).render
+assets = AbstractioAssets.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 Abstractio 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 Abstractio 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/abstractio/blob/master/scss/abstractio/_abstractio-global.scss">_abstractio-global.scss</a>, <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/components/_global.scss">_global.scss</a> and <a href="https://github.com/themepile/abstractio/blob/master/scss/abstractio/components/_alert-boxes.scss">_alert-boxes.scss</a> from Github and throw them into a Abstractio 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 "abstractio/abstractio-global", "abstractio/components/global", "abstractio/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>abstractio.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 Abstractio. The only reason you'll need to include <code>abstractio.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>abstractio.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 Abstractio JavaScript">Read how to install Abstractio JavaScript</a></p>
+
+        <p>Required Abstractio Library: <code>abstractio.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>
+