Position utilities across breakpoints
<div>
<div class="pos:s">position: static</div>
</div>
<div class="pos:r h:3">
<div class="pos:a">position: absolute</div>
</div>
<div>
<div class="pos:r">position: relative</div>
</div>
<div>
<div class="pos:f" style="position: static">position: fixed</div>
</div>
<div>
<div class="pos:c">position: cover</div>
</div>
Overflow utilities across breakpoints
<div>
<div class="o:a">overflow: auto</div>
</div>
<div>
<div class="o:h">overflow: hidden</div>
</div>
<div>
<div class="o:s">overflow: scroll</div>
</div>
<div>
<div class="o-x:a">overflow-x: auto</div>
</div>
<div>
<div class="o-x:h">overflow-x: hidden</div>
</div>
<div>
<div class="o-x:s">overflow-x: scroll</div>
</div>
<div>
<div class="o-y:a">overflow-y: auto</div>
</div>
<div>
<div class="o-y:h">overflow-y: hidden</div>
</div>
<div>
<div class="o-y:s">overflow-y: scroll</div>
</div>
Z-index utilities across breakpoints
<div>
<div class="z-i:-5">z-index: -5</div>
</div>
<div>
<div class="z-i:-4">z-index: -4</div>
</div>
<div>
<div class="z-i:-3">z-index: -3</div>
</div>
<div>
<div class="z-i:-2">z-index: -2</div>
</div>
<div>
<div class="z-i:-1">z-index: -1</div>
</div>
<div>
<div class="z-i:0">z-index: 0</div>
</div>
<div>
<div class="z-i:1">z-index: 1</div>
</div>
<div>
<div class="z-i:2">z-index: 2</div>
</div>
<div>
<div class="z-i:3">z-index: 3</div>
</div>
<div>
<div class="z-i:4">z-index: 4</div>
</div>
<div>
<div class="z-i:5">z-index: 5</div>
</div>
Utilities for positioning according to the top, across breakpoints
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:0 pos:a b:white">top: 0</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:.1 pos:a b:white">top: .1</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:.2 pos:a b:white">top: .2</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:.3 pos:a b:white">top: .3</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:.4 pos:a b:white">top: .4</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:.5 pos:a b:white">top: .5</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:.6 pos:a b:white">top: .6</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:.7 pos:a b:white">top: .7</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:.8 pos:a b:white">top: .8</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:.9 pos:a b:white">top: .9</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:1 pos:a b:white">top: 1</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:2 pos:a b:white">top: 2</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:3 pos:a b:white">top: 3</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:4 pos:a b:white">top: 4</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:5 pos:a b:white">top: 5</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:6 pos:a b:white">top: 6</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:7 pos:a b:white">top: 7</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:8 pos:a b:white">top: 8</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:9 pos:a b:white">top: 9</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:10 pos:a b:white">top: 10</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-0 pos:a b:white">top: -0</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-.1 pos:a b:white">top: -.1</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-.2 pos:a b:white">top: -.2</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-.3 pos:a b:white">top: -.3</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-.4 pos:a b:white">top: -.4</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-.5 pos:a b:white">top: -.5</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-.6 pos:a b:white">top: -.6</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-.7 pos:a b:white">top: -.7</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-.8 pos:a b:white">top: -.8</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-.9 pos:a b:white">top: -.9</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-1 pos:a b:white">top: -1</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-2 pos:a b:white">top: -2</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-3 pos:a b:white">top: -3</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-4 pos:a b:white">top: -4</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-5 pos:a b:white">top: -5</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-6 pos:a b:white">top: -6</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-7 pos:a b:white">top: -7</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-8 pos:a b:white">top: -8</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-9 pos:a b:white">top: -9</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="top:-10 pos:a b:white">top: -10</div>
</div>
Utilities for positioning according to the bottom, across breakpoints
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:0 pos:a b:white">bottom: 0</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:.1 pos:a b:white">bottom: .1</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:.2 pos:a b:white">bottom: .2</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:.3 pos:a b:white">bottom: .3</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:.4 pos:a b:white">bottom: .4</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:.5 pos:a b:white">bottom: .5</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:.6 pos:a b:white">bottom: .6</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:.7 pos:a b:white">bottom: .7</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:.8 pos:a b:white">bottom: .8</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:.9 pos:a b:white">bottom: .9</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:1 pos:a b:white">bottom: 1</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:2 pos:a b:white">bottom: 2</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:3 pos:a b:white">bottom: 3</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:4 pos:a b:white">bottom: 4</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:5 pos:a b:white">bottom: 5</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:6 pos:a b:white">bottom: 6</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:7 pos:a b:white">bottom: 7</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:8 pos:a b:white">bottom: 8</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:9 pos:a b:white">bottom: 9</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:10 pos:a b:white">bottom: 10</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-0 pos:a b:white">bottom: -0</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-.1 pos:a b:white">bottom: -.1</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-.2 pos:a b:white">bottom: -.2</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-.3 pos:a b:white">bottom: -.3</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-.4 pos:a b:white">bottom: -.4</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-.5 pos:a b:white">bottom: -.5</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-.6 pos:a b:white">bottom: -.6</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-.7 pos:a b:white">bottom: -.7</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-.8 pos:a b:white">bottom: -.8</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-.9 pos:a b:white">bottom: -.9</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-1 pos:a b:white">bottom: -1</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-2 pos:a b:white">bottom: -2</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-3 pos:a b:white">bottom: -3</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-4 pos:a b:white">bottom: -4</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-5 pos:a b:white">bottom: -5</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-6 pos:a b:white">bottom: -6</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-7 pos:a b:white">bottom: -7</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-8 pos:a b:white">bottom: -8</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-9 pos:a b:white">bottom: -9</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="bottom:-10 pos:a b:white">bottom: -10</div>
</div>
Utilities for positioning according to the left, across breakpoints
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:0 pos:a b:white">left: 0</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:.1 pos:a b:white">left: .1</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:.2 pos:a b:white">left: .2</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:.3 pos:a b:white">left: .3</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:.4 pos:a b:white">left: .4</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:.5 pos:a b:white">left: .5</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:.6 pos:a b:white">left: .6</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:.7 pos:a b:white">left: .7</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:.8 pos:a b:white">left: .8</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:.9 pos:a b:white">left: .9</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:1 pos:a b:white">left: 1</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:2 pos:a b:white">left: 2</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:3 pos:a b:white">left: 3</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:4 pos:a b:white">left: 4</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:5 pos:a b:white">left: 5</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:6 pos:a b:white">left: 6</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:7 pos:a b:white">left: 7</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:8 pos:a b:white">left: 8</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:9 pos:a b:white">left: 9</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:10 pos:a b:white">left: 10</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-0 pos:a b:white">left: -0</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-.1 pos:a b:white">left: -.1</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-.2 pos:a b:white">left: -.2</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-.3 pos:a b:white">left: -.3</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-.4 pos:a b:white">left: -.4</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-.5 pos:a b:white">left: -.5</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-.6 pos:a b:white">left: -.6</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-.7 pos:a b:white">left: -.7</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-.8 pos:a b:white">left: -.8</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-.9 pos:a b:white">left: -.9</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-1 pos:a b:white">left: -1</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-2 pos:a b:white">left: -2</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-3 pos:a b:white">left: -3</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-4 pos:a b:white">left: -4</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-5 pos:a b:white">left: -5</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-6 pos:a b:white">left: -6</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-7 pos:a b:white">left: -7</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-8 pos:a b:white">left: -8</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-9 pos:a b:white">left: -9</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="left:-10 pos:a b:white">left: -10</div>
</div>
Utilities for positioning according to the right, across breakpoints
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:0 pos:a b:white">right: 0</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:.1 pos:a b:white">right: .1</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:.2 pos:a b:white">right: .2</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:.3 pos:a b:white">right: .3</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:.4 pos:a b:white">right: .4</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:.5 pos:a b:white">right: .5</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:.6 pos:a b:white">right: .6</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:.7 pos:a b:white">right: .7</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:.8 pos:a b:white">right: .8</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:.9 pos:a b:white">right: .9</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:1 pos:a b:white">right: 1</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:2 pos:a b:white">right: 2</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:3 pos:a b:white">right: 3</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:4 pos:a b:white">right: 4</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:5 pos:a b:white">right: 5</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:6 pos:a b:white">right: 6</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:7 pos:a b:white">right: 7</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:8 pos:a b:white">right: 8</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:9 pos:a b:white">right: 9</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:10 pos:a b:white">right: 10</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-0 pos:a b:white">right: -0</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-.1 pos:a b:white">right: -.1</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-.2 pos:a b:white">right: -.2</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-.3 pos:a b:white">right: -.3</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-.4 pos:a b:white">right: -.4</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-.5 pos:a b:white">right: -.5</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-.6 pos:a b:white">right: -.6</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-.7 pos:a b:white">right: -.7</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-.8 pos:a b:white">right: -.8</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-.9 pos:a b:white">right: -.9</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-1 pos:a b:white">right: -1</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-2 pos:a b:white">right: -2</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-3 pos:a b:white">right: -3</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-4 pos:a b:white">right: -4</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-5 pos:a b:white">right: -5</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-6 pos:a b:white">right: -6</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-7 pos:a b:white">right: -7</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-8 pos:a b:white">right: -8</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-9 pos:a b:white">right: -9</div>
</div>
<div class="p:2 h:10 pos:r b m-b:1">
<div class="right:-10 pos:a b:white">right: -10</div>
</div>