Skip to content

Latest commit

 

History

History
145 lines (110 loc) · 6.19 KB

README.md

File metadata and controls

145 lines (110 loc) · 6.19 KB

🎨 ColorSanity - Your Ultimate Color Companion

ColorSanity is a powerful tool designed to help designers, developers, and creatives generate, customize, and explore stunning color palettes, gradients, and CSS code snippets. With real-time previews, a beautiful and intuitive UI, and a host of advanced features, ColorSanity streamlines your workflow and brings your projects to life with vibrant colors.

🚀 Key Features

  • 🎨 Color Palette Generator: Create custom color palettes perfect for branding and design projects.
  • 🌈 Gradient Generator: Generate stunning gradients for your designs.
  • 🖌️ Tints & Shades: Explore color variations to find the perfect hue.
  • 💻 CSS Code Export: Copy ready-to-use CSS code with a single click.
  • 📚 Curated Collections: Explore handpicked color palettes and gradients.
  • 🎨 Theme Customization: Fine-tune your theme colors with ease.
  • 📱 Responsive Design: Works seamlessly across all devices.
  • 🔧 PWA Support: Installable as a Progressive Web App for offline use.
  • 🌐 i18n Language Support: Multi-language support for global users.
  • 🧪 Vitest Testing: Comprehensive testing with Vitest for robust code.
  • 🛠️ Shadcn-Vue Components: Beautiful and reusable UI components.
  • 🗂️ Vue Router: Seamless navigation and routing.
  • 🧹 BiomeJS: Fast and efficient code formatting and linting.
  • 🐶 Husky: Git hooks for pre-commit linting and formatting.
  • 🔍 Vue DevTools: Debugging and inspection with Vue DevTools.
  • 📊 Rollup & Vite Visualizers: Analyze bundle size and performance.
  • 🖼️ SVG Loader: Optimized SVG handling for better performance.
  • 🔧 Vite Inspect Plugin: Debug and inspect Vite plugins.
  • 🗜️ Vite Compression: Optimized assets with compression.
  • 💾 LocalStorage Theme Persistence: Save and load user theme preferences.
  • 📦 Pinia Persistence Plugin: Persistent state management for themes.
  • 🎨 Highly Customizable UI: Tailored to fit your design needs.
  • 🚀 Netlify Deployment: Easy deployment with Netlify.

🛠️ Built With

  • ⚡ Vite: Next-generation frontend tooling.
  • ⚛️ Vue 3: Progressive JavaScript framework.
  • 📘 TypeScript: Typed superset of JavaScript.
  • 🎨 Tailwind CSS: Utility-first CSS framework.
  • 🎭 Shadcn-Vue: Beautiful and reusable UI components.
  • 🖼️ Lucide Vue: Beautiful & consistent icon pack.
  • 📊 Unovis: Composable charting library.
  • 🌙 VueUse: Collection of essential Vue composition utilities.
  • 🚨 Vee-Validate: Form validation for Vue.
  • 📦 Pinia: Intuitive state management for Vue.
  • 🌐 Vue I18n: Internationalization and language support.
  • 🧪 Vitest: Fast and modern testing framework.
  • 🐶 Husky: Git hooks for pre-commit linting.
  • 🧹 BiomeJS: Fast and efficient code formatting and linting.
  • 🔍 Vue DevTools: Debugging and inspection tools.
  • 🗜️ Vite Compression: Optimized assets with compression.
  • 🖼️ SVG Loader: Optimized SVG handling.
  • 📊 Rollup & Vite Visualizers: Bundle size and performance analysis.

📈 Development Process

The development of ColorSanity focused on creating a user-friendly interface with robust functionality:

  • 🎨 Implemented core color customization features.
  • 🔍 Integrated real-time color previews.
  • 🎨 Developed responsive UI with theme support.
  • ♿ Implemented comprehensive accessibility features.
  • ⚡ Optimized performance across all devices.
  • 🧪 Added comprehensive testing with Vitest.
  • 🌐 Integrated i18n for multi-language support.
  • 🛠️ Configured PWA for offline use.
  • 🐶 Set up Husky for pre-commit linting and formatting.
  • 🧹 Used BiomeJS for fast and efficient code formatting.
  • 📦 Added Pinia persistence for theme storage.
  • 🖼️ Optimized SVG handling with SVG Loader.
  • 📊 Analyzed bundle size with Rollup and Vite visualizers.

🏃‍♂️ Running the Project

To run ColorSanity locally, follow these steps:

  1. 📥 Clone the repository to your local machine:

    git clone https://github.com/yourusername/color-sanity.git
cd color-sanity

  2. 📦 Install dependencies:

    npm install
# or
yarn

  3. 🚀 Run the development server:

    npm run dev
# or
yarn dev

  4. 🌐 Open http://localhost:3000 in your browser.

🛠️ Advanced Configuration

  • PWA Setup: The project is configured as a Progressive Web App (PWA) for offline use and installability.
  • i18n Language Support: Multi-language support is integrated using Vue I18n.
  • Vitest Testing: Comprehensive testing is set up with Vitest for robust code quality.
  • Husky & Commitlint: Pre-commit hooks ensure code quality and consistent commit messages.
  • BiomeJS: Fast and efficient code formatting and linting.
  • Vite Inspect Plugin: Debug and inspect Vite plugins during development.
  • Rollup & Vite Visualizers: Analyze bundle size and performance.
  • Vite Compression: Optimized assets with compression for better performance.

📸 Screenshots

Home Page Gradient Customization Tool Tints & Shades Theme Customization 1 Theme Customization 2 Theme Customization 3

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

💖 Created with ❤️ by Manjunath R

Feel free to contribute to the project or provide feedback. Your support is greatly appreciated!

ColorSanity is your go-to tool for all things color. Whether you're a designer, developer, or creative, ColorSanity empowers you to create stunning designs with ease. 🌈✨