Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WCAG upgrade -- add example for alignment #2176

Merged
merged 1 commit into from
Aug 30, 2023
Merged

WCAG upgrade -- add example for alignment #2176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 98 additions & 0 deletions common/alignment/alignment-en.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
---
{
"title": "GCWeb Alignment example",
"language": "en",
"altLangPage": "alignment-fr.html",
"dateModified": "2023-06-19"
}
---
<div class="wb-prettify all-pre"></div>

<h2>Horizontal Alignment</h2>
<h3> Left aligned <code>text-left</code></h3>
<div class="text-right">
<p class="text-left">Use to align text to the left.</p>
<p>Text right aligned.</p>
</div>
<h4>Code</h4>
<pre><code>&lt;p class="<strong>text-left</strong>"&gt;Use to align text to the left.&lt;/p&gt;</code></pre>

<h3> Right aligned <code>text-right</code></h3>
<p class="text-right">Use to align text to the right.</p>
<h4>Code</h4>
<pre><code>&lt;p class="<strong>text-right</strong>"&gt;Use to align text to the right.&lt;/p&gt;</code></pre>

duboisp marked this conversation as resolved.
Show resolved Hide resolved
<h3> Center <code>text-center</code></h3>
<p class="text-center">Use to align text to the center.</p>
<h4>Code</h4>
<pre><code>&lt;p class="<strong>text-center</strong>"&gt;Use to align text to the center.&lt;/p&gt;</code></pre>

<h3> Center content blocks <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>&lt;img <strong>class=&quot;center-block&quot;</strong> alt=&quot;...&quot; src=&quot;x.jpg&quot; /&gt;</code></pre>

<h3> Left aligned from small view <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>&lt;p class="text-right <strong>text-sm-left</strong>"&gt;Left-aligned in small view and over&lt;/p&gt;</code></pre>

<h3> Right aligned from small view <code>text-sm-right</code></h3>
<p class="text-sm-right">Right-aligned in small view and over</p>
<h4>Code</h4>
<pre><code>&lt;p class="<strong>text-sm-right</strong>"&gt;Right-aligned in small view and over&lt;/p&gt;</code></pre>

<h2> Vertical alignment </h2>
<table>
<thead>
<tr>
<th>Class</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<th>Top (<code>align-top</code>)
<div class="mrgn-bttm-xl"></div></th>
<td class="align-top"><p class="mrgn-tp-0 mrgn-bttm-0">Resulting text, top vertical alignment</p></td>
</tr>
<tr>
<th>Middle (<code>align-middle</code>)
<div class="mrgn-bttm-xl"></div></th>
<td class="align-middle"><p class="mrgn-tp-0 mrgn-bttm-0">Resulting text, middle vertical alignment</p></td>
</tr>
<tr>
<th>Bottom (<code>align-bottom</code>)
<div class="mrgn-bttm-xl"></div></th>
<td class="align-bottom"><p class="mrgn-tp-0 mrgn-bttm-0">Resulting text, middle vertical alignment</p></td>
</tr>
</tbody>
</table>
<h3>Code</h3>
<pre><code>&lt;table&gt;
&lt;tr&gt;
&lt;td&gt; ... &lt;/td&gt;
&lt;td class="<strong> align-top </strong>"&gt;&lt;p class="mrgn-tp-0 mrgn-bttm-0"&gt; ... &lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; ... &lt;/td&gt;
&lt;td class="<strong> align-middle </strong>"&gt;&lt;p class="mrgn-tp-0 mrgn-bttm-0"&gt; ... &lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; ... &lt;/td&gt;
&lt;td class="<strong> align-bottom </strong>"&gt;&lt;p class="mrgn-tp-0 mrgn-bttm-0"&gt; ... &lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</code></pre>

<h2>Items Alignment (Grid)</h2>
<p>The following CSS classes are used in conjunction with flex grids. Examples of these are with the example of the flex grid. (link to come)</p>
<ul>
<li><code>align-self-center</code></li>
<li><code>align-self-end</code></li>
<li><code>align-items-center</code></li>
<li><code>align-items-sm-center</code></li>
</ul>
98 changes: 98 additions & 0 deletions common/alignment/alignment-fr.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
---
{
"title": "Alignement",
"language": "fr",
"altLangPage": "alignment-en.html",
"dateModified": "2023-06-19"
}
---
<div class="wb-prettify all-pre"></div>
<h2>Alignement horizontal</h2>

