feat: add Fluid Typography Generator extension for VSCode
- 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.
This commit is contained in:
+37
@@ -0,0 +1,37 @@
|
||||
# Project: Fluid Typography Generator extension for VSCode
|
||||
|
||||
## Description
|
||||
|
||||
A VSCode extension to generate fluid typography CSS variables for themes.
|
||||
|
||||
Given a set of font sizes, this tool calculates the appropriate CSS `clamp()` values (with `round()` support) to create fluid typography that scales smoothly between a defined minimum and maximum size based on the viewport width. The generated CSS variables can be used in WordPress themes to ensure consistent and responsive font sizing across different screen sizes.
|
||||
|
||||
## Input
|
||||
|
||||
A text file containing a list of settings (low/high screen size breakpoints, variable names, and font sizes in pixels), one per line. For example:
|
||||
|
||||
```plain
|
||||
Low: 360px
|
||||
High: 1920px
|
||||
|
||||
text-14px: 12px-14px
|
||||
text-16px: 14px-16px
|
||||
text-18px: 16px-18px
|
||||
text-20px: 18px-20px
|
||||
text-22px: 20px-22px
|
||||
text-25px: 22px-25px
|
||||
text-30px: 25px-30px
|
||||
text-35px: 30px-35px
|
||||
text-38px: 35px-38px
|
||||
text-40px: 38px-40px
|
||||
text-45px: 40px-45px
|
||||
text-50px: 45px-50px
|
||||
text-70px: 50px-70px
|
||||
text-75px: 70px-75px
|
||||
```
|
||||
|
||||
Optionally, the inputs can be provided through a form in the VSCode extension interface, allowing users to easily customize their settings without editing a text file.
|
||||
|
||||
## Output
|
||||
|
||||
A CSS file containing the generated fluid typography variables and comments. See `typography.css` for an example.
|
||||
Reference in New Issue
Block a user