NDR Style Guide - Documentation

Colors

This is the NDR color palette. showing the different colours variations.

The colors in summary are as follows

Fonts

The default NDR font family is Lato. and the font family css designation is "Lato", Poppins, sans-serif; 
        h1 {
            font-family: 'Lato', sans-serif;
            font-weight: 400;
        }

and if you decide to import the fonts, this is the font-face imports statement. 

    @font-face {
            font-family: "Lato";
            src: url('698242188-Lato-Bla.eot');
            src: url('698242188-Lato-Bla.eot?#iefix') format('embedded-opentype'),
            url('698242188-Lato-Bla.svg#Lato Black') format('svg'),
            url('698242188-Lato-Bla.woff') format('woff'),
            url('698242188-Lato-Bla.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
    }

Icons

The Iconset used for the NDR application is the FlatICONS iconset. which can be found at flaticons.com

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.

    • 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
    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

    A Comprehensive list of all icons can be found on this page 

        <i class="fa fa-pencil" aria-hidden="true"></i>  <strong>Edit</strong>
    <i class="fa fa-plus" aria-hidden="true"></i>  <strong>Add</strong>
    <i class="fa fa-trash-o" aria-hidden="true"></i>  <strong>Delete / Remove</strong>
    <i class="fa fa-sign-in" aria-hidden="true"></i>  <strong>Admission</strong>
    <i class="fa fa-sign-out" aria-hidden="true"></i>  <strong>Transfer</strong>
    <i class="fa fa-stethoscope" aria-hidden="true"></i> <strong>Exit / Discharge</strong>  <strong>Clinical encounter with provider</strong>

    Navigation

    Every page should have breadcrumbs to indicate where the user is located and the parent / child relationship pointing to the current page.

    Example
    • >
    • Parent Page
    • >
    • Child Page
     
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
</div>
</nav>

    Buttons

    The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering). When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

    Button examples as used withing the NDR Application
        Go to Recapture Analytics
    The sample code below reflects this 
        <button type="reset" id="loadData" class="btn btn-primary" >Load Data </button>  
    <button type="reset" id="clearData" class="btn btn-secondary" >Clear </button>
    <a class="btn btn-primary " href="/analytics/biometricrecaptureanalytics"> link buttons </a>

    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.

    Buttons Groups

    Set of Button Components that is combined and used either as toolbars or grouped-buttons components with the aid of utility classes.

    Button Groups examples.... 


                <div class="btn-group mr-2" role="group" aria-label="First group" >
                <button type="button" class="btn btn-" >1 </button >
                <button type="button" class="btn btn-success" >2 </button >
                <button type="button" class="btn btn-info" >3 </button > 
            </div >

    Dialogs

    Set of Button Components that is combined and used either as toolbars or grouped-buttons components with the aid of utility classes.

    Dialog examples....
      Dialog Example

    Please confirm:

    • Patient
    • ER
      Success Dialog


    your text goes here, and your success information is rendered in this section.

    Notifications

    NDR uses toast-style Notifications that provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity

    Notification Examples 

        <div class="w-500">
        <div class="alert alert-success" role="alert">
            <i class="fa fa-exclamation-triangle"></i> &nbsp; This is a primary noticication  
            </div>
            <div class="alert alert-danger" role="alert">
                <i class="fa fa-exclamation"></i> &nbsp; used to anchor error messages
            </div>
            <div class="alert alert-warning" role="alert">
                <i class="fa fa-exclamation-circle"></i> &nbsp; used to show warning messages
            </div>
        </div>
    </div>

    Toast Messages

    Toast messages are used to show instant messages to the user that disappears immediately after some seconds

    Notification Examples, Click to try


    Search Boxes and Filters

    Toast messages are used to show instant messages to the user that disappears immediately after some seconds

    Search

    Tabs

    Tabs utilize the jquery UI to render on the NDR platform

    Tabs content

    Forms

    Tabs utilize the jquery UI to render on the NDR platform

    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.

    Input is required

    Validation Long Forms

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

    First Name is required
    Surname is required
    Provider Type is required

    Input is required

    Form Elements

    Text Input element

    Text Input for only emails

    Password Inputs

    Numbers input

    input search element

    Text Input

    Date Picker Input

    select options input

    select options input

    Checkbox input    

    select options input    

    Tables

    Tables in the application are automatically styled with zebra-striping. Make sure you use and 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 heading 1 Table heading 2 Table heading 3 Table heading 4 Table heading 5
    Table Row 1 Table Row 1 Table Row 1 Table Row 1 Table Row 1
    Table Row 2 Table Row 2 Table Row 2 Table Row 2 Table Row 2
    Table Row 3 Table Row 3 Table Row 3 Table Row 3 Table Row 3
    Table Row 4 Table Row 4 Table Row 4 Table Row 4 Table Row 4
    Table Row 5 Table Row 5 Table Row 5 Table Row 5 Table Row 5
    Table Row 6 Table Row 6 Table Row 6 Table Row 6 Table Row 6