Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/suitcss/suit

Style tools for UI components
https://github.com/suitcss/suit

css css-packages postcss preprocessor suit-css

Last synced: 3 days ago
JSON representation

Style tools for UI components

Host: GitHub
URL: https://github.com/suitcss/suit
Owner: suitcss
Created: 2011-10-19T21:38:00.000Z (about 13 years ago)
Default Branch: master
Last Pushed: 2022-05-29T08:37:53.000Z (over 2 years ago)
Last Synced: 2024-10-29T15:18:27.161Z (about 2 months ago)
Topics: css, css-packages, postcss, preprocessor, suit-css
Language: HTML
Homepage: http://suitcss.github.io/
Size: 1.73 MB
Stars: 3,801
Watchers: 124
Forks: 229
Open Issues: 20
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

my-awesome-starred - suit - Style tools for UI components (CSS)

README

        # SUIT CSS

[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](http://gitter.im/suitcss/suit)

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](https://github.com/suitcss/suit/tree/master/packages/base) for web apps.

* [CSS utilities](https://github.com/suitcss/suit/tree/master/packages/utils).

* [CSS components](https://github.com/suitcss/suit/tree/master/packages/components).

* A [future-facing CSS preprocessor](https://github.com/suitcss/suit/tree/master/packages/preprocessor)

Each of these modules are made up of smaller modules, making it easy to customize

your setup and build pipeline.

**[Documentation](doc/README.md)**.

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

```css

@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

```

```css

@import "suitcss-components-grid";

@import "suitcss-utils-size";

```

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

preprocessor:

```json

"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](https://github.com/suitcss/suit/tree/master/packages/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:

```html

  

  


    {{title}}

    {{description}}

    

      

    

  


```

CSS:

```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](https://www.npmjs.org/): `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](doc/naming-conventions.md).

* [base](https://github.com/suitcss/suit/tree/master/packages/base/): a thin reset for web apps, built on top of normalize.css.

* [utils](https://github.com/suitcss/suit/tree/master/packages/utils/): all the utility packages.

* [components-arrange](https://github.com/suitcss/suit/tree/master/packages/components-arrange/): flexbox-like horizontal arrangements.

* [components-button](https://github.com/suitcss/suit/tree/master/packages/components-button/): robust, structural button styles.

* [components-flex-embed](https://github.com/suitcss/suit/tree/master/packages/components-flex-embed/): aspect-ratios for embeds.

* [components-grid](https://github.com/suitcss/suit/tree/master/packages/components-grid/): a grid foundation.

* [components-test](https://github.com/suitcss/suit/tree/master/packages/components-test/): structure for visual tests.

* [theme](https://github.com/suitcss/suit/tree/master/packages/theme/): example theme.

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

build process:

* [base bundle](https://github.com/suitcss/base/releases)

* [utils bundle](https://github.com/suitcss/utils/releases)

* [components bundle](https://github.com/suitcss/components/releases)

* [everything bundle](https://github.com/suitcss/suit/releases) (only 4.4KB minified and gzipped)

## Build and test tools

The [suitcss-preprocessor](https://github.com/suitcss/suit/tree/master/packages/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](https://github.com/postcss/postcss): A tool for transforming styles with JS plugins

  * [postcss-import](https://github.com/postcss/postcss-import)

  * [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties)

  * [postcss-calc](https://github.com/postcss/postcss-calc)

  * [postcss-custom-media](https://github.com/postcss/postcss-custom-media)

  * [autoprefixer](https://github.com/postcss/autoprefixer)

Packages are linted with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and minification is provided by [cssnano](http://cssnano.co/).

## Complementary tools and libraries

Libraries / frameworks for component-based development:

* [React](https://facebook.github.io/react/)

* [Ember.js Components](http://emberjs.com/guides/components/)

* [AngularJS](https://github.com/angular/angular.js)

Tools and dependency managers:

* [npm](https://www.npmjs.org/): package manager.

* [html-inspector](https://github.com/philipwalton/html-inspector): test HTML templates for SUIT CSS conformance.

## Development

Install [Node](http://nodejs.org) (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](http://caniuse.com/) page for [flexbox](http://caniuse.com/#feat=flexbox).