Bathroom Sink

Everything you need to dump out a page

Type

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Vertical Rhythm

Both paragraphs and headings will line up on a vertical baseline. They will fall either directly on a line or perfectly in-between lines. All other elements, like buttons, should align to the grid too.

If your elements aren't aligning to the page correctly, check your math! Make sure your calculations always equal a multiple of 8.

Layout

We utilize flex for layout purposes. Modernizr will detect if flex is supported by the browser. If it isn't supported, the grid and grid__block selectors will fall back to the old float-based layout.

Grids can be arranged 2 different ways:
 
1) Add a "{n}-blocks" modifier to the "grid" and the children "grid__block" elements will all be affected.
(additional modifiers are available as well, such as "{n}-blocks-on-medium" and "grid--orient-vertical-on-small
 
<div class="grid grid--2-blocks">
<div class="grid__block"></div>
<div class="grid__block"></div>
</div>
 
2) Add a "{n}-block" modifier to each "grid__block" element inside of the "grid" element.
(additional modifiers are available as well, such as "{n}-block-on-medium"
 
<div class="grid">
<div class="grid__block grid__block--6"></div>
<div class="grid__block grid__block--6"></div>
</div>

Buttons

There are two types of buttons -- "solid" & "flat". Solid buttons are usually used for the most obvious and important action on the screen or piece of content. Flat buttons are reserved for situations where we need multiple buttons that don't necessarily need to attract the user's eye.

Solid Buttons

Flat Buttons

Buttons with icons

Buttons
(possible modifiers for button are [solid,flat,stretch,default,primary,error,warning,success,info])
<button type="button" class="button button--solid button--default">
<div class="button__content">Button</div>
<div class="button__icon icon icon--heart"></div>
</button>

Button groups

Button Groups
 
(optional modifier to make button group span 100% width is [stretch])
 
<div class="button-group" style="margin-bottom: 16px;">
<button type="button" class="button button--solid button--default">
<div class="button__content">
<div class="button__icon icon icon--grid"></div>
</div>
</button>
<button type="button" class="button button--solid button--default">
<div class="button__content">
<div class="button__icon icon icon--blocks"></div>
</div>
</button>
<button type="button" class="button button--solid button--default">
<div class="button__content">
<div class="button__icon icon icon--dashboard"></div>
</div>
</button>
</div>

Button dropdowns

Button Dropdowns
 
<div class="button-group" style="margin-bottom: 16px;">
<button type="button" class="button button--solid button--default" data-toggle="dropdown">
<div class="button__content">
<div class="button__icon icon icon--grid"></div>
</div>
</button>
<button type="button" class="button button--solid button--default" data-toggle="dropdown">
<div class="button__content">
<div class="button__icon icon icon--blocks"></div>
</div>
</button>
<button type="button" class="button button--solid button--default" data-toggle="dropdown">
<div class="button__content">
<div class="button__icon icon icon--dashboard"></div>
</div>
</button>
</div>

Form Elements

When you need input from a user, use a form! Wrap inputs inside of a form-element . We also use Selectize for typeahead situations. Check out their doc for all the possible options. Just remember to put it inside a form-element !

Error Text
Error Text
Error Text
Error Text
Error Text
Error Text
Error Text
Error Text
Text,password,tel, etc... input
<div class="form-element">
<label class="form-element__label">Text input</label>
<input type="text" placeholder="Empty input text"/>
<span class="form-element__error-text">Error Text</span>
</div>
Textarea
<div class="form-element">
<label class="form-element__label">Textarea</label>
<textarea placeholder="Empty textarea text"></textarea>
<span class="form-element__error-text">Error Text</span>
</div>
Input with a button cap
<div class="form-element">
<label class="form-element__label">Input group</label>
<div class="input-group">
<div class="input-group__element">
<input type="text" placeholder="Search"/>
</div>
<div class="input-group__action">
<button type="button" class="button button--solid button--default">
<span class="button__content button__content--default"><span class="button__icon icon icon--search"></span></span>
</button>
</div>
</div>
<span class="form-element__error-text">Error Text</span>
</div>
Input with an icon must have a "form-element__wrap" inside the "form-element" that holds the input and the icon
<div class="form-element">
<label class="form-element__label">Text input</label>
<div class="form-element__wrap">
<div class="form-element__icon icon icon--search"></div>
<input type="text" placeholder="Empty input text"/>
</div>
<span class="form-element__error-text">Error Text</span>
</div>
Selects should be wrapped inside a "select-element" that holds the select and the caret icon
<div class="form-element">
<label class="form-element__label">Select</label>
<div class="select-element">
<div class="select-element__icon icon icon--caret-down"></div>
<select>
<option>derp</option>
</select>
</div>
<span class="form-element__error-text">Error Text</span>
</div>
Form lists can hold any type of form element, typically used to hold checkboxes or radios
<ul class="form-list form-list--collapse">
<li class="form-element has-error">
<label class="form-element__label input-size">
<input type="checkbox"/> Derp
</label>
</li>
<li class="form-element has-error">
<label class="form-element__label input-size">
<input type="radio"/> Derp
</label>
</li>
</ul>

Pebbles

When you need to show emphasis to a piece of text, use a pebble. There are many different types of pebbles you can use.

default primary success warning error info

(possible modifiers for pebbles [default, primary, success, error, warning, info, round])
 
<span class="pebble pebble--default">
<span class="pebble__content">
<span class="pebble__text">
default
</span>
</span>
</span>
 
Pebble with an icon
 
<span class="pebble pebble--default pebble--round">
<span class="pebble__content">
<span class="pebble__icon icon icon--check"></span>
</span>

Callouts

Callouts are useful for confirming actions performed by the user, like deleting something or navigating away from a page when they have not saved their work.

Hey there!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac egestas velit, vel condimentum odio. Suspendisse egestas viverra neque sed facilisis. Praesent maximus ultricies ornare. Cras nec nisi vitae odio malesuada malesuada id et arcu. Duis molestie, eros a cursus eleifend, lorem justo aliquam est, ut maximus diam sem a libero. Maecenas a nibh lorem. Etiam vitae sollicitudin metus, nec porttitor tortor. Etiam tortor libero, iaculis vel viverra posuere, porttitor id mauris. Suspendisse id neque nec diam feugiat fringilla. Cras molestie tortor metus, ac pulvinar mauris vulputate quis. Mauris id sem ullamcorper, tempor neque a, ultrices quam. Aliquam mattis interdum accumsan. Aenean consectetur nunc libero, at pulvinar enim consectetur vitae. Suspendisse et pulvinar augue. Nunc in est euismod, scelerisque libero vel, pulvinar purus. Nulla est ex, tristique nec ex tincidunt, hendrerit volutpat dui. Donec eu ultricies leo. Mauris pharetra erat non eros varius, et dapibus nisl interdum. Mauris imperdiet nisl ac sollicitudin molestie. Proin sagittis orci non elit sagittis, sed vehicula nisl convallis. Curabitur cursus imperdiet magna. Sed ullamcorper odio et mauris scelerisque, nec condimentum dui dictum. Nulla quam turpis, tristique ut ornare laoreet, sollicitudin malesuada metus. Praesent auctor sagittis interdum. Nunc vestibulum, ipsum dapibus ultrices varius, lorem nunc convallis quam, id tempus ipsum ex id risus. Duis dignissim elementum pretium. Vivamus vel pretium lectus. Mauris sit amet nibh mi. Duis commodo, felis sed consequat finibus, libero eros viverra elit, vel sagittis turpis ex quis elit. Curabitur sit amet varius velit. Fusce sit amet enim auctor, semper mauris at, laoreet orci. Aenean vestibulum dolor vitae porta dapibus. Nullam turpis turpis, convallis sit amet venenatis non, hendrerit at felis. Proin metus nisi, fringilla id tellus eget, blandit rhoncus tortor. Sed quis lectus sit amet dui tempor tincidunt. Maecenas eget justo at justo convallis luctus quis consequat nulla.
Hey there!
Retium lectus. Mauris sit amet nibh mi. Duis commodo, felis sed consequat finibus, libero eros viverra elit, vel sagittis turpis ex quis elit. Curabitur sit amet varius velit. Fusce sit amet enim auctor, semper mauris at, laoreet orci. Aenean vestibulum dolor vitae porta dapibus. Nullam turpis turpis, convallis sit amet venenatis non, hendrerit at felis. Proin metus nisi, fringilla id tellus eget, blandit rhoncus tortor. Sed quis lectus sit amet dui tempor tincidunt. Maecenas eget justo at justo convallis luctus quis consequat nulla.
<button type="button" class="button button--solid button--primary" data-toggle="callout" data-target="myCallout">
<span class="button__content">Callout</span>
</button>
 
Give the "callout-state" the ID of your button's "data-target" attribute
 
<div class="callout-stage" id="myCallout">
<div class="callout">
<div class="callout__top">
<button type="button" class="callout__close-button" data-dismiss="callout">
<span class="icon icon--x"></span>
</button>
<span class="callout__heading">Hey there!</span>
</div>
<div class="callout__content">
[content here]
</div>
<div class="callout__bottom flat">
<button type="button" class="button button--flat button--default" data-dismiss="callout">
<span class="button__content">Option 1</span>
</button>
<button type="button" class="button button--flat button--primary" data-dismiss="callout">
<span class="button__content">Option 2</span>
</button>
</div>
</div>
</div>

Alerts

Alerts are hidden by default and need to have the class modifier alert--active in order to be visible.

Something pretty cool just happened
Something pretty bad just happened
Something sorta bad just happened
Something pretty trivial just happened
(possible alert modifiers [active, dismissable, primary, success, error, warning, info])
 
<div class="alert alert--active alert--dismissable alert--success">
<button type="button" class="alert__close-button icon icon--x"></button>
Something pretty cool just happened
</div>

Lists

When you need to display a bunch of similar items one after the other for a user to search through, use a list.

Regular list

  • An active item with an icon on the right
  • An item with an icon on the right
  • An item with an icon on the left
  • An item with a cap on the right with an image inside
  • An item with a cap on the left with an image inside n item with a cap on the left with an image inside n item with a cap on the left with an image inside n item with a cap on the left with an image inside

Outlined list

  • An active item with an icon on the right
  • An item with an icon on the right
  • An item with an icon on the left
  • An item with a cap on the right with an image inside
  • An item with a cap on the left with an image inside n item with a cap on the left with an image inside n item with a cap on the left with an image inside n item with a cap on the left with an image inside
<ul class="list">
<li class="list__item list__item--active">
<span class="list__item-content">An active item with an icon on the right</span>
<span class="list__item-icon icon icon--image"></span>
</li>
<li class="list__item">
<span class="list__item-content">An item with an icon on the right</span>
<span class="list__item-icon icon icon--image"></span>
</li>
<li class="list__item">
<span class="list__item-icon icon icon--image"></span>
<span class="list__item-content">An item with an icon on the left</span>
</li>
<li class="list__item">
<span class="list__item-content">An item with a cap on the right with an image inside</span>
<span class="list__item-cap">
<img class="square--xsmall" src="https://d13yacurqjgara.cloudfront.net/users/3460/avatars/normal/f6debbb5044f838dcf78bc3299172657.jpg?1421783568"/>
</span>
</li>
<li class="list__item">
<span class="list__item-cap">
<img class="square--xsmall" src="https://d13yacurqjgara.cloudfront.net/users/3460/avatars/normal/f6debbb5044f838dcf78bc3299172657.jpg?1421783568"/>
</span>
<span class="list__item-content">An item with a cap on the left with an image inside n item with a cap on the left with an image inside n item with a cap on the left with an image inside n item with a cap on the left with an image inside</span>
</li>
</ul>

Tables

Tables should only be used to display data. Never for layout purposes, unless you're creating an email template. In which case, you wouldn't use our typical style sheet at all.

Name Age Sex Location
Jake Fleming 27 M Chicago, IL
Jake Fleming 27 M Chicago, IL
Jake Fleming 27 M Chicago, IL
Jake Fleming 27 M Chicago, IL
Jake Fleming 27 M Chicago, IL
You can wrap your table in a "table-wrap" if you're worried about the content spilling off of the screen.
 
<div class="table-wrap">
<table class="table--outlined">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jake Fleming</td>
<td>27</td>
<td>M</td>
<td>Chicago, IL</td>
</tr>
<tr class="tr--active">
<td>Jake Fleming</td>
<td>27</td>
<td>M</td>
<td>Chicago, IL</td>
</tr>
<tr>
<td>Jake Fleming</td>
<td>27</td>
<td>M</td>
<td>Chicago, IL</td>
</tr>
<tr>
<td>Jake Fleming</td>
<td>27</td>
<td>M</td>
<td>Chicago, IL</td>
</tr>
<tr>
<td>Jake Fleming</td>
<td>27</td>
<td>M</td>
<td>Chicago, IL</td>
</tr>
</tbody>
</table>
</div>

Pagination

Use a pagination-list when you need to display a set number of results across multiple pages, without infinite scroll.

  • 1
  • 2
  • 3
<ul class="pagination-list">
<li class="pagination-list__control pagination-list__prev">
<span class="icon icon--chevron-left"></span>
</li>
<li class="pagination-list__item">
1
</li>
<li class="pagination-list__item">
2
</li>
<li class="pagination-list__item pagination-list__item--active">
3
</li>
<li class="pagination-list__control pagination-list__next pagination-list__control--disabled">
<span class="icon icon--chevron-right"></span>
</li>
</ul>

Tooltips

Typical tooltip
<a class="tooltip" title="Go to Tooltipster's site" href="http://iamceege.github.io/tooltipster/">Tooltip</a>
 
HTML tooltip
<a id="htmlTooltip">HTML</a>
$(document).ready(function() {
$('.tooltip').tooltipster({
});
$('#htmlTooltip').tooltipster({
interactive: true,
position: 'bottom-left',
content: $('<div style="max-width: 300px">You can have users read something and then click a button or something!<br/><br/><button type="button" class="button button--solid button--primary"><span class="button__content">Like this!</span></button></div>')
});
});

Pickers

We use Dan Grossman's date picker for single dates and date ranges. Check out the documentation for all the available options.

Date Picker

Date Range Picker

//datepicker
 
$('.launch-datepicker').daterangepicker({
singleDatePicker: true,
opens: 'left'
})
//daterange
$('.launch-daterange').daterangepicker(
{
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), moment()],
'Last 30 Days': [moment().subtract('days', 29), moment()]
},
opens: 'left'
}
);

