Search

GCWeb theme - Meta information

On this page:

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 89 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 Download GCWeb Download experimental CSS

GCWeb Canada.ca theme) visual update - V5

The GCWeb v5 (Canada.ca theme) visual update are supporting the Canada.ca Content and Information Architecture Specification 2.0.

Noticable visual difference with no markup change

This is a list of perceptible changes that would be visually noticiable if only the GCWeb javascript and CSS are replaced without doing any markup change as identified by the migration instruction.

Temporary avoiding the visual difference

The increased font size and the new line-height might impact some visual design. Mostly the one where it was thighly designed for desktop first, like some campaign pages.

Here a list of design items to look at:

The visual difference is avoided for:

Here a working example: Content page - GCWeb 4.0.29 font style

Reference and notes

Evaluation and report

Special notes

Adding Font Awesome icons

Requirement

Based on the discussion FontAwesome originally opened February 2017.

Background

Adding Font Awesome to GCWeb should allow its icons to be relied upon for any Canada.ca content. This can allow for richer content than what's available from GlyphIcons.

The preferred means of installing FontAwesome is to use the style sheet link as described on the Font Awesome Start using FontAwesome page.

The style sheet link includes a hash for the integrity check.

Font Awesome's privacy policy notes that it tracks use of the CDN including what fonts are downloaded and when, with no personally identifidable data tracked.

Font Awesome collects data about use of its content delivery networks.

Use of font smoothing anti-aliasing

Requirement

Configure the font smoothing anti-aliasing CSS for GCWeb theme v5.

Background

It is explicitly said that anti-aliasing CSS is not in a standard track and it is recommended to avoid. Currently that feature is only limited to webkit browser and FF by applying some prefix vendor.

It was an experimental feature that was removed from an old CSS W3C editor draft. It is only supported by Chrome browser. That feature wasn't consistently supported by Chrome. Considering the published article referenced by Mozila that support to avoid font smoothing and it's removal from the old editor draft specification, the wet-boew team lead consider that feature at risk and recommend to avoid it. At the time of publishing this, no extensive research was made to find an alternative solution that would meet the above requirement.

The above article makes reference that playing with the anti-aliasing feature make the font more blury for use, so less readable.

Rational / Justification

[...] we seem to be unsure if there is actually a technical or other issue with implementing the font smoothing for various browsers. Right now there are two calls to font smoothing - code for smoothing which is for several browsers (Chrome, etc), and then code for the Mozilla specific smoothing for Firefox.

We would like to pursue this because the smoothed fonts are what we've been showing everyone in for approval, and it’s what we’ve been testing positively with users (across many browsers).

We should also mention that the majority of our users see the site in Chrome so we want to give them the best experience possible.

Not having the font smoothing available to EI users does not cause them any harm.

We would like to pursue the implementation in a way that could be done immediately, but we understand it may need to be implemented differently long-term.

by @jmealing on behalf of Treasury Board Secretariat

The menu was designed as per the WAI-ARIA Practice 1.1 for the Menu or Menu bar. In the section WAI-ARIA roles states and properties the fifth bullet items say the element with the role menuitem has the aria-expanded state. The use of that state is illustrated by the WAI-ARIA Practice 1.1 menu bar example 2.

It was noted that as per the description of the aria-expanded attribute in WAI-ARIA 1.1 spec it don't allow to have the attribute aria-expanded set on element with the role menuitem.

However, a research revealed the WAI-ARIA specification 1.2 (working draft) have an updated definition for aria-expanded. It now allow to use that state on on element with the role menuitem. Here some reference:

Use of Google API

GCWeb was already leveraging Google API to retreive jQuery library and now with the new look it leverage Google API to retreive two fonts, Lato and Noto.

Here an excerpt of the answer we got from TBS on the usage of Google API for GCWeb.

I don’t see an issue with this at all. It looks to be just a public open source API, so I would just go ahead and consume it. If you already have another Google API you’re consuming, you’ll likely even be able to use the same key.

If you’re encountering questions and resistance, feel free to loop me in. Whenever you’re using a 3‌rd party API, latency and reliability is obviously a consideration. I would just ensure you think through the various failure scenarios to understand what happens to your website if the API is down, unreachable because of GC network outage, or if there are delays in the API responding.

By Shan Gu on behalf of Treasury Board Secretariat

Technical note about the design of the menu

Customizing GCWeb for your implementation variant

The build script of GCWeb has been adapted to allow implementation variant to include their specific CSS with the gcweb CSS in a way that reduce potential git conflict when updating to the latest version of gcweb.

Test cases

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: