Mirebalais Style Guide

Color Palette

Main colors

  • Text
    #003F5E

  • Hightlights
    #501D3D

Background Colors

  • Body
    #EEE

  • Content
    #F9F9F9

Message Colors

  • Alert
    #EB6E1F

  • Error
    #C41230

  • Success
    #A1D030

  • Other colors

  • Links
    #007FFF

  • Focus
    #FFFDF7

Typography

  • Open Sans, the default body font.
  • Arial, the alternate body font.

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

Show all

Buttons

Links

Links with arrows


Buttons

@include button($tcolor, $bcolor, $font)($tcolor = top color, $bcolor = bottom color, $font = font color)

Buttons default to this style when no argument for colors have been given:

Example of buttons with arguments defined:
@include button(#A1D030, #88AF28, white);


Example of disabled buttons:

Forms

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.:

  1. Always group a <label> and its <input> inside a <p/> tag;
  2. Always link the <label> name to its <input> id;
  3. Add class "left" for each <p/> tag if side-by-side inputs are needed (as example below);
  4. <legend> tag is only necessary if a fieldset title is needed;

A form example:

Login

  • An Option
  • An Option
  • An Option
  • An Option
  • An Option
  • An Option
  • An Option
  • An Option
  • An Option

More form elements

  • An Option
  • An Option
  • An Option
  • An Option
  • An Option
  • An Option
  • An Option
  • An Option
  • An Option


Lists

Unordered List

Ordered List

  1. List item 1
  2. List item 1
  3. List item 1
  4. List item 1
  5. List item 1

Tables

Table HeaderTable HeaderTable HeaderTable Header
Table DataTable DataTable DataTable Data
Table DataTable DataTable DataTable Data
Table DataTable DataTable DataTable Data

Usage Examples

Login form

Login

  • An Option
  • An Option
  • An Option
  • An Option
  • An Option
  • An Option
  • An Option
  • An Option
  • An Option

Confirmation Messages

Request Paper Record

Please confirm:

  • Patient
    Paul, Petter
  • Location
    ER

Action Messages

Send Paper Record

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

  • Patient
    Paul, Petter
  • Location

Notification Messages

The selected record(s) have been assigned

The selected record(s) have been assigned

The selected record(s) have been assigned

Send to:EmergencyDossier id:a166009

Other Usage Examples