From c524dffed70c2727441f669c6214f5078a93417b Mon Sep 17 00:00:00 2001 From: SebastianBurke Date: Wed, 14 Feb 2024 16:48:49 -0500 Subject: [PATCH] Content - Spacing and Borders - Create Example Pages --- common/spacing-borders/index.json-ld | 34 ++ .../spacing-borders/spacing-borders-en.html | 334 ++++++++++++++++++ .../spacing-borders/spacing-borders-fr.html | 334 ++++++++++++++++++ 3 files changed, 702 insertions(+) create mode 100644 common/spacing-borders/index.json-ld create mode 100644 common/spacing-borders/spacing-borders-en.html create mode 100644 common/spacing-borders/spacing-borders-fr.html diff --git a/common/spacing-borders/index.json-ld b/common/spacing-borders/index.json-ld new file mode 100644 index 0000000000..03fc462a3e --- /dev/null +++ b/common/spacing-borders/index.json-ld @@ -0,0 +1,34 @@ +{ + "@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": "Spacing and Borders", + "fr": "Espacement et Bordures" + }, + "description": { + "en": "This page provides examples and code snippets for implementing various spacing and border styles in a web layout.", + "fr": "Cette page fournit des exemples et des extraits de code pour l'implémentation de divers styles d'espacement et de bordures dans une mise en page web." + }, + "modified": "2024-03-05", + "componentName": "spacing-borders", + "status": "stable", + "pages": { + "docs": [ + { + "title": "Spacing and Borders", + "language": "en", + "path": "spacing-borders-en.html" + }, + { + "title": "Espacement et Bordures", + "language": "fr", + "path": "spacing-borders-fr.html" + } + ] + } +} diff --git a/common/spacing-borders/spacing-borders-en.html b/common/spacing-borders/spacing-borders-en.html new file mode 100644 index 0000000000..371a910369 --- /dev/null +++ b/common/spacing-borders/spacing-borders-en.html @@ -0,0 +1,334 @@ +--- +{ +"title": "Spacing and Borders", +"language":"en", +"altLangPage":"spacing-borders-fr.html", +"breadcrumbs": +[ +{ +"title": "GCWeb home", +"link": "https://wet-boew.github.io/themes-dist/GCWeb/index-en.html" +} +], +"secondlevel": false, +"dateModified": "2024-03-05", +"share": "true" +} +--- + +

.margin-bottom-none

+
+
+
No bottom Margin
+
+
+
20 pixel bottom Margin
+
+
+ 
<div class="margin-bottom-none"></div>
+<div style="margin-bottom: 20px"></div>
+
+
+ +

.margin-bottom-small

+
+
+
Small bottom Margin
+
+
+
Default bottom Margin
+
+
+ 
<div class="margin-bottom-small"></div>
+
+
+

.margin-top-large

+
+
+
Large top Margin
+
+
+
Default top Margin
+
+
+ 
<div class="margin-top-large"></div>
+
+
+ +

.margin-top-medium

+
+
+
Medium top Margin
+
+
+
Default top Margin
+
+
+ 
<div class="margin-top-medium"></div>
+
+
+ +

.mb-sm-5

+
+
+
Bottom Margin of 50
+
+
+
No bottom Margin
+
+
+ 
<div class="mb-sm-5"></div>
+
+
+ +
+

.mrgn-*-*

+
+
+
+
Left margin 0
+
Left margin small (5px)
+
Left margin medium (15px)
+
Left margin large (30px)
+
Left margin extra large (50px)
+
+
+ 
<div class="mrgn-lft-0"></div>
+<div class="mrgn-lft-sm"></div>
+<div class="mrgn-lft-md"></div>
+<div class="mrgn-lft-lg"></div>
+<div class="mrgn-lft-xl"></div>
+
+
+
+
+
Right margin 0
+
Right margin small (5px)
+
Right margin medium (15px)
+
Right margin large (30px)
+
Right margin extra large (50px)
+
+
+ 
<div class="mrgn-rght-0"></div>
+<div class="mrgn-rght-sm"></div>
+<div class="mrgn-rght-md"></div>
+<div class="mrgn-rght-lg"></div>
+<div class="mrgn-rght-xl"></div>
+
+
+
+
+
Bottom margin 0
+
Bottom margin small (5px)
+
Bottom margin medium (15px)
+
Bottom margin large (30px)
+
Bottom margin extra large (50px)
+
+
+ 
<div class="mrgn-bttm-0"></div>
+<div class="mrgn-bttm-sm"></div>
+<div class="mrgn-bttm-md"></div>
+<div class="mrgn-bttm-lg"></div>
+<div class="mrgn-bttm-xl"></div>
+
+
+
+
+
Top margin 0
+
Top margin small (5px)
+
Top margin medium (15px)
+
Top margin large (30px)
+
Top margin extra large (50px)
+
+
+ 
<div class="mrgn-tp-0"></div>
+<div class="mrgn-tp-sm"></div>
+<div class="mrgn-tp-md"></div>
+<div class="mrgn-tp-lg"></div>
+<div class="mrgn-tp-xl"></div>
+
+
+
+
+ +
+

