| title | altLangPage | dateModified | description | layout | language | css | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|
GCWeb, the WET-BOEW Canada.ca theme |
index-fr.html |
2023-01-17 |
Home page describing all the components of the Canada.ca theme, named GCWeb. |
no-container |
en |
|
{::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 v12.6.0
({{ page.dateModified | date: %F }} - Release notes)
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 as 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.lang | 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.lang | 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 %}
The experimentation hub you have been waiting for! Méli-mélos 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.
-
{% for item in site.data.sites %}
{% assign list-pages = item.pages %}
-
{{ item.title[ page.language ] }} {% if item.status == "stable" %} State: {{ comp_status[ item.status ] }} {% elsif item.status == "provisional" %} State: {{ comp_status[ item.status ] }} {% elsif item.status == "deprecated" %} State: {{ comp_status[ item.status ] }} {% else %} State: Undefined {% endif %}
{{ item.description[ page.language ] | default: "[Short description of the site global functionality]" }}
{% assign mainExamples = list-pages.examples | where: "language", page.lang | 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 %}
- GCWeb theme - Meta information
- Migration instruction - GCWeb theme V5
- Archived - Documentation - GCWeb English
- Archived - Releases English
- Skeleton - Static header/footer - Bootstrap 3
- Prototype skeleton - Static header/footer - Bootstrap 4
Implementation guide for the Canada.ca theme with the Web Experience Toolkit version 4.x.
Join the community and start creating, improving and fixing GCWeb, the Canada.ca theme. Learn how to set up your local environment.