Search

Migration instruction - GCWeb theme V5

On this page:

Note for implementer that has used the GCWeb developer build on or before January 30, 2019. (This is not applicable for implemeter that has use the official GCWeb v5 release.) The top menu is now identified by using the CSS class gcweb-menu instead of gcweb-v2.

How to update

Migration notes

Markup before

<footer role="contentinfo" id="wb-info">
	<nav role="navigation" class="container wb-navcurr">
		<h2 class="wb-inv">[[{i18n "tmpl-about-government"]]}</h2>
		[[footercontent]]
	</nav>
	[[footerbrand]]
</footer>

Updated markup

<footer id="wb-info">
	<div class="landscape">
		<nav class="container wb-navcurr">
			<h2 class="wb-inv">[[{i18n "tmpl-about-government"]]}</h2>
			[[footercontent]]
		</nav>
	</div>
	[[footerbrand]]
</footer>

Page header

How to update

Migration notes

Markup before

<header role="banner">
	<div id="wb-bnr" class="container">
		<section id="wb-lng" class="visible-md visible-lg text-right">
			<h2 class="wb-inv">Language selection</h2>
			<div class="row">
				<div class="col-md-12">
					<ul class="list-inline margin-bottom-none">
						[[List of available language]]
					</ul>
				</div>
			</div>
		</section>
		<div class="row">
			<div class="brand col-xs-8 col-sm-9 col-md-6">
				<a href="https://www.canada.ca/en.html"><img src="./GCWeb/assets/sig-blk-en.svg" alt=""><span class="wb-inv"> Government of Canada / <span lang="fr">Gouvernement du Canada</span></span></a>
			</div>
			<section class="wb-mb-links col-xs-4 col-sm-3 visible-sm visible-xs" id="wb-glb-mn">
				<h2>Search and menus</h2>
				<ul class="list-inline text-right chvrn">
				<li><a href="#mb-pnl" title="Search and menus" aria-controls="mb-pnl" class="overlay-lnk" role="button"><span class="glyphicon glyphicon-search"><span class="glyphicon glyphicon-th-list"><span class="wb-inv">Search and menus</span></span></span></a></li>
				</ul>
				<div id="mb-pnl"></div>
			</section>
			<section id="wb-srch" class="col-xs-6 text-right visible-md visible-lg">
				<h2>Search</h2>
				<form action="#" method="post" name="cse-search-box" role="search" class="form-inline">
					<div class="form-group">

						[[Custom block as per your search implementation]]

						<label for="wb-srch-q" class="wb-inv">Search website</label>
						<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="27" maxlength="150" placeholder="Search Canada.ca" />
						<datalist id="wb-srch-q-ac">
							<!--[if lte IE 9]><select><![endif]-->
							<!--[if lte IE 9]></select><![endif]-->
						</datalist>
					</div>
					<div class="form-group submit">
						<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"><span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button>
					</div>
				</form>
			</section>
		</div>
	</div>
	[[ Menu]]
	<nav role="navigation" id="wb-bc" property="breadcrumb">
		<h2>You are here:</h2>
		<div class="container">
			<div class="row">
				<ol class="breadcrumb">
					[[ Breadcrumb items]]
				</ol>
			</div>
		</div>
	</nav>
</header>

Updated markup

<header>
	<div id="wb-bnr" class="container">
		<section id="wb-lng" class="text-right">
			<h2 class="wb-inv">Language selection</h2>
			<ul class="list-inline margin-bottom-none">
				[[List of available language]]
			</ul>
		</section>
		<div class="row">
			<div class="brand col-xs-5 col-md-4">
				<a href="https://www.canada.ca/en.html"><img src="./GCWeb/assets/sig-blk-en.svg" alt=""><span class="wb-inv"> Government of Canada / <span lang="fr">Gouvernement du Canada</span></span></a>
			</div>
			<section id="wb-srch" class="col-lg-8 text-right visible-md visible-lg">
				<h2>Search</h2>
				<form action="#" method="post" name="cse-search-box" role="search" class="form-inline">
					<div class="form-group">

						[[Custom block as per your search implementation]]

						<label for="wb-srch-q" class="wb-inv">Search Canada.ca</label>
						<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca" />
						<datalist id="wb-srch-q-ac">
						</datalist>
					</div>
					<div class="form-group submit">
						<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"><span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button>
					</div>
				</form>
			</section>
		</div>
	</div>
	[[ Menu]]
	<nav id="wb-bc" property="breadcrumb">
		<h2>You are here:</h2>
		<div class="container">
			<ol class="breadcrumb">
				[[ Breadcrumb items]]
			</ol>
		</div>
	</nav>
</header>

Menu

How to update

Migration notes

Technical notes

