Most of Value Payment System’s products have been built on the popular Bootstrap framework. Over the years, I have customized each Bootstrap UI element and wanted to take it a step forward. I proposed that we migrate off of Bootstrap and replace it with my own custom built css framework.
UI designer and Web developer
- Update the look and feel of every UI element that could be of use to both internal and external products
- Make a main framework page where each UI element could be ‘copy and paste’ ready with one click
- Since this was not a project involving a specific revenue producing product, I would have to juggle this in my spare time between projects
- Creating a framework requires a lot of time consuming coding and debugging
- Ensuring that each new UI element worked for our specific needs and would work on all browsers and devices
The first step was choosing a main style for the updated UI. I chose to lean into material design using icon visual aids inside form inputs which would feature simple but elegant micro animations when clicked. I used the Materialize.css framework as a springboard for most UI elements. If an element from Materialize.css was beneficial, I would start with the Materialize.css code and customize it to fit the esthetic I was striving for. I also added a useful feature to my new framework where a sidenav would offer a list of clickable options to put the html code for each UI element on a user’s clipboard. Having each UI element’s code available with a simple ‘copy and paste’, new pages could now be easily and quickly created for future projects.
This new framework was just completed and is now being rolled out in all of VPS’s future projects. With the new ‘copy and paste’ feature, the dev team can now create a quick mock-up of pages without always needing me to code front-end elements, saving time for both the back and front-ends.