{"id":18254251,"url":"https://github.com/brikcss/spacing","last_synced_at":"2025-04-08T21:47:23.796Z","repository":{"id":143745469,"uuid":"136187435","full_name":"brikcss/spacing","owner":"brikcss","description":"Spacing component to make managing spacing in HTML and CSS easier.","archived":false,"fork":false,"pushed_at":"2018-11-08T20:43:14.000Z","size":142,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-15T04:35:56.671Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brikcss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-05T14:11:49.000Z","updated_at":"2018-06-06T16:46:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"fddc0a72-bdfd-4be2-9ef3-cf3c9a37c7c1","html_url":"https://github.com/brikcss/spacing","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fspacing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fspacing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fspacing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brikcss%2Fspacing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brikcss","download_url":"https://codeload.github.com/brikcss/spacing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247934808,"owners_count":21020724,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T10:11:15.041Z","updated_at":"2025-04-08T21:47:23.776Z","avatar_url":"https://github.com/brikcss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Brikcss Spacing\n\n\u003c!-- Shields. --\u003e\n\u003cp\u003e\n\t\u003c!-- NPM version. --\u003e\n\t\u003ca href=\"https://www.npmjs.com/package/@brikcss/spacing\"\u003e\n\t\t\u003cimg alt=\"NPM version\" src=\"https://img.shields.io/npm/v/@brikcss/spacing.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- NPM downloads/month. --\u003e\n\t\u003ca href=\"https://www.npmjs.com/package/@brikcss/spacing\"\u003e\n\t\t\u003cimg alt=\"NPM downloads per month\" src=\"https://img.shields.io/npm/dm/@brikcss/spacing.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Travis branch. --\u003e\n\t\u003ca href=\"https://github.com/brikcss/spacing/tree/master\"\u003e\n\t\t\u003cimg alt=\"Travis branch\" src=\"https://img.shields.io/travis/rust-lang/rust/master.svg?style=flat-square\u0026label=master\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Codacy. --\u003e\n\t\u003ca href=\"https://www.codacy.com/app/thezimmee/spacing\"\u003e\n\t\t\u003cimg alt=\"NPM version\" src=\"https://img.shields.io/codacy/grade/56045711e2934e628fcb9468a8d0833c/master.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Coveralls --\u003e\n\t\u003ca href='https://coveralls.io/github/brikcss/spacing?branch=master'\u003e\n\t\t\u003cimg src='https://img.shields.io/coveralls/github/brikcss/spacing/master.svg?style=flat-square' alt='Coverage Status' /\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Commitizen friendly. --\u003e\n\t\u003ca href=\"http://commitizen.github.io/cz-cli/\"\u003e\n\t\t\u003cimg alt=\"Commitizen friendly\" src=\"https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Semantic release. --\u003e\n\t\u003ca href=\"https://github.com/semantic-release/semantic-release\"\u003e\n\t\t\u003cimg alt=\"semantic release\" src=\"https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- Prettier code style. --\u003e\n\t\u003ca href=\"https://prettier.io/\"\u003e\n\t\t\u003cimg alt=\"code style: prettier\" src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e\n\t\u003c!-- MIT License. --\u003e\n\t\u003c!-- \u003ca href=\"https://choosealicense.com/licenses/mit/\"\u003e\n\t\t\u003cimg alt=\"License\" src=\"https://img.shields.io/npm/l/express.svg?style=flat-square\"\u003e\n\t\u003c/a\u003e --\u003e\n\u003c/p\u003e\n\nSpacing component to make creating spacing variables and classes in CSS easier.\n\n---\n\n## Environment and browser support\n\n| Node   | CLI   | UMD   | ES Module | Browser   |\n|:------:|:-----:|:-----:|:---------:|:---------:|\n| x      | x     | x     | x         | ✓         |\n\n| Chrome | Firefox | Safari | Edge | IE  | iOS | Android |\n|:------:|:-------:|:------:|:----:|:---:|:---:|:-------:|\n| ✓      | ✓       | ✓      | ✓    | 11  | ✓   | ✓       |\n\n\\* _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)._\n\n## Install\n\n1. Install from NPM:\n\n\t```sh\n\tnpm i -D @brikcss/spacing\n\t```\n\n2. Include desired file(s) in your app:\n\n\t- _PostCSS with [postcss-import](https://github.com/postcss/postcss-import)_: `@import '@brickss/spacing';`\n\t- _Precompiled:_ Include `./dist/spacing.min.css` for a version precompiled to vanilla CSS.\n\t- _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.\n\n## Spacing mixin usage\n\nThe [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._\n\n### Syntax and options\n\n```css\n@mixin spacing \u003cseparator = '-'\u003e, \u003cimportant = 'true'\u003e {\n\t/* Mixin properties go here (see example). */\n}\n```\n\n- `separator`  _{String}_  (`-`)  Character separator in the rule selector.\n- `important`  _{Boolean}_  (`true`)  Whether to mark rule declarations as `!important`.\n\n### Example\n\nSample input:\n\n```css\n@mixin spacing {\n\t/* Values to create base and variation classes for. */\n\tvalues: 1rem 2rem;\n\t/* Properties. Must include one or more of `padding`, `margin`. The value is used in its selectors. */\n\tpadding: p;\n\tmargin: m;\n\t/* Variations (optional). All possible variations are below. You can include/exclude any or all of them. The value is used in its selectors. */\n\ttop: t;\n\tbottom: b;\n\tleft: l;\n\tright: r;\n\thorizontal: x;\n\tvertical: y;\n}\n```\n\nOutput:\n\n```css\n/* Auto-generated classes. */\n\n.p-1 {\n    padding: 1rem !important\n}\n\n.pt-1 {\n    padding-top: 1rem !important\n}\n\n.pb-1 {\n    padding-bottom: 1rem !important\n}\n\n.pl-1 {\n    padding-left: 1rem !important\n}\n\n.pr-1 {\n    padding-right: 1rem !important\n}\n\n.px-1 {\n    padding-left: 1rem !important;\n    padding-right: 1rem !important\n}\n\n.py-1 {\n    padding-top: 1rem !important;\n    padding-bottom: 1rem !important\n}\n\n.p-2 {\n    padding: 2rem !important\n}\n\n.pt-2 {\n    padding-top: 2rem !important\n}\n\n.pb-2 {\n    padding-bottom: 2rem !important\n}\n\n.pl-2 {\n    padding-left: 2rem !important\n}\n\n.pr-2 {\n    padding-right: 2rem !important\n}\n\n.px-2 {\n    padding-left: 2rem !important;\n    padding-right: 2rem !important\n}\n\n.py-2 {\n    padding-top: 2rem !important;\n    padding-bottom: 2rem !important\n}\n\n.m-1 {\n    margin: 1rem !important\n}\n\n.mt-1 {\n    margin-top: 1rem !important\n}\n\n.mb-1 {\n    margin-bottom: 1rem !important\n}\n\n.ml-1 {\n    margin-left: 1rem !important\n}\n\n.mr-1 {\n    margin-right: 1rem !important\n}\n\n.mx-1 {\n    margin-left: 1rem !important;\n    margin-right: 1rem !important\n}\n\n.my-1 {\n    margin-top: 1rem !important;\n    margin-bottom: 1rem !important\n}\n\n.m-2 {\n    margin: 2rem !important\n}\n\n.mt-2 {\n    margin-top: 2rem !important\n}\n\n.mb-2 {\n    margin-bottom: 2rem !important\n}\n\n.ml-2 {\n    margin-left: 2rem !important\n}\n\n.mr-2 {\n    margin-right: 2rem !important\n}\n\n.mx-2 {\n    margin-left: 2rem !important;\n    margin-right: 2rem !important\n}\n\n.my-2 {\n    margin-top: 2rem !important;\n    margin-bottom: 2rem !important\n}\n```\n\n\u003cstyle type=\"text/css\"\u003e\n\t@media (min-width: 768px) {\n\t\tpre { max-height: 60vh; }\n\t}\n\u003c/style\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrikcss%2Fspacing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrikcss%2Fspacing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrikcss%2Fspacing/lists"}