Migration instruction - GCWeb theme V5

On this page:

Page footer
Page header
Menu
Home Page
Double space for list
Responsive list
Linked figure design pattern
Limited width content
Navigation pages, Theme, Topic, Home,...
Call to action button
Other notable difference

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

Wrap the first navigation with a "div.landscape"
Cleanup: Remove the aria role "contentinfo" on the footer element
Cleanup: Remove the aria role "navigation" on the nav element

Migration notes

The new look would be only effective after the markup change is completed
If the markup change is not completed, the original style will continue to be applied

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

Change the CSS class on the top left FIP and on the Search section
Remove the "mobile menu" div placeholder.
Update the JS
Update the markup for the menu, the new menu are independent from the previous one
Minor markup update for the language section.
Update the attribute on the input search field.

Migration notes

The home page need to include an additional CSS class in order to style the menu differently. Like to add the CSS class "home" to the "<body>" element.
The color for the search button would be automated updated when the new style is applied.
Menu, see the following section for more details
- The new menu style is applied when the CSS class gcweb-menu is applied to the navigation section of the main menu.
  - You will notice the "border-top" is added at the top of the menu.
  - You will notice the new styling for the menu button.
  - This new menu require to update theme.min.js
  - It don't use the menu plugin in WET.
Main body remove the unnecessary aria role [role=main] set on the <main> element.
Review the text for skip link, they were a change a year ago to change 'Skip: "About this site"' for 'Skip: "About government"'. In French it is from 'Passer à « À propos de ce site »' for 'Passer à « Au sujet du gouvernement »'

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

Removal of CSS visibility class to #wb-lng
Removal of the CSS grid (div.row and div.col-md-12) in #wb-lng
Remove unnecessary role (banner, navigation)
Search and menus section (.wb-mb-links) was removed
Column definition (CSS class) was updated on the top left brand logo
Removal of the div.row wrapping the breadcrumb ordered list
Major remake of the Menu. The menu bar (mega menu) has changed to a menu button (top menu).
On the input search field, change the attribute maxlength to "170"
On the input search field, change the attribute size to "34"
The label for the search input field has changed to be same as the placeholder text.
The IE 9 conditional comment inside the datalist element was removed because IE 9 is not supported
The CSS class wb-inv are removed from the breadcrumb. It's not required because it's default style is the same as applying the CSS class wb-inv.
The submit button surrounding HTML remain the same as before.
The label and the placeholder of the input are now the same exact text. "Search Canada.ca" and "Rechercher dans Canada.ca"

<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>

How to update

An initial menu with the content and the markup would be available
The following is to provide guidance on how it can be updated

Migration notes

The new markup are provided in the following section.

Technical notes

The menu was designed similary like the menu design pattern from WAI-ARIA 1.1. See the technical notes in the gcweb theme meta page.
The menu item focus are managed by using a Roving tabindex. - https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex
There is a confusion in the WAI-ARIA practice 1.1 vs WAI-ARIA 1.1 spec.
- it's said: WAI-ARIA practice https://www.w3.org/TR/wai-aria-practices-1.1/#wai-aria-roles-states-and-properties-12
  
  5th bullet items that the [role=menuitem] has the [aria-expanded] state
- it's said: https://www.w3.org/TR/wai-aria-1.1/#aria-expanded
  
  That states is only applicable (Inherits into Roles) for [role=menu] and [role=menubar]. This don't include [role=menuitem]
- it's illustrated: https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-2/menubar-2.html
  
  That the item with the [role=menuitem] has the [aria-expanded] state.
So, we need to check the mailing list and the bug list to know if that was notified to W3C WAI group. If not we need to notify them.

For now, we implement the pattern as illustrated by WAI-ARIA Practice 1.1.

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

The id "wb-sm" removed.
The class attribute on the <nav> element is replaced by a new CSS class
The CSS class "nvbar" removed from the inner <div>
Complete new markup for menu item (Details in following section)
There is some translation string and markup variation between language for the button. It's the invisible complementary text.

<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

All the items for the hardcoded menu applies.
The CDN / central link where all the menu is centrally managed are going to be provided by the Principal Publisher.
The unordered list <ul> is intentionally empty
Change the value of the attribute data-ajax-append to match the URL of your menu
The menu support the following fetch method:
- [data-ajax-append]
- [data-ajax-prepend]
- [data-wb-ajax]
- [data-ajax-replace]
In the following working example, you can see a list of the top menu items which represents each theme.

<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

There is one menu item per theme, repeat the following pattern for each theme.
Each theme title that is linked to the actual theme has an adaptable text between "medium to over" view compare to "small and under" view. See the following example.
The label [[ Most requested text ]] are "En demande" in French
The [[Theme linked title]] include markup to display a special short title in extra small and small view port. It's behaviour are described in the following sub-section
This template can be use for the HTML fragment to fetch all menu items.

