Set of universal helpers for using on any project

Helper for creating buttons. Prepares any element to styling as a button.

Helper for debugging layouts that built with grid system. It displays a grid system columns and gutters in the background of the container. The grid system are generated depending on the settings.

There may be minor inaccuracies in the drawing of the grid, because the grid is generated with CSS linear-gradient(). For gutters calculation are used CSS custom properties.

It not included in the default mlut distributive.

Helper for creating containers, with proportional width and height. Implemented using a pseudo-element with a padding-bottom in %.

The default aspect ratio is 16:9.

Helper for creating layouts. Suitable for columns, cards and horizontal lists. By default, flexbox technology is used for layouts.

Parts of the layout within a row are created using the elements:

• row__col
• row__item

Rows can be put into each other an unlimited number of times.

Row contains CSS counter named ml-row-item.

It not included in the default mlut distributive because partially based on the legacy grid system. It is recommended to use the CSS grid utilities instead.

The main element for creating columns in layout. By default, it stretches the entire width of the container. The columns have gutters on the sides and bottom.

The gutters are implemented using the margin and CSS custom properties.

Column width is set using W utility. See example above. The formulas for calculating the width and offset for the column are stored in the custom properties. In --ml-gscf for W and --ml-gsof for Ml utility. These formulas:

--ml-gscf: calc(var(--ml-gsc) / var(--ml-gscc) * 100% - var(--ml-gsfd, var(--ml-gg)) * 2);
--ml-gsof: calc(var(--ml-gso) / var(--ml-gscc) * 100% + var(--ml-gsfd, var(--ml-gg)));

--ml-gsc or --ml-gso is the value of the width or offset in the grid columns. This is a custom property of the utility.
--ml-gscc - the number of columns in the grid system. This is a global custom property that can be changed on any DOM node.
--ml-gsfd - variable is equal to the gutter if the gutter at the columns is created using margin. In row__col is equal 1gg.
Some of these variables can be changed using custom utilities.

You can create nested layouts with a mix of row and row__col on the same DOM node. If you don't need double fields in the nested row, use the mix with the row__item. See example below.

Element for creating parts of the layout. By default, it stretches across the width of the content.

The sizes and offsets are set with help of utilities.

Like a row__col, an element contains formulas for calculating width and offset. But --ml-gsfd here is equal 0px.

The helper-container for the main content of the page. The maximum width is set in the settings. The default is 1200px.

The container has sides padding that equal to gutters so that the content does not stick to sides on small screens. On wide screens the container is centered.

Styles like reset and normalize

Global CSS custom properties which used in mlut.

Generic CSS that contains box-sizing, reset, browser bugs fixes etc. You can configure it with settings.