jkenlooper / suitcss-utils-spacing

CSS spacing utilities

SUIT CSS utilities: spacing

SUIT CSS spacing utilities

Read more about SUIT CSS's design principles.

Installation

• npm: npm install suitcss-utils-spacing
• Download: zip

Available classes

• .u-[margin|padding][Top|Right|Bottom|Left][Xs|Sm|Md|Lg|Xl]

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

• Google Chrome
• Opera
• Firefox
• Safari
• Internet Explorer 8+
• Android 4.1+
• iOS 6+
• Windows phone 8.1+