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.

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

• GCWeb
• wet-boew

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:

• 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

Additionally, if you are going to design a bilingual template skeleton, you will 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 which consist to change 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 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:

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

Migrate your content

Before you migrate your content, we recommend to:

• Create a content inventory
• Identify your top task and top pages, usefull to prioritize your content review
• Complete a content cleanup exercise that consist at least in:
  • Taking action for redundant outdated trivial (ROT) content
  • Fixing any HTML lint issue that could be reported by the W3C HTML5 validation software
  • Removing any custom and inline CSS you have. If you can't then at least identify all those 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 resource in GCWeb
  • Following the code sample and published page template in GCWeb. Like Topic template.
• You are using WET4 plugins and GCWeb plugins
  • WET 4 plugins
  • GCWeb plugins

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

• The grid system, .span-* need 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 combinaison with a CSS grid. They need to be coded in distinct markup
• Various of other changes that are not fully documented, like the CSS class mapping

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:

• List of all changes that are marked as Major, Minor or Patch
• An overview of all changes that was applied to the WET 4 dependency
• List of modified files that you would need to replace
• Link to all Subresource integrity (SRI) hash
• Ad hoc details on specific content updates that don't have their own documentation page yet.

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

• Check at the documentation published on GCWeb and on the Canada.ca design system
• Look at current and closed github issues
• Submit a new issue on Github
• Participate and ask your question during one of the weekly WET-BOEW code sprint every Tuesday.

Menu CDN

Principal publisher udpate those following HTML fragment file every time there is a change to 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

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