Basics

• Colors
• Badges
• Buttons
• Links
• Fonts
• Horizontal Rule

Colors

These are the colors used throughout the application. Each color is defined with its Hex value and its Sass variable. Please do not use any colors that are not defined here. Any lightening or darkening of a color should only be applied to greys and should never exceed 5%.

Fonts

Font-Family : Roboto, Helvetica, Arial, sans-serif

Roboto is a sans-serif typeface developed by Google released in January of 2012 and is the main typeface used in the app. This font was chosen for it's approachable, modern, and professional characteristics. Use 700 font weight for headings and labels and 400 font weight for non-heading text.

All non-heading text is 14px font size by default. On mobile, font size is increased to 16px for cleaner reading and legibility.

Roboto Bold

Grumpy wizards make toxic brew for the evil Queen and Jack. 0123456789

Roboto Regular

Grumpy wizards make toxic brew for the evil Queen and Jack. 0123456789

Roboto Italic

Grumpy wizards make toxic brew for the evil Queen and Jack. 0123456789

Use these variables for each of the font weights:

• $base-font-weight for 400 weight

• $large-font-weight for 700 weight

Buttons

We use 3 types of buttons: primary, default, and icon buttons. Our buttons, excluding icon buttons, follow Bootstrap's default styling and should not be customized outside of primary and default styling. On mobile, all buttons should be at least 2.5em (44px) wide or tall for a greater hit target.

Primary Button

<button type="button" role="button" class="btn btn-primary">Primary Action</button>

Primary Button Mobile

Mobile Primary

Default Button

<button type="button" role="button" class="btn btn-default">Secondary Action</button>

Default Button Mobile

Mobile Secondary

Circle Icon Button

Rules of Development

• Any circle icons without labels must use a tooltip.
• For use of circle icons with a label, click here.

<button type="button" role="button" class="no-btn" tooltip="Edit" tooltip-placement="top edit">
  <span class="icon-holder">
    <i class="round-icon_edit"></i>
    <span class="sr-only">Edit Icon Button</span>
  </span>
</button>

Note that the .no-btn class is used for the circle icon. Because this is a button type, most browser automatically style these buttons a certain way. Add the .no-btn class to remove unwanted styling.

Button States

Hover, Active, & Focus States

Active State

Disabled State

Disabled

Use angular's built in directive ng-disabled as an attribute for all buttons that need to be disabled. Do not apply disabled classes.

Accessibility Note all buttons need to include a role="button" and type="button"

Semantic Note Use button for any actions that do not take you to a separate page in the app. Anchor tags, a, represent hyperlinks which is an action that takes you away from the current page.

Links

Links as defined as hyperlinks, and it's function is to take the user a new page. Uses the $sg_bold_blue color to define a hyperlink. On hover, a text underline appears so there is more emphasis on state change if users are unable to differentiate the shift from dark blue to light blue.

<a href="">This is a hyperlink</a>

Disabled Links

<a href="" class="disabled-link">Disabled hyperlink</a>

Horizontal Rule

Horizontal rules, or hr, is a thematic break between paragraph elements or sections. While the <hr> element is not defined frequently in the app, we use the same CSS properties to define list item separators. If you need to use a border or divider line, always use the color $sg_light_grey_border. And border-width should not exceed 1px.

<section class="row">
 <div class="col-md-6">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores hic provident, ipsum dicta perferendis possimus labore illum quidem enim quibusdam harum perspiciatis, tenetur et, aliquam.</p>
   <hr>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores hic provident, ipsum dicta perferendis possimus labore illum quidem enim quibusdam harum perspiciatis, tenetur et, aliquam.</p>
 </div>
</section>

Badges

Badges are UI components that draw the user's attention to a specific piece of content. Usually indicates a counter or that action needs to be taken. Badge color should always be red, $sg_alert_primary.

<a href="" class="no-btn">
  <span class="icon-label">Notifications</span>
  <span class="badge badge-alert">4</span>
</a>

Typography

• Lists
• Headings
• Required Fields
• Paragraphs

Headings

Use the appropriate header h1 through h6 based on HTML hirearchy. NOT based on the default size it outputs. Use the classes defined below to change the size and styling.

<h1 class="page-header">Page Header</h1>
<h2 class="page-subheader">Page Subheader</h2>
<p class="paragraph-header">paragraph header</p>

iui-page-header directive Use the directive iui-page-header for page headings. This will also include the iui-breadcrumb directive.
You can find the directive documentation here.

Paragraphs

<p>A standard paragraph.</p>

Required Fields

All forms that have required fields should use this text. The class of .required-field is appended to the <label> to add the * to the right of the label.

Use this ng-include for the "Indicates required field" text.

<div ng-include="'/templates/required-text.html'"></div>

Lists

Unordered Lists

Unordered lists, ul, are a collection of items that are not numbered and order is not important. By default, ul, are bulleted. For an un-bulleted list, use the Bootstrap class .list-unstyled on the parent ul.

If you are using a collection of links as a list, please use the proper accessibility role requirements for list items:

<ul role="menu">
  <li role="presentation"><a href="" role="menuitem">List Item 1</a></li>
  <li role="presentation"><a href="" role="menuitem">List Item 2</a></li>
  <li role="presentation"><a href="" role="menuitem">List Item 3</a></li>
</ul>

Ordered Lists

Ordered lists, ol, are a collection of items that are numbered.

If you are using a collection of links as a list, please use the proper accessibility role requirements for list items:

<ol role="menu">
  <li role="presentation"><a href="" role="menuitem">List Item 1</a></li>
  <li role="presentation"><a href="" role="menuitem">List Item 2</a></li>
  <li role="presentation"><a href="" role="menuitem">List Item 3</a></li>
</ol>

You can also use our customized ordered list numbers using the .number class on the parent ol.

<ol class="number" role="menu">
  <li role="presentation"><a href="" role="menuitem">List Item 1</a></li>
  <li role="presentation"><a href="" role="menuitem">List Item 2</a></li>
  <li role="presentation"><a href="" role="menuitem">List Item 3</a></li>
</ol>

Definition Lists

Definition lists, or Descriptive lists, are used to list out terms and description pairs. dls contain dt, (which stands for definition term), and dd (which is the description of the term). Like unordered lists, you cannot insert non-dl elements in the dl, or between the dt and dd.

Definition lists come in 2 styles: horizontal and vertical. Most of the dls in the app use the .dl-horizontal class to align the terms and descriptions horizontally. On mobile, it defaults to stacked style. Bootstrap right-aligns the dt by default when using the .dl-horizontal class. This is not an optimal UX experience, therefore always add the class .dt-as-left-aligned to the dl parent

You can also define the size of the dl in 3 ways: .short-list, .medium-list, .large-list. Each class defines a certain width and spacing of dt,dd elements. By default, use the .medium-list class.

<dl class="dl-horizontal dt-as-left-aligned medium-list">
  <dt>Patient Name</dt>
  <dd>Edward Stone</dd>
  <dt>Task Name</dt>
  <dd>Connect with New Patient Approval Request</dd>
  <dt>Request Id</dt>
  <dd>PMEM1ACEQE</dd>
</dl>

Forms

• General Form Rules
• Text Input Fields
• Input States
• Labels
• Radio Buttons
• Checkboxes
• Select Boxes

General Form Rules

We use Bootstrap's basic form styles to style forms.

All form inputs, selects and textareas must have:

• unique id attribute
• corresponding <label>

All buttons must have a unique id

When in doubt, follow as closely as possible to the Bootstrap Form Defaults

Text Input Fields