Progress

When you need to show progress of something, like the amount of data that has been uploaded, use a progress bar.

<div class="progress">
<div class="progress__bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>

Slider

Use a slider for situations where you need a user to adjust a value ranger. We use the Eyecon slider so take a look at the documentation for all the options.

<div class="slider-wrapper">
<input type="text" class="slider" value="" data-slider-min="0" data-slider-max="1000000" data-slider-step="1000" data-slider-value="[0,1000000]" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show"/>
</div>
$('.slider').slider();

Loading

Buttons

Form elements

Button
 
<button type="button" class="button button--solid load-this button--default">
<span class="button__content">Button</span>
</button>
 
Form element
 
<div class="form-element load-this">
<div class="form-element__wrap">
<div class="form-element__icon icon icon--search"></div>
<input type="text" placeholder="Empty input text"/>
</div>
</div>

Cards

Cards usually provide a snapshot of information, and allow the user to click through to view more.

Static Height

  • A Default Card
  • Jake Fleming Visual Designer
  • A Default Card
  • Jake Fleming Visual Designer
  • Jake Fleming Visual Designer

Multi-line

  • Spans multiple lines and doesn't get cut off by an ellipsis.
  • Spans multiple lines and doesn't get cut off by an ellipsis.
  • Spans multiple lines and doesn't get cut off by an ellipsis.
  • Spans multiple lines and doesn't get cut off by an ellipsis.
  • Spans multiple lines and doesn't get cut off by an ellipsis.

