CSS Styleguide


CSS Globals


Vector Icons

Vector icons can be easily added to any element with a combination of a class identifying the desired icon and another utility class. Rendered as text, these icons will inherit the scale, color, and other stylistic properties of the parent element.

  • Add
  • Back
  • Calendar
  • Cancel
  • Check
  • Clipboard
  • CMS
  • Data
  • Developer
  • Edit
  • Eye
  • Help
  • Gear
  • Globe
  • GitHub
  • Key
  • Keyboard
  • Location
  • Lock
  • Logout
  • Menu
  • Music
  • Next
  • Photos
  • Proxy
  • Refresh
  • Remove
  • Social
  • Star
  • Starred
  • String
  • Terminal
  • Warning
  • Users
  • Videos

Example Markup
<ul class="--scale-3x">
    <li class="icon-globe --prepend-icon">

Replaces element’s content with the icon. For now, this requires any text content to be in an element, i.e. <span>.


Makes icon big and transparent, centered within the containing element.


Inserts icon above the element’s content and centers it.


Inserts icon before the element’s content.


Inserts icon after the element’s content.


Activity Indicators

    "message": "Hello World",
    "example": "code"
Example Markup
<div class="ui-panel --busy --pad-2x">
<pre class="language-javascript"><code>{
    "message": "Hello World",
    "example": "code"

Dims block or element and displays a centered indeterminate activity indicator