Дизайн-система Bulma.

Дизайн-система Bulma — фреймворк CSS с явно заданным поведением

Используйте классы Bulma для семантических элементов HTML

Bulma предлагает визуальный язык для элементов, компонентов, вспомогательных классов макета и модификаторов. Это не менеджер состояния формы и не среда выполнения виджетов JavaScript. Редакция загружает официальную таблицу стилей версии 1.0.4 и добавляет небольшой скрипт, полностью приведённый в примере, для проверки данных, обновления предварительного просмотра текста в реальном времени и переключения темы. Зависимость React и провайдер фреймворка не требуются.

Поле объединяет подпись, контейнер элемента управления и вспомогательный текст. Класс input назначается самому полю ввода, а select — это оболочка вокруг нативного элемента select. Эти различия важны: оболочка отвечает за оформление и интервалы. Если просто воспроизвести внешний вид со снимка экрана с помощью универсальных div, пропадут нативное редактирование и поддержка клавиатуры.

Прочитать вспомогательную спецификацию

Цветовые роли HSL и светлая/тёмная темы дизайн-системы Bulma

Используйте модификаторы вместо жёстко заданных переопределений

В Bulma 1 семейства цветов задаются компонентами HSL, из которых выводятся связанные значения. Роль ссылки используется для кнопки проверки, подписи раздела и вспомогательных акцентов. Метки предупреждения и успеха показывают состояния «Черновик» и «Готово к проверке», но текстовая подпись всегда остаётся видимой. Для сообщения используется is-info, поскольку оно объясняет ограничения процесса, а не сообщает об ошибке.

В демонстрационном примере для html задано data-theme=light. Кнопка выбора оформления переключает этот атрибут между значениями light и dark. Все карточки, поля, вспомогательный текст и сообщения одновременно наследуют соответствующую тему. Если задать для блока белый фон напрямую, переключение перестанет работать должным образом. Для фирменных переопределений измените документированные переменные ролей и проверьте производные состояния, а не только фон конечной кнопки.

Прочитать вспомогательную спецификацию

Предпочтительные шрифты и удобная шкала размеров в дизайн-системе Bulma

Пакет задаёт предпочтения, но не поставляет шрифты

Стек шрифтов по умолчанию начинается с Inter и включает несколько системных резервных шрифтов. Загрузка Bulma не скачивает Inter. В этом автономном примере используется тот из перечисленных шрифтов, который установлен в системе. Поэтому в рабочей сборке, где требуется конкретный шрифт, необходимо отдельно предоставить файл шрифта и настроить его загрузку. Классы заголовка и подзаголовка задают визуальную иерархию, не меняя уровень заголовка HTML.

На редакционной странице для заголовка страницы используется title is-2, для формы — title is-4, а для заголовка статьи — title is-3. На узких экранах локальное переопределение уменьшает размер заголовка страницы до 2rem. Для элементов управления сохраняется стандартный размер 1rem. Вспомогательный текст расположен рядом с соответствующим полем, поэтому пользователю не нужно сверяться с инструкциями в отдельной боковой панели.

Прочитать вспомогательную спецификацию

Вспомогательные классы интервалов и адаптивные колонки в дизайн-системе Bulma

Соотношение семь к пяти с автоматическим вертикальным расположением

Для родительского элемента columns используются классы is-variable is-6, а для дочерних — column is-7 и column is-5. Такое соотношение оставляет форме больше места, чем предварительному просмотру статьи. При стандартном подходе mobile-first колонки на мобильных экранах располагаются вертикально. Поэтому здесь не добавлен is-mobile: он сохранял бы тесное горизонтальное расположение.

Суффиксы вспомогательных классов интервалов не соответствуют линейной шкале в пикселях. В частности, суффиксам пять и шесть соответствуют 1.5rem и 3rem. Для интервала между карточкой и сообщением используется mt-5, а для небольших подписей — mb-3. Внешняя секция переопределяет значения приложения: вертикальный отступ составляет 2rem, горизонтальный — 1.5rem; полный набор дополнительных CSS добавляется при настройке.

Прочитать вспомогательную спецификацию

Структура полей и проверка данных в дизайн-системе Bulma

Ошибка — это не только цвет

Для заголовка и краткого описания явно заданы связи с подписями и вспомогательным текстом. При отклонении отправки к полю ввода и вспомогательному тексту добавляется is-danger, устанавливается aria-invalid=true, а фокус переводится на первое поле с ошибкой. Минимальная длина заголовка — пять символов после удаления пробелов по краям; краткого описания — двадцать символов. Это примеры редакционных требований, а не ограничения Bulma.

Также необходимо установить флажок проверки текста. Пояснение к ошибке связано с полем через aria-describedby. Bulma может отображать эти состояния, но не может определить, готов ли текст. Это решение принимает скрипт; он же предотвращает стандартную отправку формы. Результат работы сервера не имитируется.

1. Очистите заголовок и отправьте форму, чтобы увидеть, как фокус переместится на поле с ошибкой.
2. Восстановите заголовок и краткое описание длиной не менее двадцати символов.
3. Установите флажок проверки текста и отправьте форму, затем снова измените текст, чтобы вернуть заданию состояние «Черновик».

Прочитать вспомогательную спецификацию

Карточка, сообщение и метки состояний в дизайн-системе Bulma

Назначьте каждому контейнеру одну задачу

В карточке статьи отдельно используются card-header и card-content. В заголовке указана тема, а в метке отображается редакционное состояние. Содержимое включает обновляемые в реальном времени раздел, заголовок и краткое описание, а затем метаданные. В предварительном просмотре намеренно сделан акцент на тексте: автор может оценить иерархию и длину, не отвлекаясь на изображение-заполнитель.

В компоненте сообщения используются message-header и message-body, чтобы объяснить, что готовность к проверке определяется локально. Сообщение остаётся видимым независимо от результата проверки. Временное уведомление об успехе было бы плохой заменой этого постоянного пояснения: если его закрыть, пользователь может решить, что статья опубликована.

• Карточка: текущая структура статьи.
• Метка: явное состояние черновика или проверки.
• Сообщение: постоянное пояснение действия.

Прочитать вспомогательную спецификацию

Состояние приложения без среды выполнения виджетов в дизайн-системе Bulma

Не допускайте устаревшего статуса успеха и небезопасной вставки содержимого в предварительный просмотр

Каждое событие ввода обновляет предварительный просмотр и сбрасывает состояние на «Черновик». Так после изменения автором уже проверенного текста не остаётся пометка «Готово». Для отображения используется textContent, поэтому введённый текст HTML показывается как текст, а не интерпретируется как разметка. Это задачи приложения; таблица стилей Bulma не может их решить.

Восстановление черновика вызывает form.reset, удаляет классы проверки и aria-invalid, очищает пояснение к флажку и заново формирует предварительный просмотр. Исходный пример текста восстанавливается без перезагрузки документа. Абзац состояния использует role=status для сообщений об изменениях после отправки формы, а при обычном вводе фокус не перемещается повторно.

Прочитать вспомогательную спецификацию

Установите CSS дизайн-система Bulma и сделайте поведение наглядным

Без провайдера и встроенного Bulma JavaScript

Установите [email protected] и скопируйте скомпилированный CSS в локальный ресурс или импортируйте этот CSS в существующую систему сборки. Для показанной здесь обычной настройки HTML после копирования ресурса сборка не требуется. Поместите всю разметку редакционного интерфейса в body и подключите app.js с атрибутом defer. Не подключайте посторонний пакет JavaScript в расчёте на то, что он активирует компоненты Bulma.

Если позже вы добавите модальное окно или выпадающий список, предусмотрите для него клавиатурное управление, поведение фокуса и закрытие. Такой класс, как is-active, меняет внешний вид, но не создаёт ловушку фокуса. В этом примере нативные поля ввода и кнопки сохраняют поведение простым и удобным для проверки.

Прочитать вспомогательную спецификацию

Настраивайте дизайн-систему Bulma на подходящем уровне

Перед переопределением проверьте переменные компонентов

Глобальные переменные --bulma задают тему, но компоненты также определяют переменные в собственных селекторах. Более конкретное назначение переменной компонента может переопределить значение на корневом уровне. Если переопределение корневого значения не работает, проверьте класс в скомпилированном CSS и задайте значение для нужного компонента, а не добавляйте несвязанные объявления.

В продукте с длительным сроком службы разделяйте значения пакета по умолчанию, переопределения фирменного стиля и правила компоновки для конкретных экранов. Небольшая ширина контейнера и настройки заголовка для мобильных устройств в примере относятся к правилам экрана. В справочных таблицах отдельно указаны фактические значения Bulma, чтобы было понятно, какие параметры можно использовать повторно, а какие нужны только этому редакционному интерфейсу.

Прочитать вспомогательную спецификацию

Примеры компонентов дизайн-системы Bulma

