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:
- CSS base styles for web apps.
- CSS utilities.
- CSS components.
- A future-facing CSS preprocessor
Each of these modules are made up of smaller modules, making it easy to customize your setup and build pipeline.
SUIT CSS makes use of variables, custom media queries, and dependency resolution for CSS.
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:
/** @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-highlight-color: orange;
}
.Excerpt {
padding: var(--Excerpt-padding);
}
.Excerpt-thumbnail {
border: 2px solid var(--Excerpt-highlight-color);
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;
}
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)
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:
- PostCSS: A tool for transforming styles with JS plugins
Packages are linted with postcss-bem-linter and minification is provided by cssnano.
Libraries / frameworks for component-based development:
Tools and dependency managers:
- npm: package manager.
- html-inspector: test HTML templates for SUIT CSS conformance.
Install Node (comes with npm).
To generate a build:
npm run build
- Google Chrome (latest)
- Opera (latest)
- Firefox 4+ (28+ for
flex
) - Safari 5+ (6.1+ for
flex
) - Internet Explorer 9+ (10+ for
flex
)