Настройка через CSS-переменные

В Bulma 1.0 почти каждое значение — цвет, шрифт, скругление, отступ карточки — хранится в CSS-переменной с префиксом --bulma-. Значит, фирменный стиль можно задать обычным CSS, без Sass и без сборщика: достаточно переопределить нужные переменные в своём файле стилей, подключённом после Bulma.

Свой основной цвет

Цвета в Bulma заданы тремя переменными по модели HSL: оттенок (-h, в градусах), насыщенность (-s) и светлота (-l). Из них Bulma сама вычисляет светлые, тёмные и числовые оттенки. Сделаем основной цвет ресторана оливковым:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<style>
  :root {
    --bulma-primary-h: 70deg;
    --bulma-primary-s: 45%;
    --bulma-primary-l: 42%;
  }
</style>
 
<button class="button is-primary">Забронировать</button>
<span class="tag is-primary is-light">Сезонное</span>
<p class="has-text-primary mt-3">Оливковый текст</p>

Кнопка, метка и текст стали оливковыми — хотя классы те же, что и раньше. В проекте правило :root пишут в своём файле, например src/style.css, который подключён после Bulma.

Цвета info, success, warning и danger меняются так же.

Шрифт и скругление

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<style>
  :root {
    --bulma-family-primary: Georgia, serif;
    --bulma-radius: 0;
  }
</style>
 
<p class="title is-4">Trattoria Oliva</p>
<input class="input mb-3" placeholder="Ваше имя">
<button class="button is-link">Отправить</button>

Заголовок и поле набраны шрифтом Georgia, у поля и кнопки прямые углы.

Переменные компонента

У каждого компонента есть свои переменные — их список приведён на странице компонента в документации Bulma. Например, у карточки это --bulma-card-radius, --bulma-card-shadow, --bulma-card-content-padding. Bulma объявляет их на самом элементе (.card), поэтому и переопределять их нужно на классе, а не на :root:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<style>
  .card.dish-card {
    --bulma-card-radius: 0;
    --bulma-card-shadow: none;
    --bulma-card-background-color: var(--bulma-primary-95);
  }
</style>
 
<div class="card dish-card" style="max-width: 280px">
  <div class="card-content">
    <p class="title is-5">Тирамису</p>
    <p>€7</p>
  </div>
</div>

Карточка без тени, с прямыми углами и светло-бирюзовым фоном. Остальные карточки на странице не изменились: правило действует только на dish-card.

Когда переменных мало

Светлые и тёмные оттенки (-light, -dark) и цвет текста на цветных кнопках Bulma вычисляет при сборке и записывает в переменные готовыми процентами светлоты. Поэтому меняйте в первую очередь оттенок и насыщенность, а светлоту держите в районе 40–50%. Для полностью своей палитры удобнее Sass — о нём следующий урок.

Частая ошибка

Писать --bulma-primary: #6b8e23;. Переменная --bulma-primary вычисляется из -h, -s и -l, и её замена не затронет кнопки и оттенки, которые читают эти три переменные напрямую. Переводите цвет в HSL (это умеет инструмент выбора цвета в DevTools браузера) и задавайте три значения.