CSS Sprite Generator

A modern web application that helps developers create and manage CSS sprites efficiently. This tool combines multiple images into a single sprite sheet and generates the corresponding CSS code, optimizing web performance by reducing HTTP requests.

Features

• Upload multiple images to create sprite sheets
• Automatic sprite sheet generation
• CSS code generation with proper positioning
• Real-time preview of sprite sheet
• Customizable sprite settings
• Support for various image formats (PNG, JPEG, GIF)
• Responsive design

Installation

# Clone the repository
git clone https://github.com/ashok1708/css-sprit-generator.git

# Navigate to the project directory
cd css-sprit-generator

# Install dependencies
npm install

# Start the development server
npm run dev

Usage

• Open the application in your web browser
• Click the upload button to select multiple images
• Adjust sprite settings if needed (padding, arrangement, etc.)
• Preview the generated sprite sheet
• Copy the generated CSS code
• Use the sprite sheet and CSS in your project

Development

Prerequisites

• Node.js (v14 or higher)

• npm or yarn

• npm run dev - Starts the development server

• npm run build - Builds the app for production

• npm run preview - Preview the production build locally

Contributing

• Fork the repository
• Create your feature branch ( git checkout -b feature/AmazingFeature )
• Commit your changes ( git commit -m 'Add some AmazingFeature' )
• Push to the branch ( git push origin feature/AmazingFeature )
• Open a Pull Request

License

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

Acknowledgments

• Built with React
• Powered by Vite
• Favicon designed for optimal visual representation of sprite functionality