Custom Framework

Goals

• Update the look and feel of every UI element that could be of use to both internal and external products
• Reduce the number of unnecessary server requests for html, css, and JavaScript code which would speed up page load time
• Make a main framework page where each UI element could be ‘copy and paste’ ready with one click

TOOLS

Brackets (Coding)

CHALLENGES

• 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

SOLUTION

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.

RESULTS

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.