These multi-brand, responsive page templates will help you quickly get your project started. They contain a robust implementation of the basic page furniture: the grid, headers, footers etc. Choose a template to suit your needs. We hope to add more variations in the near future.

Form Pods

1.0.0

Includes a heading, content area, footer and controls. Form Pods are designed to work inside a Template. When building a form each page should include one Form Pod containing form components.

Demo

What’s new since v1.0.0-alpha

This version changed: HTML, CSS/LESS, but not: JS
  • Added new .form-pod-panel-inner-padded modifier option to provide additional padding per breakpoint as appropriate
  • Added new .form-pod-actions-reverse modifier option to reverse the actions bar item order if required
  • Added new .form-pod-header-center-xs-only modifier option to centre the header in XS only
  • Added new .form-pod-header-icon option
  • Added styling to position alert boxes above Form Pods (.form-pod-alert); used for the ‘Error summary’ pattern
<div class="form-pod">
	<!-- Heading -->
  <div class="form-pod-header">
    <p class="form-pod-preheading [hidden-md] [hidden-lg]">{PREHEADING}</p>
    <h1 class="form-pod-heading">{HEADING}</h1>
  </div>

  <!-- Panel -->
  <div class="form-pod-panel">
  	<!-- Panel inner -->
    <div class="form-pod-panel-inner [form-pod-panel-inner-padded]">

      {FORM_CONTENT...}

    </div>

    <!-- Panel footer -->
    <div class="form-pod-panel-footer">
      <div class="form-pod-panel-footer-left">

        <!-- Contact block -->
        <ul class="form-pod-contact">
          <li class="form-pod-contact-item">
          	<div class="sr-only">Phone</div>
            <span class="form-pod-contact-icon icon icon-headset" aria-hidden="true" data-grunticon-embed></span>
            <a href="tel:1300888888" class="form-pod-contact-link">1300 888 888</a>
          </li>
          <li class="form-pod-contact-item">
            <span class="form-pod-contact-icon icon icon-live-chat" aria-hidden="true" data-grunticon-embed></span>
            <a href="tel:1300888888" class="form-pod-contact-link">LiveChat</a>
          </li>
        </ul>

      </div>
      <div class="form-pod-panel-footer-right">

				<!-- Indicator block -->
        <div class="form-pod-indicator">
          <span class="form-pod-indicator-text">Saving</span>
          <span class="form-pod-indicator-icon icon icon-refresh" aria-hidden="true" data-grunticon-embed></span>
        </div>

      </div>
    </div>
  </div>

  <!-- Actions -->
  <div class="form-pod-actions">
    <div class="form-pod-actions-primary">
      <button type="button" class="btn-back btn btn-primary btn-soft btn-large btn-block-xs-only js-btn-back">Back</button>
      <button type="button" class="btn-next btn btn-primary btn-large btn-block-xs-only js-btn-next">Next</button>
    </div>
    <div class="form-pod-actions-secondary">
      <a href="#" class="btn-cancel btn btn-faint btn-soft btn-large btn-block-xs-only top-margin2-xs no-top-margin-sm js-btn-cancel">Cancel</a>
    </div>
  </div>
</div>

CSS

Modifier classes:

  • form-pod-panel-inner-padded
  • section-fill

LESS

The main mixin is called: _form-pods(STG)

This is a Form Pod component with centered header, header icon and reversed action bar order.

Demo

What’s new since v1.0.0-alpha

This version changed: HTML, CSS/LESS, but not: JS
  • Added new .form-pod-panel-inner-padded modifier option to provide additional padding per breakpoint as appropriate
  • Added new .form-pod-actions-reverse modifier option to reverse the actions bar item order if required
  • Added new .form-pod-header-center-xs-only modifier option to centre the header in XS only
  • Added new .form-pod-header-icon option
  • Added styling to position alert boxes above Form Pods (.form-pod-alert); used for the ‘Error summary’ pattern
<div class="form-pod">
	<!-- Heading -->
  <div class="form-pod-header form-pod-header-center-xs-only">
    <p class="form-pod-preheading [hidden-md] [hidden-lg]">{PREHEADING}</p>
    <h1 class="form-pod-heading" tabindex="-1">{HEADING}</h1>
  </div>

  <!-- Panel -->
  <div class="form-pod-panel">
  	<!-- Panel inner -->
    <div class="form-pod-panel-inner [form-pod-panel-inner-padded]">

      {FORM_CONTENT...}

    </div>

    <!-- Panel footer -->
    <div class="form-pod-panel-footer">
      <div class="form-pod-panel-footer-left">

        <!-- Contact block -->
        <ul class="form-pod-contact">
          <li class="form-pod-contact-item">
          	<div class="sr-only">Phone</div>
            <span class="form-pod-contact-icon icon icon-headset" aria-hidden="true" data-grunticon-embed></span>
            <a href="tel:1300888888" class="form-pod-contact-link">1300 888 888</a>
          </li>
          <li class="form-pod-contact-item">
            <span class="form-pod-contact-icon icon icon-live-chat" aria-hidden="true" data-grunticon-embed></span>
            <a href="tel:1300888888" class="form-pod-contact-link">LiveChat</a>
          </li>
        </ul>

      </div>
      <div class="form-pod-panel-footer-right">

				<!-- Indicator block -->
        <div class="form-pod-indicator">
          <span class="form-pod-indicator-text">Saving</span>
          <span class="form-pod-indicator-icon icon icon-refresh" aria-hidden="true" data-grunticon-embed></span>
        </div>

      </div>
    </div>
  </div>

  <!-- Actions -->
  <div class="form-pod-actions form-pod-actions-reverse">
    <div class="form-pod-actions-secondary">
      <div class="form-pod-actions-text">[TEXT CAN GO HERE]</div>
    </div>
    <div class="form-pod-actions-primary">
      <a href="#" class="btn-back btn btn-primary btn-soft btn-large btn-block-xs-only">Find a branch</a>
      <a href="#" class="btn-next btn btn-primary btn-soft btn-large btn-block-xs-only">Internet banking</a>
    </div>
  </div>
