UI Modernization

From OpenEMR Project Wiki
Revision as of 22:38, 9 May 2017 by Robert Down (talk | contribs) (Created page with "This page tracks the improvements to the user interface / user experience. Owned by Robert Down. == CSS Framework == The new user interface uses [http://getbootstrap.com Bootstr...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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


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