Альтернативы Bootstrap: обзор лучших интерфейсных фреймворков

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

Bootstrap не всегда является лучшим решением

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

 

Однако широкое распространение платформы означает, что в сети есть много веб-сайтов, которые были созданы с помощью стандартного кода Bootstrap и поэтому похожи друг на друга. Большим недостатком также является сложность структуры front end, которая использует много CSS и JavaScript, что делает язык разметки HTML более широким: это может иметь негативные последствия, например, во время загрузки веб-проекта.

 

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

Краткий обзор лучших альтернатив Bootstrap

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

Foundation ZURB

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

 

  • Ползунок
  • Кнопки
  • Книгопечатание
  • Строки меню и различные меню
  • Медиаконтейнеры
  • Интегрированные классы «float» и «visibility»

Уже в 4 версии Foundation основан на Sass, языке стиля, который значительно упрощает создание и обработку файлов CSS; и в структуре ZURB отсутствует поддержка, предлагаемая Bootstrap. Хотя, что касается выбора плагинов JavaScript и фрагментов CSS, между этими двумя структурами практически нет различий, у Foundation мало шаблонов; кроме того, существует и низкий уровень поддержки для других платформ.

 

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

 

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

Преимущества
Недостатки

Упрощенный код программирования

Доступно только несколько шаблонов

Упрощенный код программирования

Доступно только несколько шаблонов

Реализованы классы CSS

Проблемы со старыми версиями Internet Explorer

Помощь

Pure.CSS

В середине 2013 года Yahoo сделала Pure.CSS общедоступным, базовую структуру для разработки передних концов для Интернета, которая по праву не только считается хорошей альтернативой Bootstrap, но также может использоваться в сочетании с Twitter. Pure.CSS основан на SMACSS, акрониме «Масштабируемая и модульная архитектура для CSS», архитектура для CSS, которая заставляет повторяющиеся элементы, такие как таблицы, кнопки или контактные формы, отделяться от основного дизайна (шрифт, макет, и т. д.) и что они отвечают на их соглашения.

По этой причине в структуре Yahoo каждый модуль имеет стандартное имя класса с префиксом «чистый» для обычного создания, а также дополнительные имена классов для определенных правил, которые применяются к подмодулям. Например, контактная форма, в которой написан код, может быть включена в Pure.CSS путем вставки класса «чистой формы» или даже подкласса с «чистой формой».

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

  • Base (base-min.css): базовая структура, включая регулирование;
  • Сетки (grid-responsive-min.css): гибкая и гибкая система сетки жидкостей;
  • Формы (forms-min.css / forms-nr-min.css): контактная форма;
  • Кнопки (buttons-min.css): несколько кнопок;
  • Таблицы (tables-min.css): таблицы;
  • Меню (меню-min.css / menus-nr-min.css): меню.

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

 

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

 

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

Преимущества
Недостатки

Минималистский дизайн

Мало шаблонов

Отличная совместимость с браузерами

Отсутствует фрагмент кода JavaScript

Архитектура SMACSS

Поддержка Less / Sass отсутствует

Semantic UI

В 2013 году программист Джек Лукич выпустил свое рамочное решение для разработки интерфейса под названием Semantic UI. Центральным моментом этой коллекции кода является намерение облегчить написание HTML-кода благодаря простым и интуитивным соглашениям для пользователя. Для этого Semantic UI (семантический пользовательский интерфейс) содержит более 3000 семантических классов CSS, которые легко применять и которые предназначены для оптимизации процесса разработки.

 

В базовом пакете Bootstrap есть только одна тема, Semantic UI предлагает более 20 различных моделей дизайна в своей стандартной версии. В целом предложение немного сложнее, чем структура Twitter: помимо основных файлов CSS и JavaScript основной пакет также имеет множество шрифтов, менеджер пакетов PHP Composer, менеджер Bower веб-данных, и, наконец, JavaScript Gulp.

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

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

  • Элементы : общие элементы переднего конца, такие как кнопки, значки, контейнеры и т. Д .;

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

  • Просмотры : интерактивные элементы, такие как поля комментариев, доска объявлений или рекламные баннеры;

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

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

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

 

В дополнение к CSS, семантический интерфейс также доступен в варианте Less; в то же время существует также вариант Сасса , через который в этот момент семантическая структура достигает такого же уровня Bootstrap. Решающим недостатком альтернативы Bootstrap является то, что многие компоненты зависят от JavaScript и поэтому не работают без языка сценариев.

 

Вы можете загрузить Semantic UI или из раздела загрузки на официальном веб-сайте или ввести файлы, направляя их в сеть доставки контента JSDELIVR или размещая отдельные коды фрагментов в репозитории GitHub .

Преимущества
Недостатки

Более 3000 семантических классов CSS

Очень сложный

Поддержка Sass и Less

Большая часть компонентов CSS работает только с JavaScript

