DEV Community

Cover image for Clamp it! VS Code extension
Silvestar Bistrović
Silvestar Bistrović

Posted on • Originally published at silvestar.codes

Clamp it! VS Code extension

Today I published my first VS Code extension - Clamp it! This extension makes it easy to generate the clamped sizes for your CSS code.

I made it because wanted to be more productive. My current process included going to an online clamp generator website, entering desired sizes, and then copy-paste it into my code.

I made it with help from ChatGPT. 90% of the code is produced by ChatGPT. I had to tweak some things, and I came up with the idea, so I guess I deserve some credit.

To start using it, first configure it by setting the following options in the global settings.json file (Command palette: Preferences: Open User Settings (JSON)) or your project settings.json file (Command palette: Preferences: Open Workspace Settings (JSON)):

{
  "clampExtension.globalMinViewport": 600,
  "clampExtension.globalMaxViewport": 1440,
  "clampExtension.baseFontSize": 16
}
Enter fullscreen mode Exit fullscreen mode

Next, type minimum and maximum sizes (in pixels), highlight the typed sizes, and then choose Clamp it! command from command palette:

Image description

If you want, you can use the full definition, like so:

16, 20, 16, 600, 1200
Enter fullscreen mode Exit fullscreen mode

where

  • the first parameter is the minimum size,
  • the second parameter is the maximum size,
  • the third parameter is the base font size,
  • the fourth parameter is the minimum viewport size, and
  • the fifth parameter is the maximum viewport size.

Note that the output is always in REM units:

clamp(1rem, calc(0.821rem + 0.476vw), 1.25rem)
Enter fullscreen mode Exit fullscreen mode

That's it! I hope this little extension will make you more productive as it made me.

Top comments (1)

Collapse
 
husseinkizz profile image
Hussein Kizz

This is amazing!