Clamper is a lil’ clamper app to fill the responsive gap. It lives in your menu bar so you can scale your stuff quick.

Clamper can generate linear scaling for CSS using four values: your min/max viewport width and your min/max preferred size.

How do you use it?

1. Enter in your max viewport width. When do you want the object to reach it's largest size and stop growing?
2. Enter in your minimum viewport width. When should the object reach it's smallest size and stop shrinking?
3. Enter your minimum object size. How small should the object get when it's reached the smallest viewport size?
4. Enter your maximum object size. What's the biggest size the object should get when it reaches the maximum viewport width?
5. Copy the clamp calculation and paste it wherever a normal measurement would go.

What's it good for?

• Font sizes: Set one clamp size for desktop and mobile and scale the size in between. Forget designing for tablet!
• Flex and Grid Gaps: Scale your gaps just like the designer wants and estimate everything in between.
• Margins: Perfect for creating big gaps on desktop and small gaps on mobile.