Search

Provisional functionality - GCWeb theme

Unstable feature

To be used at your own risk. All functionalities described below can be removed in any subsequent minor/major release and are excluded from the GCWeb public API.

Learn more about the design decision around provisional features.

The documentation and/or working examples for those features could be incomplete or not available.

On this page

Feature availability

The following table describes until which version of GCWeb each provisional feature will be available. The features' availability will be re-evaluated at every release. A withdrawn provisional feature would be notified one version in advance.

Provisional feature removal first notice

The following provisional feature were identified as Deprecated feature during WET Roadmap meeting hold on June 23th, 2021.

The rational was mostly their stale state, their lack of documentation, requiring complete code review/split, their low/stale development activity and a low engagement with DTO.

However, this is a notice and it is possible to take all the required action to keep the feature as provisional or move it stable. To be keep as provisional feature, an implementation plan with reasonable deadline and necessary resources for its execution must be provided by September 2021 via commenting this Github issue.

Without providing that information, we would move those feature in the upcoming September méli-mélo feature and then withdraw from the next GCWeb minor/major version three weeks after its first availability in Canada.ca as a méli-mélo feature. In other word, it would be possible to use it on Canada.ca but at your own risk and no update will be accepted one year after.

Status description
<not specified>
Provisional
Withdrawn
The feature are not available
Supported
The feature are included and supported by the GCWeb public API.
Withdrawn after v.Major.Minor
The v.Major.Minor represent the last version where that feature is available. Authors must consider an alternative or remove that feature.
Name Description Available in Status
CSS .bg-pnkDy and .bg-pnkDy.well.header-rwd Pink day background color v5.1
CSS .pnkDy-theme set global Apply global template color change for the pink day color, as that property is defined on the <html> or <body> element v5.1
CSS .dark-theme set global Apply global template color change for full black, as that property is defined on the <html> or <body> element v5.1
CSS .bg-img-hdng Add a background image to a heading. v5.1 Identified as being a deprecated feature on June 23, 2021. Will be move as méli-mélo feature in September 2021 compilation and then withdraw from next GCWeb minor/major version three weeks after its first availability in Canada.ca as a méli-mélo feature.
CSS .icon-warning-light Change the color to #DF7200 v7.0 Identified as being a deprecated feature on June 23, 2021. Will be move as méli-mélo feature in September 2021 compilation and then withdraw from next GCWeb minor/major version three weeks after its first availability in Canada.ca as a méli-mélo feature.
Template .gc-pg-hlpfl "Page success widget" design pattern to let users share their experience on the page. v7.0
Plugin .wb-chtwzrd

Transforms a simple form into a conversation like experience used as a wizard.

v7.0 Identified as being a deprecated feature on June 23, 2021. Will be move as méli-mélo feature in September 2021 compilation and then withdraw from next GCWeb minor/major version three weeks after its first availability in Canada.ca as a méli-mélo feature.
Template .gc-subway

GC subway map navigation for Service initiation template.

v8.0.1
CSS .gc-chckbxrdio

Adopt the new large input touch targets for checkboxes and radio-buttons

v8.0.1 Stable (v9.4.0)
Component .gc-followus

New layout and design pattern. To support the theme/topic beta template.

v9.1.0
Component .gc-topic-bg

Promotional image and page header. To support the theme/topic beta template.

v9.1.0
Component .gc-contributors

New layout and design pattern. To support the theme/topic beta template.

v9.1.0

For more provisional features, check out the WET-BOEW provisional features page.

Stabilized features
Name Description Available in Status
CSS .p-0 Set a padding of 0px v5.1 Supported in GCWeb since v6.0
CSS .mb-sm-5 Set a margin bottom of 50px for view port from small screen and up v5.1 Supported in GCWeb since v6.0
CSS .p-sm-3 Set a padding of 15px for view port from small screen and up v5.1 Supported in GCWeb since v6.0
CSS .px-sm-3 Set a left and right padding of 15px for view port from small screen and up v5.1 Supported in GCWeb since v6.0
CSS .bg-darker Full black background color v5.1 Supported in GCWeb since v9.0
CSS .bg-gctheme and .bg-gctheme.well.header-rwd GCWeb theme default background color v5.1 Supported in GCWeb since v9.0
CSS .bg-cover Background size cover v5.1 Supported in GCWeb since v9.0
Plugin [data-bgimg] Take the URL value and set it as the background image. To be replaced by CSS4 selector. v5.1 Supported in GCWeb since v9.0
CSS .stretched-link Propagates the clickable area around an hyperlink tag up to a relatively positioned parent. v5.1 Supported via GCWeb since v6.0
CSS .alert-danger Adopt the new danger alert design, without a background colour. v7.0 Supported in GCWeb since v9.0
CSS .alert-warning Adopt the new warning alert design, without a background colour. v7.0 Supported in GCWeb since v9.0
CSS .alert-success Adopt the new success alert design, without a background colour. v7.0 Supported in GCWeb since v9.0
CSS .alert-info Adopt the new info alert design, without a background colour. v7.0 Supported in GCWeb since v9.0
CSS .gc-thickline H1 with short bold red underline v8.0.1 Supported in GCWeb since v9.0

Provisional feature documentation

CSS provisional features must be accompanied by the class .provisional within his context of use.

Provisional feature working examples

In this section

Responsive well header with a background image

Heading

Secondary title

Responsive well header with background image and padding controls

Mostly for campaing pages with content-fluid width.

Heading

Secondary title

<div class="provisional bg-cover" data-bgimg="https://wet-boew.github.io/v4.0-ci/demos/tabs/img/investinourfuture.jpg">
	<div class="container p-0 p-sm-3">
		<div class="well header-rwd mrgn-tp-md mrgn-bttm-md bg-dark text-white brdr-0">
			<h4 class="mrgn-tp-md">Heading</h4>
			<p>Secondary title</p>
		</div>
	</div>
</div>

Margin bottom small view port and up

Heading

Secondary title

Second well

Theme template colors

Javascript code sample to schedule the CSS addition for pink day

The following script adds the CSS class only on April 10, 2019 based on local time.

( function( d ) {
"use strict";

var t = new Date(),
	msT = t.getTime(),
	s = new Date( 2019, 3, 10, 0, 1 ),
	e = new Date( 2019, 3, 10, 23, 59 );

if ( s.getTime() < msT && msT < e.getTime() ) {
	d.getElementsByTagName( "html" )[ 0 ].classList.add ("pnkDy-theme", "provisional");
}

} )( document );

Background image on heading

Mostly for Services and information section.

Impact Assessment

Impact assessments process

Learn about the purpose and steps of impact assessments under the Impact Assessment Act.

Canadian Impact Assessment Registry

Information on potential and current IAs of projects subject to the federal IA process.

How to get involved

Public

Learn how the public can participate in impact assessments.

Indigenous

Learn about the Indigenous consultation process in impact assessments.

In the following example, adding the .stretched-link class to the hyperlink found inside the <h3> tag will result in propagating the clickable area all the way up to the parent <div> with the .col-xy-z class because it has a "relative" position.

Learn more about Canada’s Digital Charter

Learn how Canada’s Digital Charter will build a foundation of trust in a digital world.

National Indigenous History Month

Celebrate National Indigenous History Month in June

Icon warning color

Adding provisional icon-warning-light in the class will change the color

Without "provisional icon-warning-light" class

With "provisional icon-warning-light" class

Page success widget

Planned to eventually replace Report a problem. Uses multiple features: wb-postback and data-wb-doaction plugins, as well as nojs-* styles and Font Awesome.

Did you find what you were looking for?

What was wrong?

(Don’t include any personal information)
Maximum 300 characters

Thank you for your feedback

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: