Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Dun-sin/Code-Magic
All in one styling tool for developers
https://github.com/Dun-sin/Code-Magic
css developer-tools generator hacktoberfest html open-source styling-css tools typescript
Last synced: about 2 months ago
JSON representation
All in one styling tool for developers
- Host: GitHub
- URL: https://github.com/Dun-sin/Code-Magic
- Owner: Dun-sin
- License: mit
- Created: 2022-07-05T09:47:44.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-11T10:12:40.000Z (3 months ago)
- Last Synced: 2024-10-16T21:47:41.674Z (2 months ago)
- Topics: css, developer-tools, generator, hacktoberfest, html, open-source, styling-css, tools, typescript
- Language: TypeScript
- Homepage: https://code-magic.vercel.app
- Size: 1.82 MB
- Stars: 382
- Watchers: 7
- Forks: 204
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
### 🚀 About
Code Magic is a website where you can get simple CSS tricks to make your application elegant with just few clicks.
### 🧙♀️ Magic options available for you:
- Pic Text - Convert images to CSS art. Just upload and get CSS art with just one click.
- Gradient Text - Dual color gradient for your texts.
- Gradient Border - Get dual color gradient with desired radius.
- Gradient Background - Make your backgrounds stand out by applying gradient colors.
- Animations
- Select one of the below options
Skew
Fade
Spin
- Set duration and speed for the animations
- And boom
- Box Shadow - Cast a shadow on your element.
- Border Radius - Get desired border radius for your element.
- Text Shadow - Create a cool shadow for your text.
- Input Range - Style your range input type elements easily and quickly
### ⚒️ Languages / Tools
HTML
CSS
TypeScript
## 🧑🏾💻 Demo
Check out the website: [Code Magic](https://Code-Magic.vercel.app/)
## 👇🏽 Prerequisites
Before installation, please make sure you have already installed the following tools:
- [Git](https://git-scm.com/downloads)
- [NodeJs](https://nodejs.org/en/download/)
## 👌🏾 What you have to do to contribute
- [Read the rules](https://github.com/Dun-sin/Code-Magic/blob/main/CONTRIBUTING.md#rules)
- [Follow the installation Steps](#%EF%B8%8F-installation-steps)
- [Follow the contributing Steps](#-after-making-a-change)
## 🛠️ Installation Steps
1. [Fork](https://github.com/Dun-sin/Code-Magic/fork) the project. Click on the 
icon in the top right to get started
2. Clone the project, you can use the following command:
```bash
git clone https://github.com//Code-Magic
```
3. Navigate to the project directory
```bash
cd Code-Magic
```
4. Install dependencies with npm install
```bash
npm install
```
```bash
npm install -g commitizen
```
5. Run the project
```bash
npm run dev
```
## 🥂 After making a change
1. Create a new branch
```bash
git checkout -b YourBranchName
```
2. Add it to staging area
> NOTE: don't commit the package.json
```bash
git add
```
3. Commit your changes with
```bash
git cz
```
4. Push your changes
```bash
git push
```
## 👨👩👦 Community
Don't forget to join the discord community - [Join us](https://discord.com/invite/ufcysW9q23)
## 👩🏽💻 Contributing
- Contributions make the open source community such an amazing place to learn, inspire, and create.
- Any contributions you make are greatly appreciated.
- Check out our [contribution guidelines](/CONTRIBUTING.md) for more information.
## 🛡️ License
Code-Magic is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 💪🏽 Thanks to all Contributors
Thanks a lot for spending your time helping Code-Magic grow. Thanks a lot! Keep rocking🍻
[](https://github.com/Dun-sin/Code-Magic/graphs/contributors)
## 🙏🏽 Support
This project needs a star️ from you. Don't forget to leave a star✨