Нововведення Bootstrap 5

Джерело фото: https://goo.su/wvGRJ

Bootstrap - найпопулярніший у світі CSS-фреймворк з відкритим вихідним кодом, розроблений командою Twitter. До його нової п'ятої версії внесено відразу кілька критично важливих змін.

До випуску Bootstrap 5 пройшло кілька альфа- і бета-версій. У результаті нова версія зазнала серйозних змін, включаючи відмову від підтримки Internet Explorer (IE) та залежності jQuery.

1. Відмова від jQuery

Більше Bootstrap не підтримує бібліотеку jQuery. Натомість команда розробників покращила підтримку бібліотеки JavaScript. Загалом залежність від jQuery не була в Bootstrap чимось поганим. Навпаки, поява jQuery радикально змінила спосіб використання JavaScript. Це спростило написання завдань на JavaScript, які в іншому випадку вимагали багато рядків коду.

Попри ці переваги команда вирішила завершити підтримку. Причина: зниження розміру вихідних файлів та зменшення часу завантаження сторінки, що робить Bootstrap перспективним інструментом. Вихідний файл зменшився на 85 КБ, що дуже важливо, адже Google вважає, що фактор часу завантаження сторінки для мобільних пристроїв є дуже важливим. За потреби jQuery все одно можна використовувати. Всі плагіни JavaScript залишаються доступними.

2. Настроювані властивості CSS

Від Internet Explorer відмовилися, а значить, тепер розробники можуть використовувати властивості CSS, що настроюються, як хочуть і коли хочуть. Проблема IE була в тому, що він не підтримує кастомні CSS. Відповідно, CSS custom properties роблять CSS більш гнучким та програмованим. Для запобігання появі конфліктів із сторонніми CSS використовується префікс -bs.

Усього доступно два типи змінних: кореневі та компонентні. Що стосується першого класу, то доступ до них можна отримати скрізь, де завантажено Bootstrap CSS. Ці змінні знаходяться у файлі root.scss і є частиною скомпілованих файлів dist. Що ж до другого класу, ці змінні локальні в окремих компонентах. Вони допомагають уникнути випадкового успадкування стилів у таких компонентах, як вкладені таблиці.

3. Поліпшена система сіток (Grid)

Оскільки при переході з 3 на 4 версію виникли деякі проблеми, v5 зберігає більшу частину системи сіток, а не повністю оновлює її. Ось деякі зміни:

Замість gutter запровадили нові класи g* для вказівки відступів між осередками.
Також було включено класи вертикального інтервалу.
Стовпці більше не мають дефолтного значення position: relative.

4. Поліпшена документація

Розробники додали більше інформації про фреймворк, особливо про його налаштування. У п'ятій версії покращений зовнішній вигляд та вдосконалене налаштування. Ймовірно, сайт, де використовується Bootstrap 5, не так легко буде визначити, що він застосовує цю технологію.

Розробники додали більше гнучкості в налаштування, щоб сайти не були схожими один на одного. Тему четвертої версії доопрацювали, додали контент та фрагменти коду для розробки поверх Sass (популярний препроцесор CSS). Розширена палітра кольорів, користуватися якою тепер простіше. Зроблено додаткову роботу з покращення колірного розмаїття.

5. Управління формою

Розробники покращили елементи управління формою, input groups та інші компоненти. У попередній версії елементи керування формою використовувалися як доповнення до дефолтних інструментів браузера. V5 це окрема група елементів управління, включаючи перемикачі, прапорці і т.п. Зроблено це для того, щоб надати їм однакового вигляду та поведінки в різних браузерах. Нові елементи більше не мають непотрібної розмітки, розробники скористалися стандартними та логічними функціями.

6. Додавання API-утиліт

Тут розробники Bootstrap не оригінальні, бібліотеки утиліт додали раніше, наприклад, творці CSS-бібліотеки Tailwind CSS. Команда Bootstrap додала можливість використання утиліт ще у 4 версії, там це було організовано з використанням глобальних класів $enable-*. У новій версії розробники вирішили перейти на API, нову мову та синтаксис у Sass. Все це дає можливість створювати власні утиліти, зберігаючи при цьому можливість видаляти або змінювати дефолтні. Для покращення організації процесу роботи деякі утиліти з 4 версії перемістили до Helpers.

7. Нова бібліотека іконок

Ще одне приємне нововведення — додавання відкритої бібліотеки іконок, що містить понад 1300 елементів. Оскільки бібліотека відкрита, користувачі можуть модифікувати іконки на свій смак. Оскільки це зображення SVG, їх можна швидко масштабувати та модифікувати, а також стилізувати за допомогою CSS.

Дещо ще:

Окрім зазначених нововведень, команда представила ще кілька:

Новий логотип. Іронізуючи над цим досягненням, самі розробники помістили новинку на перше місце у списку.
Новий компонент offcanvas. Він поставляється з фоном, body scroll і розміщенням. Компоненти offcanvas можна розмістити з різних сторін від viewport. Налаштовуються параметри за допомогою атрибутів даних або JavaScript API.
.Accordion, заснований на .card, замінили реалізацією .accordion без .card. Новинка все ж таки використовує плагін Collapse JavaScript, але з кастомними HTML і CSS.

Завантажити Bootstrap 5 можна з офіційної сторінки фреймворку.

Джерело: https://goo.su/ORyfZmB
Переклад: Аліна Берестень
Адміністратор: Дмитро Берестень