Built on

There are many things these tools do. These docs are for things specific to uniform.

Colors

`sass// $gray-light`	`sass// $yellow-light`	`sass// $green-light`	`sass// $blue-light`	`sass// $red-light`
`sass// $gray`	`sass// $yellow`	`sass// $green`	`sass// $blue`	`sass// $red`
`sass// $gray-dark`	`sass// $yellow-dark`	`sass// $green-dark`	`sass// $blue-dark`	`sass// $red-dark`

CSS Guidelines

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.

Buttons

	Normal or `btn-default`	`.green` or `.btn-primary`
	Button	Button
`:hover` or `.hover`	Button	Button
`:active` or `.active`	Button	Button
`:disabled` or `.disabled`	Button	Button
`.subtle` or `.btn-xs`	Button	Button
`.small` or `.btn-sm`	Button	Button
`.large` or `.btn-lg`	Button	Button
`.outline`	Button	Button
`.circle`	Button	Button
`.block` or `.btn-block`	Button	Button

Forms/Inputs

Custom Inputs

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.

Name

Car Preference

    
        
            Name

Table Form


            
                        <%= form_tag "#", :class => "table-form" do %>
        
            
                <%= label_tag :name %>
                <%= text_field_tag :name, "", :placeholder => "Jonathan Doe" %>
                
            
            
                <%= label_tag :email %>
                <%= email_field_tag :email, "", :placeholder => "jonathan@42floors.com"  %>
                
            
            
                <%= label_tag :phone %>
                <%= telephone_field_tag :phone, "", :placeholder => "###-###-####"  %>
                
            
        
        
            <%= submit_tag "Contact Us", {class: "btn outline white large"} %>
        
    <% end %>


    
        

        Loaders

        Dots
        
            
                •
                •
                •
            
        
            
        
            •
            •
            •
        
    



        
            
                •
                •
                •
            
        
        Optional Class: light
                    
                
                    •
                    •
                    •
                
            



        Optional Class: cover
                
            
                •
                •
                •
            
        
        
        
            
                •
                •
                •
            
        
    



        Windows
        
            
                
                
                
                
                
                
                
                
                
                
                
                
                
                
            
        
            
        
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        
    

        


        Optional Class: small
        
            
                
                
                
                
                
                
                
                
                
                
                
                
                
                
            
        
            
        
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        
    

        



        Optional Class: cover

Uniform