<div class="row">
  <div class="col-md-4">
    <form role="form" class="form">
      <div class="form-group">
        <label for="CHANGE-ME" class="control-label">Name</label>
        <input type="text" placeholder="Placeholder Text disappears when typing starts" class="form-control" id="CHANGE-ME">
        <p class="help-block">Help Text should describe the type of input desired</p>
      </div>
      <div class="form-group">
        <label for="CHANGE-ME2" class="control-label">Email</label>
        <input type="email" placeholder="Enter email" id="CHANGE-ME2" class="form-control">
      </div>
      <div class="form-group">
       <label for="CHANGE-ME3" class="control-label">Phone</label>
       <input class="form-control" type="phone" id="CHANGE-ME3"
        pattern="(\d-)?(\d{3}-){1,2}\d{4}"
        title="Minimum of 7 digits"
        placeholder="x-xxx-xxx-xxxx">
       <p class="help-block">Minimum of 7 digits</p>
      </div>
      <div class="form-group">
       <label for="textarea-example" class="control-label">Enter Message</label>
       <textarea id="textarea_example" name="textarea_example" class="form-control" maxlength="200" field="compose.body" rows="4" ng-model="compose.body"></textarea>
       <p class="help-block">Remaining characters : {{200 - compose.body.length}}</p>
      </div>
    </form>
  </div>
</div>

Input States

Angular includes validation styles for error, warning, and success states on form controls. To use, add the ng-required="true" to the input element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

Labels

Every label should include a for="" which matches the id of the input. Use the label class .label-soft for cases where the font weight needs to be normal instead of bolded.

Top Aligned Labels

When the label sits on top of the input field.

Advantages:

• great for limited horizontal space
• tends to reduce form completion times
• mobile phones

Disadvantages:

• increased vertical space

Rules of Development:

• .form-group class should wrap each form element & label
• .control-label class should be applied to the label
• .form-control class should be on all inputs except radio buttons and checkboxes
• Optional <p class="help-block"> is for help text. This should follow under the <input> if desired
• For optimal mobile experience, use HTML5 input types when applicable. This includes: <input type="email">, <input type="number">, <input type="email">, <input type="search"> and <input type="tel">
• .multi-button-bar class should be used to contain the buttons used at the end of the form which will cause the buttons to be properly float: right

Right Aligned Labels

When the label is to the left of the input field.

Advantages:

• great for limited vertical space
• this version can switch to a top-aligned layout at small screen widths which is ideal for mobile

Disadvantages:

• increased horizontal space
• labels are sometimes too long for available space

Rules of Development:

• .form-horizontal class should be applied to wrapping <form> tags
• .form-group class should wrap each form element & label; this class acts like a .row when wrapped with the .form-horizontal class
• .control-label class should be applied to the label
• Bootstrap grid classes should be applied to the <label> (or <legend> if using a <fieldset>) and the <div> that holds the input field(s)
• Use offset columns to space checkboxes & radio buttons to be inline with the other fields
• For most cases .col-sm- column widths are ideal for spacing labels and fields
• By default use .col-sm-2 for the <label> and .col-sm-10 for the <div> holding the <input>
• .form-control class should be on all inputs except radio buttons and checkboxes
• Optional <p class="help-block"> is for help text. This should follow under the <input> if desired
• For optimal mobile experience, use HTML5 input types when applicable. This includes: <input type="email">, <input type="number">, <input type="email">, <input type="search"> and <input type="tel">
• .multi-button-bar class should be used to contain the buttons used at the end of the form which will cause the buttons to be properly float: right

Right Aligned Labels Form

<form role="form" class="form-horizontal">
  <div class="form-wrapper with-2-columns">
    <div class="form-group">
      <label for="CHANGE-ME" class="control-label col-sm-2">Name</label>
      <div class="col-sm-10">
        <input type="text" placeholder="Placeholder Text disappears when typing starts" class="form-control" id="CHANGE-ME">
        <p class="help-block">Help Text should describe the type of input desired</p>
      </div>
    </div>
    <div class="form-group">
      <label for="CHANGE-ME2" class="control-label col-sm-2 required-field">Email</label>
      <div class="col-sm-10">
        <input type="email" placeholder="Enter email" id="CHANGE-ME2" required>
      </div>
    </div>
    <div class="multi-button-bar">
      <button class="btn btn-primary" type="submit" id="CHANGE-ME6">Submit</button>
    </div>
  </div>
</form>

Radio Buttons

Rules of Development

• all radio buttons should be wrapped with a <fieldset>
• all fieldsets should have a <legend> that is the first child element
• use the .visually-hidden class to hide the legend when it is not visually necessary

On mobile, radio button size is increased for greater hit target.

