↓Skip to main content
IT Blog IT Blog
  1. All Posts/

suit

Tools HTML

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:

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

@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

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

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

"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

  • https://github.com/antontrollback/select
  • https://github.com/giuseppeg/suitcss-toolkit
  • https://github.com/simonsmith/suitcss-components-form-field

Utilities

  • https://github.com/frekyll/suitcss-utils-spacing
  • https://github.com/simonsmith/suitcss-utils-image
  • https://github.com/simonsmith/suitcss-utils-list

Example

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



↑