Sass components and defaults for building a UI that's on fleak.

Installation

Add to your gem file
gem 'uniform-ui'

Execute:
$ bundle

Or install it yourself:
$ gem install uniform-ui

Include the css library in your asset pipeline.
@import 'uniform';

Philosophy

Don't use ID's

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

Use Semanitc Classes Presentationaly :)

Here's a decent post on OOCSS (Object Oriented CSS) as it relates to semantic vs presentational classes: OOCSS v OOSCSS

TL;DR: Semantic classes explain what that element is. Presentational classes explain what the shoud look like.

class="property-list" vs class="ul-list col-sm-4"

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.

Structure html so that the semantic class is first and presentational classes follow.

class="property-list ul-list col-sm-4"

Save the Namespace, save the world

Don't make presentational classes that will clash with elements that could mean something else. I'm looking at you Bootsrap!

class="label" should be class="text-label"

Train-case

Use train-case for class names, not camelCase or snake_case. It's quicker to type and honestly just conventional.

Wrappers and Containers

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.

 

<div class="property-wrapper">
    <div class="property">
        <div class="property-container">
        </div>
    </div>
</div>

Colors

sass// $green-light class// .green-light
sass// $green class// .green
sass// $green-dark class// .green-dark
 
sass// $blue-light class// .blue-light
sass// $blue class// .blue
sass// $blue-dark class// .blue-dark
 
sass// $red-light class// .red-light
sass// $red class// .red
sass// $red-dark class// .red-dark
 
sass// $gray-light class// .gray-light
sass// $gray class// .gray
sass// $gray-dark class// .gray-dark
 
sass// $yellow-light class// .yellow-light
sass// $yellow class// .yellow
sass// $yellow-dark class// .yellow-dark
 

Buttons

Mix and match styles to make the right button, all colors are available as well.

<a href='#' class='uniform-btn'></a>

Normal .green
Button Button
:hover or .hover Button Button
:active or .active Button Button
:disabled or .disabled Button Button
.subtle Button Button
.small Button Button
.large Button Button
.outline Button Button
.circle Button Button
.block Button Button

Grid

TODO

Inputs

Custom Inputs

Styled Select Box 

<span class='uniform-select'>
    <select>
        <option>An Option</option>
    </select>
</span>

Inline Inputs

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.

<div class="inline-input">
    <span class="label">$</span>
    <span>
        <input id="name" placeholder="Jonathan Doe">
    </span>
    <span class="units">/hour</span>
</div>
<div class="inline-input">
    <span class="label">
        <label for="car">Car Preference</label>
    </span>
    <span>
        <select id="car"><option>Tesla</option></select>
    </span>
</div>
<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>

Forms

TODO

Loaders

• • • 
<div class="uniform-loader">
    <div class="uniform-loader-container">
        <span>&bull;</span>
        <span>&bull;</span>
        <span>&bull;</span>
    </div>
</div>
• • • 
<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>
• • • 
<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>

Cards

Sample Card
Put Content In Here
<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>
John Dozer
Edit
Company
Friendly Associates
Title
Head Dude
Skills
Stapling, Jogging
<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>

Tiles

TODO

Rows

TODO

Lists

TODO

Tables

TODO

Nav

Logo
<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 class="uniform-nav">
    <ul>
        <li><a>Account</a></li>
        <li><a>Sign Out</a></li>
    </ul>
</div>

Tabs

TODO

Helpers

TODO