Hi all! In my last post someone asked if there is a website that just generates a skeleton screen for you. I couldn't find one and this seemed to me like an awesome project to build! So I build one.
Check it out:
➡️ https://sanderdebr.github.io/skeleton-generator ⬅️
I decided to build a drawing tool that generates the CSS code for you, as well as an image of your skeleton (using html2canvas). I've used vanilla JS for this project to improve my JS skills. For the CSS I've used tailwind.
Functionalities:
- Adding and removing blocks or circles
- Changing the color of the elements
- Changing the grid size
- Dragging and resizing elements
- Resizing the whole canvas
- Generating an example HTML/CSS page with your skeleton
I started out with using the HTML5 canvas element, but I found out it is way easier to handle regular div nodes than to use the canvas for e.g. dragging and resizing multiple elements.
Things I would like to add:
- Shiny gradient effect
- Saving your skeleton in localStorage (object that holds all current elements is already there)
- Smoother dragging and resizing
- No loss of elements when changing the grid size
Pleas be aware that this app is a prototype and there are bugs in it, I've also did not use any bundler (for fast development reasons) so the code does not work in older browsers or Edge currently.
I hope this if of use to someone. Please let me know any feedback so we can make this tool better 😄
Repository can be found here.
Top comments (0)