Custom Syntax

Functions

Customizing functions for your design system.

🚧This page is still under construction and some content may not be complete.

Overview

export default {
functions: {
translate: { unit: 'rem' }
}
}

Apply your custom functions:

<div class="translate(2rem)"></div>
<div class="translate(32)"></div>

Basic usage

🚧


Default

SyntaxUnitNative Name
$()-$
calc()-calc
translate()remtranslate
translateX()remtranslateX
translateY()remtranslateY
translateZ()remtranslateZ
translate3d()remtranslate3d
skew()degskew
skewX()degskewX
skewY()degskewY
skewZ()degskewZ
skew3d()degskew3d
rotate()degrotate
rotateX()degrotateX
rotateY()degrotateY
rotateZ()degrotateZ
rotate3d()degrotate3d
blur()remblur
drop-shadow()remdrop-shadow
hue-rotate()deghue-rotate
rgb()-rgb
rgba()-rgba
hsl()-hsl
hsla()-hsla
color()-color
color-contrast()-color-contrast
color-mix()-color-mix
hwb()-hwb
lab()-lab
lch()-lch
oklab()-oklab
oklch()-oklch
clamp()-clamp
repeat()-repeat
linear-gradient()-linear-gradient
radial-gradient()-radial-gradient
conic-gradient()-conic-gradient
repeating-linear-gradient()-repeating-linear-gradient
repeating-radial-gradient()-repeating-radial-gradient
repeating-conic-gradient()-repeating-conic-gradient

View the full source code

Custom Syntax
Animations

Customizing animation keyframes for your design system.

Custom Syntax
Media Queries

Customizing media queries and breakpoints for your design system.

© Aoyue Design LLC.