Menu markup before

<nav role="navigation" id="wb-sm" data-ajax-replace="./ajax/sitemenu-en.html" data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement">
	<div class="container nvbar">
	<h2>Topics menu</h2>
	<div class="row">
	<ul class="list-inline menu">
	<li><a href="https://www.canada.ca/en/services/jobs.html">Jobs</a></li>
	<li><a href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration</a></li>
	<li><a href="https://travel.gc.ca/">Travel</a></li>
	<li><a href="https://www.canada.ca/en/services/business.html">Business</a></li>
	<li><a href="https://www.canada.ca/en/services/benefits.html">Benefits</a></li>
	<li><a href="https://www.canada.ca/en/services/health.html">Health</a></li>
	<li><a href="https://www.canada.ca/en/services/taxes.html">Taxes</a></li>
	<li><a href="https://www.canada.ca/en/services.html">More services</a></li>
	</ul>
	</div>
	</div>
</nav>

Hardcoded menu item baseline markup

<nav class="gcweb-menu" typeof="SiteNavigationElement">
	<div class="container">
		<h2 class="wb-inv">Menu</h2>
		<button type="button" aria-haspopup="true" aria-expanded="false"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
		<ul role="menu" aria-orientation="vertical">

		[[ Menu items ]]

		</ul>
	</div>
</nav>

French version

<nav class="gcweb-menu" typeof="SiteNavigationElement">
	<div class="container">
		<h2 class="wb-inv">Menu</h2>
		<button type="button" aria-haspopup="true" aria-expanded="false">Menu<span class="wb-inv"> principal</span> <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
		<ul role="menu" aria-orientation="vertical">

		[[ Menu items ]]

		</ul>
	</div>
</nav>

Fetching the menu item baseline markup

<nav class="gcweb-menu" typeof="SiteNavigationElement">
	<div class="container">
		<h2 class="wb-inv">Menu</h2>
		<button aria-haspopup="true" type="button"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
		<ul role="menu" data-ajax-replace="../ajax/sitemenu-v5-en.html">
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/jobs.html">Jobs and the workplace</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://travel.gc.ca/">Travel and tourism</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/business.html">Business and industry</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/benefits.html">Benefits</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/health.html">Health</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/taxes.html">Taxes</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/environment.html">Environment and natural resources</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/defence.html">National security and defence</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/culture.html">Culture, history and sport</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/policing.html">Policing, justice and emergencies</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/transport.html">Transport and infrastructure</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://international.gc.ca/world-monde/index.aspx?lang=eng">Canada and the world</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/finance.html">Money and finances</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/science.html">Science and innovation</a></li>
		</ul>
	</div>
</nav>

French version

<nav class="gcweb-menu" typeof="SiteNavigationElement">
	<div class="container">
		<h2 class="wb-inv">Menu</h2>
		<button type="button" aria-haspopup="true" aria-expanded="false">Menu<span class="wb-inv"> principal</span> <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
		<ul role="menu" aria-orientation="vertical" data-ajax-replace="../ajax/sitemenu-v5-fr.html">
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/jobs.html">Emplois et milieu de travail</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration et citoyenneté</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://voyage.gc.ca/">Voyage et tourisme</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/entreprises.html">Entreprises et industrie</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/benefits.html">Prestations</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/sante.html">Santé</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/impots.html">Impôts</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/environnement.html">Environnement et ressources naturelles</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/defense.html">Sécurité nationale et défense</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/culture.html">Culture, histoire et sport</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/police.html">Services de police, justice et urgences</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/transport.html">Transport et infrastructure</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://international.gc.ca/world-monde/index.aspx?lang=fra">Canada et le monde</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/finance.html">Argent et finances</a></li>
			<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/science.html">Science et innovation</a></li>
		</ul>
	</div>
</nav>

Menu items template

<li role="presentation">
	<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">[[Theme title]]</a>
	<ul role="menu" aria-orientation="vertical">
		<li role="presentation">
			<a role="menuitem" href="https://www.canada.ca/[[path to the theme]]">[[Theme linked title]]</a>
		</li>
		<li role="separator"></li>

[[ For each sub menu for that theme ]]
		<li role="presentation"><a role="menuitem" href="[[Link to the page associated with this menu item ]]">[[ Menu item text ]]</a></li>
[[ End for each ]]

		<li role="separator" aria-orientation="vertical"></li>
		<li role="presentation">
			<a data-keep-expanded="md-min" href="#" role="menuitem" aria-haspopup="true" aria-expanded="true">[[ Most requested text ]]</a>
			<ul role="menu" aria-orientation="vertical">

[[ For each most requested item for that theme ]]
				<li role="presentation"><a role="menuitem" href="[[Link to the page associated with this menu item ]]">[[ Menu item text ]]</a></li>
