Bulma - это простой, элегантный и современный CSS фреймворк, который большинство разработчиков предпочитают Bootstrap. Лично я думаю, что Bulma имеет более привлекательный дизайн из коробки, а также ощущается куда легковеснее большинства фреймворков.
В этом туториале, я дам сильно ускоренное введение в эту библиотеку.
Установка
Установить Bulma - просто, для этого установите его через NPM менеджер, скачать через кнопку Download в документации, или используя CDN. Мы просто подключим ссылку через CDN в нашем HTML файле:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css"
Это дает нам доступ к классам Bulma, и это то что есть Bulma - коллекция классов.
Модификаторы
Первое, что вы должны выучить о Bulma - это модификаторы классов. Они позволяют установить различные стили почти ко всем элементам Bulma. Они все начинаются с is-* или has-*, и потом вы заменяете (*) звёздочку стилем, который предпочитаете.
Чтобы лучше понять этот концепт, давайте рассмотрим пример:
Пример с кнопками
Для того, чтобы превратить обычную кнопку в кнопку Bulma, мы просто задаём класс кнопке.
<button class="button">Click here</button>
И как результат:
Как вы могли заметить, кнопка выдержана в стиле flat design по умолчанию. Для того, чтобы стилизировать её, мы используем модификаторы Bulma. Давайте сделаем кнопку больше, зеленее и закруглим углы:
<button class="button is-large is-success is-rounded">Click here</button>
Результат:
Вы также можете использовать модификаторы, чтобы контролировать состояния кнопки. Для примера, давайте добавим класс is-focused, который добавит border (границу) к кнопке:
Ну и наконец, давайте попробуем один из has-* модификаторов, который контролирует внутренности элемента. В нашем случае, это текст.
Добавляем класс has-text-weight-bold и смотрим результат:
Я рекомендую вам поиграть с комбинациями различных классов, чтобы понять насколько адаптивна система. Комбинации могут быть абсолютно любые. Чтобы узнать больше, смотрите раздел кнопок в документации.
Колонки (Columns)
Основная возможность любого CSS-фреймворка построение колонок, поскольку в большинстве задач это требовательно. Bulma построена на флекс-боксах, так что здесь не должно возникать проблем. Давайте создадим строку с четырьмя колонками:
<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>
Сначала, мы создаём контейнер <div> с классом колонок (columns) , и после даём каждой дочерний класс колонки (column). Результат:
Заметьте, что вы можете добавить колонок столько, сколько пожелаете. Флекс-бокс разметка позаботится о том, чтобы место было разбито справедливо.
Для того, чтобы задать цвет колонкам, мы можем заменить текст внутри колонок тегом <p>, и дать тегу класс notification и особый класс is-*. Как пример:
<p class="notification is-success">First column</p>
Let’s do this using the is-info, is-success, is-warning and is-dangermodifiers, which results in the following:
Класс notification обычно обозначает уведомления для пользователя, который позволяет заполнить фон используя is-* модификатор.
Мы также просто можем контролировать размер колонки. Давайте добавим is-halfmodifier для зелёной колонки.
<div class="column is-half">
<p class="notification is-success">Second column</p>
</div>
Как итог, вторая колонка занимает половину экрана, а три остальные занимают по 1/3 от оставшегося места.
Классы, которые вы можете использовать для задания размера колонок:
- is-three-quarters
- is-two-thirds
- is-half
- is-one-third
- is-one-quarter
- is-four-fifths
- is-three-fifths
- is-two-fifths
- is-one-fifth
Hero (блоки с шириной в весь экран)
Наконец, давайте создадим Hero с помощью Bulma. Будем использовать семантически верный <section> и дадим ему класс hero и is-info (для цвета). Нам так же нужен дочерний <div> с классом hero-body
<section class="hero is-success">
<div class="hero-body"></div>
</section>
Добавим контейнер внутрь hero-body и зададим внутри заголовок (title) и подзаголовок секции (subtitle)
<div class="container">
<h1 class="title">
Primary title
</h1>
<h2 class="subtitle">
Primary subtitle
</h2>
</div>
Теперь смотрится хорошо. Если мы хотим сделать блок больше, мы просто можем добавить модификатор is-medium в тег <section>
<section class="hero is-info is-medium">
...
</section>
Вот и всё!
Теперь, вы получили базовые навыки работы с Bulma. Bulma - интуитивно понятный и простой. Так что, если вы поняли данную статью - то поймете и всё остальное без особых проблем.
Также, делюсь с вами курсом по Bulma. если хотите узнать больше!
Спасибо, что читали. Это перевод статьи Per Borgen, со-основателя Scrimba.