mlut has 3 methods for generating utility classes:

1. in the configuration when importing
2. with special mixins
3. with top-level apply mixin

Standard methods include creating through config and using mk- mixins. As the values of utilities, you can use a list or map. The generation syntax can be used both in the names of utilities/groups and in the values.

@include ml.mk-util(
	'Mxw',
	(
		'cardXs': 12r,
		'sm0': 560px,
	)
);

// CSS
.Mxw-cardXs {
	max-width: 12rem;
}

.Mxw-sm0 {
	max-width: 560px;
}

If you add new values via map, they will appended to the registry and after ,you can use them again.

You can find other examples of the standard way usage in the basic concepts.

The main method of creating utilities - in config. Use map $utils. As keys, specify the names of utilities or groups.

@use 'mlut' with (
	$utils: (
		'D': ('', 'n'),
		'xl_P': 10e,
	)
);

// CSS
.D {
	display: block;
}

.D-n {
	display: none;
}

.P10e {
	padding: 10em;
}

@media (min-width: 1200px) {
	.xl_P10e {
		padding: 10em;
	}
}

For mass generation utilities, you can use groups. Existing groups can be found here, and you can add new ones to $utils-groups map.

@include ml.mk-utils-group('Paddings', 150);

// CSS
.P150 {
	padding: 150px;
}

.Pt150 {
	padding-top: 150px;
}

.Pr150 {
	padding-right: 150px;
}

// etc.

To generate the values of the utility with all the keywords, use KW in the list or map of values. You can also get a specific keywords group from common section of the utils registry. To do this, specify the name of the group through the dot: KW.colors

@include ml.mk-util('Ec', 'KW');

// CSS
.Ec-s {
	empty-cells: show;
}

.Ec-h {
	empty-cells: hide;
}

In the generation syntax, you can use keywords to specified with what components you need to generate utilities. Keywords are written as ordinary components through a space. Note that by default when specifying the components, the value of the utility without components is also generated. This behavior can also be changed.

Also, using one keyword, you can specify several of the same type of components.

More detailed examples will be added later.

To generate a range of values, mlut has range syntaxes. Now there are 2 types of such syntaxes: number and color. Range syntax is written in square brackets in the list or map of values. Range syntax depends on range-generator utility option.

Note: if only one range is specified in the list of values, after it you need to put a comma:
([-1, 5],). Otherwise, the program will take the range for the list of values.

May consist of three or four arguments. General form:
[$colors-list, $shades, $step, $function: 'adjust'].

@include ml.mk-util('C', (
	['prm0', '2_h StOl', ('alpha': 0.2, 'green': 30)],
));

// CSS
.C-prm0_h:hover {
	color: #c06;
}

.C-prm0\*80p_h:hover {
	color: rgba(204, 0, 102, 0.8);
}

.C-prm50_h:hover {
	color: #cc1e66;
}

.C-prm50\*80p_h:hover {
	color: rgba(204, 30, 102, 0.8);
}

Number is default range syntax. You can use it with any utility if another range generator is not specified in its options. May consist of 2 or 3 arguments. General form:
[$start, $end, $step: 1].
In the $start value, and only in it, you can specify a measurement unit, as well as the utility components.

@include ml.mk-util('Bdw', ([2u, 4],));

// CSS
.Bdw2u {
	border-width: 0.5rem;
}

.Bdw3u {
	border-width: 0.75rem;
}

// etc.

If you want to create only a few utilities with specific values or components, you can use the apply mixin. If you call it outside another rule, it will generate the specified utilities:

@include ml.apply(
	'-Gdl-r,#0f0;30p,#00f;80p,red -Drps10;15;#00f,20;2r;5;#0ff'
);

// CSS
.-Gdl-r\,\#0f0\;30p\,\#00f\;80p\,red {
	background-image: linear-gradient(to right, #0f0 30%, #00f 80%, red);
}

.-Drps10\;15\;\#00f\,20\;2r\;5\;\#0ff {
	--ml-drps: drop-shadow(10px 15px #00f) drop-shadow(20px 2rem 5px #0ff);
}

As you remember, the library part of mlut contains basic styles, helpers and utilities. By default, only basic styles and helpers are included:

@use 'mlut/tools' as ml;
@use 'mlut/dist/core';

But you can include only the necessary parts of the core:

@use 'mlut/tools' as ml;
@use 'mlut/dist/core/helpers';

Note: for convenience, in the examples we will include mlut as if we specified a Sass load path, so that each time we do not write ../../node_modules/mlut. It is default behavior with JIT engine

This section contains modules with ready-made utilities and a module for initialization. To get all utilities, just include core/utils. If you want to load only certain sets, then include them, and then include the initialization module:

