OXYMADECHEATSHEET
Learn & Documentation
spacing
padding

min-max calc padding classes

all
p-0
padding: 0rem;
p-1
padding: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);
p-2
padding: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);
p-3
padding: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);
p-4
padding: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);
p-5
padding: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);
p-6
padding: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);
p-8
padding: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);
p-10
padding: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);
p-12
padding: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);
p-14
padding: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);
p-16
padding: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);
p-20
padding: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);
p-24
padding: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);
p-28
padding: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);
p-32
padding: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);
p-36
padding: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);
p-40
padding: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);
py-1
padding-top: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem); padding-bottom: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);
py-2
padding-top: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem); padding-bottom: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);
py-3
padding-top: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem); padding-bottom: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);
py-4
padding-top: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem); padding-bottom: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);
py-5
padding-top: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem); padding-bottom: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);
py-6
padding-top: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem); padding-bottom: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);
py-8
padding-top: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem); padding-bottom: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);
py-10
padding-top: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem); padding-bottom: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);
py-12
padding-top: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem); padding-bottom: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);
py-14
padding-top: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem); padding-bottom: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);
py-16
padding-top: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem); padding-bottom: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);
py-20
padding-top: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem); padding-bottom: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);
py-24
padding-top: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem); padding-bottom: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);
py-28
padding-top: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem); padding-bottom: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);
py-32
padding-top: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem); padding-bottom: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);
py-36
padding-top: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem); padding-bottom: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);
py-40
padding-top: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem); padding-bottom: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);
px-1
padding-left: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem); padding-right: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);
px-2
padding-left: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem); padding-right: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);
px-3
padding-left: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem); padding-right: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);
px-4
padding-left: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem); padding-right: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);
px-5
padding-left: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem); padding-right: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);
px-6
padding-left: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem); padding-right: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);
px-8
padding-left: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem); padding-right: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);
px-10
padding-left: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem); padding-right: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);
px-12
padding-left: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem); padding-right: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);
px-14
padding-left: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem); padding-right: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);
px-16
padding-left: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem); padding-right: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);
px-20
padding-left: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem); padding-right: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);
px-24
padding-left: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem); padding-right: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);
px-28
padding-left: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem); padding-right: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);
px-32
padding-left: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem); padding-right: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);
px-36
padding-left: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem); padding-right: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);
px-40
padding-left: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem); padding-right: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);
pt-0
padding-top: 0rem;
pt-1
padding-top: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);
pt-2
padding-top: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);
pt-3
padding-top: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);
pt-4
padding-top: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);
pt-5
padding-top: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);
pt-6
padding-top: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);
pt-8
padding-top: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);
pt-10
padding-top: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);
pt-12
padding-top: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);
pt-14
padding-top: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);
pt-16
padding-top: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);
pt-20
padding-top: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);
pt-24
padding-top: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);
pt-28
padding-top: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem));
pt-32
padding-top: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);
pt-36
padding-top: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);
pt-40
padding-top: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);
pr-0
padding-right: 0rem;
pr-1
padding-right: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);
pr-2
padding-right: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);
pr-3
padding-right: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);
pr-4
padding-right: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);
pr-5
padding-right: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);
pr-6
padding-right: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);
pr-8
padding-right: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);
pr-10
padding-right: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);
pr-12
padding-right: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);
pr-14
padding-right: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);
pr-16
padding-right: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);
pr-20
padding-right: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);
pr-24
padding-right: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);
pr-28
padding-right: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);
pr-32
padding-right: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);
pr-36
padding-right: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);
pr-40
padding-right: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);
pb-0
padding-bottom: 0rem;
pb-1
padding-bottom: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);
pb-2
padding-bottom: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);
pb-3
padding-bottom: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);
pb-4
padding-bottom: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);
pb-5
padding-bottom: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);
pb-6
padding-bottom: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);
pb-8
padding-bottom: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);
pb-10
padding-bottom: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);
pb-12
padding-bottom: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);
pb-14
padding-bottom: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);
pb-16
padding-bottom: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);
pb-20
padding-bottom: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);
pb-24
padding-bottom: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);
pb-28
padding-bottom: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);
pb-32
padding-bottom: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);
pb-36
padding-bottom: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);
pb-40
padding-bottom: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);
pl-0
padding-left: 0rem;
pl-1
padding-left: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);
pl-2
padding-left: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);
pl-3
padding-left: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);
pl-4
padding-left: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);
pl-5
padding-left: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);
pl-6
padding-left: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);
pl-8
padding-left: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);
pl-10
padding-left: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);
pl-12
padding-left: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);
pl-14
padding-left: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);
pl-16
padding-left: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);
pl-20
padding-left: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);
pl-24
padding-left: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);
pl-28
padding-left: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);
pl-32
padding-left: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);
pl-36
padding-left: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);
pl-40
padding-left: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);
margin

