From e97703c46f7e321446c99d1f8007cfb2d3375e89 Mon Sep 17 00:00:00 2001 From: Mihai Polerca Date: Tue, 8 Aug 2023 23:03:45 -0400 Subject: [PATCH 01/10] WCAG upgrade - Create test page for Display and Layout --- _data/common.json | 68 +++ common/display/display-en.html | 970 ++++++++++++++++++++++++++++++ common/display/display-fr.html | 1015 ++++++++++++++++++++++++++++++++ common/display/index.json-ld | 34 ++ common/layout/index.json-ld | 34 ++ common/layout/layout-en.html | 758 ++++++++++++++++++++++++ common/layout/layout-fr.html | 753 +++++++++++++++++++++++ 7 files changed, 3632 insertions(+) create mode 100644 common/display/display-en.html create mode 100644 common/display/display-fr.html create mode 100644 common/display/index.json-ld create mode 100644 common/layout/index.json-ld create mode 100644 common/layout/layout-en.html create mode 100644 common/layout/layout-fr.html diff --git a/_data/common.json b/_data/common.json index 1faab028f2..a952f4f28f 100644 --- a/_data/common.json +++ b/_data/common.json @@ -195,6 +195,74 @@ ] } } +,{ + "@context": { + "@version": 2.0, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Display", + "fr": "Affichage" + }, + "description": { + "en": "Bootstrap and WET utility classes showcasing elements display options such as float, visibility, clearing, opacity, and toggling, accompanied by practical examples to test and observe different content layouts.", + "fr": "Classes utilitaires de Bootstrap et WET qui illustrent différentes façons d'afficher des éléments, tels que le flottant, la visibilité, le dégagement, l'opacité et la bascule. Les exemples fournis vous permettent de tester et d'observer les différents dispositions de contenu." + }, + "modified": "2023-08-02", + "componentName": "display", + "status": "stable", + "pages": { + "docs": [ + { + "title": "Display", + "language": "en", + "path": "display-en.html" + }, + { + "title": "Affichage", + "language": "fr", + "path": "display-fr.html" + } + ] + } +} +,{ + "@context": { + "@version": 2.0, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Layout", + "fr": "Mise en page" + }, + "description": { + "en": "Bootstrap and WET classes showcasing layout options such as flexbox, CSS grid, grid baseline (containers) accompanied by practical examples to test and observe different page layouts.", + "fr": "Classes de Bootstrap et WET qui illustrent différentes façons de mise en page tels que flexbox, grille CSS, ligne de base de la grille (conteneurs). Les exemples fournis permettent de tester et d'observer les différents dispositions de mise en page." + }, + "modified": "2023-08-03", + "componentName": "layout", + "status": "stable", + "pages": { + "docs": [ + { + "title": "Layout", + "language": "en", + "path": "layout-en.html" + }, + { + "title": "Mise en page", + "language": "fr", + "path": "layout-fr.html" + } + ] + } +} ,{ "@context": { "@version": 1.1, diff --git a/common/display/display-en.html b/common/display/display-en.html new file mode 100644 index 0000000000..4625c5e361 --- /dev/null +++ b/common/display/display-en.html @@ -0,0 +1,970 @@ +--- +{ + "title": "Display", + "language": "en", + "altLangPage": "display-fr.html", + "description": "Bootstrap and WET utility classes showcasing elements display options such as float, visibility, clearing, opacity, and toggling, accompanied by practical examples to test and observe different content layouts", + "dateModified": "2023-08-01" +} +--- + +

This page showcases Bootstrap display utility features including some integration from wet-boew like toggling content.

+ +

On this page:

+ + + +

Bootstrap

+ +

Float

+ +

Bootstrap 3 .clearfixworking example

+
+
+
Column 1
+
Column 2
+
Column 3
+ +
+
+

This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.

+
+

Code sample

+
<div class="well">
+	<div class="row">
+	<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 1</div>
+	<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 2</div>
+	<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 3</div>
+	<!-- Add clearfix class to clear floated elements -->
+	<div class="clearfix"></div>
+</div>
+<p class="well">This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.</p>
+</div>
+ +

Bootstrap 3 .center-block class working example

+
+
+ This element is centered horizontally within its parent container. +
+
+

Code sample

+
<div class="well">
+	<div class="center-block well" style="width: 200px; height: 200px; background-color: #ffffff;">
+		This element is centered horizontally within its parent container.
+</div>
+</div>
+ +

Bootstrap 3 .pull-right class working example

+
+
+ This element is floated to the right within its parent container. +
+
+

Code sample

+
<div class="well" style="height: 115px;">
+	<div class="pull-right well">
+		This element is floated to the right within its parent container.
+	</div>
+</div>
+ +

Bootstrap 3 .pull-left class working example

+
+
+ This element is floated to the left within its parent container. +
+
+
+<div class="clearfix"> </div> +

Code sample

+
<div class="well" style="height: 115px;">
+	<div class="pull-left well">
+		This element is floated to the left within its parent container.
+	</div>
+</div><div class="clearfix"> </div>
+
+ +

Clear

+ +

WET-BOEW .clr-lft-lg class working example

+
+
+ This element clears the floated elements to the left on large screens (lg) within its parent container. +
+
+

Code sample

+
<div class="well">
+	<div class="clr-lft-lg well">
+		This element clears the floated elements to the left on large screens (lg) within its parent container.
+	</div>
+</div>
+

WET-BOEW .clr-lft-md class working example

+
+
+ This element clears the floated elements to the left on medium screens (md) within its parent container. +
+
+

Code sample

+
<div class="well">
+	<div class="clr-lft-md well">
+		This element clears the floated elements to the left on medium screens (md) within its parent container.
+	</div>
+</div>
+

WET-BOEW .clr-rght-lg class working example

+
+
+ This element clears the floated elements to the right on large screens (lg) within its parent container. +
+
+

Code sample

+
<div class="well">
+	<div class="clr-rght-lg well">
+		This element clears the floated elements to the right on large screens (lg) within its parent container.
+	</div>
+</div>
+

WET-BOEW .clr-rght-md class working example

+
+
+ This element clears the floated elements to the right on medium screens (md) within its parent container. +
+
+

Code sample

+
<div class="well">
+	<div class="clr-rght-md well">
+		This element clears the floated elements to the right on medium screens (md) within its parent container.
+	</div>
+</div>
+ +

Toggling content

+ +

Bootstrap 3 .hide class working example

+
+
+ This element is hidden on all screen sizes. +
+
+

Code sample

+
<div class="well">
+	<div class="hide well">
+		This element is hidden on all screen sizes.
+	</div>
+</div>
+ +

Bootstrap 3 .show class working example

+
+
+ This element is visible on all screen sizes. +
+
+

Code sample

+
<div class="well">
+	<div class="show well">
+		This element is visible on all screen sizes.
+	</div>
+</div>
+ +

Bootstrap 3 .invisible class working example

+
+ +
+

Code sample

+
<div class="well">
+	<div class="invisible well">
+		This element is invisible but still takes up space in the layout.
+	</div>
+</div>
+ +

Bootstrap 3 .text-hide class working example

+
+
+ This text is hidden visually but remains accessible to screen readers. +
+
+

Code sample

+
<div class="well">
+	<div class="text-hide well">
+		This text is hidden visually but remains accessible to screen readers.
+	</div>
+</div>
+ +

Bootstrap 3 .hidden class working example

+
+ +
+

Code sample

+
<div class="well">
+	<div class="hidden well">
+		This element is hidden on all screen sizes.
+	</div>
+</div>
+ +

WET-BOEW .sr-only class working example

+
+
+ This element is hidden visually but accessible to screen readers. +
+
+

Code sample

+
<div class="well">
+	<div class="sr-only well">
+		This element is hidden visually but accessible to screen readers.
+	</div>
+</div>
+ +

WET-BOEW .sr-only-focusable class working example

+
+
+ This element is visually hidden but remains accessible to screen readers, and it can be focused by keyboard navigation. +
+
+

Code sample

+
<div class="well">
+	<div class="sr-only-focusable well">
+		This element is visually hidden but remains accessible to screen readers, and it can be focused by keyboard navigation.
+	</div>
+</div>
+ +

Visibility

+ +

WET-BOEW .visible-xs-inline class working example

+
+
+ This element is visible on extra small screens (xs) and has an inline display. +
+
+

Code sample

+
<div class="well">
+	<div class="visible-xs-inline well">
+		This element is visible on extra small screens (xs) and has an inline display.
+	</div>
+</div>
+ +

WET-BOEW .visible-xs-block class working example

+
+
+ This element is visible on extra small screens (xs) and has a block display. +
+
+

Code sample

+
<div class="well">
+	<div class="visible-xs-block well">
+		This element is visible on extra small screens (xs) and has a block display.
+	</div>
+</div>
+ +

WET-BOEW .visible-xs-inline-block class working example

+
+
+ This element is visible on extra small screens (xs) and has an inline-block display. +
+
+

Code sample

+
<div class="well">
+	<div class="visible-xs-inline-block well">
+		This element is visible on extra small screens (xs) and has an inline-block display.
+	</div>
+</div>
+ +

WET-BOEW .hidden-xs-inline class working example

+
+
+ This element is hidden on extra small screens (xs) and has an inline display. +
+
+

Code sample

+
<div class="well">
+	<div class="hidden-xs-inline well">
+		This element is hidden on extra small screens (xs) and has an inline display.
+	</div>
+</div>
+ +

WET-BOEW .hidden-xs-block class working example

+
+
+ This element is hidden on extra small screens (xs) and has a block display. +
+
+

Code sample

+
<div class="well">
+	<div class="hidden-xs-block well">
+		This element is hidden on extra small screens (xs) and has a block display.
+	</div>
+</div>
+ +

WET-BOEW .hidden-xs-inline-block class working example

+
+
+ This element is hidden on extra small screens (xs) and has an inline-block display. +
+
+

Code sample

+
<div class="well">
+	<div class="hidden-xs-inline-block well">
+		This element is hidden on extra small screens (xs) and has an inline-block display.
+	</div>
+</div>
+ +

WET-BOEW .visible-xs-inline class working example

+
+
+ This element is visible on extra small screens (xs) and has an inline display. +
+
+

Code sample

+
<div class="well">
+	<div class="visible-xs-inline well">
+		This element is visible on extra small screens (xs) and has an inline display.
+	</div>
+</div>
+ +

WET-BOEW .visible-xs-block class working example

+
+
+ This element is visible on extra small screens (xs) and has a block display. +
+
+

Code sample

+
<div class="well">
+	<div class="visible-xs-block well">
+		This element is visible on extra small screens (xs) and has a block display.
+	</div>
+</div>
+ +

WET-BOEW .visible-xs-inline-block class working example

+
+
+ This element is visible on extra small screens (xs) and has an inline-block display. +
+
+

Code sample

+
<div class="well">
+	<div class="visible-xs-inline-block well">
+		This element is visible on extra small screens (xs) and has an inline-block display.
+	</div>
+</div>
+ +

WET-BOEW .hidden-xs-inline class working example

+
+
+ This element is hidden on extra small screens (xs) and has an inline display. +
+
+

Code sample

+
<div class="well">
+	<div class="hidden-xs-inline well">
+		This element is hidden on extra small screens (xs) and has an inline display.
+	</div>
+</div>
+ +

WET-BOEW .hidden-xs-block class working example

+
+
+ This element is hidden on extra small screens (xs) and has a block display. +
+
+

Code sample

+
<div class="well">
+	<div class="hidden-xs-block well">
+		This element is hidden on extra small screens (xs) and has a block display.
+	</div>
+</div>
+ +

WET-BOEW .hidden-xs-inline-block class working example

+
+
+ This element is hidden on extra small screens (xs) and has an inline-block display. +
+
+

Code sample

+
<div class="well">
+	<div class="hidden-xs-inline-block well">
+		This element is hidden on extra small screens (xs) and has an inline-block display.
+	</div>
+</div>
+ +

WET-BOEW .visible-sm-inline class working example

+
+
+ This element is visible on small screens (sm) and has an inline display. +
+
+

Code sample

+
<div class="well">
+	<div class="visible-sm-inline well">
+		This element is visible on small screens (sm) and has an inline display.
+	</div>
+</div>
+ +

WET-BOEW .visible-sm-block class working example

+
+
+ This element is visible on small screens (sm) and has a block display. +
+
+

Code sample

+
<div class="well">
+	<div class="visible-sm-block well">
+		This element is visible on small screens (sm) and has a block display.
+	</div>
+</div>
+ +

WET-BOEW .visible-sm-inline-block class working example

+
+
+ This element is visible on small screens (sm) and has an inline-block display. +
+
+

Code sample

+
<div class="well">
+	<div class="visible-sm-inline-block well">
+		This element is visible on small screens (sm) and has an inline-block display.
+	</div>
+</div>
+ +

WET-BOEW .hidden-sm-inline class working example

+
+
+ This element is hidden on small screens (sm) and has an inline display. +
+
+

Code sample

+
<div class="well">
+	<div class="hidden-sm-inline well">
+		This element is hidden on small screens (sm) and has an inline display.
+	</div>
+</div>
+ +

WET-BOEW .hidden-sm-block class working example

+
+ This element is hidden on small screens (sm) and has a block display. +
+
+

Code sample

+
<div class="well">
+	<div class="hidden-sm-block well">
+		This element is hidden on small screens (sm) and has a block display.
+	</div>
+</div>
+ +

WET-BOEW .hidden-sm-inline-block class working example

+
+ This element is hidden on small screens (sm) and has an inline-block display. +
+
+

Code sample

+
<div class="well">
+	<div class="hidden-sm-inline-block well">
+		This element is hidden on small screens (sm) and has an inline-block display.
+	</div>
+</div>
+ +

WET-BOEW .visible-md-inline class working example

+
+ This element is visible on medium screens (md) and has an inline display. +
+
+

Code sample

+
<div class="well">
+	<div class="visible-md-inline well">
+		This element is visible on medium screens (md) and has an inline display.
+	</div>
+</div>
+ +

WET-BOEW .visible-md-block class working example

+
+ This element is visible on medium screens (md) and has a block display. +
+
+

Code sample

+
<div class="well">
+	<div class="visible-md-block well">
+		This element is visible on medium screens (md) and has a block display.
+	</div>
+</div>
+ +

WET-BOEW .visible-md-inline-block class working example

+
+ This element is visible on medium screens (md) and has an inline-block display. +
+
+

Code sample

+
<div class="well">
+	<div class="visible-md-inline-block well">
+		This element is visible on medium screens (md) and has an inline-block display.
+	</div>
+</div>
+ + +

WET-BOEW .hidden-md-inline class working example

+
+ This element is hidden on medium screens (md) and has an inline display. +
+
+

Code sample

+
<div class="well">
+	<div class="hidden-md-inline well">
+		This element is hidden on medium screens (md) and has an inline display.
+	</div>
+</div>
+ +

WET-BOEW .hidden-md-block class working example

+
+ This element is hidden on medium screens (md) and has a block display. +
+
+

Code sample

+
<div class="well">
+	<div class="hidden-md-block well">
+		This element is hidden on medium screens (md) and has a block display.
+	</div>
+</div>
+ +

WET-BOEW .hidden-md-inline-block class working example

+
+ This element is hidden on medium screens (md) and has an inline-block display. +
+
+

Code sample

+
<div class="well">
+	<div class="hidden-md-inline-block well">
+		This element is hidden on medium screens (md) and has an inline-block display.
+	</div>
+</div>
+ +

WET-BOEW .visible-lg-inline class working example

+
+ This element is visible on large screens (lg) and has an inline display. +
+
+

Code sample

+
<div class="well">
+	<div class="visible-lg-inline well">
+		This element is visible on large screens (lg) and has an inline display.
+	</div>
+</div>
+ +

WET-BOEW .visible-lg-block class working example

+
+ This element is visible on large screens (lg) and has a block display. +
+
+

Code sample

+
<div class="well">
+	<div class="visible-lg-block well">
+		This element is visible on large screens (lg) and has a block display.
+	</div>
+</div>
+ +

WET-BOEW .visible-lg-inline-block class working example

+
+ This element is visible on large screens (lg) and has an inline-block display. +
+
+

Code sample

+
<div class="well">
+	<div class="visible-lg-inline-block well">
+		This element is visible on large screens (lg) and has an inline-block display.
+	</div>
+</div>
+ +

WET-BOEW .hidden-lg-inline class working example

+
+ This element is hidden on large screens (lg) and has an inline display. +
+
+

Code sample

+
<div class="well">
+	<div class="hidden-lg-inline well">
+		This element is hidden on large screens (lg) and has an inline display.
+	</div>
+</div>
+ +

WET-BOEW .hidden-lg-block class working example

+
+ This element is hidden on large screens (lg) and has a block display. +
+
+

Code sample

+
<div class="well">
+	<div class="hidden-lg-block well">
+		This element is hidden on large screens (lg) and has a block display.
+	</div>
+</div>
+ +

WET-BOEW .hidden-lg-inline-block class working example

+
+ This element is hidden on large screens (lg) and has an inline-block display. +
+
+

Code sample

+
<div class="well">
+	<div class="hidden-lg-inline-block well">
+		This element is hidden on large screens (lg) and has an inline-block display.
+	</div>
+</div>
+ +

Opacity

+ +

WET-BOEW .opct-10 class working example

+
+ This element has an opacity of 0.1 (10%). +
+
+

Code sample

+
<div class="well">
+	<div class="opct-10 well" style="opacity: 0.1;">
+		This element has an opacity of 0.1 (10%).
+	</div>
+</div>
+ +

WET-BOEW .opct-20 class working example

+
+ This element has an opacity of 0.2 (20%). +
+
+

Code sample

+
<div class="well">
+	<div class="opct-20 well" style="opacity: 0.2;">
+		This element has an opacity of 0.2 (20%).
+	</div>
+</div>
+ +

WET-BOEW .opct-90 class working example

+
+ This element has an opacity of 0.9 (90%). +
+
+

Code sample

+
<div class="well">
+	<div class="opct-90 well" style="opacity: 0.9;">
+		This element has an opacity of 0.9 (90%).
+	</div>
+</div>
+ +

WET-BOEW .opct-100 class working example

+
+ This element has an opacity of 1 (100%). +
+
+

Code sample

+
<div class="well">
+	<div class="opct-100 well" style="opacity: 1;">
+		This element has an opacity of 1 (100%).
+	</div>
+</div>
+ +

WET - Toggling content

+ +

WET-BOEW .nojs-show class working example

+
+ This element is initially hidden, but it will be shown when JavaScript is disabled. +
+
+

Code sample

+
<div class="well">
+	<div class="nojs-show well">
+		This element is initially hidden, but it will be shown when JavaScript is disabled.
+	</div>
+</div>
+ +

WET-BOEW .nojs-hide class working example

+
+ This element is initially visible, but it will be hidden when JavaScript is disabled. +
+
+

Code sample

+
<div class="well">
+	<div class="nojs-hide well">
+		This element is initially visible, but it will be hidden when JavaScript is disabled.
+	</div>
+</div>
+ +

WET-BOEW .lbx-hide-gal class working example

+
+ This element is hidden as part of a lightbox gallery. +
+
+

Code sample

+
<div class="well">
+	<div class="lbx-hide-gal well">
+		This element is hidden as part of a lightbox gallery.
+	</div>
+</div>
+ +

WET-BOEW .mfp-hide class working example

+
+ This element is hidden as part of a Magnific Popup modal. +
+
+

Code sample

+
<div class="well">
+	<div class="mfp-hide well">
+		This element is hidden as part of a Magnific Popup modal.
+	</div>
+</div>
+ +

WET-BOEW .wb-inv class working example

+
+ This element is invisible and hidden from all users, including screen readers. +
+
+

Code sample

+
<div class="well">
+	<div class="wb-inv well">
+		This element is invisible and hidden from all users, including screen readers.
+	</div>
+</div>
+ +

WET-BOEW .wb-invisible class working example

+
+ This element is invisible but accessible by screen readers. +
+
+

Code sample

+
<div class="well">
+	<div class="wb-invisible well">
+		This element is invisible but accessible by screen readers.
+	</div>
+</div>
+ +

WET-BOEW .wb-show-onfocus class working example

+ +
+

Code sample

+
<div class="well">
+	<input type="text" class="wb-show-onfocus well" placeholder="Focus on this input to reveal the element">
+</div>
+ +

Col count

+ +

It split the element into multiple columns. Its a way to do positioning which are not limited to list items but include div/sections too

+

WET-BOEW .colcount-xxs-2 class working example

+
+ This element occupies 1 out of 2 columns on extra-small screens (xxs). +
+
+

Code sample

+
<div class="well">
+	<div class="colcount-xxs-2 well">
+		This element occupies 1 out of 2 columns on extra-small screens (xxs).
+	</div>
+</div>
+ +

WET-BOEW .colcount-xxs-3 class working example

+
+ This element occupies 1 out of 3 columns on extra-small screens (xxs). +
+
+

Code sample

+
<div class="well">
+	<div class="colcount-xxs-3 well">
+		This element occupies 1 out of 3 columns on extra-small screens (xxs).
+	</div>
+</div>
+ +

WET-BOEW .colcount-xxs-4 class working example

+
+ This element occupies 1 out of 4 columns on extra-small screens (xxs). +
+
+

Code sample

+
<div class="well">
+	<div class="colcount-xxs-4 well">
+		This element occupies 1 out of 4 columns on extra-small screens (xxs).
+	</div>
+</div>
+ +

WET-BOEW .colcount-xs-2 class working example

+
+ This element occupies 1 out of 2 columns on extra-small screens (xs). +
+
+

Code sample

+
<div class="well">
+	<div class="colcount-xs-2 well">
+		This element occupies 1 out of 2 columns on extra-small screens (xs).
+	</div>
+</div>
+ +

WET-BOEW .colcount-xs-3 class working example

+
+ This element occupies 1 out of 3 columns on extra-small screens (xs). +
+
+

Code sample

+
<div class="well">
+	<div class="colcount-xs-3 well">
+		This element occupies 1 out of 3 columns on extra-small screens (xs).
+	</div>
+</div>
+ +

WET-BOEW .colcount-xs-4 class working example

+
+ This element occupies 1 out of 4 columns on extra-small screens (xs). +
+
+

Code sample

+
<div class="well">
+	<div class="colcount-xs-4 well">
+		This element occupies 1 out of 4 columns on extra-small screens (xs).
+	</div>
+</div>
+ +

WET-BOEW .colcount-sm-2 class working example

+
+ This element occupies 1 out of 2 columns on small screens (sm). +
+
+

Code sample

+
<div class="well">
+	<div class="colcount-sm-2 well">
+		This element occupies 1 out of 2 columns on small screens (sm).
+	</div>
+</div>
+ +

WET-BOEW .colcount-sm-3 class working example

+
+ This element occupies 1 out of 3 columns on small screens (sm). +
+
+

Code sample

+
<div class="well">
+	<div class="colcount-sm-3 well">
+		This element occupies 1 out of 3 columns on small screens (sm).
+	</div>
+</div>
+ +

WET-BOEW .colcount-sm-4 class working example

+
+ This element occupies 1 out of 4 columns on small screens (sm). +
+
+

Code sample

+
<div class="well">
+	<div class="colcount-sm-4 well">
+		This element occupies 1 out of 4 columns on small screens (sm).
+	</div>
+</div>
+ +

WET-BOEW .colcount-lg-2 class working example

+
+ This element occupies 1 out of 2 columns on large screens (lg). +
+
+

Code sample

+
<div class="well">
+	<div class="colcount-lg-2 well">
+		This element occupies 1 out of 2 columns on large screens (lg).
+	</div>
+</div>
+ +

WET-BOEW .colcount-lg-3 class working example

+
+ This element occupies 1 out of 3 columns on large screens (lg). +
+
+

Code sample

+
<div class="well">
+	<div class="colcount-lg-3 well">
+		This element occupies 1 out of 3 columns on large screens (lg).
+	</div>
+</div>
+ +

WET-BOEW .colcount-lg-4 class working example

+
+ This element occupies 1 out of 4 columns on large screens (lg). +
+
+

Code sample

+
<div class="well">
+	<div class="colcount-lg-4 well">
+		This element occupies 1 out of 4 columns on large screens (lg).
+	</div>
+</div>
+ +

WET-BOEW .colcount-xl-2 class working example

+
+ This element occupies 1 out of 2 columns on extra-large screens (xl). +
+
+

Code sample

+
<div class="well">
+	<div class="colcount-xl-2 well">
+		This element occupies 1 out of 2 columns on extra-large screens (xl).
+	</div>
+</div>
+ +

WET-BOEW .colcount-xl-3 class working example

+
+ This element occupies 1 out of 3 columns on extra-large screens (xl). +
+
+

Code sample

+
<div class="well">
+	<div class="colcount-xl-3 well">
+		This element occupies 1 out of 3 columns on extra-large screens (xl).
+	</div>
+</div>
+ +

WET-BOEW .colcount-xl-4 class working example

+
+ This element occupies 1 out of 4 columns on extra-large screens (xl). +
+
+

Code sample

+
<div class="well">
+	<div class="colcount-xl-4 well">
+		This element occupies 1 out of 4 columns on extra-large screens (xl).
+	</div>
+</div>
+ +

Sizing controls

+ +

WET-BOEW .h-100 class working example

+
+
+ This element has a height of 100% of its parent container. +
+
+

Code sample

+
<div class="well">
+	<div class="h-100">
+		This element has a height of 100% of its parent container.
+	</div>
+</div>
+ +

WET-BOEW .full-width class working example

+
+ This element spans the full width of its parent container. +
+
+

Code sample

+
<div class="well">
+	<div class="full-width">
+		This element spans the full width of its parent container.
+	</div>
+</div>
+ +

WET-BOEW .max-content class working example

+
+ This element adjusts its width to fit its content, but not wider than its parent container. +
+
+

Code sample

+
<div class="well" style="width: 890px;">
+	<div class="max-content well">
+		This element adjusts its width to fit its content, but not wider than its parent container.
+	</div>
+</div>
diff --git a/common/display/display-fr.html b/common/display/display-fr.html new file mode 100644 index 0000000000..2949748584 --- /dev/null +++ b/common/display/display-fr.html @@ -0,0 +1,1015 @@ +--- +{ + "title":"Affichage", + "language":"fr", + "altLangPage":"display-en.html", + "description":"Classes d'utilitaires Bootstrap et WET présentant les options d'affichage des éléments tels que le flottant, la visibilité, l'effacement, l'opacité et la bascule, accompagnées d'exemples pratiques pour tester et observer différents mises en page de contenu", + "dateModified":"2023-08-01" +} +--- + +

Cette page présente des fonctionnalités utilitaires d'affichage de Bootstrap, y compris certaines intégrations de wet-boew pour la bascule du contenu.

+ +

Sur cette page :

+ + + +

Bootstrap

+ +

Flottant

+ +

Exemple fonctionnel de .clearfixBootstrap 3

+
+
+
Colonne 1
+
Colonne 2
+
Colonne 3
+ +
+
+

Ceci est un contenu sous les colonnes flottantes. Sans la classe clearfix, ce contenu chevaucherait les colonnes flottantes. Mais clearfix assure une mise en page correcte en effaçant les flottants.

+
+

Exemple de code

+
<div class="well">
+	<div class="row">
+	<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Colonne 1</div>
+	<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Colonne 2</div>
+	<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Colonne 3</div>
+	<!-- Ajouter la classe clearfix pour effacer les éléments flottants -->
+	<div class="clearfix"></div>
+</div>
+<p class="well">Ceci est un contenu sous les colonnes flottantes. Sans la classe clearfix, ce contenu chevaucherait les colonnes flottantes. Mais clearfix assure une mise en page correcte en effaçant les flottants.</p>
+</div>
+ +

Exemple de fonctionnement de la classe Bootstrap 3 .center-block

+
+
+ Cet élément est centré horizontalement dans son conteneur parent. +
+
+

Exemple de code

+
<div class="well">
+	<div class="center-block well" style="width: 200px; height: 200px; background-color: #ffffff;">
+		Cet élément est centré horizontalement dans son conteneur parent.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe Bootstrap 3 .pull-right

+
+
+ Cet élément est flottant à droite dans son conteneur parent. +
+
+

Exemple de code

+
<div class="well" style="height: 115px;">
+	<div class="pull-right well">
+		Cet élément est flottant à droite dans son conteneur parent.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe Bootstrap 3 .pull-left

+
+
+ Cet élément est flottant à gauche dans son conteneur parent. +
+
+
+<div class="clearfix"> </div> +

Exemple de code

+
<div class="well" style="height: 115px;">
+	<div class="pull-left well">
+		Cet élément est flottant à gauche dans son conteneur parent.
+	</div>
+</div><div class="clearfix"> </div>
+
+ +

Effacement

+ +

Exemple de fonctionnement de la classe WET-BOEW .clr-lft-lg

+
+
+ Cet élément efface les éléments flottants à gauche sur les grands écrans (lg) dans son conteneur parent. +
+
+

Exemple de code

+
<div class="well">
+	<div class="clr-lft-lg well">
+		Cet élément efface les éléments flottants à gauche sur les grands écrans (lg) dans son conteneur parent.
+	</div>
+</div>
+

Exemple de fonctionnement de la classe WET-BOEW .clr-lft-md

+
+
+ Cet élément efface les éléments flottants à gauche sur les écrans moyens (md) dans son conteneur parent. +
+
+

Exemple de code

+
<div class="well">
+	<div class="clr-lft-md well">
+		Cet élément efface les éléments flottants à gauche sur les écrans moyens (md) dans son conteneur parent.
+	</div>
+</div>
+

Exemple de fonctionnement de la classe WET-BOEW .clr-rght-lg

+
+
+ Cet élément efface les éléments flottants à droite sur les grands écrans (lg) dans son conteneur parent. +
+
+

Exemple de code

+
<div class="well">
+	<div class="clr-rght-lg well">
+		Cet élément efface les éléments flottants à droite sur les grands écrans (lg) dans son conteneur parent.
+	</div>
+</div>
+

Exemple de fonctionnement de la classe WET-BOEW .clr-rght-md

+
+
+ Cet élément efface les éléments flottants à droite sur les écrans moyens (md) dans son conteneur parent. +
+
+

Exemple de code

+
<div class="well">
+	<div class="clr-rght-md well">
+		Cet élément efface les éléments flottants à droite sur les écrans moyens (md) dans son conteneur parent.
+	</div>
+</div>
+ +

Contenu basculant

+ +

Exemple de fonctionnement de la classe Bootstrap 3 .hide

+
+
+ Cet élément est masqué sur toutes les tailles d'écran. +
+
+

Exemple de code

+
<div class="well">
+	<div class="hide well">
+		Cet élément est masqué sur toutes les tailles d'écran.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe Bootstrap 3 .show

+
+
+ Cet élément est visible sur toutes les tailles d'écran. +
+
+

Exemple de code

+
<div class="well">
+	<div class="show well">
+		Cet élément est visible sur toutes les tailles d'écran.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe Bootstrap 3 .invisible

+
+ +
+

Exemple de code

+
<div class="well">
+	<div class="invisible well">
+		Cet élément est invisible mais occupe toujours de l'espace dans la mise en page.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe Bootstrap 3 .text-hide

+
+
+ Ce texte est masqué visuellement mais reste accessible aux lecteurs d'écran. +
+
+

Exemple de code

+
<div class="well">
+	<div class="text-hide well">
+		Ce texte est masqué visuellement mais reste accessible aux lecteurs d'écran.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe Bootstrap 3 .hidden

+
+ +
+

Exemple de code

+
<div class="well">
+	<div class="hidden well">
+		Cet élément est masqué sur toutes les tailles d'écran.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .sr-only

+
+
+ Cet élément est masqué visuellement mais accessible aux lecteurs d'écran. +
+
+

Exemple de code

+
<div class="well">
+	<div class="sr-only well">
+		Cet élément est masqué visuellement mais accessible aux lecteurs d'écran.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .sr-only-focusable

+
+
+ Cet élément est masqué visuellement mais reste accessible aux lecteurs d'écran et peut être mis au focus par la navigation au clavier. +
+
+

Exemple de code

+
<div class="well">
+	<div class="sr-only-focusable well">
+		Cet élément est masqué visuellement mais reste accessible aux lecteurs d'écran et peut être mis au focus par la navigation au clavier.
+	</div>
+</div>
+ +

Visibilité

+ +

Exemple de fonctionnement de la classe WET-BOEW .visible-xs-inline

+
+
+ Cet élément est visible sur les petits écrans (xs) et a une mise en page en ligne. +
+
+

Exemple de code

+
<div class="well">
+	<div class="visible-xs-inline well">
+		Cet élément est visible sur les petits écrans (xs) et a une mise en page en ligne.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .visible-xs-block

+
+
+ Cet élément est visible sur les petits écrans (xs) et a une mise en page en bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="visible-xs-block well">
+		Cet élément est visible sur les petits écrans (xs) et a une mise en page en bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .visible-xs-inline-block

+
+
+ Cet élément est visible sur les petits écrans (xs) et a une mise en page en ligne-bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="visible-xs-inline-block well">
+		Cet élément est visible sur les petits écrans (xs) et a une mise en page en ligne-bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .hidden-xs-inline

+
+
+ Cet élément est masqué sur les petits écrans (xs) et a une mise en page en ligne. +
+
+

Exemple de code

+
<div class="well">
+<div class="hidden-xs-inline well">
+	Cet élément est masqué sur les petits écrans (xs) et a une mise en page en ligne.
+</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .hidden-xs-block

+
+
+ Cet élément est masqué sur les petits écrans (xs) et a une mise en page en bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="hidden-xs-block well">
+		Cet élément est masqué sur les petits écrans (xs) et a une mise en page en bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .hidden-xs-inline-block

+
+
+ Cet élément est masqué sur les petits écrans (xs) et a une mise en page en ligne-bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="hidden-xs-inline-block well">
+		Cet élément est masqué sur les petits écrans (xs) et a une mise en page en ligne-bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .visible-xs-inline

+
+
+ Cet élément est visible sur les petits écrans (xs) et a une mise en page en ligne. +
+
+

Exemple de code

+
<div class="well">
+	<div class="visible-xs-inline well">
+		Cet élément est visible sur les petits écrans (xs) et a une mise en page en ligne.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .visible-xs-block

+
+
+ Cet élément est visible sur les petits écrans (xs) et a une mise en page en bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="visible-xs-block well">
+		Cet élément est visible sur les petits écrans (xs) et a une mise en page en bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .visible-xs-inline-block

+
+
+ Cet élément est visible sur les petits écrans (xs) et a une mise en page en ligne-bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="visible-xs-inline-block well">
+		Cet élément est visible sur les petits écrans (xs) et a une mise en page en ligne-bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .hidden-xs-inline

+
+
+ Cet élément est masqué sur les petits écrans (xs) et a une mise en page en ligne. +
+
+

Exemple de code

+
<
+
+div class="well">
+	<div class="hidden-xs-inline well">
+		Cet élément est masqué sur les petits écrans (xs) et a une mise en page en ligne.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .hidden-xs-block

+
+
+ Cet élément est masqué sur les petits écrans (xs) et a une mise en page en bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="hidden-xs-block well">
+		Cet élément est masqué sur les petits écrans (xs) et a une mise en page en bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .hidden-xs-inline-block

+
+
+ Cet élément est masqué sur les petits écrans (xs) et a une mise en page en ligne-bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="hidden-xs-inline-block well">
+		Cet élément est masqué sur les petits écrans (xs) et a une mise en page en ligne-bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .visible-sm-inline

+
+
+ Cet élément est visible sur les écrans petits (sm) et a une mise en page en ligne. +
+
+

Exemple de code

+
<div class="well">
+	<div class="visible-sm-inline well">
+		Cet élément est visible sur les écrans petits (sm) et a une mise en page en ligne.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .visible-sm-block

+
+
+ Cet élément est visible sur les écrans petits (sm) et a une mise en page en bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="visible-sm-block well">
+		Cet élément est visible sur les écrans petits (sm) et a une mise en page en bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .visible-sm-inline-block

+
+
+ Cet élément est visible sur les écrans petits (sm) et a une mise en page en ligne-bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="visible-sm-inline-block well">
+		Cet élément est visible sur les écrans petits (sm) et a une mise en page en ligne-bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .hidden-sm-inline

+
+
+ Cet élément est masqué sur les écrans petits (sm) et a une mise en page en ligne. +
+
+

Exemple de code

+
<div class="well">
+	<div class="hidden-sm-inline well">
+		Cet élément est masqué sur les écrans petits (sm) et a une mise en page en ligne.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .hidden-sm-block

+
+
+ Cet élément est masqué sur les écrans petits (sm) et a une mise en page en bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="hidden-sm-block well">
+		Cet élément est masqué sur les écrans petits (sm) et a une mise en page en bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .hidden-sm-inline-block

+
+
+ Cet élément est masqué sur les écrans petits (sm) et a une mise en page en ligne-bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="hidden-sm-inline-block well">
+		Cet élément est masqué sur les écrans petits (sm) et a une mise en page en ligne-bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .visible-md-inline

+
+
+ Cet élément est visible sur les écrans moyens (md) et a une mise en page en ligne. +
+
+

Exemple de code

+
<div class="well">
+	<div class="visible-md-inline well">
+		Cet élément est visible sur les écrans moyens (md) et a une mise en page en ligne.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .visible-md-block

+
+
+ Cet élément est visible sur les écrans moyens (md) et a une mise en page en bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="visible-md-block well">
+		Cet élément est visible sur les écrans moyens (md) et a une mise en page en bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .visible-md-inline-block

+
+
+ Cet élément est visible sur les écrans moyens (md) et a une mise en page en ligne-bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="visible-md-inline-block well">
+		Cet élément est visible sur les écrans moyens (md) et a une mise en page en ligne-bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .hidden-md-inline

+
+
+ Cet élément est masqué sur les écrans moyens (md) et a une mise en page en ligne. +
+
+

Exemple de code

+
<div class="well">
+	<div class="hidden-md-inline well">
+		Cet élément est masqué sur les écrans moyens (md) et a une mise en page en ligne.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .hidden-md-block

+
+
+ Cet élément est masqué sur les écrans moyens (md) et a une mise en page en bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="hidden-md-block well">
+		Cet élément est masqué sur les écrans moyens (md) et a une mise en page en bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .hidden-md-inline-block

+
+
+ Cet élément est masqué sur les écrans moyens (md) et a une mise en page en ligne-bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="hidden-md-inline-block well">
+		Cet élément est masqué sur les écrans moyens (md) et a une mise en page en ligne-bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .visible-lg-inline

+
+
+ Cet élément est visible sur les grands écrans (lg) et a une mise en page en ligne. +
+
+

Exemple de code

+
<div class="well">
+	<div class="visible-lg-inline well">
+		Cet élément est visible sur les grands écrans (lg) et a une mise en page en ligne.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .visible-lg-block

+
+
+ Cet élément est visible sur les grands écrans (lg) et a une mise en page en bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="visible-lg-block well">
+		Cet élément est visible sur les grands écrans (lg) et a une mise en page en bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .visible-lg-inline-block

+
+
+ Cet élément est visible sur les grands écrans (lg) et a une mise en page en ligne-bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="visible-lg-inline-block well">
+		Cet élément est visible sur les grands écrans (lg) et a une mise en page en ligne-bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .hidden-lg-inline

+
+
+ Cet élément est masqué sur les grands écrans (lg) et a une mise en page en ligne. +
+
+

Exemple de code

+
<div class="well">
+	<div class="hidden-lg-inline well">
+		Cet élément est masqué sur les grands écrans (lg) et a une mise en page en ligne.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .hidden-lg-block

+
+
+ Cet élément est masqué sur les grands écrans (lg) et a une mise en page en bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="hidden-lg-block well">
+		Cet élément est masqué sur les grands écrans (lg) et a une mise en page en bloc.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .hidden-lg-inline-block

+
+
+ Cet élément est masqué sur les grands écrans (lg) et a une mise en page en ligne-bloc. +
+
+

Exemple de code

+
<div class="well">
+	<div class="hidden-lg-inline-block well">
+		Cet élément est masqué sur les grands écrans (lg) et a une mise en page en ligne-bloc.
+	</div>
+</div>
+ +

Opacité

+ +

Exemple de fonctionnement de la classe WET-BOEW .opct-10

+
+
+ Cet élément a une opacité de 0.1 (10%). +
+
+

Exemple de code

+
<div class="well">
+	<div class="opct-10 well" style="opacity: 0.1;">
+		Cet élément a une opacité de 0.1 (10%).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .opct-20

+
+
+ Cet élément a une opacité de 0.2 (20%). +
+
+

Exemple de code

+
<div class="well">
+	<div class="opct-20 well" style="opacity: 0.2;">
+		Cet élément a une opacité de 0.2 (20%).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .opct-90

+
+
+ Cet élément a une opacité de 0.9 (90%). +
+
+

Exemple de code

+
<div class="well">
+	<div class="opct-90 well" style="opacity: 0.9;">
+		Cet élément a une opacité de 0.9 (90%).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .opct-100

+
+
+ Cet élément a une opacité de 1 (100%). +
+
+

Exemple de code

+
<div class="well">
+	<div class="opct-100 well" style="opacity: 1;">
+		Cet élément a une opacité de 1 (100%).
+	</div>
+</div>
+ +

Contenu basculant WET

+ +

Exemple de fonctionnement de la classe WET-BOEW .nojs-show

+
+
+ Cet élément est initialement masqué, mais il sera affiché lorsque JavaScript est désactivé. +
+
+

Exemple de code

+
<div class="well">
+	<div class="nojs-show well">
+		Cet élément est initialement masqué, mais il sera affiché lorsque JavaScript est désactivé.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .nojs-hide

+
+
+ Cet élément est initialement visible, mais il sera masqué lorsque JavaScript est désactivé. +
+
+

Exemple de code

+
<div class="well">
+	<div class="nojs-hide well">
+		Cet élément est initialement visible, mais il sera masqué lorsque JavaScript est désactivé.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .lbx-hide-gal

+
+
+ Cet élément est masqué dans le cadre d'une galerie lightbox. +
+
+

Exemple de code

+
<div class="well">
+	<div class="lbx-hide-gal well">
+		Cet élément est masqué dans le cadre d'une galerie lightbox.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .mfp-hide

+
+
+ Cet élément est masqué dans le cadre d'une fenêtre modale Magnific Popup. +
+
+

Exemple de code

+
<div class="well">
+	<div class="mfp-hide well">
+		Cet élément est masqué dans le cadre d'une fenêtre modale Magnific Popup.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .wb-inv

+
+
+ Cet élément est invisible et masqué de tous les utilisateurs, y compris les lecteurs d'écran. +
+
+

Exemple de code

+
<div class="well">
+	<div class="wb-inv well">
+		Cet élément est invisible et masqué de tous les utilisateurs, y compris les lecteurs d'écran.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .wb-invisible

+
+
+ Cet élément est invisible, mais accessible aux lecteurs d'écran. +
+
+

Exemple de code

+
<div class="well">
+	<div class="wb-invisible well">
+		Cet élément est invisible, mais accessible aux lecteurs d'écran.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .wb-show-onfocus

+
+ +
+

Exemple de code

+
<div class="well">
+	<input type="text" class="wb-show-onfocus well" placeholder="Mettez le focus sur cet élément pour révéler l'élément">
+</div>
+ +

Nombre de colonnes

+ +

Il divise l'élément en plusieurs colonnes. C'est une manière de faire du positionnement qui n'est pas limitée aux éléments de liste, mais qui inclut également les div/sections.

+

Exemple de fonctionnement de la classe WET-BOEW .colcount-xxs-2

+
+
+ Cet élément occupe 1 sur 2 colonnes sur les écrans extra-small (xxs). +
+
+

Exemple de code

+
<div class="well">
+	<div class="colcount-xxs-2 well">
+		Cet élément occupe 1 sur 2 colonnes sur les écrans extra-small (xxs).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .colcount-xxs-3

+
+
+ Cet élément occupe 1 sur 3 colonnes sur les écrans extra-small (xxs). +
+
+

Exemple de code

+
<div class="well">
+	<div class="colcount-xxs-3 well">
+		Cet élément occupe 1 sur 3 colonnes sur les écrans extra-small (xxs).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .colcount-xxs-4

+
+
+ Cet élément occupe 1 sur 4 colonnes sur les écrans extra-small (xxs). +
+
+

Exemple de code

+
<div class="well">
+	<div class="colcount-xxs-4 well">
+		Cet élément occupe 1 sur 4 colonnes sur les écrans extra-small (xxs).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .colcount-xs-2

+
+
+ Cet élément occupe 1 sur 2 colonnes sur les écrans extra-small (xs). +
+
+

Exemple de code

+
<div class="well">
+	<div class="colcount-xs-2 well">
+		Cet élément occupe 1 sur 2 colonnes sur les écrans extra-small (xs).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .colcount-xs-3

+
+
+ Cet élément occupe 1 sur 3 colonnes sur les écrans extra-small (xs). +
+
+

Exemple de code

+
<div class="well">
+	<div class="colcount-xs-3 well">
+		Cet élément occupe 1 sur 3 colonnes sur les écrans extra-small (xs).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .colcount-xs-4

+
+
+ Cet élément occupe 1 sur 4 colonnes sur les écrans extra-small (xs). +
+
+

Exemple de code

+
<div class="well">
+	<div class="colcount-xs-4 well">
+		Cet élément occupe 1 sur 4 colonnes sur les écrans extra-small (xs).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .colcount-sm-2

+
+
+ Cet élément occupe 1 sur 2 colonnes sur les écrans small (sm). +
+
+

Exemple de code

+
<div class="well">
+	<div class="colcount-sm-2 well">
+		Cet élément occupe 1 sur 2 colonnes sur les écrans small (sm).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .colcount-sm-3

+
+
+ Cet élément occupe 1 sur 3 colonnes sur les écrans small (sm). +
+
+

Exemple de code

+
<div class="well">
+	<div class="colcount-sm-3 well">
+		Cet élément occupe 1 sur 3 colonnes sur les écrans small (sm).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .colcount-sm-4

+
+
+ Cet élément occupe 1 sur 4 colonnes sur les écrans small (sm). +
+
+

Exemple de code

+
<div class="well">
+	<div class="colcount-sm-4 well">
+		Cet élément occupe 1 sur 4 colonnes sur les écrans small (sm).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .colcount-lg-2

+
+
+ Cet élément occupe 1 sur 2 colonnes sur les écrans large (lg). +
+
+

Exemple de code

+
<div class="well">
+	<div class="colcount-lg-2 well">
+		Cet élément occupe 1 sur 2 colonnes sur les écrans large (lg).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .colcount-lg-3

+
+
+ Cet élément occupe 1 sur 3 colonnes sur les écrans large (lg). +
+
+

Exemple de code

+
<div class="well">
+	<div class="colcount-lg-3 well">
+		Cet élément occupe 1 sur 3 colonnes sur les écrans large (lg).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .colcount-lg-4

+
+
+ Cet élément occupe 1 sur 4 colonnes sur les écrans large (lg). +
+
+

Exemple de code

+
<div class="well">
+	<div class="colcount-lg-4 well">
+		Cet élément occupe 1 sur 4 colonnes sur les écrans large (lg).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .colcount-xl-2

+
+
+ Cet élément occupe 1 sur 2 colonnes sur les écrans extra-large (xl). +
+
+

Exemple de code

+
<div class="well">
+	<div class="colcount-xl-2 well">
+		Cet élément occupe 1 sur 2 colonnes sur les écrans extra-large (xl).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .colcount-xl-3

+
+
+ Cet élément occupe 1 sur 3 colonnes sur les écrans extra-large (xl). +
+
+

Exemple de code

+
<div class="well">
+	<div class="colcount-xl-3 well">
+		Cet élément occupe 1 sur 3 colonnes sur les écrans extra-large (xl).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .colcount-xl-4

+
+
+ Cet élément occupe 1 sur 4 colonnes sur les écrans extra-large (xl). +
+
+

Exemple de code

+
<div class="well">
+	<div class="colcount-xl-4 well">
+		Cet élément occupe 1 sur 4 colonnes sur les écrans extra-large (xl).
+	</div>
+</div>
+ +

Contrôles de dimensionnement

+ +

Exemple de fonctionnement de la classe WET-BOEW .h-100

+
+
+ Cet élément a une hauteur de 100 % de son conteneur parent. +
+
+

Exemple de code

+
<div class="well">
+	<div class="h-100">
+		Cet élément a une hauteur de 100 % de son conteneur parent.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .full-width

+
+
+ Cet élément s'étend sur toute la largeur de son conteneur parent. +
+
+

Exemple de code

+
<div class="well">
+	<div class="full-width">
+		Cet élément s'étend sur toute la largeur de son conteneur parent.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .max-content

+
+
+ Cet élément ajuste sa largeur pour s'adapter à son contenu, mais pas plus large que son conteneur parent. +
+
+

Exemple de code

+
<div class="well" style="width: 890px;">
+	<div class="max-content well">
+		Cet élément ajuste sa largeur pour s'adapter à son contenu, mais pas plus large que son conteneur parent.
+	</div>
+</div>
diff --git a/common/display/index.json-ld b/common/display/index.json-ld new file mode 100644 index 0000000000..e1ec64fa60 --- /dev/null +++ b/common/display/index.json-ld @@ -0,0 +1,34 @@ +{ + "@context": { + "@version": 2.0, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Display", + "fr": "Affichage" + }, + "description": { + "en": "Bootstrap and WET utility classes showcasing elements display options such as float, visibility, clearing, opacity, and toggling, accompanied by practical examples to test and observe different content layouts.", + "fr": "Classes utilitaires de Bootstrap et WET qui illustrent différentes façons d'afficher des éléments, tels que le flottant, la visibilité, le dégagement, l'opacité et la bascule. Les exemples fournis vous permettent de tester et d'observer les différents dispositions de contenu." + }, + "modified": "2023-08-02", + "componentName": "display", + "status": "stable", + "pages": { + "docs": [ + { + "title": "Display", + "language": "en", + "path": "display-en.html" + }, + { + "title": "Affichage", + "language": "fr", + "path": "display-fr.html" + } + ] + } +} diff --git a/common/layout/index.json-ld b/common/layout/index.json-ld new file mode 100644 index 0000000000..573c8573ac --- /dev/null +++ b/common/layout/index.json-ld @@ -0,0 +1,34 @@ +{ + "@context": { + "@version": 2.0, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Layout", + "fr": "Mise en page" + }, + "description": { + "en": "Bootstrap and WET classes showcasing layout options such as flexbox, CSS grid, grid baseline (containers) accompanied by practical examples to test and observe different page layouts.", + "fr": "Classes de Bootstrap et WET qui illustrent différentes façons de mise en page tels que flexbox, grille CSS, ligne de base de la grille (conteneurs). Les exemples fournis permettent de tester et d'observer les différents dispositions de mise en page." + }, + "modified": "2023-08-03", + "componentName": "layout", + "status": "stable", + "pages": { + "docs": [ + { + "title": "Layout", + "language": "en", + "path": "layout-en.html" + }, + { + "title": "Mise en page", + "language": "fr", + "path": "layout-fr.html" + } + ] + } +} diff --git a/common/layout/layout-en.html b/common/layout/layout-en.html new file mode 100644 index 0000000000..8ecdbec4c7 --- /dev/null +++ b/common/layout/layout-en.html @@ -0,0 +1,758 @@ +--- +{ + "title": "Layout", + "language": "en", + "altLangPage": "layout-fr.html", + "description": "Bootstrap and WET classes showcasing layout options such as flexbox, CSS grid, grid baseline (containers) accompanied by practical examples to test and observe different page layouts.", + "dateModified": "2023-08-08" +} +--- + +

On this page:

+ + + +

Flexbox

+ +

WET-BOEW .d-flex class working example

+
+
+ This is a flex container with the .d-flex class. Its children are aligned in a row by default. +
+
+ You can add multiple children to the flex container to see them aligned horizontally. +
+
+

Code sample

+
<div class="well d-flex">
+	<div class="child">
+		This is a flex container with the .d-flex class. Its children are aligned in a row by default.
+	</div>
+	<div class="child">
+		You can add multiple children to the flex container to see them aligned horizontally.
+	</div>
+</div>
+ +

WET-BOEW .flex-column class working example

+
+
+ This is a flex container with the .d-flex and .flex-column classes. + Its children are aligned in a column direction. Each child takes the full width of the container. +
+
+ You can add multiple children to the flex container with .flex-column to see them aligned vertically. +
+
+

Code sample

+
<div class="well d-flex flex-column">
+	<div class="child">
+		This is a flex container with the .d-flex and .flex-column classes.
+		Its children are aligned in a column direction. Each child takes the full width of the container.
+	</div>
+	<div class="child">
+		You can add multiple children to the flex container with .flex-column to see them aligned vertically.
+	</div>
+</div>
+ +

WET-BOEW .align-items-center class working example

+
+
+ This is a flex container with the .d-flex and .align-items-center classes. + Its children are aligned vertically in the center. +
+
+

Code sample

+
<div class="well d-flex align-items-center" style="height: 250px;">
+	<div class="child">
+		This is a flex container with the .d-flex and .align-items-center classes.
+		Its children are aligned vertically in the center.
+	</div>
+</div>
+ +

WET-BOEW .align-self-center class working example

+
+
+ This is a flex container with the .d-flex class. + The first child (.align-self-center) is aligned vertically in the center within the flex container. +
+
+ The second child is not aligned and follows the default alignment. +
+
+

Code sample

+
<div class="well d-flex" style="height: 250px;">
+	<div class="child align-self-center">
+		This is a flex container with the .d-flex class.
+		The first child (.align-self-center) is aligned vertically in the center within the flex container.
+	</div>
+	<div class="child">
+		The second child is not aligned and follows the default alignment.
+	</div>
+</div>
+ +

WET-BOEW .align-self-end class working example

+
+
+ This is a flex container with the .d-flex class. + The first child (.align-self-end) is aligned vertically at the end within the flex container. +
+
+ The second child is not aligned and follows the default alignment. +
+
+

Code sample

+
<div class="well d-flex" style="height: 250px;">
+	<div class="child align-self-end">
+		This is a flex container with the .d-flex class.
+		The first child (.align-self-end) is aligned vertically at the end within the flex container.
+	</div>
+	<div class="child">
+		The second child is not aligned and follows the default alignment.
+	</div>
+</div>
+ +

CSS Grid

+ +

WET-BOEW [class*=col-] class working example

+
+
+
+ This element has the class col-6. It has a padding left and right of 0. +
+
+
+

Code sample

+
<div class="well">
+	<div class="row">
+	<div class="col-6">
+		This element has the class col-6. It has a padding left and right of 0.
+	</div>
+	</div>
+</div>
+ +

Bootstrap .row class working example

+
+
+
+ This element is inside a Bootstrap grid row with the class .row. + It contains and clear the floats of your columns. +
+
+ This is another column with the class .col-md-6. +
+
+
+

Code sample

+
<div class="well">
+	<div class="row">
+	<div class="col-md-6">
+		This element is inside a Bootstrap grid row with the class .row.
+		It contains and clear the floats of your columns.
+	</div>
+	<div class="col-md-6">
+		This is another column with the class .col-md-6.
+	</div>
+	</div>
+</div>
+ +

GCWeb Override .brdr-tp .row class working example

+
+
+
Column 1
+
Column 2
+
Column 3
+
+
+

Code sample

+
<div class="well brdr-tp">
+	<div class="row">
+	<div class="col-md-4">Column 1</div>
+	<div class="col-md-4">Column 2</div>
+	<div class="col-md-4">Column 3</div>
+	</div>
+</div>
+ +

GCWeb Override .pagedetails class working example

+
+
+
+

This is a row inside a div with the .pagedetails class.

+

The row contains two columns, each occupying 50% of the container width on small screens (sm).

+

The columns have padding on the left and right sides due to the [class*=col-] class.

+
+
+

This is the second column of the row.

+

The row class provides a negative margin on the left and right sides to counteract the padding applied to the columns.

+
+
+
+ Page Details Summary +

This is a details element inside a div with the .pagedetails class.

+

It has padding of 2em at the top and bottom.

+

The .row class is used for backwards compatibility with GCWeb 4.0.26 and below.

+

The details element inside the .row class has margins applied.

+

The first child of the .row class has a top margin, affecting the "Report a Problem" link.

+
+
+

Code sample

+
<div class="well pagedetails">
+	<div class="row">
+	<div class="col-sm-6">
+		<p>This is a row inside a div with the .pagedetails class.</p>
+		<p>The row contains two columns, each occupying 50% of the container width on small screens (sm).</p>
+		<p>The columns have padding on the left and right sides due to the [class*=col-] class.</p>
+	</div>
+	<div class="col-sm-6">
+		<p>This is the second column of the row.</p>
+		<p>The row class provides a negative margin on the left and right sides to counteract the padding applied to the columns.</p>
+	</div>
+	</div>
+	<details>
+	<summary>Page Details Summary</summary>
+	<p>This is a details element inside a div with the .pagedetails class.</p>
+	<p>It has padding of 2em at the top and bottom.</p>
+	<p>The .row class is used for backwards compatibility with GCWeb 4.0.26 and below.</p>
+	<p>The details element inside the .row class has margins applied.</p>
+	<p>The first child of the .row class has a top margin, affecting the "Report a Problem" link.</p>
+	</details>
+</div>
+ +

GCWeb override - Site footer .row

+
+
+
+
+
+
About Us
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget est eu libero fringilla accumsan.

+
+
+
Contact Us
+

Email: info@example.com
Phone: 123-456-7890

+
+
+
Follow Us
+
    +
    • +
    • +
    • +
+
+
+
+
+
+

Code sample

+
<div class="well" ><footer class="gcweb-override-site-footer">
+	<div class="container">
+		<div class="row">
+			<div class="col-md-4">
+				<h5>About Us</h5>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget est eu libero fringilla accumsan.</p>
+			</div>
+			<div class="col-md-4">
+				<h5>Contact Us</h5>
+				<p>Email: info@example.com<br>Phone: 123-456-7890</p>
+			</div>
+			<div class="col-md-4">
+				<h5>Follow Us</h5>
+				<ul class="list-inline">
+					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-facebook"></i></a></li>
+					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-twitter"></i></a></li>
+					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-instagram"></i></a></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</footer></div>
+ +

GCWeb Override .gcweb-menu .sm .row class working example

+
+ +
+

Code sample

+
<div class="gcweb-menu">
+	<ul class="sm">
+	<li>
+		<a href="#">Menu Item 1</a>
+		<ul class="row">
+	<li><a href="#">Submenu Item 1</a></li>
+	<li><a href="#">Submenu Item 2</a></li>
+	<li><a href="#">Submenu Item 3</a></li>
+		</ul>
+	</li>
+	<li><a href="#">Menu Item 2</a></li>
+	<li><a href="#">Menu Item 3</a></li>
+	</ul>
+</div>
+ + +

Bootstrap .row-no-gutters class working example

+

.row-no-gutters class is applied to the row, which removes the gutters (spacing) between columns inside the row.

+
+
+
+
+ Column 1 +
+
+
+
+ Column 2 +
+
+
+
+ Column 3 +
+
+
+
+

Code sample

+
<div class="container">
+	<div class="row row-no-gutters">
+	<div class="col-4">
+		<div class="content-box">
+	Column 1
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="content-box">
+	Column 2
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="content-box">
+	Column 3
+		</div>
+	</div>
+	</div>
+</div>
+ +

Bootstrap [class*=col-] class working example with no gutters

+

In these examples, the Bootstrap classes `[class*=col-]` are used in various scenarios: with no gutters, with default gutters, within a form, and within a table. These classes allow to create responsive layouts with grid columns and customize the spacing between the columns.

+ +
+
+
+
+ Column 1 +
+
+
+
+ Column 2 +
+
+
+
+ Column 3 +
+
+
+
+

Code sample

+
<div class="container">
+	<div class="row row-no-gutters">
+	<div class="col-4">
+		<div class="content-box">
+	Column 1
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="content-box">
+	Column 2
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="content-box">
+	Column 3
+		</div>
+	</div>
+	</div>
+</div>
+ +

Bootstrap [class*=col-] class working example with default gutters

+
+
+
+
+ Column 1 +
+
+
+
+ Column 2 +
+
+
+
+ Column 3 +
+
+
+
+

Code sample

+
<div class="container">
+	<div class="row">
+	<div class="col-4">
+		<div class="content-box">
+	Column 1
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="content-box">
+	Column 2
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="content-box">
+	Column 3
+		</div>
+	</div>
+	</div>
+</div>
+ +

Bootstrap [class*=col-] class working example within a form

+
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+

Code sample

+
<div class="container">
+	<form>
+	<div class="row">
+		<div class="col-6">
+	<label for="name">Name:</label>
+	<input type="text" id="name" name="name" class="form-control">
+		</div>
+		<div class="col-6">
+	<label for="email">Email:</label>
+	<input type="email" id="email" name="email" class="form-control">
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-12">
+	<label for="message">Message:</label>
+	<textarea id="message" name="message" class="
+
+form-control" rows="4"></textarea>
+		</div>
+	</div>
+	</form>
+</div>
+ +

Bootstrap [class*=col-] class working example within a table

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameAgeOccupation
John Doe30Engineer
Jane Smith25Doctor
Michael Johnson35Teacher
+
+

Code sample

+
<div class="container">
+	<table class="table">
+	<thead>
+		<tr>
+	<th class="col-4">Name</th>
+	<th class="col-4">Age</th>
+	<th class="col-4">Occupation</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+	<td class="col-4">John Doe</td>
+	<td class="col-4">30</td>
+	<td class="col-4">Engineer</td>
+		</tr>
+		<tr>
+	<td class="col-4">Jane Smith</td>
+	<td class="col-4">25</td>
+	<td class="col-4">Doctor</td>
+		</tr>
+		<tr>
+	<td class="col-4">Michael Johnson</td>
+	<td class="col-4">35</td>
+	<td class="col-4">Teacher</td>
+		</tr>
+	</tbody>
+	</table>
+</div>
+ +

Bootstrap Grid Column with Auto Width Based on Content col-xs-auto col-sm-auto col-md-auto col-lg-auto

+

The columns with the .col-xs-auto, .col-sm-auto, .col-md-auto, and .col-lg-auto classes will automatically adjust their width based on the content inside them. This ensures that the content is not truncated, and the columns will take up only the necessary space to accommodate the content.

+
+
+
+
+ This is a column with auto width based on content. + It will adjust its width to fit the content inside. +
+
+
+
+ This is another column with auto width based on content. + The content inside will determine its width dynamically. +
+
+
+
+

Code Sample

+
<div class="well">
+	<div class="row">
+	<div class="col-xs-auto col-sm-auto col-md-auto col-lg-auto">
+		<div class="content-box">
+	This is a column with auto width based on content.
+	It will adjust its width to fit the content inside.
+		</div>
+	</div>
+	<div class="col-xs-auto col-sm-auto col-md-auto col-lg-auto">
+		<div class="content-box">
+	This is another column with auto width based on content.
+	The content inside will determine its width dynamically.
+		</div>
+	</div>
+	</div>
+</div>
+ +

WET-BOEW col-me-push-3 class working example (with RTL direction)

+
+
+
+
This is a column that occupies 6 units (50%) of the width in its normal position, but with col-md-push-3 class, it is pushed 3 units to the right, and its effective position will be after the first 3 units.
+
+
+
+
+

Code Sample

+
<div class="wb-outer-container" dir="rtl">
+	<div class="wb-inner-container">
+	<div class="col-md-6 col-md-push-3">
+		<div class="content-box">This is a column that occupies 6 units (50%) of the width in its normal position, but with <code>col-md-push-3</code> class, it is pushed 3 units to the right, and its effective position will be after the first 3 units. </div>
+	</div>
+	</div>
+</div><div class="clearfix"></div>
+
+ +

WET-BOEW [class*=col-] .well.header-rwd[class*=pstn-] class working example

+
+
+
+
+ The header-rwd class will inherit the width of the parent container + due to the CSS rule [class*=col-] .well.header-rwd[class*=pstn-]. +
+
+
+
+

Code Sample

+
<div class="well">
+	<div class="row">
+	<div class="col-md-6">
+		<div class="well header-rwd pstn-example">
+	The <code>header-rwd</code> class will inherit the width of the parent container
+	due to the CSS rule <code>[class*=col-] .well.header-rwd[class*=pstn-]</code>.
+		</div>
+	</div>
+	</div>
+</div>
+ +

GC Corporate .gc-crprt class working example

+This example demonstrates how the .gc-crprt class works with the Bootstrap .col-md-8 and .col-md-4 classes to create a responsive layout with columns. +
+
+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ +
+
+
+

Code Sample

+
<div class="well row"><div class="gc-crprt">
+	<div class="col-md-8">
+	<div class="col-md-4">
+	
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+	</div>
+	<div class="col-md-4">
+		
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+	</div>
+	
+	</div>
+</div></div>
+ +

Header .brand class working example

+
+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+
+ +

Code Sample

+
<div  class="well" style="height: 200px;" ><header>
+	<div class="brand col-xs-5">
+	<div class="logo">
+		<!-- Logo content goes here -->
+	</div>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+	</div>
+</header></div>
+ +

GCWeb Infostripe with .col- Classes

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus nibh, finibus ut sagittis lacinia, consectetur sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus et lectus at turpis tristique pretium. Aenean vel massa eu neque consequat dictum. Integer elit ante, egestas non eros non, consectetur posuere justo. Nam vel sollicitudin nisl, et imperdiet mauris. Quisque scelerisque tincidunt nibh, sed bibendum mauris laoreet vel. In hac habitasse platea dictumst.

+
+
+ +

Code Sample

+
<div class="well"> style="height: 300px;"<div class="infostripe col-md-8 col-sm-6 col-xs-12">
+	
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus nibh, finibus ut sagittis lacinia, consectetur sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus et lectus at turpis tristique pretium. Aenean vel massa eu neque consequat dictum. Integer elit ante, egestas non eros non, consectetur posuere justo. Nam vel sollicitudin nisl, et imperdiet mauris. Quisque scelerisque tincidunt nibh, sed bibendum mauris laoreet vel. In hac habitasse platea dictumst.</p>
+</div></div>
+ +

GCWeb Authentication Section with .col- classes

+

It contains a row with a single column of `.col-md-8`. Inside the column, there is a `gcweb-menu` class that represents the authentication menu. +

+
+
+
+
+
    + +
  • [Menu 1]
    • +
  • [Menu 2]
    • +
  • [Menu 3]
    • + +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • +
+
+
+
+
+

Code Sample

+
<div class="well" style="height: 200px;">
+	<div class="row">
+	<div class="col-md-8">
+		<div class="gcweb-menu">
+	<ul role="menu">
+		<!-- Menu items for authentication section -->
+		<li>[Menu 1]</li>
+		<li>[Menu 2]</li>
+		<li>[Menu 3]</li>
+		<!-- Authentication menu items here -->
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+	</ul>
+		</div>
+	</div>
+	</div>
+</div>
+ +

Grid baseline (containers)

+ +

GCWeb Grid Baseline

+

Please note that the `.container-fixed` mixin is used to apply the appropriate styling for the fixed-width container.

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

Code Sample

+
<div class="well"><div class="container">
+	
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+</div></div>
+ +

GCWeb Fluid Container

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

Code Sample

+
<div class="well"><div class="container-fluid">
+	
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+</div></div>
+ +

GCWeb Fixed-width Container

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

Code Sample

+
<div class="well"><div class="container-fixed">
+	
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+</div></div>
diff --git a/common/layout/layout-fr.html b/common/layout/layout-fr.html new file mode 100644 index 0000000000..74979377c8 --- /dev/null +++ b/common/layout/layout-fr.html @@ -0,0 +1,753 @@ +--- +{ + "title": "Mise en page", + "language": "fr", + "altLangPage": "layout-en.html", + "description": "Classes Bootstrap et WET présentant des options de mise en page telles que flexbox, grille CSS, ligne de base de la grille (conteneurs) accompagnées d'exemples pratiques pour tester et observer différentes mises en page de pages.", + "dateModified": "2023-08-08" +} +--- + +

Sur cette page :

+ + + +

Flexbox

+ +

Exemple d'utilisation de la classe WET-BOEW .d-flex

+
+
+ Il s'agit d'un conteneur flexible avec la classe .d-flex. Ses enfants sont alignés en ligne par défaut. +
+
+ Vous pouvez ajouter plusieurs enfants au conteneur flexible pour les aligner horizontalement. +
+
+

Exemple de code

+
<div class="well d-flex">
+	<div class="child">
+		Il s'agit d'un conteneur flexible avec la classe .d-flex. Ses enfants sont alignés en ligne par défaut.
+	</div>
+	<div class="child">
+		Vous pouvez ajouter plusieurs enfants au conteneur flexible pour les aligner horizontalement.
+	</div>
+</div>
+ +

Exemple d'utilisation de la classe WET-BOEW .flex-column

+
+
+ Il s'agit d'un conteneur flexible avec les classes .d-flex et .flex-column. + Ses enfants sont alignés dans une direction de colonne. Chaque enfant occupe la largeur totale du conteneur. +
+
+ Vous pouvez ajouter plusieurs enfants au conteneur flexible avec .flex-column pour les aligner verticalement. +
+
+

Exemple de code

+
<div class="well d-flex flex-column">
+	<div class="child">
+		Il s'agit d'un conteneur flexible avec les classes .d-flex et .flex-column.
+		Ses enfants sont alignés dans une direction de colonne. Chaque enfant occupe la largeur totale du conteneur.
+	</div>
+	<div class="child">
+		Vous pouvez ajouter plusieurs enfants au conteneur flexible avec .flex-column pour les aligner verticalement.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .align-items-center

+
+
+ Il s'agit d'un conteneur flexible avec les classes .d-flex et .align-items-center. + Ses enfants sont alignés verticalement au centre. +
+
+

Exemple de code

+
<div class="well d-flex align-items-center" style="height: 250px;">
+	<div class="child">
+		Il s'agit d'un conteneur flexible avec les classes .d-flex et .align-items-center.
+		Ses enfants sont alignés verticalement au centre.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .align-self-center

+
+
+ Il s'agit d'un conteneur flexible avec la classe .d-flex. + Le premier enfant (.align-self-center) est aligné verticalement au centre à l'intérieur du conteneur flexible. +
+
+ Le deuxième enfant n'est pas aligné et suit l'alignement par défaut. +
+
+

Exemple de code

+
<div class="well d-flex" style="height: 250px;">
+	<div class="child align-self-center">
+		Il s'agit d'un conteneur flexible avec la classe .d-flex.
+		Le premier enfant (.align-self-center) est aligné verticalement au centre à l'intérieur du conteneur flexible.
+	</div>
+	<div class="child">
+		Le deuxième enfant n'est pas aligné et suit l'alignement par défaut.
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe WET-BOEW .align-self-end

+
+
+ Il s'agit d'un conteneur flexible avec la classe .d-flex. + Le premier enfant (.align-self-end) est aligné verticalement à l'extrémité à l'intérieur du conteneur flexible. +
+
+ Le deuxième enfant n'est pas aligné et suit l'alignement par défaut. +
+
+

Exemple de code

+
<div class="well d-flex" style="height: 250px;">
+	<div class="child align-self-end">
+		Il s'agit d'un conteneur flexible avec la classe .d-flex.
+		Le premier enfant (.align-self-end) est aligné verticalement à l'extrémité à l'intérieur du conteneur flexible.
+	</div>
+	<div class="child">
+		Le deuxième enfant n'est pas aligné et suit l'alignement par défaut.
+	</div>
+</div>
+ +

Grille CSS

+ +

Exemple de fonctionnement de la classe WET-BOEW [class*=col-]

+
+
+
+ Cet élément a la classe col-6. Il a un padding à gauche et à droite de 0. +
+
+
+

Exemple de code

+
<div class="well">
+	<div class="row">
+	<div class="col-6">
+		Cet élément a la classe col-6. Il a un padding à gauche et à droite de 0.
+	</div>
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe Bootstrap .row

+
+
+
+ Cet élément est à l'intérieur d'une rangée de grille Bootstrap avec la classe .row. + Il contient et efface les flottants de vos colonnes. +
+
+ Ceci est une autre colonne avec la classe .col-md-6. +
+
+
+

Exemple de code

+
<div class="well">
+	<div class="row">
+	<div class="col-md-6">
+		Cet élément est à l'intérieur d'une rangée de grille Bootstrap avec la classe .row.
+		Il contient et efface les flottants de vos colonnes.
+	</div>
+	<div class="col-md-6">
+		Ceci est une autre colonne avec la classe .col-md-6.
+	</div>
+	</div>
+</div>
+ +

GCWeb Override - Exemple de fonctionnement de la classe .brdr-tp .row

+
+
+
Colonne 1
+
Colonne 2
+
Colonne 3
+
+
+

Exemple de code

+
<div class="well brdr-tp">
+	<div class="row">
+	<div class="col-md-4">Colonne 1</div>
+	<div class="col-md-4">Colonne 2</div>
+	<div class="col-md-4">Colonne 3</div>
+	</div>
+</div>
+ +

GCWeb Override - Exemple de fonctionnement de la classe .pagedetails

+
+
+
+

Ceci est une rangée à l'intérieur d'une division avec la classe .pagedetails.

+

La rangée contient deux colonnes, chacune occupant 50% de la largeur du conteneur sur les petits écrans (sm).

+

Les colonnes ont un padding à gauche et à droite en raison de la classe [class*=col-].

+
+
+

Ceci est la deuxième colonne de la rangée.

+

La classe de la rangée ajoute une marge négative aux côtés gauche et droit pour contrer le padding appliqué aux colonnes.

+
+
+
+ Résumé des détails de la page +

Ceci est un élément détails à l'intérieur d'une division avec la classe .pagedetails.

+

Il a un padding de 2em en haut et en bas.

+

La classe .row est utilisée pour la compatibilité ascendante avec GCWeb 4.0.26 et moins.

+

L'élément details à l'intérieur de la classe .row a des marges appliquées.

+

Le premier élément de la classe .row a une marge supérieure, affectant le lien "Signaler un problème".

+
+
+

Exemple de code

+
<div class="well pagedetails">
+	<div class="row">
+	<div class="col-sm-6">
+		<p>Ceci est une rangée à l'intérieur d'une division avec la classe .pagedetails.</p>
+		<p>La rangée contient deux colonnes, chacune occupant 50% de la largeur du conteneur sur les petits écrans (sm).</p>
+		<p>Les colonnes ont un padding à gauche et à droite en raison de la classe [class*=col-].</p>
+	</div>
+	<div class="col-sm-6">
+		<p>Ceci est la deuxième colonne de la rangée.</p>
+		<p>La classe de la rangée ajoute une marge négative aux côtés gauche et droit pour contrer le padding appliqué aux colonnes.</p>
+	</div>
+	</div>
+	<details>
+	<summary>Résumé des détails de la page</summary>
+	<p>Ceci est un élément détails à l'intérieur d'une division avec la classe .pagedetails.</p>
+	<p>Il a un padding de 2em en haut et en bas.</p>
+	<p>La classe .row est utilisée pour la compatibilité ascendante avec GCWeb 4.0.26 et moins.</p>
+	<p>L'élément details à l'intérieur de la classe .row a des marges appliquées.</p>
+	<p>Le premier élément de la classe .row a une marge supérieure, affectant le lien "Signaler un problème".</p>
+	</details>
+</div>
+ +

GCWeb override - Pied de page du site avec la classe .row

+
+
+
+
+
+
À propos de nous
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget est eu libero fringilla accumsan.

+
+
+
Contactez-nous
+

Email : info@example.com
Téléphone : 123-456-7890

+
+
+
Suivez-nous
+
    +
    • +
    • +
    • +
+
+
+
+
+
+

Exemple de code

+
<div class="well"><footer class="gcweb-override-site-footer">
+	<div class="container">
+		<div class="row">
+			<div class="col-md-4">
+				<h5>À propos de nous</h5>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget est eu libero fringilla accumsan.</p>
+			</div>
+			<div class="col-md-4">
+				<h5>Contactez-nous</h5>
+				<p>Email : info@example.com<br>Téléphone : 123-456-7890</p>
+			</div>
+			<div class="col-md-4">
+				<h5>Suivez-nous</h5>
+				<ul class="list-inline">
+					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-facebook"></i></a></li>
+					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-twitter"></i></a></li>
+					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-instagram"></i></a></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</footer></div>
+ +

GCWeb Override .gcweb-menu .sm .row Exemple de fonctionnement de la classe

+
+ +
+

Exemple de code

+
<div class="gcweb-menu">
+	<ul class="sm">
+	<li>
+		<a href="#">Élément de menu 1</a>
+		<ul class="row">
+	<li><a href="#">Élément de sous-menu 1</a></li>
+	<li><a href="#">Élément de sous-menu 2</a></li>
+	<li><a href="#">Élément de sous-menu 3</a></li>
+		</ul>
+	</li>
+	<li><a href="#">Élément de menu 2</a></li>
+	<li><a href="#">Élément de menu 3</a></li>
+	</ul>
+</div>
+ +

Bootstrap .row-no-gutters Exemple de fonctionnement de la classe

+

La classe .row-no-gutters est appliquée à la rangée, ce qui supprime les espaces (marges) entre les colonnes à l'intérieur de la rangée.

+
+
+
+
+ Colonne 1 +
+
+
+
+ Colonne 2 +
+
+
+
+ Colonne 3 +
+
+
+
+

Exemple de code

+
<div class="container">
+	<div class="row row-no-gutters">
+	<div class="col-4">
+		<div class="content-box">
+	Colonne 1
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="content-box">
+	Colonne 2
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="content-box">
+	Colonne 3
+		</div>
+	</div>
+	</div>
+</div>
+ +

Bootstrap [class*=col-] Exemple de fonctionnement de la classe avec pas de marges

+

Dans ces exemples, les classes Bootstrap `[class*=col-]` sont utilisées dans différents scénarios : sans marges, avec les marges par défaut, dans un formulaire et dans un tableau. Ces classes permettent de créer des mises en page adaptatives avec des colonnes de grille et de personnaliser l'espacement entre les colonnes.

+ +
+
+
+
+ Colonne 1 +
+
+
+
+ Colonne 2 +
+
+
+
+ Colonne 3 +
+
+
+
+

Exemple de code

+
<div class="container">
+	<div class="row row-no-gutters">
+	<div class="col-4">
+		<div class="content-box">
+	Colonne 1
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="content-box">
+	Colonne 2
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="content-box">
+	Colonne 3
+		</div>
+	</div>
+	</div>
+</div>
+ +

Bootstrap [class*=col-] Exemple de fonctionnement de la classe avec marges par défaut

+
+
+
+
+ Colonne 1 +
+
+
+
+ Colonne 2 +
+
+
+
+ Colonne 3 +
+
+
+
+

Exemple de code

+
<div class="container">
+	<div class="row">
+	<div class="col-4">
+		<div class="content-box">
+	Colonne 1
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="content-box">
+	Colonne 2
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="content-box">
+	Colonne 3
+		</div>
+	</div>
+	</div>
+</div>
+ +

Bootstrap [class*=col-] Exemple de fonctionnement de la classe dans un formulaire

+
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+

Exemple de code

+
<div class="container">
+	<form>
+	<div class="row">
+		<div class="col-6">
+	<label for="name">Nom :</label>
+	<input type="text" id="name" name="name" class="form-control">
+		</div>
+		<div class="col-6">
+	<label for="email">Email :</label>
+	<input type="email" id="email" name="email" class="form-control">
+		</div>
+	</div>
+	<div class="row">
+		<div class="col-12">
+	<label for="message">Message :</label>
+	<textarea id="message" name="message" class="form-control" rows="4"></textarea>
+		</div>
+	</div>
+	</form>
+</div>
+ +

Bootstrap [class*=col-] Exemple de fonctionnement de la classe dans un tableau

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NomÂgeProfession
John Doe30Ingénieur
Jane Smith25Docteur
Michael Johnson35Enseignant
+
+

Exemple de code

+
<div class="container">
+	<table class="table">
+	<thead>
+		<tr>
+	<th class="col-4">Nom</th>
+	<th class="col-4">Âge</th>
+	<th class="col-4">Profession</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+	<td class="col-4">John Doe</td>
+	<td class="col-4">30</td>
+	<td class="col-4">Ingénieur</td>
+		</tr>
+		<tr>
+	<td class="col-4">Jane Smith</td>
+	<td class="col-4">25</td>
+	<td class="col-4">Docteur</td>
+		</tr>
+		<tr>
+	<td class="col-4">Michael Johnson</td>
+	<td class="col-4">35</td>
+	<td class="col-4">Enseignant</td>
+		</tr>
+	</tbody>
+	</table>
+</div>
+ +

Bootstrap Grille de colonnes avec largeur automatique en fonction du contenu col-xs-auto col-sm-auto col-md-auto col-lg-auto

+

Les colonnes avec les classes .col-xs-auto, .col-sm-auto, .col-md-auto et .col-lg-auto ajusteront automatiquement leur largeur en fonction du contenu qu'elles contiennent. Cela garantit que le contenu n'est pas tronqué, et les colonnes occuperont seulement l'espace nécessaire pour accueillir le contenu.

+
+
+
+
+ Ceci est une colonne avec une largeur automatique en fonction du contenu. + Elle ajustera sa largeur pour s'adapter au contenu à l'intérieur. +
+
+
+
+ Ceci est une autre colonne avec une largeur automatique en fonction du contenu. + Le contenu à l'intérieur déterminera sa largeur dynamiquement. +
+
+
+
+

Exemple de code

+
<div class="well">
+	<div class="row">
+	<div class="col-xs-auto col-sm-auto col-md-auto col-lg-auto">
+		<div class="content-box">
+	Ceci est une colonne avec une largeur automatique en fonction du contenu.
+	Elle ajustera sa largeur pour s'adapter au contenu à l'intérieur.
+		</div>
+	</div>
+	<div class="col-xs-auto col-sm-auto col-md-auto col-lg-auto">
+		<div class="content-box">
+	Ceci est une autre colonne avec une largeur automatique en fonction du contenu.
+	Le contenu à l'intérieur déterminera sa largeur dynamiquement.
+		</div>
+	</div>
+	</div>
+</div>
+ +

WET-BOEW col-me-push-3 Exemple de fonctionnement de la classe (avec direction RTL)

+
+
+
+
Il s'agit d'une colonne qui occupe 6 unités (50 %) de la largeur dans sa position normale, mais avec la classe col-md-push-3, elle est poussée de 3 unités vers la droite, et sa position effective sera après les 3 premières unités.
+
+
+
+
+

Exemple de code

+
<div class="wb-outer-container" dir="rtl">
+	<div class="wb-inner-container">
+	<div class="col-md-6 col-md-push-3">
+		<div class="content-box">Il s'agit d'une colonne qui occupe 6 unités (50 %) de la largeur dans sa position normale, mais avec la classe <code>col-md-push-3</code>, elle est poussée de 3 unités vers la droite, et sa position effective sera après les 3 premières unités. </div>
+	</div>
+	</div>
+</div><div class="clearfix"></div>
+
+ +

WET-BOEW [class*=col-] .well.header-rwd[class*=pstn-] Exemple de fonctionnement de la classe

+
+
+
+
+ La classe header-rwd héritera de la largeur du conteneur parent grâce à la règle CSS [class*=col-] .well.header-rwd[class*=pstn-]. +
+
+
+
+

Exemple de code

+
<div class="well">
+	<div class="row">
+	<div class="col-md-6">
+		<div class="well header-rwd pstn-example">
+	La classe <code>header-rwd</code> héritera de la largeur du conteneur parent
+	grâce à la règle CSS <code>[class*=col-] .well.header-rwd[class*=pstn-]</code>.
+		</div>
+	</div>
+	</div>
+</div>
+ +

Classe GC Corporate .gc-crprt exemple de fonctionnement

+Cet exemple montre comment la classe .gc-crprt fonctionne avec les classes Bootstrap .col-md-8 et .col-md-4 pour créer une mise en page responsive avec des colonnes. +
+
+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ +
+
+
+

Exemple de code

+
<div class="well row"><div class="gc-crprt">
+	<div class="col-md-8">
+	<div class="col-md-4">
+		
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+	</div>
+	<div class="col-md-4">
+		
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+	</div>
+	
+	</div>
+</div></div>
+ +

Classe d'en-tête .brand exemple de fonctionnement

+
+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+
+ +

Exemple de code

+
<div  class="well" style="height: 200px;" ><header>
+	<div class="brand col-xs-5">
+	<div class="logo">
+		<!-- Contenu du logo va ici -->
+	</div>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+	</div>
+</header></div>
+ +

Infostripe GCWeb avec les classes .col-

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus nibh, finibus ut sagittis lacinia, consectetur sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus et lectus at turpis tristique pretium. Aenean vel massa eu neque consequat dictum. Integer elit ante, egestas non eros non, consectetur posuere justo. Nam vel sollicitudin nisl, et imperdiet mauris. Quisque scelerisque tincidunt nibh, sed bibendum mauris laoreet vel. In hac habitasse platea dictumst.

+
+
+ +

Exemple de code

+
<div class="well"> style="height: 300px;"<div class="infostripe col-md-8 col-sm-6 col-xs-12">
+	
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus nibh, finibus ut sagittis lacinia, consectetur sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus et lectus at turpis tristique pretium. Aenean vel massa eu neque consequat dictum. Integer elit ante, egestas non eros non, consectetur posuere justo. Nam vel sollicitudin nisl, et imperdiet mauris. Quisque scelerisque tincidunt nibh, sed bibendum mauris laoreet vel. In hac habitasse platea dictumst.</p>
+</div></div>
+ +

Section d'authentification GCWeb avec les classes .col-

+

Elle contient une rangée avec une seule colonne de `.col-md-8`. À l'intérieur de la colonne, il y a une classe `gcweb-menu` qui représente le menu d'authentification.

+
+
+
+
+
    + +
  • [Menu 1]
    • +
  • [Menu 2]
    • +
  • [Menu 3]
    • + +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • +
+
+
+
+
+

Exemple de code

+
<div class="well" style="height: 200px;">
+	<div class="row">
+	<div class="col-md-8">
+		<div class="gcweb-menu">
+	<ul role="menu">
+		<!-- Éléments de menu pour la section d'authentification -->
+		<li>[Menu 1]</li>
+		<li>[Menu 2]</li>
+		<li>[Menu 3]</li>
+		<!-- Éléments de menu d'authentification ici -->
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+	</ul>
+		</div>
+	</div>
+	</div>
+</div>
+ +

Ligne de base de la grille (conteneurs)

+ +

Ligne de base GCWeb

+

Veuillez noter que le mixin `.container-fixed` est utilisé pour appliquer le style approprié au conteneur de largeur fixe.

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

Exemple de code

+
<div class="well"><div class="container">
+	
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+</div></div>
+ +

Conteneur fluide GCWeb

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

Exemple de code

+
<div class="well"><div class="container-fluid">
+	
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+</div></div>
+ +

Conteneur de largeur fixe GCWeb

+
+
+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

Exemple de code

+
<div class="well"><div class="container-fixed">
+	
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+</div></div>
From 5f2db880ada7445106f57f85998eca724e10aeb9 Mon Sep 17 00:00:00 2001 From: hanseller Date: Fri, 15 Mar 2024 16:06:22 -0400 Subject: [PATCH 02/10] Fixing Json and html files --- _data/common.json | 2 +- common/display/display-en.html | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/_data/common.json b/_data/common.json index a952f4f28f..0e5e20e47f 100644 --- a/_data/common.json +++ b/_data/common.json @@ -249,7 +249,7 @@ "componentName": "layout", "status": "stable", "pages": { - "docs": [ + "examples": [ { "title": "Layout", "language": "en", diff --git a/common/display/display-en.html b/common/display/display-en.html index 4625c5e361..ccc2d07c35 100644 --- a/common/display/display-en.html +++ b/common/display/display-en.html @@ -30,9 +30,9 @@

Float

Bootstrap 3 .clearfixworking example

-
Column 1
-
Column 2
-
Column 3
+
Column 1
+
Column 2
+
Column 3
@@ -64,20 +64,20 @@

Code sample

</div>

Bootstrap 3 .pull-right class working example

-
+
This element is floated to the right within its parent container.

Code sample

-
<div class="well" style="height: 115px;">
+
<div class="well">
 	<div class="pull-right well">
 		This element is floated to the right within its parent container.
 	</div>
 </div>

 
 
Bootstrap 3 .pull-left class working example

-

+

 	

 		This element is floated to the left within its parent container.
 	

@@ -85,7 +85,7 @@ 
Bootstrap 3 .pull-left class working example

 

 <div class="clearfix"> </div>
 
Code sample

-
<div class="well" style="height: 115px;">
+
<div class="well">
 	<div class="pull-left well">
 		This element is floated to the left within its parent container.
 	</div>
@@ -270,7 +270,7 @@ 
WET-BOEW .visible-xs-inline-block class working example

 		This element is visible on extra small screens (xs) and has an inline-block display.
 	

 

-
Code sample

+
Code sample

 
<div class="well">
 	<div class="visible-xs-inline-block well">
 		This element is visible on extra small screens (xs) and has an inline-block display.
@@ -957,13 +957,13 @@ 
Code sample

 	</div>
 </div>

 
-
WET-BOEW .max-content class working example

+
WET-BOEW .max-content class working example

 	

 		This element adjusts its width to fit its content, but not wider than its parent container.
 	

 

 
Code sample

-
<div class="well" style="width: 890px;">
+
<div class="well">
 	<div class="max-content well">
 		This element adjusts its width to fit its content, but not wider than its parent container.
 	</div>

From 2718e6b0cf5de96d007710a4792a724e18f753f1 Mon Sep 17 00:00:00 2001
From: hanseller 
Date: Fri, 22 Mar 2024 14:32:10 -0400
Subject: [PATCH 03/10] Creating New HTML and fixing layout.html

---
 common/display/display-en.html                | 35 +++++------
 common/display/display-fr.html                | 40 ++++++------
 common/grid-layout/align_columns-en.html      | 34 ++++++++++
 common/grid-layout/align_columns-fr.html      | 33 ++++++++++
 common/grid-layout/authentication-en.html     | 48 ++++++++++++++
 common/grid-layout/authentication-fr.html     | 48 ++++++++++++++
 common/grid-layout/grid_baseline-en.html      | 28 +++++++++
 common/grid-layout/grid_baseline-fr.html      | 30 +++++++++
 common/{layout => grid-layout}/index.json-ld  |  5 +-
 common/{layout => grid-layout}/layout-en.html | 22 +++----
 common/{layout => grid-layout}/layout-fr.html | 24 +++----
 common/grid-layout/logo-en.html               | 33 ++++++++++
 common/grid-layout/logo-fr.html               | 34 ++++++++++
 common/grid-layout/menu_items-en.html         | 42 +++++++++++++
 common/grid-layout/menu_items-fr.html         | 42 +++++++++++++
 common/grid-layout/responsive_columns-en.html | 43 +++++++++++++
 common/grid-layout/responsive_columns-fr.html | 44 +++++++++++++
 common/grid-layout/site_footer-en.html        | 61 ++++++++++++++++++
 common/grid-layout/site_footer-fr.html        | 62 +++++++++++++++++++
 19 files changed, 645 insertions(+), 63 deletions(-)
 create mode 100644 common/grid-layout/align_columns-en.html
 create mode 100644 common/grid-layout/align_columns-fr.html
 create mode 100644 common/grid-layout/authentication-en.html
 create mode 100644 common/grid-layout/authentication-fr.html
 create mode 100644 common/grid-layout/grid_baseline-en.html
 create mode 100644 common/grid-layout/grid_baseline-fr.html
 rename common/{layout => grid-layout}/index.json-ld (95%)
 rename common/{layout => grid-layout}/layout-en.html (97%)
 rename common/{layout => grid-layout}/layout-fr.html (97%)
 create mode 100644 common/grid-layout/logo-en.html
 create mode 100644 common/grid-layout/logo-fr.html
 create mode 100644 common/grid-layout/menu_items-en.html
 create mode 100644 common/grid-layout/menu_items-fr.html
 create mode 100644 common/grid-layout/responsive_columns-en.html
 create mode 100644 common/grid-layout/responsive_columns-fr.html
 create mode 100644 common/grid-layout/site_footer-en.html
 create mode 100644 common/grid-layout/site_footer-fr.html

diff --git a/common/display/display-en.html b/common/display/display-en.html
index ccc2d07c35..9d00b78262 100644
--- a/common/display/display-en.html
+++ b/common/display/display-en.html
@@ -30,9 +30,9 @@ 
Float

 
Bootstrap 3  .clearfixworking example

 

 	

-		
Column 1

-		
Column 2

-		
Column 3

+		
Column 1

+		
Column 2

+		
Column 3

 		
 		

 	

@@ -41,9 +41,9 @@ 
Bootstrap 3  .clearfixworking example

 
Code sample

 
<div class="well">
 	<div class="row">
-	<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 1</div>
-	<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 2</div>
-	<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Column 3</div>
+	<div class="col-md-3 well pull-left bg-darker">Column 1</div>
+	<div class="col-md-3 well pull-left bg-darker">Column 2</div>
+	<div class="col-md-3 well pull-left bg-darker">Column 3</div>
 	<!-- Add clearfix class to clear floated elements -->
 	<div class="clearfix"></div>
 </div>
@@ -52,13 +52,13 @@ 
Code sample

 
 
Bootstrap 3 .center-block class working example

 

-	

+	

 		This element is centered horizontally within its parent container.
 	

 

 
Code sample

 
<div class="well">
-	<div class="center-block well" style="width: 200px; height: 200px; background-color: #ffffff;">
+	<div class="center-block well bg-darker">
 		This element is centered horizontally within its parent container.
 </div>
 </div>

@@ -82,8 +82,7 @@ 
Bootstrap 3 .pull-left class working example

 		This element is floated to the left within its parent container.
 	

 

-

-<div class="clearfix"> </div>
+
 
Code sample

 
<div class="well">
 	<div class="pull-left well">
@@ -618,49 +617,49 @@ 
Code sample

 
Opacity

 
 
WET-BOEW .opct-10 class working example

-	

+	

 		This element has an opacity of 0.1 (10%).
 	

 

 
Code sample

 
<div class="well">
-	<div class="opct-10 well" style="opacity: 0.1;">
+	<div class="opct-10 well">
 		This element has an opacity of 0.1 (10%).
 	</div>
 </div>

 
 
WET-BOEW .opct-20 class working example

-	

+	

 		This element has an opacity of 0.2 (20%).
 	

 

 
Code sample

 
<div class="well">
-	<div class="opct-20 well" style="opacity: 0.2;">
+	<div class="opct-20 well">
 		This element has an opacity of 0.2 (20%).
 	</div>
 </div>

 
 
WET-BOEW .opct-90 class working example

-	

+	

 		This element has an opacity of 0.9 (90%).
 	

 

 
Code sample

 
<div class="well">
-	<div class="opct-90 well" style="opacity: 0.9;">
+	<div class="opct-90 well">
 		This element has an opacity of 0.9 (90%).
 	</div>
 </div>

 
 
WET-BOEW .opct-100 class working example

-	

+	

 		This element has an opacity of 1 (100%).
 	

 

 
Code sample

 
<div class="well">
-	<div class="opct-100 well" style="opacity: 1;">
+	<div class="opct-100 well">
 		This element has an opacity of 1 (100%).
 	</div>
 </div>

diff --git a/common/display/display-fr.html b/common/display/display-fr.html
index 2949748584..56d20d54b8 100644
--- a/common/display/display-fr.html
+++ b/common/display/display-fr.html
@@ -30,9 +30,9 @@ 
Flottant

 
Exemple fonctionnel de .clearfixBootstrap 3

 

 	

-		
Colonne 1

-		
Colonne 2

-		
Colonne 3

+		
Colonne 1

+		
Colonne 2

+		
Colonne 3

 		
 		

 	

@@ -41,9 +41,9 @@ 
Exemple fonctionnel de .clearfixBootstrap 3

 
Exemple de code

 
<div class="well">
 	<div class="row">
-	<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Colonne 1</div>
-	<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Colonne 2</div>
-	<div class="col-md-3 well" style="background-color: #ffffff; float: left;">Colonne 3</div>
+	<div class="pull-left bg-darker text-white col-md-3 well">Colonne 1</div>
+	<div class="pull-left bg-darker text-white col-md-3 well">Colonne 2</div>
+	<div class="pull-left bg-darker text-white col-md-3 well">Colonne 3</div>
 	<!-- Ajouter la classe clearfix pour effacer les éléments flottants -->
 	<div class="clearfix"></div>
 </div>
@@ -52,7 +52,7 @@ 
Exemple de code

 
 
Exemple de fonctionnement de la classe Bootstrap 3 .center-block

 

-	

+	

 		Cet élément est centré horizontalement dans son conteneur parent.
 	

 

@@ -64,7 +64,7 @@ 
Exemple de code

 </div>

 
 
Exemple de fonctionnement de la classe Bootstrap 3 .pull-right

-

+

 	

 		Cet élément est flottant à droite dans son conteneur parent.
 	

@@ -77,7 +77,7 @@ 
Exemple de code

 </div>

 
 
Exemple de fonctionnement de la classe Bootstrap 3 .pull-left

-

+

 	

 		Cet élément est flottant à gauche dans son conteneur parent.
 	

@@ -85,7 +85,7 @@ 
Exemple de fonctionnement de la classe Bootstrap 3 .pull-left

 <div class="clearfix"> </div>
 
Exemple de code

-
<div class="well" style="height: 115px;">
+
<div class="well">
 	<div class="pull-left well">
 		Cet élément est flottant à gauche dans son conteneur parent.
 	</div>
@@ -634,52 +634,52 @@ 
Opacité

 
 
Exemple de fonctionnement de la classe WET-BOEW .opct-10

 

-	

+	

 		Cet élément a une opacité de 0.1 (10%).
 	

 

 
Exemple de code

 
<div class="well">
-	<div class="opct-10 well" style="opacity: 0.1;">
+	<div class="opct-10 well">
 		Cet élément a une opacité de 0.1 (10%).
 	</div>
 </div>

 
 
Exemple de fonctionnement de la classe WET-BOEW .opct-20

 

-	

+	

 		Cet élément a une opacité de 0.2 (20%).
 	

 

 
Exemple de code

 
<div class="well">
-	<div class="opct-20 well" style="opacity: 0.2;">
+	<div class="opct-20 well">
 		Cet élément a une opacité de 0.2 (20%).
 	</div>
 </div>

 
 
Exemple de fonctionnement de la classe WET-BOEW .opct-90

 

-	

+	

 		Cet élément a une opacité de 0.9 (90%).
 	

 

 
Exemple de code

 
<div class="well">
-	<div class="opct-90 well" style="opacity: 0.9;">
+	<div class="opct-90 well">
 		Cet élément a une opacité de 0.9 (90%).
 	</div>
 </div>

 
 
Exemple de fonctionnement de la classe WET-BOEW .opct-100

 

-	

+	

 		Cet élément a une opacité de 1 (100%).
 	

 

 
Exemple de code

 
<div class="well">
-	<div class="opct-100 well" style="opacity: 1;">
+	<div class="opct-100 well">
 		Cet élément a une opacité de 1 (100%).
 	</div>
 </div>

@@ -1002,13 +1002,13 @@ 
Exemple de code

 </div>

 
 
Exemple de fonctionnement de la classe WET-BOEW .max-content

-

+

 	

 		Cet élément ajuste sa largeur pour s'adapter à son contenu, mais pas plus large que son conteneur parent.
 	

 

 
Exemple de code

-
<div class="well" style="width: 890px;">
+
<div class="well">
 	<div class="max-content well">
 		Cet élément ajuste sa largeur pour s'adapter à son contenu, mais pas plus large que son conteneur parent.
 	</div>
diff --git a/common/grid-layout/align_columns-en.html b/common/grid-layout/align_columns-en.html
new file mode 100644
index 0000000000..301b029dad
--- /dev/null
+++ b/common/grid-layout/align_columns-en.html
@@ -0,0 +1,34 @@
+---
+{
+	"title": "Align Columns",
+	"language": "en",
+	"altLangPage": "align_columns-fr.html",
+	"pageclass": "cnt-wdth-lmtd",
+	"secondlevel": false,
+	"dateModified": "2024-03-20",
+	"share": "true"
+}
+---
+
+
WET-BOEW [class*=col-] .well.header-rwd[class*=pstn-] class working example

+

+	

+	

+		

+	The header-rwd class will inherit the width of the parent container
+	due to the CSS rule [class*=col-] .well.header-rwd[class*=pstn-].
+		

+	

+	

+

+
Code Sample

+
<div class="well">
+	<div class="row">
+	<div class="col-md-6">
+		<div class="well header-rwd pstn-example">
+	The <code>header-rwd</code> class will inherit the width of the parent container
+	due to the CSS rule <code>[class*=col-] .well.header-rwd[class*=pstn-]</code>.
+		</div>
+	</div>
+	</div>
+</div>

diff --git a/common/grid-layout/align_columns-fr.html b/common/grid-layout/align_columns-fr.html
new file mode 100644
index 0000000000..cf68ee2a3d
--- /dev/null
+++ b/common/grid-layout/align_columns-fr.html
@@ -0,0 +1,33 @@
+---
+{
+	"title": "Aligner les colonnes",
+	"language": "fr",
+	"altLangPage": "align_columns-en.html",
+	"pageclass": "cnt-wdth-lmtd",
+	"secondlevel": false,
+	"dateModified": "2024-03-20",
+	"share": "true"
+}
+---
+
+
WET-BOEW [class*=col-] .well.header-rwd[class*=pstn-] Exemple de fonctionnement de la classe

+

+	

+		

+			

+				La classe header-rwd héritera de la largeur du conteneur parent grâce à la règle CSS [class*=col-] .well.header-rwd[class*=pstn-].
+			

+		

+	

+

+
Exemple de code

+
<div class="well">
+	<div class="row">
+	<div class="col-md-6">
+		<div class="well header-rwd pstn-example">
+	La classe <code>header-rwd</code> héritera de la largeur du conteneur parent
+	grâce à la règle CSS <code>[class*=col-] .well.header-rwd[class*=pstn-]</code>.
+		</div>
+	</div>
+	</div>
+</div>

diff --git a/common/grid-layout/authentication-en.html b/common/grid-layout/authentication-en.html
new file mode 100644
index 0000000000..599ea0e480
--- /dev/null
+++ b/common/grid-layout/authentication-en.html
@@ -0,0 +1,48 @@
+---
+{
+	"title": "Authentication",
+	"language": "en",
+	"altLangPage": "authentication-fr.html",
+	"pageclass": "cnt-wdth-lmtd",
+	"secondlevel": false,
+	"dateModified": "2024-03-20",
+	"share": "true"
+}
+---
+
+
GCWeb Authentication Section with .col- classes

+
It contains a row with a single column of `.col-md-8`. Inside the column, there is a `gcweb-menu` class that represents the authentication menu.
+

+

+	

+	

+		

+	
    
+		
+		
  • [Menu 1]
    • 
+		
  • [Menu 2]
    • 
+		
  • [Menu 3]
    • 
+		
+		
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • 
+	

+		

+	

+	

+

+
Code Sample

+
<div class="well" style="height: 200px;">
+	<div class="row">
+	<div class="col-md-8">
+		<div class="gcweb-menu">
+	<ul role="menu">
+		<!-- Menu items for authentication section -->
+		<li>[Menu 1]</li>
+		<li>[Menu 2]</li>
+		<li>[Menu 3]</li>
+		<!-- Authentication menu items here -->
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+	</ul>
+		</div>
+	</div>
+	</div>
+</div>

diff --git a/common/grid-layout/authentication-fr.html b/common/grid-layout/authentication-fr.html
new file mode 100644
index 0000000000..08fcc5b07d
--- /dev/null
+++ b/common/grid-layout/authentication-fr.html
@@ -0,0 +1,48 @@
+---
+{
+	"title": "Authentification",
+",
+	"language": "fr",
+	"altLangPage": "authentication-en.html",
+	"pageclass": "cnt-wdth-lmtd",
+	"secondlevel": false,
+	"dateModified": "2024-03-20",
+	"share": "true"
+}
+---
+
+
Section d'authentification GCWeb avec les classes .col-

+
Elle contient une rangée avec une seule colonne de `.col-md-8`. À l'intérieur de la colonne, il y a une classe `gcweb-menu` qui représente le menu d'authentification.

+

+	

+		

+			

+				
    
+					
+					
  • [Menu 1]
    • 
+					
  • [Menu 2]
    • 
+					
  • [Menu 3]
    • 
+					
+					
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • 
+				

+			

+		

+	

+

+
Exemple de code

+
<div class="well" style="height: 200px;">
+	<div class="row">
+	<div class="col-md-8">
+		<div class="gcweb-menu">
+	<ul role="menu">
+		<!-- Éléments de menu pour la section d'authentification -->
+		<li>[Menu 1]</li>
+		<li>[Menu 2]</li>
+		<li>[Menu 3]</li>
+		<!-- Éléments de menu d'authentification ici -->
+		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+	</ul>
+		</div>
+	</div>
+	</div>
+</div>

diff --git a/common/grid-layout/grid_baseline-en.html b/common/grid-layout/grid_baseline-en.html
new file mode 100644
index 0000000000..2d2d291b19
--- /dev/null
+++ b/common/grid-layout/grid_baseline-en.html
@@ -0,0 +1,28 @@
+---
+{
+	"title": "Grid Baseline",
+	"language": "en",
+	"altLangPage": "grid_baseline-fr.html",
+	"pageclass": "cnt-wdth-lmtd",
+	"secondlevel": false,
+	"dateModified": "2024-03-20",
+	"share": "true"
+}
+---
+
+
+
Grid baseline (containers)

+
+
GCWeb Grid Baseline

+
Please note that the `.container-fixed` mixin is used to apply the appropriate styling for the fixed-width container.

+

+

+	
+	
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

+

+
Code Sample

+
<div class="well"><div class="container">
+	
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+</div></div>

diff --git a/common/grid-layout/grid_baseline-fr.html b/common/grid-layout/grid_baseline-fr.html
new file mode 100644
index 0000000000..19d954f8a6
--- /dev/null
+++ b/common/grid-layout/grid_baseline-fr.html
@@ -0,0 +1,30 @@
+---
+{
+	"title": "Ligne de base de la grille",
+",
+	"language": "fr",
+	"altLangPage": "grid_baseline-en.html",
+	"pageclass": "cnt-wdth-lmtd",
+	"secondlevel": false,
+	"dateModified": "2024-03-20",
+	"share": "true"
+}
+---
+
+
+
+
Ligne de base de la grille (conteneurs)

+
+
Ligne de base GCWeb

+
Veuillez noter que le mixin `.container-fixed` est utilisé pour appliquer le style approprié au conteneur de largeur fixe.

+

+	

+		
+		
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+	

+

+
Exemple de code

+
<div class="well"><div class="container">
+	
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+</div></div>

diff --git a/common/layout/index.json-ld b/common/grid-layout/index.json-ld
similarity index 95%
rename from common/layout/index.json-ld
rename to common/grid-layout/index.json-ld
index 573c8573ac..86e587e907 100644
--- a/common/layout/index.json-ld
+++ b/common/grid-layout/index.json-ld
@@ -15,10 +15,10 @@
 		"fr": "Classes de Bootstrap et WET qui illustrent différentes façons de mise en page tels que flexbox, grille CSS, ligne de base de la grille (conteneurs). Les exemples fournis permettent de tester et d'observer les différents dispositions de mise en page."
 	},
 	"modified": "2023-08-03",
-	"componentName": "layout",
+	"componentName": "grid-layout",
 	"status": "stable",
 	"pages": {
-		"docs": [
+		"examples": [
 			{
 				"title": "Layout",
 				"language": "en",
@@ -30,5 +30,6 @@
 				"path": "layout-fr.html"
 			}
 		]
+
 	}
 }
diff --git a/common/layout/layout-en.html b/common/grid-layout/layout-en.html
similarity index 97%
rename from common/layout/layout-en.html
rename to common/grid-layout/layout-en.html
index 8ecdbec4c7..3aeb8dda9a 100644
--- a/common/layout/layout-en.html
+++ b/common/grid-layout/layout-en.html
@@ -59,14 +59,14 @@ 
Code sample

 </div>

 
 
WET-BOEW .align-items-center class working example

-

+

 	

 		This is a flex container with the .d-flex and .align-items-center classes.
 		Its children are aligned vertically in the center.
 	

 

 
Code sample

-
<div class="well d-flex align-items-center" style="height: 250px;">
+
<div class="well d-flex align-items-center">
 	<div class="child">
 		This is a flex container with the .d-flex and .align-items-center classes.
 		Its children are aligned vertically in the center.
@@ -74,7 +74,7 @@ 
Code sample

 </div>

 
 
WET-BOEW .align-self-center class working example

-

+

 	

 		This is a flex container with the .d-flex class.
 		The first child (.align-self-center) is aligned vertically in the center within the flex container.
@@ -95,7 +95,7 @@ 
Code sample

 </div>

 
 
WET-BOEW .align-self-end class working example

-

+

 	

 		This is a flex container with the .d-flex class.
 		The first child (.align-self-end) is aligned vertically at the end within the flex container.
@@ -105,7 +105,7 @@ 
WET-BOEW .align-self-end class working example

 	

 

 
Code sample

-
<div class="well d-flex" style="height: 250px;">
+
<div class="well d-flex">
 	<div class="child align-self-end">
 		This is a flex container with the .d-flex class.
 		The first child (.align-self-end) is aligned vertically at the end within the flex container.
@@ -643,7 +643,7 @@ 
Code Sample

 </div></div>

 
 
Header .brand class working example

-

+

 	

 		

 		
 
 
Code Sample

-
<div  class="well" style="height: 200px;" ><header>
+
<div  class="well"><header>
 	<div class="brand col-xs-5">
 	<div class="logo">
 		<!-- Logo content goes here -->
@@ -665,7 +665,7 @@ 
Code Sample

 </header></div>

 
 
GCWeb Infostripe with .col- Classes

-

+

 	

 		
 		
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus nibh, finibus ut sagittis lacinia, consectetur sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus et lectus at turpis tristique pretium. Aenean vel massa eu neque consequat dictum. Integer elit ante, egestas non eros non, consectetur posuere justo. Nam vel sollicitudin nisl, et imperdiet mauris. Quisque scelerisque tincidunt nibh, sed bibendum mauris laoreet vel. In hac habitasse platea dictumst.

@@ -673,7 +673,7 @@ 
GCWeb Infostripe with .col- Classes

 

 
 
Code Sample

-
<div class="well"> style="height: 300px;"<div class="infostripe col-md-8 col-sm-6 col-xs-12">
+
<div class="well"><div class="infostripe col-md-8 col-sm-6 col-xs-12">
 	
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus nibh, finibus ut sagittis lacinia, consectetur sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus et lectus at turpis tristique pretium. Aenean vel massa eu neque consequat dictum. Integer elit ante, egestas non eros non, consectetur posuere justo. Nam vel sollicitudin nisl, et imperdiet mauris. Quisque scelerisque tincidunt nibh, sed bibendum mauris laoreet vel. In hac habitasse platea dictumst.</p>
 </div></div>

@@ -681,7 +681,7 @@ 
Code Sample

 
GCWeb Authentication Section with .col- classes

 
It contains a row with a single column of `.col-md-8`. Inside the column, there is a `gcweb-menu` class that represents the authentication menu.
 

-

+

 	

 	

 		

@@ -698,7 +698,7 @@ 
GCWeb Authentication Section with .col- classes

 	

 

 
Code Sample

-
<div class="well" style="height: 200px;">
+
<div class="well">
 	<div class="row">
 	<div class="col-md-8">
 		<div class="gcweb-menu">
diff --git a/common/layout/layout-fr.html b/common/grid-layout/layout-fr.html
similarity index 97%
rename from common/layout/layout-fr.html
rename to common/grid-layout/layout-fr.html
index 74979377c8..cf76dfedc1 100644
--- a/common/layout/layout-fr.html
+++ b/common/grid-layout/layout-fr.html
@@ -59,14 +59,14 @@ 
Exemple de code

 </div>

 
 
Exemple de fonctionnement de la classe WET-BOEW .align-items-center

-

+

 	

 		Il s'agit d'un conteneur flexible avec les classes .d-flex et .align-items-center.
 		Ses enfants sont alignés verticalement au centre.
 	

 

 
Exemple de code

-
<div class="well d-flex align-items-center" style="height: 250px;">
+
<div class="well d-flex align-items-center">
 	<div class="child">
 		Il s'agit d'un conteneur flexible avec les classes .d-flex et .align-items-center.
 		Ses enfants sont alignés verticalement au centre.
@@ -74,7 +74,7 @@ 
Exemple de code

 </div>

 
 
Exemple de fonctionnement de la classe WET-BOEW .align-self-center

-

+

 	

 		Il s'agit d'un conteneur flexible avec la classe .d-flex.
 		Le premier enfant (.align-self-center) est aligné verticalement au centre à l'intérieur du conteneur flexible.
@@ -84,7 +84,7 @@ 
Exemple de fonctionnement de la classe WET-BOEW .align-self-center
 

 
Exemple de code

-
<div class="well d-flex" style="height: 250px;">
+
<div class="well d-flex">
 	<div class="child align-self-center">
 		Il s'agit d'un conteneur flexible avec la classe .d-flex.
 		Le premier enfant (.align-self-center) est aligné verticalement au centre à l'intérieur du conteneur flexible.
@@ -95,7 +95,7 @@ 
Exemple de code

 </div>

 
 
Exemple de fonctionnement de la classe WET-BOEW .align-self-end

-

+

 	

 		Il s'agit d'un conteneur flexible avec la classe .d-flex.
 		Le premier enfant (.align-self-end) est aligné verticalement à l'extrémité à l'intérieur du conteneur flexible.
@@ -105,7 +105,7 @@ 
Exemple de fonctionnement de la classe WET-BOEW .align-self-end
 	

 

 
Exemple de code

-
<div class="well d-flex" style="height: 250px;">
+
<div class="well d-flex">
 	<div class="child align-self-end">
 		Il s'agit d'un conteneur flexible avec la classe .d-flex.
 		Le premier enfant (.align-self-end) est aligné verticalement à l'extrémité à l'intérieur du conteneur flexible.
@@ -639,7 +639,7 @@ 
Exemple de code

 </div></div>

 
 
Classe d'en-tête .brand exemple de fonctionnement

-

+

 	

 		

 			
 
 
Exemple de code

-
<div  class="well" style="height: 200px;" ><header>
+
<div  class="well"><header>
 	<div class="brand col-xs-5">
 	<div class="logo">
 		<!-- Contenu du logo va ici -->
@@ -661,7 +661,7 @@ 
Exemple de code

 </header></div>

 
 
Infostripe GCWeb avec les classes .col-

-

+

 	

 		
 		
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus nibh, finibus ut sagittis lacinia, consectetur sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus et lectus at turpis tristique pretium. Aenean vel massa eu neque consequat dictum. Integer elit ante, egestas non eros non, consectetur posuere justo. Nam vel sollicitudin nisl, et imperdiet mauris. Quisque scelerisque tincidunt nibh, sed bibendum mauris laoreet vel. In hac habitasse platea dictumst.

@@ -669,14 +669,14 @@ 
Infostripe GCWeb avec les classes .col-

 

 
 
Exemple de code

-
<div class="well"> style="height: 300px;"<div class="infostripe col-md-8 col-sm-6 col-xs-12">
+
<div class="well"><div class="infostripe col-md-8 col-sm-6 col-xs-12">
 	
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus nibh, finibus ut sagittis lacinia, consectetur sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus et lectus at turpis tristique pretium. Aenean vel massa eu neque consequat dictum. Integer elit ante, egestas non eros non, consectetur posuere justo. Nam vel sollicitudin nisl, et imperdiet mauris. Quisque scelerisque tincidunt nibh, sed bibendum mauris laoreet vel. In hac habitasse platea dictumst.</p>
 </div></div>

 
 
Section d'authentification GCWeb avec les classes .col-

 
Elle contient une rangée avec une seule colonne de `.col-md-8`. À l'intérieur de la colonne, il y a une classe `gcweb-menu` qui représente le menu d'authentification.

-

+

 	

 		

 			

@@ -693,7 +693,7 @@ 
Section d'authentification GCWeb avec les classes .col-

 	

 

 
Exemple de code

-
<div class="well" style="height: 200px;">
+
<div class="well">
 	<div class="row">
 	<div class="col-md-8">
 		<div class="gcweb-menu">
diff --git a/common/grid-layout/logo-en.html b/common/grid-layout/logo-en.html
new file mode 100644
index 0000000000..1c3394a9ed
--- /dev/null
+++ b/common/grid-layout/logo-en.html
@@ -0,0 +1,33 @@
+---
+{
+	"title": "Logo",
+	"language": "en",
+	"altLangPage": "logo-fr.html",
+	"pageclass": "cnt-wdth-lmtd",
+	"secondlevel": false,
+	"dateModified": "2024-03-20",
+	"share": "true"
+}
+---
+
+
Header .brand class working example

+

+	

+		

+		
+		
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+		

+	

+

+
+
Code Sample

+
<div  class="well" style="height: 200px;" ><header>
+	<div class="brand col-xs-5">
+	<div class="logo">
+		<!-- Logo content goes here -->
+	</div>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+	</div>
+</header></div>

diff --git a/common/grid-layout/logo-fr.html b/common/grid-layout/logo-fr.html
new file mode 100644
index 0000000000..fd2d6e77ae
--- /dev/null
+++ b/common/grid-layout/logo-fr.html
@@ -0,0 +1,34 @@
+---
+{
+	"title": "Logo",
+",
+	"language": "fr",
+	"altLangPage": "logo-en.html",
+	"pageclass": "cnt-wdth-lmtd",
+	"secondlevel": false,
+	"dateModified": "2024-03-20",
+	"share": "true"
+}
+---
+
+
Classe d'en-tête .brand exemple de fonctionnement

+

+	

+		

+			
+			
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+		

+	

+

+
+
Exemple de code

+
<div  class="well" style="height: 200px;" ><header>
+	<div class="brand col-xs-5">
+	<div class="logo">
+		<!-- Contenu du logo va ici -->
+	</div>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+	</div>
+</header></div>

diff --git a/common/grid-layout/menu_items-en.html b/common/grid-layout/menu_items-en.html
new file mode 100644
index 0000000000..30140d8152
--- /dev/null
+++ b/common/grid-layout/menu_items-en.html
@@ -0,0 +1,42 @@
+---
+{
+	"title": "Menu Items",
+	"language": "en",
+	"altLangPage": "menu_items-fr.html",
+	"pageclass": "cnt-wdth-lmtd",
+	"secondlevel": false,
+	"dateModified": "2024-03-20",
+	"share": "true"
+}
+---
+
+
GCWeb Override .gcweb-menu .sm .row class working example

+

+	
+

+
Code sample

+
<div class="gcweb-menu">
+	<ul class="sm">
+	<li>
+		<a href="#">Menu Item 1</a>
+		<ul class="row">
+	<li><a href="#">Submenu Item 1</a></li>
+	<li><a href="#">Submenu Item 2</a></li>
+	<li><a href="#">Submenu Item 3</a></li>
+		</ul>
+	</li>
+	<li><a href="#">Menu Item 2</a></li>
+	<li><a href="#">Menu Item 3</a></li>
+	</ul>
+</div>

diff --git a/common/grid-layout/menu_items-fr.html b/common/grid-layout/menu_items-fr.html
new file mode 100644
index 0000000000..573f7a07d5
--- /dev/null
+++ b/common/grid-layout/menu_items-fr.html
@@ -0,0 +1,42 @@
+---
+{
+	"title": "Éléments de menu",
+	"language": "fr",
+	"altLangPage": "menu_items-en.html",
+	"pageclass": "cnt-wdth-lmtd",
+	"secondlevel": false,
+	"dateModified": "2024-03-20",
+	"share": "true"
+}
+---
+
+
GCWeb Override .gcweb-menu .sm .row Exemple de fonctionnement de la classe

+

+	
+

+
Exemple de code

+
<div class="gcweb-menu">
+	<ul class="sm">
+	<li>
+		<a href="#">Élément de menu 1</a>
+		<ul class="row">
+	<li><a href="#">Élément de sous-menu 1</a></li>
+	<li><a href="#">Élément de sous-menu 2</a></li>
+	<li><a href="#">Élément de sous-menu 3</a></li>
+		</ul>
+	</li>
+	<li><a href="#">Élément de menu 2</a></li>
+	<li><a href="#">Élément de menu 3</a></li>
+	</ul>
+</div>

diff --git a/common/grid-layout/responsive_columns-en.html b/common/grid-layout/responsive_columns-en.html
new file mode 100644
index 0000000000..537f0237d4
--- /dev/null
+++ b/common/grid-layout/responsive_columns-en.html
@@ -0,0 +1,43 @@
+---
+{
+	"title": "Responsive Columns",
+	"language": "en",
+	"altLangPage": "responsive_columns-fr.html",
+	"pageclass": "cnt-wdth-lmtd",
+	"secondlevel": false,
+	"dateModified": "2024-03-20",
+	"share": "true"
+}
+---
+
+
GC Corporate .gc-crprt class working example

+This example demonstrates how the .gc-crprt class works with the Bootstrap .col-md-8 and .col-md-4 classes to create a responsive layout with columns.
+

+

+	

+		

+		
+		
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+	

+	

+		
+		
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+	

+	
+	

+

+

+
Code Sample

+
<div class="well row"><div class="gc-crprt">
+	<div class="col-md-8">
+	<div class="col-md-4">
+	
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+	</div>
+	<div class="col-md-4">
+		
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+	</div>
+	
+	</div>
+</div></div>

diff --git a/common/grid-layout/responsive_columns-fr.html b/common/grid-layout/responsive_columns-fr.html
new file mode 100644
index 0000000000..6e3d91932c
--- /dev/null
+++ b/common/grid-layout/responsive_columns-fr.html
@@ -0,0 +1,44 @@
+---
+{
+	"title": "Colonnes réactives",
+",
+	"language": "fr",
+	"altLangPage": "responsive_columns-en.html",
+	"pageclass": "cnt-wdth-lmtd",
+	"secondlevel": false,
+	"dateModified": "2024-03-20",
+	"share": "true"
+}
+---
+
+
Classe GC Corporate .gc-crprt exemple de fonctionnement

+Cet exemple montre comment la classe .gc-crprt fonctionne avec les classes Bootstrap .col-md-8 et .col-md-4 pour créer une mise en page responsive avec des colonnes.
+

+

+	

+	

+		
+		
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+	

+	

+		
+		
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+	

+	
+	

+

+

+
Exemple de code

+
<div class="well row"><div class="gc-crprt">
+	<div class="col-md-8">
+	<div class="col-md-4">
+		
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+	</div>
+	<div class="col-md-4">
+		
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+	</div>
+	
+	</div>
+</div></div>

diff --git a/common/grid-layout/site_footer-en.html b/common/grid-layout/site_footer-en.html
new file mode 100644
index 0000000000..9faa4a5c92
--- /dev/null
+++ b/common/grid-layout/site_footer-en.html
@@ -0,0 +1,61 @@
+---
+{
+	"title": "GCWeb override - Site footer",
+	"language": "en",
+	"altLangPage": "site_footer-fr.html",
+	"pageclass": "cnt-wdth-lmtd",
+	"secondlevel": false,
+	"dateModified": "2024-03-20",
+	"share": "true"
+}
+---
+
+
+
GCWeb override - Site footer .row

+

+

+	

+		

+			

+				
About Us

+				
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget est eu libero fringilla accumsan.

+			

+			

+				
Contact Us

+				
Email: info@example.com
Phone: 123-456-7890

+			

+			

+				
Follow Us

+				
    
+					
    • 
+					
    • 
+					
    • 
+				

+			

+		

+	

+

+

+
Code sample

+
<div class="well" ><footer class="gcweb-override-site-footer">
+	<div class="container">
+		<div class="row">
+			<div class="col-md-4">
+				<h5>About Us</h5>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget est eu libero fringilla accumsan.</p>
+			</div>
+			<div class="col-md-4">
+				<h5>Contact Us</h5>
+				<p>Email: info@example.com<br>Phone: 123-456-7890</p>
+			</div>
+			<div class="col-md-4">
+				<h5>Follow Us</h5>
+				<ul class="list-inline">
+					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-facebook"></i></a></li>
+					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-twitter"></i></a></li>
+					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-instagram"></i></a></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</footer></div>

diff --git a/common/grid-layout/site_footer-fr.html b/common/grid-layout/site_footer-fr.html
new file mode 100644
index 0000000000..6e2682c4b2
--- /dev/null
+++ b/common/grid-layout/site_footer-fr.html
@@ -0,0 +1,62 @@
+
+---
+{
+	"title": "GCWeb override - Pied de page du site avec la classe",
+	"language": "fr",
+	"altLangPage": "site_footer-en.html",
+	"pageclass": "cnt-wdth-lmtd",
+	"secondlevel": false,
+	"dateModified": "2024-03-20",
+	"share": "true"
+}
+---
+
+
+
GCWeb override - Pied de page du site avec la classe .row

+

+

+	

+		

+			

+				
À propos de nous

+				
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget est eu libero fringilla accumsan.

+			

+			

+				
Contactez-nous

+				
Email : info@example.com
Téléphone : 123-456-7890

+			

+			

+				
Suivez-nous

+				
    
+					
    • 
+					
    • 
+					
    • 
+				

+			

+		

+	

+

+

+
Exemple de code

+
<div class="well"><footer class="gcweb-override-site-footer">
+	<div class="container">
+		<div class="row">
+			<div class="col-md-4">
+				<h5>À propos de nous</h5>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget est eu libero fringilla accumsan.</p>
+			</div>
+			<div class="col-md-4">
+				<h5>Contactez-nous</h5>
+				<p>Email : info@example.com<br>Téléphone : 123-456-7890</p>
+			</div>
+			<div class="col-md-4">
+				<h5>Suivez-nous</h5>
+				<ul class="list-inline">
+					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-facebook"></i></a></li>
+					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-twitter"></i></a></li>
+					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-instagram"></i></a></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</footer></div>


From 287f2de19c0c423fc219cc86ef212611424600f8 Mon Sep 17 00:00:00 2001
From: hanseller 
Date: Mon, 25 Mar 2024 11:16:54 -0400
Subject: [PATCH 04/10] updating heading in both English and French

---
 common/grid-layout/align_columns-en.html      |   4 +-
 common/grid-layout/align_columns-fr.html      |   4 +-
 common/grid-layout/authentication-en.html     |   8 +-
 common/grid-layout/authentication-fr.html     |   4 +-
 common/grid-layout/grid_baseline-en.html      |   4 +-
 common/grid-layout/grid_baseline-fr.html      |   4 +-
 common/grid-layout/index.json-ld              |  91 ++++++++-
 common/grid-layout/layout-en.html             | 187 +-----------------
 common/grid-layout/layout-fr.html             | 170 +---------------
 common/grid-layout/logo-en.html               |   4 +-
 common/grid-layout/logo-fr.html               |   4 +-
 common/grid-layout/menu_items-en.html         |   4 +-
 common/grid-layout/menu_items-fr.html         |   4 +-
 common/grid-layout/responsive_columns-en.html |   4 +-
 common/grid-layout/responsive_columns-fr.html |   4 +-
 common/grid-layout/site_footer-en.html        |   4 +-
 common/grid-layout/site_footer-fr.html        |   4 +-
 17 files changed, 128 insertions(+), 380 deletions(-)

diff --git a/common/grid-layout/align_columns-en.html b/common/grid-layout/align_columns-en.html
index 301b029dad..707e7afa3a 100644
--- a/common/grid-layout/align_columns-en.html
+++ b/common/grid-layout/align_columns-en.html
@@ -10,7 +10,7 @@
 }
 ---
 
-
WET-BOEW [class*=col-] .well.header-rwd[class*=pstn-] class working example

+
WET-BOEW [class*=col-] .well.header-rwd[class*=pstn-] class working example

 

 	

 	

@@ -21,7 +21,7 @@ 
WET-BOEW [class*=col-] .well.header-rwd[class*=pstn-] class wor
 	

 	

 

-
Code Sample

+
Code Sample

 
<div class="well">
 	<div class="row">
 	<div class="col-md-6">
diff --git a/common/grid-layout/align_columns-fr.html b/common/grid-layout/align_columns-fr.html
index cf68ee2a3d..030b1d458c 100644
--- a/common/grid-layout/align_columns-fr.html
+++ b/common/grid-layout/align_columns-fr.html
@@ -10,7 +10,7 @@
 }
 ---
 
-
WET-BOEW [class*=col-] .well.header-rwd[class*=pstn-] Exemple de fonctionnement de la classe

+
WET-BOEW [class*=col-] .well.header-rwd[class*=pstn-] Exemple de fonctionnement de la classe

 

 	

 		

@@ -20,7 +20,7 @@ 
WET-BOEW [class*=col-] .well.header-rwd[class*=pstn-] Exemple d
 		

 	

 

-
Exemple de code

+
Exemple de code

 
<div class="well">
 	<div class="row">
 	<div class="col-md-6">
diff --git a/common/grid-layout/authentication-en.html b/common/grid-layout/authentication-en.html
index 599ea0e480..0e07577896 100644
--- a/common/grid-layout/authentication-en.html
+++ b/common/grid-layout/authentication-en.html
@@ -10,10 +10,10 @@
 }
 ---
 
-
GCWeb Authentication Section with .col- classes

+
GCWeb Authentication Section with .col- classes

 
It contains a row with a single column of `.col-md-8`. Inside the column, there is a `gcweb-menu` class that represents the authentication menu.
 

-

+

 	

 	

 		

@@ -29,8 +29,8 @@ 
GCWeb Authentication Section with .col- classes

 	

 	

 

-
Code Sample

-
<div class="well" style="height: 200px;">
+
Code Sample

+
<div class="well">
 	<div class="row">
 	<div class="col-md-8">
 		<div class="gcweb-menu">
diff --git a/common/grid-layout/authentication-fr.html b/common/grid-layout/authentication-fr.html
index 08fcc5b07d..01dff06e43 100644
--- a/common/grid-layout/authentication-fr.html
+++ b/common/grid-layout/authentication-fr.html
@@ -11,7 +11,7 @@
 }
 ---
 
-
Section d'authentification GCWeb avec les classes .col-

+
Section d'authentification GCWeb avec les classes .col-

 
Elle contient une rangée avec une seule colonne de `.col-md-8`. À l'intérieur de la colonne, il y a une classe `gcweb-menu` qui représente le menu d'authentification.

 

 	

@@ -29,7 +29,7 @@ 
Section d'authentification GCWeb avec les classes .col-

 		

 	

 

-
Exemple de code

+
Exemple de code

 
<div class="well" style="height: 200px;">
 	<div class="row">
 	<div class="col-md-8">
diff --git a/common/grid-layout/grid_baseline-en.html b/common/grid-layout/grid_baseline-en.html
index 2d2d291b19..a58b941890 100644
--- a/common/grid-layout/grid_baseline-en.html
+++ b/common/grid-layout/grid_baseline-en.html
@@ -11,9 +11,9 @@
 ---
 
 
-
Grid baseline (containers)

+
Grid baseline (containers)

 
-
GCWeb Grid Baseline

+
GCWeb Grid Baseline

 
Please note that the `.container-fixed` mixin is used to apply the appropriate styling for the fixed-width container.

 

 

diff --git a/common/grid-layout/grid_baseline-fr.html b/common/grid-layout/grid_baseline-fr.html
index 19d954f8a6..19580f4202 100644
--- a/common/grid-layout/grid_baseline-fr.html
+++ b/common/grid-layout/grid_baseline-fr.html
@@ -13,9 +13,9 @@
 
 
 
-
Ligne de base de la grille (conteneurs)

+
Ligne de base de la grille (conteneurs)

 
-
Ligne de base GCWeb

+
Ligne de base GCWeb

 
Veuillez noter que le mixin `.container-fixed` est utilisé pour appliquer le style approprié au conteneur de largeur fixe.

 

 	

diff --git a/common/grid-layout/index.json-ld b/common/grid-layout/index.json-ld
index 86e587e907..7baee780d7 100644
--- a/common/grid-layout/index.json-ld
+++ b/common/grid-layout/index.json-ld
@@ -24,11 +24,100 @@
 				"language": "en",
 				"path": "layout-en.html"
 			},
+
+			{
+				"title": "Align Columns",
+				"language": "en",
+				"path": "align_columns-en.html"
+			},
+
+			{
+				"title": "Authentication",
+				"language": "en",
+				"path": "authentication-en.html"
+			},
+
+			{
+				"title": "Grid Baseline",
+				"language": "en",
+				"path": "grid_baseline-en.html"
+			},
+
+			{
+				"title": "Logo",
+				"language": "en",
+				"path": "logo-en.html"
+			},
+
+			{
+				"title": "Menu Items",
+				"language": "en",
+				"path": "menu_items-en.html"
+			},
+
+			{
+				"title": "Responsive Columns",
+				"language": "en",
+				"path": "responsive_columns-en.html"
+			},
+
+			{
+				"title": "GCWeb override - Site footer",
+				"language": "en",
+				"path": "site_footer-en.html"
+			},
+
 			{
 				"title": "Mise en page",
 				"language": "fr",
 				"path": "layout-fr.html"
-			}
+			},
+
+			{
+				"title": "Aligner les colonnes",
+				"language": "fr",
+				"path": "align_columns-fr.html"
+			},
+
+			{
+				"title": "Authentification",
+				"language": "fr",
+				"path": "authentication-fr.html"
+			},
+
+			{
+				"title": "Ligne de base de la grille",
+				"language": "fr",
+				"path": "grid_baseline-fr.html"
+			},
+
+			{
+				"title": "Logo",
+				"language": "fr",
+				"path": "logo-fr.html"
+			},
+
+			{
+				"title": "Éléments de menu",
+				"language": "fr",
+				"path": "menu_items-fr.html"
+			},
+
+			{
+				"title": "Colonnes réactives",
+				"language": "fr",
+				"path": "responsive_columns-fr.html"
+			},
+
+			{
+				"title": "GCWeb override - Pied de page du site avec la classe",
+				"language": "fr",
+				"path": "site_footer-fr.html"
+			},
+
+
+
+
 		]
 
 	}
