RubyGems - uniform-ui - Versions diffs - 1.0 → 2.2.1 - Mend

uniform-ui 1.0 → 2.2.1

Files changed (139) hide show

checksums.yaml +5 -5
data/lib/assets/config/manifest.js +1 -0
data/lib/assets/javascripts/uniform/checkbox.js +31 -0
data/lib/assets/javascripts/uniform/component.js +42 -0
data/lib/assets/javascripts/uniform/dom-helpers.js +136 -0
data/lib/assets/javascripts/uniform/dropdown.js +149 -0
data/lib/assets/javascripts/uniform/floating-label.js +54 -0
data/lib/assets/javascripts/uniform/icons.js +16 -0
data/lib/assets/javascripts/uniform/modal.js +103 -0
data/lib/assets/javascripts/uniform/resizer.js +43 -0
data/lib/assets/javascripts/uniform/select.js +235 -0
data/lib/assets/javascripts/uniform/tooltip.js +120 -0
data/lib/assets/javascripts/uniform-es5.js +1 -0
data/lib/assets/javascripts/uniform-jquery.js +124 -0
data/lib/assets/javascripts/uniform.js +17 -0
data/lib/assets/stylesheets/uniform/base.scss +3 -0
data/lib/assets/stylesheets/uniform/components/alert.scss +72 -0
data/lib/assets/stylesheets/uniform/components/buttons.scss +219 -0
data/{vendor → lib}/assets/stylesheets/uniform/components/card.scss +33 -25
data/lib/assets/stylesheets/uniform/components/container.scss +19 -0
data/{vendor → lib}/assets/stylesheets/uniform/components/dropdown.scss +8 -4
data/lib/assets/stylesheets/uniform/components/form/checkbox-collection.scss +103 -0
data/lib/assets/stylesheets/uniform/components/form/checkbox.scss +58 -0
data/lib/assets/stylesheets/uniform/components/form/floating-label.scss +64 -0
data/lib/assets/stylesheets/uniform/components/form/input-group.scss +56 -0
data/lib/assets/stylesheets/uniform/components/form.scss +143 -0
data/lib/assets/stylesheets/uniform/components/grid.scss +158 -0
data/lib/assets/stylesheets/uniform/components/label.scss +26 -0
data/lib/assets/stylesheets/uniform/components/loaders.scss +80 -0
data/{vendor → lib}/assets/stylesheets/uniform/components/modal.scss +26 -4
data/lib/assets/stylesheets/uniform/components/nav.scss +124 -0
data/lib/assets/stylesheets/uniform/components/row.scss +69 -0
data/lib/assets/stylesheets/uniform/components/select.scss +122 -0
data/lib/assets/stylesheets/uniform/components/table.scss +127 -0
data/lib/assets/stylesheets/uniform/components/thumb.scss +41 -0
data/lib/assets/stylesheets/uniform/components/tooltip.scss +63 -0
data/lib/assets/stylesheets/uniform/components.scss +11 -0
data/{vendor → lib}/assets/stylesheets/uniform/defaults.scss +7 -4
data/lib/assets/stylesheets/uniform/functions.scss +31 -0
data/lib/assets/stylesheets/uniform/helpers/border.scss +19 -0
data/lib/assets/stylesheets/uniform/helpers/colors.scss +23 -0
data/lib/assets/stylesheets/uniform/helpers/margin.scss +27 -0
data/lib/assets/stylesheets/uniform/helpers/padding.scss +9 -0
data/lib/assets/stylesheets/uniform/helpers/position.scss +13 -0
data/lib/assets/stylesheets/uniform/helpers/sizes.scss +38 -0
data/{vendor → lib}/assets/stylesheets/uniform/helpers/text.scss +86 -73
data/lib/assets/stylesheets/uniform/helpers.scss +127 -0
data/lib/assets/stylesheets/uniform/mixins.scss +116 -0
data/lib/assets/stylesheets/uniform/print/grid.scss +50 -0
data/lib/assets/stylesheets/uniform/variables.scss +72 -0
data/lib/assets/stylesheets/uniform-print.scss +1 -0
data/lib/assets/stylesheets/uniform.scss +11 -0
data/lib/uniform/version.rb +3 -0
data/lib/uniform.rb +15 -0
metadata +87 -95
data/.gitignore +0 -2
data/CHANGELOG.md +0 -27
data/CNAME +0 -1
data/Gemfile +0 -8
data/Gemfile.lock +0 -40
data/LICENSE +0 -22
data/README.md +0 -35
data/Rakefile +0 -74
data/index.html +0 -251
data/lib/uniform/rails/engine.rb +0 -8
data/lib/uniform/rails.rb +0 -6
data/lib/uniform/ui.rb +0 -1
data/preview/alerts.html.erb +0 -1
data/preview/buttons.html.erb +0 -62
data/preview/cards.html.erb +0 -23
data/preview/colors.html.erb +0 -22
data/preview/dropdown.html.erb +0 -1
data/preview/form.html.erb +0 -233
data/preview/grid.html.erb +0 -304
data/preview/helpers.html.erb +0 -225
data/preview/index.html.erb +0 -77
data/preview/labels.html.erb +0 -1
data/preview/layout.html.erb +0 -63
data/preview/loaders.html.erb +0 -83
data/preview/modal.html.erb +0 -1
data/preview/nav.html.erb +0 -77
data/preview/preview.scss +0 -76
data/preview/rows.html.erb +0 -36
data/preview/select.html.erb +0 -1
data/preview/tables.html.erb +0 -1
data/preview/tabs.html.erb +0 -17
data/preview/tiles.html.erb +0 -1
data/preview/tooltip.erb +0 -1
data/preview.css +0 -0
data/site/alerts.html +0 -157
data/site/alerts.html copy +0 -133
data/site/buttons.html +0 -286
data/site/cards.html +0 -177
data/site/colors.html +0 -275
data/site/dropdown.html +0 -157
data/site/dropdown.html copy +0 -141
data/site/form.html +0 -369
data/site/grid.html +0 -716
data/site/helpers.html +0 -1008
data/site/index.html +0 -251
data/site/labels.html +0 -157
data/site/layout.html +0 -313
data/site/loaders.html +0 -233
data/site/logo.png +0 -0
data/site/modal.html +0 -157
data/site/nav.html +0 -229
data/site/preview.css +0 -1
data/site/preview.js +0 -59
data/site/rows.html +0 -190
data/site/select.html +0 -157
data/site/tables.html +0 -157
data/site/tabs.html +0 -171
data/site/tiles.html +0 -157
data/site/tiles.html copy +0 -109
data/site/tooltip +0 -157
data/site/uniform.css +0 -1
data/uniform.gemspec +0 -22
data/vendor/assets/stylesheets/uniform/base.scss +0 -2
data/vendor/assets/stylesheets/uniform/components/alert.scss +0 -27
data/vendor/assets/stylesheets/uniform/components/buttons.scss +0 -212
data/vendor/assets/stylesheets/uniform/components/form.scss +0 -290
data/vendor/assets/stylesheets/uniform/components/grid.scss +0 -225
data/vendor/assets/stylesheets/uniform/components/label.scss +0 -63
data/vendor/assets/stylesheets/uniform/components/loaders.scss +0 -82
data/vendor/assets/stylesheets/uniform/components/nav.scss +0 -197
data/vendor/assets/stylesheets/uniform/components/row.scss +0 -92
data/vendor/assets/stylesheets/uniform/components/select.scss +0 -98
data/vendor/assets/stylesheets/uniform/components/table.scss +0 -83
data/vendor/assets/stylesheets/uniform/components/tabs.scss +0 -45
data/vendor/assets/stylesheets/uniform/components/tile.scss +0 -20
data/vendor/assets/stylesheets/uniform/components/tooltip.scss +0 -46
data/vendor/assets/stylesheets/uniform/helpers/colors.scss +0 -37
data/vendor/assets/stylesheets/uniform/helpers/margin.scss +0 -44
data/vendor/assets/stylesheets/uniform/helpers/padding.scss +0 -74
data/vendor/assets/stylesheets/uniform/helpers/sizes.scss +0 -31
data/vendor/assets/stylesheets/uniform/helpers.scss +0 -124
data/vendor/assets/stylesheets/uniform/mixins.scss +0 -77
data/vendor/assets/stylesheets/uniform/variables.scss +0 -36
data/vendor/assets/stylesheets/uniform.scss +0 -9

