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


Если в эти дни вы случайно проверяете исходный код внешнего интерфейса веб-сайта, скорее всего, вы найдете Bootstrap под ним. Мы все настолько привыкли к таким понятиям, как «контейнерная жидкость», «строка», «col-sm-6» и т. Д., Поэтому трудно представить, что любой другой стиль разработки внешнего интерфейса даже возможен. И поэтому, когда нам нужно построить следующий проект, мы бессознательно тянемся к Bootstrap. Тем не менее, популярность не делает Bootstrap подходящим для всех проектов и потребностей..

На самом деле, для действительно сухих интерфейсов, загружая все Bootstrap CSS и JS может вызвать вздутие живота.

Эта статья имеет две цели:

  1. Обеспечить не Bootstrap-подобные живые альтернативы Bootstrap
  2. Объясните, почему вы можете рассмотреть эти альтернативы вместо Bootstrap

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

И с этим, давайте посмотрим, какие у нас есть альтернативы.

Flexbox Grid

Подумайте об этом на минутку: главная причина, по которой вы начали использовать Bootstrap и до сих пор используете его, это его система координат. Конечно, потребовалось некоторое время, чтобы привыкнуть к классам row, col-md-6 и т. Д., Но теперь вторая идея думать о компоновке в терминах строк, столбцов, смещений и т. Д..

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

Если да, вы могли бы сделать намного лучше с Flexbox Grid.

Flexbox Grid, как следует из названия, является сеточной системой, основанной на CSS Flexbox свойства. Однако, в отличие от техники CSS, вся сложность удаляется, поэтому вы сосредотачиваетесь только на размещении элементов так, как хотите. Самое приятное то, что все имена кодов и классов имитируют то, что вы хотели бы в Bootstrap 4, что означает, что переключение между этими двумя инструментами требует нулевого умственного трения. Например, вот как выглядит код для «пространства вокруг» в Flexbox Grid:

около

около

около

Минимизированный CSS-файл для этой грид-системы занимает всего 10,7 КБ, что позволяет сэкономить несколько сотен КБ в конечном объеме загрузки. В наши дни Flexbox Grid – мой любимый вариант, так как я не хочу бороться с Bootstrap, чтобы полностью настроить его. Мне нравится начинать с ванильных элементов и стилизовать их самостоятельно, используя Flexbox Grid везде, где мне нужно.

Учить Flexbox здесь, онлайн.

PureCSS

Было бы неплохо, если бы Bootstrap был разбит на модули и вы могли импортировать только тот модуль, который вам был нужен?

Хорошо, PureCSS продвинулся вперед и сделал именно это – это набор модулей, охватывающих различные функциональные области веб-сайта. Вы можете загрузить один или все файлы, но размер загружаемого файла не будет превышать 3,7 КБ!

Да, вы правильно прочитали.

Все модули, собранные вместе и упакованные в архив, имеют размер 3,7 КБ, хотя по отдельности они составляют больше. Грид-модуль занимает всего 0,8 КБ, а базовый модуль – 1,0 КБ. Команда разработчиков PureCSS говорит, что она была построена исключительно для мобильных устройств, поэтому перед ее включением каждая строчка CSS была тщательно изучена на предмет эффективности..

Допустим, вам нужен только модуль сетки и форм. Что ж, просто скачайте эти два (вместе с базовым модулем), и все будет готово менее чем за 3,4 КБ! Не нужно включать CSS из модулей Buttons, Tables и Menus, если вы не собираетесь их использовать.

Однако у PureCSS есть свои классы, и полученный код не имитирует Bootstrap, к которому вы, возможно, очень привыкли:

Лорем Ипсум

Долор Сит Амет

Proident Labour

Praesent Concetetur

Вы заметите, что больше нет сетки с 12 столбцами. PureCSS имеет свою сеточную систему, которая определяет, какую ширину должен занимать столбец. Таким образом, pure-u-lg-1-4 означает, что этот элемент должен занимать 1/4 или 25% доступной ширины на больших экранах. Ширины, кратные 1/5, также доступны.