min-max calc margin classes have max-0.28rem & min-0.15rem

all
xl
lg
md
sm
mx-auto
margin-left: auto; margin-right: auto;
my-auto
margin-top: auto; margin-bottom: auto;
ml-auto
margin-left: auto;
mr-auto
margin-right: auto;
mb-auto
margin-bottom: auto;
mt-auto
margin-top: auto;
mr-0
margin-right: 0rem;
mb-0
margin-bottom: 0rem;
ml-0
margin-left: 0rem;
mt-0
margin-top: 0rem;
mr-1
margin-right: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);
mb-1
margin-bottom: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);
ml-1
margin-left: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);
mt-1
margin-top: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);
mr-2
margin-right: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);
mb-2
margin-bottom: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);
ml-2
margin-left: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);
mt-2
margin-top: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);
mr-3
margin-right: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);
mb-3
margin-bottom: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);
ml-3
margin-left: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);
mt-3
margin-top: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);
mr-4
margin-right: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);
mb-4
margin-bottom: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);
ml-4
margin-left: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);
mt-4
margin-top: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);
mr-5
margin-right: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);
mb-5
margin-bottom: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);
ml-5
margin-left: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);
mt-5
margin-top: min(max(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.75))), 2rem);
mr-6
margin-right: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);
mb-6
margin-bottom: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);
ml-6
margin-left: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);
mt-6
margin-top: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);
mr-8
margin-right: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);
mb-8
margin-bottom: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);
ml-8
margin-left: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);
mt-8
margin-top: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);
mr-10
margin-right: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);
mb-10
margin-bottom: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);
ml-10
margin-left: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);
mt-10
margin-top: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.4286))), 4rem);
mr-12
margin-right: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);
mb-12
margin-bottom: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);
ml-12
margin-left: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);
mt-12
margin-top: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);
mr-14
margin-right: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);
mb-14
margin-bottom: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);
ml-14
margin-left: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);
mt-14
margin-top: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2))), 5.6rem);
mr-16
margin-right: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);
mb-16
margin-bottom: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);
ml-16
margin-left: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);
mt-16
margin-top: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);
mr-20
margin-right: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);
mb-20
margin-bottom: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);
ml-20
margin-left: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);
mt-20
margin-top: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);
mr-24
margin-right: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);
mb-24
margin-bottom: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);
ml-24
margin-left: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);
mt-24
margin-top: min(max(6.72rem, calc(6.72rem + ((1vw - 0.32rem) * 3.6))), 9.6rem);
mr-28
margin-right: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);
mb-28
margin-bottom: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);
ml-28
margin-left: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);
mt-28
margin-top: min(max(7.84rem, calc(7.84rem + ((1vw - 0.32rem) * 4))), 11.2rem);
mr-32
margin-right: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);
mb-32
margin-bottom: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);
ml-32
margin-left: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);
mt-32
margin-top: min(max(8.96rem, calc(8.96rem + ((1vw - 0.32rem) * 4.5714))), 12.8rem);
mr-36
margin-right: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);
mb-36
margin-bottom: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);
ml-36
margin-left: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);
mt-36
margin-top: min(max(10.08rem, calc(10.08rem + ((1vw - 0.32rem) * 5.1429))), 14.4rem);
mr-40
margin-right: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);
mb-40
margin-bottom: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);
ml-40
margin-left: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);
mt-40
margin-top: min(max(11.2rem, calc(11.2rem + ((1vw - 0.32rem) * 5.7143))), 16rem);
space between

Sets left or top (x or y) margin between child elements, but skips the first element

