themepile-abstractio 1.0.4 → 4.1.7

data/docs/components/buttons.html.erb

@@ -0,0 +1,222 @@
+<% @side_nav = "buttons" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Buttons" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Buttons are a convenient tool when it comes to more traditional actions. To that end, Abstractio has a lot of easy to use button styles that you can customize or override to fit your needs.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <div class="row">
+          <div class="small-6 large-6 columns">
+            <a href="#" class="tiny button">.tiny.button</a><br>
+            <a href="#" class="small button">.small.button</a><br>
+            <a href="#" class="button">.button</a><br>
+          </div>
+          <div class="small-6 large-6 columns">
+            <a href="#" class="tiny button secondary">.tiny.secondary</a><br>
+            <a href="#" class="small button success radius">.small.success.radius</a><br>
+            <a href="#" class="button alert round disabled">.round.disabled</a><br>
+          </div>
+        </div>
+        <a href="#" class="large button expand">.large.button.expand</a>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build buttons in Abstractio 4: with our predefined HTML classes or with our structure and mixins. Building buttons using our predefined classes is simple, you'll need an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code> or <code>&lt;input&gt;</code> with a class of <code>.button</code>. This will create a default medium button. You can also use size, color and radius classes to control more of the style.</p>
+
+        <p>The class options:</p>
+        <ul class="disc">
+          <li>The size classes include: <code>.tiny, .small, .medium</code> or <code>.large</code></li>
+          <li>The color classes include: <code>.secondary, .alert</code> or <code>.success</code></li>
+          <li>The radius classes include: <code>.radius</code> or <code>.round</code></li>
+          <li>You can also add <code>.disabled</code> to any button and it will look and act disabled</li>
+        </ul>
+
+<%= code_example '
+<!-- Size Classes -->
+<a href="#" class="button">Default Button</a>
+<a href="#" class="tiny button">Tiny Button</a>
+<a href="#" class="small button">Small Button</a>
+<a href="#" class="large button">Large Button</a>
+
+<!-- Color Classes -->
+<a href="#" class="button secondary">Secondary Button</a>
+<a href="#" class="button success">Success Button</a>
+<a href="#" class="button alert">Alert Button</a>
+
+<!-- Radius Classes -->
+<a href="#" class="button radius">Radius Button</a>
+<a href="#" class="button round">Round Button</a>
+
+<!-- Disabled Class -->
+<a href="#" class="button disabled">Disabled Button</a>
+', :html %>
+
+        <p>You may chain one class from each group to build up desired default styles. For these styles to take effect, make sure you have the <strong>default Abstractio CSS package</strong> or that you've selected <strong>button from a custom package</strong>. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>
+
+        <hr>
+
+        <h3>Build with Mixins</h3>
+        <p>We've included SCSS mixins used to style buttons. 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/_buttons.scss">_buttons.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/buttons";
+', :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 '
+<a href="#" class="your-class-name">Button Text</a>
+', :html %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can quickly build an entire button using our global mixin by including it on your custom class or ID in your stylesheet. The global mixin will create the necessary style for the button. The global mixin looks like this:</p>
+
+<%= code_example '
+/* Using the default styles */
+.your-class-name { @include button; }
+', :css %>
+
+        <a href="#" class="button">Default Button</a>
+
+        <p>There are also <strong>six options</strong> you can customize on the fly when writing this mixin. These controls things like: background color, border color, text color, size and state. Setting any of these options to <strong>false</strong> will negate those styles.</p>
+
+<%= code_example '
+/* Using the available options */
+.your-class-name {
+  @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
+}
+
+/* This controls padding around the buttons. Use a variable or em value */
+$padding: $button-med
+
+/* This controls button color. Set to one of our variables or a custom hex value */
+$bg: $primary-color
+
+/* This controls button radius. Set to a variable, true/false, or custom px value */
+$radius: false
+
+/* This whether button is full-width. Set to true or false */
+$full-width: false
+
+/* This controls whether disabled styles are used. Set to true or false */
+$disabled: false
+
+/* This controls padding for inputs, they are a little different */
+$is-input: false
+', :css %>
+
+    <a href="#" class="custom buttony">Custom Button</a>
+
+        <h5>Base Mixin</h5>
+        <p>You also have access to a few internal mixins that can create parts of the button as needed. The base mixin will create a button base that only include structural styles.</p>
+
+<%= code_example '
+.your-class-name { @include button-base; }
+', :css %>
+
+    <a href="#" class="button-base">Button Base</a>
+
+        <h5>Size Mixin</h5>
+        <p>The size mixin will let you control the padding, which adjusts text size. You can also choose whether the button is full-width or an input button.</p>
+
+<%= code_example '
+.your-class-name {
+  @include button-base;
+  @include button-size($padding, $full-width, $is-input);
+}
+', :css %>
+
+    <a href="#" class="button-base size">Button Base &amp; Size</a>
+
+        <h5>Style Mixin</h5>
+        <p>The last internal mixin you have access to for buttons is the style mixin. This will help you style background color, text, border and radius.</p>
+
+<%= code_example '
+.your-class-name {
+  @include button-base;
+  @include button-size;
+  @include button-style($bg, $radius, $disabled);
+}
+', :css %>
+
+    <a href="#" class="button-base size style">Button Base, Size &amp; Style</a>
+
+          <h5>Inset Shadow, Border Radius &amp; Transition Mixin</h5>
+          <p>Sometimes you want to add a nice fancy shine to the edge of your button. And sometimes you want to make that shine look like it gets depressed upon tap or click. We've got you covered with our quick inset shadow mixin. You can use our radius mixin to quickly apply rounded corners or a transition mixin to give the button a nice zero-fade.</p>
+
+<%= code_example '
+.your-class-name {
+  @include button-base;
+  @include button-size;
+  @include button-style;
+  @include radius;
+  @include single-transition;
+  @include inset-shadow($active);
+}
+
+/* This controls whether or not you get the depressed look on tap/click. */
+/* Set to true or false, defaults to true. */
+$active: true
+', :css %>
+
+    <a href="#" class="button-base size style radius shine">Button Base, Size, Style &amp; Shine</a>
+
+        <h5>Default SCSS Variables</h5>
+<%= code_example '
+/* We use these to build padding for buttons. */
+$button-med:              emCalc(12px);
+$button-tny:              emCalc(7px);
+$button-sml:              emCalc(9px);
+$button-lrg:              emCalc(16px);
+
+/* We use this to control the display property. */
+$button-display:          inline-block;
+$button-margin-bottom:    emCalc(20px);
+
+/* We use these to control button text styles. */
+$button-font-color:       #fff;
+$button-font-color-alt:   #333;
+$button-font-med:         emCalc(16px);
+$button-font-tny:         emCalc(11px);
+$button-font-sml:         emCalc(13px);
+$button-font-lrg:         emCalc(20px);
+$button-font-weight:      bold;
+$button-font-align:       center;
+
+/* We use these to control various hover effects. */
+$button-function-factor:  10%;
+
+/* We use these to control button border styles. */
+$button-border-width:     1px;
+$button-border-style:     solid;
+$button-border-color:     darken($primary-color, $button-function-factor);
+
+/* We use this to set the default radius used throughout the core. */
+$button-radius:           $global-radius;
+
+/* We use this to set default opacity for disabled buttons. */
+$button-disabled-opacity: 0.6;
+', :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>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+
+</div>

