Get Started

Class Reference

Complete reference of all utility classes available in the OxyMade framework.

This reference documents all utility classes provided by OxyMade’s CSS framework.

Color Classes

Text Colors

ClassProperty
.text-primarycolor: var(--text-primary)
.text-secondarycolor: var(--text-secondary)
.text-tertiarycolor: var(--text-tertiary)
.text-accentcolor: var(--text-accent)
.text-neutralcolor: var(--text-neutral)
.text-whitecolor: var(--base-white)
.text-blackcolor: var(--base-black)
.muted-primarycolor: var(--muted-primary)
.muted-secondarycolor: var(--muted-secondary)
.muted-tertiarycolor: var(--muted-tertiary)
.muted-accentcolor: var(--muted-accent)
.muted-neutralcolor: var(--muted-neutral)
.heading-primarycolor: var(--heading-primary)
.heading-secondarycolor: var(--heading-secondary)
.heading-tertiarycolor: var(--heading-tertiary)
.heading-accentcolor: var(--heading-accent)
.heading-neutralcolor: var(--heading-neutral)

Background Colors

ClassProperty
.bg-primarybackground-color: var(--bg-primary)
.bg-secondarybackground-color: var(--bg-secondary)
.bg-tertiarybackground-color: var(--bg-tertiary)
.bg-accentbackground-color: var(--bg-accent)
.bg-neutralbackground-color: var(--bg-neutral)
.bg-base-primarybackground-color: var(--base-primary)
.bg-base-secondarybackground-color: var(--base-secondary)
.bg-base-tertiarybackground-color: var(--base-tertiary)
.bg-base-accentbackground-color: var(--base-accent)
.bg-base-neutralbackground-color: var(--base-neutral)
.bg-base-whitebackground-color: var(--base-white)
.bg-base-blackbackground-color: var(--base-black)
.surface-primarybackground-color: var(--surface-primary)
.surface-secondarybackground-color: var(--surface-secondary)
.surface-tertiarybackground-color: var(--surface-tertiary)
.surface-accentbackground-color: var(--surface-accent)
.surface-neutralbackground-color: var(--surface-neutral)
.subtle-primarybackground-color: var(--subtle-primary)
.subtle-secondarybackground-color: var(--subtle-secondary)
.subtle-tertiarybackground-color: var(--subtle-tertiary)
.subtle-accentbackground-color: var(--subtle-accent)
.subtle-neutralbackground-color: var(--subtle-neutral)

Border Colors

ClassProperty
.border-primaryborder: 1px solid var(--border-primary)
.border-secondaryborder: 1px solid var(--border-secondary)
.border-tertiaryborder: 1px solid var(--border-tertiary)
.border-accentborder: 1px solid var(--border-accent)
.border-neutralborder: 1px solid var(--border-neutral)

Typography Classes

Font Sizes

ClassProperty
.text-xsfont-size: var(--text-xs)
.text-smfont-size: var(--text-sm)
.text-basefont-size: var(--text-base)
.text-lgfont-size: var(--text-lg)
.text-xlfont-size: var(--text-xl)
.text-2xlfont-size: var(--text-2xl)
.text-3xlfont-size: var(--text-3xl)
.text-4xlfont-size: var(--text-4xl)
.text-5xlfont-size: var(--text-5xl)
.text-6xlfont-size: var(--text-6xl)
.text-7xlfont-size: var(--text-7xl)

Heading Classes

ClassProperties
.herofont-size: var(--hero); font-weight: 700; line-height: 1.1
.h1font-size: var(--h1); font-weight: 700; line-height: 1.2
.h2font-size: var(--h2); font-weight: 700; line-height: 1.25
.h3font-size: var(--h3); font-weight: 600; line-height: 1.3
.h4font-size: var(--h4); font-weight: 600; line-height: 1.35
.h5font-size: var(--h5); font-weight: 600; line-height: 1.4
.h6font-size: var(--h6); font-weight: 600; line-height: 1.45

Font Weights

ClassProperty
.font-normalfont-weight: 400
.font-mediumfont-weight: 500
.font-semiboldfont-weight: 600
.font-boldfont-weight: 700

Letter Spacing

ClassProperty
.tracking-tighterletter-spacing: -0.05rem
.tracking-tightletter-spacing: -0.025rem
.tracking-normalletter-spacing: 0rem
.tracking-wideletter-spacing: 0.05rem
.tracking-widerletter-spacing: 0.1rem
.tracking-widestletter-spacing: 0.25rem

Layout Classes

Display