[[ End for each ]]

			</ul>
		</li>
	</ul>
</li>

Theme linked title

Behaviour:

Example 1

Reuse some wording

Title
Immigration and citizenship
Short title
Immigration: home
Code sample
Immigration<span class="hidden-xs hidden-sm"> and citizenship</span><span class="visible-xs-inline visible-sm-inline">: home</span>
Example 2

Append ":home" at the end

Title
Benefits
Short title
Benefits: home
Code sample
Benefits<span class="visible-xs-inline visible-sm-inline">: home</span>
Example 3

Provide short title that is not the first capitalized word.

Title
National security and defence
Short title
Defence: home
Code sample
<span class="hidden-xs hidden-sm">National security and defence</span><span class="visible-xs-inline visible-sm-inline">Defence: home</span>

Home Page

Note to designer

How to update

Migration notes

Updated markup

See the new markup here:

Double space for list

Double spacing list for ordered and unordered list is now available. It can be applied by using the CSS class ".lst-spcd-2".

Note: This feature was introduced with his re-design and are currently only for this theme.

Responsive list

Responsive list by applying the CSS class ".list-responsive" on "ol,ul".

The behavior is:

Tips: If some of your items in your list are rendered in two line or more, use the WET equal height plugin (wb-eqht) on the "ol,ul" element.

Note: This feature was introduced with his re-design and are currently only for this theme.

Linked figure design pattern

This pattern is to have the whole figure to be a clickable area, but to only style the figcaption as a link. The focus visible area is the whole figure.

How to use it

Minimal example:

<a class="figcaption" href="#">
	<figure>
		<figcaption>A figure caption linked</figcaption>
		[[ content ]]
	</figure>
</a>

Example with the home page use case:

<a class="figcaption" href="#">
	<figure class="well well-sm brdr-rds-0">
		<img class="img-responsive full-width" src="[[assets]]/img/520x200.png" alt=""/>
		<figcaption class="h5">A figure caption linked</figcaption>
		<p>Short description or intro linked paragraph that correspond to this figure</p>
	</figure>
</a>

Limited width content

With this new look, new generic pages created should limit the width of paragraph and list. Further guidance are going to be provided by the Content and IA spec.

To enable that design, the implementer can add the following CSS class .cnt-wdth-lmtd to the <body> element of the page where the width of paragraph and list item need to be limited. Also, this can be set by adding the CSS class name .cnt-wdth-lmtd to a sectioning element <section class="cnt-wdth-lmtd">...<section> inside the main content of your page.

Navigation pages, Theme, Topic, Home,...

Navigation page need to be identified by adding a global class. Before it was .secondary which are now deprecated because of the ambuiguity of it's purpose. It don't represent secondary content, but it was representing navigational page type. So the new name is now .page-type-nav which make it clear it's purpose.

The following change apply for any navigation page identified by the content and IA spec such:

Changes:

Call to action button

This is a new button style .btn-call-to-action to define the main call of action button/link on a page.

Working example and documentation: Content page

To be confirmed by guidance from the Content and IA spec. This changes might require you to replace existing .btn-primary CSS class by .btn-call-to-action for button/link representing the main call to action for a page.

Other notable difference

Here a list of difference that we have noted when you are going to apply this new design

Difference if there no markup change - Incomplete

Note: as Nov 2, we didn't compared both version, like how the previous markup (from GCWeb 4.0.29) would be different from this new design

Change or review to makes when applying this design -

Note: Other requirement might get added, at this time of implementing this new look in GCWeb github repos it wasn't fully compliant to Content and IA spec 1.5.1.

Some of the items bellow might be related to being conform to Content and IA spec 1.5.1 or to ensure previous change made to GCWeb are applied. Those change might not neccessary directly applicable with applying the new look.

Page details section (before the end of the main)

History:

Lastest markup:

<div class="pagedetails">
	<div class="row">
		<div class="col-sm-6 col-md-5 col-lg-4">
			<details class="brdr-0">
				<summary class="btn btn-default text-center">Report a problem on this page</summary>
				<div class="well row">

					<!-- Report a probleme inline form code here -->

				</div>
			</details>
		</div>
		<!-- Share button -->
		<div class="wb-share col-sm-4 col-md-3 col-sm-offset-2 col-md-offset-4 col-lg-offset-5" data-wb-share='{"lnkClass": "btn btn-default btn-block"}'></div>
		<!-- END Share button -->
	</div>
	<dl id="wb-dtmd">
		<dt>Date modified: </dt>
		<dd><time property="dateModified">YYYY-MM-DD</time></dd>
	</dl>
</div>

Some rules:

Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: