-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Content - Text-level Modifiers - Created Example Pages
- Loading branch information
1 parent
36468cf
commit 5b9ff59
Showing
3 changed files
with
339 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| ] | ||
| } | ||
| } |
147 changes: 147 additions & 0 deletions
147
common/text-level-modifiers/text-level-modifiers-en.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| --- | ||
|
|
||
| <p>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.</p> | ||
| <h2>Overview</h2> | ||
| <dl class="dl-horizontal brdr-bttm"> | ||
| <dt><code>.stretched-link</code></dt> | ||
| <dd>Works in conjunction with position-relative to set a link's clickable area</dd> | ||
| <dt><code>.small</code></dt> | ||
| <dd>Decreases the font size of the element</dd> | ||
| <dt><code>.mark</code></dt> | ||
| <dd>Highlights the text</dd> | ||
| <dt><code>.lead</code></dt> | ||
| <dd>Increases the font size and line height</dd> | ||
| <dt><code>.text-*</code></dt> | ||
| <dd>Changes the alignment or case of the text</dd> | ||
| <dt><code>.no-wrap</code></dt> | ||
| <dd>Prevents the text from wrapping</dd> | ||
| <dt><code>.fnt-nrml</code></dt> | ||
| <dd>Resets the font size to the default</dd> | ||
| </dl> | ||
| <div class="row"> | ||
| <div class="position-relative"> | ||
| <h2><code>.stretched-link</code></h2> | ||
| <dd>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.</dd> | ||
|
|
||
| <a class="stretched-link" href="">Stretched link</a> | ||
| <pre><code><div <strong>class="positon-relative"</strong>><a <strong>class="stretched-link" href=""</strong>>Stretched link</a></div></code></pre> | ||
| </div> | ||
| <div> | ||
| <h2><code>.small</code></h2> | ||
| <dd>Decreases the font size of the element.</dd> | ||
| <p class="small"> | ||
| Example small text | ||
| </p> | ||
| <pre><code><p <strong>class="small"</strong>>...</p></code></pre> | ||
| </div> | ||
| <div> | ||
| <h2><code>.mark</code></h2> | ||
| <dd>Highlights the text</dd> | ||
| <p class="mark"> | ||
| Example highlighted text | ||
| </p> | ||
| <pre><code><p <strong>class="mark"</strong>>...</p></code></pre> | ||
| </div> | ||
| <div> | ||
| <h2><code>.lead</code></h2> | ||
| <dd>Increases the font size and line height</dd> | ||
| <p class="lead"> | ||
| Example lead text | ||
| </p> | ||
| <pre><code><p <strong>class="lead"</strong>>...</p></code></pre> | ||
| </div> | ||
| <div> | ||
| <h2><code>.text-*</code></h2> | ||
| <dd>Can be used to align text or change its case.</dd> | ||
| <h2>Alignment examples:</h2> | ||
| <div class="row"> | ||
| <p class="text-left col-sm-6"> | ||
| Aligned left | ||
| </p> | ||
| <pre class="text-left col-sm-6"><code><p <strong>class="text-left"</strong>>...</p></code></pre> | ||
| </div> | ||
| <div class="row"> | ||
| <p class="text-right col-sm-6"> | ||
| Aligned right | ||
| </p> | ||
| <pre class="text-right col-sm-6"><code><p <strong>class="text-right"</strong>>...</p></code></pre> | ||
| </div> | ||
| <div class="row"> | ||
| <p class="text-center col-sm-6"> | ||
| Aligned center | ||
| </p> | ||
| <pre class="text-center col-sm-6"><code><p <strong>class="text-center"</strong>>...</p></code></pre> | ||
| </div> | ||
| <div class="row"> | ||
| <p class="text-justify col-sm-6"> | ||
| Justified text | ||
| </p> | ||
| <pre class="text-justify col-sm-6"><code><p <strong>class="text-justify"</strong>>...</p></code></pre> | ||
| </div> | ||
| <div class="row"> | ||
| <p class="text-nowrap col-sm-6"> | ||
| No-wrap text: xxxxxxxxxxxxxxxxxxxxxxx | ||
| </p> | ||
| <pre class="text-nowrap col-sm-6"><code><p <strong>class="text-danger"</strong>>...</p></code></pre> | ||
| </div> | ||
|
|
||
| <h2>Transformation examples:</h2> | ||
| <div class="row"> | ||
| <p class="text-lowercase col-sm-6"> | ||
| LOWERCASE TEXT | ||
| </p> | ||
| <pre class="col-sm-6"><code><p <strong>class="text-lowercase"</strong>>LOWERCASE TEXT</p></code></pre> | ||
| </div> | ||
| <div class="row"> | ||
| <p class="text-uppercase col-sm-6"> | ||
| uppercase text | ||
| </p> | ||
| <pre class="col-sm-6"><code><p <strong>class="text-uppercase"</strong>>uppercase text</p></code></pre> | ||
| </div> | ||
| <div class="row"> | ||
| <p class="text-capitalize col-sm-6"> | ||
| capitalized text | ||
| </p> | ||
| <pre class="col-sm-6"><code><p <strong>class="text-capitalize"</strong>>capitalized text</p></code></pre> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <h2><code>.no-wrap</code></h2> | ||
| <dd>Prevents the text from wrapping</dd> | ||
| <p class="no-wrap"> | ||
| Example no wrap: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | ||
| </p> | ||
| <pre><code><p <strong>class="no-wrap"</strong>>...</p></code></pre> | ||
| </div> | ||
| <div> | ||
| <h2><code>.fnt-nrml</code></h2> | ||
| <dd>Resets the font size to the default</dd> | ||
| <p>Example 1: Default font style</p> | ||
| <p class="fnt-nrml">Example 2: Normal font style</p> | ||
| <p><strong>Example 3: <em class="fnt-nrml">Normal font style</em></strong></p> | ||
| <p><em>Example 4: <strong class="fnt-nrml">Normal font style</strong></em></p> | ||
| <pre><code><p>Example 1: Default font style</p></code></pre> | ||
| <pre><code><p <strong>class="fnt-nrml"</strong>>Example 2: Normal font style</p></code></pre> | ||
| <pre><code><p <strong>class="fnt-nrml"</strong>><strong>Example 3: <em class="fnt-nrml">Normal font style</em></strong></p></code></pre> | ||
| <pre><code><p <strong>class="fnt-nrml"</strong>><em>Example 4: <strong class="fnt-nrml">Normal font style</strong></em></p></code></pre> | ||
| </div> | ||
| </div> |
158 changes: 158 additions & 0 deletions
158
common/text-level-modifiers/text-level-modifiers-fr.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
|
|
||
| <p>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.</p> | ||
| <h2>Aperçu</h2> | ||
| <dl class="dl-horizontal brdr-bttm"> | ||
| <dt><code>.stretched-link</code></dt> | ||
| <dd>Utilisé en conjonction avec position-relative pour définir la zone cliquable d'un lien</dd> | ||
| <dt><code>.small</code></dt> | ||
| <dd>Diminue la taille de la police de l'élément</dd> | ||
| <dt><code>.mark</code></dt> | ||
| <dd>Met en évidence le texte</dd> | ||
| <dt><code>.lead</code></dt> | ||
| <dd>Augmente la taille de la police et l'interligne</dd> | ||
| <dt><code>.text-*</code></dt> | ||
| <dd>Modifie l'alignement ou la casse du texte</dd> | ||
| <dt><code>.no-wrap</code></dt> | ||
| <dd>Empêche le texte de passer à la ligne</dd> | ||
| <dt><code>.fnt-nrml</code></dt> | ||
| <dd>Réinitialise la taille de la police par défaut</dd> | ||
| </dl> | ||
| <div class="row"> | ||
| <div class="position-relative"> | ||
| <h2><code>.stretched-link</code></h2> | ||
| <dd>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.</dd> | ||
| <a class="stretched-link" href="">Lien étendu</a> | ||
| <pre><code><div <strong>class="position-relative"</strong>><a <strong>class="stretched-link" href=""</strong>>Lien étendu</a></div></code></pre> | ||
| </div> | ||
| <div> | ||
| <h2><code>.small</code></h2> | ||
| <dd>Diminue la taille de la police de l'élément.</dd> | ||
| <p class="small"> | ||
| Exemple de texte petit | ||
| </p> | ||
| <pre><code><p <strong>class="small"</strong>>...</p></code></pre> | ||
| </div> | ||
| <div> | ||
| <h2><code>.mark</code></h2> | ||
| <dd>Met en évidence le texte</dd> | ||
| <p class="mark"> | ||
| Exemple de texte surligné | ||
| </p> | ||
| <pre><code><p <strong>class="mark"</strong>>...</p></code></pre> | ||
| </div> | ||
| <div> | ||
| <h2><code>.lead</code></h2> | ||
| <dd>Augmente la taille de la police et l'interligne</dd> | ||
| <p class="lead"> | ||
| Exemple de texte principal | ||
| </p> | ||
| <pre><code><p <strong>class="lead"</strong>>...</p></code></pre> | ||
| </div> | ||
| <div> | ||
| <h2><code>.text-*</code></h2> | ||
| <dd>Peut être utilisé pour aligner le texte ou changer sa casse.</dd> | ||
| <h2>Exemples d'alignement :</h2> | ||
| <div class="row"> | ||
| <p class="text-left col-sm-6"> | ||
| Aligné à gauche | ||
| </p> | ||
| <pre | ||
| class="text-left col-sm-6"><code><p <strong>class="text-left"</strong>>...</p></code></pre> | ||
| </div> | ||
| <div class="row"> | ||
| <p class="text-right col-sm-6"> | ||
| Aligné à droite | ||
| </p> | ||
| <pre | ||
| class="text-right col-sm-6"><code><p <strong>class="text-right"</strong>>...</p></code></pre> | ||
| </div> | ||
| <div class="row"> | ||
| <p class="text-center col-sm-6"> | ||
| Centré | ||
| </p> | ||
| <pre | ||
| class="text-center col-sm-6"><code><p <strong>class="text-center"</strong>>...</p></code></pre> | ||
| </div> | ||
| <div class="row"> | ||
| <p class="text-justify col-sm-6"> | ||
| Texte justifié | ||
| </p> | ||
| <pre | ||
| class="text-justify col-sm-6"><code><p <strong>class="text-justify"</strong>>...</p></code></pre> | ||
| </div> | ||
| <div class="row"> | ||
| <p class="text-nowrap col-sm-6"> | ||
| Texte sans retour à la ligne : xxxxxxxxxxxxxxxxxxxxxxx | ||
| </p> | ||
| <pre | ||
| class="text-nowrap col-sm-6"><code><p <strong>class="text-danger"</strong>>...</p></code></pre> | ||
| </div> | ||
|
|
||
| <h2>Exemples de transformation :</h2> | ||
| <div class="row"> | ||
| <p class="text-lowercase col-sm-6"> | ||
| TEXTE EN MINUSCULES | ||
| </p> | ||
| <pre | ||
| class="col-sm-6"><code><p <strong>class="text-lowercase"</strong>>TEXTE EN MINUSCULES</p></code></pre> | ||
| </div> | ||
| <div class="row"> | ||
| <p class="text-uppercase col-sm-6"> | ||
| texte en majuscules | ||
| </p> | ||
| <pre | ||
| class="col-sm-6"><code><p <strong>class="text-uppercase"</strong>>texte en majuscules</p></code></pre> | ||
| </div> | ||
| <div class="row"> | ||
| <p class="text-capitalize col-sm-6"> | ||
| texte capitalisé | ||
| </p> | ||
| <pre | ||
| class="col-sm-6"><code><p <strong>class="text-capitalize"</strong>>texte capitalisé</p></code></pre> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <h2><code>.no-wrap</code></h2> | ||
| <dd>Empêche le texte de passer à la ligne</dd> | ||
| <p class="no-wrap"> | ||
| Exemple sans retour à la ligne : xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | ||
| </p> | ||
| <pre><code><p <strong>class="no-wrap"</strong>>...</p></code></pre> | ||
| </div> | ||
| <div> | ||
| <h2><code>.fnt-nrml</code></h2> | ||
| <dd>Réinitialise la taille de la police à la valeur par défaut</dd> | ||
| <p>Exemple 1 : Style de police par défaut</p> | ||
| <p class="fnt-nrml">Exemple 2 : Style de police normal</p> | ||
| <p><strong>Exemple 3 : <em class="fnt-nrml">Style de police normal</em></strong></p> | ||
| <p><em>Exemple 4 : <strong class="fnt-nrml">Style de police normal</strong></em></p> | ||
| <pre><code><p>Exemple 1 : Style de police par défaut</p></code></pre> | ||
| <pre><code><p <strong>class="fnt-nrml"</strong>>Exemple 2 : Style de police normal</p></code></pre> | ||
| <pre><code><p <strong>class="fnt-nrml"</strong>><strong>Exemple 3 : <em class="fnt-nrml">Style de police normal</em></strong></p></code></pre> | ||
| <pre><code><p <strong>class="fnt-nrml"</strong>><em>Exemple 4 : <strong class="fnt-nrml">Style de police normal</strong></em></p></code></pre> | ||
| </div> | ||
| </div> |