В этой краткой статье мы будем строить респонсивную раскладку блога с помощью популярного основанного на flexbox фреймворка Bulma от Джереми Томаса.
Как обычно, у нас есть демо финального результата в Codepen (посмотрите полную версию):
Знакомимся с Bulma
Для работы Bulma требуется всего один CSS файл. Вы можете скопировать его со страницы GitHub, можете установить его через менеджер пакетов (например, npm), или загрузить из CDN (например, cdnjs).
Мы воспользуемся последним вариантом. Поэтому разместим ссылку на файл в тэге <head> нашего HTML документа.
Наша сетка будет ограничена по ширине и отцентрована по горизонтали. Для этого мы используем классы section и container, которые предлагает Bulma.
1
<sectionclass="section">
2
<divclass="container">
3
<!-- grid here -->
4
</div>
5
</section>
На небольших экранах блоки располагаются друг под другом. Вот так:
Фреймворк Bulma основан на концепции mobile-first, поэтому на экранах с шириной меньше 769px блоки расположены друг под другом. Всё что нам остаётся сделать, это задать правила расположения блоков на экранах с шириной более 768px.
Для этого нам понадобится всего один элемент: tile. Как вы скоро увидите, секрет во вложении нескольких элементов.
Помня об этом, давайте подробнее рассмотрим раскладку для настольных ПК. Она состоит из трёх колонок.
Для каждого ряда Bulma ожидает хотя бы такую структуру:
1
tile is-ancestor
2
|
3
└───tile is-parent
4
|
5
└───tile is-child
Давайте разберёмся в этой структуре:
Мы начинаем с родительского компонента, в котором содержатся все остальные блоки.
Внутри него мы добавляем элементы и размещаем их на горизонтальной оси. К тому же, благодаря 12-ти колоночной сетке, мы можем задать ширину каждому из трёх элементов. Для этого необходимо использовать класс is-*, где * это цифра от 1 до 12. Например, класс is-6 задаст блоку ширину 50%.
Для управления горизонтальной осью мы используем класс is-vertical.
Если мы хотим добавить контент в элемент, то мы должны добавить ему класс is-child, а его родителю - is-parent.
Итак, теперь мы готовы применить знания на практике.
Ряд №1
В первом ряду у нас три колонки. Первая и третья колонка занимают 1/4 ширины, а вторая - 1/2. Также не забываем, что в третье колонке имеются две дочерних колонки.
Вот какая разметка у нас получится:
1
<divclass="tile is-ancestor">
2
<divclass="tile is-parent">
3
<articleclass="tile is-child green post">
4
<!-- content here -->
5
</article>
6
</div>
7
8
<divclass="tile is-6 is-parent">
9
<articleclass="tile is-child pink post">
10
<!-- content here -->
11
</article>
12
</div>
13
14
<divclass="tile is-vertical is-parent">
15
<articleclass="tile is-child blue post">
16
<!-- content here -->
17
</article>
18
<articleclass="tile is-child gold post">
19
<!-- content here -->
20
</article>
21
</div>
22
</div>
Заметьте, что мы указали ширину только для второй колонки (с помощью класса is-6). Конечно, если хотите, можете добавить класс is-3 первой и третьей колонкам. Но в этом нет необходимости, так как эти колонки имеют свойство flex-grow: 1. Это значит, что они поделят доступное место поровну.
Все остальные классы, которые вы видите в коде, нужны исключительно для стилизации. Также мы не стали загружать код контентом блоков, чтобы не затруднять восприятие.
Ряд №2
Как и первый ряд, второй ряд состоит из трёх колонок. Первая колонка занимает половину ширины, а вторая и третья - по 1/4. Также вторая колонка имеет две дочерние колонки.
Вот разметка для этого блока:
1
<divclass="tile is-ancestor">
2
<divclass="tile is-6 is-parent">
3
<articleclass="tile is-child gray post">
4
<!-- content here -->
5
</article>
6
</div>
7
8
<divclass="tile is-vertical is-parent">
9
<articleclass="tile is-child blue post">
10
<!-- content here -->
11
</article>
12
<articleclass="tile is-child gold post">
13
<!-- content here -->
14
</article>
15
</div>
16
17
<divclass="tile is-parent">
18
<articleclass="tile is-child red post">
19
<!-- content here -->
20
</article>
21
</div>
22
</div>
Ряд №3
Третий ряд немного сложнее. Здесь у нас две колонки, и первая колонка в два раза шире второй. В первой колонке у нас два ряда. Первый ряд содержит три одинаковых колонки, а второй - две одинаковых колонки.
Разметка для этого блока выглядит так:
1
<divclass="tile is-ancestor">
2
<divclass="tile is-8 is-vertical">
3
4
<divclass="tile">
5
<divclass="tile is-parent">
6
<articleclass="tile is-child blue post">
7
<!-- content here -->
8
</article>
9
</div>
10
<divclass="tile is-parent">
11
<articleclass="tile is-child gray post">
12
<!-- content here -->
13
</article>
14
</div>
15
<divclass="tile is-parent">
16
<articleclass="tile is-child red post">
17
<!-- content here -->
18
</article>
19
</div>
20
</div>
21
22
<divclass="tile">
23
<divclass="tile is-parent">
24
<articleclass="tile is-child pink post">
25
<!-- content here -->
26
</article>
27
</div>
28
<divclass="tile is-parent">
29
<articleclass="tile is-child gold post">
30
<!-- content here -->
31
</article>
32
</div>
33
</div>
34
35
</div><!-- /is-8 -->
36
37
<divclass="tile is-parent">
38
<articleclass="tile is-child green post">
39
<!-- content here -->
40
</article>
41
</div>
42
43
</div>
Как видите, иерархия получается такая:
1
tile is-ancestor
2
|
3
├───tile is-8 is-vertical
4
| |
5
| ├───tile /*Extra class for IE*/
6
| | |
7
| | ├───tile is-parent
8
| | | └───tile is-child
9
| | |
10
| | ├───tile is-parent
11
| | | └───tile is-child
12
| | |
13
| | └───tile is-parent
14
| | └───tile is-child
15
| |
16
| └───tile /*Extra class for IE*/
17
| |
18
| ├───tile is-parent
19
| | └───tile is-child
20
| |
21
| └───tile is-parent
22
| └───tile is-child
23
|
24
└───tile is-parent
25
└───tile is-child
Если вы хотите узнать больше о том, как работает Bulma, обратитесь к документации, или воспользуйтесь инструментами разработчика в вашем браузере.
Однако, во время тестирования кода этой статьи в различных браузерах я столкнулся с проблемой в IE 11. Вот что я увидел:
С другой стороны, тестирование в Microsoft Edge не показало этой проблемы. Возможно, это какой-то баг, свойственный именно 11 версии IE. В любом случае, я попытался решить эту проблему.
И я решил ее просто добавив flex-basis: auto к классу article и к родительским элементам с классом is-vertical (смотрите иерархию выше).
Это решение отлично сработало для данного конкретного случая. Вам, возможно, придётся внести иные изменения в ваш код.
Заключение
В этой краткой статье мы узнали, как построить респонсивную раскладку блога с помощью Bulma, фреймворка, основанного на flexbox.
Приходилось ли вам использовать Bulma в ваших проектах? Поделитесь опытом в комментариях.
George is a freelance web developer and an enthusiast writer for some of the largest web development magazines in the world (Tuts+, SitePoint, LottieFiles, Scotch, Awwwards). He loves anything related to the Web and he is addicted to learning new technologies every day.
