index.html.erb in uniform-ui-0.6

- old
+ new
@@ -5,483 +5,49 @@
     <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">
 </head>
 <body>
-
-<% sections = {
-uniform: <<-HTML,
-
-<div class="center">
-    <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>
-</div>
-HTML
-
-installation: <<-HTML,
-    <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>
-    
-
-HTML
-
-
-philosophy: <<-HTML,
-    <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><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>
+<% sections = [
+    :uniform,
+    :installation,
+    :philosophy,
+    :colors,
+    :buttons,
+    :grid,
+    :inputs,
+    :forms,
+    :loaders,
+    :cards,
+    :tiles,
+    :rows,
+    :lists,
+    :tables,
+    :nav,
+    :tabs,
+    :helpers
+] %>
+<div class="side-nav">
+    <div style="padding: 20px; padding-right: 30px">
+        <img src="site/logo.png" style="width: 100%; height: auto;">
     </div>
-</div></xmp></pre>
-        </div>
+    <div class="uniform-nav vertical">
+        <ul>
+        <% sections.each do |section| %>
+            <li><a href="#<%= section %>"><%= section.to_s.titleize %></a></li>
+        <% end %>
+        </ul>
     </div>
-HTML
-
-
-
-colors: <<-HTML,
-<table>
-#{%w(green blue red gray yellow).map{|color|
-    ["-light", "", "-dark"].map{|style|
-        "<tr>
-            <td><span class='swatch #{color}#{style}-bg'></span></td>
-            <td><code>sass// $#{color}#{style}</code></td>
-            <td><code>class// .#{color}#{style}</code></td>
-        </tr>"
-    } + ["<tr><td colspan='3'>&nbsp;</td></tr>"]
-}.flatten.join("\n")}
-</table>
-HTML
-
-
-buttons: <<-HTML,
-    <p>Mix and match styles to make the right button, all colors are available as well.</p>
-    <p><code>#{CGI::escapeHTML "<a href='#' class='btn'></a>"}</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="btn">Button</a></td>
-            <td><a class="btn green">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>:hover</code> or <code>.hover</code></th>
-            <td><a class="btn hover">Button</a></td>
-            <td><a class="btn green hover">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>:active</code> or <code>.active</code></th>
-            <td><a class="btn active">Button</a></td>
-            <td><a class="btn green active">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>:disabled</code> or <code>.disabled</code></th>
-            <td><a class="btn disabled">Button</a></td>
-            <td><a class="btn green disabled">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>.subtle</code></th>
-            <td><a class="btn subtle">Button</a></td>
-            <td><a class="btn green subtle">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>.small</code></th>
-            <td><a class="btn small">Button</a></td>
-            <td><a class="btn green small">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>.large</code></th>
-            <td><a class="btn large">Button</a></td>
-            <td><a class="btn green large">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>.outline</code></th>
-            <td><a class="btn outline">Button</a></td>
-            <td><a class="btn green outline">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>.circle</code></th>
-            <td><a class="btn circle">Button</a></td>
-            <td><a class="btn green circle">Button</a></td>
-        </tr>
-        <tr>
-            <th><code>.block</code></th>
-            <td><a class="btn block">Button</a></td>
-            <td><a class="btn green block">Button</a></td>
-        </tr>
-    </table>
-HTML
-
-grid: <<-HTML,
-TODO
-HTML
-
-inputs: <<-HTML,
-    <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>
-HTML
-
-forms: <<-HTML,
-TODO
-HTML
-
-loaders: <<-HTML,
-<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 class="main-content">
+    <% sections.each do |section| %>
+        <a name="<%= section %>"></a>
+        <div class="section">
+            <% if section != :uniform %>
+            <h1><%= section.to_s.titleize %></h1>
+            <% end %>
+            <%= ERB.new(File.read("preview/_#{section}.html.erb")).result %>
         </div>
-    </div>
-</span></xmp></pre>
-    </div>
+    <% end %>
 </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>
-HTML
-
-cards: <<-HTML,
-<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="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="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>
-HTML
-
-tiles: <<-HTML,
-TODO
-HTML
-
-rows: <<-HTML,
-TODO
-HTML
-
-lists: <<-HTML,
-TODO
-HTML
-
-tables: <<-HTML,
-TODO
-HTML
-
-nav: <<-HTML,
-<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>
-</div>
-HTML
-
-tabs: <<-HTML,
-TODO
-HTML
-
-helpers: <<-HTML,
-TODO
-HTML
-
-} %>
-    <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">
-            <% sections.each do |key, html| %>
-                <li><a href="#<%= key %>"><%= key.to_s.titleize %></a></li>
-            <% end %>
-        </ul>
-    </div>
-    <div class="main-content">
-        <% sections.each do |key, html| %>
-            <a name="<%= key %>"></a>
-            <div class="section">
-                <% if key != :uniform %>
-                <h1><%= key.to_s.titleize %></h1>
-                <% end %>
-                <%= html %>
-            </div>
-        <% end %>
-    </div>
-    <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
+<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
 </body>
\ No newline at end of file