От хостинга до контента, от дизайна до безопасности, создание и поддержание присутствия в Интернете может быть невероятно полезным и требовательным. Итак, когда появляется что-то, что облегчает нагрузку, вы можете быть уверены, что сообщество веб-разработчиков захочет попробовать это.

Так обстоит дело с фреймворками CSS. Фреймворк CSS – это набор инструментов, которые упрощают написание кода CSS – большинство из них имеют встроенные библиотеки HTML-элементов, которые соответствуют лучшим практикам дизайна и обеспечивают удобство для мобильных устройств без особых дополнительных усилий с вашей стороны.

Короче говоря, CSS-фреймворки помогут вам создать лучший пользовательский интерфейс за меньшее время.

В этом посте я познакомлю вас с Bulma, относительно новым игроком в области фреймворков CSS. Мы исследуем, что делает Bulma уникальным фреймворком, почему вы можете попробовать его и как начать работу с некоторыми из его основных элементов. По причинам, которые мы увидим, Bulma – отличный инструмент для начинающих и опытных разработчиков для стилизации своих страниц, так что давайте начнем.

Что такое Bulma CSS?

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

Bulma построена на Flexbox, модели макета CSS, которая автоматически регулирует ширину элемента страницы в зависимости от ширины его контейнера. Flexbox требует от разработчиков написания как HTML, так и CSS для создания элементов, соответствующих этой модели. С Bulma поведение Flexbox и многие другие вещи можно обрабатывать с помощью классов HTML.

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

Зачем использовать Bulma CSS?

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

Если вы хотите создать веб-сайт с нуля, вот несколько причин, по которым Bulma – ваш друг:

Эффективность: такие фреймворки, как Bulma, экономят ваше время, реализуя для вас более сложные эффекты CSS.
Простота: как мы увидим, Bulma легко добавить в ваш код. Если вы разбираетесь в классах CSS, вы можете понять Bulma. Кроме того, Bulma не перегружена множеством опций – это все CSS.
Последовательность: аналогично синтаксис Bulma согласован и интуитивно понятен, поэтому его легко изучить и легко интерпретировать, если вы не писали код самостоятельно.
Возможности: библиотека компонентов пользовательского интерфейса Bulma обрабатывает большинство вещей, которые необходимы веб-сайтам во внешнем интерфейсе, включая заголовки, меню, формы и карточки. Для реализации любого из этих компонентов требуется много простого CSS. С Bulma эти же элементы можно стилизовать с помощью всего нескольких основных команд.
Модульность: Bulma содержит ~ 40 файлов .sass (Sass – это язык расширения CSS, который использует Bulma), каждый из которых обрабатывает свой компонент интерфейса. Но вам не нужно импортировать все эти файлы, если вы не хотите, а только те, которые вам нужны. Читайте как здесь.
Отзывчивость: поскольку Bulma основана на Flexbox, его встроенные компоненты адаптируются по дизайну – это означает, что элементы будут перемещаться и масштабироваться, чтобы соответствовать любому размеру экрана или области просмотра.

Эти преимущества заработали Bulma прочную репутацию. И, немного попрактиковавшись, вы можете добиться впечатляющих результатов – посмотрите демонстрацию Bulma, чтобы понять, что возможно, и используйте инструмент проверки элементов вашего браузера, чтобы увидеть, как создаются эти сайты.

Bulma против Bootstrap

Если вы знакомы с фреймворками CSS, вы, вероятно, знакомы с Bootstrap, самым популярным фреймворком CSS на сегодняшний день. И Bootstrap, и Bulma – это бесплатные CSS-фреймворки с открытым исходным кодом, ориентированные на мобильные устройства, которые делают похожие вещи, но различаются по популярности, возможностям и сложности.

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

Также в библиотеке Boostrap больше элементов и больше возможностей для стилизации и реализации. Вы можете многое сделать в рамках Bulma, но стоит изучить компоненты Bootstrap, чтобы лучше понять его различные предложения. Следует также отметить, что Bulma не хватает возможностей доступности, которые предлагает Bootstrap, но Bulma часто обновляется и может улучшить доступность в будущих выпусках.

