Browser Support Complete

Below is the list of browsers/devices this project supports. The OS or browser version provided is the minimum required. So if the requirements say we support Internet Explorer 8, we support Internet Explorer 8 and greater versions.
9.0 Latest Version Latest Version Latest Version
N/A N/A iOS 7.1 OS 4.3
Edge N/A iOS 7.1 OS 4.3

This site is responsive

This site supports CSS3

Colors Incomplete

Theme colors are the brands main color scheme across the site. Typically there are two base colors and possible lighter or darker variations.

  • Brand Primary
  • Brand Light

Grayscale colors are the variations of gray shades used across the site. We typically see these with borders, zebra tables, muted text, and slight background contrasts.

  • Gray 1
  • Gray 2
  • Gray 3
  • Gray 4
  • Gray 5
  • Gray 6

Contextuals are fairly strait forward and associate an element with a feeling. Typical contextual colors are things like positive, negative, and neutral changes in a data point.

  • Positive
  • Negative
  • Neutral
  • Color 1
  • Color 2
  • Color 3
  • Color 4
  • Color 5
  • Color 6
  • Color 7
  • Color 8
  • Color 9
  • Color 10
  • Color 11
  • Color 12
  • Color 1
  • Color 2
  • Color 3
  • Color 4
  • Color 5
  • Color 6
  • Color 7
  • Color 8
  • Color 9
  • Color 10
  • Color 11

Typography Incomplete

We've seperated presentation from markup with the use of header classes. Note these are used for page and section headers. Media headers should rely on the media-{size}.

.page-heading

.standard-heading

.feature-heading

.small-heading

Transform text properties on a given element, paragraph, or word with these text modifiers.

We are all Wizards but we dont have to be Grumpy.

We are all Wizards but we dont have to be Grumpy.

We are all Wizards but we dont have to be Grumpy.

We are all Wizards but we dont have to be Grumpy.

We are all Wizards but we dont have to be Grumpy.

This is using a <hr> element but can be applied to other elements if preferred semantically.


Here is some text that should be truncated

Securities Incomplete

SYM
Security Name
EXCHG
Status

Security Name

  • sym
  • exchg
  • Locale

Labels Incomplete

.label-default .label-primary .label-success .label-info .label-warning .label-danger
.label-default

Equities 16

Grid Complete

It's pretty common for components to have equal heights these days which is how rowflex was born. Using table-cell layouts and some css tricks, we're able to replicate the grid system with flush heights.

Section Panel

We don't have much content in this module.

Section Panel

We have more content in this module. Wel, we will...

Notice how the heights of both are flush. This is rowflex.

Flip the direction of columns with the .row-rtl class. This is extremely useful when components need to float in a perticular order but stack oppositely.

Section Panel

We don't have much content in this module.

Section Panel

We have more content in this module. Wel, we will...

Notice how the heights of both are flush. This is rowflex.

Divided Columns.

Section Panel

Content

Section Panel

Content

Section Panel

Content

Section Panel

Content

Section Panel

Content

Section Panel

Content

Section Panel

Content

Section Panel

Content

Section Panel

Content

Alerts Incomplete

Alert Title
Alert Body
This content is unavailable

Icons Incomplete

There are four possible options for icon sizes. Adding a modifier class of: .icon-xl, .icon-lg, .icon-md, or leave empty to consume default sizing.

There are four possible options with pairing icons and text. Icons and text must be wrapped in an .icon-container element to resolve height issues, which can then have four possible options: .icon-xl, .icon-lg, .icon-md, or the default.

Grumpy Wizards Make Toxic Brew

Grumpy Wizards Make Toxic Brew

Grumpy Wizards Make Toxic Brew

Grumpy Wizards Make Toxic Brew

Dropdowns Incomplete

Label

Utilities Complete

Float elements to the left or right with the .pull-left and .pull-right classes. Use a .clearfix to contain floating children.

Manipulate the top, right, left, bottom, x-axis, and y-axis margin or padding of elements with these classes. There are four possible options, starting with zero and multiplying by incremenets of @spacer (10px default)

  • .m-t-0
  • .m-t-1
  • .m-t-2
  • .m-t-3
  • .p-t-0
  • .p-t-1
  • .p-t-2
  • .p-t-3
  • .m-b-0
  • .m-b-1
  • .m-b-2
  • .m-b-3
  • .p-b-0
  • .p-b-1
  • .p-b-2
  • .p-b-3
  • .m-l-0
  • .m-l-1
  • .m-l-2
  • .m-l-3
  • .p-l-0
  • .p-l-1
  • .p-l-2
  • .p-l-3
  • .m-r-0
  • .m-r-1
  • .m-r-2
  • .m-r-3
  • .p-r-0
  • .p-r-1
  • .p-r-2
  • .p-r-3
  • .m-a-0
  • .m-a-1
  • .m-a-2
  • .m-a-3
  • .p-a-0
  • .p-a-1
  • .p-a-2
  • .p-a-3
  • .m-x-0
  • .m-x-1
  • .m-x-2
  • .m-x-3
  • .p-x-0
  • .p-x-1
  • .p-x-2
  • .p-x-3
  • .m-y-0
  • .m-y-1
  • .m-y-2
  • .m-y-3
  • .p-y-0
  • .p-y-1
  • .p-y-2
  • .p-y-3
