Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manju1807/colorsanity
Your ultimate tool for creating 🎨, customizing 🔧, and exploring stunning color palettes, gradients 🌈, and CSS code snippets 💻. Perfect for designers, developers, and creatives, ColorSanity offers real-time previews 👀, theme customization 🎨, PWA support 📱, and multi-language integration 🌐. Built with Vue 3 ⚛️, Tailwind CSS, and Shadcn-Vue.
https://github.com/manju1807/colorsanity
advanced-pattern-problems color-palette-generator color-scheme gradient-generator microsaas pinia pinia-plugin-persist pinia-vuejs pwa pwa-apps seo shadcn-vue v1 vuejs-router vuejs3
Last synced: about 8 hours ago
JSON representation
Your ultimate tool for creating 🎨, customizing 🔧, and exploring stunning color palettes, gradients 🌈, and CSS code snippets 💻. Perfect for designers, developers, and creatives, ColorSanity offers real-time previews 👀, theme customization 🎨, PWA support 📱, and multi-language integration 🌐. Built with Vue 3 ⚛️, Tailwind CSS, and Shadcn-Vue.
- Host: GitHub
- URL: https://github.com/manju1807/colorsanity
- Owner: manju1807
- Created: 2024-12-27T08:01:05.000Z (19 days ago)
- Default Branch: main
- Last Pushed: 2025-01-07T12:50:40.000Z (8 days ago)
- Last Synced: 2025-01-07T13:38:03.179Z (8 days ago)
- Topics: advanced-pattern-problems, color-palette-generator, color-scheme, gradient-generator, microsaas, pinia, pinia-plugin-persist, pinia-vuejs, pwa, pwa-apps, seo, shadcn-vue, v1, vuejs-router, vuejs3
- Language: Vue
- Homepage: https://colorsanity.netlify.app/
- Size: 1.34 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- Support: .github/support.yml
Awesome Lists containing this project
README
# 🎨 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:
```bash
git clone https://github.com/yourusername/color-sanity.git
cd color-sanity
```
2. 📦 **Install dependencies**:
```bash
npm install
# or
yarn
```
3. 🚀 **Run the development server**:
```bash
npm run dev
# or
yarn dev
```
4. 🌐 Open [http://localhost:3000](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
---
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](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. 🌈✨