-
Notifications
You must be signed in to change notification settings - Fork 131
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WCAG upgrade -- add example for alignment
- Loading branch information
Showing
3 changed files
with
202 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,82 @@ | ||
| --- | ||
| { | ||
| "title": "GCWeb Alignment example", | ||
| "language": "en", | ||
| "altLangPage": "alignment-fr.html", | ||
| "breadcrumbs": [ | ||
| { "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" } | ||
| ], | ||
| "dateModified": "2023-06-19" | ||
| } | ||
| --- | ||
| <div class="wb-prettify all-pre"></div> | ||
|
|
||
| <h2>Horizontal Alignment</h2> | ||
| <h3><code>text-left</code></h3> | ||
| <p class="text-left">Use to align text to the left.</p> | ||
| <h4>Code</h4> | ||
| <pre><code><p class="<strong>text-left</strong>">Use to align text to the left.</p></code></pre> | ||
|
|
||
| <h3><code>text-right</code></h3> | ||
| <p class="text-right">Use to align text to the right.</p> | ||
| <h4>Code</h4> | ||
| <pre><code><p class="<strong>text-right</strong>">Use to align text to the right.</p></code></pre> | ||
|
|
||
| <h3><code>center-block</code></h3> | ||
| <div class="panel panel-default"> | ||
| <div class="panel-body"> | ||
| <img src="https://placehold.it/140x140" class="img-rounded center-block" alt="A generic square placeholder image with rounded corners"> | ||
| </div> | ||
| </div> | ||
| <h4>Code</h4> | ||
| <pre><code><img <strong>class="center-block"</strong> alt="..." src="x.jpg" /></code></pre> | ||
|
|
||
| <h3><code>text-sm-left</code></h3> | ||
| <p class="text-right text-sm-left">Left-aligned in small view and over</p> | ||
| <h4>Code</h4> | ||
| <pre><code><p class="text-right <strong>text-sm-left</strong>">Left-aligned in small view and over</p></code></pre> | ||
|
|
||
| <h3><code>text-sm-right</code></h3> | ||
| <p class="text-sm-right">Right-aligned in small view and over</p> | ||
| <h4>Code</h4> | ||
| <pre><code><p class="<strong>text-sm-right</strong>">Right-aligned in small view and over</p></code></pre> | ||
|
|
||
| <h2> Vertical alignment </h2> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Class</th> | ||
| <th>Example</th> | ||
| </tr> | ||
| </thead> | ||
| <tr> | ||
| <td><code>align-top</code> | ||
| <p><br /></p></td> | ||
| <td class="align-top"><p class="margin-top-none margin-bottom-none">Resulting text, top vertical alignment</p></td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>align-middle</code> | ||
| <p><br /></p></td> | ||
| <td class="align-middle"><p class="margin-top-none margin-bottom-none">Resulting text, middle vertical alignment</p></td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>align-bottom</code> | ||
| <p><br /></p></td> | ||
| <td class="align-bottom"><p class="margin-top-none margin-bottom-none">Resulting text, middle vertical alignment</p></td> | ||
| </tr> | ||
| </table> | ||
| <h3>Code</h3> | ||
| <pre><code><table> | ||
| <tr> | ||
| <td> ... </td> | ||
| <td class="<strong> align-top </strong>"><p class="margin-top-none margin-bottom-none"> ... </p></td> | ||
| </tr> | ||
| <tr> | ||
| <td> ... </td> | ||
| <td class="<strong> align-middle </strong>"><p class="margin-top-none margin-bottom-none"> ... </p></td> | ||
| </tr> | ||
| <tr> | ||
| <td> ... </td> | ||
| <td class="<strong> align-bottom </strong>"><p class="margin-top-none margin-bottom-none"> ... </p></td> | ||
| </tr> | ||
| </table></code></pre> |
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,85 @@ | ||
| --- | ||
| { | ||
| "title": "GCWeb Alignment example", | ||
| "language": "en", | ||
| "altLangPage": "alignment-en.html", | ||
| "breadcrumbs": [ | ||
| { "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/index-en.html" } | ||
| ], | ||
| "dateModified": "2023-06-19" | ||
| } | ||
| --- | ||
| <div class="wb-prettify all-pre"></div> | ||
| <p>Cette page nécessite une traduction.</p> | ||
|
|
||
| <div lang="en"> | ||
| <h2>Horizontal Alignment</h2> | ||
| <h3><code>text-left</code></h3> | ||
| <p class="text-left">Use to align text to the left.</p> | ||
| <h4>Code</h4> | ||
| <pre><code><p class="<strong>text-left</strong>">Use to align text to the left.</p></code></pre> | ||
|
|
||
| <h3><code>text-right</code></h3> | ||
| <p class="text-right">Use to align text to the right.</p> | ||
| <h4>Code</h4> | ||
| <pre><code><p class="<strong>text-right</strong>">Use to align text to the right.</p></code></pre> | ||
|
|
||
| <h3><code>center-block</code></h3> | ||
| <div class="panel panel-default"> | ||
| <div class="panel-body"> | ||
| <img src="https://placehold.it/140x140" class="img-rounded center-block" alt="A generic square placeholder image with rounded corners"> | ||
| </div> | ||
| </div> | ||
| <h4>Code</h4> | ||
| <pre><code><img <strong>class="center-block"</strong> alt="..." src="x.jpg" /></code></pre> | ||
|
|
||
| <h3><code>text-sm-left</code></h3> | ||
| <p class="text-right text-sm-left">Left-aligned in small view and over</p> | ||
| <h4>Code</h4> | ||
| <pre><code><p class="text-right <strong>text-sm-left</strong>">Left-aligned in small view and over</p></code></pre> | ||
|
|
||
| <h3><code>text-sm-right</code></h3> | ||
| <p class="text-sm-right">Right-aligned in small view and over</p> | ||
| <h4>Code</h4> | ||
| <pre><code><p class="<strong>text-sm-right</strong>">Right-aligned in small view and over</p></code></pre> | ||
|
|
||
| <h2> Vertical alignment </h2> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Class</th> | ||
| <th>Example</th> | ||
| </tr> | ||
| </thead> | ||
| <tr> | ||
| <td><code>align-top</code> | ||
| <p><br /></p></td> | ||
| <td class="align-top"><p class="margin-top-none margin-bottom-none">Resulting text, top vertical alignment</p></td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>align-middle</code> | ||
| <p><br /></p></td> | ||
| <td class="align-middle"><p class="margin-top-none margin-bottom-none">Resulting text, middle vertical alignment</p></td> | ||
| </tr> | ||
| <tr> | ||
| <td><code>align-bottom</code> | ||
| <p><br /></p></td> | ||
| <td class="align-bottom"><p class="margin-top-none margin-bottom-none">Resulting text, middle vertical alignment</p></td> | ||
| </tr> | ||
| </table> | ||
| <h3>Code</h3> | ||
| <pre><code><table> | ||
| <tr> | ||
| <td> ... </td> | ||
| <td class="<strong> align-top </strong>"><p class="margin-top-none margin-bottom-none"> ... </p></td> | ||
| </tr> | ||
| <tr> | ||
| <td> ... </td> | ||
| <td class="<strong> align-middle </strong>"><p class="margin-top-none margin-bottom-none"> ... </p></td> | ||
| </tr> | ||
| <tr> | ||
| <td> ... </td> | ||
| <td class="<strong> align-bottom </strong>"><p class="margin-top-none margin-bottom-none"> ... </p></td> | ||
| </tr> | ||
| </table></code></pre> | ||
| </div> |
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,35 @@ | ||
| { | ||
| "@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": "Alignment", | ||
| "fr": "Alignment" | ||
| }, | ||
| "description": { | ||
| "en": "Alignment with custom styles.", | ||
| "fr": "Alignment avec des styles personalisés." | ||
| }, | ||
| "modified": "2023-06-19", | ||
| "componentName": "position", | ||
| "processing": "baseline", | ||
| "status": "stable", | ||
| "pages": { | ||
| "examples": [ | ||
| { | ||
| "title": "Alignment", | ||
| "language": "en", | ||
| "path": "alignment-en.html" | ||
| }, | ||
| { | ||
| "title": "Alignment", | ||
| "language": "fr", | ||
| "path": "alignment-fr.html" | ||
| } | ||
| ] | ||
| } | ||
| } |