Assembler CSS can be easily configured with the help of data-* attributes. The list of all the supported attributes and their default values is available below.

Attribute	Default value
data-enabled	true
data-constructable	true
data-generate	false
data-selector-attribute	class
data-cache
data-cache-key	assembler-css-cache
data-x-style-attribute	x-style
data-mode	mobile-first
data-breakpoint-xs	512px (desktop-first only)
data-breakpoint-sm	768px (desktop-first) or 512px (mobile-first)
data-breakpoint-md	1024px (desktop-first) or 768px (mobile-first)
data-breakpoint-lg	1280px (desktop-first) or 1024px (mobile-first)
data-breakpoint-xl	1280px (mobile-first only)

Attributes

data-enable

This attribute can be used to disable or enable the framework. The attribute accepts as values only true and false.

<!-- Disable Assembler CSS -->
<script src="..." data-enabled="false"></script>

data-constructable

Disable or enable the framework’s support for constructable CSS stylesheets. The attribute accepts as values only true and false.

<script src="..." data-constructable="false"></script>

data-generate

Allow or prevent the framework to pre-generate the CSS code.

<script src="..." data-generate="true"></script>

data-selector-attribute

Set a custom selector attribute for the generated CSS rules. This is particularly useful when working with frameworks like Vue or React, which unrealistically expect all attributes to be managed through their API. This is true even for attributes like class, over which, traditionally, no library has “exclusive rights”.

Using a custom selector attribute is less performant than using the default class attribute.

<script src="..." data-selector-attribute="asm"></script>

data-cache

You can use this attribute to store and cache the pre-generated CSS using the local storage.

<script src="..." data-cache="cache-name"></script>

data-cache-key

The attribute can only be used in combination with the data-cache attribute. If the data-cache attribute is missing, this attribute is ignored.

The role of the attribute is to allow users to have different cached CSS content on different pages.

<script src="..." data-cache="cache-name" data-cache-key="other-cache-key"></script>

data-x-style-attribute

Change the attribute used for setting assembler properties and mixins.

<script src="..." data-x-style-attribute="data-style"></script>

data-mode

Switch between mobile-first mode and desktop-first mode.

<script src="..." data-mode="desktop-first"></script>

Breakpoints

You can set custom values for media breakpoints by using data-breakpoint-xs, data-breakpoint-sm, data-breakpoint-md, data-breakpoint-lg, and data-breakpoint-xl attributes.

The data-breakpoint-xs attribute is available only in desktop-first mode, while the data-breakpoint-xl attribute is available only in mobile-first mode.

Desktop-first

<script src="..." 
        data-mode="desktop-first"
        data-breakpoint-xs="..."
        data-breakpoint-sm="..."
        data-breakpoint-md="..."
        data-breakpoint-lg="..."
></script>

Mobile-first

<script src="..."
        data-mode="mobile-first"
        data-breakpoint-sm="..."
        data-breakpoint-md="..."
        data-breakpoint-lg="..."
        data-breakpoint-xl="..."
></script>