Language selection

Search

Experimental functionality - GCWeb theme

Unstable feature

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

Learn more about the design decision around experimental features.

The documentation and/or a working example for those feature could be incomplete or not available.

Feature availability

The following table describe until which version of GCWeb each experimental feature are going to be available. The feature availability are going to be re-evaluated at every release. A widthdraw experimental feature would be notify one version in advance.

Status description
<not specified>
Experimental
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 .p-0 Set a padding of 0px v5.1
CSS .mb-sm-5 Set a margin bottom of 50px for view port from small screen and up v5.1
CSS .p-sm-3 Set a padding of 15px for view port from small screen and up v5.1
CSS .px-sm-3 Set a left and right padding of 15px for view port from small screen and up v5.1
CSS .bg-darker Full black background color v5.1
CSS .bg-gctheme and .bg-gctheme.well.header-rwd GCWeb theme default background color v5.1
CSS .bg-pnkDy and .bg-pnkDy.well.header-rwd Pink day background color v5.1
CSS .pnkDy-theme set global Apply template color global changed for the pink day color. Globally as that property is defined on the <html> or <body> element v5.1
CSS .dark-theme set global Apply template color global changed for full black. Globally as that property is defined on the <html> or <body> element v5.1
CSS .bg-cover Background size cover v5.1
Plugin [data-bgimg] Take the URL value and set it as the background image. To be replaced by CSS4 selector. v5.1
CSS .bg-img-hdng Add a background image to a heading. v5.1

Experimental feature documentation

CSS experimental feature must be accompagnied with the class .experimental within his context of use.

Experimental working example

Well header responsive with a background image

Heading

Secondary title

Well header responsive with background image and padding controls

Mostly for campaing page with content-fluid width.

Heading

Secondary title

<div class="experimental bg-cover" data-bgimg="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 add the CSS class only for 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", "experimental");
}

} )( 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.

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: