{"id":13726839,"url":"https://github.com/black7375/Fluid-Size","last_synced_at":"2025-05-07T22:30:35.497Z","repository":{"id":57239028,"uuid":"282830348","full_name":"black7375/Fluid-Size","owner":"black7375","description":":triangular_ruler::iphone::computer::desktop_computer: A method of fluidly resizing in various devices based on visual angle. (with SASS) :revolving_hearts: :eyes:","archived":false,"fork":false,"pushed_at":"2021-03-29T07:05:28.000Z","size":4337,"stargazers_count":40,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-29T13:42:29.601Z","etag":null,"topics":["breakpoint","breakpoints","design","media-queries","responsive","sass","scss"],"latest_commit_sha":null,"homepage":"","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/black7375.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-27T07:52:56.000Z","updated_at":"2024-07-08T02:34:52.000Z","dependencies_parsed_at":"2022-08-30T00:11:05.235Z","dependency_job_id":null,"html_url":"https://github.com/black7375/Fluid-Size","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/black7375%2FFluid-Size","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/black7375%2FFluid-Size/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/black7375%2FFluid-Size/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/black7375%2FFluid-Size/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/black7375","download_url":"https://codeload.github.com/black7375/Fluid-Size/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252965085,"owners_count":21832819,"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":["breakpoint","breakpoints","design","media-queries","responsive","sass","scss"],"created_at":"2024-08-03T01:03:26.763Z","updated_at":"2025-05-07T22:30:34.052Z","avatar_url":"https://github.com/black7375.png","language":"SCSS","funding_links":[],"categories":["SCSS"],"sub_categories":[],"readme":"# Fluid Size\n\n[![GitHub Workflow CI  Status](https://img.shields.io/github/workflow/status/black7375/Fluid-Size/CI)](https://github.com/black7375/Fluid-Size/actions?query=workflow%3ACI)\n[![GitHub Workflow Publishing Status](https://img.shields.io/github/workflow/status/black7375/Fluid-Size/Publishing?label=Publishing)](https://github.com/black7375/Fluid-Size/actions?query=workflow%3APublishing)\n[![npm](https://img.shields.io/npm/v/fluid-size?color=%23CC3534\u0026logo=npm)](https://www.npmjs.com/package/fluid-size) \n[![gpr](https://img.shields.io/github/v/release/black7375/Fluid-Size?color=%23117FFF\u0026label=GPR\u0026logo=github)](https://github.com/black7375/Fluid-Size/packages/336258)\n[![jsDelivr_Hits](https://img.shields.io/jsdelivr/npm/hm/fluid-size?color=FF5627\u0026label=jsDelivr\u0026logo=jsDelivr\u0026logoColor=FF5627)](https://www.jsdelivr.com/package/npm/fluid-size)\n\n![Fluid-Size](https://raw.githubusercontent.com/black7375/Fluid-Size/resource/resource/Fluid-Size.png)\n\n:triangular_ruler::iphone::computer::desktop_computer: A method of fluidly resizing in various devices based on [`visual angle`](https://en.wikipedia.org/wiki/Visual_angle). (with SASS) :revolving_hearts: :eyes:\n\nGet away from the effects of devices' ***distance***, ***size***, and ***resolution***!!\n\n![fluid-font-size](https://user-images.githubusercontent.com/25581533/82766346-d8f63900-9e0d-11ea-9b3b-ceabd7832e4b.png)\n- [Demo(Codepen)](https://codepen.io/black7375/pen/xxZoyow?editors=1100)\n- [Demo(Simple ToDo App)](https://black7375.github.io/React-RxJS-Todo/)\n\n## Advantages\n\n[Wiki:Comparison](https://github.com/black7375/Fluid-Size/wiki/Comparison)\n\n- Easy\n- Provides the `fit size` for each device\n- Resized `fluidly` between each device\n- Compatible with [include-media](https://github.com/eduardoboucas/include-media)\n\n## How to Use?\n\n### Install\n\n```shell\n## Yarn\nyarn add fluid-size\n\n## NPM\nnpm install fluid-size\n\n## Github Repository\nnpm install @black7375/fluid-size\n```\n\n### Import\n\n```scss\n@import '~fluid-size/fluid-size';\n```\n\n### Usage\n\nJust use the name of the [API](https://github.com/black7375/fluid-size/wiki/API) with `@include`!!\n\n```scss\ntag {\n  @include property($size);\n}\n```\n\n**Example**\n\nYou can use the regular CSS as it is.\nThere are no restrictions. [Ver 1.5.0 will patch for `%`, `num`]\n```scss\n// Only Single Value\nbody {\n  @include font-size(16px);       // Countable Value    =\u003e Calculated\n  @include text-indent(inherit);  // Uncalculated Value =\u003e Passed\n}\n\n// List Value\nbody {\n  @include font-size(16px !important);         // with Uncountable Value\n  @include text-indent(5em hanging each-line); // with Multiple Uncountable Values\n  @include margin(-3px 1% 0 auto);             // with Mixed Value\n}\n```\n\n **Converted Sample**\n\n```scss\n// Code\nbody {\n  @include font-size(16px);\n}\n\n/** Tentative Result\n * INFO\n * Basis Angle: min angle device(Tablet)\n *\n * SIZES\n * Default:            16px;\n * Phone:        about 18.75px;\n * Tablet:       about 16px;\n * Laptop:       about 16.73px;\n * Desktop:      about 17.56px;\n * High-Desktop: about 20.82px;\n */\n\n// Result\nbody {                       // Default\n  font-size: 1rem;\n}\n\n@media (min-width: 480px) {  // Phone ~ Tablet\n  body {\n    font-size: calc(-0.9504790795vw + 1.4567984055rem);\n  }\n}\n\n@media (min-width: 768px) {  // Tablet ~ Laptop\n  body {\n    font-size: calc(0.1404102228vw + 0.9331715404rem);\n  }\n}\n\n@media (min-width: 1280px) { // Laptop ~ Desktop\n  body {\n    font-size: calc(0.1306874648vw + 0.9409497468rem);\n  }\n}\n\n@media (min-width: 1920px) { // Desktop ~ High-Desktop, Keep going.\n  body {\n    font-size: calc(0.5082290299vw + 0.4878998687rem);\n  }\n}\n```\n\n### Options\n\n[Wiki:API(Options)](https://github.com/black7375/fluid-size/wiki/API#options)\n\nOptions consist of global and scoped options.\n\n- **Global Option:** Setting it as a `variable` changes the default value of the whole.\n- **Scoped Option:** It is provided as an argument(`map` type) to the function, and when used, applies only to the current value.\n\n```scss\n// Global Option\n$option1: value1;\n$option2: value2;\n\n// Scoped Option\ntag {\n  @include property($size, $max-size);\n  // or\n  @include property($size, (option1: value1, option2: value2));\n}\n```\n\nYou can customize resizing method, result's unit, min or max size, ..etc.\n\n **Converted Sample**\n\n```scss\n// Code\nbody {\n  @include font-size(16px !important, (unit: px, max: 25px));\n}\n\n// Result\nbody {                       // Default\n  font-size: 16px !important;\n}\n\n@media (min-width: 480px) {  // Phone ~ Tablet\n  body {\n    font-size: calc(-0.95048vw + 23.30877px) !important;\n  }\n}\n\n@media (min-width: 768px) {  // Tablet ~ Laptop\n  body {\n    font-size: calc(0.14041vw + 14.93074px) !important;\n  }\n}\n\n@media (min-width: 1280px) { // Laptop ~ Desktop\n  body {\n    font-size: calc(0.13069vw + 15.0552px) !important;\n  }\n}\n\n@media (min-width: 1920px) { // Desktop ~ High-Desktop, Keep going.\n  body {\n    font-size: calc(0.50823vw + 7.8064px) !important;\n  }\n}\n\n@media (min-width: 3383px) { // Reach maximum size\n  body {\n    font-size: 25px !important;\n  }\n}\n```\n\n## Learn More\n[Wiki:The theory of font size and readability](https://github.com/black7375/fluid-size/wiki/The-theory-of-font-size-and-readability)\n\n### Principle\n\nUse visual angles to determine the `fit size`(I called) for each device.\n\n![view-distance](https://user-images.githubusercontent.com/25581533/82766340-cc71e080-9e0d-11ea-8268-7c965e6544c0.jpeg)\nsource: [Legibility: how to make text convenient to read](https://uxdesign.cc/legibility-how-to-make-text-convenient-to-read-7f96b84bd8af)\n\n### Calculation process\n\n1. Size specification\n2. Measure the `angle` to be viewed on the [reference device](https://github.com/black7375/Fluid-Size/wiki/API#2-device)\n3. Generate a `fit size` for each device based on the `angle`\n4. Provides **real-time resizing(fluidity)** for mid-range devices\n\n## Browser Supports\n\n- [CSS3 Media Queries](https://caniuse.com/#feat=css-mediaqueries)\n- [`vw` unit](https://caniuse.com/#feat=mdn-css_types_length_vw)([Viewport units](https://caniuse.com/#feat=viewport-units))\n- [`calc()`](https://caniuse.com/#feat=calc)\n\n## F\u0026A\n- CSS decimal place: [Are the decimal places in a CSS width respected?](https://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblack7375%2FFluid-Size","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblack7375%2FFluid-Size","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblack7375%2FFluid-Size/lists"}