The big Bootstrap front-end cleanup
Written by Tom Offringa on 26th July 2016
In the last months, we’ve spent time on cleaning up the front-end of our telephony platform VoIPGRID. The project (we call it a milestone) initially existed of ditching Bootstrap because of the old Bootstrap version (V2) and related legacy code. This legacy code especially led to some issues in updating dependent libraries like date pickers, data tables, CSS-related work et cetera. As everybody knows you will eventually run into trouble while maintaining legacy code.
frontend/js/app/forms/. This makes it very easy to find the relevant file when working on a specific part of the platform.
Babel and Browserify
Another nifty tool we started using is Browserify. Browserify allowed us to split the front-end code into several modules, greatly improving the readability of the code. Also, instead of checking in vendor-specific files into our project, we were now able to install third-party dependencies directly from NPM. This makes upgrading third-party packages a lot easier.
From LESS to SASS
New form layouts
After spending some time cleaning up, I decided to rearrange the forms layout too. From now on all field labels are positioned above the field, instead of left (while floating right…). This improvement makes the forms less chaotic, resulting in a more clear and readable form. I – unfortunately – extremely underestimated the amount of work that came from redoing the forms but the result is awesome.
The before and after of a filter box. A little more spacing between labels to improve readability.
The before and after for the personal options form. Labels positioned differently and some general styling.
Before this milestone, the VoIPGRID forms and fields were build up with the Django Bootstrap-toolkit package (field|as_bootstrap). This package produced a lot of unnecessary HTML which could be rewritten in a better fashion.
Rewriting CSS and HTML
After redoing the forms I started cleaning up the Bootstrap core CSS. We wanted to completely ditch Bootstrap, but at this point, the platform itself relies too much on some core elements (the grid, tables, etc). I decided to leave it as is. This milestone cleared the way for a design upgrade, so as we are most likely going to redo a lot of elements because of the future new design we might as well rewrite the HTML at that time as well.
Paving the way for the future
The next step is to completely rewrite the core elements as well, to eventually ditch Bootstrap completely, or at least be up-to-date with the latest stable version. This will enable us to develop even faster and make our platform even more user-friendly.