Berry 3. Версия alpha 7 — документация

04-08-2020Время чтения ~ 4 мин.Berry CSS 3317

Те кто читает меня в телеграмм-канале знают, что я сейчас плотно занят переделкой Berry CSS. Да и на сайте я делал анонс. Переделка очень большая, затрагиваются все основные модули, но главное, я решил, что вначале будет документация, а уже потом будет публичная версия (значительно позже).

Поэтому, желающие могут ознакомиться с ранней версией документации, которая идёт в комплекте с версией Berry — alpha 7. Скачать версию Berry не получится, поскольку это закрытый репозиторий, но желающие могут вытянуть css-файл из документации, чтобы поиграться при желании.

Также я хочу немного остановиться на основных изменениях и новых возможностях css-фреймворка.

В первую очередь — это то, что я сделал модуль типографики, как это изначально было в UniCSS. Мой расчёт на сторонний фреймворк не оправдался, поэтому будет свой вариант. Тем более, что типографика достаточно простой модуль.

Berry и будет строиться на независимых модулях.

• resets — сбросы normalize и border-box
• utilities — утилитарные классы
• colors — цвета
• typography — типографика
• components — дополнительные компоненты (используется JavaScript)

Сбросы используются нормальные, без каких-либо модификаций. Это очень важно, поскольку от этого зависит «начальная точка» любой вёрстки. И любое отличие от «стандарта» — зло.

Компоненты — это то, чего постоянно недостаёт при создании сайта. Но в Berry компоненты будут полностью независимы, то есть можно будет их переделывать под свою задачу. Кроме того, компоненты могут содержать js-код, который так же лишен внешних зависимостей. Пока у меня ещё не было времени ими плотно заняться, поэтому эту работу я отложил на более поздний срок.

Другой важный момент — кастомизация под свою задачу. Здесь есть уровень Sass и уровень CSS.

Раньше приходилось использовать свой файл variables.scss, чтобы заменить все sass-переменные фреймворка. Теперь переменные объявлены как !default, а значит достаточно переопределить только те, которые требуют изменения. Об этом написано в документации, не буду повторяться здесь.

Также можно переопределять поведение Berry через CSS-переменные. То есть IE11 — прощай! Вообще меня всегда смущал тот факт, что для смены каких-то примитивных вещей, например базовый шрифт дизайна, требует sass-перекомпиляция. Через css-переменные это всё делается намного проще и удобней. И вот теперь в Berry используется множество классов, которые понимают css-переменные.

Преимущество здесь в том, что а) есть возможность кастомизации дефолтных свойств классов и б) уменьшение объёма css-кода, поскольку вариативная часть вынесена в переменные.

Дальше. Модуль цветов. В своём канале я уже рассказывал основную идею о том, как рассчитывается плавная градация яркости. Используя немного магии Sass, каждый цвет задаётся в виде значения Hue и Saturation:

$colorHS-gray:   210,  5%; // Hue, Saturation
$colorHS-red:      4, 95%;
$colorHS-brown:   15, 47%;
$colorHS-orange:  35, 99%;
$colorHS-yellow:  53, 99%;
и т.д.

А вот яркость определяется автоматом с равномерным шагом между яркостью 100 и 900. Получилось симпатично. Ну и главное что это удобно настраивается в широких пределах. Те, кто привык работать с именованными цветами, могут работать только с ними, отключив генерацию яркостей. И, опять же, цвета можно переопределить через css-переменные.

В Berry доступны новые возможности CSS 3, вроде колонок для текста (collumn), свойства фона, object-fit и т.д. Кроме того, я решил добавить экспериментальную возможность по поддержке CSS Grid. Кто с grid работал, знает, что с ним сумасшедшая вариативность и загонять её в отдельные классы нереально — это очень раздует css-код, и при этом всё равно не покроет все варианты. Поэтому для grid я использую css-переменные. Получилось достаточно просто и элегантно:

<div class="grid-var" style="--gap: 20px 10px; --columns: auto auto auto;">     
    <div class="grid-item-var" style="--column: 1/3; --row: 1/3">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div class="grid-item-var" style="--column: 2/4; --row: 3/4">5</div>
</div>

То есть два класса: один для контейнера, другой для ячейки. Для них простые css-переменные. Осталось прикрутить для сетки разные media-условия и можно будет пользоваться.

Что ещё отметить?.. Например формы. Дизайн можно сделать любой — это вообще не проблема. А вот поддержку :invalid уже сложней, поскольку в браузерах нет поддержки «промежуточных» состояний через CSS. Не буду вгонять в тоску этой теорией, но попробуйте в своём фреймворке прописать required для текстового поля и убедитесь, что далеко не все его полноценно поддерживают. А те, кто поддерживают пестрят как новогодняя ёлка от этого самого :invalid в ситуации, когда пользователь даже не прикоснулся к отправке данных.

Проблема достаточно серьёзная и присутствует почти в каждом css-фреймворке и именно поэтому все их демо-примеры не содержат невалидных форм.

В Berry CSS я решил это за счёт разделения классов, а также пару строчек js-кода — без него, к сожалению пока никак.

Документацию я выложил сейчас, поскольку основная её часть уже готова. Планов, естественно, масса. Постепенно буду добавлять новые примеры использования. Сейчас они достаточно скудны, но на это тоже нужно время. :)