Skip to content

frekyll/suitcss-utils-spacing

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SUIT CSS utilities: spacing

SUIT CSS spacing utilities

Read more about SUIT CSS's design principles.

Build Status

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+