Альтернативы Bootstrap: лучшие фреймворки для фронтенда с первого взгляда

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

Чтобы не начинать полностью с нуля при разработке веб-интерфейса, многие программисты используют фреймворки UI (User Interface). Многие выбирают Bootstrap, который был разработан компанией Twitter. Эти компоненты могут быть оптимизированы для мобильных устройств и всех современных браузеров, а также то, что их можно легко адаптировать под ваши требования. Однако большое распространение также означает, что в интернете существует множество сайтов, построенных с использованием стандартных кодов Bootstrap и по этой причине очень похожих друг на друга. Небольшим нареканием также является сложность фронт-энда фреймворка, который основан на большом количестве CSS и JavaScript. Это также делает HTML-разметку более объемной, что, помимо прочего, влияет на время загрузки страницы.

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

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

Модульный фреймворк Foundation изначально был руководством по стилю, которое агентство веб-дизайна ZURB изначально использовало исключительно для проектов своих клиентов. Позже ZURB объединила и опубликовала многочисленные компоненты HTML, CSS и JavaScript в фреймворке с открытым исходным кодом. 12-колоночная гибкая сетка позволяет создать отзывчивый макет, который автоматически адаптируется к различным размерам и разрешениям дисплеев различных терминалов. В дополнение к системе сетки Foundation предлагает следующие шаблоны:

• Слайдер

• Кнопки

• Типографика

• Строка меню и меню

• Контейнер медиа

• Встроенные классы плавания и видимости

Foundation основан на Sass, как и Bootstrap, начиная с версии 4. Sass — это язык таблиц стилей, который упрощает создание и редактирование файлов CSS. Однако в этом фреймворке ZURB отсутствует поддержка Less (также языка таблиц стилей), которую предлагает Bootstrap. Хотя разница в размере JavaScript-плагинов и CSS-сниппетов почти не ощущается, шаблонов для Foundation значительно меньше, а также меньше поддержки других платформ.

Фреймворк ZURB явно превосходит решение Twitter, когда речь идет об индивидуальности разработанных фронт-эндов. Лежащий в основе код CSS дает доступ к компактному дизайну, который можно легко адаптировать к собственным требованиям. Некоторые классы связаны напрямую — в отличие от Bootstrap — без необходимости их предварительного добавления. Еще одно преимущество: ZURB предлагает несколько курсов и персональную поддержку для вашего фронт-энд проекта, а также специальную версию фреймворка для разработки электронных бюллетеней.

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

В середине 2013 года компания Yahoo выпустила Pure.CSS — базовую структуру для разработки фронт-эндов. Она считается хорошей альтернативой Bootstrap, но также может использоваться в сочетании с фреймворком Twitter. Pure основан на масштабируемой и модульной архитектуре для CSS (SMACSS), которая гарантирует, что повторяющиеся элементы, такие как таблицы, кнопки или формы, отделены от основного дизайна (шрифт, макет и т.д.) и имеют свои собственные соглашения. Во фреймворке Yahoo каждый модуль имеет имя класса по умолчанию с префиксом ‘pure’ для обычного дизайна, а также дополнительные имена классов для определенных правил, которые применяются к подмодулям. В Pure.CSS можно интегрировать форму, содержащую все, а затем указать имя класса по умолчанию ‘pure-form’ и имя подкласса ‘pure-form-stacked’.

Фреймворк для фронт-энда, который можно загрузить в отзывчивой и неотзывчивой версии, содержит следующие шесть модулей, размер которых в сжатом, заархивированном виде составляет примерно 4 КБ (16 КБ в распакованном виде):

• Base (base-min.css): основа фреймворка, включая правила.

• Сетки (grids-responsive-min.css): гибкая, отзывчивая система сеток

• Формы (forms-min.css/forms-nr-min.css): формы

• Кнопки (buttons-min.css): различные кнопки

• Таблицы (tables-min.css): таблицы

• Меню (menus-min.css/menus-nr-min.css): меню

Все модули построены на открытой таблице стилей Normalize.css, как и компоненты Bootstrap и многие другие CSS-фреймворки. Эта таблица стилей заменяет стили HTML-элементов по умолчанию оптимизированными кроссбраузерными стилями. Однако по сравнению с фронт-энд фреймворком Twitter, аналог Yahoo не содержит приложений JavaScript, даже если вы можете интегрировать их самостоятельно. Pure.CSS — это не просто готовый фронт-энд, который нужно адаптировать под собственные нужды, но и отправная точка для вашего проекта, поэтому с ним связана гораздо большая свобода.

Yahoo размещает фреймворк в собственной бесплатной сети доставки контента (CDN) (Yahoo CDN), так что вы можете интегрировать его в раздел <head> вашего проекта с помощью простой ссылки. Конечно, вы можете скачать Pure.CSS и разместить его самостоятельно. Актуальную ссылку на CDN, а также файлы для скачивания можно найти на официальном сайте purecss.io.

