| title | altLangPage | dateModified | description | layout | language | overwriteBreadcrumbs | feedback | css | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
GCWeb, the WET-BOEW Canada.ca theme |
index-fr.html |
2024-09-11 |
Home page describing all the components of the Canada.ca theme, named GCWeb. |
no-container |
en |
true |
true |
|
{::nomarkdown}
The page templates and design patterns below comprise a reference implementation of the Canada.ca design system, including the mandatory requirement of the Content and Information Architecture (C&IA) Specification. Government of Canada departments and agencies can contribute additional patterns and templates via GCWeb github repository.
Download GCWeb theme v15.6.1
({{ page.dateModified | date: '%F' }} - Release notes)
- Components
- Templates
- Design patterns
- Experimentation and thematics
- Sites and global
- Wet-boew Other
- Implementing / Developing
Found an C&IA implementation issue or you want to contribute at their development, let us know by submiting GCweb issue, sending pull request or by participating at one of our weekly WET office hours (formerly known as WET-BOEW code sprint) every Tuesday.
{% assign page_group = site.data.i18n.page_group[ page.language ] %} {% assign comp_status = site.data.i18n.component_status[ page.language ] %}Meaning of statuses
- {{comp_status.stable}}
- Meet the latest published specification.
- {{comp_status.provisional}}
- Relatively stable, yet experimental; use at your own risks.
- {{comp_status.deprecated}}
- Do not use because it's deprecated, but listed here for your information.
- Undefined
- Missing State in the component documentation.
-
{% for component in site.data.components %}
{% assign list-pages = component.pages %}
-
{{ component.title[ page.language ] }} {% if component.status == "stable" %} State: {{ comp_status[ component.status ] }} {% elsif component.status == "provisional" %} State: {{ comp_status[ component.status ] }} {% elsif component.status == "deprecated" %} State: {{ comp_status[ component.status ] }} {% else %} State: Undefined {% endif %}
{{ component.description[ page.language ] | default: "[Short description of the component]" }}
{% assign mainExamples = list-pages.examples | where: "language", page.language | first %}-
{% if mainExamples %}
- {% if mainExamples.path %} Working example {% elsif mainExamples.url %} Working example {% else %} Working example {% endif %} {% endif %} {% if list-pages.docs %} {% assign docs = list-pages.docs | where: "language", page.language %} {% for doc in docs %}
- Documentation {% endfor %} {% endif %}
- Source code
All examples and info
-
{% for pgGroup in list-pages %}
{% assign grpkey = pgGroup[0] %}
- {{ page_group[ grpkey ] | default: "Unknown group" }}
-
{% assign examples = pgGroup[1] %}
{% for example in examples %}
{% if example.path %}
- {{ example.title }} {% elsif example.url %}
- {{ example.title }} {% else %}
- {{ example.title }} {% endif %} {% endfor %}
{% endfor %}
{% endfor %}
-
{% for template in site.data.templates %}
{% assign list-pages = template.pages %}
-
{{ template.title[ page.language ] }} {% if template.status == "stable" %} State: {{ comp_status[ template.status ] }} {% elsif template.status == "provisional" %} State: {{ comp_status[ template.status ] }} {% elsif template.status == "deprecated" %} State: {{ comp_status[ template.status ] }} {% else %} State: Undefined {% endif %}
{{ template.description[ page.language ] | default: "[Short description of the template]" }}
{% assign mainExamples = list-pages.examples | where: "language", page.language | first %}-
{% if mainExamples %}
- {% if mainExamples.path %} Working example {% elsif mainExamples.url %} Working example {% else %} Working example {% endif %} {% endif %} {% if list-pages.docs %} {% assign docs = list-pages.docs | where: "language", page.language %} {% for doc in docs %}
- Documentation {% endfor %} {% endif %}
All examples and info
-
{% for pgGroup in list-pages %}
{% assign grpkey = pgGroup[0] %}
- {{ page_group[ grpkey ] | default: "Unknown group" }}
-
{% assign examples = pgGroup[1] %}
{% for example in examples %}
{% if example.path %}
- {{ example.title }} {% elsif example.url %}
- {{ example.title }} {% else %}
- {{ example.title }} {% endif %} {% endfor %}
{% endfor %}
{% endfor %}
-
{% for designPattern in site.data.design-patterns %}
{% assign list-pages = designPattern.pages %}
-
{{ designPattern.description[ page.language ] | default: "[Short description of the design pattern]" }}
{% assign mainExamples = list-pages.examples | where: "language", page.language | first %}-
{% if mainExamples %}
- {% if mainExamples.path %} Working example {% elsif mainExamples.url %} Working example {% else %} Working example {% endif %} {% endif %} {% if list-pages.docs %} {% assign docs = list-pages.docs | where: "language", page.language %} {% for doc in docs %}
- Documentation {% endfor %} {% endif %}
- Source code
All examples and info
-
{% for pgGroup in list-pages %}
{% assign grpkey = pgGroup[0] %}
- {{ page_group[ grpkey ] | default: "Unknown group" }}
-
{% assign examples = pgGroup[1] %}
{% for example in examples %}
{% if example.path %}
- {{ example.title }} {% elsif example.url %}
- {{ example.title }} {% else %}
- {{ example.title }} {% endif %} {% endfor %}
{% endfor %}
{% endfor %}
The experimentation hub you have been waiting for! The méli-mélo compilation which include experimental code allow you to bring in some awesome new code you would usually consider "custom" to the Canada.ca theme.
Do you have a set of pages that use an original look related to a specific promotion? Try this special hub for promotional thematics instead.
<h3 id="core-canadaca-theme">Core components for the Canada.ca theme</h3>
<ul class="row list-unstyled wb-eqht-grd wb-filter mrgn-tp-md" data-wb-filter='{ "selector": ">li" }'>
{% for item in site.data.sites %}
{% assign list-pages = item.pages %}
<li class="col-xs-12 col-md-6 mrgn-tp-md mrgn-bttm-md">
<div class="brdr-tp brdr-rght brdr-bttm brdr-lft hght-inhrt">
<h4 class="mrgn-tp-md mrgn-rght-md mrgn-bttm-md mrgn-lft-md">{{ item.title[ page.language ] }}
{% if item.status == "stable" %}
<span class="label label-success mrgn-lft-sm"><span class="wb-inv">State: </span>{{ comp_status[ item.status ] }}</span>
{% elsif item.status == "provisional" %}
<span class="label label-warning mrgn-lft-sm"><span class="wb-inv">State: </span>{{ comp_status[ item.status ] }}</span>
{% elsif item.status == "deprecated" %}
<span class="label label-danger mrgn-lft-sm"><span class="wb-inv">State: </span>{{ comp_status[ item.status ] }}</span>
{% else %}
<span class="label label-default mrgn-lft-sm"><span class="wb-inv">State: </span>Undefined</span>
{% endif %}
</h4>
<div class="mrgn-rght-md mrgn-bttm-md mrgn-lft-md">
<p>{{ item.description[ page.language ] | default: "[Short description of the site global functionality]" }}</p>
<!--
Main working example
- First working example in the example list where the language match
-->
{% assign mainExamples = list-pages.examples | where: "language", page.language | first %}
<ul class="list-unstyled mrgn-bttm-lg mrgn-lft-md">
{% if mainExamples %}
<li>
{% if mainExamples.path %}
<a href="sites/
{%- if item.componentName -%}
{{ item.componentName }}/
{%- endif -%}
{{ mainExamples.path }}" {% if mainExamples.language != page.language %}lang="{{ mainExamples.language }}" hreflang="{{ mainExamples.language }}"{% endif %}><span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Working example</a>
{% elsif mainExamples.url %}
<a href="{{ mainExamples.url }}" lang="{{ mainExamples.language }}" hreflang="{{ mainExamples.language }}"><span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Working example</a>
{% else %}
<span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Working example
{% endif %}
{% endif %}
<!--
Documentation
- Link to the documentations if any
-->
{% if list-pages.docs %}
<!--<ul class="list-unstyled mrgn-bttm-lg mrgn-lft-md">-->
{% assign docs = list-pages.docs | where: "language", page.language %}
{% for doc in docs %}
<li><a href="sites/{{ item.componentName }}/{{ doc.path }}"><span class="fas fa-info-circle small mrgn-rght-sm" aria-hidden="true"></span>Documentation</a></li>
{% endfor %}
{% endif %}
</ul>
<!--
> All examples and info
* Example
* Documentation
* Spec
-->
<details class="mrgn-tp-lg"><summary>All examples and info</summary>
<ul class="mrgn-tp-md">
{% for pgGroup in list-pages %}
{% assign grpkey = pgGroup[0] %}
<li>{{ page_group[ grpkey ] | default: "Unknown group" }}
<ul>
{% assign examples = pgGroup[1] %}
{% for example in examples %}
{% if example.path %}
<li><a href="sites/
{%- if item.componentName -%}
{{ item.componentName }}/
{%- endif -%}
{{ example.path }}" {% if example.language != page.language %}lang="{{ example.language }}" hreflang="{{ example.language }}"{% endif %}>{{ example.title }}</a></li>
{% elsif example.url %}
<li><a href="{{ example.url }}">{{ example.title }}</a></li>
{% else %}
<li>{{ example.title }}</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</details>
</div>
</div>
</li>
{% endfor %}
</ul>
<h3 id="common-components">Common components</h3>
<ul class="row list-unstyled wb-eqht-grd wb-filter mrgn-tp-md" data-wb-filter='{ "selector": ">li" }'>
{% for item in site.data.common %}
{% assign list-pages = item.pages %}
<li class="col-xs-12 col-md-6 mrgn-tp-md mrgn-bttm-md">
<div class="brdr-tp brdr-rght brdr-bttm brdr-lft hght-inhrt">
<h4 class="mrgn-tp-md mrgn-rght-md mrgn-bttm-md mrgn-lft-md">{{ item.title[ page.language ] }}
{% if item.status == "stable" %}
<span class="label label-success mrgn-lft-sm"><span class="wb-inv">State: </span>{{ comp_status[ item.status ] }}</span>
{% elsif item.status == "provisional" %}
<span class="label label-warning mrgn-lft-sm"><span class="wb-inv">State: </span>{{ comp_status[ item.status ] }}</span>
{% elsif item.status == "deprecated" %}
<span class="label label-danger mrgn-lft-sm"><span class="wb-inv">State: </span>{{ comp_status[ item.status ] }}</span>
{% else %}
<span class="label label-default mrgn-lft-sm"><span class="wb-inv">State: </span>Undefined</span>
{% endif %}
</h4>
<div class="mrgn-rght-md mrgn-bttm-md mrgn-lft-md">
<p>{{ item.description[ page.language ] | default: "[Short description of the common component]" }}</p>
<!--
Main working example
- First working example in the example list where the language match
-->
{% assign mainExamples = list-pages.examples | where: "language", page.language | first %}
<ul class="list-unstyled mrgn-bttm-lg mrgn-lft-md">
{% if mainExamples %}
<li>
{% if mainExamples.path %}
<a href="common/
{%- if item.componentName -%}
{{ item.componentName }}/
{%- endif -%}
{{ mainExamples.path }}" {% if mainExamples.language != page.language %}lang="{{ mainExamples.language }}" hreflang="{{ mainExamples.language }}"{% endif %}><span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Working example</a>
{% elsif mainExamples.url %}
<a href="{{ mainExamples.url }}" lang="{{ mainExamples.language }}" hreflang="{{ mainExamples.language }}"><span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Working example</a>
{% else %}
<span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Working example
{% endif %}
{% endif %}
<!--
Documentation
- Link to the documentations if any
-->
{% if list-pages.docs %}
<!--<ul class="list-unstyled mrgn-bttm-lg mrgn-lft-md">-->
{% assign docs = list-pages.docs | where: "language", page.language %}
{% for doc in docs %}
<li><a href="common/{{ item.componentName }}/{{ doc.path }}"><span class="fas fa-info-circle small mrgn-rght-sm" aria-hidden="true"></span>Documentation</a></li>
{% endfor %}
{% endif %}
</ul>
<!--
> All examples and info
* Example
* Documentation
* Spec
-->
<details class="mrgn-tp-lg"><summary>All examples and info</summary>
<ul class="mrgn-tp-md">
{% for pgGroup in list-pages %}
{% assign grpkey = pgGroup[0] %}
<li>{{ page_group[ grpkey ] | default: "Unknown group" }}
<ul>
{% assign examples = pgGroup[1] %}
{% for example in examples %}
{% if example.path %}
<li><a href="common/
{%- if item.componentName -%}
{{ item.componentName }}/
{%- endif -%}
{{ example.path }}" {% if example.language != page.language %}lang="{{ example.language }}" hreflang="{{ example.language }}"{% endif %}>{{ example.title }}</a></li>
{% elsif example.url %}
<li><a href="{{ example.url }}">{{ example.title }}</a></li>
{% else %}
<li>{{ example.title }}</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</details>
</div>
</div>
</li>
{% endfor %}
</ul>
<!-- The new added section of wet-boew -->
<h2 id="wetboew" class="mrgn-bttm-lg">Wet-boew</h2>
<ul class="row list-unstyled wb-eqht-grd wb-filter mrgn-tp-md pb-4" data-wb-filter='{ "selector": ">li" }'>
{% for wetboew in site.data[ "wet-boew" ] %}
{% assign list-pages = wetboew.pages %}
<li class="col-xs-12 col-md-6 mrgn-tp-md mrgn-bttm-md">
<div class="brdr-tp brdr-rght brdr-bttm brdr-lft hght-inhrt">
<h3 class="mrgn-tp-md mrgn-rght-md mrgn-bttm-md mrgn-lft-md">{{ wetboew.title[ page.language ] }}
{% if wetboew.status == "stable" %}
<span class="label label-success mrgn-lft-sm"><span class="wb-inv">State: </span>{{ comp_status[ wetboew.status ] }}</span>
{% elsif wetboew.status == "provisional" %}
<span class="label label-warning mrgn-lft-sm"><span class="wb-inv">State: </span>{{ comp_status[ wetboew.status ] }}</span>
{% elsif wetboew.status == "deprecated" %}
<span class="label label-danger mrgn-lft-sm"><span class="wb-inv">State: </span>{{ comp_status[ wetboew.status ] }}</span>
{% else %}
<span class="label label-default mrgn-lft-sm"><span class="wb-inv">State: </span>Undefined</span>
{% endif %}
</h3>
<div class="mrgn-rght-md mrgn-bttm-md mrgn-lft-md">
<p>{{ wetboew.description[ page.language ] | default: "[Short description of the wetboew]" }}</p>
<!--
Main working example
- First working example in the example list where the language match
-->
{% assign mainExamples = list-pages.examples | where: "language", page.language | first %}
<ul class="list-unstyled mrgn-bttm-lg mrgn-lft-md">
{% if mainExamples %}
<li>
{% if mainExamples.path %}
<a href="wet-boew/
{%- if wetboew.componentName -%}
{{ wetboew.componentName }}/
{%- endif -%}
{{ mainExamples.path }}" lang="{{ mainExamples.language }}" hreflang="{{ mainExamples.language }}"><span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Working example</a>
{% elsif mainExamples.url %}
<a href="{{ mainExamples.url }}" lang="{{ mainExamples.language }}" hreflang="{{ mainExamples.language }}"><span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Working example</a>
{% else %}
<span class="fas fa-eye small mrgn-rght-sm" aria-hidden="true"></span>Working example
{% endif %}
{% endif %}
<!--
Documentation
- Link to the documentations if any
-->
{% if list-pages.docs %}
<!--<ul class="list-unstyled mrgn-bttm-lg mrgn-lft-md">-->
{% assign docs = list-pages.docs | where: "language", page.language %}
<!--
Documentation in GCWeb repo
-->
{% for doc in docs %}
{% if doc.url %}
<li><a href="{{ doc.url }}"><span class="fas fa-info-circle small mrgn-rght-sm" aria-hidden="true"></span>Documentation</a></li>
{% endif %}
{% endfor %}
{% endif %}
<li><a href="https://github.com/wet-boew/GCWeb/tree/master/wet-boew/{{ wetboew.componentName }}" hreflang="en"><span class="fas fa-code small mrgn-rght-sm" aria-hidden="true"></span>Source code</a></li>
</ul>
<!--
> All examples and info
* Example
* Documentation
* Spec
-->
<details class="mrgn-tp-lg"><summary>All examples and info</summary>
<ul class="list-unstyled">
{% for pgGroup in list-pages %}
{% assign grpkey = pgGroup[0] %}
<li>{{ page_group[ grpkey ] | default: "Unknown group" }}
<ul>
{% assign examples = pgGroup[1] %}
{% for example in examples %}
{% if example.path %}
<li><a href="wet-boew/
{%- if wetboew.componentName -%}
{{ wetboew.componentName }}/
{%- endif -%}
{{ example.path }}" {% if example.language != page.language %}lang="{{ example.language }}" hreflang="{{ example.language }}"{% endif %}>{{ example.title }}</a></li>
{% elsif example.url %}
<li><a href="{{ example.url }}">{{ example.title }}</a></li>
{% else %}
<li>{{ example.title }}</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</details>
</div>
</div>
</li>
{% endfor %}
</ul>
<hr />
<h2 id="other">Other documentation</h2>
<div class="row mrgn-tp-md">
<div class="col-md-8">
<section class="row d-flex">
<div class="col-xs-3 col-md-2 d-flex align-self-center">
<img src="https://raw.github.com/wet-boew/wet-boew-attachments/master/Promo/WET_Logo.png" class="full-width" alt="">
</div>
<div class="col-xs-9 col-md-10">
<h3 class="mrgn-tp-md" id="wet-boew-demos">WET features styled with Canada.ca theme</h3>
<p><a href="/gcweb-compiled-demos/index.html#wet-boew">view list of demos</a></p>
</div>
</section>
</div>
</div>
<h3 id="gcweb-project-documentation">GCWeb project documentation</h3>
<ul>
<li><a href="docs/index.html">GCWeb theme - Meta information</a></li>
<li><a href="docs/v5-migration.html">Migration instruction - GCWeb theme V5</a></li>
<li><a href="docs/GCWeb-en.html">Archived - Documentation - GCWeb English</a></li>
<li><a href="docs/release/index-en.html">Archived - Releases English</a></li>
<li><a href="docs/static-header-footer/bootstrap-3.html">Skeleton - Static header/footer - Bootstrap 3</a></li>
<li><a href="docs/static-header-footer/bootstrap-4.html">Prototype skeleton - Static header/footer - Bootstrap 4</a></li>
</ul>
<h4>Evaluations and reports</h4>
<ul>
<li><a href="docs/evaluation-report/1-accessibility.html">1 - Accessibility assessment as 2018-11-14</a></li>
<li><a href="docs/evaluation-report/2-wetplugin-gcweb2.html">2 - Regression user acceptance testing as 2018-11-16</a></li>
</ul>
<div class="cnt-wdth-lmtd">
<h2 id="implementing-developing"><span aria-hidden="true" class="fas fa-code mrgn-rght-md"></span>Implementing / Developing</h2>
<h3>Implementing GCWeb on your site</h3>
<p>Implementation guide for the Canada.ca theme with the Web Experience Toolkit version 4.x.</p>
<p><a href="docs/implementing-en.html" class="btn btn-lg btn-default">Quick guide</a></p>
<h3 id="developing-for-gcweb">Developing for WET / GCWeb</h3>
<p>Join the community and start creating, improving and fixing GCWeb, the Canada.ca theme. Learn how to set up your local environment.</p>
<p class="mrgn-bttm-lg"><a href="docs/developing-en.html" class="btn btn-call-to-action">Start coding</a></p>
</div>