Bootstrap є всюди, але це не завжди правильний інструмент для роботи. Ось кілька чудових альтернатив!
Якщо ви сьогодні навмання перевіряєте вихідний код інтерфейсу веб-сайту, швидше за все, ви знайдете під ним Bootstrap. Ми всі настільки звикли до таких понять, як контейнер-рідина, рядок, стовпець-см-6 тощо, що важко уявити, що будь-який інший стиль розробки інтерфейсу взагалі можливий. І тому, коли нам потрібно створити наступний проект, ми несвідомо тягнемося до Bootstrap. Тим не менш, популярність не робить Bootstrap добре підходить для всіх проектів і потреб.
Фактично, для справді економних інтерфейсів, завантажуючи все Завантажувальний CSS і JS може спричинити значне роздуття.
Ця стаття має дві мети:
Я вважаю, що частина пояснення дуже важлива, тому що в більшості випадків люди навіть не усвідомлюють, що у них є проблема або що вони ускладнюють собі роботу, вибираючи Bootstrap. Нарешті, зауважте, що це ні в якому разі не повідомлення проти Bootstrap. Я люблю Bootstrap 4 і використовую його, коли можу. Але тоді я індивідуальний розробник, який повинен думати про використання найпопулярнішого рішення; Крім того, я сам по собі не розробник інтерфейсу користувача, тому я не надто багато турбуюся, створюючи свої інтерфейси.
І з цим давайте подивимось, які альтернативи ми маємо.
Сітка Flexbox
Подумайте про це на хвилину: головною причиною, чому ви почали використовувати Bootstrap і досі використовуєте його, є його система сітки. Звичайно, знадобилося трохи звикнути до класів row, col-md-6 тощо, але тепер стало другою натурою думати про макет у термінах рядків, стовпців, зсувів тощо.
І якщо ви будете чесними з собою, ви побачите, що все інше в Bootstrap — це трохи клопітка робота. Існує безліч класів, які потрібно запам’ятати, незалежно від того, чи працюєте ви з формами, навігацією, кнопками, таблицями чи чимось іншим. Якщо ви схожі на мене, ви ще не звикли до всіх класів і того, що вони роблять, і часто використовуєте Bootstrap лише для сітки, а всі інші CSS пишете самі.
Якщо так, ви могли б зробити набагато краще з Сітка Flexbox.
Flexbox Grid, як випливає з назви, є сітковою системою, заснованою на CSS Flexbox властивості. Однак, на відміну від техніки CSS, уся складність чудово абстрагована, тому ви зосереджуєтеся лише на розміщенні елементів так, як вам потрібно. Найкраща частина полягає в тому, що весь код і назви класів імітують те, що ви хотіли б мати в Bootstrap 4, а це означає, що перемикання між цими двома інструментами вимагає нульового психічного тертя. Наприклад, ось як виглядає код «простір навколо» у сітці Flexbox:
<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, щоб повністю налаштувати його. Мені подобається починати з ванільних елементів і стилізувати їх самостійно, використовуючи сітку Flexbox, де мені потрібно.
вчитися Flexbox тут, онлайн.
PureCSS
Чи не було б добре, якби Bootstrap було розділено на модулі, і ви могли б імпортувати лише той модуль, який вам потрібен?
Ну, PureCSS пішов вперед і зробив саме це — це набір модулів, що охоплюють різні функціональні області веб-сайту. Ви можете завантажити один або всі, але розмір завантаження не перевищить 3,7 Кб!
Так, ви правильно прочитали.
Усі модулі, об’єднані разом і стиснуті в gzip, мають розмір 3,7 КБ, хоча окремо вони мають більший розмір. Модуль сітки має лише 0,8 КБ, а модуль Base — 1,0 КБ. Команда, яка стоїть за PureCSS, каже, що його було створено виключно з урахуванням мобільних пристроїв, тому кожен рядок CSS ретельно перевірявся на ефективність перед тим, як його включити.
Скажімо, вам потрібен лише модуль сітки та форм. Ну, просто завантажте ці два (разом із модулем Base), і все буде готово менш ніж за 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 — це вільний і дивовижний інструмент CSS (фреймворк?), який ви можете вибирати за потреби. Тим не менш, це приходить із достатньою кількістю бай-іну та кривої навчання, оскільки вам потрібно вивчити новий (трохи інший) спосіб робити речі.
PureCSS також має власні класи та стиль за замовчуванням, тому в цьому він не надто відрізняється від Bootstrap.
Зіміт
The Зіміт фреймворк є начебто диваком у цьому списку. Так, це структура для створення інтерфейсів користувача, але вона спрямована на певні типи інтерфейсів користувача: макети.
Бувають випадки, коли вам потрібно розробити інтерфейс для демонстрації функціонування продукту. Ідеальним способом зробити це, звичайно, було б залучити дизайнера/розробника інтерфейсу користувача та створити макети за допомогою одного з передових інструментів каркасної розробки (Moqups, Blasmic тощо, приходять на думку). Сторінки будуть ідеальними для пікселів, колірна схема буде гладкою та добре підібраною, а сторінки будуть відкритими для участі, оглядів, коментарів тощо.
Але реальне життя не ідеальне, і часто ви єдиний чоловік на роботі, і ви повинні носити всі головні убори та виконувати роботу. У такі моменти вам потрібна структура, яка:
- Дозволяє кодувати в HTML/CSS
- Має легку вагу
- Має велику колекцію основних компонентів
- Має пристойний і послідовний стиль мови
- По можливості нагадує «сірий» тон каркасного дизайну
- Легко навчитися
- Має вбудований препроцесор CSS
Зіміт перевіряє всі ці поля. Він має розмір лише 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» означає стовпець, який охоплює чотири одиниці (розмір сітки — 12, як у Bootstrap). Дуже схожий на Bootstrap і дуже інтуїтивно зрозумілий, на мій погляд.
Загалом, Zimit — це повна та проста структура для розробки прототипів інтерфейсу користувача, які швидко реагують і добре виглядають. Це краще, ніж Bootstrap (щодо створення прототипів), тому що Bootstrap є набагато більшим завантаженням, а кінцевий дизайн, ну, липкий.
HTML KickStart
У більшості проектів, які ви створюєте, швидкість має вирішальне значення. Найбільшою перешкодою для прискорення веб-розробки є інтерфейсна частина, а найбільшою «затримкою» у інтерфейсній розробці є необхідність кодувати елегантні інтерактивні компоненти. Оскільки існує багато способів, якими може поводитися компонент, і існує багато розмірів екрана, якими потрібно керувати, кодування та керування компонентами може стати кошмаром для розробника.
HTML KickStart пропонує альтернативу.
Простіше кажучи; це набір справді елегантних компонентів, які ви можете просто додати у свої проекти та значно скоротити час розробки. Ось кілька гарних компонентів, які я знайшов:
спадний список
кнопки
Вкладки (по центру та з іконками)
Матеріалізуватися
Якщо вам подобається Bootstrap за те, що він має готове рішення для всіх поширених проблем веб-дизайну, але ви прихильник стилю Material design, вам варто спробувати Матеріалізуватися.
Materialize здебільшого схожий на Bootstrap — 12-точкова сітка, зсуви та знайомі компоненти, як-от форми, картки тощо. Однак у нього є певні переваги, які можуть сподобатися багатьом.
Двотактний
Функція 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, який фактично дозволяє вам виділяти елемент на сторінці під час певної події (скажімо, натискання кнопки), щоб привернути увагу користувача до цього елемента. Важко повністю описати це словами, тому перейдіть на сторінку https://materializecss.com/feature-discovery.html, щоб зрозуміти, що я маю на увазі.
Загалом, Materialize є чудовою альтернативою Bootstrap або для тих, хто хоче прийняти повнофункціональну структуру Material CSS.
Висновок
Bootstrap є синонімом адаптивного дизайну. Саме Bootstrap популяризував термін «mobile-first design» і показав, як це можна зробити. Але хоча Bootstrap виконує роботу більшу частину часу, просто виконати роботу не завжди достатньо. Якщо ви відчуваєте, що Bootstrap обмежує вас і що ваші потреби є особливими, вам допоможе один із наведених тут варіантів. 🙂