Что нового в Bootstrap 5?

Жизнь не стоит на месте и вот в очередной нас порадовали разработчики самого популярного CSS-фреймворка Bootstrap. Наконец-то вышла новая версия Bootstrap 5 Alpha! Сейчас мы рассмотрим, что изменилось в новой версии Bootstrap и как это теперь повлияет на верстку сайтов.

1) Отказ от jQuery в пользу нативного JavaScript

Наверное мало кого удивил такой шаг. Библиотека jQuery уже отжила свои лучшие годы, отдав пальму первенства таким фреймворкам, как Angular, Vue и React. Производительность работы последних, существенно выше, вследствие виртуального DOM. Благодаря прогрессу в нативном JavaScript, стало возможным отказаться от подключения библиотеки jQuery. Это означает, что сайты, созданные на Bootstrap 5, будут быстрее загружаться. Можно сказать, что отказ от использования jQuery, стало самым большим изменением за последние годы. Ведь все интерактивные компоненты Bootstrap-а работали на jQuery на протяжении восьми лет, разработчикам пришлось проделать огромную работу и все переписать заново.

2) Отказ от поддержки IE

Произошло еще очень важное и вполне ожидаемое событие - это отказ от поддержки Internet Explorer. Это произошло не только из-за мизерного количество пользователей (менее 1%), но и сам Windows уже давно не поддерживает свой браузер IE. Команда разработчиков отказалась от поддержки IE 10/11, что будет выражаться в отсутствии в разметке или в CSS коде, отдельных стилей для поддержки этих браузеров. Это поможет фронтенд-разработчикам не беспокоится о совместимости кода со старыми браузерами.

3) Добавление CSS переменных

Bootstrap 4 в основном использовал переменные от препроцессора Sass и несколько корневых CSS переменных для цвета и шрифтов. Но благодаря прекращению поддержки IE 10/11 (там css-переменные не работали), переменных стало значительно больше.

4) Усовершенствования в системе сеток

Помня о трудностях перехода с v3 (флоаты) на v4 (флексбоксы), команда сохранила основную часть системы сетки, пока оставив ее на флексбоксах. Вот, что изменилось:

• Добавился новый класс XXL для широкоформатных мониторов, более 1400 пикселей
• Вместо gutter ввели новые классы g* для указания отступов между ячейками

5) Собственные SVG иконки

В Bootstrap 4 были полностью удалены иконки, что вынуждало разработчиков добывать иконки на других ресурсах. В Bootstrap 5 появилась новая система SVG иконок, код которых можно легко копировать и вставлять в любой проект, даже если он не создан на Bootstrap.

6) Добавление и удаление классов

У Bootstrap 4 имеется около 1500 классов, в v5 некоторые из них будут удалены, а несколько новых классов наоборот добавлено. Список удаленных классов:

• form-row
• form-inline
• list-inline
• card-deck

Список добавленных классов:

• gx*- пространство между ячейками по горизонтали
• gy*- пространство между ячейками по вертикали
• g*- пространство между ячейками по горизонтали и вертикали
• row-cols-auto - автоматическое распределение колонок сетки

Остальные плюшки у Bootstrap 5

• Немного изменился внешний вид домашней страницы и логотип.
• Произошли улучшения в документации - появилось больше объяснений.
• Существенно расширили цветовую палитру, все цвета стали доступны в виде переменных Sass.
• Обновлена документация по формам и компонентам.
• Перешли с генератора статических сайтов Jekyll на Hugo.
• Появилось несколько вариантов для класса container, с добавляемой шириной экрана.
• Добавилось больше вариантов стилизации чекбоксов и радиокнопок.
• Возможность создания своих цветовых тем для продвинутых разработчиков, используя стартовый проект.
• Возможность создавать свои классы на основе SASS-переменных при помощи API утилит.

Итоги

Разработчики легендарного CSS-фреймворка Bootstrap не перестают нас радовать - многие верстальщики и web-программисты повседневно используют данный фреймворк в своей работе. По статистике, на данный момент, около 18 миллионов сайтов сделаны при помощи Bootstrap. По задумке разработчиков, Bootstrap 5 должен стать быстрее, проще и с более логичной документацией. Ожидается, что окончательная версия Bootstrap 5 выйдет весной 2021 года.