</div>

CSS

Modifier classes:

  • form-pod-header-center-xs-only
  • form-pod-panel-inner-padded
  • form-pod-actions-reverse

LESS

The main mixin is called: _form-pods(STG)

Progress Ropes

1.0.0

A detailed visual indication of progress. Use to indicate how far along the user is in a journey. The Progress Ropes ingredient plays nicely with Template with sidebar.

Progress Ropes have two layout options — default and with step groupings (accordion mode). Accordion functionality includes elegant open/close animation and operate in single-open mode for larger viewports (MD and LG) to reduce the ‘double-scrollbar’ effect.

Demo

What’s new since v1.0.0-alpha

This version changed: CSS/LESS, HTML, JS
  • Removed programmatic focus setting on group body; focus remains on the group toggle
  • Removed aria-selected attribute; not required by the ARIA design pattern
  • Updated focus outline to use global styling; provided by _Text-Styling module
  • Removed styling for step links as buttons; simply use link `<a>` elements
  • Updated future step markup for better screen reader and keyboard user support; ideally ’disabled links’ (divs) until actived
  • Added a simple active step marker for high contast mode users
<!-- Progress Rope -->
<div class="progress-rope">
  <ol class="progress-rope-list">

  	<!-- Steps... -->
    <!-- 'Completed' step -->
    <li class="progress-rope-item is-inprogress is-complete">
      <a href="{STEP_URL}" class="progress-rope-step">{STEP_TEXT}</a>
    </li>
    <!-- 'In progress' step -->
    <li class="progress-rope-item is-inprogress is-active">
      <a href="{STEP_URL}" class="progress-rope-step">{STEP_TEXT}</a>
    </li>

    <!-- 'Inactive' step (Note: <div> element and `data-target` attribute) -->
    <li class="progress-rope-item">
      <div data-target="{STEP_URL}" class="progress-rope-step">{STEP_TEXT}</div>
    </li>
    <!-- etc -->

  </ol>

  <!-- (Optional) Review step -->
  <div class="progress-rope-item progress-rope-item-review">
    <a href="{REVIEW_STEP_URL}" class="progress-rope-step">{REVIEW_STEP_TEXT}</a>
    <!-- or <button type="button" class="progress-rope-step" id="{REVIEW_STEP_ID}">{REVIEW_STEP_TEXT}</button> -->
  </div>
</div>

<!-- Progress Rope with groupings (accordion) -->
<div class="progress-rope">
  <ol class="progress-rope-list progress-rope-list-accordion js-progress-rope-list-accordion">

  	<!-- Groups... -->
    <li class="progress-rope-list-accordion-group js-progress-rope-list-accordion-group is-inprogress [is-complete] is-open">
      <button data-collapsible="#{ACCORDION_BODY_ID}" class="progress-rope-list-accordion-toggle js-progress-rope-list-accordion-toggle">{ACCORDION_GROUP_TEXT}</button>
      <ol class="progress-rope-list-accordion-body js-progress-rope-list-accordion-body" id="{ACCORDION_BODY_ID}" aria-hidden="false|true">

      	<!-- Steps... -->
        <!-- 'Completed' step -->
        <li class="progress-rope-item is-inprogress is-complete">
          <a href="{STEP_URL}" class="progress-rope-step">{STEP_TEXT}</a>
        </li>
        <!-- 'In progress' step -->
        <li class="progress-rope-item is-inprogress is-active">
          <a href="{STEP_URL}" class="progress-rope-step">{STEP_TEXT}</a>
        </li>

        <!-- 'Inactive' step (Note: <div> element and `data-target` attribute) -->
        <li class="progress-rope-item">
          <div data-target="{STEP_URL}" class="progress-rope-step">{STEP_TEXT}</div>
        </li>
        <!-- etc -->

      </ol>
    </li>
    <li class="progress-rope-list-accordion-group js-progress-rope-list-accordion-group [is-inprogress] [is-complete] [is-open]">
      <!-- Group body (ref above)... -->
    </li>
    <!-- etc -->

  </ol>

  <!-- (Optional) Review step -->
  <div class="progress-rope-item progress-rope-item-review [is-inprogress] [is-complete] [is-active]">
    <div data-target="{REVIEW_STEP_URL}" class="progress-rope-step">{REVIEW_STEP_TEXT}</div>
  </div>
</div>

CSS

Progress rope item state classes:

  • is-inprogress
  • is-complete
  • is-active

Accordion group state classes:

  • is-inprogress
  • is-complete
  • is-open

LESS