all
space-y-0
margin-top: 0;
space-x-0
margin-right: 0;
space-y-1
margin-top: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);
space-x-1
margin-right: min(max(0.28rem, calc(0.28rem + ((1vw - 0.32rem) * 0.15))), 0.4rem);
space-y-2
margin-top: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);
space-x-2
margin-right: min(max(0.56rem, calc(0.56rem + ((1vw - 0.32rem) * 0.3))), 0.8rem);
space-y-3
margin-top: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);
space-x-3
margin-right: min(max(0.84rem, calc(0.84rem + ((1vw - 0.32rem) * 0.45))), 1.2rem);
space-y-4
margin-top: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);
space-x-4
margin-right: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem);
space-y-6
margin-top: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);
space-x-6
margin-right: min(max(1.68rem, calc(1.68rem + ((1vw - 0.32rem) * 0.9))), 2.4rem);
space-y-8
margin-top: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);
space-x-8
margin-right: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem);
space-y-10
margin-top: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.5))), 4rem);
space-x-10
margin-right: min(max(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.5))), 4rem);
space-y-12
margin-top: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);
space-x-12
margin-right: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem);
space-y-14
margin-top: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2.1))), 5.6rem);
space-x-14
margin-right: min(max(3.92rem, calc(3.92rem + ((1vw - 0.32rem) * 2.1))), 5.6rem);
space-y-16
margin-top: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);
space-x-16
margin-right: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem);
space-y-20
margin-top: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);
space-x-20
margin-right: min(max(5.6rem, calc(5.6rem + ((1vw - 0.32rem) * 3))), 8rem);
sizing
width

Sets the width of an element

all
xl
lg
md
sm
w-auto
width: auto;
w-1by2
width: 50%;
w-1by3
width: 33.333333%;
w-2by3
width: 66.666667%;
w-1by4
width: 25%;
w-2by4
width: 50%;
w-3by4
width: 75%;
w-1by6
width: 16.666667%;
w-2by6
width: 33.333333%;
w-3by6
width: 50%;
w-4by6
width: 66.666667%;
w-5by6
width: 83.333333%;
w-1by5
width: 20%;
w-10p
width: 10%;
w-full
width: 100%;
w-screen
width: 100vw;
max-width

Sets the maxiumum width of an element

all
max-w-0
max-width: 0rem;
max-w-xs
max-width: 31.9rem;
max-w-sm
max-width: 47.9rem;
max-w-md
max-width: 76.7rem;
max-w-lg
max-width: 99.1rem;
max-w-xl
max-width: 111.9rem;
max-w-full
max-width: 100rem;
max-w-prose
max-width: 65ch;
height

Sets the height of an element

all
xl
lg
md
sm
h-auto
height: auto;
h-full
height: 100%;
h-screen
height: 100vh;
flexbox
display

Sets element to be a flex container

all
xl
lg
md
sm
flex
display: flex;
inline-block
display: inline-block;
hidden
display: none;
flex-direction

Sets direction of flex items

all
flex-row
flex-direction: row;
flex-col
flex-direction: column;
flex-wrap

Creates how flex items wrap

all
flex-wrap
flex-wrap: wrap;
justify-content

Controls how flex items are positioned along container's main axis

all
justify-start
justify-content: flex-start;
justify-end
justify-content: flex-end;
justify-center
justify-content: center;
justify-between
justify-content: space-between;
align-items

Sets direction of flex items

all
xl
lg
md
sm
horizontal
display: flex; flex-direction: row;
horizontal-wrap
display: flex; flex-direction: row; flex-wrap: wrap;
vertical
display: flex; flex-direction: column;
centered
align-items: center; align-content: center; justify-content: center; text-align: center;
content-center
align-content: center;
content-between
display: flex; align-content: space-between; justify-content: space-between;
content-around
display: flex; justify-content: space-around;
items-stretch
align-items: stretch;
items-start
align-items: flex-start;
items-end
align-items: flex-end;
items-baseline
align-items: baseline;
items-center
align-items: center;
align-self

Controls how an individual flex item is positioned along container's cross axis

all
self-start
align-self: flex-start;
self-end
align-self: flex-end;
self-center
align-self: center;
self-stretch
align-self: stretch;
order

Controls how flex items are ordered

all
lg
md
sm
order-1
order: 1;
order-2
order: 2;
order-3
order: 3;
order-4
order: 4;
order-5
order: 5;
order-6
order: 6;
order-first
order: -9999;
order-last
order: 9999;
order-none
order: 0;
borders
border-color

Sets border color

all
border-color
border-color: var(--border-color);
border-color-alt
border-color: var(--border-alt-color);
border-color-tertiary
border-color: var(--tertiary-color);
border-color-secondary
border-color: var(--secondary-color);
border-color-primary
border-color: var(--primary-color);
border-width

Sets border width in increments of 1px

all
border-none
border-width: 0rem; border-style: solid;
border-px
border-width: 0.1rem; border-style: solid;
border-2
border-width: 0.2rem; border-style: solid;
border-t
border-top-width: 0.1rem; border-top-style: solid;
border-r
border-right-width: 0.1rem; border-right-style: solid;
border-b
border-bottom-width: 0.1rem; border-bottom-style: solid;
border-l
border-left-width: 0.1rem; border-left-style: solid;
border-radius

