Отступы, флексбокс и видимость
Чаще всего вместо своего CSS приходится писать отступы: «чуть больше места над кнопкой», «убрать отступ у последнего абзаца». Для этого в Bulma есть хелперы отступов — короткие классы вида mt-4 или px-2. Рядом с ними живут хелперы флексбокса и видимости.
Как читать класс отступа
Класс собирается из трёх частей: свойство, сторона, размер.
| Часть | Значения |
|---|---|
| Свойство | m — margin (внешний), p — padding (внутренний) |
| Сторона | t верх, r право, b низ, l лево, x лево и право, y верх и низ; без буквы — все стороны |
| Размер | 0 — 0, 1 — 0,25 rem, 2 — 0,5 rem, 3 — 0,75 rem, 4 — 1 rem, 5 — 1,5 rem, 6 — 3 rem |
Значит, mt-4 — внешний отступ сверху 1 rem, px-2 — внутренние отступы слева и справа по 0,5 rem, m-0 — никаких внешних отступов.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<div class="has-background-light p-5">
<p class="title is-5 mb-2">Бизнес-ланч</p>
<p class="mb-4">Суп, горячее и напиток — €14.</p>
<button class="button is-primary">Заказать</button>
</div>Серый блок с просторными внутренними отступами, заголовок почти вплотную к описанию, перед кнопкой — заметный промежуток. Хелперы написаны с !important, поэтому перекрывают отступы, встроенные в элементы.
Для центрирования блока по горизонтали есть mx-auto: он задаёт автоматические отступы слева и справа.
Флексбокс
Чтобы не писать CSS ради одной строки флексбокса, у Bulma есть хелперы с именами, повторяющими свойства:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<div class="is-flex is-justify-content-space-between is-align-items-center has-background-light p-3">
<span>Маргарита</span>
<span class="has-text-weight-bold">€9</span>
</div>Название слева, цена справа, обе по центру по вертикали. Классы читаются как CSS: is-flex — display: flex, is-justify-content-space-between — justify-content: space-between. Есть и другие: is-flex-direction-column, is-flex-wrap-wrap, is-flex-grow-1.
Видимость
| Класс | Что делает |
|---|---|
is-hidden | Скрывает всегда |
is-hidden-mobile | Скрывает до 768 px |
is-hidden-touch | Скрывает до 1023 px |
is-hidden-desktop | Скрывает от 1024 px |
is-sr-only | Скрывает с экрана, но оставляет для программ чтения с экрана |
is-invisible | Делает невидимым, но место остаётся |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<p class="is-hidden-mobile">Позвоните нам: +1 555 0100</p>
<a class="button is-primary is-hidden-tablet" href="tel:+15550100">Позвонить</a>На компьютере видна строка с номером, на телефоне вместо неё — кнопка «Позвонить». Узкое превью показывает телефонный вариант — кнопку; откройте пример в широком окне, чтобы увидеть строку.
Частая ошибка
Ждать, что mt-7 или p-10 сработают. Шкала Bulma заканчивается на 6 (3 rem), и несуществующий класс молча ничего не делает. Для отступов больше 3 rem напишите своё правило в CSS или увеличьте шкалу через Sass.