{"id":17963739,"url":"https://github.com/bramstein/postcss-scale","last_synced_at":"2025-04-03T19:27:10.390Z","repository":{"id":38428935,"uuid":"65993701","full_name":"bramstein/postcss-scale","owner":"bramstein","description":"PostCSS plugin to scale values from one range to another.","archived":false,"fork":false,"pushed_at":"2016-08-29T20:35:53.000Z","size":4,"stargazers_count":80,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-09T07:35:49.267Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/bramstein.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":"2016-08-18T12:04:02.000Z","updated_at":"2023-10-10T19:23:45.000Z","dependencies_parsed_at":"2022-09-14T02:50:43.453Z","dependency_job_id":null,"html_url":"https://github.com/bramstein/postcss-scale","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramstein%2Fpostcss-scale","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramstein%2Fpostcss-scale/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramstein%2Fpostcss-scale/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bramstein%2Fpostcss-scale/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bramstein","download_url":"https://codeload.github.com/bramstein/postcss-scale/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247064182,"owners_count":20877565,"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-10-29T11:44:54.094Z","updated_at":"2025-04-03T19:27:10.362Z","avatar_url":"https://github.com/bramstein.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS plugin to scale values\n\nIn design it is often useful to relate one set of values to another. For example the viewport width to font size, or container width to line-height. We can do this using the CSS `calc` function, but scaling from one range of values to another is often cumbersome and error-prone to write manually. With a bit of PostCSS magic we can let the computer do this for us.\n\nFor example, let's say you want to vary the font size of your header based on the min and max width of the current breakpoint. Your break point is between `20em` and `50em` and you'd like to vary the header size between `2em` end `4em`. The following (Post)CSS will do that for you:\n\n```css\narticle h1 {\n  font-size: 2em;\n}\n\n@media (min-width: 20em) {\n  article h1 {\n    font-size: scale(20em, 50em, 2em, 4em, 100vw);\n  }\n}\n\n@media (min-width: 50em) {\n  article h1 {\n    font-size: 4em;    \n  }\n}\n```\n\nThe `scale` function takes five values:\n\n  * min base (defines the lower limit of the base range)\n  * max base (defines the upper limit of the base range)\n  * min target (defines the lower limit of the target range)\n  * max target (defines the upper limit of the target range)\n  * input (expression)\n\n```css\nscale(minBase, maxBase, minTarget, maxTarget, expression)\n```\n\nThe input value mapped from the base range to the target range can be any expression. Note that the output values are not clamped so they can be outside the target range (this is why we're using media queries to \"clamp\" the values at the lower and upper limit of the target range).\n\n## Installation\n\nInstall through npm:\n\n```bash\nnpm install postcss-scale\n```\n\nThen include `postcss-scale` in your PostCSS plugins list.\n\n## Credits\n\nThanks to Tim Brown ([@nicewebtype](https://twitter.com/nicewebtype)) for getting the discussion going on scales and [CSS locks](http://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/) going.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbramstein%2Fpostcss-scale","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbramstein%2Fpostcss-scale","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbramstein%2Fpostcss-scale/lists"}