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

@@ -1,716 +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>Grid</h1>
-    <p>Similar to Bootstrap 4 with some modifications. Uses flexbox with a host of helper options.</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>
-    <p><code>xs</code> = 480px</p>
-    <p><code>sm</code> = 768px</p>
-    <p><code>md</code> = 992px</p>
-    <p><code>lg</code> = 1200px</p>
-    <pre class=''>&lt;div class=&quot;grid&quot;&gt;
-    &lt;div class=&quot;col&quot;&gt;content&lt;/div&gt;
-    &lt;div class=&quot;col&quot;&gt;content&lt;/div&gt;
-    &lt;div class=&quot;col&quot;&gt;content&lt;/div&gt;
-&lt;/div&gt;</pre>
-    <h3>Grid Options</h3>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .grid-center
-        <div class="grid grid-center">
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light height-100-px">col height-100-px</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-        </div>
-        </div>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .grid-top
-        <div class="grid grid-top">
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light height-100-px">col height-100-px</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-        </div>
-        </div>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .grid-bottom
-        <div class="grid grid-bottom">
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light height-100-px">col height-100-px</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-        </div>
-        </div>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .grid-stretch
-        <div class="grid grid-stretch">
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light height-100-px">col height-100-px</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-        </div>
-        </div>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .grid-h-left
-        <div class="grid grid-h-left">
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light height-100-px">col height-100-px</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-        </div>
-        </div>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .grid-h-center
-        <div class="grid grid-h-center">
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light height-100-px">col height-100-px</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-        </div>
-        </div>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .grid-h-right
-        <div class="grid grid-h-right">
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light height-100-px">col height-100-px</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-        </div>
-        </div>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .grid-h-around
-        <div class="grid grid-h-around">
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light height-100-px">col height-100-px</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-        </div>
-        </div>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .grid-h-between
-        <div class="grid grid-h-between">
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light height-100-px">col height-100-px</div>
-            </div>
-            <div class="col bg-green-light">
-                <div class="bg-red-light">col</div>
-            </div>
-        </div>
-        </div>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .grid-v-top .height-300-px
-        <div class="grid grid-v-top height-300-px">
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light height-100-px">col-4 height-100-px</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-        </div>
-        </div>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .grid-v-center .height-300-px
-        <div class="grid grid-v-center height-300-px">
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light height-100-px">col-4 height-100-px</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-        </div>
-        </div>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .grid-v-bottom .height-300-px
-        <div class="grid grid-v-bottom height-300-px">
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light height-100-px">col-4 height-100-px</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-        </div>
-        </div>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .grid-v-around .height-300-px
-        <div class="grid grid-v-around height-300-px">
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light height-100-px">col-4 height-100-px</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-        </div>
-        </div>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .grid-v-between .height-300-px
-        <div class="grid grid-v-between height-300-px">
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light height-100-px">col-4 height-100-px</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-        </div>
-        </div>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .grid-v-stretch .height-300-px
-        <div class="grid grid-v-stretch height-300-px">
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light height-100-px">col-4 height-100-px</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-            <div class="col-4 bg-green-light border">
-                <div class="bg-red-light">col-4</div>
-            </div>
-        </div>
-        </div>
-    <div class="margin-bottom bg-gray-light pad-bottom">
-    .grid .no-wrap .height-300-px
-    <div class="grid no-wrap height-300-px">
-        <div class="col-4 bg-green-light border">
-            <div class="bg-red-light">col-4</div>
-        </div>
-        <div class="col-4 bg-green-light border">
-            <div class="bg-red-light height-100-px">col-4 height-100-px</div>
-        </div>
-        <div class="col-4 bg-green-light border">
-            <div class="bg-red-light">col-4</div>
-        </div>
-        <div class="col-4 bg-green-light border">
-            <div class="bg-red-light">col-4</div>
-        </div>
-        <div class="col-4 bg-green-light border">
-            <div class="bg-red-light">col-4</div>
-        </div>
-        <div class="col-4 bg-green-light border">
-            <div class="bg-red-light">col-4</div>
-        </div>
-        <div class="col-4 bg-green-light border">
-            <div class="bg-red-light">col-4</div>
-        </div>
-    </div>
-    </div>
-    <div class="margin-bottom bg-gray-light pad-bottom">
-    .grid .grid-vertical
-    <div class="grid grid-vertical">
-        <div class="col bg-green-light">
-            <div class="bg-red-light">col</div>
-        </div>
-        <div class="col bg-green-light">
-            <div class="bg-red-light height-100-px">col height-100-px</div>
-        </div>
-        <div class="col bg-green-light">
-            <div class="bg-red-light">col</div>
-        </div>
-    </div>
-    </div>
-    <div class="margin-bottom bg-gray-light pad-bottom">
-    .grid .no-gutter
-    <div class="grid no-gutter">
-        <div class="col bg-green-light">
-            <div class="bg-red-light">col</div>
-        </div>
-        <div class="col bg-green-light">
-            <div class="bg-red-light height-100-px">col height-100-px</div>
-        </div>
-        <div class="col bg-green-light">
-            <div class="bg-red-light">col</div>
-        </div>
-    </div>
-    </div>
-    <div class="margin-bottom bg-gray-light pad-bottom">
-    .grid .nest
-    <div class="grid nest">
-        <div class="col bg-green-light">
-            <div class="bg-red-light">col</div>
-        </div>
-        <div class="col bg-green-light">
-            <div class="bg-red-light height-100-px">col height-100-px</div>
-        </div>
-        <div class="col bg-green-light">
-            <div class="bg-red-light">col</div>
-        </div>
-    </div>
-    </div>
-    <h3>Col Options</h3>
-    <div class="margin-bottom bg-gray-light pad-bottom">
-    .grid
-    <div class="grid">
-        <div class="col">
-            <div class="bg-green-light">col</div>
-        </div>
-        <div class="col">
-            <div class="bg-green-light  pad-v">
-                <div class="width-200-px bg-red-light">
-                    col > width-200-px
-                </div>
-            </div>
-        </div>
-        <div class="col">
-            <div class="bg-green-light">col</div>
-        </div>
-    </div>
-    </div>
-    <div class="margin-bottom bg-gray-light pad-bottom">
-    .grid
-    <div class="grid">
-        <div class="col">
-            <div class="bg-green-light">col</div>
-        </div>
-        <div class="col">
-            <div class="bg-green-light  pad-v">
-                <div class="width-200-px bg-red-light">
-                    col > width-200-px
-                </div>
-            </div>
-        </div>
-        <div class="col-fill">
-            <div class="bg-green-light">col-fill</div>
-        </div>
-    </div>
-    </div>
-    <div class="margin-bottom bg-gray-light pad-bottom">
-    .grid
-    <div class="grid">
-        <div class="col-4">
-            <div class="bg-green-light">col-4</div>
-        </div>
-        <div class="col-4">
-            <div class="bg-green-light">col-4</div>
-        </div>
-        <div class="col-4">
-            <div class="bg-green-light">col-4</div>
-        </div>
-    </div>
-    </div>
-    <div class="margin-bottom bg-gray-light pad-bottom">
-    .grid
-    <div class="grid">
-        <div class="col-2">
-            <div class="bg-green-light">col-2</div>
-        </div>
-        <div class="col-6">
-            <div class="bg-green-light">col-6</div>
-        </div>
-        <div class="col-4">
-            <div class="bg-green-light">col-4</div>
-        </div>
-    </div>
-    </div>
-    <div class="margin-bottom bg-gray-light pad-bottom">
-    .grid
-    <div class="grid">
-        <div class="col-3 col-push-2">
-            <div class="bg-green-light">.col-3 .col-push-2</div>
-        </div>
-    </div>
-    </div>
-    <div class="margin-bottom bg-gray-light pad-bottom">
-    .grid
-    <div class="grid">
-        <div class="col-4">
-            <div class="bg-green-light">col-4</div>
-        </div>
-        <div class="col-4">
-            <div class="bg-green-light">col-4</div>
-        </div>
-        <div class="col-4">
-            <div class="bg-green-light">col-4</div>
-        </div>
-    </div>
-    </div>
-    <div class="margin-bottom bg-gray-light pad-bottom">
-    .grid
-    <div class="grid">
-        <div class="col col-center">
-            <div class="bg-green-light">col col-center</div>
-        </div>
-        <div class="col">
-            <div class="bg-green-light pad-v">
-                <div class="width-200-px bg-red-light">
-                    col > width-200-px
-                </div>
-            </div>
-        </div>
-        <div class="col col-bottom">
-            <div class="bg-green-light">col col-bottom</div>
-        </div>
-        <div class="col col-stretch bg-green-light">
-            <div class="">col col-stretch</div>
-        </div>
-    </div>
-    </div>
-    <div class="margin-bottom bg-gray-light pad-bottom">
-    .grid
-    <div class="grid">
-        <div class="col">
-            <div class="bg-green-light">col</div>
-        </div>
-        <div class="col no-gutter bg-green-light pad-v">
-            <div class="width-200-px bg-red-light">
-                col no-gutter > width-200-px
-            </div>
-        </div>
-        <div class="col">
-            <div class="bg-green-light">col</div>
-        </div>
-    </div>
-    </div>
-</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>