Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Flexbox
Webdesign

Quick Tip: Как сверстать блог с помощью Bulma

by
Difficulty:IntermediateLength:ShortLanguages:

Russian (Pусский) translation by Dmitriy Troy (you can also view the original English article)

В этой краткой статье мы будем строить респонсивную раскладку блога с помощью популярного основанного на flexbox фреймворка Bulma от Джереми Томаса.

Как обычно, у нас есть демо финального результата в Codepen (посмотрите полную версию):

Знакомимся с Bulma

Для работы Bulma требуется всего один CSS файл. Вы можете скопировать его со страницы GitHub, можете установить его через менеджер пакетов (например, npm), или загрузить из CDN (например, cdnjs).

Мы воспользуемся последним вариантом. Поэтому разместим ссылку на файл в тэге <head> нашего HTML документа.

Теперь мы готовы к вёрстке нашего блога.

Создаём разметку

Наша сетка будет ограничена по ширине и отцентрована по горизонтали. Для этого мы используем классы section и container, которые предлагает Bulma.

На небольших экранах блоки располагаются друг под другом. Вот так:

Bulma mobile layout

Фреймворк Bulma основан на концепции mobile-first, поэтому на экранах с шириной меньше 769px блоки расположены друг под другом. Всё что нам остаётся сделать, это задать правила расположения блоков на экранах с шириной более 768px.

Для этого нам понадобится всего один элемент: tile. Как вы скоро увидите, секрет во вложении нескольких элементов.

Помня об этом, давайте подробнее рассмотрим раскладку для настольных ПК. Она состоит из трёх колонок.

Для каждого ряда Bulma ожидает хотя бы такую структуру:

Давайте разберёмся в этой структуре:

  • Мы начинаем с родительского компонента, в котором содержатся все остальные блоки.
  • Внутри него мы добавляем элементы и размещаем их на горизонтальной оси. К тому же, благодаря 12-ти колоночной сетке, мы можем задать ширину каждому из трёх элементов. Для этого необходимо использовать класс is-*, где * это цифра от 1 до 12. Например, класс is-6 задаст блоку ширину 50%.
  • Для управления горизонтальной осью мы используем класс is-vertical.
  • Если мы хотим добавить контент в элемент, то мы должны добавить ему класс is-child, а его родителю - is-parent.

Итак, теперь мы готовы применить знания на практике.

Ряд №1

В первом ряду у нас три колонки. Первая и третья колонка занимают 1/4 ширины, а вторая - 1/2. Также не забываем, что в третье колонке имеются две дочерних колонки.

Вот какая разметка у нас получится:

Заметьте, что мы указали ширину только для второй колонки (с помощью класса is-6). Конечно, если хотите, можете добавить класс is-3 первой и третьей колонкам. Но в этом нет необходимости, так как эти колонки имеют свойство flex-grow: 1. Это значит, что они поделят доступное место поровну.

Все остальные классы, которые вы видите в коде, нужны исключительно для стилизации. Также мы не стали загружать код контентом блоков, чтобы не затруднять восприятие.

Ряд №2

Как и первый ряд, второй ряд состоит из трёх колонок. Первая колонка занимает половину ширины, а вторая и третья - по 1/4. Также вторая колонка имеет две дочерние колонки.

Вот разметка для этого блока:

Ряд №3

Третий ряд немного сложнее. Здесь у нас две колонки, и первая колонка в два раза шире второй. В первой колонке у нас два ряда. Первый ряд содержит три одинаковых колонки, а второй - две одинаковых колонки.

Разметка для этого блока выглядит так:

Как видите, иерархия получается такая:

Если вы хотите узнать больше о том, как работает Bulma, обратитесь к документации, или воспользуйтесь инструментами разработчика в вашем браузере.

Поддерживаемые браузеры

Поддержка flexbox сейчас реализована во всех современных браузерах.

Однако, во время тестирования кода этой статьи в различных браузерах я столкнулся с проблемой в IE 11. Вот что я увидел:

С другой стороны, тестирование в Microsoft Edge не показало этой проблемы. Возможно, это какой-то баг, свойственный именно 11 версии IE. В любом случае, я попытался решить эту проблему.

И я решил ее просто добавив flex-basis: auto к классу article и к родительским элементам с классом is-vertical (смотрите иерархию выше).

Это решение отлично сработало для данного конкретного случая. Вам, возможно, придётся внести иные изменения в ваш код.

Заключение

В этой краткой статье мы узнали, как построить респонсивную раскладку блога с помощью Bulma, фреймворка, основанного на flexbox.

Приходилось ли вам использовать Bulma в ваших проектах? Поделитесь опытом в комментариях.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.