Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Style tools for UI components
CSS
Branch: master

Merge pull request #100 from teddybradford/patch-2

Clarify utilities syntax usage
latest commit 6e5c927d58
@necolas necolas authored
Failed to load latest commit information.
doc Clarify utilities syntax usage
.gitignore Add Component(1) test setup
CHANGELOG.md 0.6.0
LICENSE.md Fix LICENSE
README.md Reflect new variable naming convention in docs
bower.json 0.6.0
component.json 0.6.0
index.css Update dependencies
package.json 0.6.0

README.md

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.

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; use strict */

@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;
}

CSS packages

Each CSS package can be installed with npm, Component(1), or Bower. 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:

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, and per-bundle tests for the IE selector limit. CSS build and test tools.

The preprocessor makes use of:

Complementary tools and libraries

Libraries / frameworks for component-based development:

Tools and dependency managers:

Development

Install Node (comes with npm).

npm install

To generate a build:

npm run build

Browser support

  • Chrome
  • Opera
  • Firefox
  • Safari 6+
  • Internet Explorer 9+
Something went wrong with that request. Please try again.