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
}

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

GIF

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.

Comments

[Hussein Kizz]

This is amazing!