UI Modernization

This page tracks the improvements to the user interface / user experience. Owned by Robert Down.

CSS Framework

The new user interface uses Bootstrap 3. Currently we include the bootstrap CSS as a whole and allow themes to override as needed in a separate stylesheet.

Standardize Button Syntax

Throughout the code buttons are displayed in different ways. Sometimes they are displayed as an <a> tag, other times it is a <button> tag, but most often it is a <input type="button"> tag. We are actively standardizing all of this to <button> (Unless good reason for a <a> to be used). This essentially requires manually changing every instance of <input type="button"> to <button type="button|submit" class="btn btn-default|primary">Text of button</button>

Some helper classes have been created:

.btn-save	Prepends a checkmark to text
.btn-cancel	Prepends x (times symbol) to text
.btn-add	Prepends + (plus symbol) to text
.btn-search	Prepends search symbol to text
.btn-delete	Prepends tash can to text
.btn-duplicate	Prepends copy symbol to text

Example of available helper icons:

Add any of those classes to an element with .btn to add icon support