Settings for media queries and other CSS at-rules. There is a small database and several configs.

Breakpoints are stored in the config $at-rules-cfg, in the breakpoints section. For convenience, they are configured in a separate map $breakpoints. You can see an example of simple use here.

To fully rewrite breakpoints, use $breakpoints-ext map:

@use 'mlut/tools' as ml with (
	$breakpoints: null,
	$breakpoints-ext: (
		'sm': 768px,
		'md': 1200px,
		'lg': 1440px,
	),
);

@debug map.get(ml.$at-rules-cfg, 'breakpoints');
// (
//   'sm': 768px,
//   'md': 1200px,
//   'lg': 1440px,
// )

$at-rules-db - map, the keys in which are the names of the at-rules, and the values are map with options. In the options of each at-rule there is a custom map, to which you can add alias for custom expressions. See example here.

Below are the at-rule options

Settings that affect the work of the all toolkit.

Settings that affect the work of grid system both modern and legacy.

• modern grid is based on CSS Grid and is built using common grid utilities, such as Gtc, Gap etc
• legacy grid system is based on flexbox and works with helpers and custom utilities, such as -Gscc, -Gsf etc.

The gutters are stored in $gs-gutters map. The keys in it are the names of the breakpoints, and the values are gutter. It is automatically filled out based on breakpoints. If you want to supplement or change gutters, use $gs-gutters-ext. If you want to completely overwrite the initial values, specify them in $gs-gutters in the config. Pay attention that this behavior is different from all other settings like a breakpoints

Gutters value on breakpoints:

In the settings of utilities, there are both data and configs.

Most of the settings are stored here, on the basis of which utilities work. Below are some sections that may be useful during customization.

Available on the key conversion-types. This is a map, the keys in which are names of types that are used in utility options. The values in a map are a list of converters through which the value of utilities passes.

$utils-cfg: (
	'conversion-types': (
		'angle': ('angle', 'global-kw', 'cust-prop'),
		'grid-span': ('grid-span', 'num-length', 'global-kw', 'cust-prop'),
	),
);

Each converter is a function that returns, either an converted or initial value. By default, if the value was converted, then the process stops, else the value passes to the next converter from the list. If not a single converter has no worked, then at the result we get the initial value. But this behavior can be changed when adding a keyword Pl(pipeline) to the list. The converters specified after it will be applied regardless of whether the value was converted in one of them. The list of all converters can be viewed in the code, but later they will be added here

Below you can find all available types of conversion. In the description of each type there will be a schema: a list of converters and keywords on which the conversion depends. For DRY reason, in the schema used Sass variables containing frequently used converters. They will be presented in the documentation as meta-types. You can use these variables when adding new types of conversion. In addition, the description of the type will have examples of its work.

Expand abbreaviations of utilities. Schema:

('abbr-kw': list.join('abbr', $uv-type-default))

Usage:

@debug ml.uv('Wlc-tf'); // transform
@debug ml.uv('Ts-bdc;2s,c;1s'); // border-color 2s, color 1s

Converts angles. Schema:

('angle': list.join('angle', $uv-type-base))

Usage:

@debug ml.uv('-Rt45d'); // 45deg
@debug ml.uv('-Rt-50g'); // -50grad
@debug ml.uv('-Sk3.14r;2r'); // 3.14rad 2rad
@debug ml.uv('-Hur-1.5t'); // -1.5turn

Converts colors. Schema:

('color': list.join('color', $uv-type-base))

Usage:

@debug ml.uv('C-tp'); // transparent
@debug ml.uv('Bgc#c06*$bgAlpha'); // rgba(204, 0, 102, var(--ml-bgAlpha, 1))

// you can use custom color keyword that you added in the database
@debug ml.uv('Bgc-purple50*20p'); // rgba(102, 0, 204, 0.2)

Converts values in the gradient functions. Schema:

('gradient': (
	'keyword', 'color', 'cust-prop', 'Pl', 'number', 'angle', 'global-kw'
))

Usage:

@debug ml.uv('-Gdrl-b;r,black,#ff0'); // repeating-linear-gradient(to bottom right, black, #ff0)
@debug ml.uv('-Gdl-50d,blue;3r,cc;80p'); // linear-gradient(50deg, blue 3rem, currentColor 80%)

Converts special keywords, to specify the sizes of the grid items in spans. Schema:

('grid-span': list.join(('grid-span', 'num-length'), $uv-type-base))

Usage:

@debug ml.uv('Gc-s3'); // span 3 / span 3

Adds converting of special keywords for grid templates to the default type. Schema:

('grid-tpl': list.join('grid-tracks', $uv-type-default))

Usage:

@debug ml.uv('Gtc-t4'); // repeat(4, minmax(0, 1fr))
@debug ml.uv('G-t3/af;d;15r'); // repeat(3, minmax(0, 1fr)) / auto-flow dense 15rem

Type works almost as a default type, with the exception of that it does not convert numbers without units of measurement in a pixels. Schema:

('kw-num-length': list.set-nth($uv-type-default, 2, 'num-length'))

Usage:

@debug ml.uv('Fnw300'); // 300
@debug ml.uv('Fnw-bd'); // bolder
@debug ml.uv('Lnh4.5u'); // 1.125rem

The basic meta type on which all other types are based. Schema:

$uv-type-base: ('global-kw', 'cust-prop');

Usage:

// global keywords
@debug ml.uv('C-ih'); // inherit
@debug ml.uv('W-gSm'); // 520px - sm breakpoints

// custom properties
@debug ml.uv('W-$myCard?200'); // var(--ml-myCard, 200px)

Meta type that corresponds to the default conversion type. If the type of conversion is not specified for the utility, then this will be used. Schema:

$uv-type-default: list.join(('keyword', 'number'), $uv-type-base);

// and below in the conversion types
'conversion-types': (
	'default': $uv-type-default,

Usage:

// keyword
@debug ml.uv('Ai-c'); // center
@debug ml.uv('Bd'); // 1px solid

// number
@debug ml.uv('W200'); // 200px
@debug ml.uv('Ml-0.7'); // -0.7rem
@debug ml.uv('P1r;2e;5p'); // 1rem 2em 5%
@debug ml.uv('Ml-2.5gg'); // calc(var(--ml-gg) * -2.5)
@debug ml.uv('W1/3'); // 33.3333333333%
@debug ml.uv('W2/$div'); // calc(2 / var(--ml-div) * 100%)

This type converts numbers almost as a default type, except that it does not convert numbers without units of measurement in a pixels. Schema:

('num-length': list.join('num-length', $uv-type-base))

Usage:

@debug ml.uv('Zi5'); // 5
@debug ml.uv('Tas2e'); // 2em

Converts percent to decimal fractions. Schema:

('num-percent': list.join('num-percent', $uv-type-base))

Usage:

@debug ml.uv('O70p'); // 0.7
@debug ml.uv('-S-50p'); // -0.5

Adds colors conversion to a default converters chain. Schema:

('outline': list.join(
	('keyword', 'color', 'number'), $uv-type-base
))

Usage:

@debug ml.uv('Bd3;tp;d'); // 3px transparent dotted

States are stored in the states section and grouped by type:

• pseudo-cls - pseudo classes
• pseudo-elm - pseudo elements
• custom - all the rest

Below is a quick reference of states. Later it will be supplemented by comments and examples.

If you want to add a state, it is recommended to do this in the custom section. Please note that in the code, all custom states begin with a hyphen. This prevents names collision with native states from CSS.

@use 'mlut/tools' as ml with (
	$utils-config: (
		'states': (
			'custom': (
				'rtl': '[dir=“rtl”]',
			),
		),
	),
);

@include ml.apply(('-rtl _Mr2r'), (), true);

// CSS
[dir=“rtl”] .-rtl_Mr2r {
	margin-right: 2rem;
}

The database of utilities is divided into 3 sections:

• utils - all utils that can be used to stylize
• media - @media features
• common - common utils for both section

Media features are here, because to work with them, the same code is used as for ordinary utilities.

The sections have a similar structure and consist of subsections such as registry and keywords.

The registry stores data of all utilities. You can get these data with the following path:

@use 'mlut/tools' as ml;
map.get(ml.$utils-db, 'utils', 'registry', '<utility-name>');

The registry is a map, the keys in which are the names of the utility, and the value can be, both a string with 1 property and a map with options. Below will be examined in detail the utility options. You can familiarize yourself with the utility registry on this page, and the registry of media features is available here.

In this subsection, keywords that are used in several utilities are stored. To use a set of keywords from here, specify the corresponding map key, in the keywords setting of utility.

@use 'mlut/tools' as ml with  (
	$utils-data: (
		'utils': (
			'registry': (
				'Mxw': (
					'keywords': ('sizing', 'my-sizing'),
				),
				'Flb': (
					'keywords': ('sizing', 'my-sizing'),
				),
			),
			'keywords': (
				// adds new keywords to the existing set
				'box-alignment': (
					'sf': safe,
					'u': unsafe,
				),
				'my-sizing': (
					'sm': 22rem,
					'md': 44rem,
				),
			),
		),
	),
);

@debug ml.uv('Mxw-sm'); // 22rem
@debug ml.uv('Flb-md'); // 44rem
@debug ml.uv('Jc-c;sf'); // center safe

See the full list of keywords here.

These options control how the utility works. You can find example of usage in the reference. Later more examples will be added.

Other settings that are not contained in main large maps

Groups are stored in a separate database $utils-groups-db. To modify or add groups, use $utils-groups. When specifying utilities in the group, you can use Generation Syntax. In this case, utilities with components will be generated for each value.

@use 'mlut' as ml with (
	$utils-groups: (
		'MPSpaces': (
			'M_ frc', Mt, Mr, Mb, Ml, -Mx, -My,
			P, Pt, Pr, Pb, Pl, -Px, -Py,
		),
	),
	$utils: (
		'MPSpaces': (
			100, '$myOffset'
		),
	),
);

// CSS
// some utils from standard library before

.M100 {
  margin: 100px;
}

.M100_frc:first-child {
  margin: 100px;
}

.M-\$myOffset {
  margin: var(--ml-myOffset);
}

.M-\$myOffset_frc:first-child {
  margin: var(--ml-myOffset);
}

.Mt100 {
  margin-top: 100px;
}

// etc

boolean | string
Increase the specificity of all utilities at once. When true - to each utility property will be added !important. A string with a CSS selector is also acceptable. It will be added before the utility selector.
Defaults to: false

@use 'mlut/tools' as ml with (
	$utils-up-specificity: true,
);

@include ml.apply('Mt2r');

// CSS
.Mt2r {
	margin-top: 2rem !important;
}