Here you will learn how to include addons and how to create your own.

At the moment, an addon is a regular Sass modules that add functionality to mlut or some CSS. Key point to keep in mind: addon is imported after user has configure mlut. This means that you cannot configure mlut tools as a Sass module. But you can modify the configuration manually

That said, it is recommended that you merge your configuration changes so that it does not erase the user's configuration (if hypothetically possible)

// import mlut tools
@use "@mlut/core/tools" as ml;

// add some new features
$new-colors: (
	'red0': #f22,
	'green0': #1f1,
	'blue0': #33f,
);

// neat merge it
ml.$utils-db: map.merge(
	ml.$utils-db, 'common', 'keywords', 'colors',
	map.merge(
		$new-colors,
		map.get(ml.$utils-db, 'common', 'keywords', 'colors')
	)
);

To import addon that contains utilities as CSS (AOT), you will need:

@charset "utf-8";

// import tools
@use "@mlut/core/tools" as ml;

// optional import styles from the core that you need: helpers, utilities, etc
@use "@mlut/core/dist/css/base-setup";

// import addons
@use "@mlut/core/dist/addons/demo-theme";

// import a module that initialize utilities
@use "@mlut/core/dist/css/utils/init";

You can also cancel the generation of all utilities from the addon, and get only the necessary values from there. To do this, pass the parameter to the config of the addon: $generate: false.

If the addon contains only a ready-made Sass/CSS code, it can be included in any order after tools. Addon also may have their own settings. They can be seen in the code or documentation.

Addons that are delivered with mlut are described here.

A full-fledged design theme to create an interface. Contains a set of utilities and a colors palette.

By default (in JIT mode), only the palette will be loaded. If you want to load and generate utilities (AOT), pass $is-aot: true to the module configuration.

Colors are automatically loaded into the mlut settings, so you can use them when adding utilities or styles. Utilities with colors are generated with range syntax.

• step of color shade: 25
• step in the value of utilities: 50
• shades for each color: 8. This means that for each color there are shades from 0 to 350. For example: C-red0, Bgc-blue150

Below are the utilities contained in the addon. Names of utilities in Generation Syntax are specified in the left column. In the right you can see the available values. In addition to the list, they can be spicified in the range syntax or as a map.