GC promotional thematic

Custom CSS and/or JavaScript for GC promotional thematic use. Check out the current list of promotional thematic projects below.

Support is provided during the wet-boew weekly code sprint happening remotely every Tuesday afternoon.

Rules for a proper GC promotional thematic project

• Be sponsored by a GC department and by an active representative from that department;
• Must provide an expiration date;
• Must be used on a respectable set of pages to make it worthwhile (Exact number will be provided eventually);
• Each feature must be demoed;
• An accessibility conformance report (ACR) must be provided per feature or per demoed pages, however an accessibility statement could be accepted in replacement of the ACR but only for small features. Refer to Canada Day as an example;
• Must list all CSS class and exposed JS function;
• Quickly describe the purpose of each feature;
• Must not be a departmental common style, it has to be for campaign or promotional events, such as Canada Day;
• Their usage must be in conformance with the Canada.ca content and information architecture specification;
• Must not contain any interference with wet-boew, GCWeb;
• Loading features must not change the state of generic page. Feature must be explicitly activated through HTML by the web publisher, like wet-boew plugins or by using a CSS class to hook onto an HTML element;
• Must be designed by following the progressive enhancement approach;
• Must be coded by respecting the code linting practice of GCWeb in order to successfully pass the build script, which includes: HTMLlint, ESlint and SASSlint (See SASSlint configs on wet-boew);
• Favour a naming convention for features that represents the campaign followed by their function. This is to avoid collision with other styles, for example: .bg-canadaday.

Most of the information gathering from the rules described above must be put in a meta file accompanied with the project, see Canada day project as an example.

Keep in mind that all active features from any GC promotional thematic project are going to be merged into one unique CSS file and one unique JS file, like any méli-mélo compilation. This framework for GC promotional thematic projects is excluded from the GCWeb public API. Any change or removal would only trigger a patch release of GCWeb. That means the author are fully responsible but not required to documents any subsequent change they would make to their project.

Progressive enhancement approach

If any thematic feature is removed from a web page, that page doesn't "break" and can still be surfed on without any functional or design issues nor accessibility failures caused by such removal. If helpers are used to keep a web page integrity, the project must have implementation notes just like the Canada day's implementation notes on its Details page.

Expiration date

A promotional thematic feature has to indicate a removal target date that is less than one (1) year from its original submission. As needed, extensions can be granted upon agreement of interest parties. During the renewal process, the wet-boew maintainers team may ask for additional evidences for an extension, may require the removal of some sub-features or may initiate their conversion into méli-mélo features.

Current list of GC promotional thematic projects

• Canada Day theme - (Exp. June 30, 2024)
  • CSS: bg-canadaday
  • CSS: panel-canadaday
  • CSS: brdr-canadaday
  • CSS: bg-canadaday-beige
  • CSS: canadaday
  • CSS: panel-canadaday-card
  • CSS: panel-canadaday-card-compact
• Zero Emission Vehicles (ZEV) Theme - (Exp. May 31, 2024)
  • CSS: bg-zev-purple
  • CSS: bg-zev-green
  • CSS: btn-zev-purple
  • CSS: btn-zev-green
  • CSS: panel-zev-green
  • CSS: panel-zev-purple
• Winterlude theme - (Exp. February 1, 2024)
  • CSS: bg-winterlude
  • CSS: panel-winterlude
  • CSS: brdr-winterlude
  • CSS: bg-winterlude-lightblue
  • CSS: winterlude

GC promotional thematic meta file

---
feature: thématique
lang: en
title: Title of the thematic usage
description: Short description of the added style
componentName: th-thematicName
expiry: Month DD, YYYY
cssClass:
- List of CSS class
jsFunctions:
- List of javascript function
a11yStatement: >
  Accessibility statement, describe what was tested, include any notes/instructions for implementers to follow in order to maintain the accessibility conformance, during and after the thematic expiration.
  Tested by (Name of the person - YYYY-MM-DD.
peNote:
- Progressive enhancement notes and instructions
pages:
  examples:
    - title: Title of the page
      language: en
      path: index.html
sponsor: Department - Representative name (@ github handle)
output: false
---

feature

Mandatory: Expected to have the exact value thématique

title

Mandatory: Technical code name for the project

expiry

Mandatory: Expiry date of when project feature can be safely removed

output

Mandatory: Expected to have the exact value false

a11yStatement

Mandatory: Accessibility conformance statement

peNote

Optional: Note and instructions to implement the thematic following progressive enhancement design approach

cssClass

Optional: Array for CSS class name which the project define

jsFunctions

Optional: Array for public JavaScript function name which the project define

See also: Méli-mélo features for custom code that is in a preliminary state of experimentation.