Needs a UI Guide

[nashvail]

Before we start to work on styling components, it'd be good to have a solid UI Document first. Components to be included in first UI guide (phase one) :

Style Guide (.sketch)

Typography

Types

• [ ] Heading
• [ ] Body
• [ ] Emphasis (Bold/ Italics)
• [ ] Blockquote
• [ ] Addresses
• [ ] Abbreviations

  Buttons

Types

• [x] Default
• [x] Primary
• [x] Success
• [x] Info
• [x] Warning
• [x] Danger
• [ ] Block Buttons
• [ ] Button Bars
• [ ] Icon + Text
• [ ] Icon Only

States (See #10 )

• [ ] Normal
• [ ] Hover
• [ ] Focus
• [ ] Disabled
• [ ] Active
• [ ] Readonly

Sizes

• [ ] Extra Small
• [ ] Small
• [ ] Medium
• [ ] Large
• [ ] Extra Large

Progress so far (Open for community feedback)

Input

Types

HTML4 (See #6)

• [x] text
• [ ] textarea
• [x] password
• [x] checkbox
• [x] radio
• [ ] submit
• [ ] reset
• [ ] hidden
• [ ] file / Image
• [ ] Select
• [x] Labels (inline and above input)

HTML5 (See #8)

• [ ] search
• [ ] email
• [ ] url
• [ ] tel
• [ ] number
• [ ] range
• [ ] date
• [ ] month
• [ ] week
• [ ] time
• [ ] datetime
• [ ] datetime-local
• [ ] color

States

• [x] Normal
• [x] Focused
• [x] Disabled
• [x] Error
• [ ] Disabled
• [ ] Active
• [ ] Readonly

Sizes

• [ ] Emphasized
• [ ] Standard
• [ ] Tiny

Validation Styling (See #9 )

• [x] Input/Label Styling for Validation
• [x] Inline Validation Messages
• [x] Above Form Validation Messaging

Progress so far (Open for community feedback)

Notifications

Types

• [x] Default
• [x] Success
• [x] Info
• [x] Warning
• [x] Danger

Table Images

[sfrisk]

Feel free to give input on design directions.

@arschmitz @scottgonzalez thoughts from the UI front?