diff --git a/common/grid-layout/layout-en.html b/common/grid-layout/layout-en.html
index 3aeb8dda9a..d0ef821696 100644
--- a/common/grid-layout/layout-en.html
+++ b/common/grid-layout/layout-en.html
@@ -221,87 +221,6 @@ 
Code sample

 	</details>
 </div>

 
-
GCWeb override - Site footer .row

-

-

-	

-		

-			

-				
About Us

-				
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget est eu libero fringilla accumsan.

-			

-			

-				
Contact Us

-				
Email: info@example.com
Phone: 123-456-7890

-			

-			

-				
Follow Us

-				
    
-					
    • 
-					
    • 
-					
    • 
-				

-			

-		

-	

-

-

-
Code sample

-
<div class="well" ><footer class="gcweb-override-site-footer">
-	<div class="container">
-		<div class="row">
-			<div class="col-md-4">
-				<h5>About Us</h5>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget est eu libero fringilla accumsan.</p>
-			</div>
-			<div class="col-md-4">
-				<h5>Contact Us</h5>
-				<p>Email: info@example.com<br>Phone: 123-456-7890</p>
-			</div>
-			<div class="col-md-4">
-				<h5>Follow Us</h5>
-				<ul class="list-inline">
-					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-facebook"></i></a></li>
-					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-twitter"></i></a></li>
-					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-instagram"></i></a></li>
-				</ul>
-			</div>
-		</div>
-	</div>
-</footer></div>

