Что такое Bulma
Bulma — CSS-фреймворк: готовый файл стилей с классами для сетки, кнопок, форм, меню и карточек. Вы пишете обычный HTML и добавляете классы вроде button is-primary, а оформление берёте из Bulma. Курс построен на Bulma 1.0 — версии, в которой все настройки вынесены в CSS-переменные.
Чем Bulma отличается
| Свойство | Что это значит |
|---|---|
| Только CSS | В Bulma нет ни строчки JavaScript. Подключается один файл стилей |
| Флексбокс | Колонки и раскладка построены на флексбоксе, который вы знаете по учебнику |
| Понятные классы | button, card, is-large, has-text-centered читаются как английские слова |
| Модульность | Через Sass можно собрать только нужные части |
Bulma и Bootstrap
Оба фреймворка дают сетку и набор компонентов, но подход разный:
| Bulma | Bootstrap | |
|---|---|---|
| JavaScript | Нет | Есть: окна, меню, вкладки работают сами |
| Модификаторы | is-primary, is-large | btn-primary, btn-lg |
| Сетка | Колонки делят строку поровну, ширины словами: is-half | 12 частей: col-6 |
Отсутствие JavaScript — и плюс, и минус. Bulma не навязывает свои скрипты и легко сочетается с React, Vue или чистым JS. Но всё, что открывается и закрывается — мобильное меню, модальное окно, — вам придётся оживить самим. Обычно это пять–десять строк кода, и в курсе они будут показаны.
Через весь курс мы будем собирать сайт ресторана Trattoria Oliva: меню, карточки блюд, форму бронирования — и небольшую админ-панель для заказов.
Подключение через CDN
CDN — сеть серверов, которая раздаёт популярные файлы. Чтобы подключить Bulma, достаточно одной строки в <head>. Создайте папку проекта и в ней файл index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trattoria Oliva</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
</head>
<body>
<section class="section">
<h1 class="title">Trattoria Oliva</h1>
<p class="subtitle">Домашняя итальянская кухня в центре города.</p>
<button class="button is-primary">Забронировать стол</button>
</section>
</body>
</html>Откройте файл в браузере: заголовок, подзаголовок и бирюзовая кнопка уже оформлены, хотя своего CSS нет. Класс section добавил отступы вокруг содержимого, title и subtitle задали размеры текста.
Как устроены примеры курса
Дальше примеры — это фрагменты содержимого <body>. Каждый начинается со строки <link>, чтобы превью под кодом подключило Bulma само:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<button class="button is-success">Сохранить</button>
<button class="button is-light">Отмена</button>В превью — зелёная кнопка «Сохранить» и светло-серая «Отмена».
Окно превью уже 769 пикселей, поэтому Bulma показывает в нём раскладку для телефона: колонки встают друг под другом, а меню прячется за кнопкой. Чтобы увидеть версию для широкого экрана, скопируйте пример в свой index.html и откройте его в браузере на весь экран.
Частая ошибка
Ждать, что после подключения Bulma заработают выпадающие меню и модальные окна, как в Bootstrap. Bulma даёт только внешний вид: класс is-active показывает меню, но ставить и снимать его по клику должен ваш JavaScript. Если элемент «не открывается», проверьте, есть ли на странице обработчик клика.