WCAG upgrade -- add example for alignment

wet-boew · Aug 25, 2023 · 3ba35a6 · 3ba35a6
1 parent 2d7d8f2
commit 3ba35a6
Show file tree

Hide file tree

Showing 3 changed files with 231 additions and 0 deletions.
diff --git a/common/alignment/alignment-en.html b/common/alignment/alignment-en.html
@@ -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="margin-top-none margin-bottom-none"&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="margin-top-none margin-bottom-none"&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="margin-top-none margin-bottom-none"&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>
diff --git a/common/alignment/alignment-fr.html b/common/alignment/alignment-fr.html
@@ -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="margin-top-none margin-bottom-none">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="margin-top-none margin-bottom-none">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="margin-top-none margin-bottom-none">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="margin-top-none margin-bottom-none"&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="margin-top-none margin-bottom-none"&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="margin-top-none margin-bottom-none"&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>
diff --git a/common/alignment/index.json-ld b/common/alignment/index.json-ld
@@ -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"
+			}
+		]
+	}
+}