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

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

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

1. Если вам нравится материальный дизайн, Bootstrap поможет вам

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

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

  • Кнопки с заглавной буквы
  • Тени и возвышение
  • Анимация пульсации
  • Анимация поля формы
  • Вкладки и другие сгруппированные элементы

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

2. Bootstrap работает с обычным JS, Angular, Vue и React.

Поскольку Bootstrap работает с множеством различных вариаций JS, он не ограничивается одним набором навыков. Если вы предпочитаете работать во Vue или React, потому что это то, в чем вы чувствуете себя наиболее комфортно, вам больше не придется снова привыкать к ванильному JavaScript. Поскольку Bootstrap так давно стал открытым исходным кодом, существует множество различных ресурсов, в которых фреймворк был переписан, чтобы быть совместимым со всеми этими другими методологиями.

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

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

3. Для дизайнеров уже доступно множество готовых элементов.

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

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

4. В документации есть множество вариантов точек останова, контейнеров и столбцов.

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

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

Bootstrap работает с макетом из 12 столбцов, который похож на Material Design, что упрощает мысленную работу. Таким образом, не возникает путаницы между работой со столбцами между одной дизайн-системой и другой. Одна действительно интересная вещь, которая есть в Bootstrap, которую я лично не испытал в Material Design, - это способность описывать с помощью классов, как столбцы должны реагировать в зависимости от размера экрана. В качестве базового примера это означает, что с добавлением этих классов вы можете описать, что вы хотите, чтобы столбец увеличивался на 100% ширины на мобильном устройстве, но только на 50% на настольном компьютере.

5. В целом документация написана хорошо.

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

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

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