Отличные возможности интеграции (React, Ember, Meteor, PHP-Paketmanager, Gulp)

UIKit

UIkit - это программное решение с открытым исходным кодом для интерфейсного программирования гамбургской компании YOOtheme, которое может похвастаться большим опытом разработки веб-приложений, а также тем для WordPress, Joomla и создателем веб-страниц YOOtheme Pro, продукта той же компании. Коллекция компонентов HTML, CSS и JavaScript подчиняется бесплатной лицензии MIT и поэтому может быть использована и изменена без колебаний.

 

Все фрагменты CSS существуют как в варианте Less, так и в варианте Sass , поэтому адаптация стиля модели является свежей для опытного программиста. Более 30 основных модулей альтернативы Bootstrap основаны, как уже было видно для других представителей и для платформы Twitter, на Normalize.css , поэтому в современных браузерах нет проблем с представлением веб-проектов UIkit.

 

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

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

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

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

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

  • Common : компоненты, которые обычно используются в содержимом, например кнопки, значки, значки или анимации;

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

Чтобы сделать содержимое доступным для разных размеров дисплея, UIkit имеет несколько классных классов. В контрольных точках , например, заранее определены и позволяют адаптировать по желанию любую тему, благодаря " Online-настройщику : 1200 пикселей на 479 пикселей, или очень большие экраны для небольшого дисплея смартфона. Чтобы избежать осложнений с другими фрагментами или фреймворками CSS, все классы отмечены префиксом «uk-». Даже если они не интегрированы в центральную структуру, дополнительные и необязательные элементы CSS и JavaScript по-прежнему необходимы для создания более сложных веб-поверхностей ; например, для оснащения административной области вам нужны такие элементы, как логин, редактор HTML и функция загрузки файлов.

 

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

 

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

Преимущества
Недостатки

Дополнительные компоненты для сложных поверхностей

Немного известно

Поддержка Sass и Less


Настройка тем

Materialize

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

 

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

 

Независимо от того, как выбор падает, у вас будет в вашем распоряжении 30 элементов:

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

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

  • JavaScript : Что касается приложений JavaScript, то материализовать, несомненно, является одним из лучших альтернатив Bootstrap. Если вы хотите, чтобы изображение появлялось в режиме прокрутки , добавляйте интерактивные диалоги, вставляйте раскрывающиеся элементы или восстанавливайте поверхность веб-сайта с помощью так называемого эффекта «параллакса » (параллакс - это явление, когда объект, кажется, отходит от в фоновом режиме, если вы меняете точку наблюдения), это не имеет значения, потому что у вас всегда есть все фрагменты JavaScript, которые вы хотите в своем распоряжении. Таким образом, вы будете лучше всего приспособлены для дизайна поверхности веб-сайта, которая характеризуется высокой удобством использования как на мобильных устройствах, так и на стационарных компьютерах.

Вы можете загрузить файлы проекта Materialize на GitHub или на домашней странице materialize.css . Здесь вы также найдете два доступных шаблона: «Стартер» и «Параллакс», а также код разметки для подключения к файлам проекта через сеть доставки контента cdnjs .

Преимущества
Недостатки

Основан на дизайне Google

Доступно мало шаблонов и расширений

Большое разнообразие компонентов

Поддерживает только последние версии браузера

Доступна версия Sass

Очень строгие правила проектирования

Вкратце: как вы находите альтернативу Bootstrap

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

 

Кроме того, существуют различия в системах классов, особенно выделяется Semantic UI. Вместо типичных классов CSS инфраструктура пользовательского интерфейса интегрировала более 3000 собственных семантических классов с собственным именем, что должно сделать программирование с кодом интуитивно понятным. Упрощение написания кода обеспечивается многочисленными библиотеками, которые работают за счет поддержки таких языков, как Сасс; благодаря этому вы можете легко адаптировать таблицы стилей вашего веб-интерфейса, прежде чем переводить их в обычный формат CSS, чтобы их можно было правильно читать и интерпретировать интернет-браузером посетителя. Только Pure.CSS отказывается от обоих препроцессоров CSS, но предлагает интересный стимул для использования CSS с архитектурой масштабируемой и модульной архитектуры для CSS (SMACSS).

 

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

  • Являются ли компоненты структурированными привлекательным образом?
  • Предлагает ли сетка желаемые параметры?
  • Насколько важна поддержка старых версий браузера ?
  • Соответствует ли разнообразие модулей CSS и JavaScript требованиям?
  • Является ли размер кода (сжатый или несжатый) пропорциональным?
  • Являются ли большие свободы необходимыми для адаптации кода , и если да, то какие возможности предлагает интерфейс пользовательского интерфейса?
  • Какое значение вы придаете созданию большого сообщества (дальнейшая разработка, расширения, шаблоны, форумы, учебные пособия и т. д.)?

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

Рейтинг 5 (2 Голоса)