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..70c466ab41 --- /dev/null +++ b/common/text-level-modifiers/text-level-modifiers-en.html @@ -0,0 +1,147 @@ +--- +{ + "title": "Text-Level Modifiers", + "language":"en", + "altLangPage":"text-level-modifiers-fr.html", + "breadcrumbs": + [ + { + "title": "GCWeb home", + "link": "https://wet-boew.github.io/themes-dist/GCWeb/index-en.html" + } + ], + "secondlevel": false, + "dateModified": "2024-03-06", + "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 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 or change its case.
+

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..87f50b70aa --- /dev/null +++ b/common/text-level-modifiers/text-level-modifiers-fr.html @@ -0,0 +1,158 @@ +--- +{ +"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": "2024-03-06", +"share": "true" +} + +

Dans le domaine de GCWeb, les modificateurs de niveau de texte jouent un rôle crucial dans la formation des aspects + visuels et + fonctionnels du texte des sites web. Ils permettent aux développeurs web d'ajuster finement les attributs du texte + tels que la taille, la couleur, le poids et + le style, assurant que le contenu textuel est non seulement esthétiquement agréable mais également accessible et + facile à lire.

+

Aperçu

+
+
.stretched-link
+
Utilisé en conjonction avec position-relative pour définir la zone cliquable d'un lien
+
.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 l'interligne
+
.text-*
+
Modifie l'alignement ou la casse du texte
+
.no-wrap
+
Empêche le texte de passer à la ligne
+
.fnt-nrml
+
Réinitialise la taille de la police par défaut
+
+
+
+

.stretched-link

+
Utilisé pour rendre un bloc contenant entièrement cliquable, étendant efficacement un hyperlien sur tout le + bloc. + Assurez-vous que l'élément que vous souhaitez rendre cliquable est positionné. Cela peut être réalisé en + définissant sa position CSS sur relative.
+ Lien étendu + 
<div class="position-relative"><a class="stretched-link" href="">Lien étendu</a></div>
+
+
+

.small

+
Diminue la taille de la police de l'élément.
+

+ Exemple de texte petit +

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

.mark

+
Met en évidence le texte
+

+ Exemple de texte surligné +

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

.lead

+
Augmente la taille de la police et l'interligne
+

+ Exemple de texte principal +

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

.text-*

+
Peut être utilisé pour aligner le texte ou changer sa casse.
+

Exemples d'alignement :

+
+

+ Aligné à gauche +

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

+ Aligné à droite +

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

+ Centré +

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

+ Texte justifié +

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

+ Texte sans retour à la ligne : xxxxxxxxxxxxxxxxxxxxxxx +

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

Exemples de transformation :

+
+

+ TEXTE EN MINUSCULES +

+ 
<p class="text-lowercase">TEXTE EN MINUSCULES</p>
+
+
+

+ texte en majuscules +

+ 
<p class="text-uppercase">texte en majuscules</p>
+
+
+

+ texte capitalisé +

+ 
<p class="text-capitalize">texte capitalisé</p>
+
+
+
+

.no-wrap

+
Empêche le texte de passer à la ligne
+

+ Exemple sans retour à la ligne : xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx +

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

.fnt-nrml

+
Réinitialise la taille de la police à la valeur par défaut
+

Exemple 1 : Style de police par défaut

+

Exemple 2 : Style de police normal

+

Exemple 3 : Style de police normal

+

Exemple 4 : Style de police normal

+ 
<p>Exemple 1 : Style de police par défaut</p>
+ 
<p class="fnt-nrml">Exemple 2 : Style de police normal</p>
+ 
<p class="fnt-nrml"><strong>Exemple 3 : <em class="fnt-nrml">Style de police normal</em></strong></p>
+ 
<p class="fnt-nrml"><em>Exemple 4 : <strong class="fnt-nrml">Style de police normal</strong></em></p>
+
+