Clicking this link will get you banned

Styles

Icons

We are currently using a mixed collection of custom-made and FontAwesome icons.

Icon Creation

Icons can be created using the following Rails helper:
Example
= # icon name, size = nil, color = nil
= icon 'share', 'xsmall', 'tertiary'

Icon Options

Most often you will want to adjust an icon's size or color properties.
The size option expects one of the copy--{size} values, ie.
"medium", "normal", "xsmall", "xxsmall"
Examples
The color option expects one of the content--{type} values, ie.
"primary", "secondary", "tertiary", "error", "success", "warning".
Examples

Custom "Heroes" Icons

The following icons were created by the Articulate Design Team.
= icon 'share' e601
= icon 'user' e602
= icon 'bell' e603
= icon 'bookmark' e604
= icon 'comment' e605
= icon 'hub' e60d
= icon 'search' e60e
= icon 'thumb-tack' e60f
= icon 'forward' e60c
= icon 'discussion' e623
= icon 'lightbulb' e624
= icon 'complete' e617
= icon 'alert' e627
= icon 'check' e800
= icon 'chevron-down' e606
= icon 'chevron-up' e607
= icon 'chevron-left' e608
= icon 'chevron-right' e609
= icon 'chevron-left-double' e621
= icon 'chevron-right-double' e622
= icon 'plus' e600
= icon 'times' e60a
= icon 'ellipsis' e60b
= icon 'external' e624
= icon 'book' e626
= icon 'delete-circle' e628
= icon 'location' e629
= icon 'globe' e801

FontAwesome Icons

The following icons are from the FontAwesome icon library.
= icon 'trash' e610
= icon 'pencil' e611
= icon 'move' e616
= icon 'circle-arrow-down' e618
= icon 'sort' e61a
= icon 'circle-blank' e61d
= icon 'circle' f111
= icon 'list' f022
= icon 'sitemap' f0e8
= icon 'question-circle' f059
= icon 'briefcase' f0b1
= icon 'facebook' e612
= icon 'twitter' e613
= icon 'linkedin' e614
= icon 'envelope' e615
= icon 'tag' e61b
= icon 'wrench' e61c
= icon 'comments' e61e
= icon 'file' e61f
= icon 'copy' e620
= icon 'anchor' f13d

Buttons

We have 6 buttons skin classes and 4 buttons sizes to choose from.

Button Creation

Buttons can be created using the following Rails helper:
Example
= # btn type, text, options = {}
= btn 'a', 'Link Button', href: '#'

Button Types & Options

There are several types of buttons to choose from depending on the use case.
We also have additional options available for adding icons, positioning icons, and styling the button.
Available Button Types

a , label , span , button , input (type="submit")

Additional Button Options
icon:           'name'
icon_left:      'name'
icon_size:      'size'          # Default: 'xxsmall'
icon_size_left: 'size'          # Default: 'xxsmall'
class:          'btn--primary'  # Default
Any other submitted options (href, title, etc.) get added to the element as attributes.

Button Skins

Buttons only require a skin class to display properly - no need for an extra structural .btn class.
Examples
.btn--primary
  • Anchor
  • span
  • Icon
.btn--secondary
  • Anchor
  • span
  • Icon
.btn--tertiary
  • Anchor
  • span
  • Icon
.btn--important
  • Anchor
  • span
  • Icon
.btn--transparent
  • Anchor
  • span
  • Icon

Button Sizes

Button size can be adjusted by applying one of the following class modifiers. btn--medium , btn--small , btn--xsmall
Examples
Default
medium
small
xsmall

Icon Buttons

Icon buttons use an inline media object within the button element to appropriately space the icon and text.
Right Aligned Icon
  • Button
  • = btn 'span', 'Button', icon: 'chevron-right'
    
Left Aligned Icon
  • Button
  • = btn 'span', 'Button', icon_left: 'chevron-left'
    
