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

uniform-ui 0.6 → 1.0

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 (106) hide show

checksums.yaml +4 -4
data/CHANGELOG.md +27 -0
data/CNAME +1 -0
data/Gemfile +0 -4
data/Gemfile.lock +1 -11
data/README.md +2 -3
data/Rakefile +34 -24
data/index.html +240 -1160
data/preview/{_tables.html.erb → alerts.html.erb} +0 -0
data/preview/buttons.html.erb +62 -0
data/preview/cards.html.erb +23 -0
data/preview/colors.html.erb +22 -0
data/preview/{_tabs.html.erb → dropdown.html.erb} +0 -0
data/preview/form.html.erb +233 -0
data/preview/grid.html.erb +304 -0
data/preview/helpers.html.erb +225 -0
data/preview/index.html.erb +74 -50
data/preview/{_tiles.html.erb → labels.html.erb} +0 -0
data/preview/layout.html.erb +63 -0
data/preview/loaders.html.erb +83 -0
data/preview/modal.html.erb +1 -0
data/preview/nav.html.erb +77 -0
data/preview/preview.scss +39 -10
data/preview/rows.html.erb +36 -0
data/preview/select.html.erb +1 -0
data/preview/tables.html.erb +1 -0
data/preview/tabs.html.erb +17 -0
data/preview/tiles.html.erb +1 -0
data/preview/tooltip.erb +1 -0
data/site/alerts.html +157 -0
data/site/alerts.html copy +133 -0
data/site/buttons.html +286 -0
data/site/cards.html +177 -0
data/site/colors.html +275 -0
data/site/dropdown.html +157 -0
data/site/dropdown.html copy +141 -0
data/site/form.html +369 -0
data/site/grid.html +716 -0
data/site/helpers.html +1008 -0
data/site/index.html +208 -617
data/site/labels.html +157 -0
data/site/layout.html +313 -0
data/site/loaders.html +233 -0
data/site/modal.html +157 -0
data/site/nav.html +229 -0
data/site/preview.css +1 -1
data/site/preview.js +59 -0
data/site/rows.html +190 -0
data/site/select.html +157 -0
data/site/tables.html +157 -0
data/site/tabs.html +171 -0
data/site/tiles.html +157 -0
data/site/tiles.html copy +109 -0
data/site/tooltip +157 -0
data/site/uniform.css +1 -1
data/uniform.gemspec +2 -8
data/vendor/assets/stylesheets/uniform.scss +4 -4
data/vendor/assets/stylesheets/uniform/base.scss +2 -0
data/vendor/assets/stylesheets/uniform/components/alert.scss +27 -0
data/vendor/assets/stylesheets/uniform/components/buttons.scss +135 -86
data/vendor/assets/stylesheets/uniform/components/card.scss +69 -67
data/vendor/assets/stylesheets/uniform/components/dropdown.scss +69 -0
data/vendor/assets/stylesheets/uniform/components/form.scss +268 -85
data/vendor/assets/stylesheets/uniform/components/grid.scss +214 -72
data/vendor/assets/stylesheets/uniform/components/label.scss +63 -0
data/vendor/assets/stylesheets/uniform/components/loaders.scss +38 -18
data/vendor/assets/stylesheets/uniform/components/modal.scss +51 -0
data/vendor/assets/stylesheets/uniform/components/nav.scss +171 -54
data/vendor/assets/stylesheets/uniform/components/row.scss +69 -101
data/vendor/assets/stylesheets/uniform/components/select.scss +98 -0
data/vendor/assets/stylesheets/uniform/components/table.scss +83 -0
data/vendor/assets/stylesheets/uniform/components/tabs.scss +39 -26
data/vendor/assets/stylesheets/uniform/components/tile.scss +15 -27
data/vendor/assets/stylesheets/uniform/components/tooltip.scss +46 -0
data/vendor/assets/stylesheets/uniform/defaults.scss +85 -19
data/vendor/assets/stylesheets/uniform/helpers.scss +82 -81
data/vendor/assets/stylesheets/uniform/helpers/colors.scss +37 -0
data/vendor/assets/stylesheets/uniform/helpers/margin.scss +44 -0
data/vendor/assets/stylesheets/uniform/helpers/padding.scss +74 -0
data/vendor/assets/stylesheets/uniform/helpers/sizes.scss +31 -0
data/vendor/assets/stylesheets/uniform/helpers/text.scss +121 -0
data/vendor/assets/stylesheets/uniform/mixins.scss +25 -48
data/vendor/assets/stylesheets/uniform/variables.scss +10 -28
metadata +61 -85
data/preview/_buttons.html.erb +0 -59
data/preview/_cards.html.erb +0 -82
data/preview/_colors.html.erb +0 -12
data/preview/_forms.html.erb +0 -196
data/preview/_grid.html.erb +0 -49
data/preview/_helpers.html.erb +0 -158
data/preview/_inputs.html.erb +0 -93
data/preview/_installation.html.erb +0 -4
data/preview/_lists.html.erb +0 -53
data/preview/_loaders.html.erb +0 -72
data/preview/_nav.html.erb +0 -46
data/preview/_philosophy.html.erb +0 -33
data/preview/_rows.html.erb +0 -35
data/preview/_uniform.html.erb +0 -4
data/site/site/logo.png +0 -0
data/site/site/preview.css +0 -1
data/site/site/uniform.css +0 -1
data/vendor/assets/stylesheets/uniform/components/inputs.scss +0 -131
data/vendor/assets/stylesheets/uniform/components/lists.scss +0 -62
data/vendor/assets/stylesheets/uniform/components/table-container.scss +0 -44
data/vendor/assets/stylesheets/uniform/components/table-form.scss +0 -159
data/vendor/assets/stylesheets/uniform/mixins/grid-framework.scss +0 -142

