suit

by suitcss

suitcss / suit

Style tools for UI components

3.7K Stars 230 Forks Last release: over 3 years ago (3.0.0) MIT License 1.6K Commits 11 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

SUIT CSS

Gitter

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:
@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:


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.

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

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:

Packages are linted with postcss-bem-linter and minification is provided by cssnano.

Complementary tools and libraries

Libraries / frameworks for component-based development:

Tools and dependency managers:

  • npm: package manager.
  • html-inspector: test HTML templates for SUIT CSS conformance.

Development

Install Node (comes with npm).

To generate a build:

npm run build

Browser support

  • Google Chrome (latest)
  • Opera (latest)
  • Firefox 4+ (28+ for
    flex
    )
  • Safari 5+ (6.1+ for
    flex
    )
  • Internet Explorer 9+ (10+ for
    flex
    )

Refer to the caniuse page for flexbox.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.