Form Submission Button with Icon

If you need a form submission button with an icon, you should use type button rather than input (type="submit") since inputs can not contain content and thus can not contain a media object or icon element.

  • = btn 'button', 'Submit', icon: 'chevron-right', type: 'submit'
    
Icon-Only Buttons

If the button ONLY contains an icon and no accompanying text, you may pass the icon itself as the button text.

  • = btn 'span', icon('twitter'), class: 'btn--tertiary btn--small'
    

Button Modifiers

Icon buttons use an inline media object within the button element to appropriately space the icon and text.
Examples
  • .inverse
    .inverse .disabled
  • .inverse
    .inverse .disabled
  • .inverse
    .inverse .disabled
  • .inverse
    .inverse .disabled

.btn--block

.btn--badge

a.btn--bare

Split Buttons

Since split buttons are a bit more complex with several potential combinations, you must build them out manually.
An inline .btn--group container with two nested button elements are required.
Example
%span.btn--group
  %label.btn--tertiary Label
  %a.btn--tertiary.inverse{href: '#'}= icon 'times'

Tag Buttons

Tags are just .btn--secondary.btn--small links laid out within a list with an additional dropdown list if there are more than three tags. But all you have to worry about is passing the tag collection to the shared/nav/nav_tags partial.
Example
= render 'shared/nav/nav_tags', tags: @tags

Lists

Lists are used in abundance on Heroes and we have a handful of interchangeable classes to create a wide variety of interfaces.

Basic Lists

These are standard HTML unordered and ordered lists.
Examples
  • Here is an unordered list
  • Shorty
  • Praesentium, minima, voluptas atque laboriosam
  • Consectetur, at quod soluta vel natus ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quoatus ab.
  • Consectetur, at quod soluta vel natus ab
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quod soluta vel natus ab.
  1. Here is an ordered list
  2. Shorty
  3. Praesentium, minima, voluptas atque laboriosam
  4. Consectetur, at quod soluta vel natus ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quoatus ab.
  5. Consectetur, at quod soluta vel natus ab
  6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quod soluta vel natus ab.

Slim Lists

Adding a class of .list--slim to the list element reduces it's left padding by half.
Example
  • Here is a slim list
  • Shorty
  • Praesentium, minima, voluptas atque laboriosam
  • Consectetur, at quod soluta vel natus ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quoatus ab.
  • Consectetur, at quod soluta vel natus ab
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quod soluta vel natus ab.

Horizontal Lists

Adding a class of .list--horz to the list element changes each list item to display: inline-block;
Example

Applying .list--centered to the list element applies equal margin to the left and right sides.
Note: A non-centered horizontal list only applies margin to the right side. Use this modifier within an .align--center content area.

Example

Using .list--horzRight instead, will change each list item to display: inline-block; and will right align the whole list.

Example

Additionally applying .list--dotted to the list element places a small dot bullet between each list item.

Example

Bare Lists

Adding a class of .list--bare to the list element removes bullets and numbers.
Examples
  1. Ordered List
  2. Item 2
  3. Item 3
  • Unordered List
  • Item 2
  • Item 3

Block Lists

Block classes adjust margin and padding on the list elements.
Examples
  • .list--block removes all margins and padding from the list element.
  • Item 2
  • Item 3
  • .list--blockAll applies .list--block styles AND removes margins from list items.
  • Item 2
  • Item 3

Horizontal Spacing

Spacing classes adjust horizontal margins on the list items.
Examples

Vertical Spacing

Spacing classes adjust vertical margins on the list items.
Examples

Boxed Lists

Adding a class of .list--boxed to the list element places the list in a bordered box.
Examples
  • List item one.
  • List item two.
  • List item three.
  • with .list--bare
  • List item two.
  • List item three.

Forms

The following is a collection of common form components.

Input Elements

Form fields should, for the most part, be wrapped in a .form__group container, which will add even spacing below each element.
Examples

