GCWeb, the WET-BOEW Canada.ca theme

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 v9.5.0
(2021-08-06 - 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 WET-BOEW weekly Tuesday code sprint.

Components

Checkboxes and radio buttons (State: Stable)
- Documentations
  - Checkboxes and radio buttons
- Examples
  - Checkboxes and radio buttons
- Specification
  - Checkboxes and radio buttons: Canada.ca design system
Featured link - Documentation and working example (State: Provisional)
- Examples
  - Featured link - Documentation and working example
Context-specific features (State: Stable)
- Documentations
  - Context-specific features - Canada.ca design pattern
Feeds plugin GC override (State: Provisional)
- Documentations
  - Feeds GC overrides - Documentation and working example.
Most requested - Documentation and working example (State: Provisional)
- Examples
  - Most requested - Documentation and working example
Services and information (State: Stable)
- Examples
  - Services and information
- Documentations
  - Services and information
Subway map menu (State: Provisional)
- Examples
- Documentations
  - Subway map menu
GC tables (State: Provisional)
- Examples
  - Tables
Well header responsive (State: Stable)
- Examples
  - Well header responsive
Other components (State: Stable)
- Examples
Context-specific features (State: Stable)
- Examples
  - List - Additional style
Bubble (State: Stable)
- Examples
  - Quick action bubble with default avatar - opening a link
  - Virtual assistant bubble with customized avatar - opening an overlay
- Documentations
  - Bubble
Chat wizard (State: Provisional)
- Examples
  - Chat wizard
  - with JSON setting
- Documentations
  - Chat wizard
- Related documents
  - 2019-15 Research documenation
Data JSON (State: Stable)
- Examples
  - Data JSON
  - Template HTML 5
- Documentations
  - Data JSON
Do action (State: Stable)
- Examples
  - Table
  - JSON
- Documentations
  - Do action
Fieldflow (State: Stable)
- Examples
  - Fieldflow
  - Basic
  - Advanced
  - Alternatives
- Documentations
  - Fieldflow
JSON Manager (State: Stable)
- Examples
  - JSON Manager
  - with Do Action patches
- Documentations
  - JSON Manager
Datalist dynamic suggestion (State: Stable)
- Examples
  - Datalist dynamic suggestion
URL Mapping (State: Stable)
- Examples
- Documentations
  - URL mapping
wb5-click postback converter (State: Deprecated)
- Examples
  - wb5-click postback converter
Well bold (State: Provisional)
- Examples
  - Well bold - Documentation and working example

Templates

Advanced Service - Probably deprecated (État: Stable)
- Examples
Campaign name (État: Stable)
- Examples
  - Campaign name
  - Campaign name 2
- Documentations
  - API documentations
Home (État: Stable)
- Examples
  - Home - Canada.ca
- Documentations
  - API documentations
Other template (État: Stable)
- Examples
Index (État: Stable)
- Examples
  - [Long index page]
- Documentations
  - API documentations
Institutional profile (État: Stable)
- Examples
- Related documents
  - GCWU theme - English institution template
Laws and regulations pages (État: Stable)
- Examples
  - [Act name] ([NN-XX])
  - [Regulation name] ([NN-XX])
- Specification
  - Laws and regulations pages - Canada.ca template
Local navigation (État: Stable)
- Examples
  - [Topic - Local navigation]
  - Task 1
  - Sub task 1
  - Sub task 2
  - Sub task 3
  - Sub task 4
  - Sub task 5
  - Sub task 6
  - Sub task 7
  - Task 2
  - Task 3
  - Sub task 1
  - Sub task 2
  - Sub sub task 1
  - Sub sub task 2
  - Sub task 3
  - Task 4
Ministerial profile (État: Stable)
- Documentations
  - Ministerial profile page
- Examples
  - Ministerial profile
  - Ministerial profile - swearing-in day
News (État: Stable)
- Examples
  - News
Organizational profile (État: Stable)
- Examples
  - [Organization Name]
  - arm’s length - [Organization Name]
Search results (État: Stable)
- Examples
- Documentations
  - API documentations
- Implementation reference
  - Pagination for search templates
Server error message (État: Stable)
- Examples
Splash page - Canada.ca (État: Stable)
- Examples
  - Splash page example
Thematic (État: Provisional)
- Examples
  - Pink Day
  - Dark theme
Beta - Theme, Topic (État: Provisional)
- Examples
  - [Theme - Topic title]
Topic (État: Stable)
- Examples
  - [Topic title]
  - [Topic title, test case 1]

Méli-mélo

Consult méli-mélo dedicated page

Sites and global functionality

Site wide demoed feature (État: Stable)
- Examples
  - Archived - Content page
Breadcrumbs (État: Stable)
- Documentations
  - Breadcrumbs
Helpers (État: Stable)
- Documentations
  - Colour

WET-BOEW feature demos styled with Canada.ca theme

WET-BOEW feature overview

GCWeb project documentation

Evaluations and reports

Developping for GCWeb

Install NodeJS

Building GCweb

Build a local development version: grunt or grunt debug
Run code quality check: grunt test
Build production files: grunt dist
Compile and assemble méli-mélo:
- Run local: grunt méli-mélo
- Run from compiled dist: grunt méli-mélo-runLocal
- Run from wet-boew sites : grunt méli-mélo-remote
Regenerate site web content: grunt site-contents
- _data/components.json
- _data/sites.json
- _data/templates.json
- _wetboew-demos/**

Run GCWeb wetsite locally

Ensure that you have builded GCWeb first

After your are running docking container or the docker composer you will be able to access your local website at: http://localhost:4000

Build Dockerfile locally

docker build -t jekyll-with-env-options .

Run your image

grunt debug

docker run -it --rm -v "$PWD":/usr/src/app -p "4000:4000" --env JEKYLL_OPTIONS='--config _config.yml,_localJekyll.yml' jekyll-with-env-options

alternative with docker-compose

This version leverage the remote theme wet-beoew/gcweb-jekyll. This equivalent if you run with gh-pages through your own GCWeb repository.

docker-compose up

Run the continous integration and deployment script locally

Install ACT - https://github.com/nektos/act

Github fork needed:

Run the continuous deployment script

act -f deploy-gcweb -s my_token=<XXXXXXXXXXXXXX> -s my_username="<GITHUB USERNAME>" - my_email="<GITHUB HANDLE>@users.noreply.github.com" -a <GITHUB HANDLE>

Where:

<GITHUB USERNAME>: Your name, like “John Doe”
<GITHUB HANDLE>: Your github id
<XXXXXXXXXXXXXX>: Your personal access token with access to public repository

Refresh your github pages with the latest theme changes

You can make a commit to your site and it will get regenerated with the latest version of the jekyll theme. Alternatively, the following curl command will told github to regenerate your site.

curl -u <GITHUB HANDLE>:<XXXXXXXXXXXXXX> -X POST https://api.github.com/repos/<GITHUB HANDLE>/<GITHUB REPOSITORY>/pages/builds