Skip to content

artboard-deluxe / cssProperties

cssProperties()

cssProperties(options?): ArtboardPluginDefinition<{ element: HTMLElement; precision: number; restoreProperties: boolean; setOffsetX: boolean; setOffsetY: boolean; setScale: boolean; unitless: boolean; }>

Sets the artboard state as CSS custom properties/variables on the given element or root element.

Parameters

options?

element

HTMLElement

The element on which the CSS properties should be set. Falls back to the root element.

precision

number

How precise the set values should be.

A value of 1 (default) means that only whole pixels are applied (e.g. 20px). A value of 0.5 means the values are rounded to the next 0.5 increment (e.g. 20.5px or 21px). A value of 10 would round to 20px, 30px, 0px, etc.

restoreProperties

boolean

Restore original CSS properties on destroy.

If true, the plugin will restore the CSS properties to their value before the plugin was initialised.

setOffsetX

boolean

Set's the --artboard-offset-x property.

setOffsetY

boolean

Set's the --artboard-offset-y property.

setScale

boolean

Set's the --artboard-scale property.

unitless

boolean

Adds unitless property values.

If true, instead of --artboard-offset-x: -582px it will set --artboard-offset-x: -582. Useful if you want to do CSS calculations with purely numeric values.

Returns

ArtboardPluginDefinition<{ element: HTMLElement; precision: number; restoreProperties: boolean; setOffsetX: boolean; setOffsetY: boolean; setScale: boolean; unitless: boolean; }>

Defined in

plugins/cssProperties/index.ts:8