Ci logo

Design Elements

Utility Classes

We define utility classes with the convention, sb-Util-utilityName. These classes are intended to be common stackable patterns that can be added to elements in addition to their existing styles. BASSCSS has many good utility classes, and is a good place to look to get a good feel for the purpose of utility classes (until we have more of our own).

Accessibility Utilities

Flexbox Utilities

Responsive Utilities

Inspired by the Bootstrap Responsive Utilities classes. Try to use these on a limited basis!!!


The sb-Animation class and modifiers help animate components.

sb-Animation--spin Example

<i class="sb-Icon--spinner sb-Animation--spin"></i>
<span class="sb-Icon--spinner sb-Animation--spin"></span>