Sets border radius

all
md
rounded-sm
border-radius: 0.2rem;
rounded
border-radius: 0.4rem;
rounded-md
border-radius: 0.6rem;
rounded-lg
border-radius: 0.8rem;
rounded-xl
border-radius: 1.6rem;
rounded-full
border-radius: 999.901rem;
rounded-r-sm
border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem;
rounded-l-sm
border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem;
rounded-b-sm
border-bottom-right-radius: 0.2rem; border-bottom-left-radius: 0.2rem;
rounded-t-sm
border-top-right-radius: 0.2rem; border-top-left-radius: 0.2rem;
rounded-r
border-top-right-radius: 0.4rem; border-bottom-right-radius: 0.4rem;
rounded-l
border-top-left-radius: 0.4rem; border-bottom-left-radius: 0.4rem;
rounded-b
border-bottom-right-radius: 0.4rem; border-bottom-left-radius: 0.4rem;
rounded-t
border-top-right-radius: 0.4rem; border-top-left-radius: 0.4rem;
rounded-r-md
border-top-right-radius: 0.6rem; border-bottom-right-radius: 0.6rem;
rounded-l-md
border-top-left-radius: 0.6rem; border-bottom-left-radius: 0.6rem;
rounded-b-md
border-bottom-right-radius: 0.6rem; border-bottom-left-radius: 0.6rem;
rounded-t-md
border-top-right-radius: 0.6rem; border-top-left-radius: 0.6rem;
rounded-r-lg
border-top-right-radius: 0.8rem; border-bottom-right-radius: 0.8rem;
rounded-l-lg
border-top-left-radius: 0.8rem; border-bottom-left-radius: 0.8rem;
rounded-b-lg
border-bottom-right-radius: 0.8rem; border-bottom-left-radius: 0.8rem;
rounded-t-lg
border-top-right-radius: 0.8rem; border-top-left-radius: 0.8rem;
layout
overflow

Sets how to handle content that's too big for its container

all
overflow-hidden
overflow: hidden;
overflow-y-scroll
overflow-y: scroll;
object-fit

Sets how the content of a replaced element (img or video tag) should be resized

all
object-cover
object-fit: cover;
object-bottom
object-position: bottom;
object-left
object-position: left;
object-right
object-position: right;
object-top
object-position: top;
object-contain
object-fit: contain;
z-index

Sets the z-order ('stack order') of a positioned element

all
z-99
z-index: 99;
typography
letter-spacing

Sets the spacing between letters

all
tracking-wide
letter-spacing: 0.05rem;
tracking-wider
letter-spacing: 0.1rem;
text-align

Sets the alignment of text

all
text-left
text-align: left;
text-center
text-align: center;
text-right
text-align: right;
text-transform

Sets the capitalization of text

all
uppercase
text-transform: uppercase;
lowercase
text-transform: lowercase;
capitalize
text-transform: capitalize;
text-decoration

Sets the text-decoration of an element

all
underline
text-decoration: underline;
hover-underline
text-decoration: underline;
font-family

Sets the font family

all
font-headings
font-family: 'Display';
font-text
font-family: 'Text';
font-weight

Sets the font weight

all
font-normal
font-weight: 400;
font-medium
font-weight: 500;
font-semibold
font-weight: 600;
font-bold
font-weight: 700;
font-size

Sets the font size

