Keith Solomon
fa3df3e3f4
- Implemented core functionality to generate fluid typography CSS variables based on user-defined breakpoints and font sizes. - Created configuration options for output format (Tailwind or vanilla CSS) and rounding settings. - Added input parsing for settings from text files or VSCode interface. - Developed CSS generation logic with support for `clamp()` and optional rounding. - Included tests for parsing settings, generating CSS, and inserting text at selection in the editor. - Documented project details and usage in project.md. - Added example CSS output in typography.css.
Fluid Font Size Generator
A VS Code extension that generates fluid typography CSS variables from breakpoint and font-size settings.
Commands
Fluid Typography: Generate CSS From FileFluid Typography: Generate CSS From SelectionFluid Typography: Open Generator
Input Format
CSS: tailwind
Round: yes, 2px
Low: 360px
High: 1920px
text-14px: 12px-14px
text-16px: 14px-16px
CSS can be tailwind or vanilla. Tailwind emits an @theme static block; vanilla emits :root.
Round can be yes, 2px or no. When enabled, generated values use round(down, clamp(...), value).
Settings
These settings work globally or per workspace:
fluidTypography.cssModefluidTypography.round.enabledfluidTypography.round.valuefluidTypography.breakpoints.lowfluidTypography.breakpoints.high