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

uniform-ui 1.0 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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/site/helpers.html DELETED Viewed

@@ -1,1008 +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="section">
-    <h1>Helpers</h1>
-    <p>These classes are mostly used as modifieres to base elements or compontents</p>
-    <h3>Breakpoints</h3>
-    <p>
-        Any helper can have <code>-sm</code>, <code>-md</code>, <code>-lg</code>,
-        or <code>-xl</code> added to cause helper to only go into effect for that
-        breakpoint.
-    </p>
-    <h3>Padding</h3>
-    <table class="uniformTable top">
-        <tr>
-            <th></th>
-            <th></th>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.pad-tiny</code>
-            </td>
-            <td>
-                <pre class='margin-none'>padding: 0.25em;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.pad-less</code>
-            </td>
-            <td>
-                <pre class='margin-none'>padding: 0.5em;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.pad</code>
-            </td>
-            <td>
-                <pre class='margin-none'>padding: 1em;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.pad-more</code>
-            </td>
-            <td>
-                <pre class='margin-none'>padding: 2em;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.pad-super</code>
-            </td>
-            <td>
-                <pre class='margin-none'>padding: 4em;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.pad-h</code>
-            </td>
-            <td>
-                <pre class='margin-none'>padding-left: 1em; padding-right: 1em;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.pad-h-less</code>
-            </td>
-            <td>
-                <pre class='margin-none'>padding-left: 0.5em; padding-right: 0.5em;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.pad-v</code>
-            </td>
-            <td>
-                <pre class='margin-none'>padding-top: 1em; padding-bottom: 1em;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.pad-v-less</code>
-            </td>
-            <td>
-                <pre class='margin-none'>padding-top: 0.5em; padding-bottom: 0.5em;</pre>
-            </td>
-        </tr>
-    </table>
-    <h3>Margin</h3>
-    <table class="uniformTable top">
-        <tr>
-            <th></th>
-            <th></th>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.margin-tiny</code>
-            </td>
-            <td>
-                <pre class='margin-none'>margin-top: 0.25em; margin-bottom:0.25em</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.margin-less</code>
-            </td>
-            <td>
-                <pre class='margin-none'>margin-top: 0.5em; margin-bottom: 0.5em</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.margin</code>
-            </td>
-            <td>
-                <pre class='margin-none'>margin-top: 1em; margin-bottom: 1em;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.margin-more</code>
-            </td>
-            <td>
-                <pre class='margin-none'>margin-top 2em; margin-bottom: 2em</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.margin-super</code>
-            </td>
-            <td>
-                <pre class='margin-none'>margin-top: 4em; margin-bottom: 2em</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.margin-h</code>
-            </td>
-            <td>
-                <pre class='margin-none'>margin-left: 1em; margin-right: 1em;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.margin-none</code>
-            </td>
-            <td>
-                <pre class='margin-none'>margin: 0 !important;</pre>
-            </td>
-        </tr>
-    </table>
-    <h3>Colors</h3>
-    <table class="uniformTable top">
-        <tr>
-            <th></th>
-            <th></th>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-green</code>
-            </td>
-            <td>
-                <pre class='margin-none'>color: $green</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.bg-green</code>
-            </td>
-            <td>
-                <pre class='margin-none'>background-color: $green</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.a-green</code>
-            </td>
-            <td>
-                <pre class='margin-none'>a{ color: $green}</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.a-hover-green</code>
-            </td>
-            <td>
-                <pre class='margin-none'>a:hover{ color: $green}</pre>
-            </td>
-        </tr>
-    </table>
-    <h3>Sizes</h3>
-    <table class="uniformTable top">
-        <tr>
-            <th></th>
-            <th></th>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.width-50-p</code>
-            </td>
-            <td>
-                <pre class='margin-none'>width: 50%</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.width-50-px</code>
-            </td>
-            <td>
-                <pre class='margin-none'>width: 50px</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.width-50-vw</code>
-            </td>
-            <td>
-                <pre class='margin-none'>width: 50vw</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.max-width-50-p</code>
-            </td>
-            <td>
-                <pre class='margin-none'>max-width: 50%</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.max-width-50-px</code>
-            </td>
-            <td>
-                <pre class='margin-none'>max-width: 50px</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.height-50-p</code>
-            </td>
-            <td>
-                <pre class='margin-none'>height: 50%</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.height-50-px</code>
-            </td>
-            <td>
-                <pre class='margin-none'>height: 50px</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.height-50-vh</code>
-            </td>
-            <td>
-                <pre class='margin-none'>height: 50vh</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.max-height-50-px</code>
-            </td>
-            <td>
-                <pre class='margin-none'>max-height: 50px</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.min-height-50-vh</code>
-            </td>
-            <td>
-                <pre class='margin-none'>min-height: 50vh</pre>
-            </td>
-        </tr>
-    </table>
-    <h3>Text</h3>
-    <table class="uniformTable top">
-        <tr>
-            <th></th>
-            <th></th>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-caps</code>
-            </td>
-            <td>
-                <pre class='margin-none'>text-transform: uppercase</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-small-less</code>
-            </td>
-            <td>
-                <pre class='margin-none'>font-size: 0.9em</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-small</code>
-            </td>
-            <td>
-                <pre class='margin-none'>font-size: 0.8em</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-large</code>
-            </td>
-            <td>
-                <pre class='margin-none'>font-size: 1.2em</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-1rem</code>
-            </td>
-            <td>
-                <pre class='margin-none'>font-size: 1rem</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-larger</code>
-            </td>
-            <td>
-                <pre class='margin-none'>font-size: 1.4em</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-super</code>
-            </td>
-            <td>
-                <pre class='margin-none'>font-size: 3em</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-subtle</code>
-            </td>
-            <td>
-                <pre class='margin-none'>font-size: 90%; opacity: 0.8</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-subtle-more</code>
-            </td>
-            <td>
-                <pre class='margin-none'>font-size: 80%; opacity: 0.6</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-muted</code>
-            </td>
-            <td>
-                <pre class='margin-none'>opacity: 0.8</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-muted-more</code>
-            </td>
-            <td>
-                <pre class='margin-none'>opacity: 0.6</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-left</code>
-            </td>
-            <td>
-                <pre class='margin-none'>text-align: left !important</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-right</code>
-            </td>
-            <td>
-                <pre class='margin-none'>text-align: right</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-center</code>
-            </td>
-            <td>
-                <pre class='margin-none'>text-align: center</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-justify</code>
-            </td>
-            <td>
-                <pre class='margin-none'>text-align: justify</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-overflow</code>
-            </td>
-            <td>
-                <pre class='margin-none'>@include text-overflow</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-bold</code>
-            </td>
-            <td>
-                <pre class='margin-none'>font-weight: 700</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-light</code>
-            </td>
-            <td>
-                <pre class='margin-none'>font-weight: 300</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-lightest</code>
-            </td>
-            <td>
-                <pre class='margin-none'>font-weight: 100</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-normal</code>
-            </td>
-            <td>
-                <pre class='margin-none'>font-weight: normal !important</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-middle</code>
-            </td>
-            <td>
-                <pre class='margin-none'>vertical-align:middle</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-top</code>
-            </td>
-            <td>
-                <pre class='margin-none'>vertical-align:top</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-tight</code>
-            </td>
-            <td>
-                <pre class='margin-none'>line-height:1.3</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.required</code>
-            </td>
-            <td>
-                <pre class='margin-none'>color:$red</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.warn:hover</code>
-            </td>
-            <td>
-                <pre class='margin-none'>color:$red</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>p.large</code>
-            </td>
-            <td>
-                <pre class='margin-none'>font-size:1.5em; font-weight:300</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-italic</code>
-            </td>
-            <td>
-                <pre class='margin-none'>font-style: italic</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-no-wrap</code>
-            </td>
-            <td>
-                <pre class='margin-none'>white-space: nowrap; overflow:hidden</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-no-decoration</code>
-            </td>
-            <td>
-                <pre class='margin-none'>text-decoration: none; a{text-decoration: none;}</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-height-1</code>
-            </td>
-            <td>
-                <pre class='margin-none'>line-height: 1</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-warn</code>
-            </td>
-            <td>
-                <pre class='margin-none'>&amp;:hover{color:$red !important;}</pre>
-            </td>
-        </tr>
-    </table>
-    <h3>Layout</h3>
-    <table class="uniformTable top">
-        <tr>
-            <th></th>
-            <th></th>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.hidden</code>
-            </td>
-            <td>
-                <pre class='margin-none'>display:none !important;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.round</code>
-            </td>
-            <td>
-                <pre class='margin-none'>border-radius:50%;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.rounded</code>
-            </td>
-            <td>
-                <pre class='margin-none'>border-radius: 0.25em;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.pointer</code>
-            </td>
-            <td>
-                <pre class='margin-none'>cursor: pointer !important;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.cursor-help</code>
-            </td>
-            <td>
-                <pre class='margin-none'>cursor: help;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.handle</code>
-            </td>
-            <td>
-                <pre class='margin-none'>cursor: hand;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.honeypot</code>
-            </td>
-            <td>
-                <pre class='margin-none'>position:absolute !important;
-left:-999999px !important;
-width:1px !important;
-display:block !important;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.border-#{$direction}</code>
-            </td>
-            <td>
-                <pre class='margin-none'>border-#{$direction}: 1px solid $gray-light;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.border-dark-#{$direction}</code>
-            </td>
-            <td>
-                <pre class='margin-none'>border-#{$direction}: 1px solid darken($gray-light, 20);</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>img.disabled</code>
-            </td>
-            <td>
-                <pre class='margin-none'>@include grayscale(1, 0.3)</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>table.fixed</code>
-            </td>
-            <td>
-                <pre class='margin-none'>table-layout: fixed;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.float-right</code>
-            </td>
-            <td>
-                <pre class='margin-none'>float:right;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.float-left</code>
-            </td>
-            <td>
-                <pre class='margin-none'>float: left;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.bleed-fix</code>
-            </td>
-            <td>
-                <pre class='margin-none'>position:static; overflow:hidden;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.clear</code>
-            </td>
-            <td>
-                <pre class='margin-none'>clear:both;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.block </code>
-            </td>
-            <td>
-                <pre class='margin-none'>display: block;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.inline-block </code>
-            </td>
-            <td>
-                <pre class='margin-none'>display:inline-block !important;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.align-middle</code>
-            </td>
-            <td>
-                <pre class='margin-none'>@include align-middle;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.relative</code>
-            </td>
-            <td>
-                <pre class='margin-none'>position:relative;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>ul.raw</code>
-            </td>
-            <td>
-                <pre class='margin-none'>margin: 0; padding: 0; list-style:none;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.text-col-2</code>
-            </td>
-            <td>
-                <pre class='margin-none'>column-count: 2; column-gap: 5em;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>button.raw</code>
-            </td>
-            <td>
-                <pre class='margin-none'>outline: none; appearance: none; border: none; background:none;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.overflow-hidden</code>
-            </td>
-            <td>
-                <pre class='margin-none'>overflow:hidden;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.overflow-y</code>
-            </td>
-            <td>
-                <pre class='margin-none'>overflow-y: auto;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>img.block</code>
-            </td>
-            <td>
-                <pre class='margin-none'>display:block; width: 100%;</pre>
-            </td>
-        </tr>
-        <tr class="middle">
-            <td>
-                <code>.height-auto</code>
-            </td>
-            <td>
-                <pre class='margin-none'>height: auto;</pre>
-            </td>
-        </tr>
-    </table>
-</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>