We are currently using a mixed collection of custom-made and FontAwesome icons.
= # icon name, size = nil, color = nil
= icon 'share', 'xsmall', 'tertiary'
size
option expects one of the
copy--{size}
values, ie.
color
option expects one of the
content--{type}
values, ie.
= 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
= 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
We have 6 buttons skin classes and 4 buttons sizes to choose from.
= # btn type, text, options = {}
= btn 'a', 'Link Button', href: '#'
a
,
label
,
span
,
button
,
input
(type="submit")
icon: 'name'
icon_left: 'name'
icon_size: 'size' # Default: 'xxsmall'
icon_size_left: 'size' # Default: 'xxsmall'
class: 'btn--primary' # Default
.btn
class.
btn--medium
,
btn--small
,
btn--xsmall
= btn 'span', 'Button', icon: 'chevron-right'
= btn 'span', 'Button', icon_left: 'chevron-left'
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'
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'
.btn--block
.btn--group
container with two nested button elements are required.
.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.
Lists are used in abundance on Heroes and we have a handful of interchangeable classes to create a wide variety of interfaces.
.list--slim
to the list element reduces it's left padding by half.
.list--horz
to the list element changes each list item to
display: inline-block;
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.
Using
.list--horzRight
instead, will change each list item to
display: inline-block;
and will right align the whole list.
Additionally applying
.list--dotted
to the list element places a small dot bullet between each list item.
.list--bare
to the list element removes bullets and numbers.
.list--block
removes all margins and padding from the list element.
.list--blockAll
applies
.list--block
styles AND removes margins from list items.
.list--blockMedia
applies
.list--block
styles AND removes margins from media objects within list items.
.list--boxed
to the list element places the list in a bordered box.
Dropdown menus are used for primarily as navigational or form components.
.dropdown
= btn 'span', "Trigger", icon: "chevron-down"
.dropdown__content
Dropdown Content
Trigger
Essentially anything can be put in the content area, but the below examples include the most common variations we're using.
We can make the dropdown content align to the right of the dropdown area by applying the
--alignRight
modifier to the
.dropdown__content
class.
In most cases, you'll find that the
.dropdown
menu is the descendant of a
.list--horz
list item. This ensures that the hoverable trigger space is contained to the
inline-block
space of the trigger area element.
.dropdown__content
.dropdown__content--alignRight
.dropdown__content--box
.dropdown__content--box--alignRight
We can make the dropdown content area wider or slimmer by applying the
--wide
or
--slim
modifiers to the
.dropdown__content
class.
.dropdown__content--box--wide
.dropdown__content--box--slim--alignRight
.dropdown__content--menu
.dropdown__content--menu--alignRight
Appling the additional class of
.dropdown--fullWidth
to the
.dropdown
wrapper will make the drop menu the full width of the trigger area.
.dropdown__content--menu.dropdown--filters
.dropdown__content--menu--alignRight.dropdown--filters
The following is a collection of common form components.
.form__group
container, which will add even spacing below each element.
btn
helper method,
as outlined above
, and styled with appropriate
.btn--modifier
classes.
code
and
pre
styles, and removes the table and anchor insertion options.
Youtube and Vimeo links are accepted.
Tables are used for tabular data. Period.
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 |
.table--underlined
to a table results in the following design.
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 |
.table--underlined--dotted
to a table results in the following design.
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 |
.table--bordered
to a table results in the following design.
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 |
.table--hoverable
to a table results in the following design.
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 |
.table--altRows
to a table results in the following design.
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 |
Heroes uses a 12-column, 1200px max-width inline grid.
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.
.grid__row
and
.grid__col--*
containers.
.grid__row
.grid__col--5 Content
.grid__col--3 Content
.grid__col--4 Content
.grid__col--quarter
.grid__col--third
.grid__col--half
.grid__col--full
.grid__row--centered
class to your
.grid__row
instead of manually calculating column widths or offsets.
.grid__row--middled
class to your
.grid__row
.grid__row--justified
class to your
.grid__row
instead of manually calculating column widths or offsets.
.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.
.align--right
.grid__col--offset
and
.grid__row--opposite
classes.
.grid__row--opposite
.grid__row--opposite
.grid__col--bleed
utility class to your columns. It won't affect their width, only their horizontal padding.
.grid__col--bleedLeft
or
.grid__col--bleedRight
to only bleed content to one side of the column.
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.
display: block
and have a
1em
vertical margin. The image element is set to float.
.media__img
class to the icon element.
%a.media--block{href: ''}
= icon "share"
.media__body Share
%a.media--block{href: ''}
= icon "comment", nil, nil, side: 'right'
.media__body 5 Comments
.media__img
,
you'll probably want to use the
below inline media object
method for right alignment instead.
display: inline-block
they can be centered or right-aligned with ease.
.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'
.media__img
,
to right align the icon,
you must reverse the order of the image and content elements.
Sidebars are used on a variety of pages and contain a variety of information. The sidebar container elements and classes provides should provide adequate flexibility.
.sidebar__section
containers to create proper section spacing within.
%aside.grid__col--3.grid__col--offset1.grid__col--bleed
%section.sidebar__section
%h6 Title
Content
%section.sidebar__section
%h6 Title
Content
.sidebar--compact
to the sidebar container to
slightly reduce vertical spacing
of the sidebar sections within.