-
-
GCWeb Override .gcweb-menu .sm .row class working example

-

-	
-

-
Code sample

-
<div class="gcweb-menu">
-	<ul class="sm">
-	<li>
-		<a href="#">Menu Item 1</a>
-		<ul class="row">
-	<li><a href="#">Submenu Item 1</a></li>
-	<li><a href="#">Submenu Item 2</a></li>
-	<li><a href="#">Submenu Item 3</a></li>
-		</ul>
-	</li>
-	<li><a href="#">Menu Item 2</a></li>
-	<li><a href="#">Menu Item 3</a></li>
-	</ul>
-</div>

-
-
 
Bootstrap .row-no-gutters class working example

 
.row-no-gutters class is applied to the row, which removes the gutters (spacing) between columns inside the row.

 

@@ -587,60 +506,9 @@ 
Code Sample

 </div><div class="clearfix"></div>
 

 
-
WET-BOEW [class*=col-] .well.header-rwd[class*=pstn-] class working example

-

-	

-	

-		

-	The header-rwd class will inherit the width of the parent container
-	due to the CSS rule [class*=col-] .well.header-rwd[class*=pstn-].
-		

-	

-	

-

-
Code Sample

-
<div class="well">
-	<div class="row">
-	<div class="col-md-6">
-		<div class="well header-rwd pstn-example">
-	The <code>header-rwd</code> class will inherit the width of the parent container
-	due to the CSS rule <code>[class*=col-] .well.header-rwd[class*=pstn-]</code>.
-		</div>
-	</div>
-	</div>
-</div>

 
-
GC Corporate .gc-crprt class working example

