From 2230211113c57f9af941f7889ba4a41557645fca Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Wed, 3 Nov 2021 12:27:52 +0100 Subject: [PATCH 1/5] feat(lineLength): Add class to limit line length Signed-off-by: louismaximepiton --- .bundlewatch.config.json | 2 +- scss/_utilities.scss | 8 ++++++++ scss/_variables.scss | 2 ++ site/content/docs/5.1/getting-started/accessibility.md | 6 ++++++ site/content/docs/5.1/utilities/text.md | 10 ++++++++++ 5 files changed, 27 insertions(+), 1 deletion(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index d5558d60c4..8aadfa898b 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,7 +2,7 @@ "files": [ { "path": "./dist/css/boosted-grid.css", - "maxSize": "9.8 kB" + "maxSize": "9.9 kB" }, { "path": "./dist/css/boosted-grid.min.css", diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 764313764f..8dc48d8eb2 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -478,6 +478,14 @@ $utilities: map-merge( lg: $line-height-lg, ) ), + "line-length": ( + property: max-width, + class: ll, + values: ( + sm: $small-line-length, + md: $medium-line-length, + ) + ), "text-align": ( responsive: true, property: text-align, diff --git a/scss/_variables.scss b/scss/_variables.scss index bf4bf5fb1f..769df17bf4 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -684,6 +684,8 @@ $line-height-base: calc(18 / 16) !default; $line-height-sm: calc(16 / 14) !default; $line-height-lg: calc(30 / 16) !default; // stylelint-enable function-disallowed-list +$small-line-length: 32ch !default; +$medium-line-length: 65ch !default; $letter-spacing-base: $spacer * -.005 !default; // -0.1px $h1-font-size: $font-size-base * 2.125 !default; // 34px diff --git a/site/content/docs/5.1/getting-started/accessibility.md b/site/content/docs/5.1/getting-started/accessibility.md index 7c8f02d7e6..51aa3093cc 100644 --- a/site/content/docs/5.1/getting-started/accessibility.md +++ b/site/content/docs/5.1/getting-started/accessibility.md @@ -78,6 +78,12 @@ When using a fixed (or sticky) header, tabbing backward often hides focused elem Boosted provides `target-size()` mixin to ensure a minimum target size, adding a centered pseudo-element with a minimum size —defaulting to `44px` to pass [WCAG 2.1 "Target Size" Success Criterion (2.5.5)](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)— alongside a few arguments to fit specific needs (eg. different width and height, using `::after` instead of `::before`, etc.). {{< scss-docs name="target-size" file="scss/mixins/_target-size.scss" >}} + +### Maximum line length + +When writing a paragraph, it is commonly admitted that a line should have 80 characters as a maximum. This phenomenon is carefully explained at [C20 : Using relative measurements to set column widths](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C20). This rule applies also to the [Orange's Web Browsing Guidelines](https://design.orange.com/guidelines/web-browsing) at Typography. + +This feature is a bit more explained at [text utilities](/docs/5.1/utilities/text/#line-length). ## Additional resources diff --git a/site/content/docs/5.1/utilities/text.md b/site/content/docs/5.1/utilities/text.md index 5bd4b8698f..94de93a02f 100644 --- a/site/content/docs/5.1/utilities/text.md +++ b/site/content/docs/5.1/utilities/text.md @@ -101,6 +101,16 @@ Change the line height with `.lh-*` utilities.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

{{< /example >}} +## Line length + +Limit the line length with `.ll-*` utilities. It applies `max-width` rule to an element with a width based on `ch` dimension. + +{{< example >}} +

This is a long paragraph written to show how the line-length of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

+

This is a long paragraph written to show how the line-length of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

+

This is a long paragraph written to show how the line-length of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

+{{< /example >}} + ## Monospace Change a selection to our monospace font stack with `.font-monospace`. From 75fcfb7e581170cdc2fa2c70c9c1081235703d9f Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Wed, 17 Nov 2021 15:28:32 +0100 Subject: [PATCH 2/5] feat(lineLength): Fixes after review Signed-off-by: louismaximepiton --- scss/_utilities.scss | 4 ++-- scss/_variables.scss | 6 ++++-- site/content/docs/5.1/getting-started/accessibility.md | 2 +- site/content/docs/5.1/utilities/text.md | 3 ++- 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 8dc48d8eb2..fee0d03071 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -482,8 +482,8 @@ $utilities: map-merge( property: max-width, class: ll, values: ( - sm: $small-line-length, - md: $medium-line-length, + sm: $line-length-sm, + md: $line-length-md, ) ), "text-align": ( diff --git a/scss/_variables.scss b/scss/_variables.scss index 769df17bf4..215890c3ce 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -684,8 +684,10 @@ $line-height-base: calc(18 / 16) !default; $line-height-sm: calc(16 / 14) !default; $line-height-lg: calc(30 / 16) !default; // stylelint-enable function-disallowed-list -$small-line-length: 32ch !default; -$medium-line-length: 65ch !default; + +$line-length-sm: 40ch !default; +$line-length-md: 80ch !default; + $letter-spacing-base: $spacer * -.005 !default; // -0.1px $h1-font-size: $font-size-base * 2.125 !default; // 34px diff --git a/site/content/docs/5.1/getting-started/accessibility.md b/site/content/docs/5.1/getting-started/accessibility.md index 51aa3093cc..50f44d604b 100644 --- a/site/content/docs/5.1/getting-started/accessibility.md +++ b/site/content/docs/5.1/getting-started/accessibility.md @@ -81,7 +81,7 @@ Boosted provides `target-size()` mixin to ensure a minimum target size, adding a ### Maximum line length -When writing a paragraph, it is commonly admitted that a line should have 80 characters as a maximum. This phenomenon is carefully explained at [C20 : Using relative measurements to set column widths](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C20). This rule applies also to the [Orange's Web Browsing Guidelines](https://design.orange.com/guidelines/web-browsing) at Typography. +When writing a paragraph, it is commonly admitted that a line should have 80 characters as a maximum. This phenomenon is carefully explained at [C20 : Using relative measurements to set column widths](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C20). This feature is a bit more explained at [text utilities](/docs/5.1/utilities/text/#line-length). diff --git a/site/content/docs/5.1/utilities/text.md b/site/content/docs/5.1/utilities/text.md index 94de93a02f..3d3e7adadc 100644 --- a/site/content/docs/5.1/utilities/text.md +++ b/site/content/docs/5.1/utilities/text.md @@ -103,11 +103,12 @@ Change the line height with `.lh-*` utilities. ## Line length -Limit the line length with `.ll-*` utilities. It applies `max-width` rule to an element with a width based on `ch` dimension. +Limit the line length with `.ll-*` utilities. It applies `max-width` rule to an element with a width based on `ch` dimension. It only applies on [block-level elements](https://developer.mozilla.org/fr/docs/Web/HTML/Block-level_elements) and not on [inline elements](https://developer.mozilla.org/fr/docs/Web/HTML/Inline_elements). {{< example >}}

This is a long paragraph written to show how the line-length of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-length of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

+

Inline element. This is a long paragraph written to show how the line-length of an inline element isn't affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-length of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

{{< /example >}} From e05ba05e7b6fbf11e7e2a03170eecc4c134eee2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 22 Nov 2021 10:37:58 +0100 Subject: [PATCH 3/5] Minor adjustments --- scss/_variables.scss | 4 ++-- site/content/docs/5.1/utilities/text.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 215890c3ce..1b583e677b 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -685,8 +685,8 @@ $line-height-sm: calc(16 / 14) !default; $line-height-lg: calc(30 / 16) !default; // stylelint-enable function-disallowed-list -$line-length-sm: 40ch !default; -$line-length-md: 80ch !default; +$line-length-sm: 40ch !default; +$line-length-md: 80ch !default; $letter-spacing-base: $spacer * -.005 !default; // -0.1px diff --git a/site/content/docs/5.1/utilities/text.md b/site/content/docs/5.1/utilities/text.md index 3d3e7adadc..1912664978 100644 --- a/site/content/docs/5.1/utilities/text.md +++ b/site/content/docs/5.1/utilities/text.md @@ -103,7 +103,7 @@ Change the line height with `.lh-*` utilities. ## Line length -Limit the line length with `.ll-*` utilities. It applies `max-width` rule to an element with a width based on `ch` dimension. It only applies on [block-level elements](https://developer.mozilla.org/fr/docs/Web/HTML/Block-level_elements) and not on [inline elements](https://developer.mozilla.org/fr/docs/Web/HTML/Inline_elements). +Limit the line length with `.ll-*` utilities. It applies `max-width` rule to an element with a width based on `ch` dimension. It only applies on [block-level elements](https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements) and not on [inline elements](https://developer.mozilla.org/en/docs/Web/HTML/Inline_elements). {{< example >}}

This is a long paragraph written to show how the line-length of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

From e72a831076a05d751a7f179b2fef9677807f0f01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 22 Nov 2021 10:39:26 +0100 Subject: [PATCH 4/5] Minor adjustments --- site/content/docs/5.1/getting-started/accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.1/getting-started/accessibility.md b/site/content/docs/5.1/getting-started/accessibility.md index 50f44d604b..5f4d326647 100644 --- a/site/content/docs/5.1/getting-started/accessibility.md +++ b/site/content/docs/5.1/getting-started/accessibility.md @@ -81,7 +81,7 @@ Boosted provides `target-size()` mixin to ensure a minimum target size, adding a ### Maximum line length -When writing a paragraph, it is commonly admitted that a line should have 80 characters as a maximum. This phenomenon is carefully explained at [C20 : Using relative measurements to set column widths](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C20). +When writing a paragraph, it is commonly admitted that a line should have 80 characters as a maximum. This phenomenon is carefully explained at [C20: Using relative measurements to set column widths](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C20). This feature is a bit more explained at [text utilities](/docs/5.1/utilities/text/#line-length). From a75a4e476a5f2ae7a48739abf45b4f12c2774c25 Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Mon, 22 Nov 2021 11:52:38 +0100 Subject: [PATCH 5/5] feat(lineLength): Minor fixes Signed-off-by: louismaximepiton --- site/content/docs/5.1/getting-started/accessibility.md | 4 ++-- site/content/docs/5.1/utilities/text.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/site/content/docs/5.1/getting-started/accessibility.md b/site/content/docs/5.1/getting-started/accessibility.md index 5f4d326647..26d4d4e824 100644 --- a/site/content/docs/5.1/getting-started/accessibility.md +++ b/site/content/docs/5.1/getting-started/accessibility.md @@ -81,9 +81,9 @@ Boosted provides `target-size()` mixin to ensure a minimum target size, adding a ### Maximum line length -When writing a paragraph, it is commonly admitted that a line should have 80 characters as a maximum. This phenomenon is carefully explained at [C20: Using relative measurements to set column widths](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C20). +When writing a paragraph, it is commonly admitted that a line should have 80 characters as a maximum. This phenomenon is carefully explained in the [C20 website: Using relative measurements to set column widths](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C20). -This feature is a bit more explained at [text utilities](/docs/5.1/utilities/text/#line-length). +For more information, please [read text utilities]({{< docsref "/utilities/text#line-length" >}}). ## Additional resources diff --git a/site/content/docs/5.1/utilities/text.md b/site/content/docs/5.1/utilities/text.md index 1912664978..67fc9a0cb5 100644 --- a/site/content/docs/5.1/utilities/text.md +++ b/site/content/docs/5.1/utilities/text.md @@ -103,7 +103,7 @@ Change the line height with `.lh-*` utilities. ## Line length -Limit the line length with `.ll-*` utilities. It applies `max-width` rule to an element with a width based on `ch` dimension. It only applies on [block-level elements](https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements) and not on [inline elements](https://developer.mozilla.org/en/docs/Web/HTML/Inline_elements). +Limit the line length with `.ll-*` utilities. It applies `max-width` rule to an element with a width based on `ch` dimension, only on block-level elements and not on inline elements. {{< example >}}

This is a long paragraph written to show how the line-length of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.