<section class="section"><div class="container"><div class="level"><div class="level-left"><div><p class="is-size-7 has-text-weight-bold has-text-link mb-3">BULMA / LOCAL EDITORIAL DESK</p><h1 class="title is-2">Shape the next issue.</h1><p class="subtitle is-5">An article brief, a preview, and an explicit editorial state.</p></div></div><div class="level-right"><button class="button is-light" id="theme">Dark appearance</button></div></div><div class="columns is-variable is-6"><div class="column is-7"><form id="brief" class="box" novalidate><h2 class="title is-4">Article brief</h2><div class="field"><label class="label" for="headline">Headline</label><div class="control"><input class="input" id="headline" value="A quieter way to work" maxlength="90" aria-describedby="headline-help"></div><p class="help" id="headline-help">Use 5–90 characters. This field updates the preview as you type.</p></div><div class="field"><label class="label" for="section">Section</label><div class="control"><div class="select is-fullwidth"><select id="section"><option>Design notes</option><option>Field research</option><option>Product craft</option></select></div></div></div><div class="field"><label class="label" for="summary">Summary</label><div class="control"><textarea class="textarea" id="summary" rows="3" aria-describedby="summary-help">How small choices in layout and language can make a demanding interface feel manageable.</textarea></div><p class="help" id="summary-help">Use at least 20 characters to give the reviewer enough context.</p></div><div class="field"><label class="checkbox"><input id="checked" type="checkbox" aria-describedby="checked-help" aria-describedby="checked-help"> I have checked the headline and summary</label><p class="help" id="checked-help"></p></div><div class="field is-grouped is-grouped-multiline"><div class="control"><button type="submit" class="button is-link">Mark ready for review</button></div><div class="control"><button id="reset" type="button" class="button is-light">Restore draft</button></div></div><p id="result" class="help" role="status">Draft changes stay in this page only.</p></form></div><div class="column is-5"><article class="card"><header class="card-header"><p class="card-header-title">Issue 08 / Article preview</p><span id="state" class="tag is-warning is-light mr-4 my-4">Draft</span></header><div class="card-content"><p class="is-size-7 has-text-link has-text-weight-bold mb-3" id="preview-section">Design notes</p><h2 class="title is-3" id="preview-title">A quieter way to work</h2><div class="content" id="preview-summary">How small choices in layout and language can make a demanding interface feel manageable.</div><hr><p class="is-size-7">Copy desk · Reading time assigned after editing</p></div></article><article class="message is-info mt-5"><div class="message-header"><p>Review is a separate step</p></div><div class="message-body">Ready for review is a local label. It does not publish this article, send a notification, or save a draft on a server.</div></article></div></div><p class="is-size-7">Official Bulma 1.0.4 CSS. Form validation and preview updates are original JavaScript.</p></div></section>

const $=id=>document.getElementById(id);
const fields=['headline','summary'];
function draft(){ $('state').textContent='Draft';$('state').className='tag is-warning is-light mr-4 my-4';$('result').textContent='Draft changes stay in this page only.';}
function preview(){ $('preview-title').textContent=$('headline').value.trim()||'Untitled article';$('preview-summary').textContent=$('summary').value.trim()||'No summary yet.';$('preview-section').textContent=$('section').value;draft();}
for(const id of ['headline','summary','section','checked'])$(id).addEventListener('input',preview);
$('brief').addEventListener('submit',event=>{event.preventDefault();let first=null;for(const id of fields){const invalid=$(id).value.trim().length<(id==='headline'?5:20);$(id).classList.toggle('is-danger',invalid);$(id).setAttribute('aria-invalid',String(invalid));$(id+'-help').classList.toggle('is-danger',invalid);if(invalid&&!first)first=$(id);}$('checked-help').textContent=$('checked').checked?'':'Confirm the copy check before review.';$('checked-help').className='help is-danger';if(!$('checked').checked&&!first)first=$('checked');if(first){$('result').textContent='Check the highlighted brief fields.';first.focus();return;}$('state').textContent='Ready for review';$('state').className='tag is-success is-light mr-4 my-4';$('result').textContent='Marked ready in this local preview. Nothing was published.';});
$('reset').addEventListener('click',()=>{$('brief').reset();for(const id of fields){$(id).classList.remove('is-danger');$(id).removeAttribute('aria-invalid');$(id+'-help').classList.remove('is-danger');}$('checked-help').textContent='';preview();});
$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.theme!=='dark';document.documentElement.dataset.theme=dark?'dark':'light';$('theme').textContent=dark?'Light appearance':'Dark appearance';});