feat(utilities): add classes to limit the extent of line lengths (#883)

.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",

scss/_utilities.scss

@@ -478,6 +478,14 @@ $utilities: map-merge(
         lg: $line-height-lg,
       )
     ),
+    "line-length": (
+      property: max-width,
+      class: ll,
+      values: (
+        sm: $line-length-sm,
+        md: $line-length-md,
+      )
+    ),
     "text-align": (
       responsive: true,
       property: text-align,

scss/_variables.scss

@@ -685,6 +685,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
+
+$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

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 in the [C20 website: Using relative measurements to set column widths](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/C20).
+
+For more information, please [read text utilities]({{< docsref "/utilities/text#line-length" >}}).
 <!-- End mod -->
 
 ## Additional resources

site/content/docs/5.1/utilities/text.md

@@ -101,6 +101,17 @@ Change the line height with `.lh-*` utilities.
 <p class="lh-lg">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.</p>
 {{< /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, only on block-level elements and not on inline elements.
+
+{{< example >}}
+<p class="ll-sm">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.</p>
+<p class="ll-md">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.</p>
+<p><span class="ll-md"><strong>Inline element.</strong> 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.</span></p>
+<p class="ll-md fs-3">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.</p>
+{{< /example >}}
+
 ## Monospace
 
 Change a selection to our monospace font stack with `.font-monospace`.