Berry CSS 4.2 Модуль utilities (настройка)
Утилитарные классы как правило описывают только одно css-свойство, что позволяет использовать их в любых блоках без редактирования css-кода.
Все настройки утилитарных классов следует делать в файле config/_utilities.scss в секции @use with.
Переменные по умолчанию расположены в файле modules/utilities/_default.scss.
Файлы модулей не нужно редактировать!
Префикс berry-классов
Используется, если возникает конфликт имён с другими фреймворками. По умолчанию префикс отсутствует.
$pf: "";
Переменные адаптивного дизайна
С их помощью задаются правила для @media.
$SCREEN_LARGE: "(min-width: 1201px)", $SCREEN_DESKTOP: "(max-width: 1200px)", $SCREEN_MEDIUM: "(max-width: 1024px)", $SCREEN_TABLET: "(max-width: 768px)", $SCREEN_PHONE: "(max-width: 667px)", $SCREEN_SMALL: "(max-width: 360px)",
Layout (контейнер)
Указывает максимальный размер для классов layout-.
$layout_max_width: 1200px, // [cssvar] --layout-max-width
Список дополнительных размеров:
$layout_max_width_list: (
"tablet": 768px,
"phone": 667px,
),
Внутренний отступ (padding) для wrap-блока.
$layout_wrap_padding: 15px, // [cssvar] --layout-wrap-padding
Flexbox
Список @media-условий для flex-wrap (.flex-wrap-tablet, .flex-wrap-phone и т.д.). Указывается суффикс и условие. Пример конфигурации в файле config/_utilities.scss
// переменные этого файла, которые используются в @use $tablet: "(max-width: 768px)"; // совпадает со $SCREEN_TABLET $phone: "(max-width: 667px)"; // совпадает со $SCREEN_PHONE $small: "(max-width: 360px)"; // совпадает со $SCREEN_SMALL // настройки модуля utilities @use '../modules/utilities/default' with ( $screen_media_flex_list: ( "tablet": $tablet, "phone": $phone, "small": $small, ), );
Список возможных значений для order, flex-grow и flex-shrink
// .flex-order2, .flex-grow5, .flex-shrink4 $flex_order_list: (1, 2, 3, 4, 5), $flex_grow_list: (1, 2, 3, 4, 5), $flex_shrink_list: (1, 2, 3, 4, 5),
Список значений для flex-basis. Указывается имя класса и значение свойства.
// flex-basis: XXX
$flex_basis_list: (
"flex-basis50px": 50px,
"flex-basis100px": 100px,
"flex-basis150px": 150px,
),
Скрытие элемента для адаптивного дизайна
Указывается суффикс и условие.
// .hide-tablet .hide-phone
$hide_media_list: (
"tablet": $tablet,
"phone": $phone,
"small": $small,
),
Ширина
По умолчанию ширина указывается в процентах.
// .w50, .w24 $width_list_percent: (0, 1, 2, 3, 4, 5, 10, 15, 20, 23, 24, 25, 30, 31, 32, 33, 34, 35, 40, 45, 46, 47, 48, 49, 50, 55, 60, 65, 66, 67, 68, 69, 70, 75, 80, 85, 90, 100),
Аналогично в единицах PX.
// .w70px, .w300px-max, .w50px-min $width_list_px: (5, 10, 15, 20, 25, 30, 35, 40, 50, 60, 100, 150, 200, 250, 300, 400, 500, 600, 700, 800),
Список media-условий.
// .w70-tablet, .w50-phone, .w60-small $screen_media_width_list: ( "tablet": $tablet, "phone": $phone, "small": $small, ),
Высота
Высота указывается в PX. Сразу формируются классы для min-height и max-height.
// .h20px, .h100px-min, .h30px-max $height_list_px: (10, 15, 20, 30, 40, 50, 60, 70, 100, 200, 300, 400, 500),
Высота в единицах VH.
// .h50vh, .h100wh $height_list_vh: (50, 100),
Список мedia-условий.
// .h100px-tablet $screen_media_height_list: ( "tablet": $tablet, "phone": $phone, "small": $small, ),
Отступы
Префикс для классов padding и margin.
// pad => .pad30 | p => .p30 | pd => .pd30 // mar => .mar30 | m => .m30 | mg => .mg30 $padding_prefix: pad, $margin_prefix: mar,
Прописывать для классов отступов !important: true — да, false — нет.
$padding_margin_important: true,
Список значений padding. По умолчанию используются единицы PX.
// .pad5, .pad50-t, .pad10-rl, .pad20-tb $padding_list: (0, 3, 5, 6, 7, 8, 9, 10, 15, 20, 25, 30, 40, 50, 60, 70, 100),
Аналогично для margin.
// .mar5, mar50-t, .mar10-rl, .mar20-tb $margin_list: (0, 5, 6, 7, 8, 9, 10, 15, 20, 25, 30, 40, 50, 60, 70, 100),
Значения, который будут использоваться в адаптивном дизайне.
$margin_list_media: (0, 5, 10, 20), $padding_list_media: (0, 5, 10, 20),
Список media-условий (используются только $margin_list_media и $padding_list_media)
// .mar10-phone, .pad0-tablet $screen_media_mar_pad_list: ( "tablet": $tablet, "phone": $phone, "small": $small, ),
Тексты
Размеры текста. Единицы по умолчанию REM. В списке указываются значения, как это принято в CSS. Классы формируются умножением на 100 (1rem = 100).
// .t80, .t200 $text_rem: (.8, .9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8, 2.9, 3, 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.8, 3.9, 4, 4.5, 5),
Размеры, которые нужны для адаптивного дизайна.
// .t80-tablet, .t200-phone $text_rem_screen: (.8, .9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2, 3, 4, 5),
Размеры в единицах EM (1em = 100).
// .t80em, .t200em $text_em: (.8, .9, 1, 2),
Размер в PX
// .t8px, .t20px $text_px: (8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 30, 40, 50),
Интерлиньяж (line-height). По умолчанию безразмерные единицы.
// .lh120 {line-height: 1.2;}
$text_lh: (1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2),
Интерлиньяж в единицах EM.
// .lh150em {line-height: 1.5em;}
$text_lh_em: (1, 1.1, 1.2, 1.3, 1.5, 1.8, 2),
Список размеров (rem) и некоторых других свойств для media-условий.
// .t130-tablet, .t-right-phone, .t-wrap-phone, .t-nowrap-tablet $screen_media_text_list: ( "tablet": $tablet, "phone": $phone, "small": $small, ),
Моноширинный шрифт для класса t-mono.
$text_monospace: (SFMono-Regular, Menlo, Monaco, Consolas, "PT Mono", "Liberation Mono", "Courier New", monospace),
Бордюры
Список размеров (border-width). По умолчанию размер в PX.
// .bor1, .bor2 $border_list: (1, 2, 3, 4, 5),
Доступные списки стилей
// .bor-solid .bor-dotted-rl $border_type_list: (solid, dotted, dashed, double),
Класс bordered
$bordered: (#D4D7DD 1px solid), // [cssvar] --bordered
Скругление (border-radius). Единицы по умолчанию — PX.
// .rounded10 {border-radius: 10px;}
$rounded_list: (0, 3, 5, 7, 10, 20),
Скругление для класса rounded
$rounded: 7px; // [cssvar] --rounded-radius
Позиционирование
Список значений для top, right, bottom, left.
// .pos0-t, .pos10-r, .pos10-b, .pos10-l $position_list: (0, 10, 20, 60, 80),
Список значений для z-index
$zindex_list: (1, 2, 9, 99, 999, 9999),
Прозрачность
Список значений прозрачности. Формируются классы для opacity и background-color. Значения задаются как это принято в CSS. Для классов значение умножается на 100.
// opacity: XXX, background-color: rgba(0, 0, 0, XXX) // .bg-op30, .hover-bg-op30, .opacity10, .hover-opacity10 $opacity_list: (.1, .2, .3, .4, .5, .6, .7, .8, .9, 1),
Тени
Формируются два класса для дефолтных теней блока .b-shadow-var и текста .t-shadow-var.
//.b-shadow-var, .t-shadow-var $shadow-b: (0 2px 7px 0 rgba(0, 0, 0, 0.3)), // [cssvar] --shadow-b $shadow-t: (1px 1px 5px #999), // [cssvar] --shadow-t