Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

The full collection of SUIT CSS utility classes.

branch: master

0.8.0

latest commit f529ed437c
Nicolas Gallagher necolas authored
Octocat-spinner-32 .gitignore Add .gitignore March 26, 2014
Octocat-spinner-32 CHANGELOG.md 0.8.0 March 31, 2014
Octocat-spinner-32 LICENSE.md Initial public release September 30, 2012
Octocat-spinner-32 README.md Update README docs March 31, 2014
Octocat-spinner-32 bower.json 0.8.0 March 31, 2014
Octocat-spinner-32 component.json 0.8.0 March 31, 2014
Octocat-spinner-32 package.json 0.8.0 March 31, 2014
README.md

SUIT utilities

The full collection of SUIT CSS utility classes. Requires suitcss-preprocessor or similar in your build process, if you choose to use the packages directly.

Read more about SUIT's design principles.

Installation

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

Usage

Utilities are low-level. They have a very narrow scope and may end up being used frequently, due to their separation from the semantics of the document and the theming of a component. As a result, once a class is in significant use great care should be taken when introducing any modifications to it.

Utilities make use of !important to ensure that their styles always apply ahead of those defined in a component's dedicated CSS.

Templating

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 a component's HTML to move particular utility traits into the component's own 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 CSS file for the component to contain any additional, specific styles (often a "skin" or "theme") needed to fully realise the component.

<article class="Tweet">
  <a class="u-pullRight" href="{{permalinkUrl}}">
    {{time}}
  </a>
  <a class="u-pullLeft" href="{{userUrl}}">
    <img src="{{userAvatar}}" alt="{{username}}'s avatar">
  </a>
  <div class="u-sizeFill">
    <a class="u-linkComplex" href="{{userUrl}}">
      <span class="u-linkComplex-target">{{fullname}}</span>
      <span>@{{username}}</span>
    </a>

    <p class="u-textBreak">{{text}}</p>

    <div>
      <a class="u-linkComplex" href="#" role="button">
        <span class="Icon Icon--reply"></span>
        <span class="u-linkComplex-target">Reply</span>
      </a>
      <a href="#" role="button">
        <span class="Icon Icon--favorite"></span>
        <span class="u-isHiddenVisually">Favorite</span>
      </a>
      ...
    </div>
  </div>
</article>

Building

Install Node (comes with npm).

npm install

To generate a build:

npm run build

Browser support

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