Search

Quick implementation guide - GCWeb theme

This is an implementation guide for the Canada.ca theme with the Web Experience Toolkit version 4.x.

The code name for "Canada.ca theme" is GCWeb. We use that term interchangeably. GCWeb is built on top of WET-BOEW 4.

WET-BOEW 4 is built on top of various other web project such:

  • Bootstrap 3 SASS (for a CSS baseline layer)
  • Code prettify
  • Datatable.net
  • Flot chart
  • jQuery
  • jQuery Validation
  • Mathjax
  • Magnific popup
  • Open Layer

GCWeb has some additional plugins like:

  • Data JSON
  • Do action
  • URL mapping
  • Field flow

Get your template setup

1. Download the GCWeb library

Version history - Canada.ca theme (GCWeb)

2. Copy the content of following folder in your Web Server

3. Create your page template

As a starting point, we recommand to use the Static header and footer for Bootstap 3.

Alternatively you can use a static page, like the generic content page, as a baseline to create your template.

Here the various part of the template you will need to modify:

Additionally, if you are going to design a bilingual template skeleton, you will need to:

Customize your template

The Canada.ca design system and the Content and IA specification allow some customization for transactional scenario and a campaigns. Read those guidance for more detailled information about what is allowed.

Use only the Canada.ca style without WET-BOEW's Javascript

GCWeb is designed to work together with WET-BOEW. Its WCAG 2.0 Level AA baseline conformity fully rely on the WET-BOEW 4 framework. If you are only using the CSS and the base HTML markup, you're encouraged to do the following:

Migrate your content

Before you migrate your content, we recommend to:

Converting your content pages into GCWeb compatible markup means:

Note regarding site migrating from WET 3, here are some well known challenges:

Stay up-to-date

Every release of GCWeb now follows a strict versioning numbering and the release notes now contain all the information you need to update your implementation. This includes information like:

Since February 2019, we are using and releasing versions in accordance with the semantic versioning 2.0.0 (Design decision #6) where our API is defined by the Design decision #3

Get help

Principal publisher udpate those following HTML fragment file every time there is a change to Canada.ca top menu.

Static HTML header and footer that you can just copy and paste in your project, with slight modifications e.g. metadata.

Bootstrap 3 Bootstrap 4 (experimental)
Example
Header Source code, line 1 to 77 Source code, line 1 to 66
Footer Source code, line 187 to 233 Source code, line 84 to 122
Notes
  • Includes WET scripts
  • Includes GCWeb styles
  • Needs to have assets paths updated to fit your folder structure
  • Does not include WET scripts
  • Does not include GCWeb styles
  • Does not include the menu
  • Relies on an experimental stylesheet for a Canada.ca look
Special assets All included in the current GCWeb release Download experimental CSS
Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: