diff --git a/common/alignment/alignment-en.html b/common/alignment/alignment-en.html new file mode 100644 index 000000000..d4d3d6867 --- /dev/null +++ b/common/alignment/alignment-en.html @@ -0,0 +1,98 @@ +--- +{ + "title": "GCWeb Alignment example", + "language": "en", + "altLangPage": "alignment-fr.html", + "dateModified": "2023-06-19" +} +--- +
+ +

Horizontal Alignment

+

Left aligned text-left

+
+

Use to align text to the left.

+

Text right aligned.

+
+

Code

+
<p class="text-left">Use to align text to the left.</p>
+ +

Right aligned text-right

+

Use to align text to the right.

+

Code

+
<p class="text-right">Use to align text to the right.</p>
+ +

Center text-center

+

Use to align text to the center.

+

Code

+
<p class="text-center">Use to align text to the center.</p>
+ +

Center content blocks center-block

+
+
+ A generic square placeholder image with rounded corners +
+
+

Code

+
<img class="center-block" alt="..." src="x.jpg" />
+ +

Left aligned from small view text-sm-left

+

Left-aligned in small view and over

+

Code

+
<p class="text-right text-sm-left">Left-aligned in small view and over</p>
+ +

Right aligned from small view text-sm-right

+

Right-aligned in small view and over

+

Code

+
<p class="text-sm-right">Right-aligned in small view and over</p>
+ +

Vertical alignment

+ + + + + + + + + + + + + + + + + + + + + +
ClassExample
Top (align-top) +

Resulting text, top vertical alignment

Middle (align-middle) +

Resulting text, middle vertical alignment

Bottom (align-bottom) +

Resulting text, middle vertical alignment

+

Code

+
<table>
+	<tr>
+		<td> ... </td>
+		<td class=" align-top "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
+	</tr>
+	<tr>
+		<td> ... </td>
+		<td class=" align-middle "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
+	</tr>
+	<tr>
+		<td> ... </td>
+		<td class=" align-bottom "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
+	</tr>
+</table>
+ +

Items Alignment (Grid)

+

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)

+ diff --git a/common/alignment/alignment-fr.html b/common/alignment/alignment-fr.html new file mode 100644 index 000000000..fd92aa5a7 --- /dev/null +++ b/common/alignment/alignment-fr.html @@ -0,0 +1,98 @@ +--- +{ + "title": "Alignement", + "language": "fr", + "altLangPage": "alignment-en.html", + "dateModified": "2023-06-19" +} +--- +
+

Alignement horizontal

+ +

Aligné à gauche (text-left)

+
+

Texte aligné à gauche.

+

Texte aligné à droite

+
+

Code

+
<p class="text-left">Texte aligné à gauche.</p>
+ +

Aligné à droite (text-right)

+

Texte aligné à droite.

+

Code

+
<p class="text-right">Texte aligné à droite.</p>
+ +

Centré (text-center)

+

Texte aligné au centre.

+

Code

+
<p class="text-center">Texte aligné au centre.</p>
+ +

Centrer des blocs de contenu (center-block)

+
+
+ Une image de paramètre fictif carré dont les coins sont arrondis +
+
+

Code

+
<img class="center-block" alt="..." src="x.jpg" />
+ +

Aligné à gauche à partir de la petite vuetext-sm-left

+

Aligné vers la gauche dans la petite vue et plus

+

Code

+
<p class="text-right text-sm-left">Aligné vers la gauche dans la petite vue et plus</p>
+ +

Aligné à droite à partir de la petite vuetext-sm-right

+

Aligné vers la droite dans la petite vue et plus

+

Code

+
<p class="text-sm-right">Aligné vers la droite dans la petite vue et plus</p>
+ +

Alignement vertical

+ + + + + + + + + + + + + + + + + + + + + +
Classe CSSExemple
Haut (align-top) +

Texte aligné en haut

Milieu (align-middle) +

Texte aligné au milieu

Bas (align-bottom) +

Texte aligné en bas

+

Code

+
<table>
+	<tr>
+		<td> ... </td>
+		<td class=" align-top "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
+	</tr>
+	<tr>
+		<td> ... </td>
+		<td class=" align-middle "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
+	</tr>
+	<tr>
+		<td> ... </td>
+		<td class=" align-bottom "><p class="mrgn-tp-0 mrgn-bttm-0"> ... </p></td>
+	</tr>
+</table>
+ +

Alignement des items (Grille)

+

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)

+ diff --git a/common/alignment/index.json-ld b/common/alignment/index.json-ld new file mode 100644 index 000000000..c6b30bfba --- /dev/null +++ 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" + } + ] + } +}