Оглавление
Bulma
Простой CSS-фреймворк без JavaScript: колонки на flexbox, понятные классы, компоненты и настройка через Sass.
1.Начало работы
- Что такое BulmaCSS-фреймворк Bulma: только стили без JavaScript, колонки на флексбоксе, понятные имена классов, отличия от Bootstrap и подключение через CDN.
- Установка через npm и ViteКак добавить Bulma в проект Vite: установка пакета, импорт стилей в main.js, запуск и сборка.
- Модификаторы is- и has-Как устроены имена классов Bulma: основной класс элемента, модификаторы is- и has-, суффиксы контрольных точек вроде -mobile и -desktop.
2.Раскладка страницы
- Колонки: основыСетка колонок Bulma: блок columns с колонками column, деление ряда поровну, перенос колонок на телефонах и модификатор is-mobile.
- Колонки: размеры, адаптивность, отступыШирина колонок словами и числами, is-narrow и смещения, разные размеры на разных экранах, перенос строк, промежутки между колонками и вложенные колонки.
- Сетка gridНовая сетка Bulma 1.0 на CSS Grid: блок grid с ячейками cell, минимальная ширина ячейки, фиксированное число колонок, объединение ячеек и промежутки.
- Контейнер, секция и подвалКаркас страницы в Bulma: container ограничивает ширину, section задаёт отступы блока, footer оформляет подвал, block разделяет элементы.
- Hero и levelHero — большой баннер в начале страницы, его цвета и высота, части hero-head и hero-foot; level — горизонтальная полоса из элементов слева и справа.
3.Хелперы
- Заголовки и текстЭлементы title и subtitle, класс content для обычного текста и хелперы типографики: размер, насыщенность, выравнивание и регистр.
- Цвета и цветовые хелперыПалитра Bulma: основные цвета primary, link, info, success, warning, danger, хелперы has-text и has-background, оттенки light, dark и числовые от 00 до 100.
- Отступы, флексбокс и видимостьХелперы внешних и внутренних отступов m- и p- со сторонами и шкалой от 0 до 6, хелперы флексбокса и классы для скрытия элементов на разных экранах.
4.Элементы и компоненты
- КнопкиЭлемент button: цвета, светлые и контурные варианты, размеры, состояния загрузки и неактивности, группы кнопок buttons и кнопки-переключатели has-addons.
- Box, карточка и mediaПростой блок box, карточка card с картинкой, шапкой, содержимым и подвалом, элемент image с пропорциями и объект media для отзывов и комментариев.
- Навигационная панель navbarШапка сайта на navbar: логотип, ссылки слева и справа, выпадающий пункт, кнопка-бургер для телефонов и несколько строк JavaScript, которые её оживляют.
- Меню, хлебные крошки, вкладки, пагинацияБоковое меню menu для админ-панели, хлебные крошки breadcrumb, вкладки tabs и постраничная навигация pagination; активный пункт и переключение вкладок.
- ФормыПоля формы в Bulma: обёртки field и control, input, textarea, select, флажки и переключатели, подсказки help, иконки в поле, поля с кнопкой has-addons и группы is-grouped.
- Уведомления, сообщения, метки, прогрессЭлементы для обратной связи: notification с кнопкой закрытия, message с заголовком, метки tag и группы tags, полоса прогресса progress.
- Модальное окно и выпадающее менюЭлементы modal и dropdown в Bulma: разметка, класс is-active, короткий JavaScript для открытия и закрытия, выпадающее меню по наведению без скриптов.
- ТаблицыЭлемент table: оформление обычной HTML-таблицы, модификаторы is-striped, is-hoverable, is-bordered, is-narrow и is-fullwidth, выделенная строка и прокрутка на узком экране.
5.Темы и настройка
- Тёмная темаТёмная тема в Bulma 1.0: автоматическое переключение по настройке системы, принудительная тема через data-theme и theme-dark, кнопка переключения на JavaScript и сборка без тёмной темы.
- Настройка через CSS-переменныеКак перекрасить Bulma 1.0 без сборки: глобальные переменные --bulma-primary-h, -s, -l, шрифт и скругление, переменные отдельных компонентов и их область действия.
- Настройка через SassСборка Bulma из исходников Sass в проекте Vite: переменные в @use with, свои цвета через $custom-colors и подключение только нужных частей фреймворка.