Official Style Guide for Influence Health

Welcome to the official style guide and style documentation for Influence Health. Built by the Influence Health UX team in Birmingham, this guide will show you how to properly mark up common elements and components and also provide documentation for use of our directive library.

If you have any questions or wish to add entries to this style guide, please contact Martin Castre at martin.castre@influencehealth.com.

This style guide is based of the Atomic Design style. Atomic design describes itself as modularizing every element of an app by breaking them down into its most basic components, then building themselves back up, piece by piece. These elements are broken up into:

Atoms

The most basic component. Can be elements such as fonts, buttons, colors, links, etc. In this app we will store the app's Atoms in the Globals subpage.

Molecules

An element that can be comprised of multiple Atoms. These elements should contain the exact same code used for the Atoms. This is the very nature of modular design. Consider this Editable form field:

Edit Phone + Add mobile phone 
<div class="row">
  <div class="col-md-4">
    <form>
      <fieldset>
        <div class="form-group">
          <a href="" role="button" class="icon-with-label with-key" ng-click="toggleEditField = true">
            <span class="icon-holder">
              <i class="round-icon_edit"></i>
              <span class="sr-only">Edit</span>
            </span>
            <span class="icon-label">
              <span class="label-key">Phone</span>
              <span class="link-inside-button" ng-if="toggleEditField !== true">+ Add mobile phone</span>
              <span class="sg-editable-field" ng-if="toggleEditField === true">
                <input type="tel" placeholder="Enter Mobile Phone">
              </span>
            </span>
          </a>
        </div>
      </fieldset>
    </form>
  </div>
</div> <!-- /.row -->

This Editable form field Molecule is comprised of several Atoms:

  1. Circle icon button
  2. Form label
  3. A hyperlink
  4. Text input field
Upon clicking the Edit circle icon or the Add mobile phone link, a text input field appears. Each Atom has its own appropriate styling and class names. This eliminates the need to create custom CSS for other parts of the app. You just drop in the group of Atoms and done.

Nota Bene Please be aware that many of these Components are pre-mixed and packaged Angular directives. This style guide will reference any Components that are directives. Make sure you check whether there are any directives that are already created to avoid duplication of code.

Organisms

Organisms are, you guessed it, comprised of a group of Molecules. There aren't many that we will be referencing here but some examples of Organisms would be: Header, Footer, Login, Wizard. For the sake of simplicity, we will combine the Molecules and Organisms into one category: Components

We will not be talking about Templates or Pages, as these elements vary between apps.