@use 'mlut/dist/core/utils/box-model';
@use 'mlut/dist/core/utils/text';
@use 'mlut/dist/core/utils/init';

To load core utils without generating them, include the core/utils/load module. This may be needed when using addons.

All utilities are sets to $utils-map by the key core.

When including libraries and addons, you can include, exclude or overwrite only certain utilities. To do this, use the special fields in the $utils map:

• /allow - include only these utilities, list
• /ban - exclude these utilities, list
• /override - map with utilities and values, which will be merged into $utils-map with overwriting. Passing null will clear $utils-map.

@use 'mlut/dist/core/utils' with (
	$utils: (
		'C': red,

		'/override': (
			'M': (1u, 2r)
		),

		'/allow': (
			'M', 'C',
		),
	),
);

// CSS
.C-ih {
  color: inherit;
}

.M1u {
  margin: 0.25rem 4px;
}

.M2r {
  margin: 2rem;
}

.C-red {
  color: red;
}

Information about the most frequently used settings.

To add or change breakpoints, use the $breakpoints map.

@use 'mlut/tools' as ml with (
	$breakpoints: (
		'xxxl': 1600px,
		'sm': 480px,
	),
);

@include ml.apply('<sm_W15 xxxl_W150');

// CSS
@media (max-width: 479px) {
  .\<sm_W15 {
    width: 15px;
  }
}

@media (min-width: 1600px) {
  .xxxl_W150 {
    width: 150px;
  }
}

The order of adding does not matter, the breakpoints will be sorted by increasing. How to completely rewrite the breakpoints, see the settings.

There are 2 ways to add colors:

@use 'mlut/tools' as ml with (
	$colors: (
		'red22': #c00,
	),
);

@include ml.apply('Bdc-red22');

// CSS
.Bdc-red22 {
  border-color: #c00;
}

@use 'mlut' as ml with (
	$utils: (
		'C': (
			'red100': #911
		),
		'/override': null,
	),
);

@include ml.apply('Bgc-red100');

// CSS
...
.C-red100 {
  color: #911;
}

.Bgc-red100 {
  background-color: #911;
}

For long media queries, you can create a short alias. Such alias is called custom media query. Use $at-rures-data map in the configuration. Note when using custom media query, a hyphen is added to their names.

@use 'mlut/tools' as ml with (
	$at-rules-data: (
		'media': (
			'custom': (
				'myMq': '(orientation: landscape) and (min-height: 20rem)',
			),
		),
	),
);

@include ml.apply('@:-myMq_D-f');

// CSS
@media (orientation: landscape) and (min-height: 20rem) {
  .\@\:-myMq_D-f {
    display: flex;
  }
}

You can also add a new media feature. They are stored in the same registry as the utilities, in the media section. Added as well as utilities.

@use 'mlut/tools' as ml with (
	$utils-data: (
		'media': (
			'registry': (
				'st': scripting,
			),
		),
	),
);

@include ml.apply('@:st-n_D');

// CSS
@media (scripting: none) {
  .\@\:st-n_D {
    display: block;
  }
}

To create a new utility, add it to the registry during configuration. As a value, you can specify CSS property or map with options.

@use 'mlut/tools' as ml with (
	$utils-data: (
		'utils': (
			'registry': (
				'Mil': margin-inline,
				'Ir': (
					'properties': image-rendering,
					'keywords': (
						'ce': crisp-edges,
						'p': pixelated,
					),
				),
			),
		),
	),
);

@include ml.apply('Mil-15 Ir-p');

// CSS
.Mil-15 {
  margin-inline: -15px;
}

.Ir-p {
  image-rendering: pixelated;
}

You can create a utility for changing one property even without registration and SMS. Just specify the name and values. If the name of the utility begins with -, then it will control the custom property.

@use 'mlut' with (
	$utils: (
		'display': (flex, 5r),
		'/override': null,
	),
);

@include mlut.apply('-MySize-a');

// CSS
.display-flex {
  display: flex;
}

.display5r {
  display: 5rem;
}

.-MySize-a {
  --ml-mySize: auto;
}

This works for any method of generating utilities. Please note that the default conversion type will be used for the values of such utilities.

Generic CSS includes resetting styles, setting box-sizing etc. You can customize or completely remove these styles. Their configuration is in $general-config, by the key generic-css. The configuration is a map, each element of which is a boolean flag. If set to true, the specified CSS will be generated. To disable these styles, pass null instead of a map.

@use 'mlut' with (
	$general-config: (
		'generic-css': (
			'svg-fill-cur-color': true,
			'reset-border': true,
		)
	),
);

For the time being, available settings can be viewed only in the code, but later they will appear in this documentation. You can find here The final CSS with comments.