CSS Framework Bulma: что это такое и с чего начать.

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

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

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

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

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

Что такое CSS?

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

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

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

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

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

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

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

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

против Bootstrap

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

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

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

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

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

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

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

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

<!DOCTYPE html> 

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

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

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

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

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

https://www.npmjs.com/ 

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

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

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

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

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

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

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

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

Кнопки

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

• статьи о wordpress, web