@citizensadvice/positioning

Defines the position behavior of the element.

Usage no npm install needed!

<script type="module">
  import citizensadvicePositioning from 'https://cdn.skypack.dev/@citizensadvice/positioning';
</script>

README

Positioning npm (scoped)

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/positioning

now 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" />