gc-thématique-en.html

---
title: GC promotional thematic
description: Custom CSS/JavaScript for GC promotional thematic use
altLangPage: gc-thématique-fr.html
lang: en
dateModified": 2021-06-22
---

<p>Custom CSS and/or JavaScript for GC promotional thematic use. Check out the <a href="#th-list">current list of promotional thematic projects below</a>.</p>

<p class="alert alert-info"><strong>Support is provided during the <a href="https://github.com/wet-boew/wet-boew/wiki/WET-BOEW-Code-sprint">wet-boew weekly code sprint</a> happening remotely every Tuesday afternoon.</strong></p>

<h2>Rules for a proper GC promotional thematic project</h2>
<ul>
	<li>Be sponsored by a GC department and by an active representative from that department;</li>
	<li>Must provide an <a href="#expiration">expiration date</a>;</li>
	<li>Must be used on a respectable set of pages to make it worthwhile (Exact number will be provided eventually);</li>
	<li>Each feature must be demoed;</li>
	<li>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 <a href="../méli-mélo/th-canadaday/canada-day.html">Canada Day as an example</a>;</li>
	<li>Must list all CSS class and exposed JS function;</li>
	<li>Quickly describe the purpose of each feature;</li>
	<li>Must not be a departmental common style, it has to be for campaign or promotional events, such as Canada Day;</li>
	<li>Their usage must be in conformance with the <a href="https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification.html">Canada.ca content and information architecture specification</a>;</li>
	<li>Must not contain any interference with wet-boew, GCWeb;</li>
	<li>Loading features must not change the state of generic page. Feature must be explicitly activated through HTML by the web publisher, like <a href="https://wet-boew.github.io/wet-boew/demos/helloworld/helloworld-en.html">wet-boew plugins</a> or by using a CSS class to hook onto an HTML element;</li>
	<li>Must be designed by following the <a href="#progressive">progressive enhancement approach</a>;</li>
	<li>Must be coded by respecting the code linting practice of GCWeb in order to successfully pass the build script, which includes: <a href="https://htmllint.github.io/demo.html" rel="external">HTMLlint</a>, <a href="https://eslint.org/demo" rel="external">ESlint</a> and <a href="https://github.com/sasstools/sass-lint/tree/develop/docs/rules" rel="external">SASSlint</a> (See <a href="https://github.com/sasstools/sass-lint/tree/develop/docs/rules">SASSlint configs on wet-boew</a>);</li>
	<li>Favour a naming convention for features that represents the campaign followed by their function. This is to avoid collision with other styles, for example: <code>.bg-canadaday</code>.</li>
</ul>

<p>Most of the information gathering from the rules described above must be put in a <a href="#th-meta">meta file</a> accompanied with the project, see <a href="https://github.com/wet-boew/GCWeb/tree/master/m%C3%A9li-m%C3%A9lo/th-canadaday">Canada day project</a> as an example.

<p>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 <a href="../méli-mélo/méli-mélo-en.html#mli-mlo-list">méli-mélo compilation</a>. This framework for GC promotional thematic projects is excluded from the <a href="https://wet-boew.github.io/wet-boew-documentation/decision/3.html">GCWeb public API</a>. 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.</p>

<h3 id="progressive">Progressive enhancement approach</h3>
<p>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 <a href="../méli-mélo/th-canadaday/détails-en.html">Canada day's implementation notes on its Details page</a>.</p>

<h3 id="expiration">Expiration date</h3>
<p>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.</p>

<div class="alert alert-info">
	<h2>Temporary implementation measure</h2>
	<p>We are currently in progress of adapting our build script to support those GC promotional thematic features on their own. As an interim measure, we are going to use the méli-mélo compilation named "gc-thematic" to let departments start using this framework for their GC promotional campaign needs.</p>
</div>

<h2 id="th-list">Current list of GC promotional thematic projects</h2>

{% assign thematic_pages = site.pages | where: "output", "false" | where: "feature", "thématique" %}
{% assign cssClasses = "" | split: "," %}
{% assign jsFunctions = "" | split: "," %}

{% assign cssClasses = cssClasses | sort %}
{% assign jsFunctions = jsFunctions | sort %}

<ul>
{% for feature in thematic_pages %}
	{% assign thBasePath = feature.path | slice: 0, 10 %}
	{% if thBasePath == "méli-mélo/" %}
	<li><a href="../méli-mélo/{{  feature.componentName }}/détails-fr.html">{{ feature.title }}</a> - (Exp. {{ feature.expiry }})

		{% if feature.cssClass.size > 0 or feature.jsFunctions.size > 0 %}
		<ul>
			{% for cssClass in feature.cssClass %}
				<li>CSS: <code>{{ cssClass }}</code></li>
			{% endfor %}
			{% for jsFunc in feature.jsFunctions %}
				<li>JS: <code>{{ jsFunc }}</code></li>
			{% endfor %}
		</ul>
		{% endif %}
	</li>
	{% endif %}
{% endfor %}
</ul>

{% for feature in thematic_pages %}
	{% assign thBasePath = feature.path | slice: 0, 10 %}
	{% if thBasePath == "méli-mélo/" %}
		{% if feature.cssClass %}
			{% assign cssClasses = feature.cssClass | concat: cssClasses %}
		{% endif %}
		{% if feature.jsFunctions %}
			{% assign jsFunctions = feature.jsFunctions | concat: jsFunctions %}
		{% endif %}
	{% endif %}
{% endfor %}

{% if cssClasses.size > 0 %}
<details>
	<summary>List of all CSS classes in alphabetical order</summary>
	<ul>
	{% for cssClass in cssClasses %}
		<li><code>{{ cssClass }}</code></li>
	{% endfor %}
	</ul>
</details>
{% endif %}


{% if jsFunctions.size > 0 %}
<details>
	<summary>List of all JS functions in alphabetical order</summary>
	<ul>
	{% for jsFunc in jsFunctions %}
		<li><code>{{ jsFunc }}}</code></li>
	{% endfor %}
	</ul>
</details>
{% endif %}

<h2 id="th-meta">GC promotional thematic meta file</h2>

<pre><code>---
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
---
</code></pre>

<dl>
	<dt><code>feature</code></dt>
	<dd>Mandatory: Expected to have the exact value <code>thématique</code></dd>

	<dt><code>title</code>
	<dd>Mandatory: Technical code name for the project</dd>

	<dt><code>expiry</code>
	<dd>Mandatory: Expiry date of when project feature can be safely removed</dd>

	<dt><code>output</code></dt>
	<dd>Mandatory: Expected to have the exact value <code>false</code></dd>

	<dt><code>a11yStatement</code></dt>
	<dd>Mandatory: Accessibility conformance statement</dd>

	<dt><code>peNote</code></dt>
	<dd>Optional: Note and instructions to implement the thematic following progressive enhancement design approach</dd>

	<dt><code>cssClass</code>
	<dd>Optional: Array for CSS class name which the project define</dd>

	<dt><code>jsFunctions</code>
	<dd>Optional: Array for public JavaScript function name which the project define</dd>
</dl>

<p class="mrgn-tp-lg"><strong>See also:</strong> <a href="../méli-mélo/méli-mélo-en.html">Méli-mélo features</a> for custom code that is in a preliminary state of experimentation.</p>