Note: select inputs must be wrapped in a .selectWrapper class to be styled appropriately.

Form Buttons

Submit, button, and reset inputs should all be generated via the btn helper method, as outlined above , and styled with appropriate .btn--modifier classes.
Examples
File input buttons and other non-standard input buttons will use browser default styles.
Example

Rich Text Editor

There are two versions of the rich text editor available: the large version (as seen below) and the "small" version - which limits the "Format" menu to code and pre styles, and removes the table and anchor insertion options.
Example

Form Errors

Form error messages and the application of error classes to invalid elements should be handled, for the most part, by Rails. They should appear as follows.
Examples
Oops! Please fix the following 3 errors:
  • Title can't be blank
  • Body can't be blank
  • Category can't be blank

Tables

Tables are used for tabular data. Period.

Basic Table

This is a standard HTML table.
Example
col name col name col name col name
col data 1 col data 1 col data 1 col data 1
col data 2 col data 2 col data 2 col data 2 col data 2 col data 2 col data 2 col data 2
col data 3 col data 3 col data 3 col data 3
col data 4 col data 4 col data 4 col data 4

Underlined Table

Applying a class of .table--underlined to a table results in the following design.
Example
col name col name col name col name
col data 1 col data 1 col data 1 col data 1
col data 2 col data 2 col data 2 col data 2 col data 2 col data 2 col data 2 col data 2
col data 3 col data 3 col data 3 col data 3
col data 4 col data 4 col data 4 col data 4

Dotted Underlined Table

Applying a class of .table--underlined--dotted to a table results in the following design.
Example
col name col name col name col name
col data 1 col data 1 col data 1 col data 1
col data 2 col data 2 col data 2 col data 2 col data 2 col data 2 col data 2 col data 2
col data 3 col data 3 col data 3 col data 3
col data 4 col data 4 col data 4 col data 4

Bordered Table

Applying a class of .table--bordered to a table results in the following design.
Example
col name col name col name col name
col data 1 col data 1 col data 1 col data 1
col data 2 col data 2 col data 2 col data 2 col data 2 col data 2 col data 2 col data 2
col data 3 col data 3 col data 3 col data 3
col data 4 col data 4 col data 4 col data 4

Hoverable Row Table

Applying a class of .table--hoverable to a table results in the following design.
Example
col name col name col name col name
col data 1 col data 1 col data 1 col data 1
col data 2 col data 2 col data 2 col data 2 col data 2 col data 2 col data 2 col data 2
col data 3 col data 3 col data 3 col data 3
col data 4 col data 4 col data 4 col data 4

Highlighted Alternate Rows Table

Applying a class of .table--altRows to a table results in the following design.
Example
col name col name col name col name
col data 1 col data 1 col data 1 col data 1
col data 2 col data 2 col data 2 col data 2 col data 2 col data 2 col data 2 col data 2
col data 3 col data 3 col data 3 col data 3
col data 4 col data 4 col data 4 col data 4

Grid System

Heroes uses a 12-column, 1200px max-width inline grid.

Implementation Details

This grid system uses inline-block styling for columns rather than floats for added flexiblity, like column justification, centering, vertical alignment, etc.

Because of * { box-sizing: border-box; } the padding on the grid columns is completely flexible without having to worry about breaking the grid.

Important Always be sure to wrap content within .grid__row and .grid__col--* containers.

Because our grid uses inline-block styling, we must set our .grid__row font-size and line-height to zero to eliminate extra spacing, this requires us to reset our base font size and line height on the .grid__col--* column classes.

Therefore, placing content directly within a .grid__row will result in invisible, font-sized zero content.

Standard Grid Example

Your grid content should always be placed within .grid__row and .grid__col--* containers.
Example
.grid__row
  .grid__col--5 Content
  .grid__col--3 Content
  .grid__col--4 Content
5 cols wide
3 cols wide
4 cols wide

