-
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.
- Loading branch information
Showing
4 changed files
with
202 additions
and
289 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
219 changes: 82 additions & 137 deletions
219
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 |
|---|---|---|
| @@ -1,147 +1,92 @@ | ||
| --- | ||
| { | ||
| "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" | ||
| "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." | ||
| } | ||
| --- | ||
|
|
||
| <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> | ||
| <div class="wb-prettify all-pre"></div> | ||
|
|
||
| <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> | ||
| <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>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> | ||
| <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 adding <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> | ||
| <dd>Highlights the text.</dd> | ||
| <p class="mark">Example highlighted text</p> | ||
| <pre><code><p <strong>class="mark"</strong>>...</p></code></pre> | ||
|
|
||
| <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> | ||
|
|
||
| <h2><code>.no-wrap</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="no-wrap">Example no wrap: xxxxxxxxxxxxxxxxxxxxxxxxxxx</p> | ||
| </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> | ||
| <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="no-wrap"</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> | ||
| <dd>Can be used to align text or change its case.</dd> | ||
|
|
||
| <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> |
Oops, something went wrong.