.b-t-0
.b-b-0
.b-l-0
.b-r-0
.b-x-0
.b-y-0
.b-a-0

Lists Complete

As general as lists can get. Add a class of .list to normalize the styles across browsers but consume no other custom styling.

Taking generic lists even further, we can strip all styles from even a default list by adding the class .list-unstyled to your existing .list element.

Adding a class of .list-divided will consume border styles on the top property. If you want these reversed (bottom borders) simply add the modifier class .reverse and if you want to remove the list gutters, use the class .list-condensed.

The bare bones for inline lists. Simply add a class of .list-inline to your .list element to change the display. Due to box model weirdness, we've changed the default display of inline lists from inline-block to floating left.

Inline Pipe lists consume the same styles as .list-inline with an added visual display of a pipe. Given the variations of pipe hights per a given design, the pipe is actually a border style not an element. To consume pipes add a class of .list-pipe.

Inline Bullet lists consume the same styles as .list-inline with an added visual display of a bullets. To consume pipes add a class of .list-pipe.

Definition Lists Incomplete

IPO Date
12/29/1986
Website
www.website.com
Phone Number
1-900-MIX-ALOT
Address
5280 Central Ave
Boulder, CO 80301
Last Price
$1.98
Today's Change
+0.01 (0.72%)
Avg. Volume
6.68M/13.37M
Market Cap
2.67B
52 Week Range
$0.72 - 2.79
Trading Volume
22.2M - 28.4M
Last Price
$1.98
Today's Change
+0.01 (0.72%)
Avg. Volume
6.68M/13.37M
Market Cap
2.67B
52 Week Range
$0.72 - 2.79
Trading Volume
22.2M - 28.4M
Open:
$2.033
High:
$2.033
Low:
$2.033
Close:
$2.033
Time
10:23am ES
Standard Deviation
Vivamus sollicitudin risus vitae molestie dignissim. Aliquam molestie semper pretium. Curabitur non odio at elit fringilla ultricies. Donec id volutpat neque. Nulla sollicitudin massa eu leo venenatis fermentum. Sed ut risus iaculis, finibus enim non, fermentum risus. Fusce feugiat odio odio, vel pretium orci vestibulum sed. Donec eu aliquet massa, eu facilisis arcu. Nulla facilisi. Praesent vel augue dapibus, interdum mauris id, scelerisque erat.
Beta
Vivamus sollicitudin risus vitae molestie dignissim. Aliquam molestie semper pretium. Curabitur non odio at elit fringilla ultricies. Donec id volutpat neque. Nulla sollicitudin massa eu leo venenatis fermentum. Sed ut risus iaculis, finibus enim non, fermentum risus. Fusce feugiat odio odio, vel pretium orci vestibulum sed. Donec eu aliquet massa, eu facilisis arcu. Nulla facilisi. Praesent vel augue dapibus, interdum mauris id, scelerisque erat.
Share Ratio
Vivamus sollicitudin risus vitae molestie dignissim. Aliquam molestie semper pretium. Curabitur non odio at elit fringilla ultricies. Donec id volutpat neque. Nulla sollicitudin massa eu leo venenatis fermentum. Sed ut risus iaculis, finibus enim non, fermentum risus. Fusce feugiat odio odio, vel pretium orci vestibulum sed. Donec eu aliquet massa, eu facilisis arcu. Nulla facilisi. Praesent vel augue dapibus, interdum mauris id, scelerisque erat.
Alpha
Vivamus sollicitudin risus vitae molestie dignissim. Aliquam molestie semper pretium. Curabitur non odio at elit fringilla ultricies. Donec id volutpat neque. Nulla sollicitudin massa eu leo venenatis fermentum. Sed ut risus iaculis, finibus enim non, fermentum risus. Fusce feugiat odio odio, vel pretium orci vestibulum sed. Donec eu aliquet massa, eu facilisis arcu. Nulla facilisi. Praesent vel augue dapibus, interdum mauris id, scelerisque erat.

Navigation Incomplete

Navigation in pill form. No, you don't need a glass of water for these. Just add a class .nav-pills to consume styles. You can also add a class of .nav-justified, like above, to evenly distribute tabs across a container.

Navigation in pill form. No, you don't need a glass of water for these. Just add a class .nav-pills to consume styles. You can also add a class of .nav-justified, like above, to evenly distribute tabs across a container.