ClassProperty
.inlinedisplay: inline
.blockdisplay: block
.inline-blockdisplay: inline-block
.flexdisplay: flex; width: 100%
.inline-flexdisplay: inline-flex
.griddisplay: grid; width: 100%
.inline-griddisplay: inline-grid
.hiddendisplay: none

Flexbox Direction

ClassProperties
.flex-rowdisplay: flex; flex-direction: row
.flex-coldisplay: flex; flex-direction: column
.flex-wrapdisplay: flex; flex-wrap: wrap
.horizontaldisplay: flex; flex-direction: row
.horizontal-wrapdisplay: flex; flex-direction: row; flex-wrap: wrap
.verticaldisplay: flex; flex-direction: column
.horizontal-reversedisplay: flex; flex-direction: row-reverse
.vertical-reversedisplay: flex; flex-direction: column-reverse

Flexbox Alignment

ClassApplied With
.justify-startdisplay: flex
.justify-enddisplay: flex
.justify-centerdisplay: flex
.justify-betweendisplay: flex
.justify-arounddisplay: flex
.items-startdisplay: flex
.items-enddisplay: flex
.items-centerdisplay: flex
.items-baselinedisplay: flex
.items-stretchdisplay: flex
.centeredalign-items: center; justify-content: center; align-content: center; text-align: center

Flex Self Alignment

ClassProperty
.self-startalign-self: flex-start
.self-endalign-self: flex-end
.self-centeralign-self: center
.self-baselinealign-self: baseline
.self-stretchalign-self: stretch

Flex Properties

ClassProperties
.flex-1flex-grow: 1; flex-shrink: 1; flex-basis: 0%
.flex-autoflex-grow: 1; flex-shrink: 1; flex-basis: auto
.flex-initialflex-grow: 0; flex-shrink: 1; flex-basis: auto
.flex-noneflex-grow: 0; flex-shrink: 0; flex-basis: auto

Order

ClassProperty
.order-1order: 1
.order-2order: 2
.order-3order: 3
.order-4order: 4
.order-5order: 5
.order-6order: 6
.order-firstorder: -9999
.order-lastorder: 9999
.order-noneorder: 0

Grid Classes

Grid Columns

ClassProperty
.grid-cols-1grid-template-columns: repeat(1, minmax(0, 1fr))
.grid-cols-2grid-template-columns: repeat(2, minmax(0, 1fr))
.grid-cols-3grid-template-columns: repeat(3, minmax(0, 1fr))
.grid-cols-4grid-template-columns: repeat(4, minmax(0, 1fr))
.grid-cols-5grid-template-columns: repeat(5, minmax(0, 1fr))
.grid-cols-6grid-template-columns: repeat(6, minmax(0, 1fr))
.grid-cols-nonegrid-template-columns: none

Asymmetric Grids

ClassProperty
.grid-60-40grid-template-columns: 60% 40%
.grid-40-60grid-template-columns: 40% 60%
.grid-33-66grid-template-columns: 33.333% 66.667%
.grid-66-33grid-template-columns: 66.667% 33.333%
.grid-75-25grid-template-columns: 75% 25%
.grid-25-75grid-template-columns: 25% 75%

Grid Rows

ClassProperty
.grid-rows-1grid-template-rows: repeat(1, minmax(0, 1fr))
.grid-rows-2grid-template-rows: repeat(2, minmax(0, 1fr))
.grid-rows-3grid-template-rows: repeat(3, minmax(0, 1fr))
.grid-rows-nonegrid-template-rows: none

Grid Flow

ClassProperties
.grid-flow-rowdisplay: grid; grid-auto-flow: row
.grid-flow-coldisplay: grid; grid-auto-flow: column
.grid-flow-row-densedisplay: grid; grid-auto-flow: row dense
.grid-flow-col-densedisplay: grid; grid-auto-flow: column dense

Column Span

ClassProperty
.col-span-1grid-column: span 1 / span 1
.col-span-2grid-column: span 2 / span 2
.col-span-3grid-column: span 3 / span 3
.col-span-4grid-column: span 4 / span 4
.col-span-5grid-column: span 5 / span 5
.col-span-6grid-column: span 6 / span 6
.col-autogrid-column: auto

Column Start/End

ClassProperty
.col-start-1 through .col-start-6grid-column-start: 1-6
.col-start-autogrid-column-start: auto
.col-end-1 through .col-end-6grid-column-end: 1-6
.col-end-autogrid-column-end: auto

Row Span

ClassProperty
.row-span-1grid-row: span 1 / span 1
.row-span-2grid-row: span 2 / span 2
.row-span-3grid-row: span 3 / span 3
.row-autogrid-row: auto

Row Start/End

