SUIT CSS

Style tools for component-based UI development.

SUIT CSS provides a reliable and testable styling solution for component-based
web application development. The project includes:

Each of these modules are made up of smaller modules, making it easy to customize
your setup and build pipeline.

Documentation.

Quick start

Install the SUIT package and preprocessor with npm:

npm install suitcss --save
npm install suitcss-preprocessor --save-dev

Create an index.css that will import the SUIT packages. Add values for the
custom media queries and any custom properties that you wish to override:

css
@import "suitcss";

@custom-media --sm-viewport (min-width: 320px) and (max-width: 640px);
@custom-media --md-viewport (min-width: 640px) and (max-width: 960px);
@custom-media --lg-viewport (min-width: 960px);

:root {
  --Grid-gutterSize: 25px;
}

Packages can also be installed independently for a more modular build:

npm install suitcss-utils-size suitcss-components-grid --save

css
@import "suitcss-components-grid";
@import "suitcss-utils-size";

Add an entry to the scripts object in package.json that will run the
preprocessor:

json
"scripts": {
  "build": "suitcss index.css build/build.css"
}

Now run npm run build on the command line to output the built packages to
build/build.css. The preprocessor can also watch for file changes by passing
the -w flag e.g. npm run build -- -w.

Refer to the SUIT theme for a more thorough
example.

Community Packages

Components

Utilities

Example

SUIT CSS makes use of variables, custom media queries, and dependency resolution for CSS.

HTML:

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">
      <!-- BUTTON COMPONENT -->
    </span>
  </div>
</article>

CSS:

css
/** @define Excerpt */

@import "suitcss-utils-layout";
@import "suitcss-utils-size";
@import "suitcss-utils-text";
@import "./Button";

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

:root {
  --Excerpt-padding: 20px;
  --Excerpt-highlightColor: orange;
}

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

.Excerpt-thumbnail {
  border: 2px solid var(--Excerpt-highlightColor);
  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;
}

CSS packages

Each CSS package can be installed with npm.
It's suggested that you depend on individual packages as and when you need
them, however, you can install all the CSS packages at once if you prefer:

npm: npm install suitcss

Each package is stand-alone, contains its own documentation and tests, and is
written to follow a common set of naming conventions.

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

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

base bundle
utils bundle
components bundle
everything bundle (only 4.4KB minified and gzipped)

Build and test tools

The suitcss-preprocessor runs CSS
through a build pipeline. It performs per-file tests for conformance to the
SUIT CSS naming conventions, offers minification and allows additional PostCSS
plugins to be added. A CLI and Node API are available

The preprocessor makes use of: