Те кто читает меня в телеграмм-канале знают, что я сейчас плотно занят переделкой 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-кода — без него, к сожалению пока никак.
Документацию я выложил сейчас, поскольку основная её часть уже готова. Планов, естественно, масса. Постепенно буду добавлять новые примеры использования. Сейчас они достаточно скудны, но на это тоже нужно время. :)