🍓 Berry CSS 3.0

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

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

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

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

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

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

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

В файле utilities/_variables.scss определены несколько переменных, которые хранят 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:

$screen_media_width_list: (
    "tablet": $SCREEN_TABLET, 
    "phone": $SCREEN_PHONE,
    "small": $SCREEN_SMALL,
);

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

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

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

$screen_media_width_list: (
    "xl": $SCREEN_TABLET, 
    "sm": $SCREEN_PHONE,
    "little": $SCREEN_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_PHONEw100-phone.

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

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

Flexbox-свойства

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

$screen_media_flex_list: (
    "tablet": $SCREEN_TABLET, 
    "phone": $SCREEN_PHONE,
    "small": $SCREEN_SMALL,
);

Создаются классы (на примере «-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, но отобразится на tabletshow-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):

Также будут сформированы классы для размеров текста в 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.

Использование переменных $SCREEN_XXX в своих классах

Можно создавать свои css-классы через Sass:

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

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

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