feat(lineLength): Add class to limit line length

.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: $small-line-length,
+        md: $medium-line-length,
+      )
+    ),
     "text-align": (
       responsive: true,
       property: text-align,

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

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).
 <!-- End mod -->
 
 ## Additional resources

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

@@ -101,6 +101,16 @@ 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.
+
+{{< 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 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`.