data/index.html DELETED Viewed

@@ -1,251 +0,0 @@
-<!DOCTYPE html>
-<head>
-    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
-    <title>Uniform</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css" type="text/css" media="screen">
-    <link rel="stylesheet" href="/site/uniform.css" type="text/css" media="screen" title="no title" charset="utf-8">
-    <link rel="stylesheet" href="/site/preview.css" type="text/css" media="screen" charset="utf-8">
-</head>
-<body>
-<div class="side-nav">
-    <div class="pad">
-        <a href="/">
-        <img src="/site/logo.png" class="block">
-        </a>
-    </div>
-    <div class="uniformNav vertical">
-        <div class="nav">
-                <a href="/site/helpers.html">
-                    Helpers
-                </a>
-                <a href="/site/colors.html">
-                    Colors
-                </a>
-                <a href="/site/grid.html">
-                    Grid
-                </a>
-                <a href="/site/buttons.html">
-                    Buttons
-                </a>
-                <a href="/site/tables.html">
-                    Tables
-                        <span class="uniformLabel yellow">todo</span>
-                </a>
-                <a href="/site/cards.html">
-                    Cards
-                </a>
-                <a href="/site/rows.html">
-                    Rows
-                </a>
-                <a href="/site/form.html">
-                    Form
-                </a>
-                <a href="/site/loaders.html">
-                    Loaders
-                </a>
-                <a href="/site/nav.html">
-                    Nav
-                </a>
-                <a href="/site/tabs.html">
-                    Tabs
-                </a>
-                <a href="/site/tiles.html">
-                    Tiles
-                        <span class="uniformLabel yellow">todo</span>
-                </a>
-                <a href="/site/labels.html">
-                    Labels
-                        <span class="uniformLabel yellow">todo</span>
-                </a>
-                <a href="/site/alerts.html">
-                    Alerts
-                        <span class="uniformLabel yellow">todo</span>
-                </a>
-                <a href="/site/dropdown.html">
-                    Dropdown
-                        <span class="uniformLabel yellow">todo</span>
-                </a>
-                <a href="/site/modal.html">
-                    Modal
-                        <span class="uniformLabel yellow">todo</span>
-                </a>
-                <a href="/site/select.html">
-                    Select
-                        <span class="uniformLabel yellow">todo</span>
-                </a>
-                <a href="/site/tooltip.html">
-                    Tooltip
-                        <span class="uniformLabel yellow">todo</span>
-                </a>
-        </div>
-    </div>
-</div>
-<div class="main-content overflow-hidden">
-    <div class="text-center margin-top-more">
-    <img src="site/logo.png" width="451" height="101">
-    <p class="large">Sass components and helpers for building a UI.</p>
-</div>
-<div class="section">
-    <h1>Installation</h1>
-    <p>Add to your gem file<br/><code>gem 'uniform-ui'</code></p>
-    <p>Execute:<br/><code>$ bundle</code></p>
-    <p>Or install it yourself:<br/><code>$ gem install uniform-ui</code></p>
-    <p>Include the css library in your asset pipeline.<br/><code>@import 'uniform';</code></p>
-    <p>Include the javascript library in your asset pipeline.<br/><code>//= require uniform</code></p>
-    <h3>Scope Components</h3>
-    <p>Optionally, you can scope the components you want included in your assets.</p>
-    <pre class=''>// css
-@import &#39;uniform&#39;;
-// - OR -
-@import &#39;uniform/base&#39;;
-@import &#39;uniform/helpers&#39;;
-@import &#39;uniform/defaults&#39;;
-@import &#39;uniform/helpers/text&#39;;
-@import &#39;uniform/helpers/colors&#39;;
-@import &#39;uniform/helpers/sizes&#39;;
-@import &#39;uniform/helpers/margin&#39;;
-@import &#39;uniform/helpers/padding&#39;;
-@import &#39;uniform/components/tile&#39;;
-@import &#39;uniform/components/label&#39;;
-@import &#39;uniform/components/form&#39;;
-@import &#39;uniform/components/buttons&#39;;
-@import &#39;uniform/components/select&#39;;
-@import &#39;uniform/components/card&#39;;
-@import &#39;uniform/components/grid&#39;;
-@import &#39;uniform/components/table&#39;;
-@import &#39;uniform/components/row&#39;;
-@import &#39;uniform/components/tabs&#39;;
-@import &#39;uniform/components/tooltip&#39;;
-@import &#39;uniform/components/dropdown&#39;;
-@import &#39;uniform/components/alert&#39;;
-@import &#39;uniform/components/loaders&#39;;
-@import &#39;uniform/components/nav&#39;;
-@import &#39;uniform/components/modal&#39;;
-// javascript
-//= require uniform
-// - OR -
-//= require uniform/base
-//= require uniform/select</pre>
-</div>
-<div class="section">
-    <h1>Philosophy</h1>
-    <h3>Don't use ID's</h3>
-    <p>Unless you have to, and even then, think twice. HTML Id's make things not
-        reusable. There should only be one instance of an id in a document</p>
-    <h3>Use Semanitc Classes Presentationaly :)</h3>
-    <p>
-        Here's a decent post on OOCSS (Object Oriented CSS) as it relates to
-        semantic vs presentational classes:
-        <a href="http://blackfalcon.roughdraft.io/5255648-oocss-v-ooscss-sasscast-show-notes">OOCSS v OOSCSS</a>
-    <p>
-        <strong>TL;DR:</strong> Semantic classes explain what that element is.
-        Presentational classes explain what the shoud look like.
-    </p>
-    <p>
-        <code>class="property-list"</code> vs <code>class="ul-list col-sm-4"</code>
-    </p>
-    <p>
-        Some of us don't want to touch css files (preference: presentational),
-        and some of us live there (preference: semantic). Honestly, the art of
-        good ui development is balancing semantic and presentational classes.
-        Each taken to their extreme is bad.
-    </p>
-    <p>
-        Structure html so that the semantic class is first and presentational
-        classes follow.
-    </p>
-    <p><code>class="property-list ul-list col-sm-4"</code></p>
-    <h3>Save the Namespace, save the world</h3>
-    <p>Don't make presentational classes that will clash with elements that could mean something else. I'm looking at you Bootsrap!</p>
-    <p><code>class="label"</code> should be <code>class="text-label"</code></p>
-    <h3>camelCase vs train-case</h3>
-    <p>Use camelCase for class names for components, not train-case or snake_case.</p>
-    <p>Use tran-case for class names for helpers or modifiers.</p>
-    <h3>Wrappers and Containers</h3>
-    <p>
-        Both <code>wrapper</code> and <code>container</code> can be used as class names
-        for an element that goes around a component. The difference is nuanced.
-        <code>wrapper</code> should be used to wrap a <strong>single</strong> element for a formatting purpose.
-        A <code>container</code> should be used to wrap <strong>multiple</strong> elements.
-    </p>
-</div>
-</div>
-<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
-<script
-  src="https://code.jquery.com/jquery-1.11.3.min.js"
-  integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
-  crossorigin="anonymous"></script>
-<script src="/site/preview.js"></script>
-</body>

