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

## Предварительный просмотр интерфейса дизайн-системы Bulma

Измените заголовок и краткое описание, проверьте редакционное задание, отметьте его как готовое и переключите светлую или тёмную тему.

## Справочник по дизайн-системе Bulma

Скомпилированная CSS Bulma 1.0.4 и официальная документация по адаптивности и вспомогательным классам. Компоненты HSL — значения по умолчанию пакета, а не замена фирменной палитры. Пересчёт rem выполнен для корневого размера 16px.

### Основы типографики и элементов управления

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --bulma-family-primary | Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif | Предпочтительный стек шрифтов; пакет не загружает файлы шрифтов. |
| --bulma-size-normal | 1rem | Размер текста элементов управления и основного текста по умолчанию. |
| --bulma-size-small | 0.75rem | Компактный размер вспомогательных элементов управления. |
| --bulma-size-medium | 1.25rem | Размер модификатора среднего уровня. |
| --bulma-size-large | 1.5rem | Размер крупного модификатора. |
| --bulma-weight-semibold | 600 | Подписи и более заметный текст интерфейса. |
| --bulma-block-spacing | 1.5rem | Интервал между блочными элементами. |
| --bulma-radius | 0.375rem | Радиус по умолчанию — 6px при корневом размере 16px. |
| --bulma-radius-small | 0.25rem | Малый радиус — 4px. |
| --bulma-radius-large | 0.75rem | Большой радиус — 12px. |
| --bulma-control-height | 2.5em | 2.5em соответствует 40px при размере элемента управления 16px. |
| --bulma-control-border-width | 1px | Общая толщина границ элементов управления. |
| --bulma-control-line-height | 1.5 | Общая высота строки текста элементов управления. |
### Формирование цветов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --bulma-primary-h / -s / -l | 171deg / 100% / 41% | Компоненты HSL основного цвета. |
| --bulma-link-h / -s / -l | 233deg / 100% / 63% | Роль цвета для действий и ссылок, используемая классом is-link. |
| --bulma-scheme-h / -s | 221 / 14% | Оттенок и насыщенность нейтральной цветовой схемы. |
| --bulma-scheme-main-l | 100% in light mode | Яркость основной светлой поверхности. |
| --bulma-text-l | 29% in light mode | Яркость текста в обычной цветовой схеме. |
| --bulma-text-title-l | 14% in light mode | Яркость более заметного текста заголовков. |
### Вспомогательные классы интервалов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| mb-0 | 0 | Утилита нижнего внешнего отступа; для остальных направлений используется та же шкала суффиксов. |
| mb-1 | 0.25rem | Утилита нижнего внешнего отступа; для остальных направлений используется та же шкала суффиксов. |
| mb-2 | 0.5rem | Утилита нижнего внешнего отступа; для остальных направлений используется та же шкала суффиксов. |
| mb-3 | 0.75rem | Утилита нижнего внешнего отступа; для остальных направлений используется та же шкала суффиксов. |
| mb-4 | 1rem | Утилита нижнего внешнего отступа; для остальных направлений используется та же шкала суффиксов. |
| mb-5 | 1.5rem | Утилита нижнего внешнего отступа; для остальных направлений используется та же шкала суффиксов. |
| mb-6 | 3rem | Утилита нижнего внешнего отступа; для остальных направлений используется та же шкала суффиксов. |
### Границы адаптивных режимов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| mobile | ≤768px | Колонки и уровень располагаются вертикально, если не добавлен is-mobile. |
| tablet | ≥769px | Колонки по умолчанию выстраиваются по горизонтали. |
| desktop | ≥1024px | Начинают действовать модификаторы для настольных экранов. |
| widescreen | ≥1216px | Более широкий диапазон контейнера и макета. |
| fullhd | ≥1408px | Самый широкий диапазон по умолчанию. |
## Полное руководство по дизайн-системе 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

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

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

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

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

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

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

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

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

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

### Полная разметка редакционного интерфейса

Анатомия field/control/label/help в Bulma, колонки 7/5, Card, Message и теги состояния.

```
<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>
```

Справочник по коду

- Библиотека CSS не проверяет и не отправляет форму.

- aria-describedby связывает поля ввода с текстом подсказки.

- В предварительном просмотре введённый пользователем текст отображается с помощью textContent.

### Проверка и поведение локального предварительного просмотра

Исходные обработчики событий реализуют поведение Bulma, которое намеренно оставляет приложению.

```
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';});
```

Справочник по коду

- При недопустимой отправке фокус переходит на первое незаполненное поле.

- Изменение готового брифа возвращает его в состояние «Черновик».

- Атрибут data-theme управляет внешним видом.

## Настройка агента дизайн-системы Bulma

### Отправная точка для реализации

Сохраните всю разметку и примеры JavaScript, как указано. Bulma предоставляет CSS; приложенный скрипт приложения реализует всю проверку и локальное состояние. В автономном предварительном просмотре оба файла встроены. Обёртка HTML включает всю разметку body; сохраните приложенные примеры взаимодействия и CSS под именами файлов, указанными здесь.

