{"id":18320109,"url":"https://github.com/byteyard/fluidsizingcss","last_synced_at":"2026-02-24T01:32:29.122Z","repository":{"id":253887194,"uuid":"844845348","full_name":"byteyard/FluidSizingCSS","owner":"byteyard","description":"FluidSizingCSS is a pure CSS solution for responsive design, offering fluid sizing locks for seamless scaling across devices. It eliminates the need for external tools, enabling developers to create adaptable, lightweight, and fast interfaces with native CSS.","archived":false,"fork":false,"pushed_at":"2024-08-21T04:37:58.000Z","size":355,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"production","last_synced_at":"2025-10-28T06:35:10.683Z","etag":null,"topics":["adaptive-design","css","fluid-sizing","media-queries","native-css","responsive-design","scaling","web-development"],"latest_commit_sha":null,"homepage":"http://fluidsizingcss.com/","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/byteyard.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":"2024-08-20T04:44:16.000Z","updated_at":"2024-08-21T04:38:01.000Z","dependencies_parsed_at":"2025-04-05T22:31:51.616Z","dependency_job_id":"f7ff7398-13bb-4c83-b79f-46e2cd717cff","html_url":"https://github.com/byteyard/FluidSizingCSS","commit_stats":null,"previous_names":["byteyard/fluidsizingcss"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/byteyard/FluidSizingCSS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byteyard%2FFluidSizingCSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byteyard%2FFluidSizingCSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byteyard%2FFluidSizingCSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byteyard%2FFluidSizingCSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/byteyard","download_url":"https://codeload.github.com/byteyard/FluidSizingCSS/tar.gz/refs/heads/production","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/byteyard%2FFluidSizingCSS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29766389,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-24T01:28:30.166Z","status":"ssl_error","status_checked_at":"2026-02-24T01:28:27.518Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["adaptive-design","css","fluid-sizing","media-queries","native-css","responsive-design","scaling","web-development"],"created_at":"2024-11-05T18:15:12.146Z","updated_at":"2026-02-24T01:32:29.089Z","avatar_url":"https://github.com/byteyard.png","language":"CSS","readme":"# \u003cimg src=\"https://github.com/user-attachments/assets/99cd64e9-e0c5-46c1-a650-c74286371fe2\" alt=\"ByteYard Icon Blue 3D Shadow\" width=\"24\"/\u003e FluidSizingCSS\n\n## Rethink Responsive Design with Pure CSS Fluid Sizing\n\nFluidSizingCSS is a pioneering solution for responsive design that transforms how interfaces adapt between mobile and desktop. This package offers the world's first pure CSS implementation of fluid sizing locks, eliminating the need for SCSS or external tools. Designed for developers and loved by designers, it enables perfect fluid scaling using only native CSS, making your site more adaptable, lighter, and faster.\n\n\u003e [!TIP]\n\u003e See the [FluidSizingCSS Demo](https://codepen.io/arinker/pen/poXLzBG) on CodePen.\n\n---\n\n## Table of Contents\n\n1. [Installation](#installation)\n   - [Via npm](#via-npm)\n   - [Optional: Smaller CSS Files](#optional-smaller-css-files)\n   - [Via CDN](#via-cdn)\n1. [File Sizes](#file-sizes)\n1. [How It Works](#how-it-works)\n   - [Example Usage](#example-usage)\n   - [Global Settings](#global-settings)\n1. [Complete List of Fluid Properties](#complete-list-of-fluid-properties)\n   - [Common Fluid Properties](#common-fluid-properties)\n   - [Logical Fluid Properties](#logical-fluid-properties)\n   - [Physical Fluid Properties](#physical-fluid-properties)\n1. [License](#license)\n\n---\n\n## Installation\n\n### Via npm\n\n1. **Install FluidSizingCSS**:\n\n   ```bash\n   npm install fluidsizingcss\n   ```\n\n2. **Import the CSS file** into your project based on the framework you’re using:\n\n   - **React**: Import in your JavaScript/TypeScript file:\n\n     ```javascript\n     import 'fluidsizingcss/all';\n     ```\n\n   - **Vue.js**: Import in your entry file:\n\n     ```javascript\n     import 'fluidsizingcss/all';\n     ```\n\n   - **Angular**: Add to the `styles` array in `angular.json`:\n\n     ```json\n     \"styles\": [\n       \"node_modules/fluidsizingcss/dist/fluidsizingcss.min.css\",\n       \"src/styles.css\"\n     ]\n     ```\n\n   - **HTML/Vanilla JavaScript**: Add to your HTML `\u003chead\u003e`:\n\n     ```html\n     \u003clink rel=\"stylesheet\" href=\"node_modules/fluidsizingcss/dist/fluidsizingcss.min.css\"\u003e\n     ```\n\n   - **SASS/SCSS**: Import in your main SASS/SCSS file:\n\n     ```scss\n     @import 'node_modules/fluidsizingcss/dist/fluidsizingcss.min.css';\n     ```\n\n### Optional: Smaller CSS Files\n\nTo improve performance, you can choose specialized versions of FluidSizingCSS:\n\n- **Logical Properties Only** (e.g., `block-size`, `inline-size`):\n\n  ```javascript\n  import 'fluidsizingcss/logical';\n  ```\n\n- **Physical Properties Only** (e.g., `height`, `width`):\n\n  ```javascript\n  import 'fluidsizingcss/physical';\n  ```\n\n### Via CDN\n\nAlternatively, include FluidSizingCSS directly in your HTML:\n\n- **Full Version**:\n\n  ```html\n  \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/fluidsizingcss@latest/dist/fluidsizingcss.min.css\"\u003e\n  ```\n\n  ```html\n  \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/fluidsizingcss@latest/dist/fluidsizingcss.min.css\"\u003e\n  ```\n\n- **Logical Properties Only**:\n\n  ```html\n  \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/fluidsizingcss@latest/dist/fluidsizingcss-logical.min.css\"\u003e\n  ```\n\n  ```html\n  \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/fluidsizingcss@latest/dist/fluidsizingcss-logical.min.css\"\u003e\n  ```\n\n- **Physical Properties Only**:\n\n  ```html\n  \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/fluidsizingcss@latest/dist/fluidsizingcss-physical.min.css\"\u003e\n  ```\n\n  ```html\n  \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/fluidsizingcss@latest/dist/fluidsizingcss-physical.min.css\"\u003e\n  ```\n\n---\n\n### File Sizes\n\nThe following table provides an overview of the different versions of FluidSizingCSS files, including their standard CSS size, minified size, and the size after Brotli compression. This information helps you understand the trade-offs between file size and performance optimization in your project.\n\n| File Name                     | Raw        | Minified        | Brotli compressed      |\n|-------------------------------|------------|-----------------|------------------------|\n| `fluidsizingcss.css`          | 49.22 KB   | 38.03 KB        | 2.69 KB                |\n| `fluidsizingcss-logical.css`  | 33.56 KB   | 25.8 KB         | 1.91 KB                |\n| `fluidsizingcss-physical.css` | 28.12 KB   | 21.35 KB        | 1.93 KB                |\n\n---\n\n## How It Works\n\nFluidSizingCSS leverages CSS custom properties, `calc()`, and `clamp()` to implement fluid sizing techniques. This method enables smooth adaptation of typography and design elements across different devices, avoiding the abrupt changes typically associated with traditional breakpoints. \n\n### Example Usage\n\nTo define fluid sizing for a heading, include the following in your CSS:\n\n\u003e [!CAUTION]\n\u003e All values must be unitless to ensure compatibility with CSS mathematical operations.\n\n```css\n:root {\n    --s-min: 400; /* Lower Lock: Min Screen Size */\n    --s-max: 1400; /* Upper Lock: Max Screen Size */\n}\n\nh1 {\n    font-size: var(--fs);\n    --fs-min: 60; /* Minimum Font Size */\n    --fs-max: 240; /* Maximum Font Size */\n    line-height: var(--lh);\n    --lh-min: 60; /* Minimum Line-Height */\n    --lh-max: 240; /* Maximum Line-Height */\n}\n```\n\n### Global Settings\n\nSet global minimum and maximum screen sizes and base font size at the `:root` level:\n\n```css\n@layer fluid, base;\n\n@layer base {\n    :root {\n        --s-min: 400; /* Screen Size Min for General Fluid Sizing */\n        --s-max: 1400; /* Screen Size Max for General Fluid Sizing */\n        --rem: 16; /* Pixel per REM for General Fluid Sizing */\n    }\n}\n```\n\n---\n\n## Complete List of Fluid Properties\n\nFluidSizingCSS provides a comprehensive set of fluid properties, allowing you to create responsive and adaptive designs across different screen sizes. These properties are categorized into \n* Common Fluid Properties,\n* Logical Fluid Properties and\n* Physical Fluid Properties.\n\n### Common Fluid Properties\n\nThese are general properties like margins, padding, and text formatting that apply universally, ensuring consistent fluid responsiveness across your design.\n\n#### Text Formatting\n\n- **font-size:** `--fs`\n- **line-height:** `--lh`\n- **letter-spacing:** `--ls`\n- **word-spacing:** `--ws`\n- **text-indent:** `--ti`\n- **text-decoration-thickness:** `--tdt`\n- **text-underline-offset:** `--tuo`\n\n#### Margin\n\n- **margin:** `--m`\n\n#### Padding\n\n- **padding:** `--p`\n\n#### Border Width\n\n- **border-width:** `--bw`\n\n#### Border Radius\n\n- **border-radius:** `--br`\n\n#### Outline\n\n- **outline-width:** `--ow`\n- **outline-offset:** `--oo`\n\n#### Inset\n\n- **inset:** `--i`\n\n#### Grid, Flex, and Columns\n\n- **grid-auto-columns:** `--gac`\n- **grid-auto-rows:** `--gar`\n- **gap:** `--g`\n- **column-gap:** `--cg`\n- **row-gap:** `--rg`\n- **column-width:** `--cw`\n- **column-rule-width:** `--crw`\n- **flex-basis:** `--fb`\n\n#### Background\n\n- **background-position-x:** `--bpx`\n- **background-position-y:** `--bpy`\n\n#### Scroll\n\n- **scroll-margin:** `--sm`\n- **scroll-padding:** `--sp`\n\n### Logical Fluid Properties\n\nThese properties adjust layout dimensions and spacing using logical directions (e.g., block, inline) relative to writing modes, enhancing adaptability across different content flows.\n\n#### Block\n\n- **block-size:** `--bs`\n- **min-block-size:** `--minbs`\n- **max-block-size:** `--maxbs`\n\n#### Inline\n\n- **inline-size:** `--is`\n- **min-inline-size:** `--minis`\n- **max-inline-size:** `--maxis`\n\n#### Margin\n\n- **margin-block:** `--mb`\n- **margin-block-start:** `--mbs`\n- **margin-block-end:** `--mbe`\n- **margin-inline:** `--mi`\n- **margin-inline-start:** `--mis`\n- **margin-inline-end:** `--mie`\n\n#### Padding\n\n- **padding-block:** `--pb`\n- **padding-block-start:** `--pbs`\n- **padding-block-end:** `--pbe`\n- **padding-inline:** `--pi`\n- **padding-inline-start:** `--pis`\n- **padding-inline-end:** `--pie`\n\n#### Border Width\n\n- **border-block-width:** `--bbw`\n- **border-block-start-width:** `--bbsw`\n- **border-block-end-width:** `--bbew`\n- **border-inline-width:** `--biw`\n- **border-inline-start-width:** `--bisw`\n- **border-inline-end-width:** `--biew`\n\n#### Border Radius\n\n- **border-start-start-radius:** `--bssr`\n- **border-start-end-radius:** `--bser`\n- **border-end-end-radius:** `--beer`\n- **border-end-start-radius:** `--besr`\n\n#### Inset\n\n- **inset-block:** `--ib`\n- **inset-block-start:** `--ibs`\n- **inset-block-end:** `--ibe`\n- **inset-inline:** `--ii`\n- **inset-inline-start:** `--iis`\n- **inset-inline-end:** `--iie`\n\n#### Scroll\n\n- **scroll-margin-block:** `--smb`\n- **scroll-margin-block-start:** `--smbs`\n- **scroll-margin-block-end:** `--smbe`\n- **scroll-margin-inline:** `--smi`\n- **scroll-margin-inline-start:** `--smis`\n- **scroll-margin-inline-end:** `--smie`\n- **scroll-padding-block:** `--spb`\n- **scroll-padding-block-start:** `--spbs`\n- **scroll-padding-block-end:** `--spbe`\n- **scroll-padding-inline:** `--spi`\n- **scroll-padding-inline-start:** `--spis`\n- **scroll-padding-inline-end:** `--spie`\n\n### Physical Fluid Properties\n\nThese properties control physical dimensions (e.g., height, width) and positions (e.g., top, left) based on the viewport, allowing precise fluid scaling of elements.\n\n#### Height\n\n- **height:** `--h`\n- **min-height:** `--minh`\n- **max-height:** `--maxh`\n\n#### Width\n\n- **width:** `--w`\n- **min-width:** `--minw`\n- **max-width:** `--maxw`\n\n#### Margin\n\n- **margin-top:** `--mt`\n- **margin-bottom:** `--mgb`\n- **margin-left:** `--ml`\n- **margin-right:** `--mr`\n\n#### Padding\n\n- **padding-top:** `--pt`\n- **padding-bottom:** `--pb`\n- **padding-left:** `--pl`\n- **padding-right:** `--pr`\n\n#### Border Width\n\n- **border-top-width:** `--btw`\n- **border-bottom-width:** `--bbwth`\n- **border-left-width:** `--blw`\n- **border-right-width:** `--bbrw`\n\n#### Border Radius\n\n- **border-top-left-radius:** `--btlr`\n- **border-top-right-radius:** `--btrr`\n- **border-bottom-right-radius:** `--bbrr`\n- **border-bottom-left-radius:** `--bblr`\n\n#### Inset\n\n- **top:** `--top`\n- **bottom:** `--bot`\n- **left:** `--lft`\n- **right:** `--rgt`\n\n#### Scroll\n\n- **scroll-margin-top:** `--smt`\n- **scroll-margin-bottom:** `--smb`\n- **scroll-margin-left:** `--sml`\n- **scroll-margin-right:** `--smr`\n- **scroll-padding-top:** `--spt`\n- **scroll-padding-bottom:** `--spbt`\n- **scroll-padding-left:** `--spl`\n- **scroll-padding-right:** `--spr`\n\n## License\n\nFluidSizingCSS is licensed under the MIT License.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbyteyard%2Ffluidsizingcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbyteyard%2Ffluidsizingcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbyteyard%2Ffluidsizingcss/lists"}