1.0.3 • Published 6 years ago
@citizensadvice/positioning v1.0.3
Positioning 
Defines the position behavior of the element.
Classes
.static { position: static }
.relative { position: relative }
.absolute { position: absolute }
.fixed { position: fixed }Positions
| Class name | value |
|---|---|
.top- | top: |
.right- | right: |
.bottom- | bottom: |
.left- | left: |
0 | $spacing-0 (0rem / 0px) |
1 | $spacing-1 (0.25rem / 4px) |
2 | $spacing-2 (0.5rem / 8px) |
3 | $spacing-3 (0.75rem / 12px) |
4 | $spacing-4 (1rem / 16px) |
5 | $spacing-5 (1.5rem / 24px) |
6 | $spacing-6 (2rem / 32px) |
7 | $spacing-7 (2.5rem / 40px) |
<header class="absolute top-0">...</header>
<footer class="absolute bottom-0">...</footer>
// This will pin our header and footer to the top and bottom respectively, of the window.Responsive position 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) |
<header class="fixed relative-ns">Lorem ipsum</header>
// This will pin make our header stick to the top of the page on devices with a screen width of up
to 48rem.Installation
$ npm install @citizensadvice/positioningnow import into your stylesheet...
@import '@citizensadvice/positioning/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/positioning@latest/build/positioning.css" />