ClassProperty
.row-start-1 through .row-start-4grid-row-start: 1-4
.row-start-autogrid-row-start: auto
.row-end-1 through .row-end-4grid-row-end: 1-4
.row-end-autogrid-row-end: auto

Gap Classes

All Gaps

ClassProperty
.gap-0column-gap: 0px; row-gap: 0px
.gap-1column-gap: var(--s1); row-gap: var(--s1)
.gap-2column-gap: var(--s2); row-gap: var(--s2)
.gap-3column-gap: var(--s3); row-gap: var(--s3)
.gap-4column-gap: var(--s4); row-gap: var(--s4)
.gap-5column-gap: var(--s5); row-gap: var(--s5)
.gap-6column-gap: var(--s6); row-gap: var(--s6)
.gap-8column-gap: var(--s8); row-gap: var(--s8)
.gap-10column-gap: var(--s10); row-gap: var(--s10)
.gap-12column-gap: var(--s12); row-gap: var(--s12)
.gap-16column-gap: var(--s16); row-gap: var(--s16)
.gap-20column-gap: var(--s20); row-gap: var(--s20)
.gap-24column-gap: var(--s24); row-gap: var(--s24)

Column Gap

.col-gap-0 through .col-gap-24 - Same values as gap, column only

Row Gap

.row-gap-0 through .row-gap-24 - Same values as gap, row only

Spacing Classes

Margin (All Sides)

.m-0 through .m-40 - Values: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32, 36, 40

Margin (Directional)

  • .mt-* - margin-top
  • .mr-* - margin-right
  • .mb-* - margin-bottom
  • .ml-* - margin-left
  • .mx-* - margin-left + margin-right
  • .my-* - margin-top + margin-bottom

Margin Auto

ClassProperty
.m-automargin: auto
.mx-automargin-left: auto; margin-right: auto
.my-automargin-top: auto; margin-bottom: auto
.mt-automargin-top: auto
.ml-automargin-left: auto

Padding (All Sides)

.p-0 through .p-40 - Same values as margin

Padding (Directional)

  • .pt-* - padding-top
  • .pr-* - padding-right
  • .pb-* - padding-bottom
  • .pl-* - padding-left
  • .px-* - padding-left + padding-right
  • .py-* - padding-top + padding-bottom

Section Spacing

ClassProperty
.section-py-nonepadding-top: var(--ss-none); padding-bottom: var(--ss-none)
.section-py-xxspadding-top: var(--ss-xxs); padding-bottom: var(--ss-xxs)
.section-py-xspadding-top: var(--ss-xs); padding-bottom: var(--ss-xs)
.section-py-smpadding-top: var(--ss-sm); padding-bottom: var(--ss-sm)
.section-py-mdpadding-top: var(--ss-md); padding-bottom: var(--ss-md)
.section-py-lgpadding-top: var(--ss-lg); padding-bottom: var(--ss-lg)
.section-py-xlpadding-top: var(--ss-xl); padding-bottom: var(--ss-xl)
.section-py-xxlpadding-top: var(--ss-xxl); padding-bottom: var(--ss-xxl)

Also available: .section-pt-* and .section-pb-* for top/bottom only.

Space Between

ClassProperty
.space-x-0 through .space-x-20> * + * { margin-left: var(--s*) }
.space-y-0 through .space-y-20> * + * { margin-top: var(--s*) }

Sizing Classes

Width

ClassProperty
.w-autowidth: auto
.w-fullwidth: 100%
.w-screenwidth: 100vw
.w-1by2width: 50%
.w-1by3width: 33.333333%
.w-2by3width: 66.666667%
.w-1by4width: 25%
.w-2by4width: 50%
.w-3by4width: 75%
.w-1by5width: 20%
.w-1by6width: 16.666667%
.w-2by6width: 33.333333%
.w-3by6width: 50%
.w-4by6width: 66.666667%
.w-5by6width: 83.333333%
.w-10pwidth: 10%

Height

ClassProperty
.h-autoheight: auto
.h-fullheight: 100%
.h-screenheight: 100vh

Max Width

ClassProperty
.max-w-xsmax-width: 32rem
.max-w-smmax-width: 38.4rem
.max-w-mdmax-width: 44.8rem
.max-w-lgmax-width: 51.2rem
.max-w-xlmax-width: 57.6rem
.max-w-2xlmax-width: 67.2rem
.max-w-3xlmax-width: 76.8rem
.max-w-4xlmax-width: 89.6rem
.max-w-5xlmax-width: 102.4rem
.max-w-6xlmax-width: 115.2rem
.max-w-7xlmax-width: 128rem
.max-w-nonemax-width: none
.max-w-fullmax-width: 100%
.max-w-prosemax-width: 65ch