data/site/index.html CHANGED Viewed

@@ -3,658 +3,249 @@
     <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/preview.css" type="text/css" media="screen" charset="utf-8">
-    <link rel="stylesheet" href="site/uniform.css" type="text/css" media="screen" title="no title" charset="utf-8">
+    <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 style="padding: 20px; padding-right: 30px">
-            <img src="site/logo.png" style="width: 100%; height: auto;">
-        </div>
-        <ul class="uniform-nav">
+<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">
-                <li><a href="#uniform">Uniform</a></li>
-                <li><a href="#installation">Installation</a></li>
+                <a href="/site/helpers.html">
+                    Helpers
+                </a>
-                <li><a href="#philosophy">Philosophy</a></li>
+                <a href="/site/colors.html">
+                    Colors
+                </a>
-                <li><a href="#colors">Colors</a></li>
+                <a href="/site/grid.html">
+                    Grid
+                </a>
-                <li><a href="#buttons">Buttons</a></li>
+                <a href="/site/buttons.html">
+                    Buttons
+                </a>
-                <li><a href="#grid">Grid</a></li>
+                <a href="/site/tables.html">
+                    Tables
+                        <span class="uniformLabel yellow">todo</span>
+                </a>
-                <li><a href="#inputs">Inputs</a></li>
+                <a href="/site/cards.html">
+                    Cards
+                </a>
-                <li><a href="#forms">Forms</a></li>
+                <a href="/site/rows.html">
+                    Rows
+                </a>
-                <li><a href="#loaders">Loaders</a></li>
+                <a href="/site/form.html">
+                    Form
+                </a>
-                <li><a href="#cards">Cards</a></li>
+                <a href="/site/loaders.html">
+                    Loaders
+                </a>
-                <li><a href="#tiles">Tiles</a></li>
+                <a href="/site/nav.html">
+                    Nav
+                </a>
-                <li><a href="#rows">Rows</a></li>
+                <a href="/site/tabs.html">
+                    Tabs
+                </a>
-                <li><a href="#lists">Lists</a></li>
+                <a href="/site/tiles.html">
+                    Tiles
+                        <span class="uniformLabel yellow">todo</span>
+                </a>
-                <li><a href="#tables">Tables</a></li>
+                <a href="/site/labels.html">
+                    Labels
+                        <span class="uniformLabel yellow">todo</span>
+                </a>
-                <li><a href="#nav">Nav</a></li>
+                <a href="/site/alerts.html">
+                    Alerts
+                        <span class="uniformLabel yellow">todo</span>
+                </a>
-                <li><a href="#tabs">Tabs</a></li>
+                <a href="/site/dropdown.html">
+                    Dropdown
+                        <span class="uniformLabel yellow">todo</span>
+                </a>
-                <li><a href="#helpers">Helpers</a></li>
+                <a href="/site/modal.html">
+                    Modal
+                        <span class="uniformLabel yellow">todo</span>
+                </a>
-        </ul>
-    </div>
-    <div class="main-content">
-            <a name="uniform"></a>
-            <div class="section">
+                <a href="/site/select.html">
+                    Select
+                        <span class="uniformLabel yellow">todo</span>
+                </a>
-<div class="center">
+                <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 defaults for building a UI that's on fleak.</p>
+    <p class="large">Sass components and helpers for building a UI.</p>
 </div>
