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.

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

Change deprecated html tags to text decoration classes #29604

Merged
merged 4 commits into from Nov 27, 2019
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion scss/_utilities.scss
Expand Up @@ -426,7 +426,7 @@ $utilities: map-merge(
),
"text-decoration": (
property: text-decoration,
values: none
values: none underline line-through
),
"font-style": (
property: font-style,
Expand Down
14 changes: 12 additions & 2 deletions site/content/docs/4.3/content/typography.md
Expand Up @@ -143,13 +143,23 @@ Styling for common inline HTML5 elements.
<p><em>This line rendered as italicized text.</em></p>
{{< /example >}}

`.mark` and `.small` classes are also available to apply the same styles as `<mark>` and `<small>` while avoiding any unwanted semantic implications that the tags would bring.
Beware that those tags should be use for semantic purpose:
`<mark>` represents text which is marked or highlighted for reference or notation purposes.
`<small>` represents side-comments and small print, like copyright and legal text.
`<s>` represents element that are no longer relevant or no longer accurate.
`<u>` represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.

If you want to style your text, you should use those css classes instead:
`.mark` will apply the same styles as `<mark>`.
`.small` will apply the same styles as `<small>`.
`.text-decoration-underline` will apply the same styles as `<u>`.
`.text-decoration-line-through` will apply the same styles as `<s>`.

While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant to highlight words or phrases without conveying additional importance while `<i>` is mostly for voice, technical terms, etc.

## Text utilities

Change text alignment, transform, style, weight, line-height and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}).
Change text alignment, transform, style, weight, line-height, decoration and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}).

## Abbreviations

Expand Down
6 changes: 4 additions & 2 deletions site/content/docs/4.3/utilities/text.md
Expand Up @@ -109,8 +109,10 @@ Reset a text or link's color with `.text-reset`, so that it inherits the color f

## Text decoration

Remove a text decoration with a `.text-decoration-none` class.
Decorate text in components with text decoration classes.

{{< example >}}
<a href="#" class="text-decoration-none">Non-underlined link</a>
<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
{{< /example >}}