{"id":17344726,"url":"https://github.com/jamonserrano/plumber-box","last_synced_at":"2025-04-14T20:31:31.055Z","repository":{"id":57326150,"uuid":"75111882","full_name":"jamonserrano/plumber-box","owner":"jamonserrano","description":"Plumber extension to align boxes to the baseline grid","archived":false,"fork":false,"pushed_at":"2016-12-31T15:44:40.000Z","size":11,"stargazers_count":7,"open_issues_count":2,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-28T08:41:36.867Z","etag":null,"topics":["baseline-grid","typography","vertical-rhythm"],"latest_commit_sha":null,"homepage":"","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/jamonserrano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-29T18:53:56.000Z","updated_at":"2020-02-23T03:10:09.000Z","dependencies_parsed_at":"2022-09-21T01:50:57.044Z","dependency_job_id":null,"html_url":"https://github.com/jamonserrano/plumber-box","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/jamonserrano%2Fplumber-box","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonserrano%2Fplumber-box/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonserrano%2Fplumber-box/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonserrano%2Fplumber-box/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamonserrano","download_url":"https://codeload.github.com/jamonserrano/plumber-box/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248955321,"owners_count":21189045,"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":["baseline-grid","typography","vertical-rhythm"],"created_at":"2024-10-15T16:26:20.940Z","updated_at":"2025-04-14T20:31:31.032Z","avatar_url":"https://github.com/jamonserrano.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Plumber box\n[Plumber](https://jamonserrano.github.io/plumber-sass) extension to align boxes to the vertical grid.\n\nUse this mixin whenever you need to add margins, paddings, and borders to a flexible container element without breaking the grid.\n\n## Installation\n\nFirst, make sure to [install and import plumber-sass](https://jamonserrano.github.io/plumber-sass/#toc_1) before using plumber-box.\n\n### Manual\nDownload and extract [the latest release](https://api.github.com/repos/jamonserrano/plumber-box/zipball), move `_plumber-box.scss` into the vendor folder of your project and import it:\n\n```scss\n@import \"vendor/plumber-box\";\n```\n\n### NPM / Yarn\nInstall:\n\n```sh\n# NPM\n$ npm install plumber-box --save-dev\n\n# Yarn\n$ yarn add plumber-box --dev\n```\nAnd import it in your project:\n\n```scss\n@import \"node_modules/plumber-box/plumber-box\";\n```\n\n### Bower\nInstall:\n\n```sh\n$ bower install plumber-box --save-dev\n```\nAnd import it in your project:\n\n```scss\n@import \"bower_components/plumber-box/plumber-box\";\n```\n\n## Usage\n\n1\\. Set up the grid height for Plumber if you haven't done it before:\n\n```scss\n@include plumber-set-defaults($grid-height: 1rem);\n```\n\n2\\. Include the plumber-box mixin. Specify margins and paddings as multiples of the grid height. \n\n```scss\nblockquote {\n\t@include plumber-box(\n\t\t$margin: 2 0, // top margin: 2, bottom margin: 0\n\t\t$padding: 1 1 // top padding: 1, bottom padding: 1\n\t);\n}\n```\n\nThis will generate the following CSS:\n\n```css\nblockquote {\n\tmargin-top: 2rem;\n\tpadding-top: 1rem;\n\tmargin-bottom: 0;\n\tpadding-bottom: 1rem;\n}\n```\n\n### Borders\nBorders can be set on the inside or on the outside of the box, taking away some space from the padding or margin respectively.\n\n#### Inside\nAdd the `$border` parameter to the mixin, define borders and box-sizing:\n\n```scss\nblockquote {\n\t@include plumber-box(\n\t\t$margin: 2 0,\n\t\t$border: 2px 2px,\n\t\t$padding: 1 1\n\t);\n\n\tborder: 2px solid gold;\n\tbox-sizing: border-box;\n}\n```\n\n\u003e The border width will be substracted from the padding.\n\u003e \n\u003e Inside borders cannot be used with 0 padding.\n\n#### Outside\nUse the CSS `outline` property to add outside borders:\n\n```scss\nblockquote {\n\t@include plumber-box(\n\t\t$margin: 2 0,\n\t\t$padding: 1 1\n\t);\n\n\toutline: 2px solid gold;\n}\n```\n\n\u003e The outline will visually decrease the margin but it is not included in the element size so it won't break the grid.\n\u003e\n\u003e Rounded borders are not possible with this method.\n\n\n### Shorthands\nYou can use shorthands to set the same top and bottom values:\n\n```scss\nblockquote {\n\t@include plumber-box(\n\t\t$margin: 2, // top and bottom margin\n\t\t$border: 1px // top and bottom border\n\t\t$padding: 1 // top and bottom padding\n\t);\n}\n```\n\n\n## API\n\n### plumber-box\nThe main mixin.\n\n**Parameters:** All parameters are optional, the default grid height can be set with `plumber-set-defaults`.\n\n\nName | Description | Type | Default value\n---- | ----------- | ---- | -------------\n$grid-height | Override the default grid height | Any unit | As set in Plumber\n$margin | Top and bottom margin as a multiple of grid height | One or two integers | `0`\n$border | Top and bottom border width | One or two non-negative `px` values or `0`s | `0px`\n$padding | Top and bottom padding as a multiple of grid height | One or two non-negative integers | `0`\n\n**Output:** `margin-top`, `margin-bottom`, `padding-top`, `padding-bottom` properties with the same unit as the grid height.\n\n## License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamonserrano%2Fplumber-box","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamonserrano%2Fplumber-box","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamonserrano%2Fplumber-box/lists"}