Special

  • Jake Fleming Visual Designer Has content and an extra block for more information.
  • Jake Fleming Visual Designer
  • Jake Fleming Visual Designer
  • Jake Fleming Visual Designer
Typical Card
<li class="card card--outlined">
<span class="card__body">
<span class="card__cap card__cap--icon card__cap--solid">
<span class="icon icon--image"></span>
</span>
<span class="card__content">
<span class="card__heading">Jake Fleming</span>
<span class="card__subheading">Visual Designer</span>
</span>
</span>
</li>
 
Multiline Card
<li class="card card--outlined card--multi-line">
<span class="card__body">
<span class="card__cap card__cap--icon card__cap--solid">
<span class="icon icon--image"></span>
</span>
<span class="card__content">
Spans multiple lines and doesn't get cut off by an ellipsis.
</span>
</span>
</li>
 
Feature Card
<li class="card card--outlined">
<span class="card__feature" style="background: url('http://4.bp.blogspot.com/_G6RHYafwM-E/SuVIAJLkFNI/AAAAAAAAALY/H9WGFPQBhvo/s320/meninja.png')">
</span>
<span class="card__body">
<span class="card__content">
<span class="card__heading">Jake Fleming</span>
<span class="card__subheading">Visual Designer</span>
</span>
</span>
</li>

