Home

Awesome

SUIT CSS utilities: spacing

SUIT CSS spacing utilities

Read more about SUIT CSS's design principles.

Build Status

Installation

Available classes

Usage

<div class="u-paddingSm">
  <h1 class="u-marginBottomXs">Hello, world!</h1>
  <p class="u-marginBottomMd">This is a paragraph.</p>
</div>

Configuration

Adjust the spacing scale via CSS variables.

:root {
  --spaceXs: 8px;
  --spaceSm: 16px;
  --spaceMd: 32px;
  --spaceLg: 64px;
  --spaceXl: 128px
}

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 lint code with postcss-bem-linter and stylelint:

npm run lint

To generate the testing build:

npm run build-test

To watch the files for making changes to test:

npm run watch

Basic visual tests are in test/index.html.

Browser support