uniform-ui 1.0 → 2.2.1

data/preview/grid.html.erb

@@ -1,304 +0,0 @@
-<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>
-    <% html_block do %>
-<div class="grid">
-    <div class="col">content</div>
-    <div class="col">content</div>
-    <div class="col">content</div>
-</div>
-    <% end %>
-    <h3>Grid Options</h3>
-    <% [
-        'grid-center',
-        'grid-top',
-        'grid-bottom',
-        'grid-stretch',
-        'grid-h-left',
-        'grid-h-center',
-        'grid-h-right',
-        'grid-h-around',
-        'grid-h-between'
-    ].each do |klass| %>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .<%= klass %>
-        <div class="grid <%= klass %>">
-            <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>
-    <% end %>
-
-    <% [
-        'grid-v-top',
-        'grid-v-center',
-        'grid-v-bottom',
-        'grid-v-around',
-        'grid-v-between',
-        'grid-v-stretch'
-    ].each do |klass| %>
-        <div class="margin-bottom bg-gray-light pad-bottom">
-        .grid .<%= klass %> .height-300-px
-        <div class="grid <%= klass %> 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>
-    <% end %>
-    
-    
-    <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>

data/preview/helpers.html.erb

@@ -1,225 +0,0 @@
-<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,77 +0,0 @@
-<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="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>
-<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/labels.html.erb

@@ -1 +0,0 @@
-TODO

data/preview/layout.html.erb

@@ -1,63 +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">
-            <%  %>
-            <% [
-                :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>