Demonstrating .mt-auto Effect

+
+
Top Element: This is a standard flex item which + will stay at its natural position, which is at the top of the flex container. +
+
Bottom Element with .mt-auto: + By applying .mt-auto, this element takes up all available space on the top, effectively pushing + itself to the bottom of the flex container. +
+
+
+ + +

.p-0

+
+
+
No Padding
+
+
+
Default Padding
+
+
+ 
<div class="p-0"></div>
+
+
+ +

.pl-2

+
+
+
5px Left Padding
+
+
+
Default Padding
+
+
+ 
<div class="pl-2"></div>
+
+
+ +

.pr-2

+
+
+
5px + Right Padding
+
+
+
Default + Padding
+
+
+ 
<div class="pr-2"></div>
+
+
+ +

px-2

+
+
+
5px + Left and Right Padding
+
+
+
Default + Padding
+
+
+ 
<div class="px-2"></div>
+
+
+ +

.pt-4

+
+
+
30px Top Padding
+
+
+
Default Padding
+
+
+ 
<div class="pt-4"></div>
+
+
+

.pb-4

+
+
+
30px Bottom Padding +
+
+
+
Default Padding
+
+
+ 
<div class="pb-4"></div>
+
+
+

.py-4

+
+
+
30px Bottom and Top Padding +
+
+
+
Default Padding
+
+
+ 
<div class="py-4"></div>
+
+
+

.brdr-lft

+
+
+
Left Border Only
+
+
+ 
<div class="brdr-lft"></div>
+
+
+

.brdr-rght

+
+
+
Right Border Only
+
+
+ 
<div class="brdr-rght"></div>
+
+
+

.brdr-tp

+
+
+
Top Border Only
+
+
+ 
<div class="brdr-tp"></div>
+
+
+ +

.brdr-bttm

+
+
+
Bottom Border Only
+
+
+ 
<div class="brdr-bttm"></div>
+
+
+ +

.brdr-0

+
+
+
Well With No Borders
+
+
+ 
<div class="brdr-0 well"></div>
+
+
+
+
+
Well With Borders
+
+
+ 
<div class="well"></div>
+
+
+

.brdr-rds-0

+
+
+
Well With No Border Radius
+
+
+ 
<div class="brdr-rds-0 well"></div>
+
+
+
+
+
Well With Border Radius
+
+
+ 
<div class="well"></div>
+
+
\ No newline at end of file diff --git a/common/spacing-borders/spacing-borders-fr.html b/common/spacing-borders/spacing-borders-fr.html new file mode 100644 index 0000000000..ea34dcf290 --- /dev/null +++ b/common/spacing-borders/spacing-borders-fr.html @@ -0,0 +1,334 @@ +--- +{ +"title": "Espacement et bordures", +"language":"en", +"altLangPage":"spacing-borders-en.html", +"breadcrumbs": +[ +{ +"title": "GCWeb home", +"link": "https://wet-boew.github.io/themes-dist/GCWeb/index-en.html" +} +], +"secondlevel": false, +"dateModified": "2024-03-05", +"share": "true" +} +--- +

.margin-bottom-none

+
+
+
Aucune marge en bas
+
+
+
Marge de 20 pixels en bas
+
+
+ 
<div class="margin-bottom-none"></div>
+<div style="margin-bottom: 20px"></div>
+
+
+ +

.margin-bottom-small

+
+
+
Petite marge en bas
+
+
+
Marge en bas par défaut
+
+
+ 
<div class="margin-bottom-small"></div>
+
+
+

.margin-top-large

+
+
+
Grande marge en haut
+
+
+
Marge en haut par défaut
+
+
+ 
<div class="margin-top-large"></div>
+
+
+ +

.margin-top-medium

+
+
+
Marge moyenne en haut
+
+
+
Marge en haut par défaut
+
+
+ 
<div class="margin-top-medium"></div>
+
+
+ +

.mb-sm-5

+
+
+
Marge en bas de 50
+
+
+
Aucune marge en bas
+
+
+ 
<div class="mb-sm-5"></div>
+
+
+ +
+