-This example demonstrates how the .gc-crprt class works with the Bootstrap .col-md-8 and .col-md-4 classes to create a responsive layout with columns.
-

-

-	

-		

-		
-		
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-	

-	

-		
-		
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-	

-	
-	

-

-

-
Code Sample

-
<div class="well row"><div class="gc-crprt">
-	<div class="col-md-8">
-	<div class="col-md-4">
-	
-		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-	</div>
-	<div class="col-md-4">
-		
-		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-	</div>
-	
-	</div>
-</div></div>

+
+
 
 
Header .brand class working example

 

@@ -678,58 +546,9 @@ 
Code Sample

 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus nibh, finibus ut sagittis lacinia, consectetur sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus et lectus at turpis tristique pretium. Aenean vel massa eu neque consequat dictum. Integer elit ante, egestas non eros non, consectetur posuere justo. Nam vel sollicitudin nisl, et imperdiet mauris. Quisque scelerisque tincidunt nibh, sed bibendum mauris laoreet vel. In hac habitasse platea dictumst.</p>
 </div></div>

 
-
GCWeb Authentication Section with .col- classes

-
It contains a row with a single column of `.col-md-8`. Inside the column, there is a `gcweb-menu` class that represents the authentication menu.
-

-

-	

-	

-		

-	
    
