Логотип Berry CSSBerry CSS 4.1

Модуль 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