Адаптивный дизайн в моде в наши дни. Это естественно: растущее число устройств, которые мы используем для просмотра, сильно различается по размеру экрана. Чтобы веб-сайт был доступен для использования на всех устройствах, он должен без проблем адаптироваться к каждому из них. Самый простой способ добиться этого — использовать фреймворки.
С момента своего создания в 2011 году Bootstrap пользуется огромной популярностью среди разработчиков. Он прост в освоении и использовании — однако это не значит, что в нём есть всё. Более того, легко узнаваемый дизайн на основе Bootstrap заставляет большую часть веб-сайта выглядеть одинаково. В этой статье мы познакомим вас с набором альтернатив Bootstrap, которые могут лучше соответствовать вашим потребностям.
Foundation
Один из самых известных альтернатив Bootstrap – Foundation, опубликованный ZURB в 2011 году. Разработчики ZURB утверждают, что Foundation совместим абсолютно с любой серверной технологией и любым сервером.
Как и Bootstrap, Foundation имеет открытый код : вы можете найти все файлы на GitHub . Структура инфраструктуры создаётся с использованием HTML, CSS и JavaScript, а сама структура запускается в браузере без необходимости какого-либо дополнительного программного обеспечения.
Само происхождение Foundation лежит в правилах руководства по стилю ZURB, которым компания следовала с 2008 года. Со временем он превратился в структуру, которую команда сначала использовала для внутреннего использования, а позже опубликовала для общественности. ZURB теперь так же использует Foundation для своих клиентов: в список входят такие популярные имена, как Coca Cola, Pixar, Barclays, Ford и многие другие.
С самого начала команда работала с мобильным подходом. Пользователю рекомендуется сначала создать самую маленькую версию своего проекта, а затем расширить её. Проектирование снизу вверх позволяет разработчику избежать перегрузки небольших экранов ненужными функциями, которые замедляют загрузку.
Используя Foundation for Emails , вы также можете создавать адаптивные электронные письма . В настоящее время это чрезвычайно полезная функция: считается, что более половины электронных писем открываются на мобильных устройствах . Это также способ, которым 75 процентов пользователей Gmail (а это 675 миллионов человек!) Получают доступ к своим учётным записям.
Сравнивая Bootstrap и Foundation, мы сразу видим несколько чётких различий. Хотя Bootstrap явно более популярен, это также даёт основанному на Foundation веб-сайту небольшое преимущество, заключающееся в более чётком дизайне. Ещё одно преимущество — встроенные дополнительные виджеты. Вы можете использовать Abide для проверки формы, добавлять меню вне таблицы и таблицы с автоматическими ценами, где это уместно. Код, написанный на Foundation, как правило, более лёгкий.
Bulma
Ещё одна альтернатива Bootstrap — Bulma . По сравнению с другими популярными интерфейсными платформами, он довольно новый (доступен только кодировщикам с 2016 года). Тем не менее, он имеет очень чёткое различие: использование Bulma не требует JavaScript — только чистый CSS.
По своей сути Bulma — это библиотека классов CSS. Используемая им блочная модель полностью основана на Flexbox. По сути, Bulma состоит из менее чем сорока файлов SASS (Syntaxically Awesome Style Sheets). Вы можете импортировать их по отдельности, если вы не хотите использовать все функции.
Как и Foundation, Bulma использует мобильный подход и уделяет первостепенное внимание оптимизации вертикального чтения. Это означает, что компоновка по умолчанию будет размещать столбцы вертикально и скрывать навигационное меню в мобильной версии. В целом, читаемый и простой для понимания синтаксис является ещё одной сильной стороной Bulma.
Отсутствие необходимости в JavaScript и удобном для начинающих синтаксисе — не единственные преимущества, которые вы можете назвать, сравнивая Bulma с Bootstrap. Он также оснащён более чем сотней вспомогательных классов CSS и полной поддержкой Font Awesome . Тем не менее, у Bootstrap есть небольшое преимущество — иметь более широкое сообщество пользователей.
Material Design
Google разработал язык дизайна под названием Material Design в 2014 году и представил существенные обновления в 2018 году. Идея пришла от функции карты, представленной Google Now. Когда он стал единым языком дизайна, он начал поддерживать макеты сетки, эффекты глубины и адаптивную анимацию. По словам разработчиков, они черпали вдохновение из бумаги и чернил. Первоначально Material Design должен был использоваться для собственных приложений Google. Он работает без проблем во всех версиях Android. Однако со временем набор инструментов стал доступен для общественности.
Есть две основы, основанные на языке Material Design. Первая называется Material Design Lite (MDL). Последнее слово в названии представляет простоту использования, небольшой размер и единственную цель (только дизайн сайта). Он не только имеет огромное разнообразие компонентов, но вы также можете комбинировать его с языком программирования Elm . Из-за различных шаблонов, MDL может быть одной из самых простых альтернатив Bootstrap для новичка. Однако это также означает, что существует риск того, что вашему веб-сайту может не хватать уникального подхода.
Далее у нас есть отзывчивый интерфейс, называемый Materialize . Проще говоря, это лёгкая библиотека, созданная с использованием CSS, JavaScript и HTML. Вы можете использовать как стандартную, так и основанную на SASS версию, однако имейте в виду, что обе они занимают довольно много памяти по сравнению с другими альтернативами Bootstrap.
Materialize не зависит от платформы, что означает, что создаваемый вами дизайн будет одинаково хорошо смотреться на экране любого размера. К сожалению, этого нельзя сказать о совместимости браузера, поскольку он не использует Flexbox . Это может вызвать проблемы при работе в Internet Explorer сейчас и повысить риск совместимости в будущем.
Когда вы сравниваете фреймворки на основе Bootstrap и Material Design, первое и главное отличие — это пользовательская база. Bootstrap существует уже несколько лет, что привело к увеличению числа пользователей. На данный момент у него 137 000 звёзд на GitHub , а у Materialise — 37 000. Начинающему Bootstrap легче получить помощь на форумах сообщества и в группах пользователей, следовательно, кривая обучения не кажется такой пугающей.
Semantic UI
Первое, что обычно замечает разработчик в данном фреймворке, — это его размер. Когда вы сравниваете Semantic UI с Bootstrap, обратите внимание на следующее: самая базовая форма Semantic UI содержит более двадцати тем, а Bootstrap — только одну.
Тем не менее, есть причина для тяжести. Ничто не соответствует семантическому интерфейсу, если вы ищете персонализацию. Более трёх тысяч переменных и компонентов пользовательского интерфейса предлагают пользователю гораздо больше опций и элементов, чем когда-либо мог Bootstrap. Основным принципом, который разработчики учитывали при создании фреймворка, была прогрессивная правдивость . Идея состоит в том, что пользователи Semantic UI должны стремиться выбирать доступные переменные и персонализировать их, а не начинать с пустой страницы.
Как следует из названия, следующим преимуществом семантического интерфейса пользователя является семантика. Использование имён классов, которые легко читать и понимать, упрощает и даже интуитивно понятно начинающему работать с фреймворком. Более того, Semantic UI упрощает отладку и поддерживает множество внешних приложений, включая, но не ограничиваясь, Meteor, React и Angular.
Впервые Semantic UI был выпущен в 2013 году. Последняя доступная версия — 2.4, в которой представлены очищаемые выпадающие списки, заполнители и сегменты заполнителей, а также улучшенные модальности flexbox.
Вы также можете столкнуться с фреймворком под названием Unsemantic . Не путайтесь: несмотря на схожие имена, Semantic UI и Unsemantic — это два совершенно разных проекта. Натан Смит создал Unsemantic в качестве преемника своего предыдущего проекта, названного 960 Grid System . Однако новый так и не стал настоящим претендентом. К середине 2020 года на GitHub у него чуть больше тысячи звёзд, а дата последнего коммита — почти два года назад . Вероятно, можно с уверенностью сказать, что это едва ли претендент при выборе одной из альтернатив Bootstrap.
Заключение
Bootstrap это здорово. Тем не менее, разные структуры могут работать лучше для разных проектов. Мы надеемся, что наше всестороннее знакомство с наиболее популярными альтернативами Bootstrap помогло вам понять их различия и сделать свой выбор.
Если вы решите использовать Bootstrap, в этом тоже нет ничего плохого — он популярен и широко используется по определённой причине.
