{"id":15066661,"url":"https://github.com/digitaledgeit/sass-spacing","last_synced_at":"2025-04-10T16:40:21.155Z","repository":{"id":31121392,"uuid":"34680938","full_name":"digitaledgeit/sass-spacing","owner":"digitaledgeit","description":"SASS mixins for margins and paddings. Plus a compiled set of responsive margin and padding classes.","archived":false,"fork":false,"pushed_at":"2017-01-16T10:41:16.000Z","size":33,"stargazers_count":24,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T22:44:17.391Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/digitaledgeit.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}},"created_at":"2015-04-27T17:33:02.000Z","updated_at":"2025-04-05T19:33:05.000Z","dependencies_parsed_at":"2022-09-03T18:40:46.858Z","dependency_job_id":null,"html_url":"https://github.com/digitaledgeit/sass-spacing","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitaledgeit%2Fsass-spacing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitaledgeit%2Fsass-spacing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitaledgeit%2Fsass-spacing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/digitaledgeit%2Fsass-spacing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/digitaledgeit","download_url":"https://codeload.github.com/digitaledgeit/sass-spacing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248252724,"owners_count":21072702,"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-09-25T01:10:33.390Z","updated_at":"2025-04-10T16:40:21.131Z","avatar_url":"https://github.com/digitaledgeit.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sass-spacing\n\nCSS classes/mixins for responsive margins and padding.\n\n## Installation\n\n```bash\nnpm install --save sass-spacing\n```\n\n## Usage\n\n### Using the classes:\n\nHTML:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"node_modules/sass-spacing/index.css\"/\u003e\n\n\u003cdiv class=\"tile p:1@xs p:2@md\"\u003e\n  \u003ch1 class=\"tile__title\"\u003eMy Title\u003c/h1\u003e\n  \u003cp class=\"tile__content mt:1@xs mt:2@md\"\u003eMy content...\u003c/p\u003e\n\u003c/div\u003e\n```\n\n- Where `m` or `p` is margin or padding\n- Where `x`, `y`, `l`, `r`, `t` or `b` is the direction in which the margin or padding is applied\n- Where `0`, `1`, `2`, `3`, `4`, `5`, `6` or `auto` is the size of the margin or padding applied\n- Where `@*` is the breakpoint from which the margin or padding is applied\n\n### Using the mixins:\n\nSCSS:\n\n```scss\n@import \"sass-spacing/mixins.scss\";\n@import \"sass-breakpoints/mixins.scss\";\n\n.tile {\n  @include p(1);\n  @include breakpoint('md') {\n    @include p(2);\n  }\n}\n\n.tile__content {\n  @include mt(1);\n    @include breakpoint('md') {\n      @include mt(2);\n    }\n}\n```\n\nHTML:\n\n```html\n  \u003cdiv class=\"tile\"\u003e\n    \u003ch1 class=\"tile__title\"\u003eTile Title\u003c/h1\u003e\n    \u003ch1 class=\"tile__content\"\u003eTile content...\u003c/h1\u003e\n  \u003c/div\u003e\n```\n\n###### Margin\n\n- `m($size)`\n- `m($y, $x)`\n- `m($t, $x, $b)`\n- `m($t, $r, $b, $l)`\n\n\n- `mx($size)`\n- `mx($r, $l)`\n- `my($size)`\n- `my($t, $b)`\n\n\n- `mt($size)`\n- `mr($size)`\n- `mb($size)`\n- `ml($size)`\n\nWhere `x`, `y`, `l`, `r`, `t` or `b` is the direction in which the margin is applied.\n\nWhere `0`, `1`, `2`, `3`, `4`, `5`, `6` or `auto` is the `$size` of the margin applied.\n\n###### Padding\n\n- `p($size)`\n- `p($y, $x)`\n- `p($t, $x, $b)`\n- `p($t, $r, $b, $l)`\n\n\n- `px($size)`\n- `px($r, $l)`\n- `py($size)`\n- `py($t, $b)`\n\n\n- `pt($size)`\n- `pr($size)`\n- `pb($size)`\n- `pl($size)`\n\nWhere `x`, `y`, `l`, `r`, `t` or `b` is the direction in which the padding is applied.\n\nWhere `0`, `1`, `2`, `3`, `4`, `5` or `6` is the `$size` of the padding applied.\n\n## Directions\n\n- none - margin/padding on all sides\n- `x` - margin/padding on the left and right\n- `y` - margin/padding on the top and bottom\n- `l` - margin/padding on the left\n- `r` - margin/padding on the right\n- `t` - margin/padding on the tom\n- `b` - margin/padding on the bottom\n\n## Sizes\n\n- `0` - `0rem` margin/padding\n- `1` - `.25rem` margin/padding\n- `2` - `.5rem` margin/padding\n- `3` - `1rem` margin/padding\n- `4` - `2rem` margin/padding\n- `5` - `4rem` margin/padding\n- `6` - `8rem` margin/padding\n- `auto` - `auto` margin only\n\n## Breakpoints\n\nSee the [sass-breakpoints](https://www.npmjs.com/package/sass-breakpoints) package for a list of available breakpoints.\n\n## Customisation\n\nYou can customise a number of features by defining the following variables before importing `sass-spacing` in your SASS file.\n\n```scss\n//specify some alternate sizing scheme\n$spacing-sizes: (\n  'none': 0,\n  'xs': 4px,\n  'md': 16px,\n  'xl': 28px\n);\n\n//specify whether !important is applied\n$spacing-important: false;\n\n```\n\nSee the [sass-breakpoints](https://www.npmjs.com/package/sass-breakpoints) package for instructions on customising the available breakpoints.\n\n## Change log\n\n### v2.0.0\n\n- changed the default margin-padding sizes\n- switched from attributes to class names\n- removed support for ComponentJS\n\n### v1.1.1\n\n- added missing `m($t, $x, $b)` and `p($t, $x, $b)` overrides\n\n### v1.1.0\n\n- added `auto` size to margin\n- added overrides for `m()` and `p()` to set multiple properties at once\n\n### v1.0.0\n\n- added an option for applying `!important` to margin and padding rules and defaulted the option to true (a breaking change if you're relying on your own classes overriding the spacing mixins/classes)\n- changed names of the options for improved consistency and to prevent clashes with other modules (a breaking change if you're overriding the default options)\n- changed the prefix from `g` to `u` - the `g-*` attributes are used for more utilities than just the grid (a breaking change if you're using the compiled classes)\n- added support for ComponentJS\n\n## License\n\nThe MIT License (MIT)\n\nCopyright (c) 2015 James Newell\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigitaledgeit%2Fsass-spacing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdigitaledgeit%2Fsass-spacing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdigitaledgeit%2Fsass-spacing/lists"}