The main mixin is called: _progress-ropes(STG)
This module comes with the usual init method and three public methods:
  • GUI.progressRopes.init(); after the page has been loaded.
  • GUI.progressRopes.render(); for dynamically added elements after page load.
  • GUI.progressRopes.close( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Wether or not to animate the height
    • @param Callback [function] Callback function executed after completion
  • GUI.progressRopes.open( target, _isAnimated, Callback )
    • @param target [string] Selector for target element to toggle is-open class
    • @param _isAnimated [boolean] Whether or not to animate the height
    • @param Callback [function] Callback function executed after completion

Templates

1.0.0

Basic template

This is a generic page template component; typically used for form pages, calculators etc.

The basic template includes a page wrapper element with edges to limit the page width on large monitors (for browser windows > 1920px), a fixed header with drop shadow during window scroll and a footer which sticks to the viewport edge as needed on short pages. For consistency and brand alignment please do not remove these features.

Note: Headers and Footers utilise CSS flex layout and will degrade to a simple but functional layout for older browsers (i.e. IE8&9).

Headers, Footers, Icons, Buttons, Logos, Accessibility Helpers and Responsive Toggles are independent ingredients (dependencies) so make sure you include them in your blend if necessary.

Demo
  <!DOCTYPE html>
  <!--[if lt IE 8]>
    <html class="template no-js lt-ie8 lt-ie9" lang="en">
  <![endif]-->
  <!--[if IE 8]>
    <html class="template no-js lt-ie9 ie8" lang="en">
  <![endif]-->
  <!--[if IE 9 ]>
    <html class="template no-js ie9" lang="en">
  <![endif]-->
  <!--[if !(IE)]><!-->
    <html class="template no-js" lang="en">
  <!--<![endif]-->

    <head>
      <meta charset="utf-8">
      <meta name=viewport content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <title>{TITLE_TEXT}</title>

      {OTHER_HEAD_CODE...}
    </head>

    <body class="js-body">
      <div class="wrapper">

        <!-- Header -->
        <header class="header header-basic header-fixed">
          <div class="header-inner">
            <a href="#content" class="sr-skiplink">Skip to main content</a>
            <div class="header-left">
              <a href="#" class="header-btn">
                <span class="icon icon-arrow-left" data-grunticon-embed></span>
              </a>
            </div>
            <a href="#" class="header-logo">
              <span class="logo logo-multibrand-small hidden-sm hidden-md hidden-lg" [data-grunticon-embed]></span>
              <span class="logo logo-multibrand-large hidden-xs" [data-grunticon-embed]></span>
            </a>
            <div class="header-right">
              <!-- Header contact: 'Call us' -->
              <a href="tel:{TELEPHONE_NUMBER_NO_SPACES}" class="header-contact">
                <span class="header-contact-icon icon icon-telephone" [data-grunticon-embed]></span>
                <div class="header-contact-details hidden-xs">
                  <div class="header-contact-text">Call us on</div>
                  <div class="header-contact-text header-contact-text-accent">{TELEPHONE_NUMBER}</div>
                </div>
              </a>
            </div>
          </div>
        </header>

        <!-- Main -->
        <main class="main main-padded">

          <div class="container-fluid">
            <div class="content">

              {CONTENT...}

            </div>
          </div>
        </main>

        <!-- Footer -->
        <footer class="footer footer-basic">
          <div class="footer-inner">
              <div class="row">
                <div class="col-sm-9">
                  <div class="footer-text">{FOOTER_TEXT}</div>
                </div>
                <div class="col-sm-3">
                  <a href="{URL}" class="footer-logo">
                    <span class="logo logo-multibrand-small-right" data-grunticon-embed></span>
                  </a>
                </div>
              </div>
            </div>
        </footer>

      </div>
    </body>
  </html>

CSS

Modifier classes:
  • header-fixed
  • header-logo-center-xs-only
  • main-padded
  • main-fit
  • content-panel

LESS

The main mixin is called: _templates(STG)
This module comes with the usual init method:
  • GUI.templates.init(); after the page has been loaded.
  • GUI.templates.render(); for dynamically added elements after page load.

Basic template with content panel

This example shows the basic template with the optional content panel.

Simply use the content-panel modifier class.

Demo
  <!DOCTYPE html>
  <!--[if lt IE 8]>
    <html class="template no-js lt-ie8 lt-ie9" lang="en">
  <![endif]-->
  <!--[if IE 8]>
    <html class="template no-js lt-ie9 ie8" lang="en">
  <![endif]-->
  <!--[if IE 9 ]>
    <html class="template no-js ie9" lang="en">
  <![endif]-->
  <!--[if !(IE)]><!-->
    <html class="template no-js" lang="en">
  <!--<![endif]-->

    <head>
      <meta charset="utf-8">
      <meta name=viewport content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <title>{TITLE_TEXT}</title>

      {OTHER_HEAD_CODE...}
    </head>

    <body class="js-body">
      <div class="wrapper">

        <!-- Header -->
        <header class="header header-basic header-fixed">
          <div class="header-inner">
            <div class="header-left">
            <a href="#" class="header-logo">
              <span class="logo logo-multibrand-small hidden-sm hidden-md hidden-lg" [data-grunticon-embed]></span>
              <span class="logo logo-multibrand-large hidden-xs" [data-grunticon-embed]></span>
            </a>
            <div class="header-right">
              <!-- Header contact: 'Call us' -->
              <a href="tel:{TELEPHONE_NUMBER_NO_SPACES}" class="header-contact">
                <span class="header-contact-icon icon icon-telephone" [data-grunticon-embed]></span>
                <div class="header-contact-details hidden-xs">
                  <div class="header-contact-text">Call us on</div>
                  <div class="header-contact-text header-contact-text-accent">{TELEPHONE_NUMBER}</div>
                </div>
              </a>
            </div>
          </div>
        </header>

        <!-- Main -->
        <main class="main main-padded main-fit">

          <div class="container-fluid">
            <div class="content content-panel">

              {CONTENT...}

            </div>
          </div>
        </main>

        <!-- Footer -->
        <footer class="footer footer-basic">
          <div class="footer-inner">
              <div class="row">
                <div class="col-sm-9">
                  <div class="footer-text">{FOOTER_TEXT}</div>
                </div>
                <div class="col-sm-3">
                  <a href="{URL}" class="footer-logo">
                    <span class="logo logo-multibrand-small-right" data-grunticon-embed></span>
                  </a>
                </div>
              </div>
            </div>
        </footer>

      </div>
    </body>
  </html>

CSS

Modifier classes:
  • header-fixed
  • header-logo-center-xs-only
  • main-padded
  • main-fit
  • content-panel

LESS

The main mixin is called: _templates(STG)
This module comes with the usual init method:
  • GUI.templates.init(); after the page has been loaded.
  • GUI.templates.render(); for dynamically added elements after page load.
1.0.1

Basic template

This is a generic page template component; typically used for form pages, calculators etc.

The basic template includes a page wrapper element with edges to limit the page width on large monitors (for browser windows > 1920px), a fixed header with drop shadow during window scroll and a footer which sticks to the viewport edge as needed on short pages. For consistency and brand alignment please do not remove these features.

Note: Headers and Footers utilise CSS flex layout and will degrade to a simple but functional layout for older browsers (i.e. IE8&9).

Headers, Footers, Icons, Buttons, Logos, Accessibility Helpers and Responsive Toggles are independent ingredients (dependencies) so make sure you include them in your blend if necessary.

Demo

What’s new since v1.0.0

This version changed: CSS/LESS, but not HTML JS
  • Removed .main-fit modifier styling; found to be unnecessary and easily misunderstood
  • Added .section block styling; similar to .main-padded modifier styling
  • Fixed undesirable .wrapper edge border effect; wrapper and header now utilise available width until 1920px. Borders appear from 1922px.
  • White content panel (.content-panel) border-radius and border removed and top/bottom padding increased
<!DOCTYPE html>
<!--[if lt IE 8]>
  <html class="template no-js lt-ie8 lt-ie9" lang="en">
<![endif]-->
<!--[if IE 8]>
  <html class="template no-js lt-ie9 ie8" lang="en">
<![endif]-->
<!--[if IE 9 ]>
  <html class="template no-js ie9" lang="en">
<![endif]-->
<!--[if !(IE)]><!-->
  <html class="template no-js" lang="en">
<!--<![endif]-->

  <head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>{TITLE_TEXT}</title>

    {OTHER_HEAD_CODE...}
  </head>

  <body class="js-body">
    <div class="wrapper">

      <!-- Header -->
      <header class="header header-basic header-fixed">
        <div class="header-inner">
          <a href="#content" class="sr-skiplink">Skip to main content</a>
          <div class="header-left">
            <a href="#" class="header-btn">
              <span class="icon icon-arrow-left" data-grunticon-embed></span>
            </a>
          </div>
          <a href="#" class="header-logo">
            <span class="logo logo-multibrand-small hidden-sm hidden-md hidden-lg" [data-grunticon-embed]></span>
            <span class="logo logo-multibrand-large hidden-xs" [data-grunticon-embed]></span>
          </a>
          <div class="header-right">
            <!-- Header contact: 'Call us' -->
            <a href="tel:{TELEPHONE_NUMBER_NO_SPACES}" class="header-contact">
              <span class="header-contact-icon icon icon-telephone" [data-grunticon-embed]></span>
              <div class="header-contact-details hidden-xs">
                <div class="header-contact-text">Call us on</div>
                <div class="header-contact-text header-contact-text-accent">{TELEPHONE_NUMBER}</div>
              </div>
            </a>
          </div>
        </div>
      </header>

      <!-- Main -->
      <main class="main main-padded">

        <div class="container-fluid">
          <div class="content">

            {CONTENT...}

          </div>
        </div>
      </main>

      <!-- Footer -->
      <footer class="footer footer-basic">
        <div class="footer-inner">
            <div class="row">
              <div class="col-sm-9">
                <div class="footer-text">{FOOTER_TEXT}</div>
              </div>
              <div class="col-sm-3">
                <a href="{URL}" class="footer-logo">
                  <span class="logo logo-multibrand-small-right" data-grunticon-embed></span>
                </a>
              </div>
            </div>
          </div>
      </footer>

    </div>
  </body>
</html>

CSS

Modifier classes:
  • header-fixed
  • header-logo-center-xs-only
  • main-padded
  • main-fit
  • content-panel

LESS

The main mixin is called: _templates(STG)
This module comes with the usual init method:
  • GUI.templates.init(); after the page has been loaded.
  • GUI.templates.render(); for dynamically added elements after page load.

Basic template with content panel

This example shows the basic template with the optional content panel.

Simply use the content-panel modifier class.

Demo

What’s new since v1.0.0

This version changed: CSS/LESS, but not HTML JS
  • Removed .main-fit modifier styling; found to be unnecessary and easily misunderstood
  • Added .section block styling; similar to .main-padded modifier styling
  • Fixed undesirable .wrapper edge border effect; wrapper and header now utilise available width until 1920px. Borders appear from 1922px.
  • White content panel (.content-panel) border-radius and border removed and top/bottom padding increased
  <!DOCTYPE html>
  <!--[if lt IE 8]>
    <html class="template no-js lt-ie8 lt-ie9" lang="en">
  <![endif]-->
  <!--[if IE 8]>
    <html class="template no-js lt-ie9 ie8" lang="en">
  <![endif]-->
  <!--[if IE 9 ]>
    <html class="template no-js ie9" lang="en">
  <![endif]-->
  <!--[if !(IE)]><!-->
    <html class="template no-js" lang="en">
  <!--<![endif]-->

    <head>
      <meta charset="utf-8">
      <meta name=viewport content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <title>{TITLE_TEXT}</title>

      {OTHER_HEAD_CODE...}
    </head>

    <body class="js-body">
      <div class="wrapper">

        <!-- Header -->
        <header class="header header-basic header-fixed">
          <div class="header-inner">
            <div class="header-left">
            <a href="#" class="header-logo">
              <span class="logo logo-multibrand-small hidden-sm hidden-md hidden-lg" [data-grunticon-embed]></span>
              <span class="logo logo-multibrand-large hidden-xs" [data-grunticon-embed]></span>
            </a>
            <div class="header-right">
              <!-- Header contact: 'Call us' -->
              <a href="tel:{TELEPHONE_NUMBER_NO_SPACES}" class="header-contact">
                <span class="header-contact-icon icon icon-telephone" [data-grunticon-embed]></span>
                <div class="header-contact-details hidden-xs">
                  <div class="header-contact-text">Call us on</div>
                  <div class="header-contact-text header-contact-text-accent">{TELEPHONE_NUMBER}</div>
                </div>
              </a>
            </div>
          </div>
        </header>

        <!-- Main -->
        <main class="main main-padded main-fit">

          <div class="container-fluid">
            <div class="content content-panel">

              {CONTENT...}

            </div>
          </div>
        </main>

        <!-- Footer -->
        <footer class="footer footer-basic">
          <div class="footer-inner">
              <div class="row">
                <div class="col-sm-9">
                  <div class="footer-text">{FOOTER_TEXT}</div>
                </div>
                <div class="col-sm-3">
                  <a href="{URL}" class="footer-logo">
                    <span class="logo logo-multibrand-small-right" data-grunticon-embed></span>
                  </a>
                </div>
              </div>
            </div>
        </footer>

      </div>
    </body>
  </html>

CSS

Modifier classes:
  • header-fixed
  • header-logo-center-xs-only
  • main-padded
  • main-fit
  • content-panel

LESS

The main mixin is called: _templates(STG)
This module comes with the usual init method:
  • GUI.templates.init(); after the page has been loaded.
  • GUI.templates.render(); for dynamically added elements after page load.
2.0.0

Basic template

This is a generic page template component; typically used for web applications, forms and calculators etc.

Templates include a page wrapper element with edges to limit the page width on large monitors (for browser windows > 1920px), a fixed header with drop shadow during window scroll and a footer which sticks to the viewport edge as needed on short pages. For consistency and brand alignment please do not remove these features.

Templates play nicely with the Form Pods ingredient. Headers may be fixed per breakpoint via modifier classes and Footers have two divider options — default and fancy (currently WBC only). The footer content area is flexible and the grid may be used as shown in the example. Responsive styling for the security padlock icon is provided.

The template wrapper, built-in header and footer components utilise CSS flex layout and will degrade to a simple but functional layout for older browsers (i.e. IE8&9).

Icons, Buttons, Logos, Accessibility Helpers and Responsive Toggles are independent ingredients (dependencies) so make sure you include them in your blend if necessary.

Demo

What’s new since v2.0.0-alpha

This version changed: CSS/LESS, HTML, JS
  • Updated .header-inner, .sidebar-content and sidebar backdrop overlay z-index
  • Added styling to reposition sidebar .sr-skiplink
  • Updated JS functionality; only add sidebar aria-hidden attribute if necessary (when hidden in XS & SM)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML, JS
  • Fixed sticky footer functionality and fixed header center alignment in IE (#423)
  • Moved the .template class from <html> down to <body> element; our new sticky footer implementation no longer requires access to <html> (Note: This is in the only HTML update) (#423)
  • Templates now includes the Headers and Footers modules; which are now deprecated (#424)
  • Renamed .wrapper class... now .template-wrapper
  • Added sidebar styling
  • Increased vertical section padding for mobile
  • Removed .section alternating background fill; now available as an option via .section-fill modifier
  • Removed the content panel (.content-panel) block; now provided by the new Form Pods module
  • Adding new scroll locking utility styling

What’s new since v1.0.0

This version changed: CSS/LESS, but not HTML JS
  • Removed .main-fit modifier styling; found to be unnecessary and easily misunderstood
  • Added .section block styling; similar to .main-padded modifier styling
  • Fixed undesirable .wrapper edge border effect; wrapper and header now utilise available width until 1920px. Borders appear from 1922px.
  • White content panel (.content-panel) border-radius and border removed and top/bottom padding increased
  <!DOCTYPE html>
  <!--[if lt IE 8]>
    <html class="no-js lt-ie8 lt-ie9" lang="en">
  <![endif]-->
  <!--[if IE 8]>
    <html class="no-js lt-ie9 ie8" lang="en">
  <![endif]-->
  <!--[if IE 9 ]>
    <html class="no-js ie9" lang="en">
  <![endif]-->
  <!--[if !(IE)]><!-->
    <html class="no-js" lang="en">
  <!--<![endif]-->

    <head>
      <meta charset="utf-8">
      <meta name=viewport content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <title>{TITLE_TEXT}</title>

      {OTHER_HEAD_CODE...}
    </head>

    <body class="template template-sidebar-right js-body">
      <div class="template-wrapper">

        <!-- Header -->
        <header class="header header-basic header-fixed js-header">
          <div class="header-inner">
            <a href="#content" class="sr-skiplink">Skip to main content</a>
            <div class="header-left">
              <a href="#" class="header-btn">
                <span class="sr-only">Back to previous step</span>
                <span class="icon icon-arrow-left" aria-hidden="true" [data-grunticon-embed]></span>
              </a>
            </div>
            <a href="#" class="header-logo">
              <span class="sr-only">Go to home</span>
              <span class="logo logo-multibrand-small hidden-sm hidden-md hidden-lg" aria-hidden="true" data-grunticon-embed></span>
              <span class="logo logo-multibrand-large hidden-xs" aria-hidden="true" data-grunticon-embed></span>
            </a>
            <div class="header-right">
              <!-- Header contact: 'Call us' -->
              <a href="tel:{TELEPHONE_NUMBER_NO_SPACES}" class="header-contact">
                <span class="header-contact-icon icon icon-telephone" aria-hidden="true" [data-grunticon-embed]></span>
                <div class="header-contact-details hidden-xs">
                  <div class="header-contact-text">Call us on</div>
                  <div class="header-contact-text header-contact-text-accent">{TELEPHONE_NUMBER}</div>
                </div>
              </a>
            </div>
          </div>
        </header>

        <!-- Main -->
        <main class="main main-padded">
          <div class="container-fluid">

            {MAIN_CONTENT...}

          </div>
        </main>

        <!-- Footer -->
        <footer class="footer footer-basic">
          <div class="footer-inner">
              <div class="row">
                <div class="col-sm-9">
                  <span class="footer-icon icon icon-padlock icon-small icon-medium-sm" aria-hidden="true" [data-grunticon-embed]></span>
                  <div class="footer-text">
                    <p>{FOOTER_TEXT}</p>
                  </div>
                </div>
                <div class="col-sm-3">
                  <a href="{URL}" class="footer-logo">
                    <span class="sr-only">Go to home</span>
                    <span class="logo logo-multibrand-small-right" aria-hidden="true" [data-grunticon-embed]></span>
                  </a>
                </div>
              </div>
            </div>
        </footer>

      </div>
    </body>
  </html>

CSS

Template modifier classes:

  • template-basic
  • template-sidebar-right
  • main-padded
  • section-fill

Header modifier classes:

  • header-basic
  • header-fixed
  • header-fixed-xs-only
  • header-fixed-sm
  • header-fixed-md
  • header-fixed-lg
  • header-logo-center-xs-only

Footer modifier classes:

  • footer-basic
  • footer-divider-fancy

LESS

The main mixin is called: _templates(STG)

The sidebar header’s native position:sticky functionality (in XS and SM breakpoints) is polyfilled via Stickyfill for browser support.

This module comes with the usual init method and three public methods:

  • GUI.templates.init(); after the page has been loaded.
  • GUI.templates.sidebarRender(); for dynamically added sidebar component after page load.
  • GUI.templates.sidebarToggle( target );
    • @param target [string] Selector string to id the sidebar for opening or closing
  • GUI.templates.sidebarOpen( target );
    • @param target [string] Selector string to id the sidebar for opening only
  • GUI.templates.sidebarClose( target );
    • @param target [string] Selector string to id the sidebar for closing only

Template with sidebar

This is a page template component with sidebar panel and in addition to above, plays nicely with the Progress Ropes ingredient.

The sidebar panel moves ‘off-canvas’ for smaller viewports (XS and SM); made visible via a flexible toggle button within a sticky header bar. Long content inside the sidebar will scroll as needed.

Demo

What’s new since v2.0.0-alpha

This version changed: CSS/LESS, HTML, JS
  • Updated .header-inner, .sidebar-content and sidebar backdrop overlay z-index
  • Added styling to reposition sidebar .sr-skiplink
  • Updated JS functionality; only add sidebar aria-hidden attribute if necessary (when hidden in XS & SM)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML, JS
  • Fixed sticky footer functionality and fixed header center alignment in IE (#423)
  • Moved the .template class from <html> down to <body> element; our new sticky footer implementation no longer requires access to <html> (Note: This is in the only HTML update) (#423)
  • Templates now includes the Headers and Footers modules; which are now deprecated (#424)
  • Renamed .wrapper class... now .template-wrapper
  • Added sidebar styling
  • Increased vertical section padding for mobile
  • Removed .section alternating background fill; now available as an option via .section-fill modifier
  • Removed the content panel (.content-panel) block; now provided by the new Form Pods module
  • Adding new scroll locking utility styling

What’s new since v1.0.0

This version changed: CSS/LESS, but not HTML JS
  • Removed .main-fit modifier styling; found to be unnecessary and easily misunderstood
  • Added .section block styling; similar to .main-padded modifier styling
  • Fixed undesirable .wrapper edge border effect; wrapper and header now utilise available width until 1920px. Borders appear from 1922px.
  • White content panel (.content-panel) border-radius and border removed and top/bottom padding increased
  <!DOCTYPE html>
  <!--[if lt IE 8]>
    <html class="no-js lt-ie8 lt-ie9" lang="en">
  <![endif]-->
  <!--[if IE 8]>
    <html class="no-js lt-ie9 ie8" lang="en">
  <![endif]-->
  <!--[if IE 9 ]>
    <html class="no-js ie9" lang="en">
  <![endif]-->
  <!--[if !(IE)]><!-->
    <html class="no-js" lang="en">
  <!--<![endif]-->

    <head>
      <meta charset="utf-8">
      <meta name=viewport content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <title>{TITLE_TEXT}</title>

      {OTHER_HEAD_CODE...}
    </head>

    <body class="template template-sidebar-right js-body">
      <div class="template-wrapper">

        <!-- Header -->
        <header class="header header-basic header-fixed-md js-header">
          <div class="header-inner">
            <a href="#content" class="sr-skiplink">Skip to main content</a>
            <div class="header-left">
              <a href="#" class="header-btn">
                <span class="sr-only">Back to previous step</span>
                <span class="icon icon-arrow-left" aria-hidden="true" [data-grunticon-embed]></span>
              </a>
            </div>
            <a href="#" class="header-logo">
              <span class="sr-only">Go to home</span>
              <span class="logo logo-multibrand-small hidden-sm hidden-md hidden-lg" aria-hidden="true" data-grunticon-embed></span>
              <span class="logo logo-multibrand-large hidden-xs" aria-hidden="true" data-grunticon-embed></span>
            </a>
            <div class="header-right">
              <!-- Header contact: 'Call us' -->
              <a href="tel:{TELEPHONE_NUMBER_NO_SPACES}" class="header-contact">
                <span class="header-contact-icon icon icon-telephone" aria-hidden="true" [data-grunticon-embed]></span>
                <div class="header-contact-details hidden-xs">
                  <div class="header-contact-text">Call us on</div>
                  <div class="header-contact-text header-contact-text-accent">{TELEPHONE_NUMBER}</div>
                </div>
              </a>
            </div>
          </div>
        </header>

        <!-- Sidebar -->
        <div class="sidebar js-sidebar">
          <a class="sr-skiplink" href="#content">Skip to main content</a>

          <!-- Sidebar header (sticky) -->
          <div class="sidebar-header js-sidebar-header">
            <div class="sidebar-header-left">
              <h4 class="sidebar-heading">{SIDEBAR_HEADING}</h4>
            </div>
            <div class="sidebar-header-right">
              <button class="sidebar-header-btn btn btn-link btn-large btn-trim js-sidebar-toggle" data-toggle="#{SIDEBAR_ID}">
                <span class="btn-text">{SIDEBAR_TOGGLE_TEXT}</span><span class="btn-icon icon icon-more-vert" aria-hidden="true" [data-grunticon-embed]></span>
              </button>
            </div>
          </div>

          <!-- Sidebar content -->
          <div class="sidebar-content" id="{SIDEBAR_ID}">
            <div class="sidebar-content-header">
              <h4 class="sidebar-heading">{SIDEBAR_CONTENT_HEADING}</h4>
              <button class="sidebar-close-btn btn btn-link btn-large btn-trim js-sidebar-close" data-toggle="#{SIDEBAR_ID}">
                <span class="sr-only">Close</span>
                <span class="icon icon-close" aria-hidden="true" [data-grunticon-embed]></span>
              </button>
            </div>
            <div class="sidebar-content-inner js-sidebar-scroll">

              {SIDEBAR_CONTENT...}

            </div>
          </div>
        </div>

        <!-- Main -->
        <main class="main main-padded">

          {MAIN_CONTENT...}

        </main>

        <!-- Footer -->
        <footer class="footer footer-basic">
          <div class="footer-inner">
              <div class="row">
                <div class="col-sm-9">
                  <span class="footer-icon icon icon-padlock icon-small icon-medium-sm" aria-hidden="true" [data-grunticon-embed]></span>
                  <div class="footer-text">
                    <p>{FOOTER_TEXT}</p>
                  </div>
                </div>
                <div class="col-sm-3">
                  <a href="{URL}" class="footer-logo">
                    <span class="sr-only">Go to home</span>
                    <span class="logo logo-multibrand-small-right" aria-hidden="true" [data-grunticon-embed]></span>
                  </a>
                </div>
              </div>
            </div>
        </footer>

      </div>
    </body>
  </html>

CSS

Template modifier classes:

  • template-basic
  • template-sidebar-right
  • main-padded
  • section-fill

Header modifier classes:

  • header-basic
  • header-fixed
  • header-fixed-xs-only
  • header-fixed-sm
  • header-fixed-md
  • header-fixed-lg
  • header-logo-center-xs-only

Footer modifier classes:

  • footer-basic
  • footer-divider-fancy

LESS

The main mixin is called: _templates(STG)

The sidebar header’s native position:sticky functionality (in XS and SM breakpoints) is polyfilled via Stickyfill for browser support.

This module comes with the usual init method and three public methods:

  • GUI.templates.init(); after the page has been loaded.
  • GUI.templates.sidebarRender(); for dynamically added sidebar component after page load.
  • GUI.templates.sidebarToggle( target );
    • @param target [string] Selector string to id the sidebar for opening or closing
  • GUI.templates.sidebarOpen( target );
    • @param target [string] Selector string to id the sidebar for opening only
  • GUI.templates.sidebarClose( target );
    • @param target [string] Selector string to id the sidebar for closing only

Basic header

A simple global header panel component for form pages etc. Headers can house buttons of any size or type, logos, icons and use responsive toggle classes as necessary.

Note: Headers utilise CSS flex layout and will degrade to a simple but functional layout for older browsers (i.e. IE8&9).

Icons, Buttons, Logos, Accessibility Helpers and Responsive Toggles are independent ingredients (dependencies) so make sure you include them in your blend if necessary.

Demo

What’s new since v2.0.0-alpha

This version changed: CSS/LESS, HTML, JS
  • Updated .header-inner, .sidebar-content and sidebar backdrop overlay z-index
  • Added styling to reposition sidebar .sr-skiplink
  • Updated JS functionality; only add sidebar aria-hidden attribute if necessary (when hidden in XS & SM)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML, JS
  • Fixed sticky footer functionality and fixed header center alignment in IE (#423)
  • Moved the .template class from <html> down to <body> element; our new sticky footer implementation no longer requires access to <html> (Note: This is in the only HTML update) (#423)
  • Templates now includes the Headers and Footers modules; which are now deprecated (#424)
  • Renamed .wrapper class... now .template-wrapper
  • Added sidebar styling
  • Increased vertical section padding for mobile
  • Removed .section alternating background fill; now available as an option via .section-fill modifier
  • Removed the content panel (.content-panel) block; now provided by the new Form Pods module
  • Adding new scroll locking utility styling

What’s new since v1.0.0

This version changed: CSS/LESS, but not HTML JS
  • Removed .main-fit modifier styling; found to be unnecessary and easily misunderstood
  • Added .section block styling; similar to .main-padded modifier styling
  • Fixed undesirable .wrapper edge border effect; wrapper and header now utilise available width until 1920px. Borders appear from 1922px.
  • White content panel (.content-panel) border-radius and border removed and top/bottom padding increased
  <header class="header header-basic [header-fixed js-header]">
    <div class="header-inner">
      <a href="#content" class="sr-skiplink">Skip to main content</a>

      <!-- Left side buttons -->
      <div class="header-left">
        <!-- Header button (a special button style for headers) -->
        <a href="{URL}" class="header-btn">
          <span class="sr-only">{SCREEN_READER_ONLY_TEXT}</span>
          <span class="icon icon-{NAME} [icon-{SIZE}] [icon-{SIZE}-{BREAKPOINT}-[only]]" aria-hidden="true" [data-grunticon-embed]></span>
        </a>
      </div>

      <!-- Logo -->
      <a href="{URL}" class="header-logo [header-logo-center-xs-only]">
        <span class="sr-only">{SCREEN_READER_ONLY_TEXT}</span>
        <span class="logo logo-multibrand-small hidden-sm hidden-md hidden-lg" aria-hidden="true" data-grunticon-embed></span>
        <span class="logo logo-multibrand-large hidden-xs" aria-hidden="true" data-grunticon-embed></span>
      </a>

      <!-- Right side buttons -->
      <div class="header-right">
        <!-- 1. Standard button -->
        <a href="{URL}" class="btn btn-{TYPE} [btn-{SIZE}] [btn-{SIZE}-{BREAKPOINT}-[only]]">{BUTTON_TEXT}</a>

        <!-- 2. Header contact: 'Call us' -->
        <a href="tel:{TELEPHONE_NUMBER_NO_SPACES}" class="header-contact">
          <span class="header-contact-icon icon icon-telephone" aria-hidden="true" [data-grunticon-embed]></span>
          <div class="header-contact-details hidden-xs">
            <div class="header-contact-text">Call us on</div>
            <div class="header-contact-text header-contact-text-accent">{TELEPHONE_NUMBER}</div>
          </div>
        </a>

        <!-- 3. Header contact: "LiveChat" -->
        <a href="{CHAT_URL}" class="header-contact">
          <span class="header-contact-icon icon icon-live-chat" aria-hidden="true" [data-grunticon-embed]></span>
          <div class="header-contact-details hidden-xs">
            <div class="header-contact-text header-contact-text-accent">LiveChat</div>
            <div class="header-contact-text">Online now</div>
          </div>
        </a>
      </div>
    </div>
  </header>

CSS

Modifier class:
  • header-basic
  • header-fixed
  • header-logo-center-xs-only

LESS

The main mixin is called: _templates(STG)

The sidebar header’s native position:sticky functionality (in XS and SM breakpoints) is polyfilled via Stickyfill for browser support.

This module comes with the usual init method and three public methods:

  • GUI.templates.init(); after the page has been loaded.
  • GUI.templates.sidebarRender(); for dynamically added sidebar component after page load.
  • GUI.templates.sidebarToggle( target );
    • @param target [string] Selector string to id the sidebar for opening or closing
  • GUI.templates.sidebarOpen( target );
    • @param target [string] Selector string to id the sidebar for opening only
  • GUI.templates.sidebarClose( target );
    • @param target [string] Selector string to id the sidebar for closing only

Basic footer

A simple global footer panel component for form pages etc. Basic footers have two divider options — default and fancy (currently WBC only).

The footer content area is flexible and the grid may be used as shown in the example. Responsive styling for the security padlock icon is provided.

Logos and Icons are independent ingredients (dependencies) so make sure you include them in your blend if necessary.

Demo

What’s new since v2.0.0-alpha

This version changed: CSS/LESS, HTML, JS
  • Updated .header-inner, .sidebar-content and sidebar backdrop overlay z-index
  • Added styling to reposition sidebar .sr-skiplink
  • Updated JS functionality; only add sidebar aria-hidden attribute if necessary (when hidden in XS & SM)

What’s new since v1.0.1

This version changed: CSS/LESS, HTML, JS
  • Fixed sticky footer functionality and fixed header center alignment in IE (#423)
  • Moved the .template class from <html> down to <body> element; our new sticky footer implementation no longer requires access to <html> (Note: This is in the only HTML update) (#423)
  • Templates now includes the Headers and Footers modules; which are now deprecated (#424)
  • Renamed .wrapper class... now .template-wrapper
  • Added sidebar styling
  • Increased vertical section padding for mobile
  • Removed .section alternating background fill; now available as an option via .section-fill modifier
  • Removed the content panel (.content-panel) block; now provided by the new Form Pods module
  • Adding new scroll locking utility styling

What’s new since v1.0.0

This version changed: CSS/LESS, but not HTML JS
  • Removed .main-fit modifier styling; found to be unnecessary and easily misunderstood
  • Added .section block styling; similar to .main-padded modifier styling
  • Fixed undesirable .wrapper edge border effect; wrapper and header now utilise available width until 1920px. Borders appear from 1922px.
  • White content panel (.content-panel) border-radius and border removed and top/bottom padding increased
  <footer class="footer footer-basic [footer-divider-fancy]">
    <div class="footer-inner">
      <!-- Footer content -->
      <div class="row">
        <div class="col-sm-9">
          <span class="footer-icon icon icon-padlock icon-small icon-medium-sm" aria-hidden="true" [data-grunticon-embed]></span>
          <div class="footer-text">
            <p>{FOOTER_TEXT}</p>
          </div>
        </div>
        <div class="col-sm-3">
          <a href="{URL}" class="footer-logo">
            <span class="sr-only">{SCREEN_READER_ONLY_TEXT}</span>
            <span class="logo logo-multibrand-small-right" aria-hidden="true" data-grunticon-embed></span>
          </a>
        </div>
      </div>
    </div>
  </footer>

CSS

Modifier class:
  • footer-basic
  • footer-divider-fancy

LESS

The main mixin is called: _templates(STG)

The sidebar header’s native position:sticky functionality (in XS and SM breakpoints) is polyfilled via Stickyfill for browser support.

This module comes with the usual init method and three public methods:

  • GUI.templates.init(); after the page has been loaded.
  • GUI.templates.sidebarRender(); for dynamically added sidebar component after page load.
  • GUI.templates.sidebarToggle( target );
    • @param target [string] Selector string to id the sidebar for opening or closing
  • GUI.templates.sidebarOpen( target );
    • @param target [string] Selector string to id the sidebar for opening only
  • GUI.templates.sidebarClose( target );
    • @param target [string] Selector string to id the sidebar for closing only