uniform-ui 0.6 → 1.0

data/preview/helpers.html.erb

@@ -0,0 +1,225 @@
+<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>
+        <% [
+            ['.pad-tiny', 'padding: 0.25em;'],
+            ['.pad-less', 'padding: 0.5em;'],
+            ['.pad', 'padding: 1em;'],
+            ['.pad-more', 'padding: 2em;'],
+            ['.pad-super', 'padding: 4em;'],
+            ['.pad-h', 'padding-left: 1em; padding-right: 1em;'],
+            ['.pad-h-less', 'padding-left: 0.5em; padding-right: 0.5em;'],
+            ['.pad-v', 'padding-top: 1em; padding-bottom: 1em;'],
+            ['.pad-v-less', 'padding-top: 0.5em; padding-bottom: 0.5em;'],
+        ].each do |klass| %>
+        <tr class="middle">
+            <td>
+                <code><%= klass[0] %></code>
+            </td>
+            <td>
+                <% html_block class: "margin-none" do %>
+                    <%= klass[1] %>
+                <% end %>
+            </td>
+        </tr>
+        <% end %>
+    </table>
+    
+    <h3>Margin</h3>
+    <table class="uniformTable top">
+        <tr>
+            <th></th>
+            <th></th>
+        </tr>
+        <% [
+            ['.margin-tiny', 'margin-top: 0.25em; margin-bottom:0.25em'],
+            ['.margin-less', 'margin-top: 0.5em; margin-bottom: 0.5em'],
+            ['.margin', 'margin-top: 1em; margin-bottom: 1em;'],
+            ['.margin-more', 'margin-top 2em; margin-bottom: 2em'],
+            ['.margin-super', 'margin-top: 4em; margin-bottom: 2em'],
+            ['.margin-h', 'margin-left: 1em; margin-right: 1em;'],
+            ['.margin-none', 'margin: 0 !important;'],
+        ].each do |klass| %>
+        <tr class="middle">
+            <td>
+                <code><%= klass[0] %></code>
+            </td>
+            <td>
+                <% html_block class: "margin-none" do %>
+                    <%= klass[1] %>
+                <% end %>
+            </td>
+        </tr>
+        <% end %>
+    </table>
+    
+    <h3>Colors</h3>
+    <table class="uniformTable top">
+        <tr>
+            <th></th>
+            <th></th>
+        </tr>
+        <% [
+            ['.text-green', 'color: $green'],
+            ['.bg-green', 'background-color: $green'],
+            ['.a-green', 'a{ color: $green}'],
+            ['.a-hover-green', 'a:hover{ color: $green}'],
+        ].each do |klass| %>
+        <tr class="middle">
+            <td>
+                <code><%= klass[0] %></code>
+            </td>
+            <td>
+                <% html_block class: "margin-none" do %>
+                    <%= klass[1] %>
+                <% end %>
+            </td>
+        </tr>
+        <% end %>
+    </table>
+    
+    <h3>Sizes</h3>
+    <table class="uniformTable top">
+        <tr>
+            <th></th>
+            <th></th>
+        </tr>
+        <% [
+            ['.width-50-p', 'width: 50%'],
+            ['.width-50-px', 'width: 50px'],
+            ['.width-50-vw', 'width: 50vw'],
+            ['.max-width-50-p', 'max-width: 50%'],
+            ['.max-width-50-px', 'max-width: 50px'],
+            ['.height-50-p', 'height: 50%'],
+            ['.height-50-px', 'height: 50px'],
+            ['.height-50-vh', 'height: 50vh'],
+            ['.max-height-50-px', 'max-height: 50px'],
+            ['.min-height-50-vh', 'min-height: 50vh'],
+        ].each do |klass| %>
+        <tr class="middle">
+            <td>
+                <code><%= klass[0] %></code>
+            </td>
+            <td>
+                <% html_block class: "margin-none" do %>
+                    <%= klass[1] %>
+                <% end %>
+            </td>
+        </tr>
+        <% end %>
+    </table>
+    
+    <h3>Text</h3>
+    <table class="uniformTable top">
+        <tr>
+            <th></th>
+            <th></th>
+        </tr>
+        <% [
+            ['.text-caps', 'text-transform: uppercase'],
+            ['.text-small-less', 'font-size: 0.9em'],
+            ['.text-small', 'font-size: 0.8em'],
+            ['.text-large', 'font-size: 1.2em'],
+            ['.text-1rem', 'font-size: 1rem'],
+            ['.text-larger', 'font-size: 1.4em'],
+            ['.text-super', 'font-size: 3em'],
+            ['.text-subtle', 'font-size: 90%; opacity: 0.8'],
+            ['.text-subtle-more', 'font-size: 80%; opacity: 0.6'],
+            ['.text-muted', 'opacity: 0.8'],
+            ['.text-muted-more', 'opacity: 0.6'],
+            ['.text-left', 'text-align: left !important'],
+            ['.text-right', 'text-align: right'],
+            ['.text-center', 'text-align: center'],
+            ['.text-justify', 'text-align: justify'],
+            ['.text-overflow', '@include text-overflow'],
+            ['.text-bold', 'font-weight: 700'],
+            ['.text-light', 'font-weight: 300'],
+            ['.text-lightest', 'font-weight: 100'],
+            ['.text-normal', 'font-weight: normal !important'],
+            ['.text-middle', 'vertical-align:middle'],
+            ['.text-top', 'vertical-align:top'],
+            ['.text-tight', 'line-height:1.3'],
+            ['.required', 'color:$red'],
+            ['.warn:hover', 'color:$red'],
+            ['p.large', 'font-size:1.5em; font-weight:300'],
+            ['.text-italic', 'font-style: italic'],
+            ['.text-no-wrap', 'white-space: nowrap; overflow:hidden'],
+            ['.text-no-decoration', 'text-decoration: none; a{text-decoration: none;}'],
+            ['.text-height-1', 'line-height: 1'],
+            ['.text-warn', '&:hover{color:$red !important;}']
+        ].each do |klass| %>
+        <tr class="middle">
+            <td>
+                <code><%= klass[0] %></code>
+            </td>
+            <td>
+                <% html_block class: "margin-none" do %>
+                    <%= klass[1] %>
+                <% end %>
+            </td>
+        </tr>
+        <% end %>
+    </table>
+    
+    <h3>Layout</h3>
+    <table class="uniformTable top">
+        <tr>
+            <th></th>
+            <th></th>
+        </tr>
+        <% [
+            ['.hidden', 'display:none !important;'],
+            ['.round', 'border-radius:50%;'],
+            ['.rounded', 'border-radius: 0.25em;'],
+            ['.pointer', 'cursor: pointer !important;'],
+            ['.cursor-help', 'cursor: help;'],
+            ['.handle', 'cursor: hand;'],
+            ['.honeypot', "position:absolute !important;\nleft:-999999px !important;\nwidth:1px !important;\ndisplay:block !important;"],
+            ['.border-#{$direction}', 'border-#{$direction}: 1px solid $gray-light;'],
+            ['.border-dark-#{$direction}', 'border-#{$direction}: 1px solid darken($gray-light, 20);'],
+            ['img.disabled', '@include grayscale(1, 0.3)'],
+            ['table.fixed', 'table-layout: fixed;'],
+            ['.float-right', 'float:right;'],
+            ['.float-left', 'float: left;'],
+            ['.bleed-fix', 'position:static; overflow:hidden;'],
+            ['.clear', 'clear:both;'],
+            ['.block ', 'display: block;'],
+            ['.inline-block ', 'display:inline-block !important;'],
+            ['.align-middle', '@include align-middle;'],
+            ['.relative', 'position:relative;'],
+            ['ul.raw', 'margin: 0; padding: 0; list-style:none;'],
+            ['.text-col-2', 'column-count: 2; column-gap: 5em;'],
+            ['button.raw', 'outline: none; appearance: none; border: none; background:none;'],
+            ['.overflow-hidden', 'overflow:hidden;'],
+            ['.overflow-y', 'overflow-y: auto;'],
+            ['img.block', 'display:block; width: 100%;'],
+            ['.height-auto', 'height: auto;'],
+        ].each do |klass| %>
+        <tr class="middle">
+            <td>
+                <code><%= klass[0] %></code>
+            </td>
+            <td>
+                <% html_block class: "margin-none" do %>
+                    <%= klass[1] %>
+                <% end %>
+            </td>
+        </tr>
+        <% end %>
+    </table>
+    
+</div>

