container

Object of Strings - настройки внешнего контейнера


// defaults
{
   maxWidth: "1280px",
   fields: "30px"
}

Настройки контейнера, отвечающего за горизонтальные отступы и выравнивание макета по центру большого экрана.

maxWidth

Максимальная ширина сайта на экарне.

Используется в примеси wrapper.

Допустимы любые единицы измерения, на практике применяются только px.

fields

внутренние отступы контейнера

Используется в примесях wrapper и wrapper-full.

Задаёт симметричные padding-left и padding-right. Этим увеличивают реальную ширину контейнера из-за box-sizing: content-box.

По смыслу fields - поля страницы. Такие же, как поля страницы книги, - для удобства восприятия информации.

Внимание! fields обязан быть >= offset / 2

Нарушение этого условия с большой вероятностью приводит к появлению горизонтальной полосы прокрутки.

Дело в том, что за счёт отрицательных margin-left и mergin-right, столбцы вываливаются из строки на расстояние offset / 2

Если fields будет меньше, то столбцы вылезут за контейнер и сделают страничку шире экрана. Например, при fields = 10px и offset = 30px можно получить ширину страницы 5px + 100vw + 5px.

Подробнее про настройку offset.