Home

Awesome

SUIT CSS utilities: size

Build Status

SUIT CSS sizing utilities. Sets width and flex-basis.

Read more about SUIT CSS's design principles.

Installation

Available classes

X must be an integer less than Y.

Y can be any of the following numbers: 2, 3, 4, 5, 6, 8, 10, 12.

Plugins

Utilities that can be limited to specific Media Query breakpoints.

Configuration

There are 3 Media Query breakpoints:

When using postcss-custom-media, breakpoints can be configured using @custom-media. For example:

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

Usage

Please refer to the README for SUIT CSS utils

Testing

Install Node (comes with npm).

npm install

To generate a build:

npm run build

To generate the testing build.

npm run build-test

To lint code with postcss-bem-linter and stylelint

npm run lint

To watch the files for making changes to test:

npm run watch

Basic visual tests are in test/index.html.

Browser support

Refer to the caniuse page for flexbox. This package can still be used in older browsers if width is required