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';

Include the javascript library in your asset pipeline.
//= require uniform

Scope Components

Optionally, you can scope the components you want included in your assets.

// css
@import 'uniform';
// - OR -
@import 'uniform/base';
@import 'uniform/helpers';
@import 'uniform/defaults';
@import 'uniform/helpers/text';
@import 'uniform/helpers/colors';
@import 'uniform/helpers/sizes';
@import 'uniform/helpers/margin';
@import 'uniform/helpers/padding';
@import 'uniform/components/tile';
@import 'uniform/components/label';
@import 'uniform/components/form';
@import 'uniform/components/buttons';
@import 'uniform/components/select';
@import 'uniform/components/card';
@import 'uniform/components/grid';
@import 'uniform/components/table';
@import 'uniform/components/row';
@import 'uniform/components/tabs';
@import 'uniform/components/tooltip';
@import 'uniform/components/dropdown';
@import 'uniform/components/alert';
@import 'uniform/components/loaders';
@import 'uniform/components/nav';
@import 'uniform/components/modal';

// javascript
//= require uniform
// - OR -
//= require uniform/base
//= require uniform/select

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"

camelCase vs train-case

Use camelCase for class names for components, not train-case or snake_case.

Use tran-case for class names for helpers or modifiers.

Wrappers and Containers

Both wrapper and container can be used as class names for an element that goes around a component. The difference is nuanced. wrapper should be used to wrap a single element for a formatting purpose. A container should be used to wrap multiple elements.