Інтерфейс користувача (User Interface) — це те, з чим взаємодіє користувач на будь-якому сайті. Дуже важливо, щоб ваш сайт виглядав не лише естетично та функціонально, але й щоб інтерфейс був інтуїтивно зрозумілим. Високопродуктивний, відгучливий і візуально приємний інтерфейс користувача є обов'язковим для успішного веб-сайту.
Є безліч інструментів для створення адаптивного та відгучливого веб-сайту, за допомогою яких можна легко розмістити основні елементи інтерфейсу користувача. Саме тому вибір правильного інструменту для верстки інтерфейсу користувача є важливим етапом розробки, а також визначає простоту його створення.
У цій статті я вирішила порівняти два дуже популярні інструменти для створення сітки макетів — CSS Grid і Bootstrap.
Але спочатку давайте трохи розберемо, що це таке і як працює.
Що таке CSS Grid
CSS Grid — це двовимірна система сітки, яка дуже зручна у використанні при верстці макетів та великих сегментів сторінки. Сітка складається з горизонтальних і вертикальних ліній, що утворюють рядки та стовпці, як у таблиці.
На відміну від Flexbox, Grid дозволяє працювати відразу в двох осях, нам не потрібно обертати окремі блоки в ще один блок-контейнер для того, щоб змінювати напрямок осі, як це робиться в Flexbox. Використання CSS Grid для розміщення елементів інтерфейсу користувача допомагає точно розмістити їх, що корисно для реалізації адаптивного дизайну сайту. CSS Grid використовує для розташування елементів пікселі, фракції та відсотки, що дає можливість дуже просто адаптувати ту саму веб-сторінку відповідно до розміру екрана різних пристроїв, наприклад, телефонів, планшетів та ноутбуків.
CSS Grid відіграє важливу роль у створенні макетів веб-сторінок, які сприяють швидкому відгуку. Це один з найзручніших інструментів для створення кросплатформенних сайтів, що також полегшує верстку привабливих сторінок, які дуже подобаються користувачам.
Як працює CSS Grid?
Як уже говорилося вище, CSS Grid ділить простір на дві осі, що дозволяє створювати потрібну кількість рядків і стовпців, які можна зафіксувати за шириною та висотою за допомогою пікселів або вказати частку простору за допомогою фракцій (1fr, 2fr..).
Поняття фракції з'явилося саме з впровадженням Grid-ів у CSS і часто використовується для створення адаптивних та кросплатформових макетів.
Давайте розберемо такий приклад стандартного макета для сторінок:
На Рис.1 я зверстала базовий макет для веб-сторінки, де є Header, Navigation, Main, Aside, Footer — основні семантичні теги.
Ось як виглядатиме в цьому випадку мій HTML:
<div class="wrap">
<header class="header">THIS IS HEADER</header>
<nav class="nav">THIS IS NAVIGATION</nav>
<main class="main">THIS IS MAIN</main>
<aside class="aside">THIS IS ASIDE</aside>
<footer class="footer">THIS IS FOOTER</footer>
</div>І CSS з використанням гнучкої сітки:
body {
margin: 0;
}
.wrap {
font-size: 40px;
color: white;
display: grid;
grid-template-columns: 300px 1fr 200px;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
.header {
background-color: red;
grid-area: header;
}
.nav {
background-color: yellow;
grid-area: nav;
}
.main {
background-color: blueviolet;
grid-area: main;
}
.aside {
background-color: green;
grid-area: aside;
}
.footer {
background-color: blue;
grid-area: footer;
}Давайте розберемо, що відбувається у коді вище:
- Насамперед ми дали батьківському контейнеру властивість display: grid.
- Потім за допомогою властивості grid-template-columns: 300px 1fr 200px; визначила, що на сторінці у нас буде 3 колонки (300px, auto, 200px відповідно).
- Властивістю grid-template-areas було вказано, як саме повинні розташовуватися елементи щодо сітки.
Зверніть увагу, що нам не довелося обертати теги nav, main, aside в ще один окремий блок, щоб розмістити їх в один рядок, і це дозволило нам свого роду писати код коротко і зрозуміло. Також величезною перевагою такої сітки є те, що осередки розтягуються автоматично, залежно від контенту, що лежить у контейнері (наприклад, як у main).
Що таке Bootstrap?
Bootstrap — це безкоштовний фреймворк, що містить набір інструментів HTML, CSS та JavaScript, які використовуються для створення веб-сайтів. Це гнучка система, яка забезпечує крос-браузерну сумісність та дозволяє швидко верстати адаптивні дизайни. У цій статті ми поговоримо тільки про Bootstrap Grid, щоб зрозуміти, у чому різниця між двома видами сіток.
Bootstrap має адаптивну сітку з можливістю налаштовувати її під потрібні розміри. Він пропонує дизайн, орієнтований на мобільні пристрої, що дозволяє адаптувати єдиний код для декількох пристроїв, таких як телефони, планшети та настільні комп'ютери. Подібно до Grid CSS, Bootstrap також дає можливість працювати відразу в двох осях — горизонтальній і вертикальній, що утворюють рядки і стовпці.
Як працює Bootstrap Grid
На відміну від CSS Grid, Bootstrap Grid елементи стовпців (з класом col) розташовуються всередині кожного рядка (з класом row), таким чином створюючи горизонтальну групу стовпців.
Стовпці повинні бути безпосередньо дочірніми елементами відповідних рядків, у які вони містяться. В одному рядку максимальна кількість стовпців має бути 12, не більше та не менше.
Нижче представлений HTML-код, в стилі я лише підключила одне посилання з документації Bootstrap.
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div class="col">10</div>
<div class="col">11</div>
<div class="col">12</div>
</div>Bootstrap пропонує чотири рівні класів, а саме xs, sm, md і lg, які класифікуються таким чином, залежно від розміру пристрою:
- xs — для телефонів розміром <76px.
- sm — для планшетів розміром > 768px та < 992px
- md — для десктопів розміром > 992px та < 1200px
- lg — для великих екранів розміром > 1200px
Ця класифікація за розміром пристрою допомагає реалізувати адаптивність веб-сайту для пристроїв різних розмірів, щоб забезпечити інтерфейс користувача з точністю до пікселя.
Давайте розглянемо приклад створення такої ж сторінки, як ми робили вище (Рис.1), цього разу за допомогою Bootstrap.
<div class="row">
<div class="col-12 header">THIS IS HEADER</div>
</div>
<div class="row">
<div class="col-3 nav">THIS IS NAVIGATION</div>
<div class="col-7 main">THIS IS MAIN</div>
<div class="col-2 aside">THIS IS ASIDE</div>
</div>
<div class="row">
<div class="col-12 footer">THIS IS FOOTER</div>
</div>А також цей же макет, тільки вже адаптований до мобільної (Рис. 3) версії та планшетної (Рис. 4):
<div class="row">
<div class="col-12 header">THIS IS HEADER</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 navg">THIS IS NAV</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-7 main">THIS IS MAIN THIS IS MAIN THIS IS MAIN</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-2 aside">THIS IS ASIDE</div>
</div>
<div class="row">
<div class="col-12 footer">THIS IS FOOTER</div>
</div>На зображенні нижче видно, як блоки перебудовуються і дуже просто адаптуються до розміру екрана без зайвих витрат зусиль на написання додаткового CSS і без використання медіа-запитів.
CSS Grid проти Bootstrap
Ось порівняння цих двох систем сіток:
Критерії | CSS Grid | Bootstrap |
Розмітка | Має зрозумілішу, читабельнішу розмітку. Макет сітки не визначається HTML, а виконується в CSS. | Потрібний div тег для кожного рядка і для кожного стовпця з унікальним класом. Це робить код довшим та іноді менш зрозумілим. |
Кількість стовпців | Пропонує гнучке компонування без обмежень по стовпцях. Можна ставити будь-яку кількість стовпців. | Оскільки сітка розділена на 12 стовпців, будь-який макет, у якому не 12 стовпців, важко реалізувати. |
Адаптивність | Навіть якщо HTML залишиться незмінним, просто додайте різні медіа-запити в CSS і визначте макет сітки для кожного елемента HTML. | Можна визначити макет області контенту індивідуально для різних розмірів пристроїв, використовуючи певні класи. Але це робить розмітку більш громіздкою, тому що збільшує кількість класів div. |
Швидкість завантаження сторінки | Добре підтримується більшістю браузерів та версій. Швидкість завантаження сторінки вища. | Файли стилів повинні бути завантажені, що уповільнює швидкість завантаження сторінки. |
Що краще?
Щоб створити веб-додаток, який радуватиме клієнтів, важливо забезпечити правильну візуальну привабливість на різних платформах та пристроях.
- Bootstrap пропонує більше, ніж систему сіток, і є набір інструментів для зовнішнього інтерфейсу, здатний створювати складні адаптивні дизайни за допомогою класів.
- З іншого боку, CSS Grid — це проста та гнучка система сіток, в якій застосовується крос-сумісний дизайн, що забезпечує відмінну взаємодію з користувачем. Таким чином, використання CSS Grid у порівнянні з Bootstrap має сенс використовувати під час реалізації простих макетів.
Ну і звичайно, і CSS Grid, і Bootstrap ми вивчаємо на курсах Front-end розробки 😉
