Адаптивность в Berry CSS

Berry CSS реализует адаптивность с помощью классов, которые имеют действие в пределах своего media-условия.

Классы адаптивности

Классы адаптивности имеют суффикс, который определяется в sass-переменных. По умолчанию это:

-tablet — max-width: 768px
-phone — max-width: 667px
-small — max-width: 360px

Например класс w70-phone сработает при условии размера экрана менее 667px.

Формально Berry CSS поддерживает ещё суффиксы адаптивности: -medium, -desktop и -large, но по умолчанию они не используются.

Sass-переменные для настройки адаптивности

В модуле utilities определены несколько переменных, которые хранят 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)",

Эти переменные используются в других переменных, которые участвуют в создании классов.

Область действия media-условий

Media-условия составлены так, что распространяют своё действие на более «низкий» класс. Например w70-tablet будет действовать и как w70-phone, и как w70-small. А w70-phone будет действовать и как w70-small.

При необходимости можно указать любые другие media-условия, например с ограничениями min-width.

Классы ширины

Классы ширины для адаптивности указываются в переменой $screen_media_width_list в файле 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_width_list: (
		"tablet": $tablet, 
		"phone": $phone,
		"small": $small,
	),
	
	// ... другие переменные модуля
);

Подобным образом можно изменить остальные переменные адаптивного дизайна.

Для того, чтобы классы корректно срабатывали, следует список составлять от большой ширине к малой. В данном примере tablet phone и small — суффиксы, которые добавляются к классам адаптивности.

Например: w70-tablet, w70-phone, w70-small.

Такой подход позволяет составлять произвольные имена классов. Например:

$screen_media_width_list: (
	"xl": $tablet, 
	"sm": $phone,
	"little": $small,
),

Что создаст классы например: w70-xl, w70-sm, w70-little.

Аналогичным образом можно убрать какой-то элемент из списка, если его классы ну нужны. Например сайту не нужна адаптивность small — достаточно удалить или закомментировать соответствующую строчку: Berry CSS не будет создавать для него классы.

Данный подход применяется и в других списках адаптивности.

Классы ширины обычно используются совместно с flex-сеткой.

<div class="flex flex-wrap">
    <div class="w30 w50-tablet w100-phone">1</div>
    <div class="w30 w50-tablet w100-phone">2</div>
    <div class="w40 w100-tablet">3</div>
</div>

Класс w30 — это 30% ширина ячейки по умолчанию. Когда сработает условие $SCREEN_TABLET будет действовать класс w50-tablet. А при $SCREEN_PHONE — w100-phone.

Последняя ячейка при $SCREEN_TABLET примет w100-tablet и распространится сразу на phone, поэтому класс w100-phone для неё можно не указывать.

С помощью классов ширины можно настраивать сетки в любых вариантах.

Flexbox-свойства

Некоторые свойства Flexbox также могут меняться в зависимости от media-условий. Переменная $screen_media_flex_list задаёт список суффиксов и условий для них.

$screen_media_flex_list: (
	"tablet": $tablet, 
	"phone": $phone,
	"small": $small,
),

Создаются классы (на примере «-tablet»):

flex-tablet
flex-wrap-tablet
flex-reverse-tablet
flex-vcenter-tablet
flex-hcenter-tablet
flex-orderX-tablet

Их действие аналогично «обычным» (без суффикса адаптивности), только распространяется в пределах своего media-условия.

Классы скрытия «hide-» и показа «show-»

С помощью переменной $hide_media_list задаются классы, которые можно применять для скрытия элементов в зависимости от media-условия.

Классы «hide-» формируют свойство display: none;. Классы «show-» display: block;

<div class="flex flex-wrap">
    <div class="w30 w50-tablet w100-phone">1</div>
    <div class="w30 w50-tablet w100-phone">2</div>
    <div class="w40 hide-tablet">3</div>
    <div class="w100 b-hide show-tablet">4</div>
</div>

В этом примере ячейка 3 будет скрыта на tablet. Ячейка 4 будет скрыта по умолчанию b-hide, но отобразится на tablet — show-tablet.

Классы «hide-» и «show-» могут использовать без привязки к flex-сетке как самостоятельные классы.

Классы высоты

Для высоты используется список $screen_media_height_list, который формирует такие классы (на примере tablet):

.h-auto-tablet { 
    height: auto;
    min-height: 0;
    max-height: none;
}

Эти классы используются там, где нужно восстановить автоматическую высоту для нужного экрана.

Отступы

Для адаптивности отступов используются две переменные:

$margin_list_media: (0, 5, 10, 20),
$padding_list_media: (0, 5, 10, 20),

которые и участвуют в создании классов. Список медиа-условий и суффиксов хранится в $screen_media_mar_pad_list.

Текст

Список адаптивности для классов текста находится в $screen_media_text_list. На его основе формируются классы (на примере tablet):

t-right-tablet
t-left-tablet
t-center-tablet
t-justify-tablet
t-nowrap-tablet
t-wrap-tablet

Также будут сформированы классы для размеров текста в REM на основе переменной $text_rem_screen:

$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),

Например: t130-tablet, t90-phone.

Бордюры

Несколько классов для скрытия бордюров: .bor-none-tablet, .bor-none-phone, .bor-none-small. Они задаются в переменной $screen_media_border_list:

$screen_media_border_list: (
	"tablet": $tablet, 
	"phone": $phone,
	"small": $small,
),

Использование переменных `$SCREEN_XXX` в своих классах (scss-файлах)

Можно создавать свои css-классы через Sass, используя переменные модуля utilities.

@forward '../../config/utilities';
@use '../../modules/utilities/default' as utilities;

@media #{utilities.$SCREEN_TABLET} {
    .my-class-tablet {
        color: red;
    }
}

Примеры использования см. в модуле demo.

Адаптивность в CSS Grid

Адаптивность для CSS Grid может работать аналогично Flexbox, основываясь на ширине блока. Но у CSS Grid есть дополнительные возможности по перестройке сетки и ячеек, которые рассматриваются на отдельной странице.