AFFHT Style Guide

This is the style guide for the AFFHT application.

We use Bootstrap 3.3.4 for page layout and adding elements (docs).

Toggle Menu

Color Scheme

We want to override the default Bootstrap colors with our own using the bootstrap-override.css file.

Our colors were generated with a base color #094B83 using paletton.com

Main Color#094B83
Lightest#3874A5
Light#1762A0
Default Color#094B83
Dark#063D6B
Darkest#032D50
Black#000000
Light Gray#E6E6E6
White#FFFFFF

Typography

Put a description here.

TITLE
Label
Normal Text

Code Samples

Code samples should go here.

Buttons

We use the default Bootstrap buttons and colors.

Button Colors


Button Sizes

Custom AFFHT Sidebar Buttons

Standard Button
Dropdown Button

Code Samples

Code samples should go here.

Modals

We are using Bootstrap modals and should be set to a maximum hight of 80% with "auto" scrolling.

Modal sample here with header, content-area (auto-scroll), footer.

Code Samples

Code samples should go here.

Status

Uses Bootstrap helper class for contextual colors.

Background Colors

bg-primary

bg-success

bg-info

bg-warning

bg-danger

Code Samples

Code samples should go here.

Alerts

Success! Indicates a successful or positive action.
Info! Indicates a neutral informative change or action.
Warning! Indicates a warning that might need attention.
Danger! Indicates a dangerous or potentially negative action.