Нові можливості в Bootstrap 4 Alpha

15

Від автора: 19 серпня на світ божий вийшла альфа версія Bootstrap 4, рівно через чотири роки після першого офіційного релізу Bootstrap v1 (Збіг, чи не правда?). Вічно популярний front-end фреймворк знайшов закінчені риси, і я, як великий шанувальник Bootstrap, дуже схвильований і чекаю не дочекаюся докласти руки до нових можливостей!

Нові можливості в Bootstrap 4 Alpha

Через цілий рік розробки, 1100 комітів і 12000 рядків-правок коду; з’явилося так багато функцій, з якими не терпиться попрацювати. Щоб заощадити ваш час від прочитання лода змін, я склав список нових можливостей, які здалися мені цікавими.

Новий модуль скидання «Reboot»

Почнемо звідти, звідки починають все фреймворки, з модуля скидання. Новий модуль reboot побудований на традиційному normalize.css, але всі загальні селектори і стилі скидання переїхали в окремий scss файл. Також ви можете помітити нову фішку, встановивши стандартний box-sizing: border-box для тега html – це дозволить успадковувати дане властивість всіх дочірніх елементів.

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

Такий підхід дозволяє краще змінити параметри, якщо це буде потрібно, а не використовувати !important.
За трюк спасибі сказати можна Jon Neal, а за докладний розбір даного методу сайту CSS-Tricks.

Rem і Em рулять!

На догоду оптимізації Bootstrap v4 позбувся підтримки IE8 і маси CSS3 полифиллов. Починаючи з IE9+, тепер він підтримує інші, більш улюблені всіма CSS модулі. Одним з них стали rem одиниці (root em), вони обчислюють розмір шрифту щодо кореневого елемента (html).

Rem одиниці допоможуть нам по-справжньому вникнути в адаптивну типографіку. Так як всі розміри шрифту безпосередньо залежать від нашого кореневого елемента, ми можемо створювати медіа запити для зміни розміру шрифту під різні розміри екрану. Комбінуємо це з новим миксином сітки для різних розмірів екрану і вуаля! Нижче приклад зміни розміру шрифту на нашому сайті при перегляді на дуже маленьких екранах:

html{
font-size:16px;
}
// створюємо медіа запит для дуже малих розмірів екрану (0 — 34em)
@include media-breakpoint-up(xs) {
html{
font-size:18px;
}
}

Детальніше можете прочитати в статті Kezz Bracey Докладне керівництво: Коли використовувати Em, а коли Rem.

Я вибираю Flexbox

Прямо з коробки Bootstrap v4 не підтримує Flexbox, замість нього використовують стандартні обтікання або табличний метод відображення. Це зроблено для підтримки IE9+, але якщо ви можете відмовитися і підтримувати тільки IE10+, то можна підключити Flexbox до вашого проекту. Зробити це можна, змінивши логічне значення змінної у файлі _variables.scss; після чого ваш скомпільований css буде містити Flexbox стилі. Flexbox застосовується не тільки з-за сітки, а також з інших елементів, у тому числі нового компонента карток, груп введення і медіа компонентів.

Приклад

Перейдемо до прикладу, де нам може знадобитися Flexbox. Дуже часто у мене є набір лінійних колонок (як на картинці), де вміст однієї колонки збільшує висоту і інших колонок теж. Класична CSS дилема. Одна з переваг Flexbox в тому, що ми можемо змусити всі колонки мати однакову висоту. Не потрібно писати додатковий CSS-код!

Без Flexbox

Нові можливості в Bootstrap 4 Alpha

З Flexbox

Нові можливості в Bootstrap 4 Alpha

SCSS «узурпував» LESS, так само, як і препроцесор CSS був обраний Bootstrap v4. Весь код CSS був перероблений в SCSS, причому без офіційного LESS порту на момент написання статті. Деякі причини цього Марк пояснює в твіттері.

Якщо ви великий шанувальник оригінального LESS, то Марк просив про деякої допомоги у створенні і обслуговуванні LESS порту.

Картки, уніфікований елемент інтерфейсу

З Bootstrap v4 були видалені класичні компоненти well, panel і thumbnail. На їх місце прийшов новий компонент: картки!

Нові можливості в Bootstrap 4 Alpha

Новий елемент картка має схожі частини від панелей, такі як заголовки, хедеры і футеры, і все це обгорнуте в гнучкий контейнер.

Нові можливості в Bootstrap 4 Alpha

І ще більше:

Накладення поверх зображення і фон

Нові можливості в Bootstrap 4 Alpha

Можна встановити в якості фону картинку і накласти її поверх тексту або іншого контенту. Все це робиться без єдиної зайвої рядка CSS, потрібно тільки додати в картку:

Нові можливості в Bootstrap 4 Alpha

Клас card-inverse робить текст білим, дозволяючи встановити більш темний фон, якщо це потрібно. Щодо фонів, також можна використовувати і стандартні фонові кольори. Приміром, card-primary встановить первинний колір для картки і т. д. і т. п.

Згруповані картки

Нові можливості в Bootstrap 4 Alpha

Також крім стандартної сітки з відступами, ви знайдете опцію групування карток без внутрішніх відступів між ними і як встановити блокам одну висоту. За замовчуванням це можна зробити за допомогою display: table table-layout: fixed, але якщо у вас є Flexbox, то можна і за допомогою display: flex.

Сітка – цегляна кладка

Нові можливості в Bootstrap 4 Alpha

Картки йдуть у вигляді колонок цеглинок, що дозволяє підсунути блоки ближче один до одного. Ця опція не підтримується в IE9 – необхідний IE10 і вище!