data/preview/index.html.erb

@@ -1,53 +1,77 @@
-<!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/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,
-    :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 class="uniform-nav vertical">
-        <ul>
-        <% sections.each do |section| %>
-            <li><a href="#<%= section %>"><%= section.to_s.titleize %></a></li>
-        <% end %>
-        </ul>
-    </div>
+<div class="text-center margin-top-more">
+    <img src="site/logo.png" width="451" height="101">
+    <p class="large">Sass components and helpers for building a UI.</p>
 </div>
-<div class="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 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>
+    <% html_block do %>
+// css
+@import 'uniform';
+// - OR -
+@import 'uniform/base';<% (Dir.foreach(File.join('vendor', 'assets', 'stylesheets', 'uniform')).reject{|x| %w(variables.scss mixins.scss base.scss).include?(x)}.to_a +
+    Dir.foreach(File.join('vendor', 'assets', 'stylesheets', 'uniform', 'helpers')).map{|x| "helpers/#{x}"}.to_a +
+    Dir.foreach(File.join('vendor', 'assets', 'stylesheets', 'uniform', 'components')).map{|x| "components/#{x}"}.to_a).select{|x| x.split('.').last == "scss"}.each do |x| %>
+@import 'uniform/<%= x.remove('.scss') %>';<% end %>
+
+// javascript
+//= require uniform
+// - OR -
+//= require uniform/base
+//= require uniform/select
     <% end %>
+    
 </div>
