🎯 Create perfect responsive values for modern web development
A powerful, intuitive tool for generating CSS clamp() functions with real-time preview and advanced project management features.
- 🎨 Real-time Preview - See your clamp values in action instantly
- 📋 One-click Copy - Copy generated CSS with a single click
- ⚙️ Flexible Units - Support for rem, px, and em units
- 🔄 Px to Rem Conversion - Input values in px, but generate clamp() with rem units for better accessibility
- 🎯 Viewport Control - Customize min/max screen widths
- 💾 Project Management - Save and organize your clamp configurations
- 📤📥 Import/Export Projects - Import and export your projects as JSON files
- 💾 Auto-Save - Projects automatically saved to browser's local storage
- ⚡ Lightning Fast - Built with Vue.js and TypeScript for optimal performance
- Set Your Range - Define minimum and maximum viewport widths
- Choose Values - Set your desired minimum and maximum values
- Select Units - Pick from rem, px, or em units
- Get Your Code - Copy the generated
clamp()function - Use in CSS - Apply directly to your stylesheets
The clamp() function takes three parameters:
clamp(minimum, preferred, maximum)It generates the perfect preferred value using linear interpolation between your viewport breakpoints, ensuring smooth scaling across all screen sizes.
- Typography - Responsive font sizes that scale naturally
- Spacing - Margins and paddings that adapt to screen size
- Layout - Container widths and component sizing
- Design System - Consistent scaling across your entire project
- Vue.js 3 - Modern reactive framework
- TypeScript - Type-safe JavaScript
- Vite - Lightning-fast build tool
- PrimeVue - Rich UI component library
npm install
Compile and Hot-Reload for Development
npm run dev
Type-Check, Compile and Minify for Production
npm run build
This project is licensed under the MIT License - see the LICENSE file for details.
Hasenov - @hasenov
⭐ Star this repo if it helped you! ⭐