-
Notifications
You must be signed in to change notification settings - Fork 126
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 530cddb
Showing
3 changed files
with
676 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,320 @@ | ||
| --- | ||
| { | ||
| "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 class="margin-bottom-small margin-bottom-none">20 pixel bottom Margin</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="margin-bottom-none"></div> | ||
| <div class="margin-bottom-small margin-bottom-none"></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 class="mrgn-lft-0 bg-info ">Left margin 0</div> | ||
| <div class="mrgn-lft-sm bg-info ">Left margin small (5px)</div> | ||
| <div class="mrgn-lft-md bg-info ">Left margin medium (15px)</div> | ||
| <div class="mrgn-lft-lg bg-info ">Left margin large (30px)</div> | ||
| <div class="mrgn-lft-xl bg-info ">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 class="mrgn-rght-0 bg-info ">Right margin 0</div> | ||
| <div class="mrgn-rght-sm bg-info ">Right margin small (5px)</div> | ||
| <div class="mrgn-rght-md bg-info ">Right margin medium (15px)</div> | ||
| <div class="mrgn-rght-lg bg-info ">Right margin large (30px)</div> | ||
| <div class="mrgn-rght-xl bg-info ">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 class="mrgn-bttm-0 bg-info ">Bottom margin 0</div> | ||
| <div class="mrgn-bttm-sm bg-info ">Bottom margin small (5px)</div> | ||
| <div class="mrgn-bttm-md bg-info ">Bottom margin medium (15px)</div> | ||
| <div class="mrgn-bttm-lg bg-info ">Bottom margin large (30px)</div> | ||
| <div class="mrgn-bttm-xl bg-info ">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 class="mrgn-tp-0 bg-info ">Top margin 0</div> | ||
| <div class="mrgn-tp-sm bg-info ">Top margin small (5px)</div> | ||
| <div class="mrgn-tp-md bg-info ">Top margin medium (15px)</div> | ||
| <div class="mrgn-tp-lg bg-info ">Top margin large (30px)</div> | ||
| <div class="mrgn-tp-xl bg-info ">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"> | ||
| <div class="bg-info">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 bg-info ">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 class="p-0 bg-info brdr-lft brdr-rght brdr-tp brdr-bttm">No Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <div class="bg-info 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 class="pl-2 bg-info brdr-lft brdr-rght brdr-tp brdr-bttm">5px Left Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <div class="bg-info brdr-lft brdr-rght brdr-tp brdr-bttm">Default Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="pl-2"></div></code></pre> | ||
| </div> | ||
| </div> | ||
| <h2><code>.pr-2</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div class="pr-2 text-right bg-info brdr-lft brdr-rght brdr-tp brdr-bttm">5px | ||
| Right Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <div class="text-right bg-info brdr-lft brdr-rght brdr-tp brdr-bttm">Default | ||
| Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="pr-2"></div></code></pre> | ||
| </div> | ||
| </div> | ||
| <h2><code>.px-2</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div class="px-2 bg-info brdr-lft brdr-rght brdr-tp brdr-bttm">5px | ||
| Left and Right Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <div class="bg-info brdr-lft brdr-rght brdr-tp brdr-bttm">Default | ||
| Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="px-2"></div></code></pre> | ||
| </div> | ||
| </div> | ||
| <h2><code>.pt-4</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div class="pt-4 bg-info brdr-lft brdr-rght brdr-tp brdr-bttm">30px Top Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <div class="bg-info brdr-lft brdr-rght brdr-tp brdr-bttm">Default Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="pt-4"></div></code></pre> | ||
| </div> | ||
| </div> | ||
| <h2><code>.pb-4</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div class="pb-4 bg-info brdr-lft brdr-rght brdr-tp brdr-bttm">30px Bottom Padding | ||
| </div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <div class="bg-info brdr-lft brdr-rght brdr-tp brdr-bttm">Default Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="pb-4"></div></code></pre> | ||
| </div> | ||
| </div> | ||
| <h2><code>.py-4</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div class="py-4 bg-info brdr-lft brdr-rght brdr-tp brdr-bttm">30px Bottom and Top Padding | ||
| </div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <div class="bg-info brdr-lft brdr-rght brdr-tp brdr-bttm">Default Padding</div> | ||
| </div> | ||
| <div class="col-md-4"> | ||
| <pre><code><div class="py-4"></div></code></pre> | ||
| </div> | ||
| </div> | ||
| <h2><code>.brdr-lft</code></h2> | ||
| <div class="row"> | ||
| <div class="col-md-4"> | ||
| <div class="brdr-lft">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">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">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">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 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 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 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.