{"id":26601190,"url":"https://github.com/faboolea/fab-unit","last_synced_at":"2025-04-09T16:31:06.422Z","repository":{"id":65429346,"uuid":"570566064","full_name":"Faboolea/fab-unit","owner":"Faboolea","description":"A Sass function that helps you to define a perfectly responsive value without any effort","archived":false,"fork":false,"pushed_at":"2022-12-06T06:45:48.000Z","size":11,"stargazers_count":30,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-23T18:50:18.663Z","etag":null,"topics":["css","fab-unit","responsive","scss"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/fab-unit","language":"SCSS","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/Faboolea.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":"2022-11-25T13:54:49.000Z","updated_at":"2024-08-28T05:09:38.000Z","dependencies_parsed_at":"2023-01-23T07:25:12.355Z","dependency_job_id":null,"html_url":"https://github.com/Faboolea/fab-unit","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/Faboolea%2Ffab-unit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Faboolea%2Ffab-unit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Faboolea%2Ffab-unit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Faboolea%2Ffab-unit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Faboolea","download_url":"https://codeload.github.com/Faboolea/fab-unit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248067716,"owners_count":21042345,"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","fab-unit","responsive","scss"],"created_at":"2025-03-23T18:37:46.839Z","updated_at":"2025-04-09T16:31:06.404Z","avatar_url":"https://github.com/Faboolea.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FabUnit 🪄\n\nFabUnit is a Sass function that helps you to define a perfectly responsive value without any effort. It takes a minimum and an optimum value, spits out a calculation to your css property, considering the screen width, aspect ratio and the specified anchor points. No media queries, no break points, no design jumps. A formula that controls and synchronises your whole project.\n\n```scss\nfab-unit(12, 16); 🪄\n```\n \n\n[↓ Features](#-features)   \n[↓ Install](#-install)  \n[↓ Use](#-use)  \n[↓ Options](#-options)  \n[↓ Links](#-links)  \n \n\u0026nbsp;\n\n## 💚 Features\n\n- takes min and opt value\n- 4 customisable anchor points\n- improved tablet view (stretch opt screen)\n- auto max size, depending on the last anchor point (wrapper)\n- considers aspect ratio\n\n\n```\nsize\n|                                     ○ • • •\n|                               •     |\n|                 ○ • • • ◉           |\n|           •     |       |           |\n| • • ◉           |       |           |\n|     |           |       |           |\n|     |     ≈     |       |     ≈     |\n■---min---fluid---opt---opt---fluid---max----- screen\n          m=auto               m=1\n      |            |      |           |\n      Mobile              Desktop     Wrapper\n      Design              Design      (optional)\n```\n[→ FabUnit Visualiser](https://codepen.io/Faboolea/live/yLvGMqZ/ed43660a7931e55b2fb2ec35d18e7f8c) \n\n\u0026nbsp;\n\n## 📀 Install\n\n```bash\nnpm i fab-unit\n```\n\n```scss\n@import \"fab-unit\";\n\nhtml {\n  font-size: calc(100% * (#{strip-units($fab-rem-base)} / 16)); // px to rem\n}\n```\n  \n\u0026nbsp;\n\n## 🚀 Use \n\n\n```scss\nbody {\n    font-size: fab-unit(16, 22); // min, opt\n}\n```\n[→ Example CodeSandbox](https://codesandbox.io/s/fabunit-ow8wjr?file=/src/styles.scss)\n  \n\u0026nbsp;\n\n## 🍬 Options \n| Variable | Description | Default |\n| -------- | ----------- | ------- |\n| \u003csub\u003e`$fab-screen-min`\u003c/sub\u003e | \u003csub\u003eanchor point mobile\u003c/sub\u003e  | \u003csub\u003e`375`\u003c/sub\u003e\n| \u003csub\u003e`$fab-screen-opt-start`\u003c/sub\u003e | \u003csub\u003eanchor point desktop (from …)\u003c/sub\u003e | \u003csub\u003e`1024`\u003c/sub\u003e\n| \u003csub\u003e`$fab-screen-opt-end`\u003c/sub\u003e | \u003csub\u003eanchor point desktop (… to)\u003c/sub\u003e | \u003csub\u003e`1440`\u003c/sub\u003e\n| \u003csub\u003e`$fab-screen-max`\u003c/sub\u003e | \u003csub\u003eanchor point max layout wrapper\u003c/sub\u003e  | \u003csub\u003e`1800`*\u003c/sub\u003e\n| \u003csub\u003e`$fab-aspect-ratio`\u003c/sub\u003e | \u003csub\u003easpect ratio factor (improvement for wider screens)\u003c/sub\u003e | \u003csub\u003e`math.div(16, 9)`\u003c/sub\u003e\n\n*\u003csub\u003e\\* set to `false` if no max wrapper is needed (elastic upwards)\u003c/sub\u003e*\n\n[→ FabUnit Visualiser](https://codepen.io/Faboolea/live/yLvGMqZ/ed43660a7931e55b2fb2ec35d18e7f8c)  \n\n\u0026nbsp;\n\n### Overwrite default values globally\n```scss\n$fab-screen-min: 300;\n$fab-screen-opt-start: 768;\n$fab-screen-opt-end: 1024;\n$fab-screen-max: 2000;\n$fab-aspect-ratio: math.div(3, 2);\n\nbody {\n    font-size: fab-unit(16, 22); // min, opt\n}\n\nh1 {\n  font-size: fab-unit(36, 60);\n  margin-block: fab-unit(10, 16);\n}\n\n.wrapper {\n  max-width: rem($fab-screen-max);\n  margin-inline: auto;\n}\n```\n[→ Example CodeSandbox](https://codesandbox.io/s/fabunit-ow8wjr?file=/src/styles.scss)\n  \n\u0026nbsp;\n\n### Set custom arguments locally (exceptionally)\n\n```scss\n.thing {\n    /* min, opt, custom anchor points, aspect ratio 🪄 */\n    height: fab-unit(16, 22, 300, 768, 1024, 2000, math.div(4, 3));\n}\n```\n  \n\u0026nbsp;\n\n## 🔥 Links\n[→ FabUnit Visualiser](https://codepen.io/Faboolea/live/yLvGMqZ/ed43660a7931e55b2fb2ec35d18e7f8c)  \n[→ Example CodeSandbox](https://codesandbox.io/s/fabunit-ow8wjr?file=/src/styles.scss)  \n[→ Article Smashing Magazine](https://www.smashingmagazine.com/2022/12/fabunit-smart-way-control-synchronize-typo-space/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaboolea%2Ffab-unit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffaboolea%2Ffab-unit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaboolea%2Ffab-unit/lists"}