```
<!-- Install and copy the local asset:
npm install bulma@1.0.4
mkdir -p assets
cp node_modules/bulma/css/bulma.min.css assets/bulma.min.css
-->
<!doctype html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Editorial desk</title>
<link rel="stylesheet" href="assets/bulma.min.css">
<style>.section{padding:2rem 1.5rem}.container{max-width:1080px!important}.card-header{align-items:center;flex-wrap:wrap}.title{overflow-wrap:anywhere}.level-left{min-width:0}@media(max-width:768px){.title.is-2{font-size:2rem}.level-right{margin-top:1rem}}</style>
<script src="app.js" defer></script>
</head>
<body><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>
</body>
</html>
```

### Запрос для вашего проекта

```
Начните с полного редакционного интерфейса на Bulma 1.0.4. Сохраните анатомию field/control/help, адаптивные колонки, компоненты карточки и сообщения, а также тему светлого/тёмного режима на уровне документа. Изменение заголовка и краткого описания должно обновлять предварительный просмотр статьи через textContent и возвращать его состояние к «Черновик». Перед установкой статуса «Готово к проверке» требуйте соблюдения ограничений на длину текста после удаления пробелов по краям и подтверждения проверки текста; связывайте недопустимые поля с подсказками и переводите фокус на первую ошибку. Восстанавливайте исходный черновик и сбрасывайте состояние проверки, не создавая впечатления, будто статья опубликована.
```

## Источники и область действия дизайн-системы Bulma

Справочник CSS для Bulma 1.0.4. Локальные редакционные правила и JavaScript — это оригинальный код примера; черновики не сохраняются и не публикуются.

- Обзор Настройка только для CSS и требования к документу.

- Переменные CSS Глобальный уровень и уровень компонентов.

- Элементы формы Сочетание поля и элемента управления.

- Адаптивность Официальные границы экранов.

- Вспомогательные классы интервалов Значения суффиксов утилитарных классов.

- Тёмная тема Выбор темы.

- Сообщение Структура контейнера сообщения.

## Связанные ресурсы дизайн-системы Bulma

### Chakra UI

Справочник по Chakra UI v3: токены, семантические роли цветов, рецепты и составные компоненты форм. Изучите реальные шкалы отступов и типографики, а затем попробуйте встроенную форму профиля рабочего пространства с валидацией, имитацией ошибки сохранения и светлым и тёмным оформлением.

### CoreUI

Очередь проверки CoreUI с реальными переменными темы 5.9, встроенными вкладками и групповым выбором флажками, а также закреплённым уведомлением, позволяющим отменить последнее локальное архивирование.

### daisyUI

Студия приглашений на основе CSS, демонстрирующая семантические темы daisyUI 5, парные цвета содержимого, объединённые переключатели, ползунки, встроенную проверку браузера и полноценный этап проверки в диалоговом окне.


- [Справочник по реализации](https://bulma.io/documentation/form/general/)
- [Источник](https://bulma.io/documentation/features/css-variables/)
- [Источник](https://bulma.io/documentation/features/color-palettes/)
- [Источник](https://bulma.io/documentation/helpers/spacing-helpers/)
- [Источник](https://bulma.io/documentation/start/responsiveness/)
- [Прочитать вспомогательную спецификацию](https://bulma.io/documentation/start/overview/)
- [Прочитать вспомогательную спецификацию](https://bulma.io/documentation/features/dark-mode/)
- [Прочитать вспомогательную спецификацию](https://bulma.io/documentation/helpers/typography-helpers/)
- [Прочитать вспомогательную спецификацию](https://bulma.io/documentation/start/responsiveness/)
- [Прочитать вспомогательную спецификацию](https://bulma.io/documentation/form/general/)
- [Прочитать вспомогательную спецификацию](https://bulma.io/documentation/components/message/)
- [Прочитать вспомогательную спецификацию](https://bulma.io/documentation/features/css-variables/)
- [Справочник по коду](https://bulma.io/documentation/form/general/)
- [Справочник по коду](https://bulma.io/documentation/start/overview/)
- [Обзор Настройка только для CSS и требования к документу.](https://bulma.io/documentation/start/overview/)
- [Переменные CSS Глобальный уровень и уровень компонентов.](https://bulma.io/documentation/features/css-variables/)
- [Элементы формы Сочетание поля и элемента управления.](https://bulma.io/documentation/form/general/)
- [Адаптивность Официальные границы экранов.](https://bulma.io/documentation/start/responsiveness/)
- [Вспомогательные классы интервалов Значения суффиксов утилитарных классов.](https://bulma.io/documentation/helpers/spacing-helpers/)
- [Тёмная тема Выбор темы.](https://bulma.io/documentation/features/dark-mode/)
- [Сообщение Структура контейнера сообщения.](https://bulma.io/documentation/components/message/)