Bars

When you need top level navigation use a nav-bar.

(possible modifiers for nav-bar are [nav-bar--primary, nav-bar--default])
<nav class="nav-bar nav-bar--default">
<div class="nav-bar__menu-toggle">
<span class="icon icon--menu"></span>
</div>
<div class="nav-bar__top">
NavBar
</div>
<ul class="nav-bar__list nav-bar__list--right ">
<li class="nav-bar__list-item">
<a href="index.html">
Link 1
</a>
</li>
<li class="nav-bar__list-item">
<div class="button-group">
<button type="button" class="button button--solid" data-toggle="dropdown">
<span class="button__content">
<span class="button__text">Button dropdown</span>
<span class="button__icon icon icon--caret-down"></span>
</span>
</button>
<ul class="dropdown-box">
<li>
<a class="dropdown-box__item">Button dropdown</a>
</li>
<li>
<label class="dropdown-box__item dropdown-box__item--static">
<input type="checkbox"/> Derp
</label>
</li>
<li>
<a class="dropdown-box__item">Dropdown Menu</a>
</li>
<li>
<a class="dropdown-box__item">Dropdown Menu</a>
</li>
<li>
<a class="dropdown-box__item">Dropdown Menu</a>
</li>
</ul>
</div>
</li>
<li class="nav-bar__list-item">
<a class="nav-bar__appendage-toggle"><span class="icon icon--gear"></span></a>
</li>
</ul>
<div class="nav-bar__appendage">
<div class="grid grid--gutters nav-bar__appendage-inner">
<div class="grid__block">
<div class="form-element">
<textarea placeholder="Textareas are fun"></textarea>
<small class="form-element__error-text">Your typing is puny. Pump it up.</small>
</div>
</div>
<div class="grid__block">
<div class="form-element">
<input type="email" placeholder="Enter email"/>
<small class="form-element__error-text">Your password isn't manly enough.</small>
</div>
<div class="form-element">
<input type="email" placeholder="Enter email"/>
<small class="form-element__error-text">Your password isn't manly enough.</small>
</div>
</div>
</div>
</div>
</nav>

