Style Guides

Kleenheat Online Style Guide

These guidelines are organized as simple recommendations prefixed with the terms DO, CONSIDER, AVOID, and DO NOT.

1. Structuce

1.1 Page structure

All pages on Kleenheat websites use the following structure:

  1. An optional application bar (“appbar”);
  2. A header;
  3. A main content area; and
  4. A footer.
<html>
  <head>
  </head>
  <body>
    <div class="page">
      <header role="banner"></header>
      <main role="main"></main>
      <footer role="contentinfo"></footer>
    </div>
    <div id="appbar"></div>
  </body>
</html>

Note that the appbar is located after the page content, because it is not related to the content of the page.

1.2 Header structure

The header will typically comprise a page “masthead”, which in turn comprises the Kleenheat brand and the site’s navigation:

<header role="banner">
  <div class="masthead">
    <div class="branding"></div>
    <nav role="navigation"></nav>
  </div>
</header>

1.3 Main content structure

The main content will typically comprise one or more “regions”, where each region will stretch across the full width of the page:

<main role="main">
  <div class="jumbotron region"></div>
  <div class="content region"></div>
  <div class="advertising region"></div>
</main>

1.4. Grid

The Kleenheat website uses Bootstrap’s 12-column grid.

col-1

col-11

col-2

col-10

col-3

col-9

col-4

col-8

col-5

col-7

col-6

col-6

col-12

(Also refer to the old grid example page).

2. Scripts

2.1 Script hierarchy

A page on a Kleenheat website may use any of the following Kleenheat script files:

  • Mermaid.js (required) The Mermaid script abstracts the layout of Kleenheat web pages. It is implemented as a global singleton, which means it can be accessed with Mermaid, and exposes the following methods:
    • Mermaid.$window() returns the window object as a jQuery object.
    • Mermaid.$body() returns the <body> object as a jQuery object.
    • Mermaid.$banner() returns the top-of-page banner as a jQuery object.
    • Mermaid.$main() returns the <main> element as a jQuery object.
    • Mermaid.$content() returns the main content element as a jQuery object.
    Mermaid also collects all initialization functions so that any lazy-loaded HTML can be initialized.
  • Global.js (required) The global script is used on every page of every Kleenheat website, and comprises:
    • Polyfill functions
    • Initialization functions which might apply to any page, such as handling a window scroll.
  • Aqa.js The Aquaman (aqa) script is used on every page of the Customer Service Interface (CSI) application and the My Account (Mya) application.
  • Mya.js The My Account (mya) script is used on every page of the My Account application, and comprises any code which is not provided by Global.js or Aqa.js.
  • Csi.js The Customer Service Interface (csi) script is used on every page of the CSI application, and comprises any code which is not provided by Global.js or Aqa.js.
  • {Microsite}.js Any microsite may use its own code which is not provided by Global.js. Microsites should not presume the use of any scripts other than Global.js.

3. Styles

3.1 Script hierarchy

A page on a Kleenheat website may use any of the following Kleenheat style sheets:

  • Global.css (required) The global stylesheet is used on every page of every Kleenheat website, and comprises:
    • Reset rules
    • Bootstrap grid
    • Font definitions
    • Modal styling
    • Form styling
    • Card styling
  • Aqa.css The Aquaman (aqa) style sheet is used on every page of the Customer Service Interface (CSI) application and the My Account (Mya) application.
  • Mya.css The My Account (mya) style sheet used on every page of the My Account application, and comprises any code which is not provided by Global.css or Aqa.css, such as:
    • Banner and masthead styling
    • Navigation styling
  • Csi.css The Customer Service Interface (csi) style sheet is used on every page of the CSI application, and comprises any code which is not provided by Global.css or Aqa.css, such as:
    • CSI Appbar styling
  • {Microsite}.css Any microsite may use its own styles which are not provided by Global.css. Microsites should not presume the use of any styles other than Global.css.