DevCalc - CSS Unit Converter

DevCalc in modern dark design

📋 Description

DevCalc is a powerful CSS unit converter developed to make web design and frontend development easier. With an intuitive user interface and comprehensive conversion capabilities, you can quickly and easily convert between various CSS units such as px, rem, em, vh, vw, and many more.

✨ Key Features

• Comprehensive Unit Conversion - Support for relative, absolute, viewport, and text-based units
• Customizable Settings - Adjust root font-size, text parameters, and screen sizes
• Visual Preview - See how your converted units look in mobile, tablet, and desktop views
• Efficient Keyboard Shortcuts - Increase your productivity with quick commands
• Conversion History - Save and reuse your recent conversions
• Dark and Light Theme - Comfortable usage in all lighting conditions
• Responsive Design - Works seamlessly on all devices

🚀 Getting Started

Prerequisites

• Node.js (v14 or later)
• npm or yarn

Installation

1. Clone the repo:

   git clone https://github.com/your-username/devcalc.git
   cd devcalc

2. Install dependencies:

   npm install
   # or
   yarn install

3. Start the development server:

   npm run dev
   # or
   yarn dev

4. Open http://localhost:5173 in your browser

Building for Production

npm run build
# or
yarn build

🔧 Unit Types and Conversions

DevCalc supports the following unit types:

Relative Units

• px ↔ rem
• px ↔ em
• rem ↔ em
• px ↔ %
• % ↔ px

Viewport Units

• px ↔ vh
• px ↔ vw
• vw ↔ vh
• px ↔ vmin
• px ↔ vmax

Absolute Units

• px ↔ pt
• px ↔ cm
• px ↔ mm
• px ↔ in

Text Units

• px ↔ ch
• px ↔ ex
• em ↔ ch

⌨️ Keyboard Shortcuts

DevCalc offers numerous keyboard shortcuts to increase your productivity:

Navigation

• ← → - Switch between conversions
• ↑ ↓ - Toggle between categories
• Esc - Close dialogs or reset values

Actions (Ctrl/Cmd + ...)

• C - Copy result
• R - Reset values
• P - Show/hide preview
• H - Show/hide history
• S - Open settings
• I - Show information
• D - Toggle theme (dark/light)

Other

• ? - Show keyboard shortcuts

🌐 Customize Your Conversions

DevCalc allows you to customize:

• Root font-size: Change the base for rem/em conversions
• Character width: Adjust the ch unit width
• X-height: Customize the ex unit height
• Screen size: Set custom screen dimensions for viewport-based units

💡 Technical Information

DevCalc is built with:

• React - UI library
• TypeScript - Type system
• Tailwind CSS - Styling library
• Vite - Development tool and build process
• Lucide Icons - Icon library

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the repo
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

Distributed under the MIT License. See LICENSE for more information.

📬 Contact

Project Link: https://github.com/screamm/devcalc

---

Built with ❤️ by screamm