data/docs/components/clearing.html.erb

@@ -0,0 +1,152 @@
+<% @side_nav = "js" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Clearing" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">Since Orbit isn't intended for variable-height content, we decided it would be a great idea to create a plugin that would help in that regard. Clearing makes it easy to create responsive lightboxes with any size image.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <ul class="clearing-thumbs" data-clearing>
+          <li><a class="th" href="../img/demos/demo1.jpg"><img data-caption="Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum." src="../img/demos/demo1-th.jpg"></a></li>
+          <li><a class="th" href="../img/demos/demo2.jpg"><img src="../img/demos/demo2-th.jpg"></a></li>
+          <li><a class="th" href="../img/demos/demo3.jpg"><img data-caption="Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus." src="../img/demos/demo3-th.jpg"></a></li>
+          <li><a class="th" href="../img/demos/demo4.jpg"><img src="../img/demos/demo4-th.jpg"></a></li>
+          <li><a class="th" href="../img/demos/demo5.jpg"><img data-caption="Integer posuere erat a ante venenatis dapibus posuere velit aliquet." src="../img/demos/demo5-th.jpg"></a></li>
+        </ul>
+
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <hr>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h3>Build Your Clearing Lightbox</h3>
+        <p>There is only one way to build a Clearing lightbox, using our predefined class and data-attribute structure. We've made it really easy: gather some images, decide on their order, and put them into a <code>&lt;ul class="clearing-thumbs"&gt;</code> of your choice. In order to get Clearing to build itself properly, you'll need to have Javascript properly included. We outline <a href="#js">Clearing JS</a> a bit further down the page.</p>
+
+        <p>Once you get your JS hooked up, you'll need to add <code>data-clearing</code> to your list container. Here's an example of the most basic markup needed:</p>
+
+<%= code_example '
+<ul class="clearing-thumbs" data-clearing>
+  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
+  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
+  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
+</ul>', :html %>
+
+        <h5>Styling the List</h5>
+        <p>We're using the <code>.th</code> class from Abstractio to style the thumbnails in the Clearing example at the top of the page. You can also use <code>@include thumb;</code> in SCSS to use those same styles.</p></aside>
+
+        <hr>
+
+        <h4>Start From a Featured Image</h4>
+        <p>Sometimes you don't want to show a gallery full of images on your site, but you want to open the gallery from a single image. By including all of your images in a <code>.clearing-feature</code> list and using <code>.clearing-featured-img</code> on the <code>&lt;li&gt;</code> of your choice, you'll be able to hide the rest of the images in the on-page gallery. If you want to show more than once, try using our <code>.hide</code> class to set the ones you don't want to <code>display: none;</code>.</p>
+
+<%= code_example '
+<ul class="clearing-thumbs clearing-feature" data-clearing>
+  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
+  <li class="clearing-featured-img"><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
+  <li><a href="path/to/your/img"><img src="path/to/your/img-th"></a></li>
+</ul>', :html %>
+
+        <div class="row">
+          <div class="large-12 columns">
+            <ul class="clearing-thumbs clearing-feature" data-clearing>
+              <li><a class="th" href="../img/demos/demo1.jpg"><img src="../img/demos/demo1-th.jpg"></a></li>
+              <li class="clearing-featured-img"><a class="th" href="../img/demos/demo2.jpg"><img src="../img/demos/demo2-th.jpg"></a></li>
+              <li><a class="th" href="../img/demos/demo3.jpg"><img src="../img/demos/demo3-th.jpg"></a></li>
+            </ul>
+          </div>
+        </div>
+
+        <hr>
+
+        <h4>Including Captions</h4>
+        <p>Another common use-case for Lightboxes is to include a caption per image. We've made this quick and easy by using data-attributes to hold the content. You'll just attach this attribute to the image it belongs to and voila!</code> Here's the code example:</p>
+
+<%= code_example '
+<ul class="clearing-thumbs" data-clearing>
+  <li><a href="path/to/your/img"><img data-caption="caption here..." src="path/to/your/img-th"></a></li>
+  <li><a href="path/to/your/img"><img data-caption="caption 2 here..." src="path/to/your/img-th"></a></li>
+  <li><a href="path/to/your/img"><img data-caption="caption 3 here..." src="path/to/your/img-th"></a></li>
+</ul>', :html %>
+
+        <div class="row">
+          <div class="large-12 columns">
+            <ul class="clearing-thumbs" data-clearing>
+              <li><a class="th" href="../img/demos/demo1.jpg"><img data-caption="caption here..." src="../img/demos/demo1-th.jpg"></a></li>
+              <li><a class="th" href="../img/demos/demo2.jpg"><img data-caption="caption 2 here..." src="../img/demos/demo2-th.jpg"></a></li>
+              <li><a class="th" href="../img/demos/demo3.jpg"><img data-caption="caption 3 here..." src="../img/demos/demo3-th.jpg"></a></li>
+            </ul>
+          </div>
+        </div>
+
+        <hr>
+
+        <h3>Available SCSS Variables</h3>
+        <p>We opted not to create mixins for this plugin because it relies on classes in the JS to work. These variables should give you the control you need to change styles as you see fit:</p>
+<%= code_example '
+/* We use these to set the background colors for parts of Clearing. */
+$clearing-bg:                           #111;
+$clearing-caption-bg:                   $clearing-bg;
+$clearing-carousel-bg:                  #111;
+$clearing-img-bg:                       $clearing-bg;
+
+/* We use these to style the close button */
+$clearing-close-color:                  #fff;
+$clearing-close-size:                   40px;
+
+/* We use these to style the arrows */
+$clearing-arrow-size:                   16px;
+$clearing-arrow-color:                  $clearing-close-color;
+
+/* We use these to style captions */
+$clearing-caption-font-color:           #fff;
+$clearing-caption-padding:              10px 30px;
+
+/* We use these to make the image and carousel height and style */
+$clearing-active-img-height:            75%;
+$clearing-carousel-height:              150px;
+$clearing-carousel-thumb-width:         175px;
+$clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255);
+', :css %>
+
+        <hr>
+
+        <h3>Using the JavaScript</h3>
+        <p>To make sure Clearing works properly, you'll need to include <code>abstractio.clearing.js</code> 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 Clearing plugin. Above your closing </body> 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>
+
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>As of Clearing 4.1.2, you can now pass in options to <code>data-options</code> when the clearing is initialized on the page.</p>
+
+<%= code_example "
+{
+  // specify the classes or IDs will close clearing when clicked.
+  close_selectors : '.clearing-close'
+}", :js %>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+
+</div>

