Colors

This is OpenMRS color palette. You can alter the following variables to add you own palette.

OpenMRS Colors

#F26522
#5B57A6"
#EEA616
#009384
#231F20


                        
                            
                                $highlight: #30984
                            
                            
                                $text: #30984

Fonts

The default OpenMRS font family is Open Sans. You can change your application fonts by altering the following variables.

Deleting a variable may cause the application to crash.


                        
                            
                                $primaryFont:
                                "OpenSans";
                            
                            
                                $primaryBoldFont:
                                "OpenSansBold";
                            
                            
                                $primaryLightFont:
                                "OpenSansLight";
                            
                            
                                $primaryItalicFont:
                                "OpenSansItalic";

Typography

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Title font weight

Body font weight

Small font weight

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

Emphasized text Emphasized text Emphasized text
Strong text Strong text Strong text Strong text
Small text Small text Small text Small text Small

Icons

Every icon in the OpenMRS Application comes from a font called Font Awesome.

Some advantages of using a font for the icons are:

Easily style icon color, size, shadow, and anything that's possible with CSS.
Scalable vector graphics means every icon looks awesome at any size.
A font file is smaller than images.

If you need more icons, you can create your own font-family and add it in the variables. A good option for creating an icon font is IconMoon.

Show all


                        
                            
                                // Below is the variable for the icon font
                            
                            
                                // It is located in reference/_variable.scss.
                            
                            
                                $iconFont:
                                "FontAwesome";
                            
                            
                            
                                // This is how you insert an icon:
                            
                            
                                <a class="button" href="#">
                            
                            
                                     <i class="icon-home"></i>
                            
                        
                            
                                     Button with a home icon
                            
                            
                                </a>

Here are the icons that you should use for specific purposes, for consistency across the reference application

Usage	Icon
Edit Modifying an existing piece of data	icon-pencil
Add Add a new piece of data (e.g. to a list)	icon-plus
Delete / Remove Delete an item or remove it from a list	icon-remove
Admission Patient is admitted to inpatient care	icon-signin
Transfer Patient is transferred between two locations in the facility	icon-random
Exit / Discharge Patient is discharged from inpatient care (may be okay to use for exits for reasons other than discharge)	icon-signout
Vital Signs Referring to or capturing a patient's vital signs	icon-vitals
Clinical encounter with provider Referring to or capturing encounters where providers record clinical data about the patient (e.g. writing visit notes, or consultation notes)	icon-stethoscope

How to override variables in your project

In order to override variables you need to add the file customVariables.scss to your project.

The first thing you need to do is import the variables.scss file from RAP sass framework. After that you can start overwriting the variables you want.

customVariables.scss


                        
                            
                                @import
                                "variables";
                            
                            
                            
                                //override variables
                            
                            
                                $text:
                                #003F5E;
                            
                            
                                $highlight:
                                #501D3D;

The next thing to do is to import customVariables.scss to your sass and after that import the RAP sass framework.

yourProject.scss


                        
                            
                                @import
                                "customVariables";
                            
                            
                                @import
                                "reference";

Navigation

Every page should have breadcrumbs to indicate where the user is located and the steps he/she did to get there.

Arsand, Natalia
Visits

20 May 2013 (active since 04:10 PM) No diagnosis yet.
15 May 2013 - 15 May 2013 No diagnosis yet.
25 Feb 2013 - 25 Feb 2013 No diagnosis yet.

Buttons

There are 4 ways to get a button style in the OpenMRS Application:

By a class;
By a submit input;
By a button input;
By a button tag.


                        
                            
                                // By a class:
                            
                            
                                <a class="button" href="#">
                            
                            
                                   This is a button
                            
                            
                                </a>
                            
                            
                            
                                // By a submit input:
                            
                            
                                <input
                                type="submit" value="Submit Button" />
                            
                            
                            
                                // By a button input:
                            
                            
                                <input
                                type="button" value="Input Button" />
                            
                            
                            
                                // By a button tag:
                            
                            
                                <button>
                            
                            
                                   This is a button
                            
                            
                                </button>

Customized buttons

