SUIT CSS

CSS for building self-contained, composable, configurable UI components.

SUIT CSS aims to provide a reliable and testable styling solution for component-oriented approaches to web application development. It provides some pre-authored utilities and components, but using them is not required.

Documentation.

Installation

It's suggested that you depend on individual packages as and when you need them, however, you can install the standard library if you prefer.

• Component(1): component install suitcss/suit
• npm: npm install suitcss
• Bower: bower install suit
• Download

Features

• Simple methodology. Read the documentation.
• Clear relationship between HTML and CSS.
• Scope styles to the component they're intended for.
• Utilities provide structural and component-independent traits.
• Theming support is available via a limited subset of W3C-spec style variables.
• Pick-and-choose pre-rolled utilities and structural components.
• Supporting tools.

CSS packages

Each package is stand-alone, contains its own documentation and tests, and is written to follow a common set of naming conventions. Dependencies are best managed using Component or npm.

• base: a thin reset for web apps, built on top of normalize.css.
• theme: SUIT's example theme.
• utils: all the utility packages.
• components-arrange: flexbox-like horizontal arrangements.
• components-button: robust, structural button styles.
• components-button-group: a way to group button components.
• components-flex-embed: aspect-ratios for embeds.
• components-grid: a grid foundation.
• components-test: structure for visual tests.

You can also download pre-built bundles to try things out without setting up a build process:

• base bundle
• utils bundle
• suit bundle

Complementary tools

Tools that work well with SUIT when building applications.

• autoprefixer: automatically adds/removes vendor prefixes from your CSS.
• component: flexible component package manager and builder.
• component-builder-suit: add per-file SUIT tooling to your Component(1) build step.
• css-flip: automatically generate LTR/RTL stylesheets.
• generator-suit: scaffold new SUIT packages.
• grunt-suitcss: use rework-suit-conformance and suitcss-preprocessor as a Grunt task.
• html-inspector: test your HTML templates for SUIT conformance.
• rework: arbitrary CSS preprocessing.
• rework-npm: @import inliner and de-duper using Rework (supports fetching via npm).
• rework-suit: a SUIT-specific collection of "pure CSS" plugins for Rework.
• rework-suit-conformance: test individual components for SUIT conformance.
• suitcss-preprocessor: combines rework-suit and autoprefixer; CLI and Node.js interface.

Plays well with…

• AngularJS
• Ember.js Components
• React

Example

HTML:

<article class="Excerpt u-cf">
  <img class="Excerpt-thumbnail u-sizeFit" src="{{src}}" alt="">
  <div class="u-sizeFill">
    <h1 class="Excerpt-title"><a href="{{url}}">{{title}}</a></h1>
    <p class="Excerpt-text u-textBreak">{{description}}</p>
    <span class="Excerpt-readMore">
      <a class="Button Button--secondary">{{button_text}}</a>
    </span>
  </div>
</article>

CSS:

/** @define Excerpt */

/**
 * Content excerpts. Agnostic of image size, and with a clear call to action.
 */

:root {
  var-padding-Excerpt: 20px;
  var-border-color-Excerpt-thumbnail: #000;
}

.Excerpt {
  padding: var(padding-Excerpt);
}

.Excerpt-thumbnail {
  border: 2px solid var(border-color-Excerpt-thumbnail);
  border-radius: 3px;
  margin-right: 10px;
}

.Excerpt-title {
  border-bottom: 1px solid #ccc;
  margin: 0 0 15px;
  padding-bottom: 5px;
}

.Excerpt-readMore {
  display: inline-block;
  margin-top: 10px;
}

Development

Install Node (comes with npm).

npm install

To generate a build:

npm run build

Browser support

• Chrome
• Opera
• Firefox
• Safari 6+
• Internet Explorer 8+