-		
-		
  • [Menu 1]
    • 
-		
  • [Menu 2]
    • 
-		
  • [Menu 3]
    • 
-		
-		
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • 
-	

-		

-	

-	

-

-
Code Sample

-
<div class="well">
-	<div class="row">
-	<div class="col-md-8">
-		<div class="gcweb-menu">
-	<ul role="menu">
-		<!-- Menu items for authentication section -->
-		<li>[Menu 1]</li>
-		<li>[Menu 2]</li>
-		<li>[Menu 3]</li>
-		<!-- Authentication menu items here -->
-		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-	</ul>
-		</div>
-	</div>
-	</div>
-</div>

 
-
Grid baseline (containers)

 
-
GCWeb Grid Baseline

-
Please note that the `.container-fixed` mixin is used to apply the appropriate styling for the fixed-width container.

-

-

-	
-	
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-

-

-
Code Sample

-
<div class="well"><div class="container">
-	
-	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-</div></div>

+
 
 
GCWeb Fluid Container

 

diff --git a/common/grid-layout/layout-fr.html b/common/grid-layout/layout-fr.html
index cf76dfedc1..f83d537f0d 100644
--- a/common/grid-layout/layout-fr.html
+++ b/common/grid-layout/layout-fr.html
@@ -221,85 +221,9 @@ 
Exemple de code

 	</details>
 </div>

 