data/lib/uniform/rails/engine.rb DELETED Viewed

@@ -1,8 +0,0 @@
-require 'bourbon'
-require 'neat'
-module Uniform
-  module Rails
-    class Engine < ::Rails::Engine
-    end
-  end
-end

data/lib/uniform/rails.rb DELETED Viewed

@@ -1,6 +0,0 @@
-require 'uniform/rails/engine'
-module Uniform
-  module Rails
-  end
-end

data/lib/uniform/ui.rb DELETED Viewed

	@@ -1 +0,0 @@
1	- require 'uniform/rails'

data/preview/alerts.html.erb DELETED Viewed

	@@ -1 +0,0 @@
1	- TODO

data/preview/buttons.html.erb DELETED Viewed

@@ -1,62 +0,0 @@
-<div class="section">
-    <h1>Buttons</h1>
-    <p>Mix and match styles to make the right button, all colors are available as well.</p>
-    <p><code><%= CGI::escapeHTML "<a href='#' class='uniformButton'></a>" %></code></p>
-    <table class="uniformTable" cellspacing="0" cellpadding="0">
-        <tr>
-            <th></th>
-            <th>Normal</th>
-            <th><code>.green</code></th>
-            <th><code>.blue</code></th>
-            <th><code>.red</code></th>
-            <th><code>.white</code></th>
-            <th><code>.gray</code></th>
-        </tr>
-        <tr>
-            <th></th>
-            <td><a class="uniformButton">Button</a></td>
-            <td><a class="uniformButton green">Button</a></td>
-            <td><a class="uniformButton blue">Button</a></td>
-            <td><a class="uniformButton red">Button</a></td>
-            <td><a class="uniformButton white">Button</a></td>
-            <td><a class="uniformButton gray">Button</a></td>
-        </tr>
-        <% [
-            ['hover, :hover', 'hover'],
-            ['active, :active', 'active'],
-            ['disabled, :disabled', 'disabled'],
-            'small',
-            'large',
-            'warn',
-            'block',
-            'outline',
-        ].each do |klass| %>
-            <% klass = [klass, klass] if !klass.is_a?(Array) %>
-            <tr>
-                <th><code>.<%= klass[0] %></code></th>
-                <td><a class="uniformButton <%= klass[1] %>">Button</a></td>
-                <td><a class="uniformButton green <%= klass[1] %>">Button</a></td>
-                <td><a class="uniformButton blue <%= klass[1] %>">Button</a></td>
-                <td><a class="uniformButton red <%= klass[1] %>">Button</a></td>
-                <td><a class="uniformButton white <%= klass[1] %>">Button</a></td>
-                <td><a class="uniformButton gray <%= klass[1] %>">Button</a></td>
-            </tr>
-        <% end %>
-        <tr>
-            <th><code>.outline</code></th>
-            <td class="bg-gray"><a class="uniformButton outline">Button</a></td>
-            <td class="bg-gray"><a class="uniformButton green outline">Button</a></td>
-            <td class="bg-gray"><a class="uniformButton blue outline">Button</a></td>
-            <td class="bg-gray"><a class="uniformButton red outline">Button</a></td>
-            <td class="bg-gray"><a class="uniformButton white outline">Button</a></td>
-            <td class="bg-gray"><a class="uniformButton gray outline">Button</a></td>
-        </tr>
-    </table>
-    <h3 class="margin-top-more">uniformButtonGroup</h3>
-    <div class="uniformButtonGroup">
-        <a href="#">Link 1</a>
-        <a href="#">Link 2</a>
-        <a href="#">Link 3</a>
-    </div>
-</div>

