https://github.com/frekyll/suitcss-utils-spacing
CSS spacing utilities
https://github.com/frekyll/suitcss-utils-spacing
css spacing suitcss utility
Last synced: 4 months ago
JSON representation
CSS spacing utilities
- Host: GitHub
- URL: https://github.com/frekyll/suitcss-utils-spacing
- Owner: frekyll
- License: mit
- Created: 2017-10-28T19:44:16.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-02-17T03:01:45.000Z (over 3 years ago)
- Last Synced: 2025-10-21T20:33:07.978Z (7 months ago)
- Topics: css, spacing, suitcss, utility
- Language: HTML
- Homepage: https://frekyll.github.io/suitcss-utils-spacing/test/index.html
- Size: 33.2 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# SUIT CSS utilities: spacing
> SUIT CSS spacing utilities
Read more about [SUIT CSS's design principles](https://github.com/suitcss/suit/).
[](https://travis-ci.org/frekyll/suitcss-utils-spacing)
## Installation
* [npm](http://npmjs.org/): `npm install suitcss-utils-spacing`
* Download: [zip](https://github.com/frekyll/suitcss-utils-spacing/releases/latest)
## Available classes
* `.u-[margin|padding][Top|Right|Bottom|Left][Xs|Sm|Md|Lg|Xl]`
## Usage
```html
Hello, world!
This is a paragraph.
```
### Configuration
#### Adjust the spacing scale via CSS variables.
```css
:root {
--spaceXs: 8px;
--spaceSm: 16px;
--spaceMd: 32px;
--spaceLg: 64px;
--spaceXl: 128px
}
```
Please refer to the README for [SUIT CSS utils](https://github.com/suitcss/utils/).
## Testing
Install [Node](http://nodejs.org) (comes with npm):
```
npm install
```
To generate a build:
```
npm run build
```
To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/):
```
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+