Check out the project on GitHub
A couple of years ago while attending the FrontEnd Conference in Zurich, I saw a presentation where a designer had used JavaScript to auto-generate page-layouts to automate his design process. The presentation had me wondering whether it would be possible to apply the same idea to product design, so I built this library to create 'realistic' drawings and sketches using only standard Bootsrap classes, along with a few new ones that are outlined below.
It allows the designer to be far more precise in terms of color-pallets, adherance to corporate design standards and principles, etc. It also makes testing out new design variations far less time-intensive, as you can simply write a script to return all possible variants of a design, when controlling for select configurations.
The sketch above is simply a construction of a series of react components and Bootstrap 4 classes. In addition to the
default Bootstrap classes, I have added and extra three custom classes to create the following components. Those classes
are .index, .hand, and .burst. Additionally, some inline styles have also been
used to transform (rotate) and to add the occasional border.
In addition to making use of the default Bootstrap backgrounds, I have also created two extra ones (so far...).
This project has been a test of the web stack's capacity to serve as a platform for creating design mock-ups. My long term goal is to develop a React-based library for 3d design modeling. If you're at all intersted in helping me out with that project, feel free to shoot me a message through GitHub (linked below in footer).
Here are a few of the designs that I've come up with so far. I'm currently working on a script to auto-generate the entire array of possible configurations.