В 2013 году программист Джек Лукич опубликовал свое фреймворковое решение для разработки фронт-энда под названием Semantic UI. Цель этого сборника — упростить написание HTML-кода с помощью удобных, интуитивно понятных конвенций. Semantic UI содержит более 3 000 семантических CSS-классов, которые просты в использовании и оптимизируют процесс разработки. Базовый пакет Bootstrap содержит только одну тему, но Semantic UI предлагает более 20 различных шаблонов оформления в стандартной версии. Набор компонентов несколько сложнее, чем у фреймворка Twitter: помимо элементарных файлов CSS и JavaScript, в базовый пакет входят шрифты, PHP-пакет Composer, менеджер веб-файлов Bower и бегунок задач JavaScript Gulp.

Отдельные компоненты классифицируются по следующим шести направлениям:

• Globals: определения стилей на основе normalize.css; типографика и основы дизайна.

• Элементы: общие компоненты фронт-энда, такие как кнопки, иконки, контейнеры и многое другое.

• Коллекции: структурный контент, такой как система сеток, меню, таблицы и формы.

• Виды: интерактивные элементы, такие как поля для комментариев, новостные ленты и рекламные баннеры. 

• Модули: виджеты, такие как выпадающие меню, всплывающие окна и флажки.

• Поведения: интерфейсы для программирования на JavaScript.

Для новичков система именования Semantic UI поначалу вызывает недоумение и требует некоторого времени, чтобы привыкнуть. В конце концов, усилия окупаются, потому что HTML-код вашего фронт-энда намного легче читать, чем в аналогичных фреймворках, таких как Bootstrap от Twitter, что, безусловно, может быть полезно при последующих изменениях. Semantic UI есть разве что в версиях CSS или Less. Существует также версия Sass, в которой семантический фреймворк в этом отношении похож на Bootstrap. Основным недостатком этой альтернативы Bootstrap является тот факт, что многие компоненты зависят от JavaScript и не работают без скриптового языка.

Вы можете скачать Semantic UI либо в области загрузки на официальном сайте, либо интегрировать файлы в Content Delivery Network JSDELIVR по ссылке, либо получить доступ к отдельным фрагментам кода в репозитории фреймворка на GitHub.

UIkit — это решение с открытым исходным кодом для фронт-энд программирования. Он был разработан гамбургской компанией YOOtheme, которая имеет большой опыт разработки веб-приложений, а также тем для WordPress, Joomla и собственного конструктора сайтов YOOtheme Pro. Обширная коллекция компонентов HTML, CSS и JavaScript распространяется по свободной лицензии MIT и поэтому может быть легко использована и изменена. Все CSS сниппеты существуют в версиях Less и Sass, так что шаблоны стилей могут быть адаптированы под нужды опытных программистов. Существует более 30 основных модулей этой альтернативы Bootstrap, которые построены на normalize.css, как и предыдущие примеры, а также фреймворк Twitter. По этой причине современные интернет-браузеры без проблем отображают веб-проекты UIkit.

Основные компоненты разделены на следующие шесть категорий:

• Defaults: основа для нормализации HTML-элементов, с помощью которой реализуется кроссбраузерность, а также некоторые основные стилевые предписания.

• Макет: инструменты для проектирования переднего плана, например, система сетки, ящики для содержимого и полезные классы CSS для повторяющегося содержимого.

• Навигация: все элементы, которые помогают посетителям изучать ваш веб-интерфейс; есть модули для пагинации (нумерации страниц), а также классические навигационные панели.

• Элементы: стили для самостоятельных блоков контента, таких как таблицы, списки и формы.

• Общие: компоненты, которые вы обычно используете в своем контенте, такие как кнопки, значки, значки или анимация.

• JavaScript: в основном модули на основе JavaScript для реализации интерактивных элементов.

UIkit предоставляет различные классы отзывчивости для подготовки контента к различным размерам дисплея. Предустановленные точки разрыва — например, 1 200 пикселей для сверхбольших экранов или 497 пикселей для маленьких дисплеев смартфонов — могут быть созданы с помощью онлайн-настройщика. Чтобы избежать сложностей с другими CSS-сниппетами или фреймворками, все классы обозначаются префиксом ‘uk’. Дополнительные элементы CSS и JavaScript, не интегрированные в основной фреймворк, но выбираемые опционально, необходимы для реализации более сложных веб-интерфейсов, если они оснащены разделом администратора, включающим функции входа, HTML-редактора и загрузки файлов.

Несмотря на значительный набор функций, размер файлов как отдельных компонентов, так и всего фреймворка удивительно мал. Это можно дополнить очень подробной документацией, которая значительно облегчает введение в систему — даже если Bootstrap находится на шаг впереди в отношении выбора тем и ассортимента обучающих материалов. Тем не менее, UIkit имеет около 1 500 форков на GitHub, где вы можете найти и скачать все модули для фронт-энда фреймворка. Полный пакет также доступен для загрузки с официального сайта. Однако невозможно заранее отменить выбор модулей, чтобы потом удалить их в распакованном каталоге.

