Pixel art animation and drawing web app powered by React
npm install pixel-art-react⚠️ Temporary Limited Interaction Notice ⚠️
(Please check Contributing)
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
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
You can also import it directly submitting this code.
Technical overview
This application has been built with the following technologies:
- React: Library to build the UI.
- Redux: Implements a Flux like architecture.
- ImmutableJS Helps to keep the data immutable aiming to avoid side effects.
- PostCSS Handle the app CSS.
Installation
npm install
Development
npm run development
Deploy
Create the production build.
npm run deploy
Lint
There are several libraries used in the project that help us to keep our codebase healthy:
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:
npm run lint
npm run csslint
npm run format
Testing
We are using Jest as the testing platform.
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 Copyright © 2016 Javier Valencia Romero (@jvalen)