{"id":13397220,"url":"https://github.com/twbs/rfs","last_synced_at":"2026-04-09T05:32:12.303Z","repository":{"id":37286048,"uuid":"93316445","full_name":"twbs/rfs","owner":"twbs","description":"✩ Automates responsive resizing ✩","archived":false,"fork":false,"pushed_at":"2026-03-19T17:46:26.000Z","size":6364,"stargazers_count":3363,"open_issues_count":11,"forks_count":214,"subscribers_count":46,"default_branch":"main","last_synced_at":"2026-04-03T17:32:27.815Z","etag":null,"topics":["css","font-size","frontend","postcss","responsive","rfs","sass","scss","stylus"],"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/twbs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"twbs","open_collective":"bootstrap"}},"created_at":"2017-06-04T13:49:56.000Z","updated_at":"2026-04-03T12:05:33.000Z","dependencies_parsed_at":"2023-11-09T12:29:21.718Z","dependency_job_id":"60ec91d5-cfd3-457b-9412-ae0d6917e92e","html_url":"https://github.com/twbs/rfs","commit_stats":{"total_commits":528,"total_committers":19,"mean_commits":"27.789473684210527","dds":0.7481060606060606,"last_synced_commit":"cab0439e1350b7346bd3a09db476a1477fe2d8a0"},"previous_names":["martijncuppens/rfs"],"tags_count":43,"template":false,"template_full_name":null,"purl":"pkg:github/twbs/rfs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twbs%2Frfs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twbs%2Frfs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twbs%2Frfs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twbs%2Frfs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twbs","download_url":"https://codeload.github.com/twbs/rfs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twbs%2Frfs/sbom","scorecard":{"id":903590,"data":{"date":"2025-08-11","repo":{"name":"github.com/twbs/rfs","commit":"33f1ba137354647146d5a6a3861233cf4d4a0186"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.4,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 1/16 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":9,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Info: jobLevel 'actions' permission set to 'read': .github/workflows/codeql.yml:21","Info: jobLevel 'contents' permission set to 'read': .github/workflows/codeql.yml:22","Warn: no topLevel permission defined: .github/workflows/codeql.yml:1","Info: topLevel 'contents' permission set to 'read': .github/workflows/lint.yml:15","Info: topLevel 'contents' permission set to 'read': .github/workflows/test.yml:14","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"1 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":2,"reason":"dependency not pinned by hash detected -- score normalized to 2","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/twbs/rfs/codeql.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/twbs/rfs/codeql.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/twbs/rfs/codeql.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/twbs/rfs/codeql.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/twbs/rfs/lint.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/twbs/rfs/lint.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/twbs/rfs/test.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/twbs/rfs/test.yml/main?enable=pin","Info:   0 out of   8 GitHub-owned GitHubAction dependencies pinned","Info:   2 out of   2 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":7,"reason":"SAST tool detected but not run on all commits","details":["Info: SAST configuration detected: CodeQL","Warn: 2 commits out of 18 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":1,"reason":"9 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-24T16:33:22.361Z","repository_id":37286048,"created_at":"2025-08-24T16:33:22.361Z","updated_at":"2025-08-24T16:33:22.361Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31587804,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"online","status_checked_at":"2026-04-09T02:00:06.848Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","font-size","frontend","postcss","responsive","rfs","sass","scss","stylus"],"created_at":"2024-07-30T18:01:13.012Z","updated_at":"2026-04-09T05:32:12.293Z","avatar_url":"https://github.com/twbs.png","language":"CSS","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/twbs/rfs/main/rfs.svg?sanitize=true\" alt=\"RFS logo\" width=\"99\" height=\"108.6\"\u003e\n\u003c/p\u003e\n\nRFS is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling basically every value for any css property with units, like `margin`, `padding`, `border-radius` or even `box-shadow`.\n\nThe mechanism **automatically calculates the appropriate values** based on the dimensions of the browser viewport. It's available in one of your favourite preprocessors or postprocessor: [Sass](https://sass-lang.com/), [Less](http://lesscss.org/), [Stylus](http://stylus-lang.com/) or [PostCSS](https://postcss.org/).\n\n# RFS\n\n[![npm][npm-image]][npm-url]\n[![licence][licence-image]][license-url]\n[![build][build-image]][build-url]\n\n- [Demos](#demos)\n- [Advantages](#advantages)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Visualisation](#visualisation)\n- [Configuration](#configuration)\n- [Creator](#creator)\n- [Copyright and license](#copyright-and-license)\n\n## Demos\n\n- [Card example (Sass)](https://codepen.io/MartijnCuppens/pen/vqaEBG?editors=0100)\n- [Card example (Sass, with custom properties)](https://codepen.io/MartijnCuppens/pen/voXLGL?editors=1100)\n- [Card example (PostCSS)](https://codepen.io/MartijnCuppens/pen/aeojgG?editors=0100)\n- [Card example (PostCSS, with custom properties)](https://codepen.io/MartijnCuppens/pen/JgRYaw?editors=0100)\n- [Simple font rescaling Codepen Demo](https://codepen.io/MartijnCuppens/pen/ZBjdMy?editors=0100)\n- [RFS in Bootstrap demo](https://project-rfs.github.io/)\n\n## Advantages\n\n- No need to rescale paddings or margins anymore.\n- Text won't be chopped off in smaller viewports when RFS is applied to font sizes.\n- RFS will prevent the font size from rescaling too small, so readability can be assured.\n- The font sizes of all text elements will always remain in relation with each other.\n\n## Fluid rescaling in action\n\nThe following example shows the effect of RFS on font sizes:\n\n![RFS](https://raw.githubusercontent.com/twbs/rfs/main/.github/rfs-rescale.gif)\n\n## Installation\n\nRFS can be installed using a package manager (recommended):\n\n- npm: `npm install rfs`\n- yarn: `yarn add rfs`\n- bower (deprecated): `bower install rfs --save`\n\n**Copy/paste (not recommended):**\n\nThe source files can also be downloaded manually and used in a project. This method is not recommended because you\nlose the ability to easily and quickly manage and update RFS as a dependency.\n\n## Usage\n\n### Sass (\u003ccode\u003e.scss\u003c/code\u003e syntax)\n\n```text\nproject/\n├── node_modules/\n│   └── rfs\n│        └── ...\n└── scss/\n    └── main.scss\n```\n\n#### Input\n\n```scss\n// scss/main.scss\n\n@import \"../node_modules/rfs/scss\";\n\n.title {\n  @include font-size(4rem);\n\n  // The font-size mixin is a shorthand which calls\n  // @include rfs(4rem, font-size);\n\n  // Other shorthand mixins that are available are:\n  // @include padding(4rem);\n  // @include padding-top(4rem);\n  // @include padding-right(4rem);\n  // @include padding-bottom(4rem);\n  // @include padding-left(4rem);\n  // @include margin(4rem);\n  // @include margin-top(4rem);\n  // @include margin-right(4rem);\n  // @include margin-bottom(4rem);\n  // @include margin-left(4rem);\n\n  // For properties which do not have a shorthand, the property can be passed:\n  // @include rfs(4rem, border-radius);\n\n  // Whenever a value contains a comma, it should be escaped with `#{}`:\n  // @include rfs(0 0 4rem red #{\",\"} 0 0 5rem blue, box-shadow);\n\n  // Custom properties (css variables):\n  // @include rfs(4rem, --border-radius);\n}\n```\n\nIf you're using Webpack, you can simplify the `@import` using the `~` prefix:\n\n```scss\n@import \"~rfs/scss\";\n```\n\n#### Generated css\n\n```css\n.title {\n  font-size: calc(1.525rem + 3.3vw);\n}\n\n@media (min-width: 1200px) {\n  .title {\n    font-size: 4rem;\n  }\n}\n```\n\n#### !important usage\n\n##### Input\n\n```scss\n.label {\n  @include font-size(2.5rem !important);\n}\n```\n\n##### Output\n\n```css\n.label {\n  font-size: calc(1.375rem + 1.5vw) !important;\n}\n\n@media (min-width: 1200px) {\n  .label {\n    font-size: 2.5rem !important;\n  }\n}\n```\n\n### Sass (`.sass` syntax)\n\n```text\nproject/\n├── node_modules/\n│   └── rfs\n│        └── ...\n└── sass/\n    └── main.sass\n```\n\n#### Input\n\n```sass\n// sass/main.sass\n\n@import \"../node_modules/rfs/sass\"\n\n.title\n  +font-size(4rem)\n\n  // The font-size mixin is a shorthand which calls\n  // +rfs(4rem, font-size)\n\n  // Other shorthand mixins that are available are:\n  // +padding(4rem)\n  // +padding-top(4rem)\n  // +padding-right(4rem)\n  // +padding-bottom(4rem)\n  // +padding-left(4rem)\n  // +margin(4rem)\n  // +margin-top(4rem)\n  // +margin-right(4rem)\n  // +margin-bottom(4rem)\n  // +margin-left(4rem)\n\n  // For properties which do not have a shorthand, the property can be passed:\n  // +rfs(4rem, border-radius)\n\n  // Whenever a value contains a comma, it should be escaped with `#{}`:\n  // +rfs(0 0 4rem red #{\",\"} 0 0 5rem blue, box-shadow)\n\n  // Custom properties (css variables):\n  // +rfs(4rem, --border-radius)\n```\n\nIf you're using Webpack, you can simplify the `@import` using the `~` prefix:\n\n```sass\n@import \"~rfs/scss\"\n```\n\n#### Generated css\n\n```css\n.title {\n  font-size: calc(1.525rem + 3.3vw);\n}\n\n@media (min-width: 1200px) {\n  .title {\n    font-size: 4rem;\n  }\n}\n```\n\n#### !important usage\n\n##### Input\n\n```sass\n.label\n  +font-size(2.5rem !important)\n```\n\n#### output\n\n```css\n.label {\n  font-size: calc(1.375rem + 1.5vw) !important;\n}\n\n@media (min-width: 1200px) {\n  .label {\n    font-size: 2.5rem !important;\n  }\n}\n```\n\n### PostCSS\n\n```text\nproject/\n├── postcss/\n│   └── main.css\n└── node_modules/\n    └── rfs\n         └── ...\n```\n\nHave a look at the [examples folder](https://github.com/twbs/rfs/tree/main/examples/postcss) to find examples on how your PostCSS setup can be configured.\n\n```postcss\n// postcss/main.css\n\n.title {\n  font-size: rfs(4rem);\n\n  // Or use it with any other property, for example\n  // padding: rfs(4rem);\n\n  // It's also possible to pass multiple values\n  // padding: rfs(3rem 4rem);\n\n  // or even\n  // box-shadow: rfs(0 3px 4rem red);\n\n  // or even comma seperated values\n  // box-shadow: rfs(0 3px 4rem red, 3px 0 4rem blue);\n\n  // To combine it with !important, use\n  // box-shadow: rfs(0 3px 4rem red) !important;\n\n  // Custom properties (css variables):\n  // --border-radius: rfs(4rem);\n}\n```\n\n#### Generated css\n\n```css\n.title {\n  font-size: calc(1.525rem + 3.3vw);\n}\n\n@media (min-width: 1200px) {\n  .title {\n    font-size: 4rem;\n  }\n}\n```\n\n### Less\n\n```text\nproject/\n├── less/\n│   └── main.less\n└── node_modules/\n    └── rfs\n         └── ...\n```\n\n```less\n// less/main.less\n\n@import \"../node_modules/rfs/less\";\n\n.title {\n  .font-size(4rem);\n\n  // The font-size mixin is a shorthand which calls\n  // .rfs(4rem, font-size);\n\n  // Other shorthand mixins that are available are:\n  // .padding(4rem);\n  // .padding-top(4rem);\n  // .padding-right(4rem);\n  // 'padding-bottom(4rem);\n  // .padding-left(4rem);\n  // .margin(4rem);\n  // .margin-top(4rem);\n  // .margin-right(4rem);\n  // .margin-bottom(4rem);\n  // .margin-left(4rem);\n\n  // For properties which do not have a shorthand, the property can be passed as:\n  // .rfs(4rem, border-radius);\n\n  // Whenever a value contains a comma, it should be escaped with a tilde(~):\n  // .rfs(0 0 4rem red ~\",\" 0 0 5rem blue, box-shadow)\n\n  // Custom properties (css variables):\n  // .rfs(4rem, --border-radius)\n}\n```\n\nIf you're using Webpack, you can simplify the `@import` using the `~` prefix:\n\n```less\n@import \"~rfs/less\"\n```\n\n#### Generated css\n\n```css\n.title {\n  font-size: calc(1.525rem + 3.3vw);\n}\n\n@media (min-width: 1200px) {\n  .title {\n    font-size: 4rem;\n  }\n}\n```\n\n#### !important usage\n\nLess still has [a bug](https://github.com/less/less.js/issues/2917) for [native `!important` support](http://lesscss.org/features/#mixins-feature-the-important-keyword), and `!important` can not be accepted as a parameter, so you 'll need to pass `important` as a flag:\n\n##### Input\n\n```less\n.label {\n  .font-size(2.5rem important);\n}\n```\n\n#### output\n\n```css\n.label {\n  font-size: calc(1.375rem + 1.5vw) !important;\n}\n\n@media (min-width: 1200px) {\n  .label {\n    font-size: 2.5rem !important;\n  }\n}\n```\n\n### Stylus\n\n```text\nproject/\n├── node_modules/\n│   └── rfs\n│        └── ...\n└── stylus/\n    └── main.styl\n```\n\n```stylus\n// stylus/main.styl\n\n@import \"../node_modules/rfs/stylus\";\n\n.title\n  rfs-font-size(64px)\n\n  // The font-size mixin is a shorthand which calls\n  // rfs(4rem, font-size)\n\n  // Other shorthand mixins that are available are:\n  // rfs-padding(4rem)\n  // rfs-padding-top(4rem)\n  // rfs-padding-right(4rem)\n  // rfs-padding-bottom(4rem)\n  // rfs-padding-left(4rem)\n  // rfs-margin(4rem)\n  // rfs-margin-top(4rem)\n  // rfs-margin-right(4rem)\n  // rfs-margin-bottom(4rem)\n  // rfs-margin-left(4rem)\n\n  // For properties which do not have a shorthand, the property can be passed as:\n  // rfs(4rem, border-radius)\n\n  // Whenever a value contains a comma, it should be escaped with a backslash:\n  // rfs(0 0 4rem red \\, 0 0 5rem blue, box-shadow)\n\n  // Custom properties (css variables):\n  // rfs(4rem, --border-radius)\n```\n\nNote the `font-size` mixin can not be used to set the font size. That is because a `font-size()` mixin would override the `font-size` property. See [129#issuecomment-477926416](https://github.com/twbs/rfs/pull/129#issuecomment-477926416) for more info.\n\nIf you're using Webpack, you can simplify the `@import` using the `~` prefix:\n\n```stylus\n@import \"~rfs/stylus\"\n```\n\n#### Generated css\n\n```css\n.title {\n  font-size: calc(1.525rem + 3.3vw);\n}\n\n@media (min-width: 1200px) {\n  .title {\n    font-size: 4rem;\n  }\n}\n```\n\n#### !important usage\n\n##### Input\n\n```less\n.label\n  rfs-font-size(2.5rem important)\n```\n\n#### output\n\n```css\n.label {\n  font-size: calc(1.375rem + 1.5vw) !important;\n}\n\n@media (min-width: 1200px) {\n  .label {\n    font-size: 2.5rem !important;\n  }\n}\n```\n\n## Visualisation\n\nIf you wonder how the values are rescaled, wonder no more and stare at this graph which might clarify things a bit:\n\n![RFS visualisation](https://raw.githubusercontent.com/twbs/rfs/main/.github/rfs-graph.svg?sanitize=true)\n\nEach color represents another value being rescaled. For example:\n\n```scss\n.title {\n  @include font-size(40px);\n}\n```\n\nThis is the green line. A font size of `40px` stays `40px` in viewports with a size larger than `1200px`. Below `1200px`, the font size is rescaled and at viewport of `360px`, the font size is about `27px`. Note that every font size is generated in a combination of `rem` and `vw` units, but they are mapped  to `px` in the graph to make it easier to understand.\n\n## Configuration\n\nRFS works out of the box without any configuration tweaks, but if you feel the urge to go loco and fine tune the way values are rescaled, you can:\n\n### Base value \u003csub\u003e\u003csup\u003e(unit in `px` or `rem`)\u003c/sup\u003e\u003c/sub\u003e\n\n- SCSS, Sass \u0026 Stylus: `$rfs-base-value`\n- Less: `@rfs-base-value`\n- PostCSS: `baseValue`\n\nThe option will prevent the value from becoming too small on smaller screens. If the font size which is passed to RFS is smaller than this value, no fluid rescaling will take place.\n\n*Default value: `1.25rem`*\n\n### Unit \u003csub\u003e\u003csup\u003e(`px` or `rem`)\u003c/sup\u003e\u003c/sub\u003e\n\n- SCSS, Sass \u0026 Stylus: `$rfs-unit`\n- Less: `@rfs-unit`\n- PostCSS: `unit`\n\nThe output value will be rendered in this unit. Keep in mind configuring this value to `px` will disable the ability for users to change the font size in their browser.\n\n*Default value: `rem`*\n\n### Breakpoint \u003csub\u003e\u003csup\u003e(in `px`, `em` or `rem`)\u003c/sup\u003e\u003c/sub\u003e\n\n- SCSS, Sass \u0026 Stylus: `$rfs-breakpoint`\n- Less: `@rfs-breakpoint`\n- PostCSS: `breakpoint`\n\nAbove this breakpoint, the value will be equal to the value you passed to RFS; below the breakpoint, the value will dynamically scale.\n\n*Default value: `1200px`*\n\n### Breakpoint unit \u003csub\u003e\u003csup\u003e(`px`, `em` or `rem`)\u003c/sup\u003e\u003c/sub\u003e\n\n- SCSS, Sass \u0026 Stylus: `$rfs-breakpoint-unit`\n- Less: `@rfs-breakpoint-unit`\n- PostCSS: `breakpointUnit`\n\nThe width of the max width in the media query will be rendered in this unit.\n\n*Default value: `px`*\n\n### Factor \u003csub\u003e\u003csup\u003e(number)\u003c/sup\u003e\u003c/sub\u003e\n\n- SCSS, Sass \u0026 Stylus: `$rfs-factor`\n- Less: `@rfs-factor`\n- PostCSS: `factor`\n\nThis value determines the strength of font size resizing. The higher the factor, the less difference there is between values on small screens. The lower the factor, the less influence RFS has, which results in bigger values for small screens. The factor must be greater than 1.\n\n*Default value: `10`*\n\n### Rem value \u003csub\u003e\u003csup\u003e(number)\u003c/sup\u003e\u003c/sub\u003e\n\n- SCSS, Sass \u0026 Stylus: `$rfs-rem-value`\n- Less: `@rfs-rem-value`\n- PostCSS: `remValue`\n\nThe value of `1rem` in `px`. The value of `1rem` is typically `16px` but if the font size is changed for `html` the value of `1rem` changes. This variable can be used to change the default value but be careful with it because changing it could lead to unexpected behaviour, for example if additional CSS is loaded which expects `1rem` to be `16px`.\n\n*Default value: `16`*\n\n### Two dimensional \u003csub\u003e\u003csup\u003e(boolean)\u003c/sup\u003e\u003c/sub\u003e\n\n- SCSS, Sass \u0026 Stylus: `$rfs-two-dimensional`\n- Less: `@rfs-two-dimensional`\n- PostCSS: `twoDimensional`\n\nEnabling the two dimensional media queries will determine the value based on the smallest side of the screen with `vmin`. This prevents values from changing if the device toggles between portrait and landscape mode.\n\n*Default value: `false`*\n\n### Class \u003csub\u003e\u003csup\u003e(boolean)\u003c/sup\u003e\u003c/sub\u003e\n\n- SCSS, Sass \u0026 Stylus: `$rfs-class`\n- Less: `@rfs-class`\n- PostCSS: `class`\n\nRFS can be enabled or disabled with a class. There are 3 options:\n\n- `false`\n  No extra classes are generated.\n- `disable`\n  When the disable classes are generated you can add the `.disable-rfs` class to an element to disable responsive value rescaling for the element and its child elements.\n- `enable`\n  RFS is disabled by default in this case. The `.enable-rfs` class can be added to an element to enable responsive value rescaling for the element and its child elements.\n\n*Default value: `false`*\n\n### Safari iframe resize bug fix \u003csub\u003e\u003csup\u003e(boolean)\u003c/sup\u003e\u003c/sub\u003e\n\n- SCSS, Sass \u0026 Stylus: `$rfs-safari-iframe-resize-bug-fix`\n- Less: `@rfs-safari-iframe-resize-bug-fix`\n- PostCSS: `safariIframeResizeBugFix`\n\nSafari doesn't resize its values in an iframe if the iframe is resized. To fix this `min-width: 0vw` can be added and that's what happens if this option is enabled. See [#14](https://github.com/twbs/rfs/issues/14).\n\n*Default value: `false`*\n\n## Best practices\n\n- Don't set RFS on the `html` element, because this influences the value of `rem` and could lead to unexpected results.\n- Always set your line-heights relative (in `em` or unitless) to prevent interline issues with font sizes.\n\n## Browser support\n\nRFS is supported by all browsers that support [media queries](https://caniuse.com/#feat=css-mediaqueries) and [viewport units](https://caniuse.com/#feat=viewport-units).\n\n## Creator\n\n**Martijn Cuppens**\n\n- \u003chttps://twitter.com/Martijn_Cuppens\u003e\n- \u003chttps://github.com/MartijnCuppens\u003e\n\n## Copyright and license\n\nCode released under [the MIT license](https://github.com/twbs/rfs/blob/main/LICENSE).\n\n[npm-image]: https://img.shields.io/npm/v/rfs?logo=npm\u0026logoColor=fff\n[npm-url]: https://www.npmjs.com/package/rfs\n[licence-image]: https://img.shields.io/npm/l/rfs\n[license-url]: https://github.com/twbs/rfs/blob/main/LICENSE\n[build-image]: https://img.shields.io/github/actions/workflow/status/twbs/rfs/test.yml?branch=main\u0026label=Tests\u0026logo=github\n[build-url]: https://github.com/twbs/rfs/actions?query=workflow%3ATests+branch%3Amain\n","funding_links":["https://github.com/sponsors/twbs","https://opencollective.com/bootstrap"],"categories":["CSS","🌐 Web Development - Frontend"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwbs%2Frfs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwbs%2Frfs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwbs%2Frfs/lists"}