all
text-xs
font-size: 1.2rem; line-height: 1.6;
text-sm
font-size: 1.4rem; line-height: 1.6;
text-base
font-size: 1.6rem; line-height: 1.6;
text-lg
font-size: min(max(1.7rem, calc(1.7rem + ((1vw - 0.32rem) * 0.125))), 1.8rem); line-height: min(max(2.55rem, calc(2.55rem + ((1vw - 0.32rem) * 0.1875))), 2.7rem);
text-xl
font-size: min(max(1.8rem, calc(1.8rem + ((1vw - 0.32rem) * 0.25))), 2rem); line-height: min(max(2.4rem, calc(2.4rem + ((1vw - 0.32rem) * 0.5))), 2.8rem);
text-2xl
font-size: min(max(2.04rem, calc(2.04rem + ((1vw - 0.32rem) * 0.45))), 2.4rem); line-height: min(max(2.4rem, calc(2.4rem + ((1vw - 0.32rem) * 1))), 3.2rem);
text-3xl
font-size: min(max(2.4rem, calc(2.4rem + ((1vw - 0.32rem) * 0.75))), 3rem); line-height: min(max(3.2rem, calc(3.2rem + ((1vw - 0.32rem) * 0.5))), 3.6rem);
text-4xl
font-size: min(max(2.7rem, calc(2.7rem + ((1vw - 0.32rem) * 1.125))), 3.6rem); line-height: min(max(3.51rem, calc(3.51rem + ((1vw - 0.32rem) * 0.6125))), 4rem);
text-5xl
font-size: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem); line-height: min(max(3.8rem, calc(3.8rem + ((1vw - 0.32rem) * 1.25))), 4.8rem);
text-6xl
font-size: min(max(3.9rem, calc(3.9rem + ((1vw - 0.32rem) * 2.625))), 6rem); line-height: 1;
text-7xl
font-size: min(max(4.32rem, calc(4.32rem + ((1vw - 0.32rem) * 3.6))), 7.2rem); line-height: 1;
text-8xl
font-size: min(max(5.28rem, calc(5.28rem + ((1vw - 0.32rem) * 5.4))), 9.6rem); line-height: 1;
text-9xl
font-size: min(max(6.4rem, calc(6.4rem + ((1vw - 0.32rem) * 8))), 12.8rem); line-height: 1;
text-color

Sets the text color

all
color-primary
color: var(--primary-color);
color-secondary
color: var(--secondary-color);
color-tertiary
color: var(--tertiary-color);
color-dark
color: color-dark;
color-paragraph
color: var(--paragraph-color);
color-light
color: color-light;
color-paragraph-alt
color: var(--paragraph-alt-color);
color-black
color: var(--black-color);
color-white
color: var(--white-color);
filter
blur

Sets blur filter on elements (use with filter utility)

all
blur-sm
filter: blur; filter-amount-blur: 4
blur
filter: blur; filter-amount-blur: 8
blur-md
filter: blur; filter-amount-blur: 12
blur-lg
filter: blur; filter-amount-blur: 16
blur-xl
filter: blur; filter-amount-blur: 24
backgrounds
background-color

Sets background color

all
bg-primary
background-color: var(--primary-color);
bg-secondary
background-color: var(--secondary-color);
bg-primary-hover
background-color: var(--primary-hover-color);
bg-secondary-hover
background-color: var(--secondary-hover-color);
bg-primary-alt
background-color: var(--primary-alt-color);
bg-secondary-alt
background-color: var(--secondary-alt-color);
bg-primary-alt-hover
background-color: var(--primary-alt-hover-color);
bg-secondary-alt-hover
background-color: var(--secondary-alt-hover-color);
bg-tertiary
background-color: var(--tertiary-color);
bg-alt
background-color: var(--background-alt-color);
bg
background-color: var(--background-color);
bg-white
background-color: var(--white-color);
bg-black
background-color: var(--black-color);
bg-placeholder
background-color: var(--placeholder-color);
bg-placeholder-alt
background-color: var(--placeholder-alt-color);
miscellaneous
box-shadow

Sets the shadow around an element

all
shadow-inner
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
shadow-none
box-shadow: 0px 0px #0000;
shadow-xs
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
shadow-sm
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
shadow
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
shadow-md
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
shadow-lg
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
shadow-xl
box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04);
shadow-2xl
box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
opacity

Sets the transparency of an element

all
opacity-0
opacity: 0;
opacity-25
opacity: 0.25;
opacity-50
opacity: 0.5;
opacity-75
opacity: 0.75;
opacity-100
opacity: 1;
hover-opacity-0
opacity: 0;
hover-opacity-25
opacity: 0.25;
hover-opacity-50
opacity: 0.5;
hover-opacity-75
opacity: 0.75;
hover-opacity-100
opacity: 1;
cursor-pointer

Changes the cursor when hovering over an element

all
cursor-pointer
cursor: pointer;
grid
grid-display

Sets the display box type of an element

all
grid
display: grid;
inline-grid
display: inline-grid;
grid-template-columns

Defines columns for grid layout

all
xl
lg
md
sm
grid-cols-1
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-none
grid-template-columns: none;
grid-template-rows

Defines rows for grid layout

all
grid-rows-1
grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2
grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3
grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-none
grid-template-rows: none;
grid-auto-flow

Controls the auto placement of grid elements

all
grid-flow-row
grid-auto-flow: row;
grid-flow-row-dense
grid-auto-flow: row dense;
grid-flow-col
grid-auto-flow: column;
grid-flow-col-dense
grid-auto-flow: column dense;
gap

