{"id":16235012,"url":"https://github.com/asyarb/capsize-fluid","last_synced_at":"2026-04-29T00:03:46.483Z","repository":{"id":57681442,"uuid":"491324226","full_name":"asyarb/capsize-fluid","owner":"asyarb","description":"Create fluid \"capsized\" typographic CSS styles.","archived":false,"fork":false,"pushed_at":"2022-05-12T01:41:21.000Z","size":25,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-15T04:02:53.644Z","etag":null,"topics":["capsize","css","typography"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/asyarb.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-05-12T01:28:18.000Z","updated_at":"2022-05-12T01:38:14.000Z","dependencies_parsed_at":"2022-09-13T20:30:44.086Z","dependency_job_id":null,"html_url":"https://github.com/asyarb/capsize-fluid","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asyarb%2Fcapsize-fluid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asyarb%2Fcapsize-fluid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asyarb%2Fcapsize-fluid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asyarb%2Fcapsize-fluid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asyarb","download_url":"https://codeload.github.com/asyarb/capsize-fluid/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247801175,"owners_count":20998333,"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":["capsize","css","typography"],"created_at":"2024-10-10T13:18:29.959Z","updated_at":"2026-04-29T00:03:46.436Z","avatar_url":"https://github.com/asyarb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Capsize Fluid \u003c!-- omit in toc --\u003e\n\nA small abstraction over\n[`@capsizecss/core`](https://github.com/seek-oss/capsize) to create fluid\n\"capsized\" typographic CSS styles.\n\nBased on the fluid typography detailed in\n[Smashing Magazine](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/).\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [`createFluidStyleObject`](#createfluidstyleobject)\n    - [Example Output](#example-output)\n  - [`createFluidStyleString`](#createfluidstylestring)\n    - [Example Output](#example-output-1)\n  - [`precomputeFluidValues`](#precomputefluidvalues)\n- [CSS Variable Version](#css-variable-version)\n- [License](#license)\n\n## Installation\n\n```bash\n# npm\nnpm i --save-dev @asyarb/capsize-fluid\n```\n\n## Usage\n\n### `createFluidStyleObject`\n\nReturns a CSS-in-JS style object.\n\n```tsx\nimport { createFluidStyleObject } from '@asyarb/capsize-fluid'\nimport metrics from '@capsizecss/metrics/inter'\n\nconst styles = createFluidStyleObject({\n  max: { fontSize: 36, screenSize: 1440 },\n  min: { fontSize: 24, screenSize: 360 },\n  fontMetrics: metrics,\n  lineHeight: 1.25,\n  rootFontSize: 16,\n})\n\nconst Example = () =\u003e \u003cdiv css={styles} /\u003e\n```\n\n#### Example Output\n\n```ts\nconst values = {\n  fontSize: \"clamp(1.5rem, 1.1111vw + 1.25rem, 2.25rem)\",\n  lineHeight: \"1.25\",\n  \"::after\": {\n    content: \"\\\\\"\\\\\"\",\n    display: \"table\",\n    marginTop: \"-0.2614em\",\n  },\n  \"::before\": {\n    content: \"\\\\\"\\\\\"\",\n    display: \"table\",\n    marginBottom: \"-0.2614em\",\n  }\n}\n```\n\n### `createFluidStyleString`\n\nReturns a CSS string that can be inserted into a style tag or appended to a\nstylesheet.\n\n```ts\nimport { createFluidStyleString } from '@asyarb/capsize-fluid'\nimport metrics from '@capsizecss/metrics/inter'\n\nconst styleRule = createFluidStyleString('fluid-capsize', {\n  max: { fontSize: 36, screenSize: 1440 },\n  min: { fontSize: 24, screenSize: 360 },\n  fontMetrics: metrics,\n  lineHeight: 1.25,\n  rootFontSize: 16,\n})\n\ndocument.write(`\n  \u003cstyle type=\"text/css\"\u003e\n    ${styleRule}\n  \u003c/style\u003e\n  \u003cdiv class=\"fluid-capsize\"\u003e\n    My capsized text 🛶\n  \u003c/div\u003e\n`)\n```\n\n#### Example Output\n\n```css\n.fluid-capsize {\n  font-size: clamp(1.5rem, 1.1111vw + 1.25rem, 2.25rem);\n  line-height: 1.25;\n}\n\n.fluid-capsize::before {\n  content: \\\\'\\\\';\n  display: table;\n  margin-bottom: -0.2614em;\n}\n\n.fluid-capsize::after {\n  content: \\\\'\\\\';\n  display: table;\n  margin-top: -0.2614em;\n}\n```\n\n### `precomputeFluidValues`\n\nReturns all the information required to create styles for a specific fluid font\nsize with the provided options.\n\n```ts\nimport { precomputeFluidValues } from '@asyarb/capsize-fluid'\nimport metrics from '@capsizecss/metrics/inter'\n\nconst values = precomputeFluidValues({\n  max: { fontSize: 36, screenSize: 1440 },\n  min: { fontSize: 24, screenSize: 360 },\n  fontMetrics: interFontMetrics,\n  lineHeight: 1.25,\n  rootFontSize: 16,\n})\n\n// `precomputeFluidValues` returns the following:\ninterface ComputedFluidValues {\n  minFontSize: string\n  maxFontSize: string\n  baselineTrim: string\n  capHeightTrim: string\n  vw: string\n  rem: string\n}\n```\n\n## CSS Variable Version\n\nIf you are looking for a \"plain\" CSS version of this library, checkout this\n[Gist](https://gist.github.com/asyarb/162bf0a8b5d238de01bd2832094727ad).\n\n## License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasyarb%2Fcapsize-fluid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasyarb%2Fcapsize-fluid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasyarb%2Fcapsize-fluid/lists"}