Slates

When you need a container to put stuff in, use a slate! You can put pretty much anything in there.

Welcome Sign in
Title
Name Age Sex Location
Jake Fleming 27 M Chicago, IL
Jake Fleming 27 M Chicago, IL
Jake Fleming 27 M Chicago, IL
Jake Fleming 27 M Chicago, IL
Jake Fleming 27 M Chicago, IL
<div class="slate slate--outlined">
<div class="slate__top slate__top--outlined">
<div class="slate__top-main">
<span class="slate__subtitle">Welcome</span>
<span class="slate__title">Sign in</span>
 
</div>
</div>
<div class="slate__block slate__block--outlined slate__block--no-bottom-pad">
<div class="form-element">
<div class="form-element__wrap">
<div class="form-element__icon icon icon--person"></div>
<input type="text" placeholder="User name"/>
</div>
</div>
<div class="form-element">
<div class="form-element__wrap">
<div class="form-element__icon icon icon--lock"></div>
<input type="password" placeholder="Password"/>
</div>
</div>
</div>
<div class="slate__bottom slate__bottom--outlined">
<div class="slate__bottom-control">
<button type="button" class="button button--solid button--primary button--stretch">
<span class="button__content">
<span class="button__text">Sign in</span>
</span>
</button>
</div>
</div>
</div>

Drawers

When you need some content to come in from off the screen, use a drawer ! Drawers look pretty much like a callout would.

The data-target value of the button must equal the drawer's Id.
 
<button type="button" class="button button--solid button--primary" data-toggle="drawer" data-target="myDrawer--left">
<span class="button__content">
<span class="button__text">Open left</span>
</span>
</button>
 
<div id="myDrawer--left" class="drawer drawer--left">
<div class="drawer__body">
<ul class="drawer__list">
<li class="drawer__list-title">Dumb stuff</li>
<li class="drawer__list-item active">
<span class="drawer__list-item-icon icon icon--envelope"></span>
<span class="drawer__list-item-content">Inbox</span>
</li>
<li class="drawer__list-item active">
<a href="" class="drawer__list-item-link">
<span class="drawer__list-item-icon icon icon--chat"></span>
<span class="drawer__list-item-content">Chats</span>
<span class="drawer__list-item-alert">
<span class="drawer__list-item-alert-content drawer__list-item-alert-content--error">
2
</span>
</span>
</a>
</li>
</ul>
</div>
</div>

Video

For custom video, we use Mediaelement.js. So check out those docs for all the available options.

<video class="mejs-jui" controls width="100%" height="100%">
<source src="assets/vid/big_buck_bunny.mp4" type="video/mp4"/>
<source src="assets/vid/big_buck_bunny.ogv" type="video/ogv"/>
<track label="English" kind="subtitles" srclang="en" src="assets/vid/captions/doc.vtt"/>
</video>