Bulma

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

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

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

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

Bulma Программирование, Bulma, Программист, IT, Длиннопост, Telegram (ссылка)

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

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

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

Bulma Программирование, Bulma, Программист, IT, Длиннопост, Telegram (ссылка)

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

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

Bulma Программирование, Bulma, Программист, IT, Длиннопост, Telegram (ссылка)

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

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

Bulma Программирование, Bulma, Программист, IT, Длиннопост, Telegram (ссылка)

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

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

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

2
Автор поста оценил этот комментарий

Сетка такая ж как у Bootstrap (12) в чем фича этого Bulma то?

раскрыть ветку (1)
0
Автор поста оценил этот комментарий

Основное преимущество Bulma по сравнению с Bootstrap заключается в том, что Bulma представляет собой CSS-фреймворк без какой-либо зависимости от JavaScript. Это делает его более легковесным и быстрым, поскольку он не требует загрузки дополнительных JavaScript-файлов.

Несмотря на то, что сетка в Bulma также основана на 12 колонках, как и в Bootstrap, она имеет несколько отличительных особенностей:

Более простой и минималистичный синтаксис классов, что облегчает чтение и написание кода.

Встроенная поддержка гибких (responsive) колонок без необходимости использовать специальные классы для разных размеров экрана.

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

Более легкий вес и меньший объем CSS-кода по сравнению с Bootstrap.

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

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

показать ответы