Vue Pixel Art

Vue Pixel Art is an easy way to draw your Pixel Arts and get the CSS code generated from it.

This project is refactored from CSS Collection - DotGen

Credits: @bc_rikko

Instructions

• Click on a square to paint. If it is already painted, that square will be transparent again.
• Hold mouse down and drag your mouse everywhere in the grid to paint.
• The button "Paint/Erase activated" only works when you use mouse down and drag.
• Size can't be greater than 100.

Usage

Recommended resolution: >= 925 x 768.

Go to https://vue-pixel-art.now.sh and have fun!

Development

This project follow the Puzzle Pattern guidelines and uses Standard Code Style.

Fork the project and enter this commands in your terminal:

git clone https://github.com/YOUR_GITHUB_USERNAME/vue-pixel-art.git
cd vue-pixel-art
npm install
npm run serve

The default port is 8080.

TODO

• Add Unit tests with Jest.
• Add Redo/Undo.
• Add E2E tests with Cypress.
• Add mouse drag and paint.
• Add Vuejs pixel logo on README and favicon.ico.
• Deploy.

License

MIT © guastallaigor