data/docs/components/custom-forms.html.erb

@@ -0,0 +1,309 @@
+<% @side_nav = "forms" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Custom Forms" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">It's so crazy easy to create easy-to-style custom forms. It's practically a crime.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <form class="custom">
+          <div class="row">
+            <div class="large-4 columns">
+              <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
+              <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
+              <label for="radio1"><input name="radio1" type="radio" id="radio1" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
+            </div>
+            <div class="large-4 columns">
+              <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>
+              <label for="checkbox2"><input type="checkbox" id="checkbox2" CHECKED style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
+              <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3" style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
+            </div>
+            <div class="large-4 columns">
+              <label for="customDropdown1">Medium Example</label>
+              <select id="customDropdown1" class="medium">
+                <option DISABLED>This is a dropdown</option>
+                <option>This is another option</option>
+                <option>This is another option too</option>
+                <option>Look, a third option</option>
+              </select>
+            </div>
+          </div>
+        </form>
+
+        <hr>
+
+        <p>We've learned a lot from our previous iteration of custom forms. Thanks to awesome community contributions, we have even better custom forms. The new implementation is cleaner and more succinct, with less duplication of code. You just need to make sure to have the right JS hooked up for things to work properly; <a href="#js">learn more about that below</a>. The example above looks like this:</p>
+
+<%= code_example '
+<form class="custom">
+  <div class="row">
+    <div class="large-4 columns">
+      <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;" CHECKED><span class="custom radio checked"></span> Radio Button 1</label>
+      <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 2</label>
+      <label for="radio1"><input name="radio1" type="radio" id="radio1" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
+    </div>
+    <div class="large-4 columns">
+      <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>
+      <label for="checkbox2"><input type="checkbox" id="checkbox2" CHECKED style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
+      <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3" style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
+    </div>
+    <div class="large-4 columns">
+      <label for="customDropdown1">Medium Example</label>
+      <select id="customDropdown1" class="medium">
+        <option DISABLED>This is a dropdown</option>
+        <option>This is another option</option>
+        <option>This is another option too</option>
+        <option>Look, a third option</option>
+      </select>
+    </div>
+  </div>
+</form>', :html %>
+
+        <hr>
+
+        <h3>Building Custom Radio Inputs</h3>
+        <p>A radio input is a common form element that can look pretty ugly by default. We've simplified the look and feel with a custom <code>&lt;span&gt;</code> that you can customize if you need to. You can even use <code>&lt;input disabled&gt;</code> to make the radio inactive.</p>
+
+<%= code_example '
+<form class="custom">
+  <label for="radio1">
+    <input name="radio1" type="radio" id="radio1" style="display:none;">
+    <span class="custom radio"></span> Radio Button 1
+  </label>
+</form>', :html %>
+
+        <form class="custom">
+          <label for="radio1">
+            <input name="radio1" type="radio" id="radio1" style="display:none;">
+            <span class="custom radio"></span> Radio Button 1
+          </label>
+        </form>
+
+        <hr>
+
+        <h3>Building Custom Checkboxes</h3>
+        <p>The checkbox input is another very common form element. These are handy for lists of options that can be selected in multiples, things like finding out which Ke$ha song should be used for a room name. You can build these using the same <code>&lt;span&gt;</code> technique. You can even use <code>&lt;input disabled&gt;</code> to make the radio inactive.</p>
+
+<%= code_example '
+<form class="custom">
+  <label for="checkbox1">
+    <input type="checkbox" id="checkbox1" style="display: none;">
+    <span class="custom checkbox"></span> Label for Checkbox
+  </label>
+</form>', :html %>
+
+        <form class="custom">
+          <label for="checkbox1">
+            <input type="checkbox" id="checkbox1" style="display: none;">
+            <span class="custom checkbox"></span> Label for Checkbox
+          </label>
+        </form>
+
+        <hr>
+
+        <h3>Building Custom Selects</h3>
+        <p>Sometimes you need to let people select a single item from a long list of options. This is what <code>&lt;select&gt;</code> elements are for. We've taken these a step further by including our own custom style that looks a lot better than inconsistent browser defaults. You can set any of the <code>&lt;option&gt;</code> elements to <code>&lt;option disabled&gt;</code> to make them unable to select. Custom selects are built like you'd expect:</p>
+        <p>For those who may want to apply custom styles to a specific dropdown, any classes on the <code>&lt;select&gt;</code> element will be appended to the generated <code>&lt;div class=&quot;custom dropdown&quot;&gt;</code> element.</p>
+
+<%= code_example '
+<form class="custom">
+  <label for="customDropdown">Medium Example</label>
+  <select id="customDropdown">
+    <option DISABLED>This is a dropdown</option>
+    <option>This is another option</option>
+    <option>This is another option too</option>
+    <option>Look, a third option</option>
+  </select>
+</form>', :html %>
+
+        <form class="custom">
+          <label for="customDropdown2">Default Example</label>
+          <select id="customDropdown2">
+            <option DISABLED>This is a dropdown</option>
+            <option>This is another option</option>
+            <option>This is another option too</option>
+            <option>Look, a third option</option>
+          </select>
+        </form>
+
+        <h5>Various Sizes</h5>
+        <p>You have access to classes that will control the size of the select element. They'll span 100% of their container by default.</p>
+
+<%= code_example '
+<select id="customDropdown" class="small"></select>
+<select id="customDropdown" class="medium"></select>
+<select id="customDropdown" class="large"></select>
+', :html %>
+
+        <div class="row">
+          <div class="large-3 columns">
+            <form class="custom">
+              <label for="customDropdown3">Small Example</label>
+              <select id="customDropdown3" class="small">
+                <option DISABLED>This is a dropdown</option>
+                <option>This is another option</option>
+                <option>This is another option too</option>
+                <option>Look, a third option</option>
+              </select>
+            </form>
+          </div>
+        </div>
+        <div class="row">
+          <div class="large-9 columns">
+            <form class="custom">
+              <label for="customDropdown4">Medium Example</label>
+              <select id="customDropdown4" class="medium">
+                <option DISABLED>This is a dropdown</option>
+                <option>This is another option</option>
+                <option>This is another option too</option>
+                <option>Look, a third option</option>
+              </select>
+            </form>
+          </div>
+        </div>
+        <div class="row">
+          <div class="large-12 columns">
+            <form class="custom">
+              <label for="customDropdown5">Large Example</label>
+              <select id="customDropdown5" class="large">
+                <option DISABLED>This is a dropdown</option>
+                <option>This is another option</option>
+                <option>This is another option too</option>
+                <option>Look, a third option</option>
+              </select>
+            </form>
+          </div>
+        </div>
+
+        <hr>
+
+        <h3>Using the Pre/postfix Concept With Custom Forms</h3>
+        <p>We showed you how to use the prefix and postfix elements on our <a href="forms.html">forms documentation page</a>. You can employ that same technique here and make custom forms act as your slave to create some very complex forms.</p>
+
+<%= code_example '
+<form class="custom">
+  <div class="row">
+    <div class="large-6 columns">
+      <div class="row collapse">
+        <div class="large-9 small-9 columns">
+          <span class="prefix">mysubdomain</span>
+        </div>
+        <div class="large-3 small-3 columns">
+          <select>
+            <option>.com</option>
+            <option>.co</option>
+            <option>.ca</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div class="large-6 columns">
+      <div class="row collapse">
+        <div class="large-10 small-10 columns">
+        <select>
+          <option>google</option>
+          <option>yahoo</option>
+          <option>bing</option>
+        </select>
+        </div>
+        <div class="large-2 small-2 columns">
+          <span class="postfix">.com</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row collapse">
+    <div class="small-8 columns">
+      <select>
+        <option>google</option>
+        <option>yahoo</option>
+        <option>bing</option>
+      </select>
+    </div>
+    <div class="small-4 columns">
+      <a href="#" class="button postfix">Button</a>
+    </div>
+  </div>
+</form>', :html %>
+
+        <form class="custom">
+          <div class="row">
+            <div class="large-6 columns">
+              <div class="row collapse">
+                <div class="large-9 small-9 columns">
+                  <span class="prefix">mysubdomain</span>
+                </div>
+                <div class="large-3 small-3 columns">
+                  <select>
+                    <option>.com</option>
+                    <option>.co</option>
+                    <option>.ca</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="large-6 columns">
+              <div class="row collapse">
+                <div class="large-10 small-10 columns">
+                <select>
+                  <option>google</option>
+                  <option>yahoo</option>
+                  <option>bing</option>
+                </select>
+                </div>
+                <div class="large-2 small-2 columns">
+                  <span class="postfix">.com</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row collapse">
+            <div class="small-8 columns">
+              <select>
+                <option>google</option>
+                <option>yahoo</option>
+                <option>bing</option>
+              </select>
+            </div>
+            <div class="small-4 columns">
+              <a href="#" class="button postfix">Button</a>
+            </div>
+          </div>
+        </form>
+
+        <hr>
+
+        <h3><a name="js"></a>Using the JavaScript</h3>
+        <p>In order to get the custom forms to function, you'll need to include <code>abstractio.forms.js</code>. You'll also need to make sure to include <code>zepto.js</code> and <code>abstractio.js</code> above the forms 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.forms.js</code></p>
+
+        <h5>Optional JavaScript Configuration</h5>
+
+        <p>Custom Form options can only be passed in during initialization at this time. However, you can bind to the <i>open</i>, <i>change</i>, and <i>click</i> events depending on the form elements.</p>
+
+<%= code_example "
+{
+  disable_class: 'no-custom'
+}", :js %>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+
+</div>