Layout
We utilize a grid to standardize common layout patterns. These are
simple skeleton divs. They are all responsive and break to a single column at 768px. They can be nested
inside one another and maintain correct padding. The code is in base.css.scss in assets. If you need any
additional configuration (such as .four-columns), feel free to add it. However, if it's only needed in one
place, just make it custom.
Two Columns (.two-columns)
.column
.column
Three Columns (.three-columns)
.column
.column
.column
Golden Columns (.golden-columns)
These columns are based on the golden ratio. The larger column is 1.618 times larger than the small.
.large-column
.small-column
Sidebar Columns (.sidebar-columns)
Sidebar columns sets the sidebar column as 25% width, and content column as 75% width.
Fixed Width Sidebar Columns (.fixed-width-sidebar-columns)
The sidebar is a fixed width (about 25% when the screen is at 1200px). This can be changed depending on the implementation. The content column resizes dynamically while the sidebar stays fixed. The sidebar column must come first in the markup. If you want the sidebar on the left side, use .fixed-width-sidebar-columns.sidebar-left.
Clearfix
Can be used as a mixin:
@include clearfix;
or as a class:
.clearfix
Practice and Test Progress Circles
N/A
Incomplete:
$gray-50
(#D2D2D2)
25%
Correct
Incorrect:
$red-50
(#DC3235)
Correct:
$green-50
(#008153)
67
Percentile
Incorrect:
$gray-50
(#D2D2D2)
Correct:
$blue-50
(#0E788F)
Strengths & Weaknesses
N/A
Beginner
Basic
Intermediate
Proficient
Advanced
Expert
N/A
background:
$gray-10
(#F2F2F2)
border: 1px
$gray-50
(#D2D2D2)
color:
$gray-100
(#333)
same style as 'default' button
Beginner
background:
$red-10
(#FDE5E5)
border: 1px
$red-20
(#F3B8AD)
color:
$red-60
(#BA2A2E)
same style as 'low confidence'
Basic
background:
$yellow-10
(#FFF9E6)
border: 1px
$yellow-20
(#F9E8B7)
color:
$yellow-80
(#766123)
same style as 'medium confidence'
Intermediate
Proficient
Advanced
Expert
background:
$green-10
(#E9F5F1)
border: 1px
$green-20
(#B3CCBD)
color:
$green-60
(#0D6C47)
same style as 'high confidence'
Confidence Level Buttons
| Default | Hover | Selected | Classes |
|---|---|---|---|
|
High
background:
$gray-10
(#F2F2F2)
border: 1px
$gray-50
(#D2D2D2)
color:
$gray-100
(#333)
|
High
background:
$gray-20
(#EAEAEA)
border: 1px
$gray-50
(#D2D2D2)
color:
$gray-100
(#333)
|
High
background:
$green-10
(#E9F5F1)
border: 1px
$green-20
(#B3CCBD)
color:
$green-60
(#0D6C47)
|
.high-confidence
|
| Medium | Medium |
Medium
background:
$yellow-10
(#FFF9E6)
border: 1px
$yellow-20
(#F9E8B7)
color:
$yellow-80
(#766123)
|
.medium-confidence
|
| Low | Low |
Low
background:
$red-10
(#FDE5E5)
border: 1px
$red-20
(#F3B8AD)
color:
$red-60
(#BA2A2E)
|
.low-confidence
|
Multiple Choice Questions
Forms
These are the defaults for any form element. Use .form container on the form. On marketing, all select elements have Chosen applied.
Webapp has a custom implementation that must be applied manually.
Below are form validations and field errors. %span.help elements
will not have a style unless they are inside of a .control-group and immediately following an input, select or text area.
Alerts and Messaging
Alerts
Informative notification style
background:
$blue-60
(#14697D)
border: 1px
$blue-60
(#14697D)
color:
white
(#FFF)
Successful notification style
background:
$green-10
(#E9E5F1)
border: 1px
$green-40
(#559572)
color:
$green-60
(#0D6C47)
Warning notification style
background:
$yellow-10
(#FFF9E6)
border: 1px
$yellow-40
(#F1CD58)
color:
$yellow-80
(#766123)
Errors notification style
background:
$red-10
(#FDE5E5)
border: 1px
$red-40
(#E36657)
color:
$red-60
(#BA2A2E)
Flashes
This is a notice flash
This is a success flash
This is a warning flash
This is an error flash
Flashes slide in under the fixed header and automatically dismiss themselves after 20 sec.