Unifying the UI/UX

OpenEMR Development
1

Porting over a Github Issue for discussion over here. Originally posted by Cliff Su

Describe the problem

In the current project, OpenEMR has a lot of different layouts, some pages contain outdated syntax, some pages didn’t use the Bootstrap and some pages have a strange layout.
I think we should planing a styling guideline about OpenEMR, it will be easy for us to refine the pages.

Reference link: #3145 (comment)

Describe the solution you’d like

  • Design the tab’s title alignment and padding margin.
    image
  • Tab’s content using a container or container-fluid.
    image
  • Tab’s function button position
    image
  • Button color style and icon
    image

Here are some styling guidelines that should apply for future CSS work:

  • Do not use <table> elements unless you are using them to print out data or displaying data. These should be replaced with the BS4 grid classes.
  • Unless the table is gonna be printed out on a printer, the <table> element must be surrounded with a BS4 <div class="table-responsive"> as shown here.
  • Whatever you do, do not use the <center> element for any centering of content unless there is no other alternative that CSS can offer.
  • Due to us transitioning away from inline/internal stylesheets, please refrain from using the style attribute on any element or adding the <style> element in the html header. Please add your CSS to the external SCSS found in /interface/themes .
  • OpenEMR originally had made the font bold by using the bold class. Since BS4 now has the font-weight-bold class, please replace any instances of this class that you find with the BS4 class.
  • Due to the W3C wanting people to transition to CSS more and more, please do not use (and please delete if you seem) the <b> , <strong> , <i> , <em> , <mark> , <small> , <del> , <ins> , <sub> , or <sup> elements and use the BS4 classes as much as possible unless no other way to format it is found.
  • When specifying padding/margins, please use the BS4 padding and margins classes specified here.
  • When setting the width/height of elements, please try to use the BS4 width/height classes specified here.
  • If you want to change the display attribute of an element, try using the BS4 display classes specified here.
  • Please use the BS4 colors that are listed if you plan on using colors: primary, secondary, success, info, warning, danger, light, dark, blue, indigo, purple, pink, red, orange, yellow, teal, cyan, white, gray, gray-dark, black, gray100, gray200, gray300, gray400, gray500, gray600, gray700, gray800, gray900 . These colors are changed on each theme which can be found in /interface/themes/oe-styles .

These are just a few things but there can be more

2

I really like this idea, it is something I worked on when we went to BS3 but we never really made it a unified UI/UX. I think getting to a modern CSS framework was a big step, moving to BS4 was the next big step and now we are finally in a place where we can really fine tune the UI/UX features.

I like the rules listed above, I think we could definitely reject any code that tried to introduce a new <table> where it shouldn’t be.

In addition to the above I think we should think about if it is worth moving away from SCSS and towards a more pure CSS. CSS supports variables and while it’s not as syntactically pleasant, it can definitely be done. I guess really that will come down to understanding how our themes interact with the base BS4. Bringing me to the thought that as long as we are using a framework that uses SCSS we are probably stuck using SCSS as well because all variables should be defined in one file using a common syntax. Ideally, a theme should be very little more than just a variables file with the appropriate overrides.

I agree with keeping icons in buttons.

Couple of other thoughts. There is a generally a fine line between maximum freedom and a loose framework of sensible “rules” to keep things sane. I think this is really important in the UI/UX area. For instance, we should agree that buttons should go in a consistent place. Currently a theme can override this which breaks UX. Lastly, there is a not often used module called Bootstrap Sidebar sitting in the library that we should be using more. It supports RTL and I think would go a long way toward some unification.

Since we’re on the topic, anybody wanting to rework the main navigation into a proper BS4 nav would win a ton of points because the current implementation is a mess.

Example of the sidebar (Not sure where those box-shadows came from, they shouldn’t be there

image
image1743×965 39.6 KB

2 Likes
3

I am so glad to hear you like my proposal ideas, It is really a big plan, Hope I can start a little bit in this summer.

4

We/I just reworked menu to BS4 navbar and patient data area to responsive flexbox so, where’s the mess?