diff --git a/_data/common.json b/_data/common.json index 4e89a210d8..216b5cbc17 100644 --- a/_data/common.json +++ b/_data/common.json @@ -484,6 +484,40 @@ ] } } +,{ + "@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": "Spacing", + "fr": "Espacement" + }, + "description": { + "en": "Utility classes to add spacing between elements.", + "fr": "Classes utilitaires pour ajouter de l'espacement entre des éléments." + }, + "modified": "2024-11-22", + "componentName": "spacing", + "status": "stable", + "pages": { + "examples": [ + { + "title": "Spacing", + "language": "en", + "path": "spacing-en.html" + }, + { + "title": "Espacement", + "language": "fr", + "path": "spacing-fr.html" + } + ] + } +} ,{ "@context": { "@version": 1.1, diff --git a/_data/templates.json b/_data/templates.json index 3f4fb2910f..dfbb567d52 100644 --- a/_data/templates.json +++ b/_data/templates.json @@ -83,6 +83,134 @@ ] } } +,{ + "@context": { + "@version": 1.1, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "All services", + "fr": "Tous les services" + }, + "description": { + "en": "All services page template.", + "fr": "Gabarit de page pour tous les services." + }, + "modified": "2024-11-21", + "componentName": "all-services", + "status": "stable", + "version": "1.0", + "pages": { + "examples": [ + { + "title": "All services", + "language": "en", + "path": "all-services-en.html" + }, + { + "title": "Tous les services", + "language": "fr", + "path": "all-services-fr.html" + } + ], + "docs": [ + { + "title": "All services", + "language": "en", + "path": "all-services-doc-en.html" + }, + { + "title": "Tous les services", + "language": "fr", + "path": "all-services-doc-fr.html" + } + ] + }, + "a11yGuidance": "No accessibility guidance.", + "variations": [ + { + "name": { + "en": "All services", + "fr": "Tous les services" + }, + "status": "stable", + "description": { + "en": "All services page template.", + "fr": "Gabarit de page pour tous les services." + }, + "iteration": "_:iteration_allservices_1", + "example": [ + { + "en": { "href": "all-services-en.html", "text": "All services" }, + "fr": { "href": "all-services-fr.html", "text": "Tous les services" } + } + ], + "implementation": [ + "_:implement_allservices" + ], + "history": [ + { + "en": "November 2024 - Initial implementation of the page template.", + "fr": "Novembre 2024 - Implémentation initiale du gabarit de page." + } + ] + } + ], + "implementation": [ + { + "@id": "_:implement_allservices", + "iteration": "_:iteration_allservices_1", + "name": { + "en": "Standard", + "fr": "Standard" + }, + "introduction": { + "en": "This implementation is meant for publishers adding the template manually into an AEM page.", + "fr": "Cette implémentation est destinée aux éditeurs qui ajoutent le gabarit manuellement à une page d'AEM." + + }, + "instructions": { + "en": [ + "Refer to the working example and guidance for more information on how to implement this page template." + ], + "fr": [ + "Référez-vous à l'exemple pratique et aux directives pour plus d'informations sur l'implémentation ce modèle de page." + ] + }, + "ajaxSourceCode": { + "en": "all-services-en.html main > *:not(.pagedetails)", + "fr": "all-services-fr.html main > *:not(.pagedetails)" + } + } + ], + "iteration": [ + { + "@id": "_:iteration_allservices_1", + "name": "All services page - Iteration 1", + "date": "2024-11", + "detectableBy": "Three navigation bands followed by a series of
elements for all goc themes and topics." + } + ], + "changesets": [ + { + "@id": "_:cs_allservices", + "name": "Topic page", + "status": "stable", + "baseOnIteration": "_:iteration_allservices_1", + "detectableBy": "By the sequence of elements.", + "layout": [ + "Top serches navigation band", + "Most requested services navigation band", + "Supporting through life's transitions navigation band", + "Most requested - version 1 (optional)", + "Series of
elements for all goc themes and topics" + ] + } + ] +} ,{ "@context": { "@version": 1.1, diff --git a/common/colour/_colours.scss b/common/colour/_colours.scss new file mode 100644 index 0000000000..65593ccf7f --- /dev/null +++ b/common/colour/_colours.scss @@ -0,0 +1,9 @@ +/* + * + * @title: Colours + * + */ + +.bg-light { + background-color: $well-bg; +} diff --git a/common/colour/colour-en.html b/common/colour/colour-en.html index 4524f0756b..300f11aaf1 100644 --- a/common/colour/colour-en.html +++ b/common/colour/colour-en.html @@ -8,6 +8,8 @@ } --- +
+

This page showcases wet-boew utility features including some integration from Bootstrap 4 such as: bg-primary, text-center, text-white and others.

Please note that some backported Bootstrap 4 classes have been adjusted to follow Bootstrap 3.4's view breakpoints. For example, small (sm) view's minimum width is 768px in Bootstrap 3.4, as opposed to 576px in Bootstrap 4.

@@ -288,7 +290,7 @@

Code sample

<div class="well mrgn-tp-md mrgn-bttm-md bg-darker text-white">
 	<h5 class="mrgn-tp-md">Heading</h5>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
-	</div>
+</div>

bg-dark

Set a dark background to an element.

@@ -302,4 +304,18 @@

Code sample

<div class="well mrgn-tp-md mrgn-bttm-md bg-dark text-white">
 	<h5 class="mrgn-tp-md">Heading</h5>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
-	</div>
+</div> + +

bg-light

+

Set a light background to an element.

+

Working example

+
+
Heading
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.

+
+ +

Code sample

+
<div class="bg-light">
+	<h5>Heading</h5>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
+</div>
diff --git a/common/colour/colour-fr.html b/common/colour/colour-fr.html index 323b3c19e4..7739ae05a3 100644 --- a/common/colour/colour-fr.html +++ b/common/colour/colour-fr.html @@ -8,6 +8,8 @@ } --- +
+

Cette page présente les fonctionnalités de l'utilitaire wet-boew, y compris certaines intégrations de Bootstrap 4 telles que: bg-primary, text-center, text-white et d'autres.

Veuillez noter que certaines classes Bootstrap 4 rétroportées ont été ajustées pour suivre les points d'arrêt de vue de Bootstrap 3.4. Par exemple, la largeur minimale de la petite vue (sm) est de 768px dans Bootstrap 3.4, par opposition à 576px dans Bootstrap 4.

@@ -261,20 +263,20 @@

Exemple de code

<h5 class="mrgn-tp-md">Titre</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p> </div> - </div> +</div> -

bg-gctheme

-

définir l'arrière-plan du gctheme

-

Exemple

-
-
Titre
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.

-
-

Exemple de code

- 
<div class="bg-gctheme text-white well mrgn-tp-md mrgn-bttm-md">
-			<h5 class="mrgn-tp-md">Titre</h5>
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
-	</div>
+

bg-gctheme

+

définir l'arrière-plan du gctheme

+

Exemple

+
+
Titre
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.

+
+

Exemple de code

+
<div class="bg-gctheme text-white well mrgn-tp-md mrgn-bttm-md">
+	<h5 class="mrgn-tp-md">Titre</h5>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
+</div>

bg-darker

Définissez un arrière-plan noir sur un élément.

@@ -288,7 +290,7 @@

Exemple de code

<div class="well mrgn-tp-md mrgn-bttm-md bg-darker text-white">
 	<h5 class="mrgn-tp-md">Titre</h5>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
-	</div>
+</div>

bg-dark

Définissez un arrière-plan sombre sur un élément.

@@ -302,4 +304,18 @@

Exemple de code

<div class="well mrgn-tp-md mrgn-bttm-md bg-dark text-white">
 	<h5 class="mrgn-tp-md">Titre</h5>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
-	</div>
+</div> + +

bg-light

+

Définissez un arrière-plan pâle sur un élément.

+

Exemple

+
+
Titre
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.

+
+ +

Exemple de code

+
<div class="bg-light">
+	<h5>Titre</h5>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante nulla, condimentum at mollis et, scelerisque quis dolor. Suspendisse viverra in ante id consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sodales ipsum vitae faucibus iaculis. Nulla in blandit dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean non interdum sapien. Nunc non volutpat dui, in malesuada justo. Etiam feugiat accumsan pulvinar. Quisque blandit est in placerat finibus. Sed et ullamcorper velit. Nullam euismod iaculis ligula sit amet consequat. Aenean luctus quis nisi nec feugiat.</p>
+</div>
diff --git a/common/list/_lists.scss b/common/list/_lists.scss index f4b2a202b5..c33f27c623 100644 --- a/common/list/_lists.scss +++ b/common/list/_lists.scss @@ -175,3 +175,13 @@ div.list-advanced.circle>ul, ul.circle { div.list-advanced.square>ul, ul.square { list-style-type:square; } + +/* + * GCWeb/AEM: Custom CSS for list styling with navigation links. + */ + +ul.small { + li { + line-height: 1.5em; + } +} diff --git a/common/list/lists-en.html b/common/list/lists-en.html index 0963b25895..f4fc406834 100644 --- a/common/list/lists-en.html +++ b/common/list/lists-en.html @@ -408,3 +408,16 @@

Inline description list

<dt>Term :</dt> <dd>Short description</dd> </dl> + +

List with small utility class.

+ diff --git a/common/list/lists-fr.html b/common/list/lists-fr.html index b41618d241..efb754f619 100644 --- a/common/list/lists-fr.html +++ b/common/list/lists-fr.html @@ -411,3 +411,16 @@

Liste descriptive en ligne

<dt>Terme :</dt> <dd>Description courte</dd> </dl> + +

Liste avec classe utilitaire small.

+ diff --git a/common/spacing/_base.scss b/common/spacing/_base.scss new file mode 100644 index 0000000000..6ca08c2f68 --- /dev/null +++ b/common/spacing/_base.scss @@ -0,0 +1,46 @@ +/* + * + * @title: Spacing + * + */ + +@each $prop, $abbrev in (margin: m, padding: p) { + @each $size, $length in $spacers { + .#{$abbrev}-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}t-#{$size}, + .#{$abbrev}y-#{$size} { + #{$prop}-top: $length !important; + } + .#{$abbrev}r-#{$size}, + .#{$abbrev}x-#{$size} { + #{$prop}-right: $length !important; + } + .#{$abbrev}b-#{$size}, + .#{$abbrev}y-#{$size} { + #{$prop}-bottom: $length !important; + } + .#{$abbrev}l-#{$size}, + .#{$abbrev}x-#{$size} { + #{$prop}-left: $length !important; + } + } +} + +// Auto margins +.m-auto { margin: auto !important; } +.mt-auto, +.my-auto { + margin-top: auto !important; +} +.mr-auto, +.mx-auto { + margin-right: auto !important; +} +.mb-auto, +.my-auto { + margin-bottom: auto !important; +} +.ml-auto, +.mx-auto { + margin-left: auto !important; +} diff --git a/common/spacing/_screen-lg-min.scss b/common/spacing/_screen-lg-min.scss new file mode 100644 index 0000000000..bb96146a1e --- /dev/null +++ b/common/spacing/_screen-lg-min.scss @@ -0,0 +1,47 @@ +/* + * + * @title: Spacing + * sm breakpoint and up + * + */ + + @each $prop, $abbrev in (margin: m, padding: p) { + @each $size, $length in $spacers { + .#{$abbrev}-lg-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}t-lg-#{$size}, + .#{$abbrev}y-lg-#{$size} { + #{$prop}-top: $length !important; + } + .#{$abbrev}r-lg-#{$size}, + .#{$abbrev}x-lg-#{$size} { + #{$prop}-right: $length !important; + } + .#{$abbrev}b-lg-#{$size}, + .#{$abbrev}y-lg-#{$size} { + #{$prop}-bottom: $length !important; + } + .#{$abbrev}l-lg-#{$size}, + .#{$abbrev}x-lg-#{$size} { + #{$prop}-left: $length !important; + } + } +} + +// Auto margins +.m-lg-auto { margin: auto !important; } +.mt-lg-auto, +.my-lg-auto { + margin-top: auto !important; +} +.mr-lg-auto, +.mx-lg-auto { + margin-right: auto !important; +} +.mb-lg-auto, +.my-lg-auto { + margin-bottom: auto !important; +} +.ml-lg-auto, +.mx-lg-auto { + margin-left: auto !important; +} diff --git a/common/spacing/_screen-md-min.scss b/common/spacing/_screen-md-min.scss new file mode 100644 index 0000000000..3f1f65e1f9 --- /dev/null +++ b/common/spacing/_screen-md-min.scss @@ -0,0 +1,47 @@ +/* + * + * @title: Spacing + * sm breakpoint and up + * + */ + + @each $prop, $abbrev in (margin: m, padding: p) { + @each $size, $length in $spacers { + .#{$abbrev}-md-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}t-md-#{$size}, + .#{$abbrev}y-md-#{$size} { + #{$prop}-top: $length !important; + } + .#{$abbrev}r-md-#{$size}, + .#{$abbrev}x-md-#{$size} { + #{$prop}-right: $length !important; + } + .#{$abbrev}b-md-#{$size}, + .#{$abbrev}y-md-#{$size} { + #{$prop}-bottom: $length !important; + } + .#{$abbrev}l-md-#{$size}, + .#{$abbrev}x-md-#{$size} { + #{$prop}-left: $length !important; + } + } +} + +// Auto margins +.m-md-auto { margin: auto !important; } +.mt-md-auto, +.my-md-auto { + margin-top: auto !important; +} +.mr-md-auto, +.mx-md-auto { + margin-right: auto !important; +} +.mb-md-auto, +.my-md-auto { + margin-bottom: auto !important; +} +.ml-md-auto, +.mx-md-auto { + margin-left: auto !important; +} diff --git a/common/spacing/_screen-sm-min.scss b/common/spacing/_screen-sm-min.scss new file mode 100644 index 0000000000..21804b1dcd --- /dev/null +++ b/common/spacing/_screen-sm-min.scss @@ -0,0 +1,47 @@ +/* + * + * @title: Spacing + * sm breakpoint and up + * + */ + + @each $prop, $abbrev in (margin: m, padding: p) { + @each $size, $length in $spacers { + .#{$abbrev}-sm-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}t-sm-#{$size}, + .#{$abbrev}y-sm-#{$size} { + #{$prop}-top: $length !important; + } + .#{$abbrev}r-sm-#{$size}, + .#{$abbrev}x-sm-#{$size} { + #{$prop}-right: $length !important; + } + .#{$abbrev}b-sm-#{$size}, + .#{$abbrev}y-sm-#{$size} { + #{$prop}-bottom: $length !important; + } + .#{$abbrev}l-sm-#{$size}, + .#{$abbrev}x-sm-#{$size} { + #{$prop}-left: $length !important; + } + } +} + +// Auto margins +.m-sm-auto { margin: auto !important; } +.mt-sm-auto, +.my-sm-auto { + margin-top: auto !important; +} +.mr-sm-auto, +.mx-sm-auto { + margin-right: auto !important; +} +.mb-sm-auto, +.my-sm-auto { + margin-bottom: auto !important; +} +.ml-sm-auto, +.mx-sm-auto { + margin-left: auto !important; +} diff --git a/common/spacing/index.json-ld b/common/spacing/index.json-ld new file mode 100644 index 0000000000..62e9c8df6c --- /dev/null +++ b/common/spacing/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": "Spacing", + "fr": "Espacement" + }, + "description": { + "en": "Utility classes to add spacing between elements.", + "fr": "Classes utilitaires pour ajouter de l'espacement entre des éléments." + }, + "modified": "2024-11-22", + "componentName": "spacing", + "status": "stable", + "pages": { + "examples": [ + { + "title": "Spacing", + "language": "en", + "path": "spacing-en.html" + }, + { + "title": "Espacement", + "language": "fr", + "path": "spacing-fr.html" + } + ] + } +} diff --git a/common/spacing/spacing-en.html b/common/spacing/spacing-en.html new file mode 100644 index 0000000000..a3ab2af9fd --- /dev/null +++ b/common/spacing/spacing-en.html @@ -0,0 +1,92 @@ +--- +{ + "title": "Spacing", + "language": "en", + "altLangPage": "spacing-fr.html", + "description": "Utility classes to add spacing between elements.", + "dateModified": "2024-11-22" +} +--- + +
+ +

Utility classes to add spacing between elements.

+ +

This page showcases wet-boew utility features including some integration from Bootstrap 4.

+

Please note that some backported Bootstrap 4 classes have been adjusted to follow Bootstrap 3.4's view breakpoints. For example, small (sm) view's minimum width is 768px in Bootstrap 3.4, as opposed to 576px in Bootstrap 4.

+ +

How it works

+

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties.

+ +

Notation

+

Spacing utilities that apply to all breakpoints, from xs to lg, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

+

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, and lg.

+

Where property is one of:

+ +

Where sides is one of:

+ +

Where size is one of:

+ + +

Some working examples

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+
+

Lorem ipsum dolor sit amet.

+
+ +

Code sample

+
<p class="bg-primary mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+<p class="bg-primary px-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+<p class="bg-primary mt-sm-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+<div class="d-flex">
+	<div class="col-xs-6 mx-auto"><p class="bg-primary">Lorem ipsum dolor sit amet.</p></div>
+</div>
+ +

Legacy spacing classes

+

mrgn-{position}-{size} Deprecated

+

Where position is one of:

+ +

Where size is one of:

+ +

Some working examples

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic?

+
Code sample
+
<p class="bg-primary mrgn-tp-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic?</p>
+<p class="bg-primary mrgn-lft-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic?</p>
+<p class="bg-primary mrgn-bttm-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic?</p>
+<p class="bg-primary mrgn-rght-xl mrgn-bttm-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic?</p>
diff --git a/common/spacing/spacing-fr.html b/common/spacing/spacing-fr.html new file mode 100644 index 0000000000..57781b9e4a --- /dev/null +++ b/common/spacing/spacing-fr.html @@ -0,0 +1,92 @@ +--- +{ +"title": "Spacing", +"language": "fr", +"altLangPage": "spacing-en.html", +"description": "Classes utilitaires pour ajouter de l'espacement entre des éléments.", +"dateModified": "2024-11-22" +} +--- + +
+ +

Classes utilitaires pour ajouter de l'espacement entre les éléments.

+ +

Cette page présente les fonctionnalités utilitaires de wet-boew, y compris certaines intégrations de Bootstrap 4.

+

Veuillez noter que certaines classes Bootstrap 4 rétroportées ont été ajustées pour suivre les points d'arrêt de vue de Bootstrap 3.4. Par exemple, la largeur minimale d'une vue de petite taille (sm) est de 768 px dans Bootstrap 3.4, contre 576 px dans Bootstrap 4.

+ +

Comment ça marche

+

Attribuez des valeurs de marge ou de remplissage adaptées à la réactivité à un élément ou à un sous-ensemble de ses côtés avec des classes abrégées. Inclut la prise en charge des propriétés individuelles, de toutes les propriétés et des propriétés verticales et horizontales.

+ +

Notation

+

Les utilitaires d'espacement qui s'appliquent à tous les points d'arrêt, de xs à lg, n'ont pas d'abréviation de point d'arrêt. Cela est dû au fait que ces classes sont appliquées à partir de min-width: 0 et plus, et ne sont donc pas liées par une requête média. Les points d'arrêt restants incluent cependant une abréviation de point d'arrêt.

+

Les classes sont nommées selon le format {propriété}{côtés}-{grosseur} pour xs et {propriété}{côtés}-{point d'arrêt}-{grosseur} pour sm, md et lg.

+

Où propriété est l'un des éléments suivants :

+ +

Où côtés est l'un des éléments suivants :

+ +

Où grosseur est l'une des valeurs suivantes :

+ + +

Quelques exemples fonctionnels

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.

+
+

Lorem ipsum dolor sit amet.

+
+ +

Exemple de code

+
<p class="bg-primary mb-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+<p class="bg-primary px-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+<p class="bg-primary mt-sm-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, magnam.</p>
+<div class="d-flex">
+	<div class="col-xs-6 mx-auto"><p class="bg-primary">Lorem ipsum dolor sit amet.</p></div>
+</div>
+ +

Classes d'espacement obsolètes

+

mrgn-{position}-{grosseur} Obsolète

+

Où position est l'une des suivantes :

+ +

Où grosseur est l'une des suivantes :

+ +

Quelques exemples pratiques

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hein ?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hein ?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic ?

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic ?

+
Exemple de code
+
<p class="bg-primary mrgn-tp-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic ?</p>
+<p class="bg-primary mrgn-lft-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic ?</p>
+<p class="bg-primary mrgn-bttm-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic ?</p>
+<p class="bg-primary mrgn-rght-xl mrgn-bttm-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, hic ?</p>
diff --git a/sites/_variables.scss b/sites/_variables.scss index edcc7c4d1d..4d57ebddbb 100644 --- a/sites/_variables.scss +++ b/sites/_variables.scss @@ -76,4 +76,19 @@ $space-md: 15px; $input-color-placeholder: #5c5c5c !important; +// Spacers +$spacer: 20px; +$spacers: () !default; +$spacers: map-merge( + ( + 0: 0, + 1: ($spacer * .25), + 2: ($spacer * .5), + 3: $spacer, + 4: ($spacer * 1.5), + 5: ($spacer * 3) + ), + $spacers +); + @import "wet-boew/src/variables"; diff --git a/sites/theme.scss b/sites/theme.scss index c3aa3bbe4f..0e27244d00 100644 --- a/sites/theme.scss +++ b/sites/theme.scss @@ -34,6 +34,7 @@ @import "bootstrap-sass/assets/stylesheets/bootstrap/type"; @import "wet-boew/src/base/bootstrap-overrides/core-heading"; @import "baseline/heading"; +@import "../common/colour/colours"; @import "../common/list/lists"; @import "wet-boew/src/base/bootstrap-overrides/core"; @import "wet-boew/src/base/details/base"; @@ -215,6 +216,7 @@ @import "wet-boew/src/base/proximity/base"; @import "wet-boew/src/base/bootstrap-4"; @import "wet-boew/src/base/component"; +@import "../common/spacing/base"; /* @@ -315,6 +317,7 @@ @import "wet-boew/src/base/proximity/screen-sm-min"; @import "wet-boew/src/base/views/_bootstrap-4-screen-sm-min"; + @import "../common/spacing/screen-sm-min"; } /* Medium view and over */ @@ -333,6 +336,7 @@ @import "../components/gc-most-requested/screen-md-min"; @import "wet-boew/src/base/proximity/screen-md-min"; + @import "../common/spacing/screen-md-min"; } /* Large view and over */ @@ -346,6 +350,7 @@ @import "../components/equalheight/screen-lg-min"; @import "wet-boew/src/base/proximity/screen-lg-min"; + @import "../common/spacing/screen-lg-min"; } /* Extra-extra-small view */ diff --git a/templates/all-services/all-services-doc-en.html b/templates/all-services/all-services-doc-en.html new file mode 100644 index 0000000000..73166a30e5 --- /dev/null +++ b/templates/all-services/all-services-doc-en.html @@ -0,0 +1,9 @@ +--- +title: All services +description: Documentation for the all services page template. +language: en +altLangPage: all-services-doc-fr.html +dateModified: 2024-11-22 +layout: documentation +index_json: index.json-ld +--- diff --git a/templates/all-services/all-services-doc-fr.html b/templates/all-services/all-services-doc-fr.html new file mode 100644 index 0000000000..4c8042cacd --- /dev/null +++ b/templates/all-services/all-services-doc-fr.html @@ -0,0 +1,9 @@ +--- +title: Tous les services +description: Documentation du gabarit de page de tous les services. +language: fr +altLangPage: all-services-doc-en.html +dateModified: 2024-11-22 +layout: documentation +index_json: index.json-ld +--- diff --git a/templates/all-services/all-services-en.html b/templates/all-services/all-services-en.html new file mode 100644 index 0000000000..752d6caad7 --- /dev/null +++ b/templates/all-services/all-services-en.html @@ -0,0 +1,738 @@ +--- +{ +"title": "Government of Canada services", +"language": "en", +"altLangPage": "all-services-fr.html", +"dateModified": "2024-11-21", +"layout": "no-container", +"css": ["https://use.fontawesome.com/releases/v5.8.1/css/all.css"] +} +--- + +
+

Government of Canada services

+
+ +
+
+

Top searches

+ +
+
+ +
+
+

Most requested services

+ +
+
+ +
+
+

Supporting you through life's transitions

+ +
+
+ +
+

Access services by topic

+ +
+ Immigration and citizenship +
+
+

Information on

+
+
+ +
+
+
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Taxes +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Jobs +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Travel and tourism +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Benefits +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Environment and natural resources +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Business and industry +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Health +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Money and finances +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Canada and the world +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Youth +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Indigenous Peoples +
+
+

More topics

+
+
+ +
+
+
+ +
+ Culture, history and sport +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ National security and defence +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Veterans and military +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Transport and infrastructure +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Policing, justice and emergencies +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Science and innovation +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
diff --git a/templates/all-services/all-services-fr.html b/templates/all-services/all-services-fr.html new file mode 100644 index 0000000000..f4eab604cb --- /dev/null +++ b/templates/all-services/all-services-fr.html @@ -0,0 +1,742 @@ +--- +{ + "title": "Services du government du Canada", + "language": "fr", + "altLangPage": "all-services-en.html", + "dateModified": "2024-11-21", + "layout": "no-container", + "css": ["https://use.fontawesome.com/releases/v5.8.1/css/all.css"] +} +--- + +
+

Services du government du Canada

+
+ +
+ +
+
+

Top searches

+ +
+
+ +
+
+

Most requested services

+ +
+
+ +
+
+

Supporting you through life's transitions

+ +
+
+ +
+

Access services by topic

+ +
+ Immigration and citizenship +
+
+

Information on

+
+
+ +
+
+
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Taxes +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Jobs +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Travel and tourism +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Benefits +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Environment and natural resources +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Business and industry +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Health +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Money and finances +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Canada and the world +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Youth +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Indigenous Peoples +
+
+

More topics

+
+
+ +
+
+
+ +
+ Culture, history and sport +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ National security and defence +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Veterans and military +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Transport and infrastructure +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Policing, justice and emergencies +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+ +
+ Science and innovation +
+
+

Most requested

+
+
+ +
+
+
+
+

More topics

+
+
+ +
+
+
+
+ +
diff --git a/templates/all-services/index.json-ld b/templates/all-services/index.json-ld new file mode 100644 index 0000000000..5edebf91fc --- /dev/null +++ b/templates/all-services/index.json-ld @@ -0,0 +1,128 @@ +{ + "@context": { + "@version": 1.1, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "All services", + "fr": "Tous les services" + }, + "description": { + "en": "All services page template.", + "fr": "Gabarit de page pour tous les services." + }, + "modified": "2024-11-21", + "componentName": "all-services", + "status": "stable", + "version": "1.0", + "pages": { + "examples": [ + { + "title": "All services", + "language": "en", + "path": "all-services-en.html" + }, + { + "title": "Tous les services", + "language": "fr", + "path": "all-services-fr.html" + } + ], + "docs": [ + { + "title": "All services", + "language": "en", + "path": "all-services-doc-en.html" + }, + { + "title": "Tous les services", + "language": "fr", + "path": "all-services-doc-fr.html" + } + ] + }, + "a11yGuidance": "No accessibility guidance.", + "variations": [ + { + "name": { + "en": "All services", + "fr": "Tous les services" + }, + "status": "stable", + "description": { + "en": "All services page template.", + "fr": "Gabarit de page pour tous les services." + }, + "iteration": "_:iteration_allservices_1", + "example": [ + { + "en": { "href": "all-services-en.html", "text": "All services" }, + "fr": { "href": "all-services-fr.html", "text": "Tous les services" } + } + ], + "implementation": [ + "_:implement_allservices" + ], + "history": [ + { + "en": "November 2024 - Initial implementation of the page template.", + "fr": "Novembre 2024 - Implémentation initiale du gabarit de page." + } + ] + } + ], + "implementation": [ + { + "@id": "_:implement_allservices", + "iteration": "_:iteration_allservices_1", + "name": { + "en": "Standard", + "fr": "Standard" + }, + "introduction": { + "en": "This implementation is meant for publishers adding the template manually into an AEM page.", + "fr": "Cette implémentation est destinée aux éditeurs qui ajoutent le gabarit manuellement à une page d'AEM." + + }, + "instructions": { + "en": [ + "Refer to the working example and guidance for more information on how to implement this page template." + ], + "fr": [ + "Référez-vous à l'exemple pratique et aux directives pour plus d'informations sur l'implémentation ce modèle de page." + ] + }, + "ajaxSourceCode": { + "en": "all-services-en.html main > *:not(.pagedetails)", + "fr": "all-services-fr.html main > *:not(.pagedetails)" + } + } + ], + "iteration": [ + { + "@id": "_:iteration_allservices_1", + "name": "All services page - Iteration 1", + "date": "2024-11", + "detectableBy": "Three navigation bands followed by a series of
elements for all goc themes and topics." + } + ], + "changesets": [ + { + "@id": "_:cs_allservices", + "name": "Topic page", + "status": "stable", + "baseOnIteration": "_:iteration_allservices_1", + "detectableBy": "By the sequence of elements.", + "layout": [ + "Top serches navigation band", + "Most requested services navigation band", + "Supporting through life's transitions navigation band", + "Most requested - version 1 (optional)", + "Series of
elements for all goc themes and topics" + ] + } + ] +}