From 90e4b97affd221f07bfba7d7b6250324bece4db7 Mon Sep 17 00:00:00 2001 From: mattvgn Date: Mon, 28 Oct 2019 22:36:58 +0100 Subject: [PATCH 1/4] Change deprecated html tags to text decoration classes --- scss/_utilities.scss | 2 +- site/content/docs/4.3/content/typography.md | 4 +--- site/content/docs/4.3/utilities/text.md | 6 ++++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 1f3c7b4ac2a1..b7c38249aa96 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -426,7 +426,7 @@ $utilities: map-merge( ), "text-decoration": ( property: text-decoration, - values: none + values: none underline line-through ), "font-style": ( property: font-style, diff --git a/site/content/docs/4.3/content/typography.md b/site/content/docs/4.3/content/typography.md index d4daabdd033f..a3451324568e 100644 --- a/site/content/docs/4.3/content/typography.md +++ b/site/content/docs/4.3/content/typography.md @@ -135,9 +135,7 @@ Styling for common inline HTML5 elements. {{< example >}}

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

-

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

-

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

@@ -149,7 +147,7 @@ While not shown above, feel free to use `` and `` in HTML5. `` is meant ## 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 diff --git a/site/content/docs/4.3/utilities/text.md b/site/content/docs/4.3/utilities/text.md index 3ae40fabc970..f54020644cdd 100644 --- a/site/content/docs/4.3/utilities/text.md +++ b/site/content/docs/4.3/utilities/text.md @@ -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 >}} -Non-underlined link +

This text has a line underneath it.

+

This text has a line going through it.

+This link has its text decoration removed {{< /example >}} From 77ff05ba1b37e60592f1b7a798a5e46169866c43 Mon Sep 17 00:00:00 2001 From: mattvgn Date: Tue, 26 Nov 2019 20:48:46 +0100 Subject: [PATCH 2/4] add documentation on html tags --- site/content/docs/4.3/content/typography.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/site/content/docs/4.3/content/typography.md b/site/content/docs/4.3/content/typography.md index a3451324568e..80709f27669d 100644 --- a/site/content/docs/4.3/content/typography.md +++ b/site/content/docs/4.3/content/typography.md @@ -135,13 +135,25 @@ Styling for common inline HTML5 elements. {{< example >}}

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

+

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

+

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

{{< /example >}} -`.mark` and `.small` classes are also available to apply the same styles as `` and `` while avoiding any unwanted semantic implications that the tags would bring. +Beware that those tags should be use for semantic purpose: +`` represents text which is marked or highlighted for reference or notation purposes. +`` represents side-comments and small print, like copyright and legal text. +`` represents element that are no longer relevant or no longer accurate. +`` 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 ``. +`.small` will apply the same styles as ``. +`.text-decoration-underline` will apply the same styles as ``. +`.text-decoration-line-through` will apply the same styles as ``. While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance while `` is mostly for voice, technical terms, etc. From aa6856e98a1199ab35aa129c0883ef57284b27ae Mon Sep 17 00:00:00 2001 From: mattvgn Date: Tue, 26 Nov 2019 21:42:48 +0100 Subject: [PATCH 3/4] fix description list --- site/content/docs/4.3/content/typography.md | 24 +++++++++++---------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/site/content/docs/4.3/content/typography.md b/site/content/docs/4.3/content/typography.md index 80709f27669d..a0fdcea4c48f 100644 --- a/site/content/docs/4.3/content/typography.md +++ b/site/content/docs/4.3/content/typography.md @@ -143,17 +143,19 @@ Styling for common inline HTML5 elements.

This line rendered as italicized text.

{{< /example >}} -Beware that those tags should be use for semantic purpose: -`` represents text which is marked or highlighted for reference or notation purposes. -`` represents side-comments and small print, like copyright and legal text. -`` represents element that are no longer relevant or no longer accurate. -`` 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 ``. -`.small` will apply the same styles as ``. -`.text-decoration-underline` will apply the same styles as ``. -`.text-decoration-line-through` will apply the same styles as ``. +Beware that those tags should be used for semantic purpose: + +* `` represents text which is marked or highlighted for reference or notation purposes. +* `` represents side-comments and small print, like copyright and legal text. +* `` represents element that are no longer relevant or no longer accurate. +* `` 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 classes instead: + +* `.mark` will apply the same styles as ``. +* `.small` will apply the same styles as ``. +* `.text-decoration-underline` will apply the same styles as ``. +* `.text-decoration-line-through` will apply the same styles as ``. While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance while `` is mostly for voice, technical terms, etc. From fe06e4964e46af1144d66b164c747e752c314aef Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 27 Nov 2019 08:40:24 +0200 Subject: [PATCH 4/4] Update typography.md --- site/content/docs/4.3/content/typography.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/site/content/docs/4.3/content/typography.md b/site/content/docs/4.3/content/typography.md index a0fdcea4c48f..5b651660988c 100644 --- a/site/content/docs/4.3/content/typography.md +++ b/site/content/docs/4.3/content/typography.md @@ -143,21 +143,21 @@ Styling for common inline HTML5 elements.

This line rendered as italicized text.

{{< /example >}} -Beware that those tags should be used for semantic purpose: +Beware that those tags should be used for semantic purpose: * `` represents text which is marked or highlighted for reference or notation purposes. -* `` represents side-comments and small print, like copyright and legal text. +* `` represents side-comments and small print, like copyright and legal text. * `` represents element that are no longer relevant or no longer accurate. * `` 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 classes instead: +If you want to style your text, you should use the following classes instead: * `.mark` will apply the same styles as ``. * `.small` will apply the same styles as ``. -* `.text-decoration-underline` will apply the same styles as ``. +* `.text-decoration-underline` will apply the same styles as ``. * `.text-decoration-line-through` will apply the same styles as ``. -While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance while `` is mostly for voice, technical terms, etc. +While not shown above, feel free to use `` and `` in HTML5. `` is meant to highlight words or phrases without conveying additional importance, while `` is mostly for voice, technical terms, etc. ## Text utilities