Cards Incomplete

Closed
Oil (Light Crude)
$46.21
-0.43 (-0.12%)
Open
CAD / EUR
$1.13
-0.43 (-0.12%)
PTB TSX
Powershares Tactical Bond ETF
$1.13 +1.12 (1.2%)
[///TODO: PROVIDE APPROPRIATE CAPTION]
52 Wk Range NER
117.08 - 20.55 1.20%
Open
S&P / TSX 60
13,701.14
+0.43 (0.12%)
Open
S&P / TSX 60
13,701.14
+0.43 (0.12%)
Open
S&P / TSX 60
13,701.14
+0.43 (0.12%)
Open
S&P / TSX 60
13,701.14
+0.43 (0.12%)
Open
S&P / TSX 60
13,701.14
+0.43 (0.12%)
Open
S&P / TSX 60
13,701.14
+0.43 (0.12%)

Top Advancer

BBD.D price moved 23.64% from its previous close

///TODO: insert alt
All data delayed

Media heading
Financial post

More news on this company →

BBD.D price moved 23.64% from its previous close

///TODO: insert alt
All data delayed

NEE reached a new 52-week high.

///TODO: insert alt
All data delayed

Media Incomplete

.media-small

Financial Post |

.media-medium

Financial Post |

.media-large

Financial Post |

Use .media-stacked to drop the float off the .media-object. This pushes the text below it. Note the sizes of these sections are just columns. .media-stacked effects the image and some margins only!

.media-stacked media-small

Financial Post |

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Continue Reading →

.media-stacked media-medium

Financial Post |

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Continue Reading →

.media-stacked media-large

Financial Post |

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Continue Reading →
  • .media-small

    Financial Post |
  • .media-small

    Financial Post |
  • .media-small

    Financial Post |

Panels Incomplete

Panel Title

Panel body

Panel Title

Panel Secondary Title

Panel Body

Standard Deviation

1Y (%)
15.4
3Y (%)
60.4
5Y (%)
22.4

Market price VS. TSX

  • Market Price
  • TSX
Panel Body

Tables Incomplete

Table Caption

Captions must always be present on tables.
Hide a caption with class .sr-only
Symbol/ Fund Name Price Change As of Date Alpha Beta Average
THOPX
Thomson Bond Fund
40.67 0.007 (0.8%) 11/04/16 3.4 -2.09 21.77%
THOPX
Thomson Bond Fund
40.67 0.007 (0.8%) 11/04/16 3.4 -2.09 21.77%
THOPX
Thomson Bond Fund
40.67 0.007 (0.8%) 11/04/16 3.4 -2.09 21.77%
THOPX
Thomson Bond Fund
40.67 0.007 (0.8%) 11/04/16 3.4 -2.09 21.77%
THOPX
Thomson Bond Fund
40.67 0.007 (0.8%) 11/04/16 3.4 -2.09 21.77%

Table Caption

Symbol/ Fund Name Price Change As of Date Alpha Beta Average
THOPX
Thomson Bond Fund
40.67 0.007 (0.8%) 11/04/16 3.4 -2.09 21.77%
THOPX
Thomson Bond Fund
40.67 0.007 (0.8%) 11/04/16 3.4 -2.09 21.77%
THOPX
Thomson Bond Fund
40.67 0.007 (0.8%) 11/04/16 3.4 -2.09 21.77%
THOPX
Thomson Bond Fund
40.67 0.007 (0.8%) 11/04/16 3.4 -2.09 21.77%
THOPX
Thomson Bond Fund
40.67 0.007 (0.8%) 11/04/16 3.4 -2.09 21.77%

Table Caption

Sep 2011 Sep 2012 Sep 2013 Sep 2014 Sep 2015
Liabilities 17, 712 17, 712 17, 712 17, 712 17, 712
Liabilities 17, 712 17, 712 17, 712 17, 712 17, 712
Liabilities 17, 712 17, 712 17, 712 17, 712 17, 712
Liabilities 17, 712 17, 712 17, 712 17, 712 17, 712
Liabilities 17, 712 17, 712 17, 712 17, 712 17, 712

Table Caption

Captions must always be present on tables.
Hide a caption with class .sr-only
Symbol/ Fund Name Price Change As of Date Alpha Beta Average
THOPX
Thomson Bond Fund
40.67 0.007 (0.8%) 11/04/16 3.4 -2.09 21.77%
THOPX
Thomson Bond Fund
40.67 0.007 (0.8%) 11/04/16 3.4 -2.09 21.77%
THOPX
Thomson Bond Fund
40.67 0.007 (0.8%) 11/04/16 3.4 -2.09 21.77%
THOPX
Thomson Bond Fund
40.67 0.007 (0.8%) 11/04/16 3.4 -2.09 21.77%
THOPX
Thomson Bond Fund
40.67 0.007 (0.8%) 11/04/16 3.4 -2.09 21.77%
[///TODO: PROVIDE APPROPRIATE CAPTION]
52 Wk Range NER
117.08 - 20.55 1.20%

Behaves like DL on larger breakpoint, shifts to table layout at smaller breakpoints

///TODO: Add Meaningful caption
Market Price $1.25
As of 03/25/2016

Behaves like DL on larger breakpoint, shifts to table layout at smaller breakpoints

///TODO: Add Meaningful caption
Market Price $1.25
As of 03/25/2016
Market Price $1.25
As of 03/25/2016

Forms Incomplete

Stochastics show periods where a stock is overbought or oversold

Modals Incomplete

>767px modal is currently using 100vh for height setting. This implementation will probably need to use calc() to remove the height of FP's nav bar and top: the same amount to position it below the header.

Visual Indicators Complete

{Company} is currently
$99.00
with a low of
$0.01
and a high of
$100.00
{ Mutual Fund } currently has a load type of { value }
.legend.legend-color-1
.legend.legend-color-2
.legend.legend-color-3
.legend.legend-color-4
.legend.legend-color-5
.legend.legend-color-6
.legend.legend-blank
.legend.legend-2-color-1
.legend.legend-2-color-2
.legend.legend-2-color-3
.legend.legend-2-color-4
.legend.legend-2-color-5
.legend.legend-2-color-6
.legend.legend-3-color-1
.legend.legend-3-color-2
.performance.performance-positive
.performance.performance-neutral
.performance.performance-negative
Historical analyst ratings for {Company}
Hold current rating
Sell As of 1 month ago
Buy As of 3 months ago
Hold As of 1 year ago
Recommendation Current# of Analysts 1 Month# of Analysts 3 Months# of Analysts 1 Year# of Analysts
Outperform 0 1 2 0
Buy 3 1 4 5
Hold 12 8 8 0
Sell 9 4 6 0
Underperform 0 0 2 0
Total 20 24 17 0
Chart for top 10 holdings
49.3%
of total portfolio

Tooltips Complete

Hover the icon to see a tooltip.
Hover the icon to see a tooltip.

Tooltip Info

Vivamus sollicitudin risus vitae molestie dignissim. Aliquam molestie semper pretium. Curabitur non odio at elit fringilla ultricies. Donec id volutpat neque. Nulla sollicitudin massa eu leo venenatis fermentum. Sed ut risus iaculis, finibus enim non, fermentum risus. Fusce feugiat odio odio, vel pretium orci vestibulum sed. Donec eu aliquet massa, eu facilisis arcu. Nulla facilisi. Praesent vel augue dapibus, interdum mauris id, scelerisque erat.

More Information Panel

Aenean vel diam aliquam, laoreet augue sit amet, feugiat quam. Etiam vitae enim at elit mollis lobortis vel non ligula. Duis ac nibh lectus. Morbi vel rutrum risus, at finibus enim. Morbi in tellus nunc. Nunc sit amet rutrum massa. Nullam porttitor, urna sed sagittis luctus, massa ligula ornare risus, vel luctus arcu massa ut justo. Quisque pretium lectus a ipsum blandit sagittis. Duis molestie lacus quis tortor facilisis aliquam. Praesent placerat risus eu nisi efficitur tincidunt. Praesent quis est quis ligula posuere ultricies at nec lorem. Curabitur sed justo condimentum, sollicitudin erat eu, tincidunt enim. Maecenas ut lorem a mi euismod ultrices in at elit. Sed nec ante et nisl imperdiet fermentum ac a turpis. Phasellus malesuada, lorem vel convallis euismod, purus est faucibus dui, a porta purus odio id sem.

Curabitur laoreet urna pharetra tellus iaculis, at vestibulum mi dignissim. Pellentesque malesuada ante at nisi iaculis rhoncus id a ipsum. Vivamus ut magna fermentum, accumsan nunc ac, mattis enim. Maecenas id molestie nunc, eu auctor enim. Morbi condimentum dui eu augue vehicula, at commodo lacus aliquam. Nam tempus luctus lorem id tempus. Duis varius faucibus augue at blandit. In nec eros sit amet sapien scelerisque interdum vel non mauris. Aenean eu orci eget mi luctus dictum. In aliquam purus ante. Quisque dignissim quam vitae elit blandit facilisis et sed nulla. Vestibulum fringilla imperdiet fermentum. Sed dictum, urna in interdum dignissim, ante justo euismod tellus, vitae ultricies magna dui a nisi. Nunc ut tellus non dui pharetra pellentesque. In pretium, turpis et sodales cursus, lacus neque venenatis purus, sit amet ullamcorper diam tortor at mi. Cras facilisis nulla a sem maximus auctor.