Логотип Berry CSSBerry CSS 3.0

Утилитарные классы (настройка)

Утилитарные классы как правило описывают только одно css-свойство, что позволяет использовать их в любых блоках без редактирования css-кода.

Все переменные утилитарных классов размещаются в файле utilities/_variables.scss. Этот файл можно не трогать, а переопределить переменные в своих настройках.

// override variable
$padding_list: 0, 10, 20, 60;

@import 'berry/berry';
...

Некоторые Sass-переменные имеют аналоги в виде CSS-переменных. Они отмечены значком [cssvar] с названием переменной.

Выборочная компиляция

Утилитарные классы размещены в файлах, где сгруппированы однотипные свойства. Например классы для текста собраны в _text.scss, а FlexBox в _flex.scss. Если какие-то классы не используются в проекте, то можно убрать их из подключаемых. Например, если не используются классы .column, достаточно закомментировать строчку в _utilities.scss:

...
@import 'utilities/border';
// @import 'utilities/column';
@import 'utilities/cursor';
...
К сожалению в Sass нет возможности использовать условия с командой @import, поэтому приходится вручную указывать подключаемые файлы.

Префикс 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
$screen_media_flex_list: (
    "tablet": $SCREEN_TABLET, 
    "phone": $SCREEN_PHONE,
    "small": $SCREEN_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": $SCREEN_TABLET, 
    "phone": $SCREEN_PHONE,
    "small": $SCREEN_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": $SCREEN_TABLET, 
    "phone": $SCREEN_PHONE,
    "small": $SCREEN_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": $SCREEN_TABLET, 
    "phone": $SCREEN_PHONE,
    "small": $SCREEN_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": $SCREEN_TABLET, 
    "phone": $SCREEN_PHONE,
    "small": $SCREEN_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": $SCREEN_TABLET, 
    "phone": $SCREEN_PHONE,
    "small": $SCREEN_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