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.

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

• 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.

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

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.

• AngularJS
• Ember.js Components
• React

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;
}

Install Node (comes with npm).

npm install

To generate a build:

npm run build

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