<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:

Provide a short title in mobile, but keep the long title in tablet and desktop view (medium and upper)
The short title finish with ": home" text. French equivalent hasn't been provided yet.
Try to reuse the same word of the title when only the short title is displayed.

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

Both promotion at the bottom would need to be updated to correspond to current one.
The promotion markup follow a new design pattern for linked figure.
New/added:
- Double spacing list for ordered and unordered list: ".lst-spcd-2"
- Responsive list by applying the CSS class ".list-responsive" on "ol,ul" forth column in large and extra large view; two column for medium and small view; one column for extra small view;
- Styling for linked figure
The home page top banner background image can be updated through CSS by changing the URL or by replacing the image file "assets/bkg-home-banner.jpg". Idem for the "Your government" section.

How to update

Remove the [role=main] set on the <main> element
Remove the CSS class "container" on the main element, "container" css class would be manually added in the content.
Add the CSS class "home" to the body element

Migration notes

Add the CSS class "home" to the body element
Add the CSS class "page-type-nav" to the body element
Remove the promotional "<aside>" that was prior the main element.
Ensure the <h1> element are included in the editable area. That element is moved inside nested <div> element in the main section.
Remove the CSS class "container" on the main element, "container" css class would be manually added in the content.
The home page style define the following not re-usable style:
- .home-banner: Set background style, like an image, around the heading level 1
- .home-most-requested: Set font-size, non-standard, to the most requested list item
- .home-your-gov: Set a floating background image for the your government section

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:

The list is rendered in forth column in large and extra large view.
The list is rendered in two column for medium and small view.
The list is rendered in one column for extra small view.

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

Wrap an anchor on a figure element
Add the CSS class ".figcaption" to the anchor
The <figcaption> as a child to the <figure> element are required.
This style must not be used if the figcaption are missing from the figure element.

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:

Home page
Topic page
Theme page
...

Changes:

.secondary for .page-type-nav.

The older CSS class would still work, but it should be updated
Remove the custom CSS class set on in-page section header and on dormat link header. Now the customize sizing are managed by adding the CSS class .page-type-nav
- For dormat link: <h3 class="h5">...</h3> are changed to: <h3>...</h3>. Using the class "h5" on dormat link are deprecated for navigation page type.
- For section title: remain <h2>...</h2> but it will render with a new font-size

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

Breadcrumb: You will notice the breadcrumb are moved 15 pixel right and 15 pixel left. We expected that change would have minor/trivial impact on the user. If needed, a solution can be provided but migth require some additional markup change for implementor.
For implementation that didn't moved the date modified under the "Report a problem" row as per C&IA v1.5.1, there will be a larger top margin at the bottom of each pages.

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.

Review the text for skip link, they were a change a year ago to change 'Skip: "About this site"' for 'Skip: "About government"'. In French it is from 'Passer à « À propos de ce site »' for 'Passer à « Au sujet du gouvernement »'
(Under review - See item 33) The size of the heading of any dormat link need to be updated to a size comparable to an heading level 6. Implementer would need to edit each dormat link and change the current CSS class h5 for the CSS class h6.
Ensure the date modified is after the "Report a probleme" instead of being before. The top margin was added to that field.

Page details section (before the end of the main)

History:

Major - visual update v5 - Move of the date modified after button as per the Content and IA spec.
Major - visual update v5 - Include the CSS class container (only for the home page) when the CSS class container is not added to the main element.
Minor - v.4.0.28 - April 27, 2018 - Removal of the Privacy statement
Major - v.4.0.27 - December 14, 2017: Markup restructuration - Grid cell are now independant from the interactive elements to display the report a problem inline form.
Major - v.4.0.22 - August 9, 2016: Markup restructuration - Feedback link was change into an inline report a problem form.
Initial markup - v4.0.0 - Date modified followed by feedback form link.

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:

If the main element don't have the "container" CSS class, page details need to have that class set in order to keep it's content centered. Like for the home page with the visual update v5.
If the page can be shared, the share button is added

Page details

Date modified:: 2018-11-02

Migration instruction - GCWeb theme V5

Page footer

How to update

Migration notes

Markup before

Updated markup

Page header

How to update

Migration notes

Markup before

Updated markup

Menu

How to update

Migration notes

Technical notes

Menu markup before

Hardcoded menu item baseline markup

French version

Fetching the menu item baseline markup

French version

Menu items template

Theme linked title

Example 1

Example 2

Example 3

Home Page

Note to designer

How to update

Migration notes

Updated markup

Double space for list

Responsive list

Linked figure design pattern

How to use it

Limited width content

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

Changes:

Call to action button

Other notable difference

Difference if there no markup change - Incomplete

Change or review to makes when applying this design -

Page details section (before the end of the main)

Page details