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