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

Для страницы услуг, каталога или небольшого личного кабинета часто нужны одни и те же вещи: ровные колонки, читаемые карточки, удобные поля и понятная навигация. Bulma оформляет эти элементы готовыми CSS-классами. Можно начать с обычного HTML, подключить файл стилей и постепенно собрать свой интерфейс.

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

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

Что делает Bulma и где понадобится JavaScript

Bulma — библиотека CSS: класс button оформляет кнопку, card — карточку, columns — систему колонок. Для использования готового оформления достаточно подключить CSS. Для собственной сборки доступны исходники Sass; оба способа описаны в официальном обзоре.

Сам пакет не содержит JavaScript. Это удобно, когда поведение уже реализовано вашим приложением, но открытие меню, отправку заявки или переключение данных всё равно нужно организовать. Некоторые действия обеспечивает HTML и браузер; для других понадобится небольшой обработчик. Нельзя ожидать, что один CSS-файл автоматически превратит все элементы в работающее приложение.

Bulma можно применять в обычной HTML-странице, PHP-шаблоне или внутри компонентов другого фреймворка. Исходный код распространяется под MIT — лицензия находится в официальном репозитории. Начинайте с нужного посетителю действия, а затем выбирайте оформление: например, прочитать состав услуги и перейти к контактам.

Если на сайте уже подключён другой CSS-фреймворк, сначала проверьте совместимость: одинаковые имена классов могут получить разные правила. Для самостоятельной страницы проще выбрать одну основу. Для встраивания чужого оформления в существующий сайт можно использовать отдельный документ в iframe, чтобы его стили не меняли остальную страницу.

Подключение: один локальный файл CSS

Скачайте CSS из официального релиза и положите bulma.min.css рядом со страницей в папку assets. Такой файл уже готов к использованию: компиляция Sass не требуется. Варианты получения библиотеки приведены в инструкции по установке.

<!doctype html>
<html lang="ru" data-theme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Мастерская интерфейсов</title>
  <meta name="description" content="Услуги, примеры работ и контакты мастерской.">
  <link rel="stylesheet" href="assets/bulma.min.css">
  <link rel="stylesheet" href="assets/site.css">
  <script src="assets/site.js" defer></script>
</head>
<body>
  <!-- Вставьте сюда нужные примеры ниже. -->
</body>
</html>

Создайте site.css для собственных дополнений и site.js для обработчиков. Для первых статичных примеров эти файлы могут быть пустыми. Не пропускайте viewport: без него телефон может показывать уменьшенную широкую страницу вместо ожидаемой мобильной компоновки.

Пример 1. Кнопки с разным приоритетом

Выделим основное действие заливкой, а дополнительное — контуром. Группа buttons допускает перенос элементов. Для русских подписей добавим в site.css перенос внутри самой кнопки:

<div class="buttons">
  <a class="button is-link" href="#contacts">Обсудить проект</a>
  <button class="button is-link is-outlined" type="button" disabled>
    Скачать расчёт
  </button>
</div>
<p class="help">Расчёт станет доступен после заполнения данных.</p>

.button {
  min-height: 2.75rem;
  height: auto;
  white-space: normal;
  overflow-wrap: anywhere;
}

Цвет, контур, размер и состояние задаются модификаторами is-link, is-outlined, is-small и другими; список есть в справочнике Button. Атрибут disabled действительно блокирует кнопку. Одного приглушённого цвета недостаточно. Для перехода используйте ссылку с настоящим адресом.

Пример 2. Колонки, которые меняются на телефоне

Для описания услуги и краткого состава работ удобны две колонки. По умолчанию Bulma располагает их друг под другом на мобильной ширине; горизонтальная компоновка появляется начиная с планшетной:

<div class="columns">
  <section class="column is-two-thirds">
    <h2 class="title is-4">Понятная документация</h2>
    <p>Соберём инструкции для запуска и поддержки проекта.</p>
  </section>
  <aside class="column" aria-label="Состав результата">
    <div class="box">Структура, примеры, ответы на частые вопросы.</div>
  </aside>
</div>

Если две короткие величины должны оставаться рядом даже на телефоне, добавьте is-mobile к контейнеру:

<div class="columns is-mobile">
  <div class="column"><strong>3</strong><br>этапа</div>
  <div class="column"><strong>1</strong><br>команда</div>
</div>

Эти режимы и размеры для разных ширин описаны в документации Columns. Не сохраняйте три узкие текстовые колонки только ради симметрии: проверьте, читается ли содержание при 320 пикселях. В мастерской оба режима можно сравнить на одном примере.

Пример 3. Карточка с полезным содержанием

Карточке не обязательно нужна фотография. Если изображения пока нет, лучше показать аккуратный текст и действие, чем сломанную ссылку на файл:

<article class="card">
  <div class="card-content">
    <p class="mb-3"><span class="tag is-info is-light">Для команды</span></p>
    <h2 class="title is-4">База знаний проекта</h2>
    <p>Инструкции, которые помогают быстрее разобраться в работе системы.</p>
    <a class="button is-link mt-4" href="#contacts">Обсудить состав</a>
  </div>
</article>

У карточки есть отдельные области для изображения, содержания и нижних действий; структура приведена в справочнике Card. Оставьте ширину зависимой от родителя и проверьте длинное название. Если добавляете избранное, используйте кнопку с aria-pressed и собственный обработчик изменения состояния.

Пример 4. Форма с постоянной подписью

Объединим поле, подпись и подсказку. Placeholder не заменяет название поля: он исчезает при вводе. Пример проверяет формат email, но не изображает успешную отправку заявки:

<form id="demo-request">
  <div class="field">
    <label class="label" for="demo-email">Электронная почта</label>
    <div class="control">
      <input class="input" id="demo-email" type="email" name="email"
        autocomplete="email" required aria-describedby="demo-hint">
    </div>
    <p class="help" id="demo-hint">Учебная проверка без отправки.</p>
  </div>
  <button class="button is-link" type="submit">Проверить поле</button>
  <p class="help" id="demo-result" role="status"></p>
</form>

document.querySelector('#demo-request').addEventListener('submit', (event) => {
  event.preventDefault();
  document.querySelector('#demo-result').textContent =
    'Формат проверен. Данные остались в браузере.';
});

Классы field, control, label и help описаны в руководстве по формам. Проверку обязательного поля и email выполняет браузер. В настоящей форме понадобится серверная проверка и понятный результат: отправлено, ошибка или можно повторить.

Пример 5. Навигация с работающей мобильной кнопкой

На широком экране пункты видны сразу. На узком navbar-menu скрыт, поэтому добавим кнопку и обработчик. Имена разделов и ссылки здесь реальные:

<nav class="navbar" aria-label="Основная навигация">
  <div class="navbar-brand">
    <a class="navbar-item" href="#home">Мастерская</a>
    <button type="button" class="navbar-burger" id="nav-toggle"
      aria-label="Разделы страницы" aria-controls="site-menu" aria-expanded="false">
      <span aria-hidden="true"></span><span aria-hidden="true"></span>
      <span aria-hidden="true"></span><span aria-hidden="true"></span>
    </button>
  </div>
  <div id="site-menu" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="#services">Услуги</a>
      <a class="navbar-item" href="#contacts">Контакты</a>
    </div>
  </div>
</nav>

const toggle = document.querySelector('#nav-toggle');
const menu = document.querySelector('#site-menu');
function setMenu(open) {
  toggle.classList.toggle('is-active', open);
  menu.classList.toggle('is-active', open);
  toggle.setAttribute('aria-expanded', String(open));
}
toggle.addEventListener('click', () => {
  setMenu(toggle.getAttribute('aria-expanded') !== 'true');
});
menu.querySelectorAll('a').forEach((link) => {
  link.addEventListener('click', () => setMenu(false));
});
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape' && toggle.getAttribute('aria-expanded') === 'true') {
    setMenu(false);
    toggle.focus();
  }
});

Переключение класса is-active требуется для мобильного меню, поскольку библиотека не включает его логику. Это отдельно объясняется в документации Navbar. После выбора ссылки меню закрывается; Escape возвращает фокус к кнопке. Если JavaScript использовать нельзя, оставьте простой постоянно доступный список ссылок.

Пример 6. Нативный диалог с оформлением Bulma

Для короткого пояснения возьмём HTML-элемент dialog и оформим его содержимое как modal-card. Это собственная композиция: стандартный CSS-компонент Modal в Bulma имеет другую внешнюю обёртку.

<button type="button" id="show-brief" class="button is-link">Что подготовить?</button>
<dialog id="brief-dialog" class="demo-dialog" aria-labelledby="brief-title">
  <div class="modal-card">
    <header class="modal-card-head">
      <h2 id="brief-title" class="modal-card-title">Перед обсуждением</h2>
    </header>
    <div class="modal-card-body">
      <p>Подготовьте описание задачи, примеры и желаемый срок.</p>
    </div>
    <footer class="modal-card-foot">
      <form method="dialog"><button class="button" autofocus>Закрыть</button></form>
    </footer>
  </div>
</dialog>

.demo-dialog {
  border: 0;
  padding: 0;
  width: min(28rem, calc(100% - 2rem));
  max-width: none;
  background: transparent;
  color: inherit;
}
.demo-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.demo-dialog .modal-card {
  margin: 0;
  width: 100%;
  max-height: calc(100dvh - 3rem);
}
.demo-dialog .modal-card-title { overflow-wrap: anywhere; }

const brief = document.querySelector('#brief-dialog');
document.querySelector('#show-brief').addEventListener('click', () => {
  brief.showModal();
});

Области modal-card-head, modal-card-body и modal-card-foot взяты из справочника Modal. Метод showModal(), закрытие формой method="dialog" и стандартное поведение Escape обеспечивает браузер; подробности — в руководстве MDN по dialog. Проверьте клавиатуру и возврат фокуса после закрытия.

Пример 7. Собрать компоненты в небольшую страницу

Навигация из примера выше ссылается на три раздела. Добавим их и расположим карточку рядом с введением. Мобильная компоновка получится из обычных колонок:

<main>
  <section class="section" id="home">
    <div class="container">
      <h1 class="title">Рабочие инструменты для вашей команды</h1>
      <p>Помогаем привести инструкции и процессы в понятный вид.</p>
    </div>
  </section>
  <section class="section" id="services" aria-labelledby="services-title">
    <div class="container">
      <h2 id="services-title" class="title is-3">Что можно подготовить</h2>
      <div class="columns">
        <div class="column"><p>Разберём задачу и предложим состав результата.</p></div>
        <div class="column"><!-- Карточка из примера 3. --></div>
      </div>
    </div>
  </section>
  <section class="section" id="contacts" aria-labelledby="contacts-title">
    <div class="container">
      <h2 id="contacts-title" class="title is-3">Связаться с мастерской</h2>
      <!-- Учебная форма из примера 4. -->
    </div>
  </section>
</main>

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

Темы и настройка: CSS-переменные или Sass

В полной сборке Bulma 1 есть светлая и тёмная схемы. Атрибут data-theme="light" или data-theme="dark" на html явно выбирает оформление; без принудительного выбора учитывается системное предпочтение. Механизм описан в руководстве Dark Mode. Для собственного переключателя обработчик может менять document.documentElement.dataset.theme.

Небольшие изменения удобно внести обычным CSS после библиотеки. Например, можно изменить оттенок ссылок и основных действий класса is-link:

:root {
  --bulma-link-h: 188deg;
}

Этот способ поддерживается в инструкции по CSS-переменным. Проверяйте получившийся контраст, наведение и фокус в обеих темах: замена цвета сама по себе не гарантирует читаемость.

Когда нужна собственная сборка, установите sass и создайте theme.scss. В Bulma 1 настройка выполняется через @use … with, например:

@use "bulma/sass" with (
  $primary: #17847c,
  $link: #2369a8,
  $family-primary: 'system-ui, sans-serif'
);

npm install bulma@1.0.4
npm install -D sass
npx sass --load-path=node_modules theme.scss assets/theme.css

Подключите theme.css вместо готового bulma.min.css. Полная настройка показана в руководстве Sass. Для страницы только с кнопками можно собрать меньше модулей:

@use "bulma/sass/utilities" with ($link: #2369a8);
@forward "bulma/sass/base";
@forward "bulma/sass/elements/button";
@forward "bulma/sass/themes";

Тема нужна, чтобы CSS-переменные компонентов получили значения; порядок модульной сборки объясняется в руководстве Modular Sass. Это отдельный вариант для своего проекта. Скачанная мастерская использует готовый полный CSS и не требует Sass.

Как забрать пример и подготовить к публикации

В архиве мастерской находятся исходники HTML и JavaScript, настройки и README. Для проверенной сборки используйте Node.js 24: npm ci устанавливает закреплённые зависимости, npm run dev запускает разработку, npm run build создаёт результат в dist. На сайт переносите всю папку результата вместе с файлами стилей и сценариев.

Скопированный HTML-фрагмент требует подключённого Bulma CSS; интерактивные примеры также требуют соответствующего JavaScript. Перед публикацией замените учебные тексты, задайте свои title и description, проверьте ссылки, форму, узкий экран и управление клавиатурой.

Другой подход к готовым CSS-компонентам можно попробовать в мастерской DaisyUI и Tailwind. Для сборки страницы из блоков доступен конструктор Bootstrap 5, а для сайта инструкций из Markdown — примеры Docus.