Quick implementation guide - GCWeb theme

This is an implementation guide for the Canada.ca theme with version 4.x of the Web Experience Toolkit (WET-BOEW).

The code name for the Canada.ca theme is GCWeb. We use these two terms interchangeably. GCWeb is built on top of WET-BOEW 4.

Set up your template

1. Download the GCWeb library

Version history - Canada.ca theme (GCWeb)

2. Copy the content from the following folders to your Web Server

• GCWeb
• WET-BOEW

3. Create your page template

As a starting point, we recommend using 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.

You will need to modify the following parts of the template:

• Page title
• Page description
• Page metadata
• Opposite page language link
• Breadcrumb items
• Page content (body)
• Page date modified
• Relative link to GCWeb and wet-boew folder for:
  • CSS files
  • Images
  • Javascript
• Where the search form is submited

If you are designing a bilingual template skeleton, you will also need to:

• Toggle the lang attribute for the proper language
• Create partials for each template content pieces such:
  • Skip links
  • Language selection
  • FIP - Text and image for the Governement of Canada Organization publisher
  • Search form
  • Top menu - You might want to leverage the CDN menu by changing the data-ajax attribute value
  • Breadcrumb
  • Report a problem
  • Date modified
  • Page footer

Customize your template

The Canada.ca design system and the Content and IA specification allow customization for transactional scenarios and campaigns. Read the guidance for more detailed information about what is allowed.

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

GCWeb is designed to work with WET-BOEW. It is compliant with WCAG 2.0 Level AA and fully relies on the WET-BOEW 4 framework. If you are only using the CSS and the base HTML markup, you are encouraged to:

• Peform a full WCAG assessment for every published pages
• Create your own JS for the top menu behaviour
• Re-create and maintain every plugin, design pattern and behaviour implemented by WET-BOEW.

Migrate your content

Before you migrate your content, it is recommended to:

• Create a content inventory
• Identify your top tasks and top pages in order to prioritize your content review
• Complete a content cleanup exercise that at least consists of:
  • Taking action for redundant outdated trivial (ROT) content
  • Fixing any HTML link issue that could be reported by the W3C HTML5 validation software
  • Removing any custom and inline CSS – if this is not possible, identify these pages and centralize the CSS in one file

Converting your content pages into GCWeb compatible markup means:

• You are using valid HTML5 markup
• There is no custom CSS and no inline CSS
• You are leveraging the Bootstrap 3 CSS grid
• You are using GCWeb CSS and WET 4 CSS, documented in:
  • wet-boew style guide
  • notes and other resources on GCWeb
  • the code sample and published page templates in GCWeb (such as the Topic template).
• You are using WET4 plugins and GCWeb plugins
  • WET 4 plugins
  • GCWeb plugins

Here are some well-known challenges regarding migrating a site from WET-BOEW 3:

• The grid system, .span-* needs to be converted into a combination of div.row and div.col-*-*.
• Any callout module would need to be converted into alerts or panels in combination with a CSS grid. They need to be coded in a distinct markup
• Other changes that are not fully documented, like the CSS class mapping

Stay up-to-date

Every GCWeb release follows a strict version numbering and the release notes contain all the information needed to update your implementation. This includes:

• a list of all changes that are marked as Major, Minor or Patch
• an overview of all changes that were applied to the WET-BOEW 4 dependency
• a list of modified files that you would need to replace
• links to all “Subresource integrity” (SRI) hashes
• ad hoc details on specific content updates that do not have their own documentation page yet

Since February 2019, we have been 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

• Consult the documentation published on GCWeb and on the Canada.ca design system
• Look at the list of current and closed GitHub issues
• Submit a new issue on Github
• Attend the weekly WET Office hours (every Tuesday) and ask questions.

CDN Menu

Principal Publisher updates the following HTML fragment file every time there is a change to the Canada.ca top menu:

• English: https://www.canada.ca/content/dam/canada/sitemenu/sitemenu-v2-en.html
• French: https://www.canada.ca/content/dam/canada/sitemenu/sitemenu-v2-fr.html

Static header and footer

Here are static HTML headers and footers that you can copy and paste into your project, with slight modifications (e.g. metadata).