Hi all, I’m currently mid-way in the process of theming OpenEMR with current design trends.
This involved editing several files, the vast majority of work consisted of adding CSS classes directly to elements in .php files, writing stylesheets and cleaning up Tables (although rarely)
I thought it would be best to establish a few ground rules, and stick to them. They are:
Try to maintain the original white-space and element sizing.
De-clutter the UI where possible (reduce visual weight)
Support a range of screen resolutions (although true responsive design is faraway)
Not to modify the functionality or the logic
Not to delete/modify the original page includes
Keep any Code-File changes to the bare minimum
Preserve original line numbering to the maximum extent
Avoid loading resources from external domains (CSS,JS,Images,etc)
Though the current version is slightly reliant on Bootstrap, I aim to reproduce the necessary styles in the main CSS file, thereby eliminating the need for bootstrap.css
Avoid JS overlays (explained further below)
I have included a few screenshots and my thoughts in the next posts, please have a look
Coming from a Drupal background, I felt OpenEMR theming to be pleasantly straightforward. Its much easier to get into the gut of the code. Here are a few thoughts i gathered while working on it:
Avoid JS Overlays - they are too reliant on client side JS and sometimes may not pop. If the bottom frame is visible, most Overlays need to be scrolled. They eliminate several multitasking possibilities. Browser windows have PC OS support (Alt + Tab). Horrible mobile support.
Too many tds with inline styling, Too many tables, But there is hope
The old themes are by all means broken here, there’s no going back.
Im thinking of implementing IE7-JS for IE compatibility, what are you thoughts?
‘Cascade’ is hardly used in current themes. Current themes are copies that need to be maintained separately. If you can abstract a basic theme with features and then add only colors, font and text sizes in the user selectable css, it will make maintenance easier.
For a rapidly evolving requirements landscape, the developers here are (rightfully) focused on functionality. So it is best to borrow themes from other package/products that offer ongoing maintenance / development of the theme components. From that perspective jquery ui seems to be a good starting point. Great thing about it is themeroller which lets users select many of the css properties so users can have the application look to their liking/needs. From the application perspective this means if tags used in the current application are mapped to jquery names, current code will be instantly updated without touching the php files.
IE7 is just a small part but the themes should enable the css3 features that eliminates complex code like million tables and screens with tons of blank spaces that users spend time scrolling down…
Finally, from the eternal wish list -
Replace Hide Menu as well as Top and Bottom Frame display toggles with floating arrows like all modern applications. So a left arrow attached to top right of left frame will hide menu and show right arrow. Same with down arrow attached to top of bottom frame will close bottom frame (same as unchecking ‘bottom’) and show a upward arrow…
I like the fact that you are trying to work within the current framework, trying not to eliminate features.
Robert Downs, who has made several posts on these forums in regards to his project, is also working on the interface, also basing much of it on Twitter Bootstrap.
Rather than duplicating labor, you should try to collaborate.
Also, talk to him about #9. I suggested this to him, and he did not appear very receptive to it.
I am hesitant to use more frameworks, chiefly because of performance issues and their reliance on JS. A typical PC used in medical facilities is 3 years old, not top of the line (atleast in india) and are often saddled with several background programs. You just cant expect them have the muscle to handle heavy JS, also when they degrade it comes at the cost of functionality.
@MD-Support I find that the inbuilt themes lack proper element ‘Hooks’ to execute a design like this, hence i had to get my hands dirty with php, But as i said I majorly added only CSS identifiers to the code.
@david i still am around midway through it, waiting to get started with some deployment testing
