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.
36 lines
846 B
Markdown
36 lines
846 B
Markdown
# 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 File`
|
|
- `Fluid Typography: Generate CSS From Selection`
|
|
- `Fluid Typography: Open Generator`
|
|
|
|
## Input Format
|
|
|
|
```plain
|
|
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.cssMode`
|
|
- `fluidTypography.round.enabled`
|
|
- `fluidTypography.round.value`
|
|
- `fluidTypography.breakpoints.low`
|
|
- `fluidTypography.breakpoints.high`
|