https://github.com/brikcss/spacing
Spacing component to make managing spacing in HTML and CSS easier.
https://github.com/brikcss/spacing
Last synced: 9 months ago
JSON representation
Spacing component to make managing spacing in HTML and CSS easier.
- Host: GitHub
- URL: https://github.com/brikcss/spacing
- Owner: brikcss
- Created: 2018-06-05T14:11:49.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-08T20:43:14.000Z (about 7 years ago)
- Last Synced: 2025-03-15T04:35:56.671Z (10 months ago)
- Language: JavaScript
- Size: 139 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Brikcss Spacing
Spacing component to make creating spacing variables and classes in CSS easier.
---
## Environment and browser support
| Node | CLI | UMD | ES Module | Browser |
|:------:|:-----:|:-----:|:---------:|:---------:|
| x | x | x | x | ✓ |
| Chrome | Firefox | Safari | Edge | IE | iOS | Android |
|:------:|:-------:|:------:|:----:|:---:|:---:|:-------:|
| ✓ | ✓ | ✓ | ✓ | 11 | ✓ | ✓ |
\* _Note: Since [CSS Variables](https://caniuse.com/#search=css%20variables) are used, IE11 is supported with the use of a custom variables polyfill, such as [postcss-var-shim](https://github.com/luwes/postcss-var-shim)._
## Install
1. Install from NPM:
```sh
npm i -D @brikcss/spacing
```
2. Include desired file(s) in your app:
- _PostCSS with [postcss-import](https://github.com/postcss/postcss-import)_: `@import '@brickss/spacing';`
- _Precompiled:_ Include `./dist/spacing.min.css` for a version precompiled to vanilla CSS.
- _Custom:_ To generate your own custom spacing classes, use the [spacing @mixin](./src/mixins/spacing.js) and follow the [source CSS](./src/colors.css) as an example.
## Spacing mixin usage
The [spacing mixin](./src/mixins/spacing.js) allows you to generate your own custom spacing classes in one easy step. _See [postcss-mixins](https://github.com/postcss/postcss-mixins) for documentation on how to configure and use PostCSS mixins._
### Syntax and options
```css
@mixin spacing , {
/* Mixin properties go here (see example). */
}
```
- `separator` _{String}_ (`-`) Character separator in the rule selector.
- `important` _{Boolean}_ (`true`) Whether to mark rule declarations as `!important`.
### Example
Sample input:
```css
@mixin spacing {
/* Values to create base and variation classes for. */
values: 1rem 2rem;
/* Properties. Must include one or more of `padding`, `margin`. The value is used in its selectors. */
padding: p;
margin: m;
/* Variations (optional). All possible variations are below. You can include/exclude any or all of them. The value is used in its selectors. */
top: t;
bottom: b;
left: l;
right: r;
horizontal: x;
vertical: y;
}
```
Output:
```css
/* Auto-generated classes. */
.p-1 {
padding: 1rem !important
}
.pt-1 {
padding-top: 1rem !important
}
.pb-1 {
padding-bottom: 1rem !important
}
.pl-1 {
padding-left: 1rem !important
}
.pr-1 {
padding-right: 1rem !important
}
.px-1 {
padding-left: 1rem !important;
padding-right: 1rem !important
}
.py-1 {
padding-top: 1rem !important;
padding-bottom: 1rem !important
}
.p-2 {
padding: 2rem !important
}
.pt-2 {
padding-top: 2rem !important
}
.pb-2 {
padding-bottom: 2rem !important
}
.pl-2 {
padding-left: 2rem !important
}
.pr-2 {
padding-right: 2rem !important
}
.px-2 {
padding-left: 2rem !important;
padding-right: 2rem !important
}
.py-2 {
padding-top: 2rem !important;
padding-bottom: 2rem !important
}
.m-1 {
margin: 1rem !important
}
.mt-1 {
margin-top: 1rem !important
}
.mb-1 {
margin-bottom: 1rem !important
}
.ml-1 {
margin-left: 1rem !important
}
.mr-1 {
margin-right: 1rem !important
}
.mx-1 {
margin-left: 1rem !important;
margin-right: 1rem !important
}
.my-1 {
margin-top: 1rem !important;
margin-bottom: 1rem !important
}
.m-2 {
margin: 2rem !important
}
.mt-2 {
margin-top: 2rem !important
}
.mb-2 {
margin-bottom: 2rem !important
}
.ml-2 {
margin-left: 2rem !important
}
.mr-2 {
margin-right: 2rem !important
}
.mx-2 {
margin-left: 2rem !important;
margin-right: 2rem !important
}
.my-2 {
margin-top: 2rem !important;
margin-bottom: 2rem !important
}
```
@media (min-width: 768px) {
pre { max-height: 60vh; }
}