Column Nesting

Because this is a flexible, percent-based grid-system - nesting grids will size the nested columns relatively to their closest block-level parent's width.
Example
2 in 8
10 cols in 8
4 cols wide

Common Width Aliases

Named classes are provided as aliases for commonly used grid dimensions.
Examples
.grid__col--quarter
1/4 grid width
1/4 grid width
1/4 grid width
1/4 grid width
.grid__col--third
1/3 grid width
1/3 grid width
1/3 grid width
.grid__col--half
1/2 grid width
1/2 grid width
.grid__col--full
full width

Column Centering

Easily center columns by adding a .grid__row--centered class to your .grid__row instead of manually calculating column widths or offsets.
Example
2 cols wide
2 cols wide
2 cols wide
2 cols wide

Vertical Column Centering

Easily center columns vertically by adding a .grid__row--middled class to your .grid__row
Example
2 cols wide
2 cols wide
3 cols wide
3 cols wide
3 cols wide
3 cols wide
2 col

Column Justification

Easily justify columns by adding a .grid__row--justified class to your .grid__row instead of manually calculating column widths or offsets.
Example
2 cols wide
2 cols wide
2 cols wide
2 cols wide

Column Right-Alignment

Add a class of .grid__row--opposite to your .grid__row to align your columns to the right. Note that the text within them will still be left-aligned, but you can add a utility class of .align--right to right align the content, too.
Example
2 cols wide
3 cols wide
5 cols wide w/ .align--right

Column Offsetting

Offset columns by using the .grid__col--offset and .grid__row--opposite classes.
Example
4 cols wide, offset by 2 cols
5 cols wide, offset by 1 col
5 cols wide, offset by 1 col w/ .grid__row--opposite
5 cols wide, offset by 1 col w/ .grid__row--opposite

Column Bleeding

Bleed content right to the edge of your columns by adding the .grid__col--bleed utility class to your columns. It won't affect their width, only their horizontal padding.
Example
I'm bleeding!
8 cols wide
You may also apply the utility classes of .grid__col--bleedLeft or .grid__col--bleedRight to only bleed content to one side of the column.
Examples
I'm aligned & bleeding left! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quod neque voluptas dignissimos, porro dolor minus illum aliquam debitis voluptates laudantium earum facilis iste, obcaecati corporis rem quae. Cupiditate, rem!
I'm aligned & bleeding right! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quod neque voluptas dignissimos, porro dolor minus illum aliquam debitis voluptates laudantium earum facilis iste, obcaecati corporis rem quae. Cupiditate, rem!

Grid Preview

The following displays a preview of all possible grid column sizes.
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
5
5
2
6
6
7
5
8
4
9
3
10
2
11
1
12

Media Objects

Media objects are composed of an image or icon placed to the left or right of some related content. By default, images will be placed on the left, content on the right.

Block Media Objects

"Block" media objects will display: block and have a 1em vertical margin. The image element is set to float.
They can be setup as seen below. Note that the icon helper automatically adds the necessary .media__img class to the icon element.
Examples
Share
%a.media--block{href: ''}
  = icon "share"
  .media__body Share
5 Comments
%a.media--block{href: ''}
  = icon "comment", nil, nil, side: 'right'
  .media__body 5 Comments
Since the block styles float the .media__img , you'll probably want to use the below inline media object method for right alignment instead.

Inline Media Objects

"Inline" media objects are best used if the container has non-left text alignment or if you need to control verical alignment. Since both the image and body portions of the inline object are display: inline-block they can be centered or right-aligned with ease.
Examples
.align--center
  %a.media--inline{href: ''}
    = icon "share"
    .media__body Share
.align--right
  %a.media--inline{href: ''}
    .media__body Subscribe
    = icon "bell", nil, nil, side: 'right'
Because the inline-block styles eliminate the need for a floated .media__img , to right align the icon, you must reverse the order of the image and content elements.