Skip to content

Commit

Permalink
Content - Merge pull request #2176 from shiva-sc/alignment
Browse files Browse the repository at this point in the history
WCAG upgrade -- add example for alignment

Content - Alignment - Add working example
  • Loading branch information
duboisp authored Aug 30, 2023
2 parents 7aa7707 + c69b9b8 commit 34e8b69
Show file tree
Hide file tree
Showing 3 changed files with 231 additions and 0 deletions.
98 changes: 98 additions & 0 deletions common/alignment/alignment-en.html
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>

<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
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
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"
}
]
}
}

0 comments on commit 34e8b69

Please sign in to comment.