Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Content - Text-level Modifiers - Created Example Pages #2211

Merged
merged 2 commits into from
Nov 28, 2024
Merged

Content - Text-level Modifiers - Created Example Pages #2211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
acf45bc
Content - Text-level Modifiers - Created Example Pages
SebastianBurke Jul 20, 2023
4833b40
Text changes
Garneauma Nov 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions _data/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -519,6 +519,40 @@
]
}
}
,{
"@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": {
"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"
}
]
}
}
,{
"@context": {
"@version": 1.1,
Expand Down
34 changes: 34 additions & 0 deletions common/text-level-modifiers/index.json-ld
View file
Open in desktop
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 common/text-level-modifiers/text-level-modifiers-en.html
View file
Open in desktop
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>&lt;div <strong>class=&quot;positon-relative&quot;</strong>&gt;&lt;a <strong>class=&quot;stretched-link&quot;</strong> href="#"&gt;Stretched link&lt;/a&gt;&lt;/div&gt;</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>&lt;p <strong>class=&quot;small&quot;</strong>&gt;...&lt;/p&gt;</code></pre>

<h2><code>.mark</code></h2>
<p>Highlights the text.</p>
<p class="mark">Example highlighted text</p>
<pre><code>&lt;p <strong>class=&quot;mark&quot;</strong>&gt;...&lt;/p&gt;</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>&lt;p <strong>class=&quot;lead&quot;</strong>&gt;...&lt;/p&gt;</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>&lt;div class="row">
&lt;div class="col-xs-6 col-sm-5 col-md-4 col-lg-3">
&lt;div class="well">
&lt;p <strong>class="nowrap"</strong>>Example no wrap: xxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;/p>
&lt;/div>
&lt;/div>
&lt;/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>&lt;p>The following element has a normal &lt;strong <strong>class="fnt-nrml"</strong>>[font-weight]&lt;/strong>.&lt;/p></code></pre>

<h2><code>.text-*</code></h2>
Garneauma marked this conversation as resolved.
Show resolved Hide resolved
<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>&lt;div class="row">
&lt;div class="col-xs-6 col-sm-5 col-md-4 col-lg-3">
&lt;div class="well">
&lt;p <strong>class="text-nowrap"</strong>>Example text: xxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;/p>
&lt;/div>
&lt;/div>
&lt;/div></code></pre>

<h3>Text alignment</h3>
<h4><code>.text-left</code></h4>
<p class="text-left">Aligned left</p>
<pre><code>&lt;p <strong>class=&quot;text-left&quot;</strong>&gt;...&lt;/p&gt;</code></pre>

<h4><code>.text-right</code></h4>
<p class="text-right">Aligned right</p>
<pre><code>&lt;p <strong>class=&quot;text-right&quot;</strong>&gt;...&lt;/p&gt;</code></pre>

<h4><code>.text-center</code></h4>
<p class="text-center">Aligned center</p>
<pre><code>&lt;p <strong>class=&quot;text-center&quot;</strong>&gt;...&lt;/p&gt;</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>&lt;p <strong>class=&quot;text-justify&quot;</strong>&gt;...&lt;/p&gt;</code></pre>

<h3>Text transformation</h3>
<h4><code>.text-lowercase</code></h4>
<p class="text-lowercase">Lowercase Text.</p>
<pre><code>&lt;p <strong>class=&quot;text-lowercase&quot;</strong>&gt;Lowercase Text&lt;/p&gt;</code></pre>

<h4><code>.text-uppercase</code></h4>
<p class="text-uppercase">Uppercase Text.</p>
<pre><code>&lt;p <strong>class=&quot;text-uppercase&quot;</strong>&gt;Uppercase Text&lt;/p&gt;</code></pre>

<h4><code>.text-capitalize</code></h4>
<p class="text-capitalize">capitalize text.</p>
<pre><code>&lt;p <strong>class=&quot;text-capitalize&quot;</strong>&gt;capitalize text&lt;/p&gt;</code></pre>
109 changes: 109 additions & 0 deletions common/text-level-modifiers/text-level-modifiers-fr.html
View file
Open in desktop
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>&lt;div <strong>class=&quot;positon-relative&quot;</strong>&gt;&lt;a <strong>class=&quot;stretched-link&quot; href="#"</strong>&gt;Lien étiré&lt;/a&gt;&lt;/div&gt;</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>&lt;p <strong>class=&quot;small&quot;</strong>&gt;...&lt;/p&gt;</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>&lt;p <strong>class=&quot;mark&quot;</strong>&gt;...&lt;/p&gt;</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>&lt;p <strong>class=&quot;lead&quot;</strong>&gt;...&lt;/p&gt;</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>&lt;div class="row">
&lt;div class="col-xs-6 col-sm-5 col-md-4 col-lg-3">
&lt;div class="well">
&lt;p <strong>class="nowrap"</strong>>Exemple sans retour à la ligne : xxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;/p>
&lt;/div>
&lt;/div>
&lt;/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>&lt;p>L'élément suivant a un &lt;strong <strong>class="fnt-nrml"</strong>>[font-weight]&lt;/strong> normal.&lt;/p></code></pre>

<h2><code>.text-*</code></h2>
Garneauma marked this conversation as resolved.
Show resolved Hide resolved
<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>&lt;div class="row">
&lt;div class="col-xs-6 col-sm-5 col-md-4 col-lg-3">
&lt;div class="well">
&lt;p <strong>class="text-nowrap"</strong>>Texte d'exemple: xxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;/p>
&lt;/div>
&lt;/div>
&lt;/div></code></pre>

<h3>Alignement du texte</h3>
<h4><code>.text-left</code></h4>
<p class="text-left">Alignement à gauche</p>
<pre><code>&lt;p <strong>class=&quot;text-left&quot;</strong>&gt;...&lt;/p&gt;</code></pre>

<h4><code>.text-right</code></h4>
<p class="text-right">Alignement à droite</p>
<pre><code>&lt;p <strong>class=&quot;text-right&quot;</strong>&gt;...&lt;/p&gt;</code></pre>

<h4><code>.text-center</code></h4>
<p class="text-center">Aligné au centre</p>
<pre><code>&lt;p <strong>class=&quot;text-center&quot;</strong>&gt;...&lt;/p&gt;</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>&lt;p <strong>class=&quot;text-justify&quot;</strong>&gt;...&lt;/p&gt;</code></pre>

<h3>Transformation de texte</h3>
<h4><code>.text-lowercase</code></h4>
<p class="text-lowercase">Texte en minuscules.</p>
<pre><code>&lt;p <strong>class=&quot;text-lowercase&quot;</strong>&gt;Texte en minuscules&lt;/p&gt;</code></pre>

<h4><code>.text-uppercase</code></h4>
<p class="text-uppercase">Texte en majuscules.</p>
<pre><code>&lt;p <strong>class=&quot;text-uppercase&quot;</strong>&gt;Majuscules Texte&lt;/p&gt;</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>&lt;p <strong>class=&quot;text-capitalize&quot;</strong>&gt;Texte avec la première lettre de chaque mot en majuscule.&lt;/p&gt;</code></pre>