Utility classes

Border

ClassCodeDescription
.borderborder: 1px solid currentColorBasic 1px border using the current Color
.border--solidborder-style: solid
.border--dottedborder-style: dotted
.border--dashedborder-style: dashed
.border--*border-style: solid; border-color: currentColorSets the default solid and currentColor
.border--1 to border--10border-width: calc(var(--spacing / 20) * i)

Border Radius

ClassCodeDescription
.border-radiusborder-radius: var(--border-radius)Uses the default defined border-radius
.border-radius--1 to border-radius--10border-radius: calc(var(--spacing / 20) * i)

Opacity

ClassCodeDescription
.opacity--1 to opacity--10opacity: 0.1 to 1

Space

ClassCodeDescription
.space--1 to .space--10padding: ((space() / 5) * $i)
.space-top--1 to .space--10margin-top: ((space() / 5) * $i)

Size

ClassCodeDescription
.width--1 to .width--10width: ((space() / 5) * $i)
.height--1 to .height--10height: ((space() / 5) * $i)

Gap

ClassCodeDescription
.gap--1 to .gap--10--gap: ((space() / 5) * $i); gap: var(--gap); width: calc(100% + (var(--gap) * 0.625))

Font

ClassCodeDescription
.font-size--1 to .font-size--10font-size: (space(0.2) * $i);

Font Weights

ClassCodeDescription
.font-lightfont-weight: 200;