Welcome to the UI Styleguide

What is this?

Design Styleguides and code standards documents have been a successful way of ensuring brand and code consistency, but in between the code and the design examples. These are maintained by front-end developers, and are more dynamic than visual design guidelines, documenting every component and its code on the site in one place.

Why do we need this document?

• Consistency
• Communication
• Standardize the CSS
• Standarize Similar patterns
• Easier to maintain consistency in team
• Separate content from styling
• Intended use documented
• Quicker page build out
• Quicker manual testing
• Easier to collaboration for teams and thirdparties

Future Project Layout

1. Design Elements
    1. Branding
    2. Colour Palette
        1. Brand Colours
        2. UI Colours
    3. Typography
    4. Icons
2. UI Components
    1. Buttons
    2. Cards
    3. Navigation
        1. Main
        2. Breadcrumbs
        3. Pagination
        4. Tabs
    4. Lists
    5. Form Inputs
        1. Inputs
        2. Selects
        3. Checkboxes
        4. Radiobuttons
        5. Field Components
    6. Social Buttons
    7. Alerts
    8. Carousel
    9. Links
    10. Call-to-actions
    11. Tables
    12. Separators
    13. Carts
3. Group Components
    1. Site Header
    2. Site Footer
    3. Forms
4. Utilities
    1. Grids
    2. Classes
        1. General
        2. No Javascript
        3. Responsive
    3. Mixins
        1. Responsive
        2. Utility
    4. Silent Classes
5. Layouts