-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Content - Spacing and Borders - Create Example Pages
- Loading branch information
1 parent
630dfe9
commit 97b2ee2
Showing
3 changed files
with
702 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| ] | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| --- | ||
|
|
||
| <h2><code>.margin-bottom-none</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4 brdr-lft brdr-rght brdr-tp brdr-bttm "> | ||
| <div class="margin-bottom-none">No bottom Margin</div> | ||
| </div> | ||
| <div class="col-md-4 brdr-lft brdr-rght brdr-tp brdr-bttm "> | ||
| <div style="margin-bottom: 20px">20 pixel bottom Margin</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="margin-bottom-none"></div> | ||
| <div style="margin-bottom: 20px"></div></code></pre> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h2><code>.margin-bottom-small</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4 brdr-lft brdr-rght brdr-tp brdr-bttm"> | ||
| <div class="margin-bottom-small">Small bottom Margin</div> | ||
| </div> | ||
| <div class="col-md-4 brdr-lft brdr-rght brdr-tp brdr-bttm"> | ||
| <div>Default bottom Margin</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="margin-bottom-small"></div></code></pre> | ||
| </div> | ||
| </div> | ||
| <h2><code>.margin-top-large</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4 brdr-lft brdr-rght brdr-tp brdr-bttm"> | ||
| <div class="margin-top-large">Large top Margin</div> | ||
| </div> | ||
| <div class="col-md-4 brdr-lft brdr-rght brdr-tp brdr-bttm"> | ||
| <div>Default top Margin</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="margin-top-large"></div></code></pre> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h2><code>.margin-top-medium</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4 brdr-lft brdr-rght brdr-tp brdr-bttm"> | ||
| <div class="margin-top-medium">Medium top Margin</div> | ||
| </div> | ||
| <div class="col-md-4 brdr-lft brdr-rght brdr-tp brdr-bttm"> | ||
| <div>Default top Margin</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="margin-top-medium"></div></code></pre> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h2><code>.mb-sm-5</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4 brdr-lft brdr-rght brdr-tp brdr-bttm"> | ||
| <div class="mb-sm-5">Bottom Margin of 50</div> | ||
| </div> | ||
| <div class="col-md-4 brdr-lft brdr-rght brdr-tp brdr-bttm"> | ||
| <div>No bottom Margin</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="mb-sm-5"></div></code></pre> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h2><code>.mrgn-*-*</code></h2> | ||
| <div class="container "> | ||
| <div class="row "> | ||
| <div class="col-sm-6 brdr-lft brdr-rght brdr-tp brdr-bttm"> | ||
| <div style="background-color: #fff6c8" class="mrgn-lft-0">Left margin 0</div> | ||
| <div style="background-color: #fff6c8" class="mrgn-lft-sm">Left margin small (5px)</div> | ||
| <div style="background-color: #fff6c8" class="mrgn-lft-md">Left margin medium (15px)</div> | ||
| <div style="background-color: #fff6c8" class="mrgn-lft-lg">Left margin large (30px)</div> | ||
| <div style="background-color: #fff6c8" class="mrgn-lft-xl">Left margin extra large (50px)</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><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></code></pre> | ||
| </div> | ||
| </div> | ||
| <div class="row "> | ||
| <div class="col-sm-6 brdr-lft brdr-rght brdr-tp brdr-bttm"> | ||
| <div style="background-color: #fff6c8" class="mrgn-rght-0">Right margin 0</div> | ||
| <div style="background-color: #fff6c8" class="mrgn-rght-sm">Right margin small (5px)</div> | ||
| <div style="background-color: #fff6c8" class="mrgn-rght-md">Right margin medium (15px)</div> | ||
| <div style="background-color: #fff6c8" class="mrgn-rght-lg">Right margin large (30px)</div> | ||
| <div style="background-color: #fff6c8" class="mrgn-rght-xl">Right margin extra large (50px)</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><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></code></pre> | ||
| </div> | ||
| </div> | ||
| <div class="row "> | ||
| <div class="col-sm-6 brdr-lft brdr-rght brdr-tp brdr-bttm"> | ||
| <div style="background-color: #fff6c8" class="mrgn-bttm-0">Bottom margin 0</div> | ||
| <div style="background-color: #fff6c8" class="mrgn-bttm-sm">Bottom margin small (5px)</div> | ||
| <div style="background-color: #fff6c8" class="mrgn-bttm-md">Bottom margin medium (15px)</div> | ||
| <div style="background-color: #fff6c8" class="mrgn-bttm-lg">Bottom margin large (30px)</div> | ||
| <div style="background-color: #fff6c8" class="mrgn-bttm-xl">Bottom margin extra large (50px)</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><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></code></pre> | ||
| </div> | ||
| </div> | ||
| <div class="row "> | ||
| <div class="col-sm-6 brdr-lft brdr-rght brdr-tp brdr-bttm"> | ||
| <div style="background-color: #fff6c8" class="mrgn-tp-0">Top margin 0</div> | ||
| <div style="background-color: #fff6c8" class="mrgn-tp-sm">Top margin small (5px)</div> | ||
| <div style="background-color: #fff6c8" class="mrgn-tp-md">Top margin medium (15px)</div> | ||
| <div style="background-color: #fff6c8" class="mrgn-tp-lg">Top margin large (30px)</div> | ||
| <div style="background-color: #fff6c8" class="mrgn-tp-xl">Top margin extra large (50px)</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><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></code></pre> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="container"> | ||
| <h2>Demonstrating <code>.mt-auto</code> Effect</h2> | ||
| <div class="flex-container" | ||
| style="display: flex; flex-direction: column; height: 500px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;"> | ||
| <div style="background-color: lightblue; padding: 10px;">Top Element: This is a standard flex item which | ||
| will stay at its natural position, which is at the top of the flex container. | ||
| </div> | ||
| <div class="mt-auto" style="background-color: lightcoral; padding: 10px;">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. | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <h2><code>.p-0</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div style="background-color: #fff6c8" class="p-0 brdr-lft brdr-rght brdr-tp brdr-bttm">No Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <div style="background-color: #fff6c8" class="brdr-lft brdr-rght brdr-tp brdr-bttm">Default Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="p-0"></div></code></pre> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h2><code>.pl-2</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div style="background-color: #fff6c8" class="pl-2 brdr-lft brdr-rght brdr-tp brdr-bttm">5px Left Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <div style="background-color: #fff6c8" class="brdr-lft brdr-rght brdr-tp brdr-bttm">Default Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="pl-2"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h2><code>.pr-2</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div style="background-color: #fff6c8; text-align: right" class="pr-2 brdr-lft brdr-rght brdr-tp brdr-bttm">5px | ||
| Right Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <div style="background-color: #fff6c8; text-align: right" class="brdr-lft brdr-rght brdr-tp brdr-bttm">Default | ||
| Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="pr-2"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h2><code>px-2</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div style="background-color: #fff6c8; text-align: right" class="pr-2 brdr-lft brdr-rght brdr-tp brdr-bttm">5px | ||
| Left and Right Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <div style="background-color: #fff6c8; text-align: right" class="brdr-lft brdr-rght brdr-tp brdr-bttm">Default | ||
| Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="px-2"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h2><code>.pt-4</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div style="background-color: #fff6c8" class="pt-4 brdr-lft brdr-rght brdr-tp brdr-bttm">30px Top Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <div style="background-color: #fff6c8" class="brdr-lft brdr-rght brdr-tp brdr-bttm">Default Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="pt-4"></div> | ||
| </div> | ||
| </div> | ||
| <h2><code>.pb-4</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div style="background-color: #fff6c8" class="pb-4 brdr-lft brdr-rght brdr-tp brdr-bttm">30px Bottom Padding | ||
| </div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <div style="background-color: #fff6c8" class="brdr-lft brdr-rght brdr-tp brdr-bttm">Default Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="pb-4"></div> | ||
| </div> | ||
| </div> | ||
| <h2><code>.py-4</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div style="background-color: #fff6c8" class="pb-4 brdr-lft brdr-rght brdr-tp brdr-bttm">30px Bottom and Top Padding | ||
| </div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <div style="background-color: #fff6c8" class="brdr-lft brdr-rght brdr-tp brdr-bttm">Default Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="py-4"></div> | ||
| </div> | ||
| </div> | ||
| <h2><code>.brdr-lft</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div class="brdr-lft" style="border-color: #007bff;">Left Border Only</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="brdr-lft"></div></code></pre> | ||
| </div> | ||
| </div> | ||
| <h2><code>.brdr-rght</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div class="brdr-rght" style="border-color: #28a745;">Right Border Only</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="brdr-rght"></div></code></pre> | ||
| </div> | ||
| </div> | ||
| <h2><code>.brdr-tp</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div class="brdr-tp" style="border-color: #dc3545;">Top Border Only</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="brdr-tp"></div></code></pre> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h2><code>.brdr-bttm</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div class="brdr-bttm" style="border-color: #ffc107;">Bottom Border Only</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="brdr-bttm"></div></code></pre> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h2><code>.brdr-0</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div class="brdr-0 well">Well With No Borders</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="brdr-0 well"></div></code></pre> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div style="border-color: #007bff;" class="well">Well With Borders</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="well"></div></code></pre> | ||
| </div> | ||
| </div> | ||
| <h2><code>.brdr-rds-0</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div style="border-color: #007bff;" class="brdr-rds-0 well">Well With No Border Radius</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="brdr-rds-0 well"></div></code></pre> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div style="border-color: #007bff;" class="well">Well With Border Radius</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="well"></div></code></pre> | ||
| </div> | ||
| </div> |
Oops, something went wrong.