{"id":23613527,"url":"https://github.com/tillsanders/poly-fluid-sizing-stylus","last_synced_at":"2025-11-06T09:30:27.917Z","repository":{"id":42833188,"uuid":"265047569","full_name":"tillsanders/poly-fluid-sizing-stylus","owner":"tillsanders","description":"Stylus mixin for linear interpolation between multiple values across multiple breakpoints using CSS calc() and viewport units. Adaption of the SASS mixin by Jakobud/poly-fluid-sizing.","archived":false,"fork":false,"pushed_at":"2023-03-04T19:03:51.000Z","size":32,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-01T12:57:00.911Z","etag":null,"topics":["css","stylus"],"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/tillsanders.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-18T19:58:12.000Z","updated_at":"2020-05-19T11:04:38.000Z","dependencies_parsed_at":"2024-12-27T17:17:28.244Z","dependency_job_id":"100e3779-164c-4b38-9d02-214962fb7298","html_url":"https://github.com/tillsanders/poly-fluid-sizing-stylus","commit_stats":{"total_commits":14,"total_committers":1,"mean_commits":14.0,"dds":0.0,"last_synced_commit":"a1e4f5521ebbd701c7cf03d7264f5f384593abe7"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tillsanders%2Fpoly-fluid-sizing-stylus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tillsanders%2Fpoly-fluid-sizing-stylus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tillsanders%2Fpoly-fluid-sizing-stylus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tillsanders%2Fpoly-fluid-sizing-stylus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tillsanders","download_url":"https://codeload.github.com/tillsanders/poly-fluid-sizing-stylus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239488489,"owners_count":19647218,"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","stylus"],"created_at":"2024-12-27T17:17:25.376Z","updated_at":"2025-11-06T09:30:27.872Z","avatar_url":"https://github.com/tillsanders.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Poly Fluid Sizing for Stylus\n\n![License](https://img.shields.io/npm/l/poly-fluid-sizing-stylus)\n![Version](https://img.shields.io/npm/v/poly-fluid-sizing-stylus)\n![Downloads](https://img.shields.io/npm/dy/poly-fluid-sizing-stylus)\n\n\u003e Stylus mixin for linear interpolation between multiple values across multiple breakpoints using\n\u003e CSS calc() and viewport units. Adaption of the SASS mixin by\n\u003e [Jakobud/poly-fluid-sizing](https://github.com/Jakobud/poly-fluid-sizing).\n\n## Usage\n\nPoly Fluid Sizing is a [stylus](https://stylus-lang.com/) mixin that gives you precise control over CSS measurements, like the `font-size` across multiple breakpoints. It allows you to set the desired scale for every breakpoint and applies linear interpolation between them using `calc()`. It uses some ~~basic~~ dark math behind the scenes. You don't need to know the math or understand it to use this mixin.\n\n[**Demo**](https://tillsanders.github.io/poly-fluid-sizing-stylus/)\n\n```stylus\n// Import mixin\n@require 'poly-fluid-sizing-stylus'\n// Depending on your setup, this might also be something like: `@import '~poly-fluid-sizing-stylus'`\n\nh1\n  poly-fluid-sizing('font-size', {'30rem': 2rem, '50rem': 3rem, '60rem': 4rem})\n```\n\nThis will yield the following CSS code (without the comments):\n\n```css\nh1 {\n  /* The minimum font-size */\n  font-size: 2rem;\n}\n@media (min-width: 30rem) {\n  h1 {\n    /* Interpolating the font-size between 2rem @ 30rem and 3rem @ 50rem viewport width */\n    font-size: calc(5vw + 0.5rem);\n  }\n}\n@media (min-width: 50rem) {\n  h1 {\n    /* Interpolating the font-size between 3rem @ 50rem and 4rem @ 60rem viewport width */\n    font-size: calc(10vw - 2rem);\n  }\n}\n@media (min-width: 60rem) {\n  /* The maximum font-size */\n  h1 {\n    font-size: 4rem;\n  }\n}\n```\n\n## It can do more then `font-size`\n\nUsing Poly Fluid Sizing on the `font-size` property is an obvious use case. It can however be used\nfor any other numeric CSS property:\n\n```stylus\nmain\n  poly-fluid-sizing('padding', {'30rem': 1rem, '50rem': 3rem})\n```\n\n## Why not CSS min/max/clamp?\n\nThe vanilla CSS functions `min()`, `max()` and `clamp()` can be used to achieve a very similar\neffect to that of this mixin. If you want to know how, I recommend this\n[article by CSS-Tricks.com](https://css-tricks.com/min-max-and-clamp-are-css-magic/).\n\n### Advantages over vanilla CSS\n\n- **Browser Support:** IE/Edge currently (Edge v18) still doesn`t support min/max/clamp. Firefox \u003e\n  v74, Chrome \u003e v78. See here: https://caniuse.com/#feat=mdn-css_types_min\n- **Multiple breakpoints:** This mixin is able to support multiple breakpoints. Although, in most\n  cases, you could probably do without that.\n- **Easy to configure:** The vanilla CSS solution using `clamp()` is not to hard to use, but the\n  syntax of this mixin is a little easier to parse for our brains.\n\n### Disadvantages compared to vanilla CSS and limitations\n\n- **Verbosity**: This mixin generates more code compared to vanilla CSS.\n- **You can't mix units**: Because the interpolation is calculated at build time, you can use\n  various units like px or rem, but you can't mix them. For example, you can't set a `2em`\n  `font-size` for `1000px` viewport width. This is a logical and mathematical limitation.\n- **One property at a time**: You can choose any numeric CSS property that you like, but you can\n  only ever use one at a time. That means, you can use `padding`, but if you only want the sizing to\n  be applied to `padding-left` and `padding-right`, you have to call the mixin twice.\n\n## Credits\n\nThis mixin is a stylus adaption of the original, wonderful SASS mixin by\n[https://github.com/Jakobud](Jakobud). You can learn more about this technique from the author\nhimself on [Smashing Magazine](https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftillsanders%2Fpoly-fluid-sizing-stylus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftillsanders%2Fpoly-fluid-sizing-stylus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftillsanders%2Fpoly-fluid-sizing-stylus/lists"}