Core framework

The core Framework binds the themes, plugins, polyfills and other components together into a seamless toolkit that promotes accessibility, usability and a mobile conscious design.

Overview

The Web Experience Toolkit (WET) emerged out of CLF (Common Look and Feel), but its current incarnation is focused on promoting accessible and usable solutions for websites, by using best practices, meeting WCAG requirements and following WAI-ARIA guidelines set by the W3C.

WET also provides a strong mobile experience, by maintaining a small footprint and implementing a responsive-design layout.

Rationale

There are many benefits to using WET, some of which include:

  • Respects accessibility (WCAG 2.0 AA and WAI-ARIA), usability, and interoperability.
  • Reduces costs by consolidating Web tools and solutions.
  • Open source software that is free to use by departments and external Web communities.

Implementation

To implement WET use the dist. The only necessary sub-folders are:

  • grids - the CSS grid system folder;
  • js - the JavaScript folder; and
  • an appropriate theme folder (optional):
    • theme-gcwu-fegc - The Government of Canada Web Usability theme
    • theme-gcwu-intranet - The Government of Canada Web Usability Intranet theme
    • theme-clf2-nsi2 - The CLF 2.0 theme

Note: Keep the folder names and hierarchy, as the files use relative paths to refer to each other. The other folders and files are created during the build process and are unnecessary to implementation.

Header

WET requires that the following style sheets and jQuery be loaded in the header.

Style sheets

The style sheets are separated into two different sets, one for IE7 and another for all other browsers.

<head>
...
<--[if lte IE 8]>
<script src="../../dist/js/polyfills/html5shiv-min.js"></script>
<link rel="stylesheet" href="../../dist/grids/css/util-ie-min.css" />
<link rel="stylesheet" href="../../dist/js/css/pe-ap-ie-min.css" />
<link rel="stylesheet" href="../../dist/theme-gcwu-fegc/css/theme-ie-min.css" />
<![endif]-->
<--[if gt IE 8]><-->
<link rel="stylesheet" href="../../dist/grids/css/util-min.css">
<link rel="stylesheet" href="../../dist/js/css/pe-ap-min.css">
<link rel="stylesheet" href="../../dist/theme-gcwu-fegc/css/theme-min.css">
<--<![endif]-->
<noscript><link rel="stylesheet" href="../../dist/theme-gcwu-fegc/css/theme-ns-min.css"></noscript>
...
</head>

jQuery

jQuery is the only JavaScript file that we recommend loading in the header.

<head>
...
<script src="../../dist/js/jquery.min.js"></script>
...
</head>

Note: We recommend you use the jQuery file included in WET and not from a public CDN as this is the version used within the toolkit.

Body

We load the rest of the JavaScript files at the end of the body to decrease the load time of the page. This way the browser will load the content and run the JavaScript enhancements simultaneously.

Load the following files at the bottom of the body:

<body>
...
<-- ScriptsStart -->
<script src="../../build/theme-gcwu-fegc/js/theme-min.js"></script>
<script src="../../build/js/settings.js"></script>
<script src="../../build/js/pe-ap-min.js"></script>
<-- ScriptsEnd -->
</body>

Grid System

The Grid System provides a layout grid for dividing up horizontal and vertical space. This helps to create visually appealing layouts by enabling consistent placement of content. The Grid System also enhances the appearance of standard Web page components and provides modules and other features building building and styling Web page content.

How to use the Grid System

Plugins

All plugin calls in WET are done via the class tags using the format: class="wet-boew-plugin-name parameter1 parameter2 etc"

Here is an example using the Prettify plugin: <h2 id="examples" class="wet-boew-prettify all-pre" data-load="prettify">Examples</h2>

In this example the plugin-name is "prettify" and there is only one parameter "all-pre" which is passed.

For more detailed instructions regarding plugins see the documentation regarding each individual plugin