Customized buttons are additional classes you can use to indicate types of buttons in the interface:

For actions: .confirm, .cancel
For icon sizes: .big, .medium
- This will affect the icon size, not the button itself, but should be applied to the button level.
.disabled
- Use it when a button in in an inactive mode, for example if the user needs to fill in an input to proceed.
.app
- To create the apps buttons, all sized the same. Must come together with the .big class.
.task
- For task buttons such as "Record Vitals". Usually used in the Patient Dashboard.
.arrow
- For action buttons that needs a sense of direction. Usually used in the Archives room.

Button Groups

Button groups can achieve the same purpose as radio buttons or checkboxes, but they are often user-friendlier in interfaces intended to be managed by touch or mouse (but not keyboard).

The visual effect comes from marking one button with the "active" class. The actual behavior requires JavaScript, and works with AngularJS and ui-bootstrap.


                        
                            
                                <div class="button-group">
                            
                            
                                   <label class="button" ng-model="propertyToSet" btn-radio="valueToSetItTo"> Display </label>
                            
                            
                                   <label class="button" ng-model="propertyToSet" btn-radio="anotherValueToSetItTo"> Another </label>
                            
                            
                                </div>

One Two Three

Dialogs

Please confirm:

Patient
Paul, Petter
ER

Confirm Cancel

This paper record isn't in the queue. If you want to proceed please select a location:

Patient
Paul, Petter

Confirm Cancel

Notifications

Nom d'utilisateur ou mot de passe incorrect!

Toast Messages

Jquery Toastmessage

The selected record(s) have been assigned

The selected record(s) haven't been assigned

Send to: Emergency Dossier id: A166009

Tabs

Jquery UI

Tab1
Tab2

Tabs content

Forms

Guidelines

Use top-aligned labels for input fields.
Use (required) after a label for required fields if the majority of the fields are optional.
Use (optional) after a label for optional fields if the majority of the fields are required.
If all your fields are either mandatory or optional, don't mark any.
Length of input fields should communicate the intended content.
Fields don't need to all be the same length. Mix long and short field length according to the content it is used for.

Validation

Use double visual emphasys for errors - Example: error message + red background in input.
Use descriptive error messages bellow the input fields.
if form is too long provide a summary of the errors on the top of the form.

Validation Short Forms

For short form validation use double visual emphasis on the input.

Validation Long Forms

For long form validation use double visual emphasis on the input and also provide a summary error message on the top.

Code

Everything inside tag <form> is auto styled to follow this styleguide rules.
The html structure is basically this: <form> <fieldset> <legend> <i class="icon-class-if-needed"></i> Fieldset title if needed </legend> <p class="input-position-class"> <label name="input-id">Input label</label> <input id="input-id"/> </p> </fieldset> </form>
Obs.:

Always group a <label> and its <input> inside a <p/> tag;

Always link the <label> name to its <input> id;

Add class "left" for each <p/> tag if side-by-side inputs are needed;

<legend> tag is only necessary if a fieldset title is needed;

Form Elements

An Option
An Option
An Option
An Option
An Option
An Option
An Option
An Option
An Option

Date Picker Date Time Picker

A Checkbox

A Checked Checkbox

A Checked Radio

A Radio

Form Entry UI

Vitals
- Height
- Weight
- (Calculated) BMI
- Temperature
- Heart Rate
- Respiratory Rate
- Blood Pressure
- O2 Sat
Confirm

Height

Tables

Tables in the application are automatically styled with zebra-striping. Make sure you use <thead> and <tbody> sections around your rows.

If each of a table rows have multiple possible actions associated with them, use an "Actions" column with icons for those actions. You should describe the action with a tooltip via the title attribute, rather than repeating words in every row of the table.

Table Header	Table Header	Table Header	Table Header
Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data

Status Container

Vizit aktiv Te kòmanse nan 06 May 2013 05:35 PM

Date Format Guidelines

There is two kinds of data formats for two different scenarios. One is specific for viewing date information and the other one is for editing a date on an input.

Viewing date

6 May 2013 05:35 PM

Editing date

06-05-2013 17:35