-
Notifications
You must be signed in to change notification settings - Fork 132
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 (#2211)
--------- Co-authored-by: Sebastian Burke <[email protected]> Co-authored-by: Marc-André Garneau <[email protected]>
- Loading branch information
1 parent
c5f5cd4
commit 7ba262d
Showing
4 changed files
with
286 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
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 texte" | ||
| }, | ||
| "description": { | ||
| "en": "Text-level modifiers for styling and formatting", | ||
| "fr": "Modificateurs de niveau texte pour le style et le formatage" | ||
| }, | ||
| "modified": "2024-11-25", | ||
| "componentName": "text-level-modifiers", | ||
| "status": "stable", | ||
| "pages": { | ||
| "examples": [ | ||
| { | ||
| "title": "Text-level modifiers", | ||
| "language": "en", | ||
| "path": "text-level-modifiers-en.html" | ||
| }, | ||
| { | ||
| "title": "Modificateurs de niveau texte", | ||
| "language": "fr", | ||
| "path": "text-level-modifiers-fr.html" | ||
| } | ||
| ] | ||
| } | ||
| } |
109 changes: 109 additions & 0 deletions
109
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,109 @@ | ||
| --- | ||
| { | ||
| "title": "Text-level modifiers", | ||
| "language": "en", | ||
| "altLangPage": "text-level-modifiers-fr.html", | ||
| "dateModified": "2024-11-25", | ||
| "description": "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." | ||
| } | ||
| --- | ||
|
|
||
| <div class="wb-prettify all-pre"></div> | ||
|
|
||
| <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><code>.stretched-link</code></h2> | ||
| <p>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 aping <code>position: relative</code> to an element.</p> | ||
| <div class="position-relative"> | ||
| <a class="stretched-link" href="#">Stretched link</a> | ||
| </div> | ||
| <pre><code><div <strong>class="positon-relative"</strong>><a <strong>class="stretched-link"</strong> href="#">Stretched link</a></div></code></pre> | ||
|
|
||
| <h2><code>.small</code></h2> | ||
| <p>Decreases the font size of the element.</p> | ||
| <p class="small">Example small text</p> | ||
| <pre><code><p <strong>class="small"</strong>>...</p></code></pre> | ||
|
|
||
| <h2><code>.mark</code></h2> | ||
| <p>Highlights the text.</p> | ||
| <p class="mark">Example highlighted text</p> | ||
| <pre><code><p <strong>class="mark"</strong>>...</p></code></pre> | ||
|
|
||
| <h2><code>.lead</code></h2> | ||
| <p>Increases the font size and line height.</p> | ||
| <p class="lead"> | ||
| Example lead text | ||
| </p> | ||
| <pre><code><p <strong>class="lead"</strong>>...</p></code></pre> | ||
|
|
||
| <h2><code>.nowrap</code></h2> | ||
| <p>Prevents the text from wrapping.</p> | ||
| <div class="row"> | ||
| <div class="col-xs-6 col-sm-5 col-md-4 col-lg-3"> | ||
| <div class="well"> | ||
| <p class="nowrap">Example no wrap: xxxxxxxxxxxxxxxxxxxxxxxxxxx</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <pre><code><div class="row"> | ||
| <div class="col-xs-6 col-sm-5 col-md-4 col-lg-3"> | ||
| <div class="well"> | ||
| <p <strong>class="nowrap"</strong>>Example no wrap: xxxxxxxxxxxxxxxxxxxxxxxxxxx</p> | ||
| </div> | ||
| </div> | ||
| </div></code></pre> | ||
|
|
||
| <h2><code>.fnt-nrml</code></h2> | ||
| <p>Resets the <code>font-weight</code> to <code>normal</code>.</p> | ||
| <p>The following element has a normal <strong class="fnt-nrml">[font-weight]</strong>.</p> | ||
| <pre><code><p>The following element has a normal <strong <strong>class="fnt-nrml"</strong>>[font-weight]</strong>.</p></code></pre> | ||
|
|
||
| <h2><code>.text-*</code></h2> | ||
| <p>Can be used to align text or change its case.</p> | ||
|
|
||
| <h3><code>.text-nowrap</code></h3> | ||
| <p>Prevents the text from wrapping.</p> | ||
| <div class="row"> | ||
| <div class="col-xs-6 col-sm-5 col-md-4 col-lg-3"> | ||
| <div class="well"> | ||
| <p class="text-nowrap">Example text: xxxxxxxxxxxxxxxxxxxxxxxxxxx</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <pre><code><div class="row"> | ||
| <div class="col-xs-6 col-sm-5 col-md-4 col-lg-3"> | ||
| <div class="well"> | ||
| <p <strong>class="text-nowrap"</strong>>Example text: xxxxxxxxxxxxxxxxxxxxxxxxxxx</p> | ||
| </div> | ||
| </div> | ||
| </div></code></pre> | ||
|
|
||
| <h3>Text alignment</h3> | ||
| <h4><code>.text-left</code></h4> | ||
| <p class="text-left">Aligned left</p> | ||
| <pre><code><p <strong>class="text-left"</strong>>...</p></code></pre> | ||
|
|
||
| <h4><code>.text-right</code></h4> | ||
| <p class="text-right">Aligned right</p> | ||
| <pre><code><p <strong>class="text-right"</strong>>...</p></code></pre> | ||
|
|
||
| <h4><code>.text-center</code></h4> | ||
| <p class="text-center">Aligned center</p> | ||
| <pre><code><p <strong>class="text-center"</strong>>...</p></code></pre> | ||
|
|
||
| <h4><code>.text-justify</code></h4> | ||
| <p class="text-justify">Justified text. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas magnam odit tenetur veniam sed! Iusto adipisci eius autem magnam error. At hic alias earum, corrupti aspernatur culpa repudiandae aperiam amet labore magnam nemo praesentium a inventore accusantium quod velit quia nostrum ut aliquam ex debitis. Suscipit, inventore soluta? Aspernatur, illo!</p> | ||
| <pre><code><p <strong>class="text-justify"</strong>>...</p></code></pre> | ||
|
|
||
| <h3>Text transformation</h3> | ||
| <h4><code>.text-lowercase</code></h4> | ||
| <p class="text-lowercase">Lowercase Text.</p> | ||
| <pre><code><p <strong>class="text-lowercase"</strong>>Lowercase Text</p></code></pre> | ||
|
|
||
| <h4><code>.text-uppercase</code></h4> | ||
| <p class="text-uppercase">Uppercase Text.</p> | ||
| <pre><code><p <strong>class="text-uppercase"</strong>>Uppercase Text</p></code></pre> | ||
|
|
||
| <h4><code>.text-capitalize</code></h4> | ||
| <p class="text-capitalize">capitalize text.</p> | ||
| <pre><code><p <strong>class="text-capitalize"</strong>>capitalize text</p></code></pre> |
109 changes: 109 additions & 0 deletions
109
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,109 @@ | ||
| --- | ||
| { | ||
| "title": "Modificateurs de niveau texte", | ||
| "language": "fr", | ||
| "altLangPage": "text-level-modifiers-en.html", | ||
| "dateModified": "2024-11-25", | ||
| "description": "Dans le domaine de GCweb, les modificateurs de niveau texte jouent un rôle essentiel dans la définition des aspects visuels et fonctionnels du texte d'un site Web. Ils permettent aux développeurs Web d'affiner les attributs de texte tels que la taille, la couleur, le poids et le style, garantissant ainsi que le contenu textuel est non seulement esthétique, mais également accessible et facile à lire." | ||
| } | ||
| --- | ||
|
|
||
| <div class="wb-prettify all-pre"></div> | ||
|
|
||
| <p>Dans le domaine de GCweb, les modificateurs de niveau texte jouent un rôle essentiel dans la définition des aspects visuels et fonctionnels du texte d'un site Web. Ils permettent aux développeurs Web d'affiner les attributs de texte tels que la taille, la couleur, le poids et le style, garantissant ainsi que le contenu textuel est non seulement esthétique, mais également accessible et facile à lire.</p> | ||
|
|
||
| <h2><code>.stretched-link</code></h2> | ||
| <p>Utilisé pour rendre un bloc entier cliquable, en « étirant » efficacement un lien hypertexte sur l'ensemble du bloc. Assurez-vous que l'élément que vous souhaitez rendre cliquable est positionné. Cela peut être fait en ajoutant <code>position: relative</code> à un élément.</p> | ||
| <div class="position-relative"> | ||
| <a class="stretched-link" href="#">Lien étiré</a> | ||
| </div> | ||
| <pre><code><div <strong>class="positon-relative"</strong>><a <strong>class="stretched-link" href="#"</strong>>Lien étiré</a></div></code></pre> | ||
|
|
||
| <h2><code>.small</code></h2> | ||
| <p>Diminue la taille de la police de l'élément.</p> | ||
| <p class="small">Exemple de texte en petit format</p> | ||
| <pre><code><p <strong>class="small"</strong>>...</p></code></pre> | ||
|
|
||
| <h2><code>.mark</code></h2> | ||
| <p>Met le texte en surbrillance</p> | ||
| <p class="mark">Exemple de texte en surbrillance.</p> | ||
| <pre><code><p <strong>class="mark"</strong>>...</p></code></pre> | ||
|
|
||
| <h2><code>.lead</code></h2> | ||
| <p>Augmente la taille de la police et la hauteur de la ligne.</p> | ||
| <p class="lead"> | ||
| Exemple de texte d'introduction | ||
| </p> | ||
| <pre><code><p <strong>class="lead"</strong>>...</p></code></pre> | ||
|
|
||
| <h2><code>.nowrap</code></h2> | ||
| <p>Empêche le retour à la ligne du texte.</p> | ||
| <div class="row"> | ||
| <div class="col-xs-6 col-sm-5 col-md-4 col-lg-3"> | ||
| <div class="well"> | ||
| <p class="nowrap">Exemple sans retour à la ligne : xxxxxxxxxxxxxxxxxxxxxxxxxxx</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <pre><code><div class="row"> | ||
| <div class="col-xs-6 col-sm-5 col-md-4 col-lg-3"> | ||
| <div class="well"> | ||
| <p <strong>class="nowrap"</strong>>Exemple sans retour à la ligne : xxxxxxxxxxxxxxxxxxxxxxxxxxx</p> | ||
| </div> | ||
| </div> | ||
| </div></code></pre> | ||
|
|
||
| <h2><code>.fnt-nrml</code></h2> | ||
| <p>Réinitialise le <code>font-weight</code> à <code>normal</code>.</p> | ||
| <p>L'élément suivant a un <strong class="fnt-nrml">[font-weight]</strong> normal.</p> | ||
| <pre><code><p>L'élément suivant a un <strong <strong>class="fnt-nrml"</strong>>[font-weight]</strong> normal.</p></code></pre> | ||
|
|
||
| <h2><code>.text-*</code></h2> | ||
| <p>Peut être utilisé pour aligner du texte ou modifier sa casse.</p> | ||
|
|
||
| <h3><code>.text-nowrap</code></h3> | ||
| <p>Empêche le retour à la ligne du texte.</p> | ||
| <div class="row"> | ||
| <div class="col-xs-6 col-sm-5 col-md-4 col-lg-3"> | ||
| <div class="well"> | ||
| <p class="text-nowrap">Texte d'exemple: xxxxxxxxxxxxxxxxxxxxxxxxxxx</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <pre><code><div class="row"> | ||
| <div class="col-xs-6 col-sm-5 col-md-4 col-lg-3"> | ||
| <div class="well"> | ||
| <p <strong>class="text-nowrap"</strong>>Texte d'exemple: xxxxxxxxxxxxxxxxxxxxxxxxxxx</p> | ||
| </div> | ||
| </div> | ||
| </div></code></pre> | ||
|
|
||
| <h3>Alignement du texte</h3> | ||
| <h4><code>.text-left</code></h4> | ||
| <p class="text-left">Alignement à gauche</p> | ||
| <pre><code><p <strong>class="text-left"</strong>>...</p></code></pre> | ||
|
|
||
| <h4><code>.text-right</code></h4> | ||
| <p class="text-right">Alignement à droite</p> | ||
| <pre><code><p <strong>class="text-right"</strong>>...</p></code></pre> | ||
|
|
||
| <h4><code>.text-center</code></h4> | ||
| <p class="text-center">Aligné au centre</p> | ||
| <pre><code><p <strong>class="text-center"</strong>>...</p></code></pre> | ||
|
|
||
| <h4><code>.text-justify</code></h4> | ||
| <p class="text-justify">Texte justifié. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas magnam odit tenetur veniam sed ! Iusto adipisci eius autem magnam erreur. À son alias earum, corrupti aspernatur culpa repudiandae aperiam amet labore magnam nemo praesentium a inventore accusantium quod velit quia nostrum ut aliquam ex debitis. Suscipit, inventer soluta ? Aspernatur, illo !</p> | ||
| <pre><code><p <strong>class="text-justify"</strong>>...</p></code></pre> | ||
|
|
||
| <h3>Transformation de texte</h3> | ||
| <h4><code>.text-lowercase</code></h4> | ||
| <p class="text-lowercase">Texte en minuscules.</p> | ||
| <pre><code><p <strong>class="text-lowercase"</strong>>Texte en minuscules</p></code></pre> | ||
|
|
||
| <h4><code>.text-uppercase</code></h4> | ||
| <p class="text-uppercase">Texte en majuscules.</p> | ||
| <pre><code><p <strong>class="text-uppercase"</strong>>Majuscules Texte</p></code></pre> | ||
|
|
||
| <h4><code>.text-capitalize</code></h4> | ||
| <p class="text-capitalize">Texte avec la première lettre de chaque mot en majuscule.</p> | ||
| <pre><code><p <strong>class="text-capitalize"</strong>>Texte avec la première lettre de chaque mot en majuscule.</p></code></pre> |