1.0.3 • Published 6 years ago
@citizensadvice/heights v1.0.3
Heights 
Defines the height of an element.
Abbreviations
| Abbr | Value |
|---|---|
height- | Prefix |
min-height- | Prefix |
vh- | Prefix - Screen height percentage (to be used with percentage classes below) |
min-vh- | Prefix - Minimum screen height percentage |
0 | 0rem (0px) |
1 | $height-1 0.25rem (4px) |
2 | $height-2 0.5rem (8px) |
3 | $height-3 0.75rem (12px) |
4 | $height-4 1rem (16px) |
5 | $height-5 1.5rem (24px) |
25 | 25% |
50 | 50% |
75 | 75% |
100 | 100% |
<div class="height-5">Lorem ipsum</div>
// This will give our element a height of 24pxResponsive height 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 class="height-3 height-5-ns">Lorem ipsum</div>
// This will give our element a height of 12px on devices with a width below 48rem and 24px on
device widths of 48rem and aboveInstallation
$ npm install @citizensadvice/heightsnow import into your stylesheet...
@import '@citizensadvice/heights/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/heights@latest/build/heights.css" />