-            </div>
-            <a name="installation"></a>
-            <div class="section">
-                <h1>Installation</h1>
-                    <p>Add to your gem file<br/><code>gem 'uniform-ui'</code></p>
+<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>
-            <a name="philosophy"></a>
-            <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>
+</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>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>
+        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>Train-case</h3>
-    <p>Use train-case for class names, not camelCase or snake_case. It's quicker to type and honestly just conventional.</p>
-    <div class="row">
-        <div class="col-sm-6">
-            <h3>Wrappers and Containers</h3>
-            <p>The order of nesting should go Wrapper > Element > Container. Sometimes you have to have an inside layer to do advanced css things, and the container should be that layer. This is not a suggestion for every object; use wrapper and/or container as needed.</p>
-        </div>
-        <div class="col-sm-6">
-            <h3>&nbsp;</h3>
-<pre><xmp><div class="property-wrapper">
-    <div class="property">
-        <div class="property-container">
-        </div>
-    </div>
-</div></xmp></pre>
-        </div>
-    </div>
-            </div>
-            <a name="colors"></a>
-            <div class="section">
-                <h1>Colors</h1>
-                <table>
-<tr>
-            <td><span class='swatch green-light-bg'></span></td>
-            <td><code>sass// $green-light</code></td>
-            <td><code>class// .green-light</code></td>
-        </tr>
-<tr>
-            <td><span class='swatch green-bg'></span></td>
-            <td><code>sass// $green</code></td>
-            <td><code>class// .green</code></td>
-        </tr>
-<tr>
-            <td><span class='swatch green-dark-bg'></span></td>
-            <td><code>sass// $green-dark</code></td>
-            <td><code>class// .green-dark</code></td>
-        </tr>
-<tr><td colspan='3'>&nbsp;</td></tr>
-<tr>
-            <td><span class='swatch blue-light-bg'></span></td>
-            <td><code>sass// $blue-light</code></td>
-            <td><code>class// .blue-light</code></td>
-        </tr>
-<tr>
-            <td><span class='swatch blue-bg'></span></td>
-            <td><code>sass// $blue</code></td>
-            <td><code>class// .blue</code></td>
-        </tr>
-<tr>
-            <td><span class='swatch blue-dark-bg'></span></td>
-            <td><code>sass// $blue-dark</code></td>
-            <td><code>class// .blue-dark</code></td>
-        </tr>
-<tr><td colspan='3'>&nbsp;</td></tr>
-<tr>
-            <td><span class='swatch red-light-bg'></span></td>
-            <td><code>sass// $red-light</code></td>
-            <td><code>class// .red-light</code></td>
-        </tr>
-<tr>
-            <td><span class='swatch red-bg'></span></td>
-            <td><code>sass// $red</code></td>
-            <td><code>class// .red</code></td>
-        </tr>
-<tr>
-            <td><span class='swatch red-dark-bg'></span></td>
-            <td><code>sass// $red-dark</code></td>
-            <td><code>class// .red-dark</code></td>
-        </tr>
-<tr><td colspan='3'>&nbsp;</td></tr>
-<tr>
-            <td><span class='swatch gray-light-bg'></span></td>
-            <td><code>sass// $gray-light</code></td>
-            <td><code>class// .gray-light</code></td>
-        </tr>
-<tr>
-            <td><span class='swatch gray-bg'></span></td>
-            <td><code>sass// $gray</code></td>
-            <td><code>class// .gray</code></td>
-        </tr>
-<tr>
-            <td><span class='swatch gray-dark-bg'></span></td>
-            <td><code>sass// $gray-dark</code></td>
-            <td><code>class// .gray-dark</code></td>
-        </tr>
-<tr><td colspan='3'>&nbsp;</td></tr>
-<tr>
-            <td><span class='swatch yellow-light-bg'></span></td>
-            <td><code>sass// $yellow-light</code></td>
-            <td><code>class// .yellow-light</code></td>
-        </tr>
-<tr>
-            <td><span class='swatch yellow-bg'></span></td>
-            <td><code>sass// $yellow</code></td>
-            <td><code>class// .yellow</code></td>
-        </tr>
-<tr>
-            <td><span class='swatch yellow-dark-bg'></span></td>
-            <td><code>sass// $yellow-dark</code></td>
-            <td><code>class// .yellow-dark</code></td>
-        </tr>
-<tr><td colspan='3'>&nbsp;</td></tr>
-</table>
-            </div>
-            <a name="buttons"></a>
-            <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>&lt;a href=&#39;#&#39; class=&#39;uniform-btn&#39;&gt;&lt;/a&gt;</code></p>
-    <table class="table" cellspacing="0" cellpadding="0">
-        <tr>
-            <th></th>
-            <th>Normal</th>
-            <th><code>.green</code></th>
-        </tr>
-        <tr>
-            <th></th>
-            <td><a class="uniform-btn">Button</a></td>
-            <td><a class="uniform-btn green">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>:hover</code> or <code>.hover</code></th>
-            <td><a class="uniform-btn hover">Button</a></td>
-            <td><a class="uniform-btn green hover">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>:active</code> or <code>.active</code></th>
-            <td><a class="uniform-btn active">Button</a></td>
-            <td><a class="uniform-btn green active">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>:disabled</code> or <code>.disabled</code></th>
-            <td><a class="uniform-btn disabled">Button</a></td>
-            <td><a class="uniform-btn green disabled">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>.subtle</code></th>
-            <td><a class="uniform-btn subtle">Button</a></td>
-            <td><a class="uniform-btn green subtle">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>.small</code></th>
-            <td><a class="uniform-btn small">Button</a></td>
-            <td><a class="uniform-btn green small">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>.large</code></th>
-            <td><a class="uniform-btn large">Button</a></td>
-            <td><a class="uniform-btn green large">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>.outline</code></th>
-            <td><a class="uniform-btn outline">Button</a></td>
-            <td><a class="uniform-btn green outline">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>.circle</code></th>
-            <td><a class="uniform-btn circle">Button</a></td>
-            <td><a class="uniform-btn green circle">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>.block</code></th>
-            <td><a class="uniform-btn block">Button</a></td>
-            <td><a class="uniform-btn green block">Button</a></td>
-        </tr>
-    </table>
-            </div>
-            <a name="grid"></a>
-            <div class="section">
-                <h1>Grid</h1>
-                TODO
-            </div>
-            <a name="inputs"></a>
-            <div class="section">
-                <h1>Inputs</h1>
-                    <h3>Custom Inputs</h3>
-    <div class="row">
-        <div class="col-sm-6">
-            <p>Styled Select Box
-            <p><span class="uniform-select"><select><option>An Option</option></select></span></p>
-        </div>
-        <div class="col-sm-6">
-<pre><xmp><span class='uniform-select'>
-    <select>
-        <option>An Option</option>
-    </select>
-</span></xmp></pre>
-        </div>
-    </div>
-    <h3>Inline Inputs</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 inline-input.</p>
-    <div class="row">
-        <div class="col-sm-6">
-            <div class="inline-input">
-                <span class="label">
-                    <label for="rate">$</label>
-                </span>
-                <span>
-                    <input id="rate">
-                </span>
-                <span class="units">
-                    <label for="rate">/hour</label>
-                </span>
-            </div>
-        </div>
-        <div class="col-sm-6">
-<pre><xmp><div class="inline-input">
-    <span class="label">$</span>
-    <span>
-        <input id="name" placeholder="Jonathan Doe">
-    </span>
-    <span class="units">/hour</span>
-</div></xmp></pre>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-sm-6">
-            <div class="inline-input">
-                <span class="label"><label for="car">Car Preference</label></span>
-                <span class="select"><select id="car"><option>Tesla</option></select></span>
-            </div>
-        </div>
-        <div class="col-sm-6">
-<pre><xmp><div class="inline-input">
-    <span class="label">
-        <label for="car">Car Preference</label>
-    </span>
-    <span>
-        <select id="car"><option>Tesla</option></select>
-    </span>
-</div></xmp></pre>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-sm-6">
-            <div class="inline-input block">
-                <span class="label">
-                    <label for="car">Car Preference</label>
-                </span>
-                <span>
-                    <input id="name" value="Jonathan Doe" disabled>
-                </span>
-            </div>
-        </div>
-        <div class="col-sm-6">
-<pre><xmp><div class="inline-input block">
-    <span class="label">
-        <label for="car">Car Preference</label>
-    </span>
-    <span>
-        <input id="name" value="Jonathan Doe" disabled>
-    </span>
-</div></xmp></pre>
-        </div>
-    </div>
-            </div>
-            <a name="forms"></a>
-            <div class="section">
-                <h1>Forms</h1>
-                TODO
-            </div>
-            <a name="loaders"></a>
-            <div class="section">
-                <h1>Loaders</h1>
-                <div class="row">
-    <div class="col-sm-6">
-        <div class="uniform-loader">
-            <div class="uniform-loader-container">
-                <span>&bull;</span>
-                <span>&bull;</span>
-                <span>&bull;</span>
-            </div>
-        </div>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><div class="uniform-loader">
-    <div class="uniform-loader-container">
-        <span>&bull;</span>
-        <span>&bull;</span>
-        <span>&bull;</span>
-    </div>
-</div></xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <span style="position:relative; display:inline-block">
-            <img src="https://unsplash.it/150/100/?random" style="display:inline-block;" width="150" height="100">
-            <div class="uniform-loader cover">
-                <div class="uniform-loader-container">
-                    <span>&bull;</span>
-                    <span>&bull;</span>
-                    <span>&bull;</span>
-                </div>
-            </div>
-        </span>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><span style="position:relative; display:inline-block">
-    <img src="https://unsplash.it/150/100/?random" style="display:inline-block;">
-    <div class="uniform-loader cover">
-        <div class="uniform-loader-container">
-            <span>&bull;</span>
-            <span>&bull;</span>
-            <span>&bull;</span>
-        </div>
-    </div>
-</span></xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <span style="position:relative; display:inline-block">
-            <img src="https://unsplash.it/150/100/?random" style="display:inline-block;" width="150" height="100">
-            <div class="uniform-loader cover light">
-                <div class="uniform-loader-container">
-                    <span>&bull;</span>
-                    <span>&bull;</span>
-                    <span>&bull;</span>
-                </div>
-            </div>
-        </span>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><span style="position:relative; display:inline-block">
-    <img src="https://unsplash.it/150/100/?random" style="display:inline-block;">
-    <div class="uniform-loader cover light">
-        <div class="uniform-loader-container">
-            <span>&bull;</span>
-            <span>&bull;</span>
-            <span>&bull;</span>
-        </div>
-    </div>
-</span></xmp></pre>
-    </div>
-</div>
-            </div>
-            <a name="cards"></a>
-            <div class="section">
-                <h1>Cards</h1>
-                <div class="row">
-    <div class="col-sm-6">
-        <div class="uniform-card">
-            <div class="uniform-card-title">
-                <span class="type">Sample Card</span>
-            </div>
-            <div class="uniform-card-body">Put Content In Here</div>
-        </div>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><div class="uniform-card">
-    <div class="uniform-card-title">
-        <span class="type">Sample Card</span>
-    </div>
-    <div class="uniform-card-body">Put Content In Here</div>
-</div></xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <div class="uniform-card">
-            <div class="uniform-card-avatar">
-                <img src="https://unsplash.it/161/161/?random" style="display:block;" height="161" width="161">
-            </div>
-            <div class="uniform-card-container">
-                <div class="uniform-card-title">
-                    <span class="type">John Dozer</span>
-                    <div class="actions">
-                        <a class="uniform-btn">Edit</a>
-                    </div>
-                </div>
-                <div class="uniform-card-body">
-                    <div class="uniform-card-attributes">
-                        <div>
-                            <div>Company</div>
-                            <div>Friendly Associates</div>
-                        </div>
-                        <div>
-                            <div>Title</div>
-                            <div>Head Dude</div>
-                        </div>
-                        <div>
-                            <div>Skills</div>
-                            <div>Stapling, Jogging</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><div class="uniform-card">
-    <div class="uniform-card-avatar">
-        <img src="https://unsplash.it/161/161/?random" style="display:block;" height="161" width="161">
-    </div>
-    <div class="uniform-card-container">
-        <div class="uniform-card-title">
-            <span class="type">John Dozer</span>
-            <div class="actions">
-                <a class="uniform-btn">Edit</a>
-            </div>
-        </div>
-        <div class="uniform-card-body">
-            <div class="uniform-card-attributes">
-                <div>
-                    <div>Company</div>
-                    <div>Friendly Associates</div>
-                </div>
-                <div>
-                    <div>Title</div>
-                    <div>Head Dude</div>
-                </div>
-                <div>
-                    <div>Skills</div>
-                    <div>Stapling, Jogging</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div></xmp></pre>
-    </div>
-</div>
-            </div>
-            <a name="tiles"></a>
-            <div class="section">
-                <h1>Tiles</h1>
-                TODO
-            </div>
-            <a name="rows"></a>
-            <div class="section">
-                <h1>Rows</h1>
-                TODO
-            </div>
-            <a name="lists"></a>
-            <div class="section">
-                <h1>Lists</h1>
-                TODO
-            </div>
-            <a name="tables"></a>
-            <div class="section">
-                <h1>Tables</h1>
-                TODO
-            </div>
-            <a name="nav"></a>
-            <div class="section">
-                <h1>Nav</h1>
-                <div class="row">
-    <div class="col-sm-6">
-        <div class="uniform-nav horizontal main">
-            <div class="pad">Logo</div>
-            <div class="right">
-                <div><a>Account</a></div>
-                <div><a>Sign Out</a></div>
-            </div>
-        </div>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><div class="uniform-nav horizontal main">
-    <div class="pad">Logo</div>
-    <div class="right">
-        <div><a>Account</a></div>
-        <div><a>Sign Out</a></div>
-    </div>
-</div></xmp></pre>
-    </div>
-</div>
-<div class="row">
-    <div class="col-sm-6">
-        <div class="uniform-nav">
-            <ul>
-                <li><a>Account</a></li>
-                <li><a>Sign Out</a></li>
-            </ul>
-        </div>
-    </div>
-    <div class="col-sm-6">
-<pre><xmp><div class="uniform-nav">
-    <ul>
-        <li><a>Account</a></li>
-        <li><a>Sign Out</a></li>
-    </ul>
-</div></xmp></pre>
-    </div>
+    <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>
-            <a name="tabs"></a>
-            <div class="section">
-                <h1>Tabs</h1>
-                TODO
-            </div>
-            <a name="helpers"></a>
-            <div class="section">
-                <h1>Helpers</h1>
-                TODO
-            </div>
-    </div>
-    <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
+</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>