Еще одно важное различие между ними заключается в том, что Bootstrap включает JavaScript, язык сценариев для создания динамического содержимого веб-сайтов, а Bulma – нет. JavaScript может напугать новых веб-разработчиков. Если вы не готовы освоить новый язык, Bulma может быть более удобным шагом в CSS-фреймворки. Хотя вам не нужно знать JavaScript, чтобы использовать Bootstrap, некоторые компоненты Bootstrap, такие как карусели и предупреждения, требуют этого.

Как использовать Bulma CSS

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

Как настроить Bulma

Во-первых, нам нужно подготовить наши HTML-файлы для использования инфраструктуры Bulma. Убедитесь, что следующий код находится в самом верху всех ваших HTML-файлов:

<!DOCTYPE html>

Затем поместите следующий тег в раздел ваших файлов HTML, чтобы включить адаптивные элементы:

<meta name="viewport" content="width=device-width, initial-scale=1">

Теперь, когда ваши HTML-файлы готовы, у вас есть несколько способов добавить функциональность Bulma:

Использовать NPM

Чтобы установить Bulma из библиотеки NPM, выполните в терминале следующую команду:

https://www.npmjs.com/

Используйте Bulma CSS CDN

Размещение следующего кода в разделе ваших HTML-файлов также обеспечивает доступ к библиотеке Bulma CSS:

<link rel="stylesheet" target="_blank" rel="noopener" href="https://cdn.jsdelivr.net/npm/[email protected]/css/Bulma.min.css">

Это метод, который я буду использовать в примерах позже.

Скачайте файлы Bulma напрямую

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

Как написать Bulma CSS

Синтаксис Bulma основан на классах HTML. Если вы хотите стилизовать элемент страницы, просто добавьте один или несколько классов внутри HTML-тега элемента. Давайте сначала посмотрим на это в действии с компонентом кнопки.

Кнопки

Чтобы реализовать кнопку Bulma, добавьте класс кнопки в элемент HTML , , <input type = "submit"> или <input type = "reset"> :

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

Помимо основных классов элементов, Bulma имеет классы-модификаторы, которые добавляют к элементам альтернативные стили. Имена классов-модификаторов начинаются с символа is- или has-, за которым следует стиль.

Давайте посмотрим, как можно использовать модификаторы для кнопки, начиная с класса is-rounded. Этот класс-модификатор закругляет углы нашей кнопки:

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

Как вы уже догадались, мы можем использовать несколько классов модификаторов для одного и того же элемента. Далее, давайте применим класс модификатора для цвета, и второй класс модификатора, называемый выделенным :

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

Наконец, мы можем управлять размером кнопки с помощью нескольких классов модификаторов:

Это только начало того, что вы можете делать с кнопками. Полный список модификаторов и многое другое см. В документации по кнопкам Bulma.

Индикаторы прогресса

Давайте посмотрим на еще один интересный элемент в библиотеке Bulma – индикатор выполнения. Чтобы разместить его, добавьте прогресс класса Bulma в HTML-элемент :

Как и кнопки, вы также можете добавлять классы модификаторов к своим индикаторам выполнения:

Эффект движения последней полосы создается путем исключения атрибута value из тега.

Пользовательский ввод

Bulma поставляется с набором элементов управления формы, элементов для сбора информации, отправленной пользователем. Это включает в себя элементы для текста ввода, в радио кнопки, флажок, и выберите в раскрывающемся меню:

Столбцы

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

Столбцы – это фундаментальная часть форматирования веб-сайта, но одна из самых сложных для форматирования, особенно для адаптации к разным размерам окон. Bulma выполняет всю эту работу за нас, если мы присоединяем класс столбцов к родительскому элементу div, а класс столбцов – к каждому дочернему элементу div. (Вам может потребоваться отрегулировать масштаб до 0,5x или 0,25x в модуле ниже, чтобы увидеть столбцы.)

Чтобы установить разную ширину столбца, попробуйте добавить один из модификаторов ширины столбца Bulma к одному или нескольким дочерним элементам столбца – ширина других столбцов будет изменяться автоматически. (Вам может потребоваться отрегулировать масштаб до 0,5x или 0,25x в модуле ниже, чтобы увидеть столбцы.)

Опять же, со столбцами в Bulma CSS можно сделать гораздо больше – это только основы. См. Документацию по столбцам, чтобы узнать обо всех возможностях.

Пусть Frameworks сделают работу

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

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

Источник записи: https://blog.hubspot.com