.mrgn-*-*

+
+
+
+
Marge à gauche de 0
+
Marge à gauche petite (5px)
+
Marge à gauche moyenne (15px)
+
Marge à gauche grande (30px)
+
Marge à gauche très grande (50px)
+
+
+ 
<div class="mrgn-lft-0"></div>
+<div class="mrgn-lft-sm"></div>
+<div class="mrgn-lft-md"></div>
+<div class="mrgn-lft-lg"></div>
+<div class="mrgn-lft-xl"></div>
+
+
+
+
+
Marge à droite de 0
+
Marge à droite petite (5px)
+
Marge à droite moyenne (15px)
+
Marge à droite grande (30px)
+
Marge à droite très grande (50px)
+
+
+ 
<div class="mrgn-rght-0"></div>
+<div class="mrgn-rght-sm"></div>
+<div class="mrgn-rght-md"></div>
+<div class="mrgn-rght-lg"></div>
+<div class="mrgn-rght-xl"></div>
+
+
+
+
+
Marge en bas de 0
+
Marge en bas petite (5px)
+
Marge en bas moyenne (15px)
+
Marge en bas grande (30px)
+
Marge en bas très grande (50px)
+
+
+ 
<div class="mrgn-bttm-0"></div>
+<div class="mrgn-bttm-sm"></div>
+<div class="mrgn-bttm-md"></div>
+<div class="mrgn-bttm-lg"></div>
+<div class="mrgn-bttm-xl"></div>
+
+
+
+
+
Marge en haut de 0
+
Marge en haut petite (5px)
+
Marge en haut moyenne (15px)
+
Marge en haut grande (30px)
+
Marge en haut très grande (50px)
+
+
+ 
<div class="mrgn-tp-0"></div>
+<div class="mrgn-tp-sm"></div>
+<div class="mrgn-tp-md"></div>
+<div class="mrgn-tp-lg"></div>
+<div class="mrgn-tp-xl"></div>
+
+
+
+
+ +
+

Démonstration de l'effet .mt-auto

+
+
Élément du haut : C'est un élément flex standard qui + restera à sa position naturelle, qui est en haut du conteneur flex. +
+
Élément du bas avec .mt-auto : + En appliquant .mt-auto, cet élément prend tout l'espace disponible en haut, se poussant efficacement + vers le bas du conteneur flex. +
+
+
+ + +

.p-0

+
+
+
Aucun remplissage
+
+
+
Remplissage par défaut
+
+
+ 
<div class="p-0"></div>
+
+
+ +

.pl-2

+
+
+
Remplissage gauche de + 5px
+
+
+
Remplissage par défaut
+
+
+ 
<div class="pl-2"></div>
+
+
+ +

.pr-2

+
+
+
+ Remplissage droit de 5px
+
+
+
+ Remplissage par défaut
+
+
+ 
<div class="pr-2"></div>
+
+
+ +

.px-2

+
+
+
+ Remplissage droit et gauche de 5px
+
+
+
+ Remplissage par défaut
+
+
+ 
<div class="px-2"></div>
+
+
+

.pt-4

+
+
+
Remplissage haut de + 30px
+
+
+
Remplissage par défaut
+
+
+ 
<div class="pt-4"></div>
+
+
+

.pb-4

+
+
+
Remplissage bas de 30px +
+
+
+
Remplissage par défaut
+
+
+ 
<div class="pb-4"></div>
+
+
+

.py-4

+
+
+
Remplissage bas et haut de 30px +
+
+
+
Remplissage par défaut
+
+
+ 
<div class="py-4"></div>
+
+
+

.brdr-lft

+
+
+
Bordure gauche seulement
+
+
+ 
<div class="brdr-lft"></div>
+
+
+

.brdr-rght

+
+
+
Bordure droite seulement
+
+
+ 
<div class="brdr-rght"></div>
+
+
+

.brdr-tp

+
+
+
Bordure en haut seulement
+
+
+ 
<div class="brdr-tp"></div>
+
+
+ +

.brdr-bttm

+
+
+
Bordure en bas seulement
+
+
+ 
<div class="brdr-bttm"></div>
+
+
+ +

.brdr-0

+
+
+
Well sans bordures
+
+
+ 
<div class="brdr-0 well"></div>
+
+
+
+
+
Well avec bordures
+
+
+ 
<div class="well"></div>
+
+
+

.brdr-rds-0

+
+
+
Well sans rayon de bordure
+
+
+ 
<div class="brdr-rds-0 well"></div>
+
+
+
+
+
Well avec rayon de bordure
+
+
+ 
<div class="well"></div>
+
+