Content - Text-level Modifiers - Created Example Pages #2211
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": "2024-03-06", | ||
| "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" | ||
| } | ||
| ] | ||
| } | ||
| } |
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> | ||||||||||||||||||
|
There was a problem hiding this comment. There is a typo, see the other comment |
||||||||||||||||||
| <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> | ||||||||||||||||||
|
There was a problem hiding this comment. This should be paragraph
Suggested change
And apply the same change across both working example |
||||||||||||||||||
| <h2>Alignment examples:</h2> | ||||||||||||||||||
|
There was a problem hiding this comment. This is a sub-heading of the "h2" at line 73.
Suggested change
And apply the similar fix for the other similar sub-heading |
||||||||||||||||||
| <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 | ||||||||||||||||||
|
There was a problem hiding this comment. Add 23-25 more "x" because we don't see the effet on large page view port |
||||||||||||||||||
| </p> | ||||||||||||||||||
| <pre class="text-nowrap col-sm-6"><code><p <strong>class="text-danger"</strong>>...</p></code></pre> | ||||||||||||||||||
|
There was a problem hiding this comment. This code example don't match the example. |
||||||||||||||||||
| </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"> | ||||||||||||||||||
|
There was a problem hiding this comment. There is a typo, there is no dash
Suggested change
|
||||||||||||||||||
| Example no wrap: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx | ||||||||||||||||||
|
There was a problem hiding this comment. Add a few word or a few "x" to ensure the no wrap is demoed in large view |
||||||||||||||||||
| </p> | ||||||||||||||||||
| <pre><code><p <strong>class="no-wrap"</strong>>...</p></code></pre> | ||||||||||||||||||
| </div> | ||||||||||||||||||
| <div> | ||||||||||||||||||
|
Comment on lines
+134
to
+135
There was a problem hiding this comment. Those wrapper |
||||||||||||||||||
| <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> | ||||||||||||||||||
|
Comment on lines
+140
to
+141
There was a problem hiding this comment. Use some bracket to indicate where the effect is applied. like:
Suggested change
|
||||||||||||||||||
| <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> | ||||||||||||||||||
|
Comment on lines
+142
to
+145
There was a problem hiding this comment. Put it in one block like
Suggested change
|
||||||||||||||||||
| </div> | ||||||||||||||||||
| </div> | ||||||||||||||||||
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> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can now remove that breadcrumb item because it is there by default.