CSS є всюдисущою та потужною технологією для стилізації вебсайтів, але робота з нею може бути непростою. Саме тому існують CSS-фреймворки, такі як Tailwind CSS, та препроцесори, як Less CSS і Sass.
МУО ВІДЕО ДНЯ
ПРОКРУТІТЬ, ЩОБ ПОБАЧИТИ ЗМІСТ
Однак, інколи ці фреймворки або “варіанти” CSS можуть бути надлишковими для вашого поточного проєкту. Іноді потрібен фреймворк, що надає лише базові можливості для стилізації. Саме тут на допомогу приходить Pico CSS. Pico – це мінімалістичний CSS-фреймворк, що дозволяє легко стилізувати HTML-елементи.
Встановлення Pico CSS у проєкт
Найбільш поширений спосіб використання Pico CSS у проєкті – це застосування мережі доставки контенту (CDN). Pico CSS розміщений на jsDelivr CDN, тому достатньо просто вказати шлях до файлу pico.min.css, що там знаходиться:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
Іншим варіантом є встановлення Pico CSS за допомогою Node Package Manager. Для цього методу необхідна наявність Node.js на вашому комп’ютері. Перевірити, чи встановлено Node.js, можна виконавши команду:
node -v
Якщо Node.js доступний, термінал виведе його версію. Якщо ж його немає, можна знайти інструкції щодо встановлення Node.js на свій пристрій. Для встановлення Pico CSS виконайте команду:
npm install @picocss/pico
Створення вебсайту з використанням Pico CSS
При розробці структури вашого вебсайту, Pico CSS надає два класи: контейнер та сітка. Створіть нову папку, а в ній файли index.htm та style.css. У файл index.htm додайте наступний шаблонний код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
<link rel="stylesheet" href="https://wilku.top/a-beginners-guide-to-using-pico-css/style.css" />
<title>Pico Website</title>
</head>
<body>
<div class="container">
<h1>Статті, які варто прочитати...</h1>
</div>
</body>
</html>
Сітка Pico CSS
Система сіток у Pico CSS доволі проста. Сітку можна визначити за допомогою класу `grid`. У Pico CSS стовпці сітки автоматично змінюють свою структуру на пристроях з шириною екрану менше 992 пікселів.
Одразу під тегом `h1` у тілі файлу `index.htm` створіть сітку з чотирма стовпцями:
<div class="grid"> <div></div> <div></div> <div></div> <div></div> </div>
Кожен `div` у сітці повинен мати два класи: `container` та `card`. Клас `container` є вбудованим класом Pico CSS, який вирівнює елементи по центру. Далі, заповніть сітку прикладом контенту, наприклад:
<div class="grid">
<div class="container card">
<img
src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
/>
<h4 class="title">Чому птахи співають вранці?</h4>
<div class="metadata">
<span>Давид Узонду</span>
<span>13 хвилин тому</span>
</div>
</div><div class="container card">
<img
src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
/>
<h4 class="title">Секретне життя каченят</h4>
<div class="metadata">
<span>Сем Холланд</span>
<span>53 хвилини тому</span>
</div>
</div><div class="container card">
<img
src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
/>
<h4 class="title">Нова місія NASA: відправка "плоскоземельців" на край Землі, щоб спростувати їхні переконання</h4>
<div class="metadata">
<span>Саймон Пітерсон</span>
<span>1 година тому</span>
</div>
</div><div class="container card">
<img
src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
/>
<h4 class="title">Місцева бабуся виграла міжнародний батл з хіп-хопу, довівши, що вік - це лише цифра</h4>
<div class="metadata">
<span>Анонім</span>
<span>2 дні тому</span>
</div>
</div>
</div>
Для стилізації, відкрийте файл `style.css` і додайте наступний код:
img {
width: 100%;
background-size: cover;
border-radius: 10px;
height: 200px;
}
.card {
background-color: rgb(244, 244, 244);
border-radius: 10px;
padding: 10px;
cursor: pointer;
margin-top: 10px;
}
.card:hover {
transform: scale(1.03);
}
.metadata {
margin-top: -30px;
margin-bottom: 10px;
}
.title {
margin-top: 10px;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.metadata {
font-size: 14px;
}
span:nth-child(1)::after {
content: " -";
}
Відкривши сторінку у браузері, ви повинні побачити щось подібне:
Як використовувати кнопки в Pico CSS
Pico CSS пропонує великий вибір попередньо стилізованих HTML-елементів та компонентів. Одним з найбільш поширених елементів є кнопка.
Традиційно різні браузери відображають кнопки дещо по-різному. Елемент кнопки в Pico CSS створює кнопку з однаковим стилем у всіх браузерах. Щоб використовувати її, просто додайте елемент кнопки, як зазвичай:
<button>Це кнопка</button>
За замовчуванням, у Pico CSS кнопки займають всю ширину свого контейнера. Якщо вам не подобається така поведінка, встановіть для атрибута `role` вбудованого елемента HTML значення `button`:
<a href="https.//www.google.com" role="button">Перейти до Google</a>
Як використовувати утиліту завантаження в Pico CSS
У Pico CSS, якщо ви встановите для атрибута `aria-busy` значення `true` для будь-якого елемента, він автоматично додасть індикатор завантаження. Ця функція може бути корисною, якщо ви хочете повідомити користувачу, що певний елемент ще не готовий до взаємодії, або що браузер отримує якийсь ресурс.
<a href="#" aria-busy="true">Генерується одноразовий пароль, будь ласка зачекайте...</a>
Наведений вище код призведе до наступного:
Створення підказок може бути складним процесом, але Pico CSS спрощує це. Він дозволяє легко створити спливаючу підказку для будь-якого елемента без використання JavaScript. Для створення спливаючої підказки у Pico CSS потрібно використати два атрибути:
- `data-tooltip`: визначає вміст підказки.
- `data-placement`: визначає розташування підказки. Для цього атрибута можна встановити одне з чотирьох значень: `top`, `right`, `bottom` та `left`.
Наступний код показує, як використовувати цю функцію:
<button data-tooltip="Зверху" data-placement="top">Зверху</button> <button data-tooltip="Справа" data-placement="right">Справа</button> <button data-tooltip="Знизу" data-placement="bottom">Знизу</button> <button data-tooltip="Зліва" data-placement="left">Зліва</button>
Після запуску в браузері, ви повинні побачити щось схоже:
Акордеони в Pico CSS
Акордеони дозволяють користувачам перемикати видимість розділів контенту, розгортаючи або згортаючи їх, подібно до того, як музичний інструмент акордеон розширюється та стискається. Для реалізації цієї функціональності в Pico CSS використовуйте елемент `
<details>
<summary>Це акордеон</summary>
<p>
Taciti ac condimentum dapibus luctus volutpat ligula nec et mattis
arcu ridiculus? Non posuere bibendum libero diam tempus nec odio non
mauris elit! Euismod suspendisse pellentesque donec vestibulum dapibus
iaculis. Cursus mollis quis praesent purus pulvinar pellentesque
vulputate integer elit sodales? Egetnunc pellentesque eu eget
consequat condimentum praesent nec auctor sapien luctus at, donec ac
ex sit magna amet in.
</p>
</details>
Коли браузер відобразить цей код, він повинен надати механізм для показу або приховання контенту, в цьому випадку це стрілка спадного меню:
Коли слід використовувати CSS-фреймворк
CSS-фреймворки можуть допомогти спростити процес створення та стилізації веб-застосунку. Варто розглянути використання CSS-фреймворку, якщо ви бажаєте заощадити час на повторюваних завданнях та використовувати вже готові компоненти.
Фреймворки надають набір попередньо розроблених CSS-стилів, сіток та компонентів, дозволяючи вам зосередитися на логіці та функціональності застосунку. Багато CSS-фреймворків мають детальну документацію та підтримку спільноти, що може стати в нагоді при виникненні проблем.