Bootstrap став настільки поширеним явищем у веб-розробці, що іноді ми навіть не розглядаємо інші варіанти. Однак, його використання не завжди є оптимальним рішенням. Давайте розглянемо кілька чудових альтернатив.
Коли ви аналізуєте вихідний код сучасного веб-сайту, велика ймовірність, що ви натрапите на Bootstrap. Ми настільки звикли до таких понять, як “container-fluid”, “row”, “col-md-6”, що складно уявити інший підхід до створення інтерфейсів. Тому, коли нам потрібно розпочати новий проєкт, рука автоматично тягнеться до Bootstrap. Проте, його популярність не означає, що він ідеально підходить для всіх задач і потреб.
Для проєктів, де критична є ефективність і розмір, завантаження повного набору CSS та JavaScript Bootstrap може призвести до значного збільшення розміру кінцевого файлу.
Ця стаття має на меті:
- Представити вам життєздатні альтернативи Bootstrap, які відрізняються від нього за підходом.
- Пояснити, чому вам варто розглянути ці альтернативи замість Bootstrap.
Пояснення є важливим, оскільки часто розробники навіть не усвідомлюють, що вони мають проблему або ускладнюють собі роботу, обираючи Bootstrap. Важливо зазначити, що це не критика Bootstrap. Він є хорошим інструментом, і я використовую його, коли це доцільно. Але, як незалежний розробник, я мушу думати про ефективність та відповідність інструментів конкретному завданню. Крім того, я не спеціалізуюся на UI/UX дизайні, тому можу дозволити собі гнучкість у підходах.
Отже, давайте розглянемо, які альтернативи ми маємо.
Сітка Flexbox
Замисліться: чи не є головною причиною використання Bootstrap його сіткова система? Звісно, потрібно було звикнути до класів на зразок “row”, “col-md-6” і т.д., але тепер це стало звичною частиною нашого мислення про макети.
Якщо бути чесними, все інше в Bootstrap – це додатковий клопіт. Існує безліч класів, які потрібно запам’ятати для форм, навігації, кнопок, таблиць та інших елементів. Якщо ви схожі на мене, то ви не завжди пам’ятаєте усі класи та їх призначення, і часто використовуєте Bootstrap тільки для сітки, створюючи решту CSS самостійно.
У такому випадку, можливо, вам краще скористатися Flexbox Grid.
Flexbox Grid, як випливає з назви, є системою сітки, побудованою на основі CSS властивості Flexbox. На відміну від прямого використання CSS, тут вся складність чудово абстрагована, і ви можете зосередитися на розташуванні елементів так, як вам потрібно. Найкраще те, що код та назви класів схожі на ті, що ви звикли бачити у Bootstrap 4, тому перехід між ними буде плавним. Ось, наприклад, як виглядає код для “простору навколо” у Flexbox Grid:
<div class="row around-xs">
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
<div class="col-xs-2">
<div class="box">
around
</div>
</div>
</div>
Мінімізований CSS-файл для цієї сітки важить всього 10.7 КБ, що дозволяє заощадити значну кількість КБ у кінцевому розмірі завантаження. Flexbox Grid став моїм фаворитом, оскільки мені не потрібно боротися з Bootstrap, щоб налаштувати його під себе. Мені подобається починати з базових HTML елементів і стилізувати їх самостійно, використовуючи Flexbox Grid там, де це необхідно.
Дізнатися більше про Flexbox онлайн.
PureCSS
Чи не було б чудово, якби Bootstrap був розбитий на модулі, і ви могли б імпортувати лише потрібні вам?
Що ж, PureCSS зробив саме це – це набір модулів для різних функціональних областей веб-сайту. Ви можете завантажити один або всі, але розмір завантаження не перевищить 3.7 КБ!
Так, ви не помилилися.
Усі модулі, об’єднані разом та стиснені gzip, важать лише 3.7 КБ, хоча окремо вони більші. Модуль сітки займає лише 0.8 КБ, а базовий – 1.0 КБ. Розробники PureCSS стверджують, що він був створений спеціально для мобільних пристроїв, тому кожен рядок CSS ретельно перевіряли на ефективність перед включенням.
Наприклад, якщо вам потрібні лише модулі сітки та форм, просто завантажте ці два (разом із базовим модулем), і ви отримаєте необхідний функціонал менше ніж за 3.4 КБ! Не потрібно завантажувати CSS для кнопок, таблиць і меню, якщо ви не збираєтесь їх використовувати.
PureCSS має власні класи, і отриманий код не є імітацією Bootstrap:
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Lorem Ipsum</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Dolor Sit Amet</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Proident laborum</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="l-box">
<h3>Praesent consectetur</h3>
</div>
</div>
</div>
Ви помітите, що 12-колонної сітки тут немає. У PureCSS є система, яка визначає ширину стовпчика. Отже, “pure-u-lg-1-4” означає, що цей елемент має займати 1/4, або 25% доступної ширини на великих екранах. Також доступні ширини, кратні 1/5.
Загалом, PureCSS – це безкоштовний інструмент, який ви можете використовувати за потреби. Однак, його використання вимагає певного навчання, оскільки вам потрібно освоїти новий спосіб роботи.
PureCSS також має власні стилі за замовчуванням, тож у цьому сенсі він не надто відрізняється від Bootstrap.
Zimit
Фреймворк Zimit дещо відрізняється від інших у цьому списку. Він призначений для створення UI, зокрема для розробки макетів.
Іноді вам потрібно розробити інтерфейс для демонстрації функціоналу продукту. Звичайно, найкращим варіантом було б залучити UI/UX дизайнера та створити макет за допомогою одного зі спеціалізованих інструментів (Moqups, Balsamiq тощо). В результаті ви отримаєте макет, ідеальний до пікселя, з продуманою кольоровою схемою, готовий до обговорення, оглядів та коментарів.
Але реальність не завжди ідеальна. Часто ви самі виконуєте всі ролі, і тоді вам потрібен інструмент, який:
- Дозволяє кодувати в HTML/CSS.
- Є легким.
- Має велику колекцію основних компонентів.
- Має зрозумілу та послідовну стилізацію.
- Має вигляд “сірого” макета.
- Легкий у вивченні.
- Має вбудований CSS препроцесор.
Zimit відповідає усім цим критеріям. Він займає лише 84 КБ і має широкий вибір компонентів. Ось декілька прикладів, які мене вразили:
Деревовидне меню
Хлібні крихти
Вкладки
Є ще багато цікавого. Перегляньте їх тут.
Розглянемо код. Ось як можна використовувати сітку в Zimit:
<div class="row">
<div class="c12">
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
<div class="row">
<div class="c4">4 columns</div>
<div class="c4">4 columns</div>
</div>
</div>
</div>
Літера “c” означає “стовпець”, тому “c4” – це стовпець, який займає 4 одиниці (сітка складається з 12, як і в Bootstrap). Дуже схоже на Bootstrap та інтуїтивно зрозуміло.
Загалом, Zimit – це комплексний фреймворк для швидкої розробки прототипів UI, який виглядає добре та реагує на дії користувача. Він кращий за Bootstrap для прототипування, оскільки Bootstrap значно більший за розміром, і кінцевий дизайн може здаватися типовим.
HTML KickStart
Швидкість розробки є критичною в більшості проєктів. Найбільшою перешкодою на шляху прискорення веб-розробки є розробка інтерфейсу, а найбільшою “затримкою” в цій області є створення елегантних інтерактивних компонентів. Оскільки існує безліч варіантів поведінки компонента та різних розмірів екранів, якими потрібно керувати, розробка та управління компонентами може перетворитися на кошмар для розробника.
HTML KickStart пропонує альтернативу.
Простіше кажучи, це набір елегантних компонентів, які можна просто додати до проєкту, що значно скоротить час розробки. Ось кілька чудових прикладів:
Випадаючий список
Кнопки
Вкладки (центровані та з іконками)
Materialize
Якщо вам подобається Bootstrap за те, що він має готові рішення для всіх поширених проблем веб-дизайну, але ви віддаєте перевагу стилю Material Design, вам варто спробувати Materialize.
Materialize в багатьох аспектах схожий на Bootstrap: 12-точкова сітка, зміщення та знайомі компоненти, такі як форми, картки і т.д. Проте він має деякі переваги.
Push/Pull
Функція push/pull у Materialize CSS дозволяє змінювати порядок стовпців, що нагадує CSS Grid.
<div class="row">
<div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
<div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
</div>
В результаті отримаємо:
Ви помітите, що стовпці помінялися місцями, що, як правило, недоступно у традиційному CSS на основі Bootstrap.
JavaScript
У Materialize є чимало цікавих JavaScript функцій та ефектів. Спливаючі підказки, Toasts (повідомлення, схожі на Android), Parallex, Pushpin – лише деякі з них. Одним з найбільш вражаючих є FeatureDiscovery, який дозволяє виділити елемент на сторінці під час певної події, щоб привернути до нього увагу користувача. Перейдіть на сторінку Materialize, щоб побачити це на власні очі.
Загалом, Materialize є відмінною альтернативою Bootstrap, особливо для тих, хто хоче використовувати Material Design.
Висновок
Bootstrap став синонімом адаптивного дизайну. Саме він популяризував концепцію “mobile-first design” і показав, як це можна реалізувати. Однак, хоча Bootstrap ефективний в багатьох ситуаціях, іноді цього недостатньо. Якщо ви відчуваєте, що Bootstrap обмежує ваші можливості і ваші потреби є унікальними, то вам можуть підійти альтернативи, представлені у цій статті. 🙂