DocsAPIsChangelogResourcesMarketplace
DocsAPIsChangelog
DocsAPIsChangelogResourcesMarketplaceSearchLog In
Search

Styles

The Style object is part of the Webflow Designer API. It represents a style that can be applied to Webflow elements on the canvas.

It provides numerous methods for managing CSS properties across different breakpoints and pseudo-states. From creating new styles to setting and retrieving properties, the Style Object is your primary tool for managing the look and feel of your Webflow designs."

📘

Using CSS Properties

Please use use the long-form alias of a css property when managing styles. For example, the property row-gap has a long-form alias of grid-row-gap which you can find the the MDN CSS Properties reference.

Creating Style Objects

To create a Style, use the createStyle method of the webflow object. This method takes the name of the new style as an argument and returns a new Style object.

let myStyle = webflow.createStyle('myNewStyle');
// myStyle is now a Style object with the class name 'myNewStyle'

Once a Style is created, it can be used to manage CSS properties for elements on the Webflow canvas. Note that the createStyle method will always create a new style, even if a style with the same name already exists. If you want to modify an existing style, you should retrieve it using the appropriate method from the API rather than creating a new one.

❗️

Combo Classes are read-only

Currently, Designer APIs do not support writing or editing Combo Classes.

Methods

Get Style Name

getName()

Returns:string

Description Retrieve the name of the Style.

let styleName = myStyle.getName();
console.log("Style Name:", styleName);

Get Style Properties

getProperties(options?: BreakpointAndPseudo): PropertyMap

Parameters:

Returns: PropertyMap - CSS properties and their values for the given breakpoint and pseudo-state.

Description: Retrieve the properties of the style.

let styleProperties = myStyle.getProperties();
console.log("Style Properties:", styleProperties);

Set Style Properties

setProperties(props: PropertyMap, options?: BreakpointAndPseudo): undefined

Parameters:

  • props: PropertyMap - The new properties to set for the style.
  • options (optional): BreakpointAndPseudo - Options to filter properties based on breakpoints and pseudo classes / states.

Description: Sets CSS properties for the Style at the given breakpoint and pseudo-state. Returns undefined.

myStyle.setProperties({ color: 'red', 'font-size': '16px' }, { breakpoint: 'main', pseudo: 'hover' });

Get Style Property

getProperty(prop: string, options?: BreakpointAndPseudo): null | string

Parameters:

  • prop: string - The name of the property to retrieve.
  • options (optional): BreakpointAndPseudo - Options to get property based on breakpoints and pseudo classes / states.Returns: null | string

Description: Returns the value of a specific CSS property for the given breakpoint and pseudo-state, or null if the property does not exist.

let color = myStyle.getProperty('color', { breakpoint: 'main', pseudo: 'hover' });
let fontSize = myStyle.getProperty("fontSize");
console.log("Font Size:", fontSize);

Set Style Property

setProperty(prop: string, value: string, options?: BreakpointAndPseudo): undefined

Parameters:

  • prop: string - The name of the property to set.
  • value: string - The new value to set for the property.
  • options (optional): BreakpointAndPseudo - Options to set property based on breakpoints and pseudo classes / states.

Description:Sets a specific CSS property for the Style at the given breakpoint and pseudo-state. Returns undefined.

myStyle.setProperty('color', 'blue', { breakpoint: 'main', pseudo: 'hover' });

Clear Properties

clearAllProperties(): undefined

Description:Removes all CSS properties from the Style.

Returns: undefined

myStyle.clearAllProperties();

Save Style Changes

save(): Promise<undefined>

Returns: Promise

Description: Saves the current state of the Style to the Designer. When an element is saved, all styles that are referenced by the element will also be saved automatically. Note: Style names must be unique within the site.

await myStyle.save()
// The style has been saved

Delete Style

destroy():undefined

Description: The destroy method is used to remove the local reference to the style and trigger the cleanup process. After you call destroy, you should no longer use the style object in your code. This method does not remove the style from the Designer.

myStyle.destroy();

Breakpoints and Pseudo-States

The BreakpointAndPseudo type is used to specify breakpoints and pseudo-states for the getProperties, setProperties, getProperty, and setProperty methods. It is an object that can have breakpoint and pseudo properties.

Valid values for breakpoint are:

  • 'xxl',
  • 'xl',
  • 'large',
  • 'main',
  • 'medium',
  • 'small',
  • and 'tiny'.

Valid values for pseudo are

  • 'noPseudo',
  • 'nth-child(odd)',
  • 'nth-child(even)',
  • 'first-child',
  • 'last-child',
  • 'hover',
  • 'active',
  • 'pressed',
  • 'visited',
  • 'focus',
  • 'focus-visible',
  • 'focus-within',
  • 'placeholder',
  • 'empty',
  • 'before',
  • and 'after'.

These options allow you to specify styles that will apply under different conditions, such as different viewport sizes (breakpoints) or different states of an element (pseudo-states).

For example, you could use the setProperty method to set the color of a text element to red when it is hovered over on medium-sized screens:

myStyle.setProperty('color', 'red', { breakpoint: 'medium', pseudo: 'hover' });

Likewise, you could use the getProperties method to get all the properties that apply to an element when it is the first child of its parent on small screens:

let properties = myStyle.getProperties({ breakpoint: 'small', pseudo: 'first-child' });
// Do something with properties

This flexibility allows you to create responsive designs that adapt to different screen sizes and interactive designs that respond to user actions.