Fluid Fonts is a VS Code extension designed to simplify the use of fluid typography in your projects, enabling you to create responsive font sizes effortlessly.
Features
Easy Integration: Quickly generate fluid font sizes using the Generate Clamp function.
User-Friendly Interface: Intuitive settings for configuring your typography.
How to Use the Generate Clamp Function
Press CTRL + SHIFT + P (Windows) or Command + Shift + P (Mac OS).
Select the Generate Clamp option.
Enter your values separated by commas in the placeholder specified (in px or rem).
Extension Settings
Fluid Fonts offers the following configurable settings:
Enable: Toggle the extension on or off.
Min and Max Viewport: Customize the default minimum and maximum viewport values.
Units: Specify whether you want to enter values in px or rem.
Getting Started
You can configure the following parameters in your workspace settings:
Minimum Viewport: The viewport width at which the font size won’t be reduced (e.g., 320px).
Maximum Viewport: The viewport width at which the font size starts to decrease (e.g., 1400px).
Steps to Insert Data
Press CTRL + SHIFT + P (Windows) or Command + Shift + P (Mac OS).
Select the Generate Clamp option.
Enter your values separated by commas in the placeholder specified (in px or rem).
Minimum Value: The smallest font size (e.g., 16px). The final value will not go below this.
Maximum Value: The largest font size (e.g., 24px). The starting value will not exceed this.
For more information on CSS Clamp, check out the MDN Web Docs.
TODO
[ ] Implement unit testing
Acknowledgements
This project was inspired by the css-clamp-generator-vscode library.
We would like to thank the author for his work and contributions that served as the basis for the development of Fluid Fonts.