Sets the gaps (gutters) between rows and columns

all
xl
lg
md
sm
gap-px
grid-gap: 1px; gap: 1px;
gap-2
grid-gap: .8rem; gap: .8rem;
gap-4
grid-gap: 1.6rem; gap: 1.6rem;
gap-6
grid-gap: 2.4rem; gap: 2.4rem;
gap-8
grid-gap: 3.2rem; gap: 3.2rem;
gap-10
grid-gap: 4rem; gap: 4rem;
gap-12
grid-gap: 4.8rem; gap: 4.8rem;
gap-14
grid-gap: 5.6rem; gap: 5.6rem;
gap-16
grid-gap: 6.4rem; gap: 6.4rem;
gap-20
grid-gap: 8rem; gap: 8rem;
gap-24
grid-gap: 9.6rem; gap: 9.6rem;
row-gap-0
grid-row-gap: 0rem; row-gap: 0rem;
row-gap-2
grid-row-gap: .8rem; row-gap: .8rem;
row-gap-4
grid-row-gap: 1.6rem; row-gap: 1.6rem;
row-gap-6
grid-row-gap: 2.4rem; row-gap: 2.4rem;
row-gap-8
grid-row-gap: 3.2rem; row-gap: 3.2rem;
row-gap-12
grid-row-gap: 4.8rem; row-gap: 4.8rem;
grid-column-start-end

Sets a grid item size and location within the grid column

all
xl
lg
md
sm
col-end-1
ms-grid-column-span: 1; grid-column-end: 1;
col-end-2
ms-grid-column-span: 2; grid-column-end: 2;
col-end-3
ms-grid-column-span: 3; grid-column-end: 3;
col-end-4
ms-grid-column-span: 4; grid-column-end: 4;
col-end-5
ms-grid-column-span: 5; grid-column-end: 5;
col-end-6
ms-grid-column-span: 6; grid-column-end: 6;
col-end-7
ms-grid-column-span: 7; grid-column-end: 7;
col-end-auto
ms-grid-column-span: auto; grid-column-end: auto;
col-start-1
ms-grid-column: 1; grid-column-start: 1;
col-start-2
ms-grid-column: 2; grid-column-start: 2;
col-start-3
ms-grid-column: 3; grid-column-start: 3;
col-start-4
ms-grid-column: 4; grid-column-start: 4;
col-start-5
ms-grid-column: 5; grid-column-start: 5;
col-start-6
ms-grid-column: 6; grid-column-start: 6;
col-start-7
ms-grid-column: 7; grid-column-start: 7;
col-start-auto
ms-grid-column: auto; grid-column-start: auto;
col-auto
grid-column: auto;
col-span-1
ms-grid-column-span: 1; grid-column: span 1/span 1;
col-span-2
ms-grid-column-span: 2; grid-column: span 2/span 2;
col-span-3
ms-grid-column-span: 3; grid-column: span 3/span 3;
col-span-4
ms-grid-column-span: 4; grid-column: span 4/span 4;
col-span-5
ms-grid-column-span: 5; grid-column: span 5/span 5;
col-span-6
ms-grid-column-span: 6; grid-column: span 6/span 6;
grid-row-start-end

Sets a grid item size and location within the grid row

all
lg
md
row-auto
grid-row: auto;
row-span-1
ms-grid-row-span: 1; grid-row: span 1/span 1;
row-span-2
ms-grid-row-span: 2; grid-row: span 2/span 2;
row-span-3
ms-grid-row-span: 3; grid-row: span 3/span 3;
row-start-1
ms-grid-row: 1; grid-row-start: 1;
row-start-2
ms-grid-row: 2; grid-row-start: 2;
row-start-3
ms-grid-row: 3; grid-row-start: 3;
row-start-4
ms-grid-row: 4; grid-row-start: 4;
row-start-auto
ms-grid-row: auto; grid-row-start: auto;
row-end-1
ms-grid-row-span: 1; grid-row-end: 1;
row-end-2
ms-grid-row-span: 2; grid-row-end: 2;
row-end-3
ms-grid-row-span: 3; grid-row-end: 3;
row-end-4
ms-grid-row-span: 4; grid-row-end: 4;
row-end-auto
ms-grid-row-span: auto; grid-row-end: auto;
extras
Grid power utilities

Readymade power grid utilities