<form class="form" role="form">
  <fieldset class="form-group">
    <legend class="control-label">Select the best vertical Radio Button</label>
    <div class="custom-radio">
      <input type="radio" name="optionsRadios" id="radiosSuccess1" value="option1" checked>
      <label for="radiosSuccess1" class="label-soft">Option one is this and that&mdash;be sure to include why it's great</label>
    </div>
    <div class="custom-radio">
      <input type="radio" name="optionsRadios" id="radiosSuccess2" value="option2">
      <label for="radiosSuccess2" class="label-soft">Option two can be something else and selecting it will deselect option one</label>
    </div>
  </fieldset>
</form>

Checkboxes

Use the .custom-checkbox class on the input element to use the custom styling for checkboxes. Input element must come before the label. On mobile, checkbox size is increased for greater hit target.

In the cases of multiple checkboxes, the list style should adapt to a more mobile-friendly approach. Use the .checkbox-bar-touch class on the parent ul and .checkbox-bar-label for the label. View this section on mobile or adjust your browser window to view the mobile checkbox list in action.

<form class="form" role="form" class="hidden-xs">
  <fieldset>
    <div class="form-group">
      <input id="pharmacy_checkbox_setAsPrimary" class="custom-checkbox" type="checkbox">
      <label for="pharmacy_checkbox_setAsPrimary">Set this as Primary Pharmacy</label>
    </div>
  </fieldset>
</form>
<div class="visible-xs">
  <ul class="checkbox-bar-touch">
    <li>
      <input type="checkbox" id="preferredmonday" class="custom-checkbox">
      <label for="preferredmonday" class="checkbox-bar-label" ng-class="{date-disabled: functionToDisableDay()}">Monday <span class="small">Morning</span></label>
    </li>
    <li>
      <input type="checkbox" id="preferredtues" class="custom-checkbox">
      <label for="preferredtues" class="checkbox-bar-label" ng-class="{date-disabled: functionToDisableDay()}">Tuesday <span class="small">Afternoon</span></label>
    </li>
  </ul>
</div>

Select Boxes

<div class="row">
  <div class="col-md-4">
    <form role="form" class="form">
      <div class="form-group">
        <label class="control-label" for="style_guideselect1">Select one</label>
        <select class="form-control" name="style_guideselect1" id="style_guideselect1">
          <option value="">Select A</option>
          <option value="">Select B</option>
          <option value="">Select C</option>
        </select>
      </div>
      <div class="form-group">
        <label class="control-label" for="style_guideselect2">List (single selection)</label>
        <select class="form-control" name="" id="style_guideselect2" size="5">
          <option value="">Item 1</option>
          <option value="">Item 2</option>
          <option value="">Item 3</option>
          <option value="">Item 4</option>
          <option value="">Item 5</option>
          <option value="">Item 6</option>
          <option value="">Item 7</option>
          <option value="">Item 8</option>
          <option value="">Item 9</option>
          <option value="">Item 10</option>
        </select>
      </div>
      <div class="form-group">
        <label class="control-label" for="style_guideselect3">List (multiple selections)</label>
        <select class="form-control" name="" id="style_guideselect3" size="5" multiple>
          <option value="">Item 1</option>
          <option value="">Item 2</option>
          <option value="">Item 3</option>
          <option value="">Item 4</option>
          <option value="">Item 5</option>
          <option value="">Item 6</option>
          <option value="">Item 7</option>
          <option value="">Item 8</option>
          <option value="">Item 9</option>
          <option value="">Item 10</option>
        </select>
      </div>
    </form>
  </div>
</div>

Images

• Iconography

Iconography

There are 2 types of icons used in the app: Circle and Flat. If there is no supporting label, icon must use a tooltip and .sr-only descriptive text.

Circle icon

<button type="button" role="button" class="no-btn" tooltip="Edit" tooltip-placement="top edit">
  <span class="icon-holder">
    <i class="round-icon_edit"></i>
    <span class="sr-only">Edit Icon Button</span>
  </span>
</button>

Flat icon

<a href="" class="icon-with-label">
    <span class="icon-holder">
        <span class="sg-quick-links_messages"></span>
    </span>
    <span class="icon-label">Messages</span>
</a>