В общем, PureCSS – это замечательный инструмент CSS (фреймворк?), Который вы можете выбирать по мере необходимости. Тем не менее, это идет с изрядным количеством бай-инов и обучения, так как вам нужно изучить новый (немного другой) способ ведения дел.

PureCSS также имеет свои собственные классы и стиль по умолчанию, так что в этом он не слишком отличается от Bootstrap.

Zimit

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

Есть моменты, когда вам нужно разработать интерфейс для демонстрации функционирования продукта. Конечно, идеальный способ сделать это – привлечь дизайнера и разработчика пользовательского интерфейса и создать макеты для одного из передовых инструментов создания каркасов (Moqups, Blasmic и т. Д.). Страницы были бы идеальными по пикселям, цветовая гамма гладкой и правильно подобранной, а страницы были бы открыты для участия, обзоров, комментариев и т. Д..

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

  • Позволяет кодировать в HTML / CSS
  • Легкий
  • Имеет обширную коллекцию фундаментальных компонентов
  • Имеет достойный и последовательный стиль языка
  • По возможности напоминает «сероватый» тон каркасной конструкции
  • Легко учиться
  • Имеет встроенный препроцессор CSS

Zimit проверяет все эти коробки. Он размером всего 84 КБ и имеет широкий выбор компонентов на выбор. Вот несколько примеров, которые мне показались действительно привлекательными, поскольку их самостоятельное кодирование займет много времени.

В виде дерева

хлебный мякиш

Вкладки

Есть еще много вкусностей для изучения. Проверь их Вот.

Давайте посмотрим, как выглядит код. Вот как вы можете использовать систему сетки в Zimit:

4 колонки
4 колонки

4 колонки
4 колонки

«C» здесь означает «столбец», поэтому «c4» означает столбец, который охватывает четыре единицы (сетка размером 12, как Bootstrap’s). Очень похоже на Bootstrap и очень интуитивно, на мой взгляд.

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

HTML KickStart

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

HTML KickStart предлагает альтернативу.

Проще говоря; это набор действительно изящных компонентов, которые вы можете просто добавить в свои проекты и значительно сократить время разработки. Вот некоторые хорошие компоненты, которые я нашел:

Падать

Кнопки

Вкладки (по центру и с иконками)

материализовать

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

Материализация в основном похожа на Bootstrap – 12-точечная сеточная система, смещения и знакомые компоненты, такие как формы, карточки и т. Д. Однако у нее есть определенные плюсы, которые могут понравиться многим.

Тяни-Толкай

Функция push / pull в Materialise CSS позволяет изменять порядок столбцов. Это напоминает новый стандарт CSS Grid, где макет отличается от порядка элементов.

Этот div имеет ширину 7 столбцов и толкает вправо на 5 столбцов.
5 колонн шириной, вытянутых влево на 7 колонн.

Это приводит к следующему:

Вы заметите, что столбцы поменялись местами, что, возможно, чего-то недостижимого в традиционном CSS на основе Bootstrap.

JavaScript вкусности

Есть немало функций и эффектов JavaScript, которые поставляются с Materialise. Всплывающие подсказки, тосты (эфемерные уведомления в стиле Android), Parallex, Pushpin и т. Д. – вот некоторые из них. Один действительно удивительный эффект, который мне понравился, – это FeatureDiscovery, который в основном позволяет выделить элемент на странице какого-либо события (скажем, нажатие кнопки), чтобы привлечь внимание пользователя к этому элементу. Трудно полностью описать это словами, поэтому зайдите на https://materializecss.com/feature-discovery.html, чтобы понять, что я имею в виду.

В общем, Materialize – отличная альтернатива Bootstrap или для тех, кто хочет использовать полнофункциональную среду CSS для материалов..

Вывод

Bootstrap является синонимом адаптивного дизайна. Именно Bootstrap популяризировал термин «дизайн для мобильных устройств» и показал, как это можно сделать. Но хотя Bootstrap выполняет свою работу большую часть времени, просто выполнить ее не всегда достаточно. Если вы чувствуете, что Bootstrap ограничивает вас и ваши потребности особенные, вам поможет один из перечисленных здесь вариантов. ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me