-
GCWeb override - Pied de page du site avec la classe .row

-

-

-	

-		

-			

-				
À propos de nous

-				
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget est eu libero fringilla accumsan.

-			

-			

-				
Contactez-nous

-				
Email : info@example.com
Téléphone : 123-456-7890

-			

-			

-				
Suivez-nous

-				
    
-					
    • 
-					
    • 
-					
    • 
-				

-			

-		

-	

-

-

-
Exemple de code

-
<div class="well"><footer class="gcweb-override-site-footer">
-	<div class="container">
-		<div class="row">
-			<div class="col-md-4">
-				<h5>À propos de nous</h5>
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget est eu libero fringilla accumsan.</p>
-			</div>
-			<div class="col-md-4">
-				<h5>Contactez-nous</h5>
-				<p>Email : info@example.com<br>Téléphone : 123-456-7890</p>
-			</div>
-			<div class="col-md-4">
-				<h5>Suivez-nous</h5>
-				<ul class="list-inline">
-					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-facebook"></i></a></li>
-					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-twitter"></i></a></li>
-					<li class="list-inline-item"><a href="#" class="social-icon"><i class="fab fa-instagram"></i></a></li>
-				</ul>
-			</div>
-		</div>
-	</div>
-</footer></div>

-
-
GCWeb Override .gcweb-menu .sm .row Exemple de fonctionnement de la classe

-

-	
-

-
Exemple de code

-
<div class="gcweb-menu">
-	<ul class="sm">
-	<li>
-		<a href="#">Élément de menu 1</a>
-		<ul class="row">
-	<li><a href="#">Élément de sous-menu 1</a></li>
-	<li><a href="#">Élément de sous-menu 2</a></li>
-	<li><a href="#">Élément de sous-menu 3</a></li>
-		</ul>
-	</li>
-	<li><a href="#">Élément de menu 2</a></li>
-	<li><a href="#">Élément de menu 3</a></li>
-	</ul>
-</div>

+
+
+
 
 
Bootstrap .row-no-gutters Exemple de fonctionnement de la classe

 
La classe .row-no-gutters est appliquée à la rangée, ce qui supprime les espaces (marges) entre les colonnes à l'intérieur de la rangée.

@@ -606,59 +530,9 @@ 
Exemple de code

 	</div>
 </div>

 
-
Classe GC Corporate .gc-crprt exemple de fonctionnement

-Cet exemple montre comment la classe .gc-crprt fonctionne avec les classes Bootstrap .col-md-8 et .col-md-4 pour créer une mise en page responsive avec des colonnes.
-

-

-	

-	

-		
-		
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-	

-	

-		
-		
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-	

-	
-	

-

-

-
Exemple de code

-
<div class="well row"><div class="gc-crprt">
-	<div class="col-md-8">
-	<div class="col-md-4">
-		
-		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-	</div>
-	<div class="col-md-4">
-		
-		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-	</div>
-	
-	</div>
-</div></div>

 
-
Classe d'en-tête .brand exemple de fonctionnement

-

-	

-		

-			
-			
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-		

-	

-

 
-
Exemple de code

-
<div  class="well"><header>
-	<div class="brand col-xs-5">
-	<div class="logo">
-		<!-- Contenu du logo va ici -->
-	</div>
-	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-	</div>
-</header></div>

+
 
 
Infostripe GCWeb avec les classes .col-

 

@@ -674,41 +548,7 @@ 
Exemple de code

 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lectus nibh, finibus ut sagittis lacinia, consectetur sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus et lectus at turpis tristique pretium. Aenean vel massa eu neque consequat dictum. Integer elit ante, egestas non eros non, consectetur posuere justo. Nam vel sollicitudin nisl, et imperdiet mauris. Quisque scelerisque tincidunt nibh, sed bibendum mauris laoreet vel. In hac habitasse platea dictumst.</p>
 </div></div>

 
-
Section d'authentification GCWeb avec les classes .col-

-
Elle contient une rangée avec une seule colonne de `.col-md-8`. À l'intérieur de la colonne, il y a une classe `gcweb-menu` qui représente le menu d'authentification.

-

-	

-		

-			

-				
    
-					
-					
  • [Menu 1]
    • 
-					
  • [Menu 2]
    • 
-					
  • [Menu 3]
    • 
-					
-					
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • 
-				

-			

-		

-	

-

-
Exemple de code

-
<div class="well">
-	<div class="row">
-	<div class="col-md-8">
-		<div class="gcweb-menu">
-	<ul role="menu">
-		<!-- Éléments de menu pour la section d'authentification -->
-		<li>[Menu 1]</li>
-		<li>[Menu 2]</li>
-		<li>[Menu 3]</li>
-		<!-- Éléments de menu d'authentification ici -->
-		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-	</ul>
-		</div>
-	</div>
-	</div>
-</div>

+
 
 
Ligne de base de la grille (conteneurs)

 
diff --git a/common/grid-layout/logo-en.html b/common/grid-layout/logo-en.html
index 1c3394a9ed..9fd679af61 100644
--- a/common/grid-layout/logo-en.html
+++ b/common/grid-layout/logo-en.html
@@ -10,7 +10,7 @@
 }
 ---
 
-
Header .brand class working example

+
Header .brand class working example

 

 	

 		

@@ -22,7 +22,7 @@ 
Header .brand class working example

 	

 

 
-
Code Sample

+
Code Sample

 
<div  class="well" style="height: 200px;" ><header>
 	<div class="brand col-xs-5">
 	<div class="logo">
diff --git a/common/grid-layout/logo-fr.html b/common/grid-layout/logo-fr.html
index fd2d6e77ae..d4dc584b08 100644
--- a/common/grid-layout/logo-fr.html
+++ b/common/grid-layout/logo-fr.html
@@ -11,7 +11,7 @@
 }
 ---
 
-
Classe d'en-tête .brand exemple de fonctionnement

+
Classe d'en-tête .brand exemple de fonctionnement

 

 	

 		

@@ -23,7 +23,7 @@ 
Classe d'en-tête .brand exemple de fonctionnement

 	

 

 
-
Exemple de code

+
Exemple de code

 
<div  class="well" style="height: 200px;" ><header>
 	<div class="brand col-xs-5">
 	<div class="logo">
diff --git a/common/grid-layout/menu_items-en.html b/common/grid-layout/menu_items-en.html
index 30140d8152..fab1ccad4e 100644
--- a/common/grid-layout/menu_items-en.html
+++ b/common/grid-layout/menu_items-en.html
@@ -10,7 +10,7 @@
 }
 ---
 
-
GCWeb Override .gcweb-menu .sm .row class working example

+
GCWeb Override .gcweb-menu .sm .row class working example

 

 	
    
 		
  • 
@@ -25,7 +25,7 @@ 
    GCWeb Override .gcweb-menu .sm .row class working example
    
 		
  • Menu Item 3
    • 
 	

 

-
Code sample

+
Code sample

 
<div class="gcweb-menu">
 	<ul class="sm">
 	<li>
diff --git a/common/grid-layout/menu_items-fr.html b/common/grid-layout/menu_items-fr.html
index 573f7a07d5..9adf3a29a3 100644
--- a/common/grid-layout/menu_items-fr.html
+++ b/common/grid-layout/menu_items-fr.html
@@ -10,7 +10,7 @@
 }
 ---
 
-
GCWeb Override .gcweb-menu .sm .row Exemple de fonctionnement de la classe

+
GCWeb Override .gcweb-menu .sm .row Exemple de fonctionnement de la classe

 

 	
    
 		
  • 
@@ -25,7 +25,7 @@ 
    GCWeb Override .gcweb-menu .sm .row Exemple de fonctionnement d
 		
  • Élément de menu 3
    • 
 	

 

-
Exemple de code

+
Exemple de code

 
<div class="gcweb-menu">
 	<ul class="sm">
 	<li>
diff --git a/common/grid-layout/responsive_columns-en.html b/common/grid-layout/responsive_columns-en.html
index 537f0237d4..5ab3ddced2 100644
--- a/common/grid-layout/responsive_columns-en.html
+++ b/common/grid-layout/responsive_columns-en.html
@@ -10,7 +10,7 @@
 }
 ---
 
-
GC Corporate .gc-crprt class working example

+
GC Corporate .gc-crprt class working example

 This example demonstrates how the .gc-crprt class works with the Bootstrap .col-md-8 and .col-md-4 classes to create a responsive layout with columns.
 

 

@@ -27,7 +27,7 @@ 
GC Corporate .gc-crprt class working example

 	

 

 

-
Code Sample

+
Code Sample

 
<div class="well row"><div class="gc-crprt">
 	<div class="col-md-8">
 	<div class="col-md-4">
diff --git a/common/grid-layout/responsive_columns-fr.html b/common/grid-layout/responsive_columns-fr.html
index 6e3d91932c..a1e94fc30e 100644
--- a/common/grid-layout/responsive_columns-fr.html
+++ b/common/grid-layout/responsive_columns-fr.html
@@ -11,7 +11,7 @@
 }
 ---
 
-
Classe GC Corporate .gc-crprt exemple de fonctionnement

+
Classe GC Corporate .gc-crprt exemple de fonctionnement

 Cet exemple montre comment la classe .gc-crprt fonctionne avec les classes Bootstrap .col-md-8 et .col-md-4 pour créer une mise en page responsive avec des colonnes.
 

 

@@ -28,7 +28,7 @@ 
Classe GC Corporate .gc-crprt exemple de fonctionnement

 	

 

 

-
Exemple de code

+
Exemple de code

 
<div class="well row"><div class="gc-crprt">
 	<div class="col-md-8">
 	<div class="col-md-4">
diff --git a/common/grid-layout/site_footer-en.html b/common/grid-layout/site_footer-en.html
index 9faa4a5c92..41970748d9 100644
--- a/common/grid-layout/site_footer-en.html
+++ b/common/grid-layout/site_footer-en.html
@@ -11,7 +11,7 @@
 ---
 
 
-
GCWeb override - Site footer .row

+
GCWeb override - Site footer .row

 

 

 	

@@ -36,7 +36,7 @@ 
Follow Us

 	

 

 

-
Code sample

+
Code sample

 
<div class="well" ><footer class="gcweb-override-site-footer">
 	<div class="container">
 		<div class="row">
diff --git a/common/grid-layout/site_footer-fr.html b/common/grid-layout/site_footer-fr.html
index 6e2682c4b2..a87b19c2a5 100644
--- a/common/grid-layout/site_footer-fr.html
+++ b/common/grid-layout/site_footer-fr.html
@@ -12,7 +12,7 @@
 ---
 
 
-
GCWeb override - Pied de page du site avec la classe .row

+
GCWeb override - Pied de page du site avec la classe .row

 

 

 	

@@ -37,7 +37,7 @@ 
Suivez-nous

 	

 

 

-
Exemple de code

+
Exemple de code

 
<div class="well"><footer class="gcweb-override-site-footer">
 	<div class="container">
 		<div class="row">

From fad53d9c0d10c3e96e09aee66daad81aa4e9f72b Mon Sep 17 00:00:00 2001
From: hanseller 
Date: Mon, 25 Mar 2024 15:24:55 -0400
Subject: [PATCH 05/10] fixing the op levels

---
 common/display/display-en.html            | 84 +++++++++++++++++++++--
 common/grid-layout/align_columns-en.html  | 34 ---------
 common/grid-layout/align_columns-fr.html  | 33 ---------
 common/grid-layout/authentication-en.html | 48 -------------
 common/grid-layout/authentication-fr.html | 48 -------------
 5 files changed, 78 insertions(+), 169 deletions(-)
 delete mode 100644 common/grid-layout/align_columns-en.html
 delete mode 100644 common/grid-layout/align_columns-fr.html
 delete mode 100644 common/grid-layout/authentication-en.html
 delete mode 100644 common/grid-layout/authentication-fr.html

diff --git a/common/display/display-en.html b/common/display/display-en.html
index 9d00b78262..ab026d100d 100644
--- a/common/display/display-en.html
+++ b/common/display/display-en.html
@@ -30,13 +30,13 @@ 
Float

 
Bootstrap 3  .clearfixworking example

 

 	

-		
Column 1

-		
Column 2

-		
Column 3

+		
Column 1

+		
Column 2

+		
Column 3

 		
 		

 	

-	
This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.

+
 

 
Code sample

 
<div class="well">
@@ -628,7 +628,7 @@ 
Code sample

 	</div>
 </div>

 
-
WET-BOEW .opct-20 class working example

+
.opct-20 class working example

 	

 		This element has an opacity of 0.2 (20%).
 	

@@ -640,7 +640,79 @@ 
Code sample

 	</div>
 </div>

 
-
WET-BOEW .opct-90 class working example

+
.opct-30 class working example

+	

+		This element has an opacity of 0.3 (30%).
+	

+

+
Code sample

+
<div class="well">
+	<div class="opct-30 well">
+		This element has an opacity of 0.3 (30%).
+	</div>
+</div>

+
+
.opct-40 class working example

+	

+		This element has an opacity of 0.4 (40%).
+	

+

+
Code sample

+
<div class="well">
+	<div class="opct-40 well">
+		This element has an opacity of 0.4 (40%).
+	</div>
+</div>

+
+
.opct-50 class working example

+	

+		This element has an opacity of 0.5 (50%).
+	

+

+
Code sample

