storyteller.io CSS Styleguide

Icons

CSS Globals

3.1

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

--background-icon
--center-icon
--prepend-icon
--append-icon
Example Markup
<ul class="--scale-3x">
    <li class="icon-globe --prepend-icon">
        <span>Globe</span>
    </li>
</ul>
Modifiers  
--icon-only

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

--background-icon

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

--center-icon

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

--prepend-icon

Inserts icon before the element’s content.

--append-icon

Inserts icon after the element’s content.

3.2

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"
}</code></pre>
</div>
Modifiers  
--busy

Dims block or element and displays a centered indeterminate activity indicator