Materialize — это CSS-фреймворк, основанный на принципах материального дизайна, который Google представил в 2015 году и теперь использует в большинстве своих приложений. Концепция дизайна построена на картах-поверхностях, которые в принципе минимально оформлены («плоский дизайн»), но затем выдвигаются на первый план с помощью анимации и теней. Создаваемые таким образом эффекты глубины помогают пользователю веб-интерфейса легко фиксировать важную информацию и элементы взаимодействия. Этот UI-фреймворк, лицензированный MIT, был разработан Элвином Вангом, Аланом Чангом, Алексом Марком и Кевином Луи — четырьмя студентами из университета Карнеги-Меллон в Пенсильвании.

Альтернатива Bootstrap, имеющая 12-колоночную систему сетки, как и фреймворк Twitter, содержит различные компоненты CSS и JavaScript, более 700 официальных символов Material Design в шрифте иконок, а также Roboto, стандартный шрифт дизайнерской концепции Google. Помимо обычных CSS-файлов в обычной и минимизированной версиях, как и в Bootstrap, вам также доступны исходные файлы SCSS, написанные на языке Sass, которые упрощают индивидуальный дизайн вашего веб-интерфейса. Независимо от вашего выбора, доступно около 30 элементов:

• CSS: основным элементом CSS является отзывчивая система сетки, как и в Bootstrap и других UI-фреймворках. Она обеспечивает основу для создания веб-интерфейса, который работает на всех устройствах. Сетка Materialize включает три предустановленных размера отображения — менее 600 пикселей для мобильных устройств, до 992 пикселей для планшетов и более 992 пикселей для настольных ПК. Дополнительные фрагменты CSS: цветовая палитра, основанная на основных цветах материального дизайна, вышеупомянутый шрифт Roboto и несколько классов, которые в Materialize называются «помощниками» и помогают выравнивать контент.

• Компоненты: компоненты — это части фронт-энд фреймворка, необходимые для реализации навигационных элементов и интерактивных областей. Помимо типичных компонентов, таких как коды для пейджинга, форм, навигационного меню или иконок, вы также найдете некоторые модули, которые имеют фундаментальное значение для реализации концепции материального дизайна. К ним относятся, например, «карточки», которые представляют собой типичные ящики для объектов, используемые для представления контента, или символические «фишки», с помощью которых можно отображать теги или контакты.

• JavaScript: с точки зрения применения JavaScript, Materialize, несомненно, является одной из лучших альтернатив Bootstrap. Хотите ли вы отобразить изображения в виде карусели, добавить интерактивные диалоговые окна, встроить элементы аккордеона или сделать интерфейс более интересным с помощью эффекта параллаксной прокрутки, у вас есть соответствующие фрагменты JavaScript, готовые к использованию в любое время. Это идеально подходит для задачи разработки веб-интерфейса, который будет очень удобен как на мобильных устройствах, так и на настольных ПК.

Файлы проекта Materialize можно найти на GitHub или скачать на сайте materializecss.com. Там же вы найдете два доступных шаблона ‘Starter’ и ‘Parallax’, а также код разметки для ссылки на файлы проекта через сеть доставки контента, cdnjs.

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

Существуют также различия в системах классов альтернатив Bootstrap, особенно выделяется Semantic UI. Вместо типичных классов CSS фреймворк UI интегрировал в свое название более 3 000 собственных семантических классов, которые делают программирование кода еще более интуитивным. Упрощение кодирования также позволяет большинству коллекций поддерживать языки стилей Less и Sass, что означает, что вы можете легко настраивать таблицы стилей вашего веб-интерфейса, прежде чем преобразовывать их в привычный формат CSS, чтобы их мог прочитать и правильно интерпретировать интернет-браузер посетителя. Pure.css не использует ни один из препроцессоров CSS, но Scalable and Modular Architecture for CSS (SMACSS) предлагает интересный подход при использовании CSS.

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

• Привлекательно ли структурированы компоненты?

• Предлагает ли система сетки желаемые возможности?

• Насколько важна поддержка старых браузеров?

• Соответствует ли требованиям набор модулей CSS и JavaScript?

• Пропорционален ли размер кодов (сжатых и несжатых)?

• Нужно ли вам пространство для маневра, когда дело доходит до адаптации кода? Если да, то какие возможности предоставляет каркас пользовательского интерфейса? 

• Придаете ли вы большое значение большому сообществу (дальнейшее развитие, расширения, шаблоны, форумы, учебники и т.д.)?

Если вы колеблетесь между несколькими альтернативами Bootstrap, взгляните на некоторые онлайн-руководства. В руководствах часто перечисляются модули вместе с наглядными примерами кодирования. Вы также можете ознакомиться с возможностями отдельных поставщиков, опробовав их самостоятельно с помощью онлайн-инструмента Codeply. Здесь вы можете протестировать компоненты различных UI-фреймворков прямо в браузере, не загружая ни одного файла.