Релиз Berry CSS 5.1
Новая версия Berry CSS предлагает несколько новых интересных возможностей. Это поддержка dark-режима, настройка цветов через css-переменные и возможность верстать классами Berry CSS с помощью нейросетей.
Верстка классами Berry с помощью нейросетей
Наверное — это самое интересное. В Berry CSS теперь есть текстовый файл, который содержит полную инструкцию с помощью которой нейросеть может научиться верстать классами Berry CSS. Более того, нейросеть сможет корректно предлагать не только css/html-вёрстку, но и сразу использовать Alpine.JS для интерактивности, иконки Bootstrap Icons, анимацию скроллинга WOW.JS и заглушки для изображений.
На специальной странице Berry CSS for AI я привел полную инструкцию как этим всем пользоваться. Принцип очень простой — нужно скормить готовый файл и после этого нейросеть сможет корректно работать с классами Berry CSS.
Текстовый обучающий файл я готовил достаточно долго, но в итоге смог понять и протестировать его на разных AI. После этого с помощью Copilot я сделал примеры промптов, которые показывают все возможности.
Что касается нейросетей, то самая большая сложность приключилась с ChatGPT, поскольку в бесплатной версии он не может прочитать весь файл (хотя утверждает обратное, врёт, короче) и начинает выдумывать свои классы и много ещё чего. Поэтому использовать бесплатный ChatGPT скорее всего не получится.
Очень хорошо себя показал Copilot. Я помню его первые версии, когда он просто терял нить разговора и начинал тупить, но сейчас это достойный помощник. Его код получается хороший, без излишеств, придраться не к чему.
Что касается Grok, то он также хорошо справляется с версткой, но слишком уж он многословен. К итоговому коду претензий нет, но очень он любит всё это описывать, что явно лишнее. Также он приводит боковую панель, где в теории можно было бы посмотреть результат верстки, но он упускает тот момент, что следует ещё загрузить css-файл Berry CSS из CDN. В общем мне так и не удалось его убедить это сделать.
Gemini показал себя несколько слабей остальных. В классах он не ошибается, но его подход к вёрстке сбивает с толку. Например он указал flex-column там где можно сделать более простую верстку. Скорее всего он просто ещё не сильно натренирован. Возможно, со временем, он будет лучше выполнять задачи.
Но фаворитом оказался Deepseek. Я даже немного обалдел от его кода: это не просто какой-то каркас, а почти готовое дизайнерское решение. Главный минус Deepseek — это частая недоступность его сервера...
Скорее всего в процессе использования нейросетей я буду находить какие-то недочеты, поэтому обучающий файл будет уточняться. Но даже в текущем варианте возможности впечатляют.
Для примера покажу как выполнили запрос Deepseek (слева) и Grok (справа):
Создай карточку товара со следующими параметрами: ☑️ Изображение товара ☑️ Название ☑️ Описание ☑️ Цена ☑️ Кнопка "Купить" ☑️ Адаптивность для планшета ☑️ Тень блока
Умные часы Pro
Водонепроницаемые, с пульсометром и 10-дневной батареей.
Название товара
Краткое описание товара, его особенности и преимущества.
Работа с цветами
Модуль Colors я полностью переписал с Sass на CSS. То есть это продолжение всё той же линии развития Berry CSS с переходом на css-переменные.
Цвета в Berry CSS настраивались через Hue и Saturation модели HSL. Раньше в CSS не было нормальной её поддержки, поэтому я использовал Sass для преобразования hsl в обычный hex. Таким образом, если нужно было сменить цвета, то приходилось использовать Sass.
В версии 5.1 можно менять цвета через css-переменные, то есть теперь модуль Colors — это чистое css-решение.
Например, если нужно сменить оттенки палитры red, то делается это двумя строчками:
:root {
--red-hue: 123deg; /* hue */
--red-sat: 41%; /* saturation */
}
На основе этих переменных будут автоматически пересчитаны яркостная шкала ( --red50, --red100, --red150... --red950).
Яркостная шкала фактически повторяет модель из Sass. Разница очень небольшая только в том, что 100 единиц соответствуют примерно 10% яркости. Например между red100 и red200 примерно 10% яркости. Таким образом можно примерно оценивать контраст текста/фона. Скажем если нужен хороший контраст, то это от +400 единиц, например red100 и red600. Это рекомендации WCAG.
С точки зрения css-классов ничего не изменилось, разве что добавилось больше градаций цветов для классов hover-, links- и т.д. То есть я хотел охватить классами все доступные цвета.
Изменения по Material Design
Здесь довольно существенное изменение — полностью удалена палитра secondary. Поэтому если вы использовали эту палитру, то придется поменять её классы.
Причина удаления — чистый прагматизм. На практике она практически не используется, поэтому нет смысла её дальше поддерживать. Сложность ещё в том, что secondary — это акцентная палитра, поэтому должна быть завязана на primary. Но связь может строиться по разным алгоритмам, например комплиментарность или триада, то есть secondary будет зависеть от и от этого.
Поэтому намного проще верстать в монохромной primary, а если нужен акцент, то использовать уже готовые палитры. Если уж совсем нужен точный цвет, то лучше воспользоваться фиксированными цветами color1..9. То есть верстаем один раз, а цвет подбираем/уточняем уже через css-переменные. Верстка при этом не меняется.
Поддержка dark-режима
Я уже раньше анонсировал эту возможность для моего сайта. Пример переключения см. в сайдбаре.
Для dark-режима я использую классы с префиксом dark:, как это сделано в Tailwind. Так что это привычная семантика.
Структура фреймворка
Вернул прежнюю структуру sass-файлов. В 5.0 я думал, что будет движение в сторону theme-зации, но по факту оказалось, что это не имеет смысла. Поэтому я использую привычный вариант размещения без подкаталога themes. Если вы работает через CDN, то поменяйте адрес подключения. Для остальных это всё тот же файл berry.css.
Из-за добавления dark-режима и новых классов цветов, размер css-файла увеличился примерно до 260Кб. То есть большая часть Berry CSS — это классы цветов. Но я протестировал и выяснил, что это совсем небольшое увеличение трафика — всего 30Кб (было 25Кб). Поэтому изменения никак не должны повлиять на скорость работы.
В планах (насколько это возможно), я думаю, что внесу изменения в шаблон MF для поддержки Berry CSS 5.1. Если вы ещё не купили MF, то самое время это сделать, пока действует такая низкая цена.