+
<div class="well">
+	<div class="opct-50 well">
+		This element has an opacity of 0.5 (50%).
+	</div>
+</div>

+
+
.opct-60 class working example

+	

+		This element has an opacity of 0.6 (60%).
+	

+

+
Code sample

+
<div class="well">
+	<div class="opct-60 well">
+		This element has an opacity of 0.6 (60%).
+	</div>
+</div>

+
+
.opct-70 class working example

+	

+		This element has an opacity of 0.7 (70%).
+	

+

+
Code sample

+
<div class="well">
+	<div class="opct-70 well">
+		This element has an opacity of 0.7 (70%).
+	</div>
+</div>

+
+
.opct-80 class working example

+	

+		This element has an opacity of 0.8 (80%).
+	

+

+
Code sample

+
<div class="well">
+	<div class="opct-80 well">
+		This element has an opacity of 0.8 (80%).
+	</div>
+</div>

+
+
.opct-90 class working example

 	

 		This element has an opacity of 0.9 (90%).
 	

diff --git a/common/grid-layout/align_columns-en.html b/common/grid-layout/align_columns-en.html
deleted file mode 100644
index 707e7afa3a..0000000000
--- a/common/grid-layout/align_columns-en.html
+++ /dev/null
@@ -1,34 +0,0 @@
----
-{
-	"title": "Align Columns",
-	"language": "en",
-	"altLangPage": "align_columns-fr.html",
-	"pageclass": "cnt-wdth-lmtd",
-	"secondlevel": false,
-	"dateModified": "2024-03-20",
-	"share": "true"
-}
----
-
-
WET-BOEW [class*=col-] .well.header-rwd[class*=pstn-] class working example

-

-	

-	

-		

-	The header-rwd class will inherit the width of the parent container
-	due to the CSS rule [class*=col-] .well.header-rwd[class*=pstn-].
-		

-	

-	

-

-
Code Sample

-
<div class="well">
-	<div class="row">
-	<div class="col-md-6">
-		<div class="well header-rwd pstn-example">
-	The <code>header-rwd</code> class will inherit the width of the parent container
-	due to the CSS rule <code>[class*=col-] .well.header-rwd[class*=pstn-]</code>.
-		</div>
-	</div>
-	</div>
-</div>

diff --git a/common/grid-layout/align_columns-fr.html b/common/grid-layout/align_columns-fr.html
deleted file mode 100644
index 030b1d458c..0000000000
--- a/common/grid-layout/align_columns-fr.html
+++ /dev/null
@@ -1,33 +0,0 @@
----
-{
-	"title": "Aligner les colonnes",
-	"language": "fr",
-	"altLangPage": "align_columns-en.html",
-	"pageclass": "cnt-wdth-lmtd",
-	"secondlevel": false,
-	"dateModified": "2024-03-20",
-	"share": "true"
-}
----
-
-
WET-BOEW [class*=col-] .well.header-rwd[class*=pstn-] Exemple de fonctionnement de la classe

-

-	

-		

-			

-				La classe header-rwd héritera de la largeur du conteneur parent grâce à la règle CSS [class*=col-] .well.header-rwd[class*=pstn-].
-			

-		

-	

-

-
Exemple de code

-
<div class="well">
-	<div class="row">
-	<div class="col-md-6">
-		<div class="well header-rwd pstn-example">
-	La classe <code>header-rwd</code> héritera de la largeur du conteneur parent
-	grâce à la règle CSS <code>[class*=col-] .well.header-rwd[class*=pstn-]</code>.
-		</div>
-	</div>
-	</div>
-</div>

diff --git a/common/grid-layout/authentication-en.html b/common/grid-layout/authentication-en.html
deleted file mode 100644
index 0e07577896..0000000000
--- a/common/grid-layout/authentication-en.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-{
-	"title": "Authentication",
-	"language": "en",
-	"altLangPage": "authentication-fr.html",
-	"pageclass": "cnt-wdth-lmtd",
-	"secondlevel": false,
-	"dateModified": "2024-03-20",
-	"share": "true"
-}
----
-
-
GCWeb Authentication Section with .col- classes

-
It contains a row with a single column of `.col-md-8`. Inside the column, there is a `gcweb-menu` class that represents the authentication menu.
-

-

-	

-	

-		

-	
    
-		
-		
  • [Menu 1]
    • 
-		
  • [Menu 2]
    • 
-		
  • [Menu 3]
    • 
-		
-		
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • 
-	

-		

-	

-	

-

-
Code Sample

-
<div class="well">
-	<div class="row">
-	<div class="col-md-8">
-		<div class="gcweb-menu">
-	<ul role="menu">
-		<!-- Menu items for authentication section -->
-		<li>[Menu 1]</li>
-		<li>[Menu 2]</li>
-		<li>[Menu 3]</li>
-		<!-- Authentication menu items here -->
-		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-	</ul>
-		</div>
-	</div>
-	</div>
-</div>

diff --git a/common/grid-layout/authentication-fr.html b/common/grid-layout/authentication-fr.html
deleted file mode 100644
index 01dff06e43..0000000000
--- a/common/grid-layout/authentication-fr.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-{
-	"title": "Authentification",
-",
-	"language": "fr",
-	"altLangPage": "authentication-en.html",
-	"pageclass": "cnt-wdth-lmtd",
-	"secondlevel": false,
-	"dateModified": "2024-03-20",
-	"share": "true"
-}
----
-
-
Section d'authentification GCWeb avec les classes .col-

-
Elle contient une rangée avec une seule colonne de `.col-md-8`. À l'intérieur de la colonne, il y a une classe `gcweb-menu` qui représente le menu d'authentification.

-

-	

-		

-			

-				
    
-					
-					
  • [Menu 1]
    • 
-					
  • [Menu 2]
    • 
-					
  • [Menu 3]
    • 
-					
-					
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • 
-				

-			

-		

-	

-

-
Exemple de code

-
<div class="well" style="height: 200px;">
-	<div class="row">
-	<div class="col-md-8">
-		<div class="gcweb-menu">
-	<ul role="menu">
-		<!-- Éléments de menu pour la section d'authentification -->
-		<li>[Menu 1]</li>
-		<li>[Menu 2]</li>
-		<li>[Menu 3]</li>
-		<!-- Éléments de menu d'authentification ici -->
-		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
-	</ul>
-		</div>
-	</div>
-	</div>
-</div>


From ff293f0bea02aefe7cd65c6f91ea626af1a96602 Mon Sep 17 00:00:00 2001
From: hanseller 
Date: Wed, 27 Mar 2024 14:28:01 -0400
Subject: [PATCH 06/10] Errors have been fixed as required

---
 common/display/display-en.html                | 126 +++++------
 common/display/display-fr.html                | 208 ++++++++++++------
 common/grid-layout/index.json-ld              |  71 ------
 common/grid-layout/layout-en.html             |  14 +-
 common/grid-layout/layout-fr.html             |  16 +-
 common/grid-layout/logo-en.html               |  33 ---
 common/grid-layout/logo-fr.html               |  34 ---
 common/grid-layout/menu_items-en.html         |  42 ----
 common/grid-layout/menu_items-fr.html         |  42 ----
 components/gc-corporate/index.json-ld         |  42 ++++
 .../gc-corporate}/responsive_columns-en.html  |   0
 .../gc-corporate}/responsive_columns-fr.html  |   0
 12 files changed, 263 insertions(+), 365 deletions(-)
 delete mode 100644 common/grid-layout/logo-en.html
 delete mode 100644 common/grid-layout/logo-fr.html
 delete mode 100644 common/grid-layout/menu_items-en.html
 delete mode 100644 common/grid-layout/menu_items-fr.html
 create mode 100644 components/gc-corporate/index.json-ld
 rename {common/grid-layout => components/gc-corporate}/responsive_columns-en.html (100%)
 rename {common/grid-layout => components/gc-corporate}/responsive_columns-fr.html (100%)

diff --git a/common/display/display-en.html b/common/display/display-en.html
index ab026d100d..d50328185d 100644
--- a/common/display/display-en.html
+++ b/common/display/display-en.html
@@ -93,7 +93,7 @@ 
Code sample

 
 
Clear

 
-
WET-BOEW .clr-lft-lg class working example

+
.clr-lft-lg class working example

 

 	

 		This element clears the floated elements to the left on large screens (lg) within its parent container.
@@ -105,7 +105,7 @@ 
Code sample

 		This element clears the floated elements to the left on large screens (lg) within its parent container.
 	</div>
 </div>

-
WET-BOEW .clr-lft-md class working example

+
.clr-lft-md class working example

 

 	

 		This element clears the floated elements to the left on medium screens (md) within its parent container.
@@ -117,7 +117,7 @@ 
Code sample

 		This element clears the floated elements to the left on medium screens (md) within its parent container.
 	</div>
 </div>

-
WET-BOEW .clr-rght-lg class working example

+
.clr-rght-lg class working example

 

 	

 		This element clears the floated elements to the right on large screens (lg) within its parent container.
@@ -129,7 +129,7 @@ 
Code sample

 		This element clears the floated elements to the right on large screens (lg) within its parent container.
 	</div>
 </div>

-
WET-BOEW .clr-rght-md class working example

+
.clr-rght-md class working example

 

 	

 		This element clears the floated elements to the right on medium screens (md) within its parent container.
@@ -209,7 +209,7 @@ 
Code sample

 	</div>
 </div>

 
-
WET-BOEW .sr-only class working example

+
.sr-only class working example

 

 	

 		This element is hidden visually but accessible to screen readers.
@@ -222,7 +222,7 @@ 
Code sample

 	</div>
 </div>

 
-
WET-BOEW .sr-only-focusable class working example

+
.sr-only-focusable class working example

 

 	

 		This element is visually hidden but remains accessible to screen readers, and it can be focused by keyboard navigation.
@@ -237,7 +237,7 @@ 
Code sample

 
 
Visibility

 
-
WET-BOEW .visible-xs-inline class working example

+
.visible-xs-inline class working example

 

 	

 		This element is visible on extra small screens (xs) and has an inline display.
@@ -250,7 +250,7 @@ 
Code sample

 	</div>
 </div>

 
-
WET-BOEW .visible-xs-block class working example

+
.visible-xs-block class working example

 

 	

 		This element is visible on extra small screens (xs) and has a block display.
@@ -263,7 +263,7 @@ 
Code sample

 	</div>
 </div>

 
-
WET-BOEW .visible-xs-inline-block class working example

+
.visible-xs-inline-block class working example

 

 	

 		This element is visible on extra small screens (xs) and has an inline-block display.
@@ -276,7 +276,7 @@ 
Code sample

 	</div>
 </div>

 
-
WET-BOEW .hidden-xs-inline class working example

+
.hidden-xs-inline class working example

 

 	

 		This element is hidden on extra small screens (xs) and has an inline display.
@@ -289,7 +289,7 @@ 
Code sample

 	</div>
 </div>

 
-
WET-BOEW .hidden-xs-block class working example

+
.hidden-xs-block class working example

 

 	

 		This element is hidden on extra small screens (xs) and has a block display.
@@ -302,7 +302,7 @@ 
Code sample

 	</div>
 </div>

 
-
WET-BOEW .hidden-xs-inline-block class working example

+
.hidden-xs-inline-block class working example

 

 	

 		This element is hidden on extra small screens (xs) and has an inline-block display.
@@ -315,7 +315,7 @@ 
Code sample

 	</div>
 </div>

 
-
WET-BOEW .visible-xs-inline class working example

+
.visible-xs-inline class working example

 

 	

 		This element is visible on extra small screens (xs) and has an inline display.
@@ -328,7 +328,7 @@ 
Code sample

 	</div>
 </div>

 
-
WET-BOEW .visible-xs-block class working example

+
.visible-xs-block class working example

 

 	

 		This element is visible on extra small screens (xs) and has a block display.
@@ -341,7 +341,7 @@ 
Code sample

 	</div>
 </div>

 
-
WET-BOEW .visible-xs-inline-block class working example

+
.visible-xs-inline-block class working example

 

 	

 		This element is visible on extra small screens (xs) and has an inline-block display.
@@ -354,7 +354,7 @@ 
Code sample

 	</div>
 </div>

 
-
WET-BOEW .hidden-xs-inline class working example

+
.hidden-xs-inline class working example

 

 	

 		This element is hidden on extra small screens (xs) and has an inline display.
@@ -367,7 +367,7 @@ 
Code sample

 	</div>
 </div>
-

WET-BOEW .hidden-xs-block class working example

+

.hidden-xs-block class working example

This element is hidden on extra small screens (xs) and has a block display. @@ -380,7 +380,7 @@

Code sample

</div> </div> -

WET-BOEW .hidden-xs-inline-block class working example

+

.hidden-xs-inline-block class working example

This element is hidden on extra small screens (xs) and has an inline-block display. @@ -393,7 +393,7 @@

Code sample

</div> </div> -

WET-BOEW .visible-sm-inline class working example

+

.visible-sm-inline class working example

This element is visible on small screens (sm) and has an inline display. @@ -406,7 +406,7 @@

Code sample

</div> </div> -

WET-BOEW .visible-sm-block class working example

+

.visible-sm-block class working example

This element is visible on small screens (sm) and has a block display. @@ -419,7 +419,7 @@

Code sample

</div> </div> -

WET-BOEW .visible-sm-inline-block class working example

+

.visible-sm-inline-block class working example

This element is visible on small screens (sm) and has an inline-block display. @@ -432,7 +432,7 @@

Code sample

</div> </div> -

WET-BOEW .hidden-sm-inline class working example

+

.hidden-sm-inline class working example

This element is hidden on small screens (sm) and has an inline display. @@ -445,7 +445,7 @@

Code sample

</div> </div> -

WET-BOEW .hidden-sm-block class working example

+

.hidden-sm-block class working example

This element is hidden on small screens (sm) and has a block display.
@@ -457,7 +457,7 @@

Code sample

</div> </div> -

WET-BOEW .hidden-sm-inline-block class working example

+

.hidden-sm-inline-block class working example

This element is hidden on small screens (sm) and has an inline-block display.
@@ -469,7 +469,7 @@

Code sample

</div> </div> -

WET-BOEW .visible-md-inline class working example

+

.visible-md-inline class working example

This element is visible on medium screens (md) and has an inline display.
@@ -481,7 +481,7 @@

Code sample

</div> </div> -

WET-BOEW .visible-md-block class working example

+

.visible-md-block class working example

This element is visible on medium screens (md) and has a block display.
@@ -493,7 +493,7 @@

Code sample

</div> </div> -

WET-BOEW .visible-md-inline-block class working example

+

.visible-md-inline-block class working example

This element is visible on medium screens (md) and has an inline-block display.
@@ -506,7 +506,7 @@

Code sample

</div> -

WET-BOEW .hidden-md-inline class working example

+

.hidden-md-inline class working example

This element is hidden on medium screens (md) and has an inline display.
@@ -518,7 +518,7 @@

Code sample

</div> </div> -

WET-BOEW .hidden-md-block class working example

+

.hidden-md-block class working example

This element is hidden on medium screens (md) and has a block display.
@@ -530,7 +530,7 @@

Code sample

</div> </div> -

WET-BOEW .hidden-md-inline-block class working example

+

.hidden-md-inline-block class working example

This element is hidden on medium screens (md) and has an inline-block display.
@@ -542,7 +542,7 @@

Code sample

</div> </div> -

WET-BOEW .visible-lg-inline class working example

+

.visible-lg-inline class working example

This element is visible on large screens (lg) and has an inline display.
@@ -554,7 +554,7 @@

Code sample

</div> </div> -

WET-BOEW .visible-lg-block class working example

+

.visible-lg-block class working example

This element is visible on large screens (lg) and has a block display.
@@ -566,7 +566,7 @@

Code sample

</div> </div> -

WET-BOEW .visible-lg-inline-block class working example

+

.visible-lg-inline-block class working example

This element is visible on large screens (lg) and has an inline-block display.
@@ -578,7 +578,7 @@

Code sample

</div> </div> -

WET-BOEW .hidden-lg-inline class working example

+

.hidden-lg-inline class working example

This element is hidden on large screens (lg) and has an inline display.
@@ -590,7 +590,7 @@

Code sample

</div> </div> -

WET-BOEW .hidden-lg-block class working example

+

.hidden-lg-block class working example

This element is hidden on large screens (lg) and has a block display.
@@ -602,7 +602,7 @@

Code sample

</div> </div> -

WET-BOEW .hidden-lg-inline-block class working example

+

.hidden-lg-inline-block class working example

This element is hidden on large screens (lg) and has an inline-block display.
@@ -616,7 +616,7 @@

Code sample

Opacity

-

WET-BOEW .opct-10 class working example

+

.opct-10 class working example

This element has an opacity of 0.1 (10%).
@@ -724,7 +724,7 @@

Code sample

</div> </div> -

WET-BOEW .opct-100 class working example

+

.opct-100 class working example

This element has an opacity of 1 (100%).
@@ -738,7 +738,7 @@

Code sample

WET - Toggling content

-

WET-BOEW .nojs-show class working example

+

.nojs-show class working example

This element is initially hidden, but it will be shown when JavaScript is disabled.
@@ -750,7 +750,7 @@

Code sample

</div> </div> -

WET-BOEW .nojs-hide class working example

+

.nojs-hide class working example

This element is initially visible, but it will be hidden when JavaScript is disabled.
@@ -762,7 +762,7 @@

Code sample

</div> </div> -

WET-BOEW .lbx-hide-gal class working example

+

.lbx-hide-gal class working example

This element is hidden as part of a lightbox gallery.
@@ -774,7 +774,7 @@

Code sample

</div> </div> -

WET-BOEW .mfp-hide class working example

+

.mfp-hide class working example

This element is hidden as part of a Magnific Popup modal.
@@ -786,7 +786,7 @@

Code sample

</div> </div> -

WET-BOEW .wb-inv class working example

+

.wb-inv class working example

This element is invisible and hidden from all users, including screen readers.
@@ -798,7 +798,7 @@

Code sample

</div> </div> -

WET-BOEW .wb-invisible class working example

+

.wb-invisible class working example

This element is invisible but accessible by screen readers.
@@ -810,7 +810,7 @@

Code sample

</div> </div> -

WET-BOEW .wb-show-onfocus class working example

+

.wb-show-onfocus class working example

Code sample

@@ -821,7 +821,7 @@

Code sample

Col count

It split the element into multiple columns. Its a way to do positioning which are not limited to list items but include div/sections too

-

WET-BOEW .colcount-xxs-2 class working example

+

.colcount-xxs-2 class working example

This element occupies 1 out of 2 columns on extra-small screens (xxs).
@@ -833,7 +833,7 @@

Code sample

</div> </div> -

WET-BOEW .colcount-xxs-3 class working example

+

.colcount-xxs-3 class working example

This element occupies 1 out of 3 columns on extra-small screens (xxs).
@@ -845,7 +845,7 @@

Code sample

</div> </div> -

WET-BOEW .colcount-xxs-4 class working example

+

.colcount-xxs-4 class working example

This element occupies 1 out of 4 columns on extra-small screens (xxs).
@@ -857,7 +857,7 @@

Code sample

</div> </div> -

WET-BOEW .colcount-xs-2 class working example

+

.colcount-xs-2 class working example

This element occupies 1 out of 2 columns on extra-small screens (xs).
@@ -869,7 +869,7 @@

Code sample

</div> </div> -

WET-BOEW .colcount-xs-3 class working example

+

.colcount-xs-3 class working example

This element occupies 1 out of 3 columns on extra-small screens (xs).
@@ -881,7 +881,7 @@

Code sample

</div> </div> -

WET-BOEW .colcount-xs-4 class working example

+

.colcount-xs-4 class working example

This element occupies 1 out of 4 columns on extra-small screens (xs).
@@ -893,7 +893,7 @@

Code sample

</div> </div> -

WET-BOEW .colcount-sm-2 class working example

+

.colcount-sm-2 class working example

This element occupies 1 out of 2 columns on small screens (sm).
@@ -905,7 +905,7 @@

Code sample

</div> </div> -

WET-BOEW .colcount-sm-3 class working example

+

.colcount-sm-3 class working example

This element occupies 1 out of 3 columns on small screens (sm).
@@ -917,7 +917,7 @@

Code sample

</div> </div> -

WET-BOEW .colcount-sm-4 class working example

+

.colcount-sm-4 class working example

This element occupies 1 out of 4 columns on small screens (sm).
@@ -929,7 +929,7 @@

Code sample

</div> </div> -

WET-BOEW .colcount-lg-2 class working example

+

.colcount-lg-2 class working example

This element occupies 1 out of 2 columns on large screens (lg).
@@ -941,7 +941,7 @@

Code sample

</div> </div> -

WET-BOEW .colcount-lg-3 class working example

+

.colcount-lg-3 class working example

This element occupies 1 out of 3 columns on large screens (lg).
@@ -953,7 +953,7 @@

Code sample

</div> </div> -

WET-BOEW .colcount-lg-4 class working example

+

.colcount-lg-4 class working example

This element occupies 1 out of 4 columns on large screens (lg).
@@ -965,7 +965,7 @@

Code sample

</div> </div> -

WET-BOEW .colcount-xl-2 class working example

+

.colcount-xl-2 class working example

This element occupies 1 out of 2 columns on extra-large screens (xl).
@@ -977,7 +977,7 @@

Code sample

</div> </div> -

WET-BOEW .colcount-xl-3 class working example

+

.colcount-xl-3 class working example

This element occupies 1 out of 3 columns on extra-large screens (xl).
@@ -989,7 +989,7 @@

Code sample

</div> </div> -

WET-BOEW .colcount-xl-4 class working example

+

.colcount-xl-4 class working example

This element occupies 1 out of 4 columns on extra-large screens (xl).
@@ -1003,7 +1003,7 @@

Code sample

Sizing controls

-

WET-BOEW .h-100 class working example

+

.h-100 class working example

This element has a height of 100% of its parent container. @@ -1016,7 +1016,7 @@

Code sample

</div> </div> -

WET-BOEW .full-width class working example

+

.full-width class working example

This element spans the full width of its parent container.
@@ -1028,7 +1028,7 @@

Code sample

</div> </div> -

WET-BOEW .max-content class working example

+

.max-content class working example

This element adjusts its width to fit its content, but not wider than its parent container.
diff --git a/common/display/display-fr.html b/common/display/display-fr.html index 56d20d54b8..003caad7a7 100644 --- a/common/display/display-fr.html +++ b/common/display/display-fr.html @@ -94,7 +94,7 @@

Exemple de code

Effacement

-

Exemple de fonctionnement de la classe WET-BOEW .clr-lft-lg

+

Exemple de fonctionnement de la classe .clr-lft-lg

Cet élément efface les éléments flottants à gauche sur les grands écrans (lg) dans son conteneur parent. @@ -106,7 +106,7 @@

Exemple de code

Cet élément efface les éléments flottants à gauche sur les grands écrans (lg) dans son conteneur parent. </div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .clr-lft-md

+

Exemple de fonctionnement de la classe .clr-lft-md

Cet élément efface les éléments flottants à gauche sur les écrans moyens (md) dans son conteneur parent. @@ -118,7 +118,7 @@

Exemple de code

Cet élément efface les éléments flottants à gauche sur les écrans moyens (md) dans son conteneur parent. </div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .clr-rght-lg

+

Exemple de fonctionnement de la classe .clr-rght-lg

Cet élément efface les éléments flottants à droite sur les grands écrans (lg) dans son conteneur parent. @@ -130,7 +130,7 @@

Exemple de code

Cet élément efface les éléments flottants à droite sur les grands écrans (lg) dans son conteneur parent. </div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .clr-rght-md

+

Exemple de fonctionnement de la classe .clr-rght-md

Cet élément efface les éléments flottants à droite sur les écrans moyens (md) dans son conteneur parent. @@ -210,7 +210,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .sr-only

+

Exemple de fonctionnement de la classe .sr-only

Cet élément est masqué visuellement mais accessible aux lecteurs d'écran. @@ -223,7 +223,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .sr-only-focusable

+

Exemple de fonctionnement de la classe .sr-only-focusable

Cet élément est masqué visuellement mais reste accessible aux lecteurs d'écran et peut être mis au focus par la navigation au clavier. @@ -238,7 +238,7 @@

Exemple de code

Visibilité

-

Exemple de fonctionnement de la classe WET-BOEW .visible-xs-inline

+

Exemple de fonctionnement de la classe .visible-xs-inline

Cet élément est visible sur les petits écrans (xs) et a une mise en page en ligne. @@ -251,7 +251,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .visible-xs-block

+

Exemple de fonctionnement de la classe .visible-xs-block

Cet élément est visible sur les petits écrans (xs) et a une mise en page en bloc. @@ -264,7 +264,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .visible-xs-inline-block

+

Exemple de fonctionnement de la classe .visible-xs-inline-block

Cet élément est visible sur les petits écrans (xs) et a une mise en page en ligne-bloc. @@ -277,7 +277,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .hidden-xs-inline

+

Exemple de fonctionnement de la classe .hidden-xs-inline

Cet élément est masqué sur les petits écrans (xs) et a une mise en page en ligne. @@ -290,7 +290,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .hidden-xs-block

+

Exemple de fonctionnement de la classe .hidden-xs-block

Cet élément est masqué sur les petits écrans (xs) et a une mise en page en bloc. @@ -303,7 +303,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .hidden-xs-inline-block

+

Exemple de fonctionnement de la classe .hidden-xs-inline-block

Cet élément est masqué sur les petits écrans (xs) et a une mise en page en ligne-bloc. @@ -316,7 +316,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .visible-xs-inline

+

Exemple de fonctionnement de la classe .visible-xs-inline

Cet élément est visible sur les petits écrans (xs) et a une mise en page en ligne. @@ -329,7 +329,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .visible-xs-block

