Widths

Defines the width of an element. char-width's define a width by character length. w- classes can be used for layout and as part of a grid.

• Abbreviations
• Examples
• Installation

Abbreviations

| Abbr | Value | | ------------------- | ---------------------------------------------------------- | | .char-width-4 | 10.8ex | | .char-width-8 | 18ex + 3ex (3ex is equal to the Safari icon displayed) | | .char-width-20 | 38.4ex + 3ex (3ex is equal to the Safari icon displayed) | | .w-quarter | 25% of the containing element | | .w-three-quarters | 75% of the containing element | | .w-third | 33.3333% of the containing element | | .w-two-thirds | 66.66666% of the containing element | | .w-half | 50% of the containing element | | .w-full | 100% of the containing element |

Examples

<input type="text" class="text-input char-width-8" />

// This will limit the max-width of our input element to 10.8ex in width.

Responsive width 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) |

<div>
  <div class="w-full w-half-ns w-quarter-l">...</div>
  <div class="w-full w-half-ns w-quarter-l">...</div>
  <div class="w-full w-half-ns w-quarter-l">...</div>
  <div class="w-full w-half-ns w-quarter-l">...</div>
</div>

// This will give us 4 full-width elements on a mobile device, 4 halves on devices with a min-width
of 48rem and finally 4 quarter sized elements on devices with a width of 64rem and above.

Installation

$ npm install @citizensadvice/widths

now import into your stylesheet...

@import '@citizensadvice/widths/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/widths@latest/build/widths.css" />