Bulma Bulma — это современный CSS-фреймворк с открытым исходным кодом, полностью построенный на Flexbox.
Адаптивные брейкпоинты
768px 1024px 1216px 1408px
<---------^------------^------------------^-------------^------------->
Mobile Tablet Desktop Widescreen FullHD
- Мобильные: до 768px
- Планшеты: от 769px
- Десктоп: от 1024px
- Широкий экран: от 1216px
- FullHD: от 1408px
Сетка колонок (Columns Grid)
Оберните дочерние элементы .column во flex-контейнер .columns:
<div class="columns">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
Модификаторы ширины колонок
<div class="column is-half">Половина ширины</div>
<div class="column is-one-third">1/3 ширины</div>
<div class="column is-three-quarters">3/4 ширины</div>
<div class="column is-4">4 / 12 (1/3)</div>
Основные модификаторы
Цветовые темы
.is-primary: Бирюзовый.is-link: Синий.is-info: Голубой.is-success: Зеленый.is-warning: Желтый.is-danger: Красный
Размеры
.is-small.is-normal.is-medium.is-large
Состояния
.is-outlined: Прозрачный фон с цветной рамкой.is-loading: Встроенный анимированный спиннер загрузки.is-disabled: Визуально отключен
Типографика
Размеры шрифта
| Класс | Вычисленный размер |
|---|---|
.is-size-1 |
3rem |
.is-size-2 |
2.5rem |
.is-size-3 |
2rem |
.is-size-4 |
1.5rem |
.is-size-5 |
1.25rem |
.is-size-6 |
1rem |
.is-size-7 |
0.75rem |
Выравнивание и трансформация текста
.has-text-centered: По центру.has-text-left: По левому краю.has-text-right: По правому краю.has-text-justified: По ширине.is-capitalized: С заглавной буквы каждое слово.is-lowercase: Все строчные.is-uppercase: Все прописные
Контейнер контента WYSIWYG
Используйте класс .content для оформления markdown-разметки или текстов из CMS:
<div class="content">
<h1>Главный заголовок</h1>
<p>Стандартный абзац с автоматическим типографическим масштабированием.</p>
<ul>
<li>Элемент маркированного списка 1</li>
<li>Элемент маркированного списка 2</li>
</ul>
</div>