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

1. Install from NPM:

   npm i -D @brikcss/spacing

2. Include desired file(s) in your app:

   • ./dist/colors.init.css and ./dist/colors.init.min.css are precompiled with PostCSS. Include one of these to accept all defaults.
   • ./src/colors.init.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 colors mixin allows you to generate your own custom color variables and 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
}

<style type="text/css"> @media (min-width: 768px) { pre { max-height: 60vh; } } </style>