-<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
-</body>
+<div class="section">
+    <h1>Philosophy</h1>
+    <h3>Don't use ID's</h3>
+    <p>Unless you have to, and even then, think twice. HTML Id's make things not
+        reusable. There should only be one instance of an id in a document</p>
+
+    <h3>Use Semanitc Classes Presentationaly :)</h3>
+    <p>
+        Here's a decent post on OOCSS (Object Oriented CSS) as it relates to
+        semantic vs presentational classes:
+        <a href="http://blackfalcon.roughdraft.io/5255648-oocss-v-ooscss-sasscast-show-notes">OOCSS v OOSCSS</a>
+    <p>
+        <strong>TL;DR:</strong> Semantic classes explain what that element is.
+        Presentational classes explain what the shoud look like.
+    </p>
+    <p>
+        <code>class="property-list"</code> vs <code>class="ul-list col-sm-4"</code>
+    </p>
+    <p>
+        Some of us don't want to touch css files (preference: presentational),
+        and some of us live there (preference: semantic). Honestly, the art of
+        good ui development is balancing semantic and presentational classes.
+        Each taken to their extreme is bad.
+    </p>
+    <p>
+        Structure html so that the semantic class is first and presentational
+        classes follow.
+    </p>
+    <p><code>class="property-list ul-list col-sm-4"</code></p>
+
+    <h3>Save the Namespace, save the world</h3>
+    <p>Don't make presentational classes that will clash with elements that could mean something else. I'm looking at you Bootsrap!</p>
+    <p><code>class="label"</code> should be <code>class="text-label"</code></p>
+
+    <h3>camelCase vs train-case</h3>
+    <p>Use camelCase for class names for components, not train-case or snake_case.</p>
+    <p>Use tran-case for class names for helpers or modifiers.</p>
+
+    <h3>Wrappers and Containers</h3>
+    <p>
+        Both <code>wrapper</code> and <code>container</code> can be used as class names
+        for an element that goes around a component. The difference is nuanced.
+        <code>wrapper</code> should be used to wrap a <strong>single</strong> element for a formatting purpose.
+        A <code>container</code> should be used to wrap <strong>multiple</strong> elements.
+    </p>
+    
+</div>

data/preview/layout.html.erb

@@ -0,0 +1,63 @@
+<!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">
+            <%  %>
+            <% [
+                :helpers,
+                :colors,
+                :grid,
+                :buttons,
+                [:tables],
+                :cards,
+                :rows,
+                :form,
+                :loaders,
+                :nav,
+                :tabs,
+                [:tiles],
+                [:labels],
+                [:alerts],
+                [:dropdown],
+                [:modal],
+                [:select],
+                [:tooltip]
+            ].each do |page| %>
+                <% if page.is_a?(Array)
+                    page = page[0]
+                    todo = true
+                end %>
+                <a href="/site/<%= page %>.html">
+                    <%= page.to_s.titleize %>
+                    <% if todo %>
+                        <span class="uniformLabel yellow">todo</span>
+                    <% end %>
+                </a>
+            <% end %>
+        </div>
+    </div>
+</div>
+<div class="main-content overflow-hidden">
+    <%= yield %>
+</div>  
+<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+<script
+  src="https://code.jquery.com/jquery-1.11.3.min.js"
+  integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
+  crossorigin="anonymous"></script>
+<script src="/site/preview.js"></script>
+</body>

data/preview/loaders.html.erb

@@ -0,0 +1,83 @@
+<div class="section">
+    <h1>Loaders</h1>
+    <div class="grid">
+        <div class="col-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-6">
+            <% html_block do %>
+<div class="uniform-loader">
+    <div class="uniform-loader-container">
+        <span>&bull;</span>
+        <span>&bull;</span>
+        <span>&bull;</span>
+    </div>
+</div>
+            <% end %>
+        </div>
+    </div>
+    <div class="grid">
+        <div class="col-6">
+            <code>.cover</code><br>
+            <span style="position:relative; display:inline-block">
+                <img src="https://unsplash.it/150/100/?random" style="display: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-6">
+            <% html_block do %>
+<span style="position:relative; display:inline-block">
+    <img src="https://unsplash.it/150/100/?random" style="display:block;">
+    <div class="uniform-loader cover">
+        <div class="uniform-loader-container">
+            <span>&bull;</span>
+            <span>&bull;</span>
+            <span>&bull;</span>
+        </div>
+    </div>
+</span>
+            <% end %>
+        </div>
+    </div>
+    <div class="grid">
+        <div class="col-6">
+            <code>.cover.light</code><br>
+            <span style="position:relative; display:inline-block">
+                <img src="https://unsplash.it/150/100/?random" style="display: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-6">
+            <% html_block do %>
+<span style="position:relative; display:inline-block">
+    <img src="https://unsplash.it/150/100/?random" style="display:block;">
+    <div class="uniform-loader cover light">
+        <div class="uniform-loader-container">
+            <span>&bull;</span>
+            <span>&bull;</span>
+            <span>&bull;</span>
+        </div>
+    </div>
+</span>
+            <% end %>
+        </div>
+    </div>
+</div>