Clamp it! VS Code extension ✣ S.Bistrović

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
}

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

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

16, 20, 16, 600, 1200

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)

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