Welcome to the DrDoctor Design System for Patient-facing apps

Quick start

Insert the following into your head tag:

            
              <link rel="stylesheet" href="https://assets.drdoctor.co.uk/v0.2/main.css" />

(Optional) Most trusts do not need a custom theme. If needed, insert it after the above. Examples (choose only ONE!)

            
<link rel="stylesheet" href="https://assets.drdoctor.co.uk/themes/drdoctor.css" />
<link rel="stylesheet" href="https://assets.drdoctor.co.uk/themes/auh.css" />
<link rel="stylesheet" href="https://assets.drdoctor.co.uk/themes/brook.css" />
<link rel="stylesheet" href="https://assets.drdoctor.co.uk/themes/fhft.css" />
<link rel="stylesheet" href="https://assets.drdoctor.co.uk/themes/gstt.css" />
<link rel="stylesheet" href="https://assets.drdoctor.co.uk/themes/nuh.css" />
<link rel="stylesheet" href="https://assets.drdoctor.co.uk/themes/ydh.css" />

Sit back and enjoy! TBC!

IE11 support [soon to be deprecated]

Add the following to the head of your HTML:

            
              <script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>

Need to load the NHS design system instead?

If your page is loading from within the NHS App, then you should not load the above assets.

Instead, add the following to the head of your HTML:

            
              <link rel="stylesheet" href="https://assets.drdoctor.co.uk/nhsuk/nhsuk-6.1.2.min.css" />

The above code snippet shows latest version as of writing. If you are using an earlier version, you should look to upgrade at your earliest.

There is also JavaScript that comes with the CSS, but we have not needed it - yet. If you need it you can include the following snippet in the head of your HTML:

            
              <script src="https://assets.drdoctor.co.uk/nhsuk/nhsuk-6.1.2.min.js" defer></script>

Visit the NHS Design System docs to learn more about how to use their styles and components. And to get started with their JavaScript, read their installation page on github for usage examples.

Font awesome support (optional)

Font awesome is currently assumed to be loaded as follows:

            
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/v4-shims.css">

Learn

Read the docs - find out out the DrDoctor design system, browse examples and more.