kernl(docs)

Miscellaneous

More utilities here

Accessibility

sr,
sr--only

Hide an element or text from appearing on screen, but preserve its place in the markup for screen reader accessibility.

skip

An in-template class for styling the "Skip to main content" component.

Appearance

appearance--<value>

ClassProperty & Value
appearance-noneappearance: none;

Aspect Ratios

ar--<something>

ClassProperty & Value
arposition: relative
&::after { content: ''; display: block; height: 0 }
ar--<ratio>,
ar--<ratio>@{$breakpoint}		padding-top: $ar-value
ar--objectposition: absolute
top: 0
left: 0
width: 100%
height: 100%
flex-shrink: 0
min-width: 100%
min-height: 100%
z-index: 100

Box Shadow

bs--<value>

ClassProperty & Value
bsbox-shadow: $box-shadow
bs--mdbox-shadow: $box-shadow-md
bs--lgbox-shadow: $box-shadow-lg
bs--insetbox-shadow: $box-shadow-inset
bs--nonebox-shadow: none

Clears

ClassProperty & Value
cf,
clearfix		@extend %clearfix
clearclear: both

Opacity

o--<value>

ClassProperty & Value
o--100opacity: 1
o--90opacity: 0.9
o--80opacity: 0.8
o--70opacity: 0.7
o--60opacity: 0.6
o--50opacity: 0.5
o--40opacity: 0.4
o--30opacity: 0.3
o--20opacity: 0.2
o--10opacity: 0.1
o--05opacity: 0.05
o--025opacity: 0.025
o--0opacity: 0

Rotations

rotate--<value>

ClassProperty & Value
rotate--45transform: rotate(45deg);
rotate--90transform: rotate(90deg);
rotate--135transform: rotate(135deg);
rotate--180transform: rotate(180deg);
rotate--225transform: rotate(225deg);
rotate--270transform: rotate(270deg);
rotate--315transform: rotate(315deg);

SVG

svg--<value>

ClassProperty & Value
svg--fillfill: currentColor;
svg--strokestroke: currentColor;

←