https://github.com/gkhan205/css-utility-generator
A collection of CSS Utility generators with ReactJS
https://github.com/gkhan205/css-utility-generator
css-border-radius css-box-shadow css3 nextjs14 reactjs
Last synced: 24 days ago
JSON representation
A collection of CSS Utility generators with ReactJS
- Host: GitHub
- URL: https://github.com/gkhan205/css-utility-generator
- Owner: gkhan205
- License: mit
- Created: 2024-07-24T18:46:12.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-01T16:46:17.000Z (almost 2 years ago)
- Last Synced: 2025-06-03T22:16:46.077Z (12 months ago)
- Topics: css-border-radius, css-box-shadow, css3, nextjs14, reactjs
- Language: TypeScript
- Homepage:
- Size: 147 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS Utility Generators
Welcome to the CSS Utility Generators project! This repository contains multiple CSS utility generators designed to help developers quickly and easily create various CSS properties. So far, we have implemented a Box Shadow Generator and a Border Radius Generator.
## Table of Contents
- [Introduction](#introduction)
- [Features](#features)
- [Tutorials](#tutorials)
- [Getting Started](#getting-started)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)
## Introduction
CSS Utility Generators is a collection of tools designed to generate CSS code for common properties. These tools aim to simplify the process of creating CSS styles by providing an intuitive interface for generating code snippets.
## Features
- [x] **Border Radius Generator:** Generate border-radius values for creating rounded corners. Control each corner individually or uniformly.
- [x] **Box Shadow Generator:** Create custom box shadows with ease. Adjust properties such as offset, blur, spread, and color.
## Tutorials
Check out the video tutorial of the CSS Utility Generators https://www.youtube.com/watch?v=h-esmacCZrk&list=PLtUG3cTN2la0HqOZX4ZNLQPcJOaaoLfif
## Getting Started
To get started with the project, follow these steps:
1. **Clone the repository:**
```bash
git clone https://github.com/gkhan205/css-utility-generator
cd css-utility-generators
```
2. **Install dependencies:**
```bash
npm install
```
3. **Run the development server:**
```bash
npm start
```
The app will be available at `http://localhost:3000`.
## Usage
### Border Radius Generator
1. Navigate to the Border Radius Generator section.
2. Adjust the sliders or input fields for the top-left, top-right, bottom-left, and bottom-right radius values.
3. Copy the generated CSS code from the output area.
### Box Shadow Generator
1. Navigate to the Box Shadow Generator section.
2. Adjust the sliders or input fields for properties such as offset-x, offset-y, blur radius, spread radius, and color.
3. Copy the generated CSS code from the output area.
## Contributing
Contributions are welcome! If you have ideas for new features or improvements, feel free to open an issue or submit a pull request.
1. **Fork the repository.**
2. **Create a new branch:**
```bash
git checkout -b feature/your-feature-name
```
3. **Make your changes and commit them:**
```bash
git commit -m 'Add some feature'
```
4. **Push to the branch:**
```bash
git push origin feature/your-feature-name
```
5. **Open a pull request.**
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.