{"id":16760319,"url":"https://github.com/ryanve/spacing","last_synced_at":"2025-04-10T17:37:06.788Z","repository":{"id":57366855,"uuid":"82130602","full_name":"ryanve/spacing","owner":"ryanve","description":"Opensource functional CSS spacing for web spaces","archived":false,"fork":false,"pushed_at":"2017-12-27T21:02:40.000Z","size":39,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T18:56:27.573Z","etag":null,"topics":["css","functional-css","margin","padding","proximity","spacing"],"latest_commit_sha":null,"homepage":"https://ryanve.github.io/spacing/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanve.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-16T02:37:03.000Z","updated_at":"2024-02-22T04:02:05.000Z","dependencies_parsed_at":"2022-08-23T20:10:57.986Z","dependency_job_id":null,"html_url":"https://github.com/ryanve/spacing","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Fspacing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Fspacing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Fspacing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Fspacing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanve","download_url":"https://codeload.github.com/ryanve/spacing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248262040,"owners_count":21074236,"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":["css","functional-css","margin","padding","proximity","spacing"],"created_at":"2024-10-13T04:23:06.806Z","updated_at":"2025-04-10T17:37:06.771Z","avatar_url":"https://github.com/ryanve.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# spacing\nOpensource functional CSS spacing for modern web development\n\n- [\u003cb\u003esetup\u003c/b\u003e](#setup)\n- [\u003cb\u003eclasses\u003c/b\u003e](#classes)\n- [\u003cb\u003edata-spacing\u003c/b\u003e](#data-spacing)\n- [\u003cb\u003escaling\u003c/b\u003e](#scaling)\n- [\u003cb\u003efiles\u003c/b\u003e](#files)\n\n## setup\n\n```\nnpm install spacing\n```\n\n### import whichever [file(s)](#files) meets your needs\n\n- [`main.css`](main.css) is harcoded for CSS3 compatibility\n- [`module.css`](module.css) uses CSS4 variables\n\n```css\n@import \"node_modules/spacing/main\";\n```\n\n## classes\nClasses are listed in order from least to most precendence.\n\n### `padding`\n- `.p0`\n- `.p1`\n- `.p2`\n- `.p3`\n- `.p4`\n\n### `padding-top`\n- `.pt0`\n- `.pt1`\n- `.pt2`\n- `.pt3`\n- `.pt4`\n\n### `padding-left`\n- `.pl0`\n- `.pl1`\n- `.pl2`\n- `.pl3`\n- `.pl4`\n\n### `padding-right`\n- `.pr0`\n- `.pr1`\n- `.pr2`\n- `.pr3`\n- `.pr4`\n\n### `padding-bottom`\n- `.pb0`\n- `.pb1`\n- `.pb2`\n- `.pb3`\n- `.pb4`\n\n### `margin`\n- `.-m2`\n- `.-m1`\n- `.m0`\n- `.m1`\n- `.m2`\n- `.m3`\n- `.m4`\n- `.m-auto`\n\n### `margin-top`\n- `.mt0`\n- `.mt1`\n- `.mt2`\n- `.mt3`\n- `.mt4`\n- `.mt-auto`\n\n### `margin-left`\n- `.ml0`\n- `.ml1`\n- `.ml2`\n- `.ml3`\n- `.ml4`\n- `.ml-auto`\n\n### `margin-right`\n- `.mr0`\n- `.mr1`\n- `.mr2`\n- `.mr3`\n- `.mr4`\n- `.mr-auto`\n\n### `margin-bottom`\n- `.mb0`\n- `.mb1`\n- `.mb2`\n- `.mb3`\n- `.mb4`\n- `.mb-auto`\n\n### `:first-child`\n- `.mt0-first`\n- `.ml0-first`\n- `.mr0-first`\n- `.mb0-first`\n\n### `:last-child`\n- `.mt0-last`\n- `.ml0-last`\n- `.mr0-last`\n- `.mb0-last`\n\n## data-spacing\n\nAlternative to [classes](#classes) you can also space via `[data-spacing]` with value(s) being any of the classes.\n\n```html\n\u003cp data-spacing=\"p1 m0 mb2\"\u003e\n```\n\nAll `[data-spacing]` selectors come after the classes in the cascade.\n\n## scaling\n\n### spacing variables default to `rem` and therefore can be scaled responsively with the `rem` size\n\n```css\n:root {\n  font-size: 1em;\n  font-size: calc(.9em + .5vw + .5vh);\n}\n```\n\n### in CSS4 you could scale via media queries\n\n```css\n:root {\n  --space-1: .5rem;\n  --space-2: 1rem;\n  --space-3: 1.5rem;\n  --space-4: 3rem;\n}\n\n@media (min-width: 30em) and (min-height: 20em) {\n  :root {\n    --space-1: .5rem;\n    --space-2: 1rem;\n    --space-3: 2rem;\n    --space-4: 4rem;\n  }\n}\n```\n\n## files\n\n- [main.css](main.css) css3+ bundle\n  - [module.css](module.css) css4+ bundle\n    - [class.css](class.css) class selectors\n    - [data.css](data.css) data selectors\n    - [root.css](root.css) default variables\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanve%2Fspacing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanve%2Fspacing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanve%2Fspacing/lists"}