Skip to content

Sizes

This page lists all Sizes CSS custom properties available in the OxyProps Framework

Fluid Sizes

link Fluid Sizes
ValueCSS VariableUtility Class
clamp(.5rem, 1vw, 1rem) --o-size-fluid-1 o-size-1
clamp(1rem, 2vw, 1.5rem) --o-size-fluid-2 o-size-2
clamp(1.5rem, 3vw, 2rem) --o-size-fluid-3 o-size-3
clamp(2rem, 4vw, 3rem) --o-size-fluid-4 o-size-4
clamp(4rem, 5vw, 5rem) --o-size-fluid-5 o-size-5
clamp(5rem, 7vw, 7.5rem) --o-size-fluid-6 o-size-6
clamp(7.5rem, 10vw, 10rem) --o-size-fluid-7 o-size-7
clamp(10rem, 20vw, 15rem) --o-size-fluid-8 o-size-8
clamp(15rem, 30vw, 20rem) --o-size-fluid-9 o-size-9
clamp(20rem, 40vw, 30rem) --o-size-fluid-10 o-size-10

Fixed Sizes

link Fixed Sizes
ValueCSS VariableUtility Class
-.5rem --o-size-000 o-size-fixed-000
-.25rem --o-size-00 o-size-fixed-00
.25rem --o-size-1 o-size-fixed-1
.5rem --o-size-2 o-size-fixed-2
1rem --o-size-3 o-size-fixed-3
1.25rem --o-size-4 o-size-fixed-4
1.5rem --o-size-5 o-size-fixed-5
1.75rem --o-size-6 o-size-fixed-6
2rem --o-size-7 o-size-fixed-7
3rem --o-size-8 o-size-fixed-8
4rem --o-size-9 o-size-fixed-9
5rem --o-size-10 o-size-fixed-10
7.5rem --o-size-11 o-size-fixed-11
10rem --o-size-12 o-size-fixed-12
15rem --o-size-13 o-size-fixed-13
20rem --o-size-14 o-size-fixed-14
30rem --o-size-15 o-size-fixed-15

Content Sizes

link Content Sizes
ValueCSS VariableUtility Class
20ch --o-size-content-1 o-content-1
45ch --o-size-content-2 o-content-2
60ch --o-size-content-3 o-content-3

Heading Sizes

link Heading Sizes
ValueCSS VariableUtility Class
240px --o-size-xxs o-header-1
25ch --o-size-header-2 o-header-2
35ch --o-size-header-3 o-header-3

Breakpoints Sizes

link Breakpoints Sizes
ValueCSS Variable
240px --o-size-xxs
360px --o-size-xs
480px --o-size-sm
768px --o-size-md
1024px --o-size-lg
1440px --o-size-xl
1920px --o-size-xxl