+

Exemple de fonctionnement de la classe .visible-xs-block

Cet élément est visible sur les petits écrans (xs) et a une mise en page en bloc. @@ -342,7 +342,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .visible-xs-inline-block

+

Exemple de fonctionnement de la classe .visible-xs-inline-block

Cet élément est visible sur les petits écrans (xs) et a une mise en page en ligne-bloc. @@ -355,7 +355,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .hidden-xs-inline

+

Exemple de fonctionnement de la classe .hidden-xs-inline

Cet élément est masqué sur les petits écrans (xs) et a une mise en page en ligne. @@ -370,7 +370,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .hidden-xs-block

+

Exemple de fonctionnement de la classe .hidden-xs-block

Cet élément est masqué sur les petits écrans (xs) et a une mise en page en bloc. @@ -383,7 +383,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .hidden-xs-inline-block

+

Exemple de fonctionnement de la classe .hidden-xs-inline-block

Cet élément est masqué sur les petits écrans (xs) et a une mise en page en ligne-bloc. @@ -396,7 +396,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .visible-sm-inline

+

Exemple de fonctionnement de la classe .visible-sm-inline

Cet élément est visible sur les écrans petits (sm) et a une mise en page en ligne. @@ -409,7 +409,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .visible-sm-block

+

Exemple de fonctionnement de la classe .visible-sm-block

Cet élément est visible sur les écrans petits (sm) et a une mise en page en bloc. @@ -422,7 +422,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .visible-sm-inline-block

+

Exemple de fonctionnement de la classe .visible-sm-inline-block

Cet élément est visible sur les écrans petits (sm) et a une mise en page en ligne-bloc. @@ -435,7 +435,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .hidden-sm-inline

+

Exemple de fonctionnement de la classe .hidden-sm-inline

Cet élément est masqué sur les écrans petits (sm) et a une mise en page en ligne. @@ -448,7 +448,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .hidden-sm-block

+

Exemple de fonctionnement de la classe .hidden-sm-block

Cet élément est masqué sur les écrans petits (sm) et a une mise en page en bloc. @@ -461,7 +461,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .hidden-sm-inline-block

+

Exemple de fonctionnement de la classe .hidden-sm-inline-block

Cet élément est masqué sur les écrans petits (sm) et a une mise en page en ligne-bloc. @@ -474,7 +474,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .visible-md-inline

+

Exemple de fonctionnement de la classe .visible-md-inline

Cet élément est visible sur les écrans moyens (md) et a une mise en page en ligne. @@ -487,7 +487,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .visible-md-block

+

Exemple de fonctionnement de la classe .visible-md-block

Cet élément est visible sur les écrans moyens (md) et a une mise en page en bloc. @@ -500,7 +500,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .visible-md-inline-block

+

Exemple de fonctionnement de la classe .visible-md-inline-block

Cet élément est visible sur les écrans moyens (md) et a une mise en page en ligne-bloc. @@ -513,7 +513,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .hidden-md-inline

+

Exemple de fonctionnement de la classe .hidden-md-inline

Cet élément est masqué sur les écrans moyens (md) et a une mise en page en ligne. @@ -526,7 +526,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .hidden-md-block

+

Exemple de fonctionnement de la classe .hidden-md-block

Cet élément est masqué sur les écrans moyens (md) et a une mise en page en bloc. @@ -539,7 +539,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .hidden-md-inline-block

+

Exemple de fonctionnement de la classe .hidden-md-inline-block

Cet élément est masqué sur les écrans moyens (md) et a une mise en page en ligne-bloc. @@ -552,7 +552,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .visible-lg-inline

+

Exemple de fonctionnement de la classe .visible-lg-inline

Cet élément est visible sur les grands écrans (lg) et a une mise en page en ligne. @@ -565,7 +565,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .visible-lg-block

+

Exemple de fonctionnement de la classe .visible-lg-block

Cet élément est visible sur les grands écrans (lg) et a une mise en page en bloc. @@ -578,7 +578,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .visible-lg-inline-block

+

Exemple de fonctionnement de la classe .visible-lg-inline-block

Cet élément est visible sur les grands écrans (lg) et a une mise en page en ligne-bloc. @@ -591,7 +591,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .hidden-lg-inline

+

Exemple de fonctionnement de la classe .hidden-lg-inline

Cet élément est masqué sur les grands écrans (lg) et a une mise en page en ligne. @@ -604,7 +604,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .hidden-lg-block

+

Exemple de fonctionnement de la classe .hidden-lg-block

Cet élément est masqué sur les grands écrans (lg) et a une mise en page en bloc. @@ -617,7 +617,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .hidden-lg-inline-block

+

Exemple de fonctionnement de la classe .hidden-lg-inline-block

Cet élément est masqué sur les grands écrans (lg) et a une mise en page en ligne-bloc. @@ -632,7 +632,7 @@

Exemple de code

Opacité

-

Exemple de fonctionnement de la classe WET-BOEW .opct-10

+

Exemple de fonctionnement de la classe .opct-10

Cet élément a une opacité de 0.1 (10%). @@ -645,7 +645,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .opct-20

+

Exemple de fonctionnement de la classe .opct-20

Cet élément a une opacité de 0.2 (20%). @@ -658,7 +658,85 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .opct-90

+

Exemple de fonctionnement de la classe .opct-30

+
+
+ Cet élément a une opacité de 0.3 (30%). +
+
+

Exemple de code

+
<div class="well">
+	<div class="opct-30 well">
+		Cet élément a une opacité de 0.3 (30%).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe .opct-40

+
+
+ Cet élément a une opacité de 0.4 (40%). +
+
+

Exemple de code

+
<div class="well">
+	<div class="opct-30 well">
+		Cet élément a une opacité de 0.4 (40%).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe .opct-50

+
+
+ Cet élément a une opacité de 0.5 (50%). +
+
+

Exemple de code

+
<div class="well">
+	<div class="opct-50 well">
+		Cet élément a une opacité de 0.5 (50%).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe .opct-60

+
+
+ Cet élément a une opacité de 0.6 (60%). +
+
+

Exemple de code

+
<div class="well">
+	<div class="opct-60 well">
+		Cet élément a une opacité de 0.6 (60%).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe .opct-70

+
+
+ Cet élément a une opacité de 0.7 (70%). +
+
+

Exemple de code

+
<div class="well">
+	<div class="opct-70 well">
+		Cet élément a une opacité de 0.7 (70%).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe .opct-80

+
+
+ Cet élément a une opacité de 0.8 (80%). +
+
+

Exemple de code

+
<div class="well">
+	<div class="opct-80 well">
+		Cet élément a une opacité de 0.8 (80%).
+	</div>
+</div>
+ +

Exemple de fonctionnement de la classe .opct-90

Cet élément a une opacité de 0.9 (90%). @@ -671,7 +749,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .opct-100

+

Exemple de fonctionnement de la classe .opct-100

Cet élément a une opacité de 1 (100%). @@ -686,7 +764,7 @@

Exemple de code

Contenu basculant WET

-

Exemple de fonctionnement de la classe WET-BOEW .nojs-show

+

Exemple de fonctionnement de la classe .nojs-show

Cet élément est initialement masqué, mais il sera affiché lorsque JavaScript est désactivé. @@ -699,7 +777,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .nojs-hide

+

Exemple de fonctionnement de la classe .nojs-hide

Cet élément est initialement visible, mais il sera masqué lorsque JavaScript est désactivé. @@ -712,7 +790,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .lbx-hide-gal

+

Exemple de fonctionnement de la classe .lbx-hide-gal

Cet élément est masqué dans le cadre d'une galerie lightbox. @@ -725,7 +803,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .mfp-hide

+

Exemple de fonctionnement de la classe .mfp-hide

Cet élément est masqué dans le cadre d'une fenêtre modale Magnific Popup. @@ -740,7 +818,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .wb-inv

+

Exemple de fonctionnement de la classe .wb-inv

Cet élément est invisible et masqué de tous les utilisateurs, y compris les lecteurs d'écran. @@ -753,7 +831,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .wb-invisible

+

Exemple de fonctionnement de la classe .wb-invisible

Cet élément est invisible, mais accessible aux lecteurs d'écran. @@ -766,7 +844,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .wb-show-onfocus

+

Exemple de fonctionnement de la classe .wb-show-onfocus

@@ -778,7 +856,7 @@

Exemple de code

Nombre de colonnes

Il divise l'élément en plusieurs colonnes. C'est une manière de faire du positionnement qui n'est pas limitée aux éléments de liste, mais qui inclut également les div/sections.

-

Exemple de fonctionnement de la classe WET-BOEW .colcount-xxs-2

+

Exemple de fonctionnement de la classe .colcount-xxs-2

Cet élément occupe 1 sur 2 colonnes sur les écrans extra-small (xxs). @@ -791,7 +869,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .colcount-xxs-3

+

Exemple de fonctionnement de la classe .colcount-xxs-3

Cet élément occupe 1 sur 3 colonnes sur les écrans extra-small (xxs). @@ -804,7 +882,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .colcount-xxs-4

+

Exemple de fonctionnement de la classe .colcount-xxs-4

Cet élément occupe 1 sur 4 colonnes sur les écrans extra-small (xxs). @@ -817,7 +895,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .colcount-xs-2

+

Exemple de fonctionnement de la classe .colcount-xs-2

Cet élément occupe 1 sur 2 colonnes sur les écrans extra-small (xs). @@ -830,7 +908,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .colcount-xs-3

+

Exemple de fonctionnement de la classe .colcount-xs-3

Cet élément occupe 1 sur 3 colonnes sur les écrans extra-small (xs). @@ -843,7 +921,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .colcount-xs-4

+

Exemple de fonctionnement de la classe .colcount-xs-4

Cet élément occupe 1 sur 4 colonnes sur les écrans extra-small (xs). @@ -856,7 +934,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .colcount-sm-2

+

Exemple de fonctionnement de la classe .colcount-sm-2

Cet élément occupe 1 sur 2 colonnes sur les écrans small (sm). @@ -869,7 +947,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .colcount-sm-3

+

Exemple de fonctionnement de la classe .colcount-sm-3

Cet élément occupe 1 sur 3 colonnes sur les écrans small (sm). @@ -882,7 +960,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .colcount-sm-4

+

Exemple de fonctionnement de la classe .colcount-sm-4

Cet élément occupe 1 sur 4 colonnes sur les écrans small (sm). @@ -895,7 +973,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .colcount-lg-2

+

Exemple de fonctionnement de la classe .colcount-lg-2

Cet élément occupe 1 sur 2 colonnes sur les écrans large (lg). @@ -908,7 +986,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .colcount-lg-3

+

Exemple de fonctionnement de la classe .colcount-lg-3

Cet élément occupe 1 sur 3 colonnes sur les écrans large (lg). @@ -921,7 +999,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .colcount-lg-4

+

Exemple de fonctionnement de la classe .colcount-lg-4

Cet élément occupe 1 sur 4 colonnes sur les écrans large (lg). @@ -934,7 +1012,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .colcount-xl-2

+

Exemple de fonctionnement de la classe .colcount-xl-2

Cet élément occupe 1 sur 2 colonnes sur les écrans extra-large (xl). @@ -947,7 +1025,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .colcount-xl-3

+

Exemple de fonctionnement de la classe .colcount-xl-3

Cet élément occupe 1 sur 3 colonnes sur les écrans extra-large (xl). @@ -960,7 +1038,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .colcount-xl-4

+

Exemple de fonctionnement de la classe .colcount-xl-4

Cet élément occupe 1 sur 4 colonnes sur les écrans extra-large (xl). @@ -975,7 +1053,7 @@

Exemple de code

Contrôles de dimensionnement

-

Exemple de fonctionnement de la classe WET-BOEW .h-100

+

Exemple de fonctionnement de la classe .h-100

Cet élément a une hauteur de 100 % de son conteneur parent. @@ -988,7 +1066,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .full-width

+

Exemple de fonctionnement de la classe .full-width

Cet élément s'étend sur toute la largeur de son conteneur parent. @@ -1001,7 +1079,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .max-content

+

Exemple de fonctionnement de la classe .max-content

Cet élément ajuste sa largeur pour s'adapter à son contenu, mais pas plus large que son conteneur parent. diff --git a/common/grid-layout/index.json-ld b/common/grid-layout/index.json-ld index 7baee780d7..c6359fe1a5 100644 --- a/common/grid-layout/index.json-ld +++ b/common/grid-layout/index.json-ld @@ -25,17 +25,6 @@ "path": "layout-en.html" }, - { - "title": "Align Columns", - "language": "en", - "path": "align_columns-en.html" - }, - - { - "title": "Authentication", - "language": "en", - "path": "authentication-en.html" - }, { "title": "Grid Baseline", @@ -43,29 +32,7 @@ "path": "grid_baseline-en.html" }, - { - "title": "Logo", - "language": "en", - "path": "logo-en.html" - }, - - { - "title": "Menu Items", - "language": "en", - "path": "menu_items-en.html" - }, - - { - "title": "Responsive Columns", - "language": "en", - "path": "responsive_columns-en.html" - }, - { - "title": "GCWeb override - Site footer", - "language": "en", - "path": "site_footer-en.html" - }, { "title": "Mise en page", @@ -73,17 +40,6 @@ "path": "layout-fr.html" }, - { - "title": "Aligner les colonnes", - "language": "fr", - "path": "align_columns-fr.html" - }, - - { - "title": "Authentification", - "language": "fr", - "path": "authentication-fr.html" - }, { "title": "Ligne de base de la grille", @@ -91,33 +47,6 @@ "path": "grid_baseline-fr.html" }, - { - "title": "Logo", - "language": "fr", - "path": "logo-fr.html" - }, - - { - "title": "Éléments de menu", - "language": "fr", - "path": "menu_items-fr.html" - }, - - { - "title": "Colonnes réactives", - "language": "fr", - "path": "responsive_columns-fr.html" - }, - - { - "title": "GCWeb override - Pied de page du site avec la classe", - "language": "fr", - "path": "site_footer-fr.html" - }, - - - - ] } diff --git a/common/grid-layout/layout-en.html b/common/grid-layout/layout-en.html index d0ef821696..08f04d4412 100644 --- a/common/grid-layout/layout-en.html +++ b/common/grid-layout/layout-en.html @@ -18,7 +18,7 @@

On this page:

Flexbox

-

WET-BOEW .d-flex class working example

+

.d-flex class working example

This is a flex container with the .d-flex class. Its children are aligned in a row by default. @@ -37,7 +37,7 @@

Code sample

</div> </div> -

WET-BOEW .flex-column class working example

+

.flex-column class working example

This is a flex container with the .d-flex and .flex-column classes. @@ -58,7 +58,7 @@

Code sample

</div> </div> -

WET-BOEW .align-items-center class working example

+

.align-items-center class working example

This is a flex container with the .d-flex and .align-items-center classes. @@ -73,7 +73,7 @@

Code sample

</div> </div> -

WET-BOEW .align-self-center class working example

+

.align-self-center class working example

This is a flex container with the .d-flex class. @@ -94,7 +94,7 @@

Code sample

</div> </div> -

WET-BOEW .align-self-end class working example

+

.align-self-end class working example

This is a flex container with the .d-flex class. @@ -117,7 +117,7 @@

Code sample

CSS Grid

-

WET-BOEW [class*=col-] class working example

+

[class*=col-] class working example

@@ -487,7 +487,7 @@

Code Sample

</div> </div> -

WET-BOEW col-me-push-3 class working example (with RTL direction)

+

col-me-push-3 class working example (with RTL direction)

diff --git a/common/grid-layout/layout-fr.html b/common/grid-layout/layout-fr.html index f83d537f0d..4843ae6ab1 100644 --- a/common/grid-layout/layout-fr.html +++ b/common/grid-layout/layout-fr.html @@ -18,7 +18,7 @@

Sur cette page :

Flexbox

-

Exemple d'utilisation de la classe WET-BOEW .d-flex

+

Exemple d'utilisation de la classe .d-flex

Il s'agit d'un conteneur flexible avec la classe .d-flex. Ses enfants sont alignés en ligne par défaut. @@ -37,7 +37,7 @@

Exemple de code

</div> </div> -

Exemple d'utilisation de la classe WET-BOEW .flex-column

+

Exemple d'utilisation de la classe .flex-column

Il s'agit d'un conteneur flexible avec les classes .d-flex et .flex-column. @@ -58,7 +58,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .align-items-center

+

Exemple de fonctionnement de la classe .align-items-center

Il s'agit d'un conteneur flexible avec les classes .d-flex et .align-items-center. @@ -73,7 +73,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .align-self-center

+

Exemple de fonctionnement de la classe .align-self-center

Il s'agit d'un conteneur flexible avec la classe .d-flex. @@ -94,7 +94,7 @@

Exemple de code

</div> </div> -

Exemple de fonctionnement de la classe WET-BOEW .align-self-end

+

Exemple de fonctionnement de la classe .align-self-end

Il s'agit d'un conteneur flexible avec la classe .d-flex. @@ -117,7 +117,7 @@

Exemple de code

Grille CSS

-

Exemple de fonctionnement de la classe WET-BOEW [class*=col-]

+

Exemple de fonctionnement de la classe [class*=col-]

@@ -489,7 +489,7 @@

Exemple de code

</div> </div> -

WET-BOEW col-me-push-3 Exemple de fonctionnement de la classe (avec direction RTL)

+

col-me-push-3 Exemple de fonctionnement de la classe (avec direction RTL)

@@ -508,7 +508,7 @@

Exemple de code

</div><div class="clearfix"></div> -

WET-BOEW [class*=col-] .well.header-rwd[class*=pstn-] Exemple de fonctionnement de la classe

+

[class*=col-] .well.header-rwd[class*=pstn-] Exemple de fonctionnement de la classe

diff --git a/common/grid-layout/logo-en.html b/common/grid-layout/logo-en.html deleted file mode 100644 index 9fd679af61..0000000000 --- a/common/grid-layout/logo-en.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -{ - "title": "Logo", - "language": "en", - "altLangPage": "logo-fr.html", - "pageclass": "cnt-wdth-lmtd", - "secondlevel": false, - "dateModified": "2024-03-20", - "share": "true" -} ---- - -

Header .brand class working example

-
-
-
- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- -

Code Sample

-
<div  class="well" style="height: 200px;" ><header>
-	<div class="brand col-xs-5">
-	<div class="logo">
-		<!-- Logo content goes here -->
-	</div>
-	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-	</div>
-</header></div>
diff --git a/common/grid-layout/logo-fr.html b/common/grid-layout/logo-fr.html deleted file mode 100644 index d4dc584b08..0000000000 --- a/common/grid-layout/logo-fr.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -{ - "title": "Logo", -", - "language": "fr", - "altLangPage": "logo-en.html", - "pageclass": "cnt-wdth-lmtd", - "secondlevel": false, - "dateModified": "2024-03-20", - "share": "true" -} ---- - -

Classe d'en-tête .brand exemple de fonctionnement

-
-
-
- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-
- -

Exemple de code

-
<div  class="well" style="height: 200px;" ><header>
-	<div class="brand col-xs-5">
-	<div class="logo">
-		<!-- Contenu du logo va ici -->
-	</div>
-	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-	</div>
-</header></div>
diff --git a/common/grid-layout/menu_items-en.html b/common/grid-layout/menu_items-en.html deleted file mode 100644 index fab1ccad4e..0000000000 --- a/common/grid-layout/menu_items-en.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -{ - "title": "Menu Items", - "language": "en", - "altLangPage": "menu_items-fr.html", - "pageclass": "cnt-wdth-lmtd", - "secondlevel": false, - "dateModified": "2024-03-20", - "share": "true" -} ---- - -

GCWeb Override .gcweb-menu .sm .row class working example

-
- -
-

Code sample

-
<div class="gcweb-menu">
-	<ul class="sm">
-	<li>
-		<a href="#">Menu Item 1</a>
-		<ul class="row">
-	<li><a href="#">Submenu Item 1</a></li>
-	<li><a href="#">Submenu Item 2</a></li>
-	<li><a href="#">Submenu Item 3</a></li>
-		</ul>
-	</li>
-	<li><a href="#">Menu Item 2</a></li>
-	<li><a href="#">Menu Item 3</a></li>
-	</ul>
-</div>
diff --git a/common/grid-layout/menu_items-fr.html b/common/grid-layout/menu_items-fr.html deleted file mode 100644 index 9adf3a29a3..0000000000 --- a/common/grid-layout/menu_items-fr.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -{ - "title": "Éléments de menu", - "language": "fr", - "altLangPage": "menu_items-en.html", - "pageclass": "cnt-wdth-lmtd", - "secondlevel": false, - "dateModified": "2024-03-20", - "share": "true" -} ---- - -

GCWeb Override .gcweb-menu .sm .row Exemple de fonctionnement de la classe

-
- -
-

Exemple de code

-
<div class="gcweb-menu">
-	<ul class="sm">
-	<li>
-		<a href="#">Élément de menu 1</a>
-		<ul class="row">
-	<li><a href="#">Élément de sous-menu 1</a></li>
-	<li><a href="#">Élément de sous-menu 2</a></li>
-	<li><a href="#">Élément de sous-menu 3</a></li>
-		</ul>
-	</li>
-	<li><a href="#">Élément de menu 2</a></li>
-	<li><a href="#">Élément de menu 3</a></li>
-	</ul>
-</div>
diff --git a/components/gc-corporate/index.json-ld b/components/gc-corporate/index.json-ld new file mode 100644 index 0000000000..de2f351b42 --- /dev/null +++ b/components/gc-corporate/index.json-ld @@ -0,0 +1,42 @@ +{ + "@context": { + "@version": 2.0, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + + "title": { + "en": "Layout", + "fr": "Mise en page" + }, + + "description": { + "en": "Bootstrap and WET classes showcasing layout options such as flexbox, CSS grid, grid baseline (containers) accompanied by practical examples to test and observe different page layouts.", + "fr": "Classes de Bootstrap et WET qui illustrent différentes façons de mise en page tels que flexbox, grille CSS, ligne de base de la grille (conteneurs). Les exemples fournis permettent de tester et d'observer les différents dispositions de mise en page." + }, + + "modified": "2024-03-26", + "componentName": "grid-layout", + "status": "stable", + + "pages": { + + "examples": [ + + { + "title": "Responsive Columns", + "language": "en", + "path": "responsive_columns-en.html" + }, + + { + "title": "Colonnes réactives", + "language": "fr", + "path": "responsive_columns-fr.html" + }, + + ] + } +} diff --git a/common/grid-layout/responsive_columns-en.html b/components/gc-corporate/responsive_columns-en.html similarity index 100% rename from common/grid-layout/responsive_columns-en.html rename to components/gc-corporate/responsive_columns-en.html diff --git a/common/grid-layout/responsive_columns-fr.html b/components/gc-corporate/responsive_columns-fr.html similarity index 100% rename from common/grid-layout/responsive_columns-fr.html rename to components/gc-corporate/responsive_columns-fr.html From bfacbe63b476e6583ce1d624fe0c21c6678fed37 Mon Sep 17 00:00:00 2001 From: hanseller Date: Fri, 29 Mar 2024 08:49:23 -0400 Subject: [PATCH 07/10] updating display & layout html files --- common/display/display-en.html | 51 +++++++++++++------------------ common/display/display-fr.html | 36 +++------------------- common/grid-layout/layout-en.html | 2 +- common/grid-layout/layout-fr.html | 2 +- 4 files changed, 28 insertions(+), 63 deletions(-) diff --git a/common/display/display-en.html b/common/display/display-en.html index d50328185d..112ceb389b 100644 --- a/common/display/display-en.html +++ b/common/display/display-en.html @@ -10,6 +10,7 @@

This page showcases Bootstrap display utility features including some integration from wet-boew like toggling content.

+

Bootstrap

-

Float

- -

Bootstrap 3 .clearfixworking example

+

Float

+

.clearfixworking example

-
Column 1
-
Column 2
-
Column 3
+
Column 1
+
Column 2
+
Column 3
+

This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.

+

Code sample

<div class="well">
 	<div class="row">
-	<div class="col-md-3 well pull-left bg-darker">Column 1</div>
-	<div class="col-md-3 well pull-left bg-darker">Column 2</div>
-	<div class="col-md-3 well pull-left bg-darker">Column 3</div>
+	<div class="pull-left bg-darker text-white col-md-3 well">Column 1</div>
+	<div class="pull-left bg-darker text-white col-md-3 well">Column 2</div>
+	<div class="pull-left bg-darker text-white col-md-3 well">Column 3</div>
 	<!-- Add clearfix class to clear floated elements -->
 	<div class="clearfix"></div>
 </div>
 <p class="well">This is some content below the floated columns. Without clearfix, this content would overlap with the floated columns. But clearfix ensures proper layout by clearing the floats.</p>
 </div>
-

Bootstrap 3 .center-block class working example

+

.center-block class working example

This element is centered horizontally within its parent container. @@ -63,7 +65,7 @@

Code sample

</div> </div> -

Bootstrap 3 .pull-right class working example

+

.pull-right class working example

This element is floated to the right within its parent container. @@ -76,7 +78,7 @@

Code sample

</div> </div> -

Bootstrap 3 .pull-left class working example

+

.pull-left class working example

This element is floated to the left within its parent container. @@ -144,7 +146,7 @@

Code sample

Toggling content

-

Bootstrap 3 .hide class working example

+

.hide class working example

This element is hidden on all screen sizes. @@ -157,7 +159,7 @@

Code sample

</div> </div> -

Bootstrap 3 .show class working example

+

.show class working example

This element is visible on all screen sizes. @@ -170,7 +172,7 @@

Code sample

</div> </div> -

Bootstrap 3 .invisible class working example

+

.invisible class working example