@citizensadvice/line-limit

Line limit width is 592px. This is based on the ideal words per line for readability.

Usage no npm install needed!

<script type="module">
  import citizensadviceLineLimit from 'https://cdn.skypack.dev/@citizensadvice/line-limit';
</script>

README

Line-limit npm (scoped)

Line limit width is 592px. This is based on the ideal words per line for readability.

Classes

.line-limit-width {
  max-width: $line-limit-width;
}

Responsive line-limit classes

To apply specific classes at set screen widths, use the following classes:

Abbr Value
ns $breakpoint-ns (min-width: 48rem)
m $breakpoint-m (min-width: 48rem, max-width: 64rem)
l $breakpoint-l (min-width: 64rem) 
<p class="line-limit-width-ns">Lorem ipsum</p>

// This will give a line limit of `592px` on devices with a screen width of `48rem +`.

Installation

$ npm install @citizensadvice/line-limit

now import into your stylesheet...

@import '@citizensadvice/line-limit/index.scss';

You can make use of the unpkg service, try adding the link below to the head of your HTML file.

<link src="https://unpkg.com/@citizensadvice/line-limit@latest/build/line-limit.css" />