• Stars
    star
    3,801
  • Rank 11,582 (Top 0.3 %)
  • Language
    HTML
  • Created about 13 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Style tools for UI components

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

Utilities

Example

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

More Repositories

1

utils

CSS utility classes
JavaScript
304
star
2

base

CSS base styles for web apps (a thin layer on top of normalize.css)
HTML
194
star
3

components-grid

Component CSS for grids
HTML
156
star
4

preprocessor

A future-facing CSS preprocessor (used by SUIT CSS)
JavaScript
135
star
5

components-flex-embed

Component CSS for intrinsic ratio embeds
HTML
111
star
6

stylelint-config-suitcss

SUIT CSS config for Stylelint
JavaScript
77
star
7

components-arrange

Component CSS for arranging/aligning horizontal cells, a bit like flexbox
HTML
72
star
8

utils-flex

CSS flexbox utilities
HTML
63
star
9

components-button

Component CSS for buttons
HTML
52
star
10

rework-suit

Collection of "pure CSS" plugins for Rework (DEPRECATED)
JavaScript
50
star
11

rework-suit-conformance

Rework plugin for SUIT CSS to check component style isolation (DEPRECATED)
JavaScript
41
star
12

utils-size

CSS sizing utilities
CSS
38
star
13

components

Collection of SUIT CSS components
CSS
34
star
14

theme

Example theme for SUIT CSS
CSS
29
star
15

generator-suit

A Yeoman generator for SUIT packages
JavaScript
26
star
16

utils-text

CSS text utilities
HTML
23
star
17

stylelint-suitcss

A collection of Stylelint plugins for SUIT CSS
JavaScript
22
star
18

components-button-group

Component CSS for button-groups (DEPRECATED)
HTML
21
star
19

components-test

Component CSS to help test the visual presentation of components
CSS
19
star
20

utils-layout

CSS layout utilities
HTML
19
star
21

suitcss.github.io

SUIT CSS project site
HTML
18
star
22

utils-link

CSS link utilities
HTML
16
star
23

utils-display

CSS display utilities
HTML
15
star
24

utils-position

CSS positioning utilities
HTML
13
star
25

utils-state

CSS state utilities (DEPRECATED)
HTML
13
star
26

utils-align

CSS vertical-alignment utilities
HTML
12
star
27

component-builder-suit

A Component(1) builder plugin for SUIT CSS (DEPRECATED)
JavaScript
10
star
28

utils-before

CSS leading offset utilities
CSS
8
star
29

utils-after

CSS trailing offset utilities
CSS
8
star
30

utils-offset

CSS offset utilities
JavaScript
8
star
31

initial-values

1
star