Ще більше службових класів?!

У попередніх версіях Bootstrap було багато класів з назвою «службовий клас», вони використовувалися для швидкого і легкого зміни вмісту, не чіпаючи його специфічні стилі. Зміни, як правило, обмежувалися обтеканиями (pull-left, pull-right), кольором (text-primary і т. д.), клиарфиксами (.clearfix) та іншими.

В альфі Bootstrap v4 ми отримали доступ до цілої маси нових службових класів, пов’язаних з паддингами і маргинами. Можливо, це і спірне крок, він дозволить користувачам Bootstrap v4 швидко натиснути на одну кнопку і вирівняти вміст всередині з однаковим кроком. Деякі подумають, що це відхід від вбудованих стилів, але ці класи дозволяють швидко і рівномірно стилізувати компоненти, не створюючи для цього окремого селектора.

Службові класи padding та margin задаються з множинним значенням змінної spacer. Наприклад:

// $spacer — sass змінна, що дорівнює 1rem або 16px
.m-a-0 { margin: 0 !important; }
.m-a { margin: $spacer !important; }
.m-a-md { margin: ($spacer * 1.5) !important; }
.m-a-lg { margin: ($spacer * 3) !important; }

У коді .m-a означає зовнішній відступ по всіх сторонах. Для внутрішніх відступів також існують класи для окремих сторін, осей, розмірів (з допомогою -0, -md і lg). Нижче приклад парочки інших класів:

// стандартний паддінґ на всі сторони
.p-a { padding: $spacer !important; }
// стандартний паддінґ зверху
.p-t { padding-top: $spacer-y !important; }
// стандартний паддінґ праворуч
.p-r { padding-right: $spacer-x !important; }
// стандартний паддінґ знизу
.p-b { padding-bottom: $spacer-y !important; }
// стандартний паддінґ зліва
.p-l { padding-left: $spacer-x !important; }
// стандартний паддінґ для осі Х (ліво і право)
.p-x { padding-right: $spacer-x !important; padding-left: $spacer-x !important; }
// стандартний паддінґ для осі У (верх і низ)
.p-y { padding-top: $spacer-y !important; padding-bottom: $spacer-y !important; }

Основна ідея полягає в зниженні кількості вузькоспеціалізованих користувальницьких класів, які створюються для того, щоб посунути контент, а не додавати їх в якості методів вирівнювання вмісту.

Я перекинувся парою слів з Марком Отто з приводу використання цих класів (@mdo співзасновник Bootstrap) на їх сайті public Slack channel, і ось що він сказав:

«Ми зрозуміли, що нам без них не обійтися, занадто часто перевизначаються значення за замовчуванням для багатьох компонентів. Margin і padding здається найбільш часто змінюють своє значення (разом з кольором і шрифтів)»

Також гідно згадки

Існують буквально ще сотні нових можливостей і оновлення існуючого коду, занадто багато для одного поста. Розповім про ще парочку, які не увійшли до основного списку, але про них варто згадати.

Нова документація

Документація Bootstrap v4 оновилася. Трохи змінилася структура, за якої функції розбивалися на макети, контент і компоненти. Що дійсно круто нової документації, так це те, що кожен компонент тепер на окремій сторінці. Це полегшує їх пошук, а також можна одразу перевірити адаптивність, погравшись з розміром вікна браузера.

Новий рівень сітки

У Bootstrap 4 доданий новий рівень сітки для маленьких екранів (480px в ширину), цей розмір екрану отримав ім’я класу попереднього самого маленького екрану.col-xs-XX). При цьому всі рівні сітки зрушилися на один вгору, тим самим створюючи новий найбільший рівень .col-xl-XX.

Як обговорювалося вище в статті про rem і em, команда Bootstrap додала нові міксини для швидкого створення нових розмірів екрану серед існуючих. Для створення використовується наступний синтаксис:

// Creates a media query: @media (min-width)
@include media-breakpoint-up(xs) { … }
@include media-breakpoint-up(sm) { … }
@include media-breakpoint-up(md) { … }
@include media-breakpoint-up(lg) { … }
@include media-breakpoint-up(xl) { … }
// Creates a media query: @media (max-width)
@include media-breakpoint-down(xs) { … }
@include media-breakpoint-down(sm) { … }
@include media-breakpoint-down(md) { … }
@include media-breakpoint-down(lg) { … }
@include media-breakpoint-down(xl) { … }

Більше ніяких іконок

Іконки були видалені з білду; в документацію Bootstrap додали інструкції, як підключити сторонні пакети іконок, як Font Awesome і Octicons.

JavaScript переписаний

Всі плагіни JavaScript були переписані в ES6 під останню специфікацію. Ви могли помітити, що деякі плагіни видалені (як affix плагін), вони все ще переписуються, до них додаються нові бібліотеки.

І що далі?

Ось такий у мене вийшов список нових крутих функцій в Bootstrap альфі. Якщо захочете повністю вивчити лог змін, погляньте на ГитХаб @mdo pull request.

Впевнений, ще буде купа змін, вони досі робляться, команда працює на знос. Плани розвитку включають такі етапи:

Ще парочка альфа релізів для вирішення питань, піднятих співтовариством

Два бета релізу по завершенні всіх функцій

Два реліз-кандидата, щоб переконатися, що все відточено.

Не сказано, коли все це буде випущено. Так само як і з попередніми билдами, все вийде, коли буде готова бібліотека. А зараз можете повивчати Bootstrap і допомогти відстежити проблеми, про баги можна писати на bug tracker!