<h3>Aligné à gauche (<code>text-left</code>)</h3>
<div class="text-right">
<p class="text-left">Texte aligné à gauche.</p>
<p>Texte aligné à droite</p>
</div>
<h4>Code</h4>
<pre><code>&lt;p class="<strong>text-left</strong>"&gt;Texte aligné à gauche.&lt;/p&gt;</code></pre>

<h3>Aligné à droite (<code>text-right</code>)</h3>
<p class="text-right">Texte aligné à droite.</p>
<h4>Code</h4>
<pre><code>&lt;p class="<strong>text-right</strong>"&gt;Texte aligné à droite.&lt;/p&gt;</code></pre>

<h3>Centré (<code>text-center</code>)</h3>
<p class="text-center">Texte aligné au centre.</p>
<h4>Code</h4>
<pre><code>&lt;p class="<strong>text-center</strong>"&gt;Texte aligné au centre.&lt;/p&gt;</code></pre>

<h3>Centrer des blocs de contenu (<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="Une image de paramètre fictif carré dont les coins sont arrondis">
</div>
</div>
<h4>Code</h4>
<pre><code>&lt;img <strong>class=&quot;center-block&quot;</strong> alt=&quot;...&quot; src=&quot;x.jpg&quot; /&gt;</code></pre>

<h3>Aligné à gauche à partir de la petite vue<code>text-sm-left</code></h3>
<p class="text-right text-sm-left">Aligné vers la gauche dans la petite vue et plus</p>
<h4>Code</h4>
<pre><code>&lt;p class="text-right <strong>text-sm-left</strong>"&gt;Aligné vers la gauche dans la petite vue et plus&lt;/p&gt;</code></pre>

<h3>Aligné à droite à partir de la petite vue<code>text-sm-right</code></h3>
<p class="text-sm-right">Aligné vers la droite dans la petite vue et plus</p>
<h4>Code</h4>
<pre><code>&lt;p class="<strong>text-sm-right</strong>"&gt;Aligné vers la droite dans la petite vue et plus&lt;/p&gt;</code></pre>

<h2>Alignement vertical</h2>
<table>
<thead>
<tr>
<th>Classe CSS</th>
<th>Exemple</th>
</tr>
</thead>
<tbody>
<tr>
<th>Haut (<code>align-top</code>)
<div class="mrgn-bttm-xl"></div></th>
<td class="align-top"><p class="mrgn-tp-0 mrgn-bttm-0">Texte aligné en haut</p></td>
</tr>
<tr>
<th>Milieu (<code>align-middle</code>)
<div class="mrgn-bttm-xl"></div></th>
<td class="align-middle"><p class="mrgn-tp-0 mrgn-bttm-0">Texte aligné au milieu</p></td>
</tr>
<tr>
<th>Bas (<code>align-bottom</code>)
<div class="mrgn-bttm-xl"></div></th>
<td class="align-bottom"><p class="mrgn-tp-0 mrgn-bttm-0">Texte aligné en bas</p></td>
</tr>
</tbody>
</table>
<h3>Code</h3>
<pre><code>&lt;table&gt;
&lt;tr&gt;
&lt;td&gt; ... &lt;/td&gt;
&lt;td class="<strong> align-top </strong>"&gt;&lt;p class="mrgn-tp-0 mrgn-bttm-0"&gt; ... &lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; ... &lt;/td&gt;
&lt;td class="<strong> align-middle </strong>"&gt;&lt;p class="mrgn-tp-0 mrgn-bttm-0"&gt; ... &lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt; ... &lt;/td&gt;
&lt;td class="<strong> align-bottom </strong>"&gt;&lt;p class="mrgn-tp-0 mrgn-bttm-0"&gt; ... &lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</code></pre>

<h2>Alignement des items (Grille)</h2>
<p>Les classes CSS suivantes sont utilisé conjointement avec les grilles flex. Les examples de ces derniers sont avec l'exemple de la grille flex. (lien à venir)</p>
<ul>
<li><code>align-self-center</code></li>
<li><code>align-self-end</code></li>
<li><code>align-items-center</code></li>
<li><code>align-items-sm-center</code></li>
</ul>
35 changes: 35 additions & 0 deletions common/alignment/index.json-ld
View file
Open in desktop
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": "Alignement"
},
"description": {
"en": "Alignment with custom styles.",
"fr": "Alignement avec des styles personalisés."
},
"modified": "2023-06-19",
"componentName": "alignment",
"processing": "baseline",
"status": "stable",
"pages": {
"examples": [
{
"title": "Alignment",
"language": "en",
"path": "alignment-en.html"
},
{
"title": "Alignement",
"language": "fr",
"path": "alignment-fr.html"
}
]
}
}