We are working on something new! Check it out here!

Blipper

Animated blipping dot

Modifiers

  • .blipper-theme-1 - Theme color 1
  • .blipper-theme-2 - Theme color 2
  • .blipper-theme-3 - Theme color 3
  • .blipper-theme-4 - Theme color 4
  • .blipper-theme-5 - Theme color 5

Example

<div class="blipper"></div>
Source file: ~/source/sass/utility/_blipper.scss

Checklist

A list with checklist items.

Modifiers

  • .checklist__item--checked - Checked item

Example

  • Brownie I love danish marshmallow
  • Danish croissant caramels jelly-o
  • I love jelly jelly-o chupa chups caramels
<div class="grid">
     <div class="grid-md-6">
         <div class="box box-panel box-panel-primary">
             <ul class="checklist">
                 <li>
                     <span class="checklist__item checklist__item--checked">Brownie I love danish marshmallow</span>
                 </li>
                 <li>
                     <span class="checklist__item">Danish croissant caramels jelly-o</span>
                 </li>
                 <li>
                     <span class="checklist__item">I love jelly jelly-o chupa chups caramels</span>
                 </li>
             </ul>
         </div>
     </div>
</div>
Source file: ~/source/sass/utility/_checklist.scss

Creamy section

A section with creamy background and border.

Modifiers

  • .creamy-border-bottom - Only use border at bottom

Example

Oh, creamy.
<div class="creamy">Oh, creamy.</div>
Source file: ~/source/sass/utility/_creamy.scss

Explain

Use for enclosed word description or similar

Example

The word
<span class="explain">
    <em>The word</em>
    <span data-tooltip="The word description"><i class="fa fa-question-circle"></i></span>
</span>
Source file: ~/source/sass/utility/_explain.scss

Disabled

Prevents clicking on any element and fades it out.

Example

I love jelly jelly-o

Halvah powder brownie. Brownie I love danish marshmallow I love I love cake. I love jelly jelly-o chupa chups caramels sweet roll cupcake. Danish croissant caramels jelly-o cheesecake.

<div class="box box-filled-3 disabled">
    <div class="box-content">
        <h5>I love jelly jelly-o</h5>
        <p>Halvah powder brownie. Brownie I love danish marshmallow I love I love cake. I love jelly jelly-o chupa chups caramels sweet roll cupcake. Danish croissant caramels jelly-o cheesecake.</p>
    </div>
</div>
Source file: ~/source/sass/utility/_interaction.scss

Prepends a link indicator icon before the link text. If the href matches a file type, that's specified below, the icon for the matching file type icon. You can also, like in the examples, use a modifier class to set the icon.

Modifiers

  • .link-item-light - Lighter link item icon and text color (for use with dark backgrounds)

Loading indicator

Loading indicator

Modifiers

  • .loading-red -
  • .loading-blue -
  • .loading-green -
  • .loading-purple -

Example

<div class="loading">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
Source file: ~/source/sass/utility/_loading.scss

Margin resetters

Set margins to zero

Modifiers

  • .no-margin - Sets all margins to zero
  • .no-margin-top - Sets top margin to zero
  • .no-margin-right - Sets right margin to zero
  • .no-margin-bottom - Sets bottom margin to zero
  • .no-margin-left - Sets left margin to zero

Gutter

Gutters any element.

Modifiers

  • .gutter - Standard gutter
  • .gutter-sm - Smaller gutter
  • .gutter-lg - Larger gutter
  • .gutter-xl - Extra large gutter
  • .gutter-top - Only gutter top
  • .gutter-bottom - Only gutter bottom
  • .gutter-left - Only gutter left
  • .gutter-right - Only gutter right
  • .gutter-margin - Add gutter as margin instead of padding
  • .gutter-vertical - Only vertical gutter
  • .gutter-horizontal - Only horizontal gutter

Placeholders

A set of placeholders for different types of attachments/media

Modifiers

  • .image-placeholder - Image placeholder

Example

<figure class="image-placeholder"></figure>
Source file: ~/source/sass/utility/_placeholders.scss

Spinner

Spinning loading incidator

Example

<div class="spinner spinner-dark"></div>
Source file: ~/source/sass/utility/_spinner.scss

Visibility

Hides any elements for the specified screen size

Modifiers

  • .hidden - Hidden on all sizes
  • .hidden-xs - Hidden on extra small screens
  • .hidden-sm - Hidden on small screens
  • .hidden-md - Hidden on medium screens
  • .hidden-lg - Hidden on large screens
  • .hidden-print - Hidden in print
  • .print-only - Display only in print