Add framework integration examples and documentation

[ashvin2005]

Add framework integration examples and documentation

Issue

While using Gardevoir in several React and Vue projects, I've noticed that developers often struggle with proper integration in modern JavaScript frameworks. The current documentation is excellent for basic HTML usage, but there's a gap when it comes to framework-specific implementation patterns.

Problem I've observed

From my experience and community discussions, developers frequently encounter:

1. Import order confusion - Not sure whether to import Gardevoir before or after their custom styles
2. Build tool integration - How to properly configure webpack, Vite, or other bundlers
3. Framework-specific patterns - Best practices for React, Vue, Angular, etc.
4. Performance optimization - How to minimize bundle impact in production builds
5. SSR considerations - Proper handling in Next.js, Nuxt.js, and similar frameworks

I've seen these questions come up in:

• Stack Overflow posts about CSS reset integration
• Framework-specific Discord channels
• GitHub issues in various project repositories

What I'd like to contribute

I'd like to add practical framework integration documentation that covers:

Documentation Enhancement

• Framework Integration Guide - Comprehensive examples for popular frameworks
• Build Tool Configuration - Working examples for Webpack, Vite, Rollup
• Performance Optimization Tips - Bundle size management and critical CSS
• Troubleshooting Section - Common integration issues and solutions

Working Examples

• React/Next.js Example - Complete working project showing proper integration
• Vue/Nuxt.js Example - Demonstrating scoped styles compatibility
• Build Configurations - Ready-to-use config files for different setups

Why this would be valuable

Based on what I've observed:

• Reduces support questions about framework integration
• Improves adoption by making integration clearer
• Demonstrates production readiness with real-world examples
• Supports modern workflows that most developers use today

Proposed approach

I'm thinking of a focused addition rather than a major restructure:

1. Add framework section to existing documentation
2. Create examples directory with working projects
3. Include performance guidelines specific to each framework
4. Keep it practical - working code over theoretical explanations

The content would be:

• Thoroughly tested - all examples will compile and run
• Production-focused - includes optimization and best practices
• Framework-agnostic where possible - covers universal patterns
• Maintainable - simple structure that's easy to keep current

Implementation scope

To keep this manageable and valuable, I'd focus on:

• React/Next.js (most popular)
• Vue/Nuxt.js (second most popular)
• Build tool configurations (Webpack, Vite)
• Performance optimization techniques
• Common troubleshooting scenarios

Would this kind of documentation enhancement be welcome? I'm happy to adjust the scope based on what would be most valuable for the project and community.

I can start with a specific framework (like React) and see how that goes, or work on the broader integration guide first - whatever approach the maintainers prefer.