Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jvalen/pixel-art-react
Pixel art animation and drawing web app powered by React
https://github.com/jvalen/pixel-art-react
animation css draw javascript pixel-art react redux
Last synced: 3 days ago
JSON representation
Pixel art animation and drawing web app powered by React
- Host: GitHub
- URL: https://github.com/jvalen/pixel-art-react
- Owner: jvalen
- License: mit
- Created: 2015-12-09T07:07:53.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2024-01-29T23:24:02.000Z (12 months ago)
- Last Synced: 2025-01-01T23:06:15.470Z (10 days ago)
- Topics: animation, css, draw, javascript, pixel-art, react, redux
- Language: JavaScript
- Homepage: https://www.pixelartcss.com/
- Size: 3.59 MB
- Stars: 5,468
- Watchers: 71
- Forks: 307
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome - jvalen/pixel-art-react - Pixel art animation and drawing web app powered by React (JavaScript)
- awesome - pixel-art-react - Pixel art animation and drawing web app powered by React (JavaScript)
README
Pixel Art to CSS
Animate pixel art and get CSS
## Did you know that you can create pixel art using CSS?
**Pixel Art to CSS** is an online editor that helps you with that task.
Combining the power of both **box-shadow** and **keyframes** CSS properties, you will get CSS code ready to use in your site.
Furthermore, you can download your work in different formats such as a static image, animated GIF or sprite like image.
:pencil2: [Try it out](https://www.pixelartcss.com/)
**Pixel Art to CSS** aims to be an intuitive tool by its simplicity, however it is equipped with a wide range of features: customize your color palette, go back and forth in time, modify animation settings, save or load your projects, among others.
## Example
By default, you will find the following project within the LOAD section:
See it live at [pixelartcss](https://www.pixelartcss.com/)
You can also import it directly submitting [this](examples/import-export/cat.txt) code.
## Technical overview
This application has been built with the following technologies:
- [React](https://facebook.github.io/react/): Library to build the UI.
- [Redux](http://redux.js.org/): Implements a Flux like architecture.
- [ImmutableJS](https://facebook.github.io/immutable-js/) Helps to keep the data immutable aiming to avoid side effects.
- [PostCSS](https://github.com/postcss/postcss) Handle the app CSS.
## Installation
```bash
npm install
```
## Development
```bash
npm run development
```
## Deploy
Create the production build.
```bash
npm run deploy
```
## Lint
There are several libraries used in the project that help us to keep our codebase healthy:
- [ESlint](https://eslint.org/)
- [Stylelint](https://stylelint.io/)
- [Prettier](https://prettier.io/)
Every time we commit something it will execute the linters and format the staged files if needed.
If you want to check them individually you could execute the following scripts:
```bash
npm run lint
npm run csslint
npm run format
```
## Testing
We are using [Jest](https://jestjs.io/) as the testing platform.
```bash
npm run test
```
## Contributing
⚠️ Please Note: This repository is currently in a temporary idle state due to a refactor and tech upgrade. I am not accepting new Pull Requests or Issues at the moment. Sorry for the inconveniences.
~~#### Help me to improve it :seedling:~~
~~Create a GitHub issue if there is something wrong or to be improved.~~
~~Pull requests are also welcome, please take the following requirements as a checklist before opening one:~~
~~- [x] The PR does fix a problem or adds a new feature, not just cosmetic or syntactic sugar changes.~~
~~- [x] It would be great to open an issue in advance.~~
~~- [x] The PR should be issued to the **develop** branch.~~
~~- [x] The PR should have a explanation or be related to an issue.~~
~~Thank you!~~
## License
[MIT](https://opensource.org/licenses/mit-license.php)
Copyright © 2016 Javier Valencia Romero (@jvalen)