Style Guide Template v1.5 - 12 Jan 2016

Note: All styles are written with base-10 font-size, where 1.2rem = 12px.

Introduction

Use this style guide as a template to build your html-based style guide.

Colors

$app-dark-gray
#34363b
rgb
(52,54,59)

$app-warm-gray
#f7f5f4
rgb
(247,245,244)

$app-cyan
#00aeef
rgb
(0,174,239)

Typography

font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;

Header 1

font-size: 3.0rem; /* 30px */

Header 2

font-size: 2.4rem; /* 24px */

Header 3

font-size: 1.8rem; /* 18px */

Body

font-size: 1.4rem; /* 14px */
color: #323334;

Secondary text

font-size: 1.4rem; /* 14px */
color: #979ba8;
font-size: 1.4rem; /* 14px */
color: #00aeef;
:hover {text-decoration: underline;}

Icons

View full list

SVGs are easier to style in CSS than images or font icons. To add an icon to your HTML, use the following:

<svg class="icon {{icon-id}}"><use xlink:href="./assets/
images/symbol-defs.svg#{{icon-id}}"></use></svg>
				

To style the color of an icon, you'll want to use fill:#000; in your CSS. You can give SVGs a stroke:#000 as well. Below are some commonly used Helveticons as well as a handful of useful icons that were missing from the original libraries.

  • icon-Search

    Used in search inputs

  • icon-Settings

    Used to access settings

  • icon-Delete

    Delete, close, remove, etc.

  • icon-Trash

    Used for deletion

  • icon-Add

    Used for addition

  • icon-Chat

    Used for chats, comments, etc.

  • icon-Check

    Used for checkmarks

  • icon-Calendar-alt

    Used for date pickers, calendars, etc.

  • icon-Message

    Used for email, messages

  • icon-Save-alt

    Used for saving (not a helveticon)

  • icon-Navigationdown

    Used to indicate selection box, expansion, or sorting

  • icon-download

    Used for download, export

  • icon-Upload

    Used for upload, import

  • icon-Thumbnails

    Used for grids, tiles, etc.

  • icon-List

    Used for menu, justified text

  • icon-Print

    Used for print

  • icon-User

    Used to indicate person, profile, user

  • icon-Pinlocation

    Used for location, maps

  • icon-Edit

    Used for edit

  • icon-Folder

    Used for folder, project

  • icon-Rate

    Used for favorites, rates

  • icon-Favorite

    Used for favorites, matters of the heart

  • icon-Barchart

    Used for bar chart

Text Input

Label

Show Markup

Show LESS

Required field *

Show Markup

Show LESS

Errored field

Show Markup

Show LESS

Disabled Field

Show Markup

Show LESS

Select box

Label

Show Markup

Show LESS

Errored Select

Show Markup

Show LESS

Disabled Select

Show Markup

Show LESS

Radio Button

Label

Show Markup

Show LESS

Errored Radio

Show Markup

Show LESS

Disabled Radio

Show Markup

Show LESS

Checkbox

Label

Show Markup

Show LESS

Errored Checkboxes

Show Markup

Show LESS

Disabled Checkboxes

Show Markup

Show LESS

Button

Standard Button

Show Markup

Show LESS

Active Button

Show Markup

Show LESS

Slider

Label

Note: Slider not built out in guide, general styles shown below:

Show LESS

Toggle

Label

Show Markup

Show LESS

Disabled Toggle

Show Markup

Show LESS

Edit Title


Show Markup

Show LESS

Show Scripts

Side Panel

Time
Time Presets
Analysis Start *
Analysis End *
Patients
Patient Assignment
Projections
Rounding method

Show Markup

Show LESS

Tiles

Tiles

Corporate

Long Title for Company Workspace

27 Reports, 3 Assets
Private

Private Workspace

3 Reports, 1 Asset
Shared

Shared Workspace

8 Reports, 2 Assets

Heart Failure

Cohort
  • AHA dataset (239.18M)
  • HFSC dataset (8.79M)
247.97 M sample

Includes codes for hypertension and heart failure as well as congenital heart diseases.

Source of Business

Sources of Business over time, and most common win and loss events between market segments.

Show Markup

Show LESS

Chart Grid

Patient
  • 4000
  • 3500
  • 3000
  • 2500
  • 2000
  • 1500
  • 1000
  • 500
  • 0
  • -500
  • Aug 2014
  • Sep
  • Oct
  • Nov
  • Dec
  • Jan 2015
  • Feb
  • Mar
  • Apr
  • May
  • Jun
  • Jul

Show Markup

Show LESS

Chart Legend

Show Markup

Show LESS

Show Scripts

Tip Popover

Alphacyn Losses

Aug 2014
1282
to Alpha Betacyn
32
to Alphacyn Betacyn
36
to Betacyn
39
to Deltacyn
75
to Delta Betacyn
0
to Delta Etacyn
1
to Etacyn
2
to Eta Betacyn
1
to Gammacyn
3
to Gamma Betacyn
82
to Alpha Betacyn

Show Markup

Show LESS