Skip to content
CSS utility classes
JavaScript CSS
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

SUIT utilities

A SUIT collection of utility classes for common, reusable, low-level CSS traits. The collection includes dimension, display, layout, link, space, state, and text utilities.

Read more about SUIT's design principles.


  • Bower: bower install suit-utils --save

…is a convenient way to install all the SUIT utility packages:


Utilities are a low-level layer in your CSS. They have a very narrow scope and may end up being used frequently, due to their separation from the nature of their content. As a result, once a class is in significant use great care should be taken before modifying it.

Referencing utilities

During development, you can include the utilities you need using the @import directive in your main stylesheet. Your build step should take care of inlining these imports for production.


@import "/components/normalize-css/normalize.css";

/* Utilities */

@import "/components/suit-utils-display/display.css";
@import "/components/suit-utils-layout/layout.css";
@import "/components/suit-utils-layout/dimension.css";
@import "/components/suit-utils-state/state.css";
@import "/components/suit-utils-text/text.css";
@import "/components/suit-utils-link/link.css";



Each utility class modifies a single trait (a small collection of similar styles).

To apply a trait, or a combination of traits to an element, add the corresponding class directly to the HTML.

Together, they can form a wide variety of UI patterns from simple principles. Although you won't always want to use combinations of utilities to generate more complicated patterns, the option is there. Refactoring an HTML template to move particular utility traits into a CSS component's styles is a relatively simple task.

The following contrived example would be a structural template for a simple tweet-like component. You would then create a new component CSS file for any additional, specific styles (often a "skin" or "theme") needed to fully realise the component.

<article class="Tweet">
    <a class="u-objEnd" href="[permalink]">
    <a class="u-objStart" href="[href]">
        <img src="[src]" alt="[username]'s avatar">
    <div class="u-sizeFill">
        <a class="u-linkComplex" href="[url]">
            <span class="u-linkComplex-target">[full-name]</span>

            <a class="u-linkComplex" href="#">
                @<span class="u-linkComplex-target">username</span>

        <div class="u-textMute>
            <a href="#">
                <span class="u-isHidden">Collapse</span>
            <a class="u-linkComplex" href="#">
                <i class="Icon Icon--reply"></i>
                <span class="u-linkComplex-target">Reply</span>
            <a href="#">
                <i class="Icon Icon--favorite"></i>
                <span class="u-isVishidden">Favorite</span>

Browser support

  • Google Chrome (latest)
  • Opera (latest)
  • Firefox 4+
  • Safari 5+
  • Internet Explorer 8+
Something went wrong with that request. Please try again.