all
auto-grid-2
2 column responsive auto grid
auto-grid-3
3 column responsive auto grid
auto-grid-4
4 column responsive auto grid
grid-60-40
display: grid; grid-template-columns: 3fr 2fr;
grid-40-60
display: grid; grid-template-columns: 2fr 3fr;
grid-33-66
display: grid; grid-template-columns: 1fr 2fr;
grid-66-33
display: grid; grid-template-columns: 2fr 1fr;
grid-75-25
display: grid; grid-template-columns: 3fr 1fr;
grid-25-75
display: grid; grid-template-columns: 1fr 3fr;
Section padding utilities

Simple section padding utilities

all
section-pt-0
no padding on section top
section-pt-sm
half padding on section top
section-pb-0
no padding on section bottom
section-pb-sm
half padding on section bottom
section-py-0
no padding on section top & bottom
section-py-sm
half padding on section top & bottom
Breakout utility classes

Useful utility classes to design out of the box layouts

all
xl
lg
md
sm
breakout-70
Breakout to 70vw on above 1168px viewport wide desktops
breakout-80
Breakout to 80vw on above 1168px viewport wide desktops
breakout-90
Breakout to 90vw on above 1168px viewport wide desktops
breakout-100
Breakout to 100vw on above 1168px viewport wide desktops
button

Buttons depends on the design kit

all
btn-s
small sized button, depends on the design kit
btn-m
medium sized button, depends on the design kit
btn-l
large sized button, depends on the design kit
btn-primary
button with primary color, depends on the design kit
btn-secondary
button with secondary color, depends on the design kit
btn-white
button with white color, depends on the design kit
btn-trans
button with transparent color, depends on the design kit
btn-primary-alt
button with primary-alt color, depends on the design kit
btn-secondary-alt
button with secondary-alt color, depends on the design kit
icons

Icons depends on the design kit

all
icon-sm-paragraph
small paragraph-color icon, depends on the design kit
icon-sm-primary
small primary-color icon, depends on the design kit
icon-sm-dark
small dark-color icon, depends on the design kit
icon-sm-light
small light-color icon, depends on the design kit
icon-md-paragraph
medium paragraph-color icon, depends on the design kit
icon-md-primary
medium primary-color icon, depends on the design kit
icon-md-dark
medium dark-color icon, depends on the design kit
icon-md-light
medium light-color icon, depends on the design kit
icon-lg-paragraph
large paragraph-color icon, depends on the design kit
icon-lg-primary
large primary-color icon, depends on the design kit
icon-lg-dark
large dark-color icon, depends on the design kit
icon-lg-light
large light-color icon, depends on the design kit
icon-lg-secondary
large secondary-color icon, depends on the design kit
icon-lg-tertiary
large tertiary-color icon, depends on the design kit
icon-xl-primary
extra large primary-color icon, depends on the design kit
icon-xl-dark
extra large dark-color icon, depends on the design kit
icon-xl-light
extra large light-color icon, depends on the design kit
icon-2xl-light
double extra large light-color icon, depends on the design kit
icon-2xl-primary
double extra large primary-color icon, depends on the design kit
icon-2xl-dark
double extra large dark-color icon, depends on the design kit
icon-3xl-light
triple light-color icon, depends on the design kit
icon-solid-sm-primary
small solid primary-color icon, depends on the design kit
icon-solid-sm-light
small solid light-color icon, depends on the design kit
icon-solid-md-primary
medium solid primary-color icon, depends on the design kit
icon-solid-md-light
medium solid light-color icon, depends on the design kit
icon-solid-lg-primary
large solid primary-color icon, depends on the design kit
icon-solid-lg-light
large solid light-color icon, depends on the design kit
icon-solid-lg-secondary
large solid secondary-color icon, depends on the design kit
icon-solid-lg-tertiary
large solid tertiary-color icon, depends on the design kit
avatar

Avatars classes made for avatar-images, it have the preset width, height, border radius, box shadow in it & it depends on the design kit

all
avatar
normal sized avatar, depends on the design kit
avatar-sm
small sized avatar, depends on the design kit
avatar-lg
large sized avatar, depends on the design kit
avatar-xl
extra large sized avatar, depends on the design kit
headings

heading classes have the preset font size, font weight, line height & font weight may depends on the design kit

