Bulma⁠⁠

Сегодня мы поговорим про открытый и бесплатный CSS-фреймворк-Bulma.

Тема будет посвящена использованию гридов и макетов в данном фреймворке, а начнем с вложенных колонок(ВК)...

Вложенные колонки

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

Макеты будут с различной шириной и высотой колонок, что открывает возможности для формирования уникальных и гибких пользовательских интерфейсов. Вот несколько примеров использования ВК:

Макет с боковой панелью

Одним из распространенных примеров является макет с основным контентом и боковой панелью. ВК позволяют легко этого достичь:

Макет с несколькими панелями

Вы также можете использовать ВК для создания макетов с несколькими панелями или секциями на одной странице:

Макет с разделенными секциями

ВК также позволяют формировать макеты, где секции визуально разделены, но при этом сохраняют гибкость:

Вы можете комбинировать вложенные колонки с другими классами и компонентами Bulma, такими как box, tile, hero, чтобы создавать более сложные и стильные макеты.

Важно помнить, что при использовании ВК необходимо следить за вложенностью и правильно закрывать теги, чтобы избежать ошибок в структуре HTML.

Читайте больше разборов на канале Carbonfay!