rogeliog / suit

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

SUIT

An HTML/CSS framework for creating loosely coupled UI components.

SUIT also provides a collection of small, adaptive, structural HTML/CSS modules built using a naming convention inspired by the BEM methodology.

Documentation.

Installation

• Component(1): component install suitcss/suit
• Bower: bower install --save suit

Features

• Very small footprint.
• Scoped components.
• Individually versioned modules.
• Consistent class name conventions.
• Develop components independently of their context (mitigates rule-order issues).
• Provides common, utility classes.
• Testing friendly.
• Responsive friendly.
• Work more with HTML than CSS.
• Theme-independence.
• Designed for teams working on large, changing web sites and applications.
• Easy to extend and build upon.

Official 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 Bower – a package manager for the web.

• Base

Utilities:

• All
• Display
• Layout
• Link
• Offset (packages Before and After)
• Size
• Space
• State
• Text

Components:

• Arrange
• Button
• Button group
• Flexible embeds
• Form
• Grid
• Grid Layouts
• Table

N.B. There is a Yeoman generator for creating SUIT component packages.

Suggested tooling

• component
• component-builder-suit
• generator-suit
• html-inspector
• react
• rework-suit

Example

HTML:

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

CSS:

/**
 * Excerpt component
 *
 * @require u-cf
 * @require u-sizeFit
 * @require u-sizeFill
 *
 * <article class="Excerpt u-cf">
 *   <img class="Excerpt-thumbnail u-sizeFit" src="{{src}}" alt="">
 *   <div class="u-sizeFill">
 *     <h1 class="Excerpt-title u-h3">{{title}}</h1>
 *     <p class="Excerpt-text">{{description}}</p>
 *     <span class="Excerpt-readMore">
 *       <a class="Button Button--secondary">{{button_text}}</a>
 *     </span>
 *   </div>
 * </article>
 */

.Excerpt {
  line-height: 1.2857em;
}

.Excerpt-thumbnail {
  border: 2px solid #000;
  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;
}

Browser support

• Google Chrome (latest)
• Opera (latest)
• Firefox 4+
• Safari 5+
• Internet Explorer 8+