data/preview/cards.html.erb DELETED Viewed

@@ -1,23 +0,0 @@
-<div class="section">
-    <h1>Cards</h1>
-    <div class="grid">
-        <div class="col-6">
-            <div class="uniformCard">
-                <div class="uniformCard-header">
-                    <span class="title">Sample Card</span>
-                </div>
-                <div class="uniformCard-body">Put Content In Here</div>
-            </div>
-        </div>
-        <div class="col-6">
-            <% html_block do %>
-<div class="uniformCard">
-    <div class="uniformCard-header">
-        <span class="title">Sample Card</span>
-    </div>
-    <div class="uniformCard-body">Put Content In Here</div>
-</div>
-            <% end %>
-        </div>
-    </div>
-</div>

data/preview/colors.html.erb DELETED Viewed

@@ -1,22 +0,0 @@
-<div class="section">
-    <h1>Colors</h1>
-    <table class="uniformTable">
-        <thead class="dark">
-            <tr>
-                <th></th>
-                <th>sass</th>
-                <th>class</th>
-            </tr>
-        </thead>
-    <% %w(green blue red gray yellow).each do |color| %>
-        <% ["-light", "", "-dark"].each do |style| %>
-            <tr>
-                <td><span class='swatch bg-<%= color %><%= style %>'></span></td>
-                <td><code>$<%= color %><%= style %></code></td>
-                <td><code>.<%= color %><%= style %></code></td>
-            </tr>
-        <% end %>
-        <tr><td colspan='3'>&nbsp;</td></tr>
-    <% end %>
-    </table>
-</div>