Effects Classes

Border Radius

ClassProperty
.rounded-smborder-radius: 0.125rem
.roundedborder-radius: 0.25rem
.rounded-mdborder-radius: 0.5rem
.rounded-lgborder-radius: 0.75rem
.rounded-xlborder-radius: 1rem
.rounded-2xlborder-radius: 1.5rem
.rounded-3xlborder-radius: 2rem
.rounded-fullborder-radius: 9999px
.border-noneborder-radius: 0px

Shadows

ClassProperty
.shadow-nonebox-shadow: 0 0 #0000
.shadow-xsbox-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03)
.shadow-smbox-shadow: 0px 16px 40px rgba(154, 170, 207, 0.2)
.shadowbox-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1)
.shadow-mdbox-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08)
.shadow-lgbox-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
.shadow-xlbox-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
.shadow-2xlbox-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25)
.shadow-innerbox-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)

Opacity

ClassProperty
.opacity-0opacity: 0
.opacity-25opacity: 0.25
.opacity-50opacity: 0.5
.opacity-75opacity: 0.75
.opacity-100opacity: 1

Blur

ClassProperty
.blur-smfilter: blur(4px)
.blurfilter: blur(8px)
.blur-mdfilter: blur(12px)
.blur-lgfilter: blur(16px)
.blur-xlfilter: blur(24px)
.blur-nonefilter: blur(0px)

Overlays

ClassDescription
.overlay-primaryPrimary color overlay at 70% opacity
.overlay-secondarySecondary color overlay at 70% opacity
.overlay-tertiaryTertiary color overlay at 70% opacity
.overlay-accentAccent color overlay at 70% opacity
.overlay-neutralNeutral color overlay at 70% opacity
.overlay-base-whiteWhite overlay at 70% opacity
.overlay-base-blackBlack overlay at 70% opacity

Position Classes

ClassProperty
.staticposition: static
.relativeposition: relative
.absoluteposition: absolute
.fixedposition: fixed
.stickyposition: sticky
.sticky-smposition: sticky; top: 2.5%
.sticky-mdposition: sticky; top: 5%
.sticky-lgposition: sticky; top: 10%
.sticky-xlposition: sticky; top: 20%
.sticky-offposition: static

Utility Classes

Z-Index

ClassProperty
.z-0z-index: 0
.z-10z-index: 10
.z-20z-index: 20
.z-30z-index: 30
.z-40z-index: 40
.z-50z-index: 50
.z-99z-index: 99
.z-autoz-index: auto

Cursor

ClassProperty
.cursor-pointercursor: pointer
.cursor-defaultcursor: default
.cursor-not-allowedcursor: not-allowed
.cursor-waitcursor: wait
.cursor-textcursor: text
.cursor-movecursor: move
.cursor-helpcursor: help

Object Fit/Position

ClassProperty
.object-containobject-fit: contain
.object-coverobject-fit: cover
.object-bottomobject-position: bottom
.object-leftobject-position: left
.object-rightobject-position: right
.object-topobject-position: top

Background

ClassProperty
.bg-coverbackground-size: cover
.bg-centerbackground-position: center

Overflow

ClassProperty
.overflow-hiddenoverflow: hidden
.overflow-visibleoverflow: visible
.overflow-scrolloverflow: scroll
.overflow-autooverflow: auto
.overflow-x-hiddenoverflow-x: hidden
.overflow-x-autooverflow-x: auto
.overflow-y-hiddenoverflow-y: hidden
.overflow-y-autooverflow-y: auto

Breakout

ClassDescription
.breakout-70Break out of container to 70vw
.breakout-80Break out of container to 80vw
.breakout-90Break out of container to 90vw
.breakout-100Break out of container to 100vw

Responsive Prefixes

All responsive classes use max-width media queries:

PrefixBreakpointMax Width
sm-Phone Portrait479px
md-Phone Landscape767px
lg-Tablet Portrait1023px
xl-Tablet Landscape1119px

Available Responsive Classes

Most layout, grid, and sizing classes have responsive variants:

  • sm-hidden, md-hidden, lg-hidden, xl-hidden
  • sm-flex, md-flex, lg-flex, xl-flex
  • sm-vertical, md-vertical, lg-vertical, xl-vertical
  • sm-horizontal, md-horizontal, lg-horizontal, xl-horizontal
  • sm-grid-cols-*, md-grid-cols-*, lg-grid-cols-*, xl-grid-cols-*
  • sm-w-full, md-w-full, lg-w-full, xl-w-full
  • sm-order-*, md-order-*, lg-order-*
  • sm-centered, md-centered, lg-centered, xl-centered
  • And more…