{"id":16049715,"url":"https://github.com/dcalhoun/css-utils-padding","last_synced_at":"2025-04-05T07:21:14.600Z","repository":{"id":145719173,"uuid":"62510370","full_name":"dcalhoun/css-utils-padding","owner":"dcalhoun","description":"Immutable, CSS padding utilities.","archived":false,"fork":false,"pushed_at":"2022-02-22T21:38:07.000Z","size":4,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-12T12:39:17.213Z","etag":null,"topics":["atomic","css","immutable","padding-utilities","suitcss"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dcalhoun.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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":"2016-07-03T18:44:02.000Z","updated_at":"2023-03-08T15:21:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"2113b001-30a9-4640-b625-7fdcda1bd349","html_url":"https://github.com/dcalhoun/css-utils-padding","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/dcalhoun%2Fcss-utils-padding","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcalhoun%2Fcss-utils-padding/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcalhoun%2Fcss-utils-padding/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dcalhoun%2Fcss-utils-padding/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dcalhoun","download_url":"https://codeload.github.com/dcalhoun/css-utils-padding/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247301221,"owners_count":20916470,"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":["atomic","css","immutable","padding-utilities","suitcss"],"created_at":"2024-10-09T00:26:28.419Z","updated_at":"2025-04-05T07:21:14.574Z","avatar_url":"https://github.com/dcalhoun.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# css-utils-padding\n[![Build Status](https://travis-ci.org/dcalhoun/css-utils-padding.svg?branch=master)](https://travis-ci.org/dcalhoun/css-utils-padding)\n\nImmutable, CSS padding utilities.\n\n## Naming Convention\nDue to the ubiquitous nature of setting padding, these utilities use a shorthand\nnaming convention.\n\n| Shorthand | Description                |\n| --------- | -----------                |\n| p         | Padding                    |\n| t         | Top                        |\n| r         | Right                      |\n| b         | Bottom                     |\n| l         | Left                       |\n| x         | XAxis (left and right)     |\n| y         | YAxis (top and bottom)     |\n| 0         | 0 reset                    |\n| 1         | --space-1 (default 0.5rem) |\n| 2         | --space-2 (default 1rem)   |\n| 3         | --space-3 (default 2rem)   |\n| 4         | --space-4 (default 4rem)   |\n\nChange or reset default paddings using the white space scale. Negative u-xAxis\npaddings are used to offset paddings and padding of child elements. Padding\nauto is used to horizontally center block-level elements with a set width.\n\n```css\n.u-p0  { padding:        0 }\n.u-pt0 { padding-top:    0 }\n.u-pr0 { padding-right:  0 }\n.u-pb0 { padding-bottom: 0 }\n.u-pl0 { padding-left:   0 }\n.u-px0 { padding-left:   0; padding-right:  0 }\n.u-py0 { padding-top:    0; padding-bottom: 0 }\n\n.u-p1  { padding:        var(--space-1) }\n.u-pt1 { padding-top:    var(--space-1) }\n.u-pr1 { padding-right:  var(--space-1) }\n.u-pb1 { padding-bottom: var(--space-1) }\n.u-pl1 { padding-left:   var(--space-1) }\n.u-px1 { padding-left:   var(--space-1); padding-right:  var(--space-1) }\n.u-py1 { padding-top:    var(--space-1); padding-bottom: var(--space-1) }\n\n.u-p2  { padding:        var(--space-2) }\n.u-pt2 { padding-top:    var(--space-2) }\n.u-pr2 { padding-right:  var(--space-2) }\n.u-pb2 { padding-bottom: var(--space-2) }\n.u-pl2 { padding-left:   var(--space-2) }\n.u-px2 { padding-left:   var(--space-2); padding-right:  var(--space-2) }\n.u-py2 { padding-top:    var(--space-2); padding-bottom: var(--space-2) }\n\n.u-p3  { padding:        var(--space-3) }\n.u-pt3 { padding-top:    var(--space-3) }\n.u-pr3 { padding-right:  var(--space-3) }\n.u-pb3 { padding-bottom: var(--space-3) }\n.u-pl3 { padding-left:   var(--space-3) }\n.u-px3 { padding-left:   var(--space-3); padding-right:  var(--space-3) }\n.u-py3 { padding-top:    var(--space-3); padding-bottom: var(--space-3) }\n\n.u-p4  { padding:        var(--space-4) }\n.u-pt4 { padding-top:    var(--space-4) }\n.u-pr4 { padding-right:  var(--space-4) }\n.u-pb4 { padding-bottom: var(--space-4) }\n.u-pl4 { padding-left:   var(--space-4) }\n.u-px4 { padding-left:   var(--space-4); padding-right:  var(--space-4) }\n.u-py4 { padding-top:    var(--space-4); padding-bottom: var(--space-4) }\n\n.u-pxn1 { padding-left: -var(--space-1); padding-right: -var(--space-1); }\n.u-pxn2 { padding-left: -var(--space-2); padding-right: -var(--space-2); }\n.u-pxn3 { padding-left: -var(--space-3); padding-right: -var(--space-3); }\n.u-pxn4 { padding-left: -var(--space-4); padding-right: -var(--space-4); }\n\n.u-plAuto { padding-left: auto }\n.u-prAuto { padding-right: auto }\n.u-pxAuto { padding-left: auto; padding-right: auto; }\n```\n\n## Credits\nThis utility is heavily inspired by [Basscss](http://www.basscss.com) and\n[SuitCSS](http://suitcss.github.io). This repository is merely a combining of\ngreat principles championed by each.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdcalhoun%2Fcss-utils-padding","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdcalhoun%2Fcss-utils-padding","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdcalhoun%2Fcss-utils-padding/lists"}