data/preview/dropdown.html.erb DELETED Viewed

	@@ -1 +0,0 @@
1	- TODO

data/preview/form.html.erb DELETED Viewed

@@ -1,233 +0,0 @@
-<div class="section">
-    <h1>Forms</h1>
-    <h3>UniformForm</h3>
-    <div class="grid">
-        <div class="col-6">
-            <form class="uniformForm">
-                <div class="form-group">
-                    <label>Name</label>
-                    <input type="text">
-                </div>
-                <div class="form-group" data-error-message="example error message">
-                    <label>Phone</label>
-                    <input type="text">
-                </div>
-                <div class="form-group">
-                    <label>Email</label>
-                    <input type="text">
-                </div>
-            </form>
-        </div>
-        <div class="col-6">
-            <% html_block do %>
-<form class="uniformForm">
-    <div class="form-group">
-        <label>Name</label>
-        <input type="text">
-    </div>
-    <div class="form-group" data-error-message="example error message">
-        <label>Phone</label>
-        <input type="text">
-    </div>
-    <div class="form-group">
-        <label>Email</label>
-        <input type="text">
-    </div>
-</form>
-            <% end %>
-        </div>
-    </div>
-    <div class="grid">
-        <div class="col-6">
-            <form class="uniformForm uniformForm-table">
-                <div class="form-group">
-                    <label>Name</label>
-                    <div>
-                        <input type="text">
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label>Phone</label>
-                    <div>
-                        <div data-error-message="example error message">
-                            <input type="text">
-                        </div>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label>Email</label>
-                    <div>
-                        <input type="text">
-                    </div>
-                </div>
-            </form>
-        </div>
-        <div class="col-6">
-            <% html_block do %>
-<form class="uniformForm uniformForm-table">
-    <div class="form-group">
-        <label>Name</label>
-        <input type="text">
-    </div>
-    <div class="form-group" data-error-message="example error message">
-        <label>Phone</label>
-        <input type="text">
-    </div>
-    <div class="form-group">
-        <label>Email</label>
-        <input type="text">
-    </div>
-</form>
-            <% end %>
-        </div>
-    </div>
-    <h3>UniformInput</h3>
-    <div class="grid">
-        <div class="col-6">
-            <p><input type="text" class="uniformInput" /></p>
-            <p><input type="text" class="uniformInput large" /></p>
-        </div>
-        <div class="col-6">
-            <% html_block do %>
-                <input type="text" class="uniformInput" />
-            <% end %>
-            <% html_block do %>
-                <input type="text" class="uniformInput large" />
-            <% end %>
-        </div>
-    </div>
-    <h3>Custom Inputs</h3>
-    <div class="grid nest">
-        <div class="col-6">
-            <p>Styled Select Box</p>
-            <p><span class="uniformSelect"><select><option>An Option</option></select></span></p>
-        </div>
-        <div class="col-6">
-            <% html_block do %>
-<span class='uniformSelect'>
-    <select>
-        <option>An Option</option>
-    </select>
-</span>
-            <% end %>
-        </div>
-        <div class="col-6">
-            <p>uniformCheckboxCollection</p>
-            <div class="uniformCheckboxCollection">
-                <label><input type="checkbox"> Option 1</label>
-                <label><input type="checkbox"> Option 2</label>
-                <label><input type="checkbox"> Option 3</label>
-            </div>
-        </div>
-        <div class="col-6">
-            <% html_block do %>
-<div class="uniformCheckboxCollection">
-    <label><input type="checkbox"> Option 1</label>
-    <label><input type="checkbox"> Option 2</label>
-    <label><input type="checkbox"> Option 3</label>
-</div>
-            <% end %>
-        </div>
-        <div class="col-6">
-            <p>uniformCheckboxCollection.inline</p>
-            <div class="uniformCheckboxCollection inline">
-                <label><input type="radio"> Option 1</label>
-                <label><input type="radio"> Option 2</label>
-                <label><input type="radio"> Option 3</label>
-            </div>
-        </div>
-        <div class="col-6">
-            <% html_block do %>
-<div class="uniformCheckboxCollection inline">
-    <label><input type="radio"> Option 1</label>
-    <label><input type="radio"> Option 2</label>
-    <label><input type="radio"> Option 3</label>
-</div>
-            <% end %>
-        </div>
-    </div>
-    <h3>Floating Label</h3>
-    <p>Requires Javascript to fully work, but fails gracefully when not applied.</p>
-    <div class="grid">
-        <div class="col-6">
-            <div class="uniformFloatingLabel">
-                <label for="example-1">Name</label>
-                <input type="text" class="pad-more" id="example-1">
-            </div>
-        </div>
-        <div class="col-6">
-            <% html_block do %>
-<div class="uniformFloatingLabel">
-    <label for="example-1">Name</label>
-    <input type="text" class="pad-more" id="example-1">
-</div>
-            <% end %>
-        </div>
-    </div>
-    <h3>Input Group</h3>
-    <p>Ever want to put in an input and it's label in line, and have it be 100% width responsive? Well, you can't, unless you use something like uniformInputGroup.</p>
-    <div class="grid">
-        <div class="col-6">
-            <div class="uniformInputGroup">
-                <span class="label">
-                    <label for="rate">$</label>
-                </span>
-                <span class="input">
-                    <input id="rate">
-                </span>
-                <span class="units">
-                    <label for="rate">/hour</label>
-                </span>
-            </div>
-        </div>
-        <div class="col-6">
-            <% html_block do %>
-        <div class="uniformInputGroup">
-            <span class="label">
-                <label for="rate">$</label>
-            </span>
-            <span class="input">
-                <input id="rate">
-            </span>
-            <span class="units">
-                <label for="rate">/hour</label>
-            </span>
-        </div>
-            <% end %>
-        </div>
-    </div>
-    <div class="grid">
-        <div class="col-6">
-            <div class="uniformInputGroup">
-                <span class="label">
-                    <label for="car">Car Preference</label>
-                </span>
-                <span>
-                    <input id="name" value="Jonathan Doe" disabled>
-                </span>
-            </div>
-        </div>
-        <div class="col-6">
-            <% html_block do %>
-<div class="uniformInputGroup">
-    <span class="label">
-        <label for="car">Car Preference</label>
-    </span>
-    <span class="input">
-        <input id="name" value="Jonathan Doe" disabled>
-    </span>
-</div>
-            <% end %>
-        </div>
-    </div>
-</div>