diff --git a/common/text-level-modifiers/index.json-ld b/common/text-level-modifiers/index.json-ld new file mode 100644 index 0000000000..728d15fe32 --- /dev/null +++ b/common/text-level-modifiers/index.json-ld @@ -0,0 +1,34 @@ +{ + "@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": "Text-level Modifiers", + "fr": "Modificateurs de niveau de texte" + }, + "description": { + "en": "Text-level modifiers for styling and formatting", + "fr": "Modificateurs de niveau de texte pour le style et le formatage" + }, + "modified": "2023-07-20", + "componentName": "text-level-modifiers", + "status": "stable", + "pages": { + "docs": [ + { + "title": "Text-level Modifiers", + "language": "en", + "path": "text-level-modifiers-en.html" + }, + { + "title": "Modificateurs de niveau de texte", + "language": "fr", + "path": "text-level-modifiers-fr.html" + } + ] + } +} diff --git a/common/text-level-modifiers/text-level-modifiers-en.html b/common/text-level-modifiers/text-level-modifiers-en.html new file mode 100644 index 0000000000..2c02c19dd3 --- /dev/null +++ b/common/text-level-modifiers/text-level-modifiers-en.html @@ -0,0 +1,184 @@ +--- +{ + "title": "Speeding Up GCweb Development", + "language":"en", + "altLangPage":"speeding-up-gc-web-dev-fr.html", + "breadcrumbs": + [ + { + "title": "GCWeb home", + "link": "https://wet-boew.github.io/themes-dist/GCWeb/index-en.html" + } + ], + "secondlevel": false, + "dateModified": "2023-07-20", + "share": "true" +} +--- + +

In the realm of GCweb, text-level modifiers play a pivotal role in shaping the visual and + functional aspects of website text.They enable web developers to fine-tune text attributes such as size, color, weight, and + style, ensuring that the textual content is not only aesthetically pleasing but also accessible and easy to read.

+

Overview

+
+
.stretched-link
+
Works in conjunction with position-relative to set a link's clickable area
+
.small
+
Decreases the font size of the element
+
.mark
+
Highlights the text
+
.lead
+
Increases the font size and line height
+
.text-*
+
Changes the color, alignment, or case of the text
+
.no-wrap
+
Prevents the text from wrapping
+
.fnt-nrml
+
Resets the font size to the default
+
+
+
+

.stretched-link

+
Used to make an entire containing block clickable, effectively "stretching" a hyperlink over the entire block. + Make sure the element that you want to be clickable is positioned. This can be done by setting its CSS position to relative.
+ + Stretched link + 
<div class="positon-relative"><a class="stretched-link" href="">Stretched link</a></div>
+
+
+

.small

+
Decreases the font size of the element.
+

+ Example small text +

+ 
<p class="small">...</p>
+
+
+

.mark

+
Highlights the text
+

+ Example highlighted text +

+ 
<p class="mark">...</p>
+
+
+

.lead

+
Increases the font size and line height
+

+ Example lead text +

+ 
<p class="lead">...</p>
+
+
+

.text-*

+
Can be used to align text, change its case, or change its color.
+

Color examples:

+
+

+ Primary text color +

+ 
<p class="text-primary">...</p>
+
+
+

+ Success text color +

+ 
<p class="text-success">...</p>
+
+
+

+ Info text color +

+ 
<p class="text-info">...</p>
+
+
+

+ Warning text color +

+ 
<p class="text-warning">...</p>
+
+
+

+ Danger text color +

+ 
<p class="text-danger">...</p>
+
+
+

+ Muted text color +

+ 
<p class="text-muted">...</p>
+
+

Alignment examples:

+
+

+ Aligned left +

+ 
<p class="text-left">...</p>
+
+
+

+ Aligned right +

+ 
<p class="text-right">...</p>
+
+
+

+ Aligned center +

+ 
<p class="text-center">...</p>
+
+
+

+ Justified text +

+ 
<p class="text-justify">...</p>
+
+
+

+ No-wrap text: xxxxxxxxxxxxxxxxxxxxxxx +

+ 
<p class="text-danger">...</p>
+
+ +

Transformation examples:

+
+

+ LOWERCASE TEXT +

+ 
<p class="text-lowercase">LOWERCASE TEXT</p>
+
+
+

+ uppercase text +

+ 
<p class="text-uppercase">uppercase text</p>
+
+
+

+ capitalized text +

+ 
<p class="text-capitalize">capitalized text</p>
+
+
+
+

.no-wrap

+
Prevents the text from wrapping
+

+ Example no wrap: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx +

+ 
<p class="no-wrap">...</p>
+
+
+

.fnt-nrml

+
Resets the font size to the default
+

Example 1: Default font style

+

Example 2: Normal font style

+

Example 3: Normal font style

+

Example 4: Normal font style

+ 
<p>Example 1: Default font style</p>
+ 
<p class="fnt-nrml">Example 2: Normal font style</p>
+ 
<p class="fnt-nrml"><strong>Example 3: <em class="fnt-nrml">Normal font style</em></strong></p>
+ 
<p class="fnt-nrml"><em>Example 4: <strong class="fnt-nrml">Normal font style</strong></em></p>
+
+
diff --git a/common/text-level-modifiers/text-level-modifiers-fr.html b/common/text-level-modifiers/text-level-modifiers-fr.html new file mode 100644 index 0000000000..a08afc5826 --- /dev/null +++ b/common/text-level-modifiers/text-level-modifiers-fr.html @@ -0,0 +1,84 @@ +--- +{ + "title": "Modificateurs de niveau de texte", + "language": "fr", + "altLangPage": "text-level-modifiers-en.html", + "breadcrumbs": + [ + { + "title": "Accueil GCWeb", + "link": "https://wet-boew.github.io/themes-dist/GCWeb/index-fr.html" + } + ], + "secondlevel": false, + "dateModified": "2023-07-20", + "share": "true" +} +--- + +

Classe CSS

+
+
.stretched-link
+
Fonctionne en conjonction avec position-relative pour sa limite d'étirement
+
.small
+
Diminue la taille de la police de l'élément
+
mark
+
Met en évidence le texte
+
.lead
+
Augmente la taille de la police et la hauteur de ligne
+
[class*=text-]
+
Change la couleur du texte
+
.no-wrap
+
Empêche le texte de s'enrouler
+
.fnt-nrml
+
Réinitialise la taille de la police à la valeur par défaut
+
+
+
+
+
+

Apparence

+

+ Exemple 1: Lien étiré +

+

+ Exemple 2: Texte petit +

+

+ Exemple 3: Texte en évidence +

+

+ Exemple 4: Texte principal +

+

+ Exemple 5: Couleur du texte primaire +

+

+ Exemple 6: Pas d'enroulement +

+

+ Exemple 7: Taille de police normale +

+
+
+
+
+

Code

+ 
// Exemple 1:
+					<p class="stretched-link">...</p>
+ 
// Exemple 2:
+					<p class="small">...</p>
+ 
// Exemple 3:
+					<p class="mark">...</p>
+ 
// Exemple 4:
+					<p class="lead">...</p>
+ 
// Exemple 5:
+					<p class="text-primary">...</p>
+ 
// Exemple 6:
+					<p class="no-wrap">...</p>
+ 
// Exemple 7:
+					<p class="fnt-nrml">...</p>
+
+
+
+