0.0.1 • Published 6 years ago
@brikcss/spacing v0.0.1
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 are used, IE11 is supported with the use of a custom variables polyfill, such as postcss-var-shim.
Install
Install from NPM:
npm i -D @brikcss/spacing
Include desired file(s) in your app:
./dist/spacing.css
and./dist/spacing.min.css
are precompiled with PostCSS. Include one of these to accept all defaults../src/spacing.css
is the source CSS. Use this as an example, with the spacing mixin, to generate your own custom classes../src/mixins/spacing.js
is the spacing mixin. Use this to generate your own custom classes.
Spacing mixin usage
The spacing mixin allows you to generate your own custom spacing classes in one easy step. See postcss-mixins for documentation on how to configure and use PostCSS mixins.
Syntax and options
@mixin spacing <separator = '-'>, <important = 'true'> {
/* 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:
@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:
/* 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
}