all
h1
font-size: min(max(3.6rem, calc(3.6rem + ((1vw - 0.32rem) * 3))), 6rem); line-height: min(max(4rem, calc(4rem + ((1vw - 0.32rem) * 2.5))), 6rem); font-weight: 700;
h2
font-size: min(max(3.12rem, calc(3.12rem + ((1vw - 0.32rem) * 2.1))), 4.8rem); line-height: min(max(3.74rem, calc(3.74rem + ((1vw - 0.32rem) * 1.325))), 4.8rem); font-weight: 700;
h3
font-size: min(max(2.73rem, calc(2.73rem + ((1vw - 0.32rem) * 1.4625))), 3.9rem); line-height: min(max(3.54rem, calc(3.54rem + ((1vw - 0.32rem) * 0.95))), 4.3rem); font-weight: 700;
h4
font-size: min(max(2.3rem, calc(2.3rem + ((1vw - 0.32rem) * 1))), 3.1rem); line-height: min(max(3rem, calc(3rem + ((1vw - 0.32rem) * 0.875))), 3.7rem); font-weight: 700;
h5
font-size: min(max(2rem, calc(2rem + ((1vw - 0.32rem) * 0.625))), 2.5rem); line-height: min(max(2.45rem, calc(2.45rem + ((1vw - 0.32rem) * 1.0875))), 3.32rem); font-weight: 700;
h6
font-size: min(max(1.8rem, calc(1.8rem + ((1vw - 0.32rem) * 0.25))), 2rem); line-height: min(max(2.4rem, calc(2.4rem + ((1vw - 0.32rem) * 0.5))), 2.8rem); font-weight: 700;
cards

Cards have the preset padding, width & border radius in it. only border radius depends on the design kit

all
card-normal
width: 100%; padding: min(max(2.24rem, calc(2.24rem + ((1vw - 0.32rem) * 1.2))), 3.2rem); border-radius: depends on the design kit
card-loose
width: 100%; padding: min(max(4.48rem, calc(4.48rem + ((1vw - 0.32rem) * 2.4))), 6.4rem); border-radius: depends on the design kit
card-tight
width: 100%; padding: min(max(1.12rem, calc(1.12rem + ((1vw - 0.32rem) * 0.6))), 1.6rem); border-radius: depends on the design kit
card-snug
width: 100%; padding: min(max(1.682rem, calc(1.682rem + ((1vw - 0.32rem) * 0.8975))), 2.4rem); border-radius: depends on the design kit
card-relaxed
width: 100%; padding: min(max(3.36rem, calc(3.36rem + ((1vw - 0.32rem) * 1.8))), 4.8rem); border-radius: depends on the design kit
card-none
width: 100%; border-radius: depends on the design kit
power utilities

Power utilities are powerful preset classes

all
img-scroller
img-scroller class made for div-background image & it have preset hover-scroll effect with smooth transition
two-buttons-set
two-buttons-set contain preset layout, margin in it (with responsive) & it is for two-buttons parent div. margin between two-buttons may depends on the design kit
Hover Styles
3d-hover-animations

3d hover animations, that work out of the box

all
hover-3d-basic
hover-3d-cloud-right
hover-3d-cloud-left
hover-3d-slate-top
hover-3d-slate-right
hover-3d-zoom-top
hover-3d-zoom-right
hover-3d-wakeup
hover-3d-dance
hover-transitions

Hover effects to work with Oxygen

all
hover-overline-from-left
hover-overline-from-center
hover-reveal
hover-underline-reveal
hover-overline-reveal
hover-glow
hover-shadow
hover-grow-shadow
hover-box-shadow-outset
hover-float-shadow
hover-bubble-top
hover-bubble-right
hover-bubble-bottom
hover-bubble-left
hover-grow
hover-shrink
hover-grow-rotate
hover-float
hover-skew
hover-buzz-out
hover-forward
hover-fade
+ hover-bg classes
hover-back-pulse
hover-bounce-to-right
hover-bounce-to-bottom
hover-shutter-out-horizontal
hover-hollow
hover-trim
hover-ripple-out
hover-outline-out
hover-round-corners
hover-underline-from-left
hover-underline-from-center
hover-background-colors

Hover background colors to work with a few hover effects

all
hover-bg-primary
hover-bg-secondary
hover-bg
hover-bg-dark
hover-bg-light
hover-bg-alt
hover-bg-white
hover-bg-black
hover-bg-placeholder
hover-bg-placeholder-alt
hover-colors

Hover colors to work with a few hover effects

all
hover-color-dark
hover-color-light
hover-color-primary
hover-color-paragraph
hover-color-paragraph-alt
hover-border-colors

Hover border colors to work with a few hover effects

all
hover-border-primary
hover-border-secondary
hover-border-dark
hover-border-light
hover-border
hover-border-alt