CSS — це всюдисуща потужна технологія стилізації, але працювати з нею може бути важко. Ось чому доступні фреймворки CSS, такі як TailwindCSS, і препроцесори, такі як Less CSS і Sass.
MUO ВІДЕО ДНЯ
ПРОКРУТЬТЕ, ЩОБ ПРОДОВЖИТИ ВМІСТ
Але іноді ці фреймворки або «смаки» 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>Articles Worth Reading...</h1>
</div>
</body>
</html>
Сітка Pico CSS
Система сіток у Pico CSS є досить простою. Ви можете визначити сітку за допомогою класу сітки. У Pico CSS стовпці сітки згортаються на пристроях із шириною менше 992 пікселів.
Прямо під тегом h1 у тілі файлу index.htm створіть сітку з чотирьох стовпців.
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Кожен div у сітці повинен мати два класи: контейнер і карта. Клас-контейнер — це власний клас Pico CSS, який увімкне вікно перегляду по центру. Далі заповніть сітку зразком вмісту, наприклад:
<div class="grid">
<div class="container card">
<img
src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
/>
<h4 class="title">Why do birds sing in the morning?</h4>
<div class="metadata">
<span>David Uzondu</span>
<span>13 Minutes ago</span>
</div>
</div><div class="container card">
<img
src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
/>
<h4 class="title">The Secret Life of Ducklings</h4>
<div class="metadata">
<span>Sam Holland</span>
<span>53 Minutes ago</span>
</div>
</div><div class="container card">
<img
src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
/>
<h4 class="title">NASA's New Mission: Sending Flat-Earthers to
Edge of Earth to Prove Them Wrong</h4>
<div class="metadata">
<span>Simon Peterson</span>
<span>1 hour ago</span>
</div>
</div><div class="container card">
<img
src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
/>
<h4 class="title">Local Grandma Wins International Hip-Hop Dance Battle,
Proves Age is Just a Number</h4>
<div class="metadata">
<span>Anonymous</span>
<span>2 days ago</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>This is a button</button>
За замовчуванням у Pico CSS кнопки займають всю ширину свого контейнера. Якщо вам не подобається така поведінка, переконайтеся, що ви встановили для атрибута role у вбудованому елементі HTML значення «button»:
<a href="https.//www.google.com" role="button">Go To Google</a>
Як використовувати утиліту завантаження в Pico CSS
У Pico CSS, якщо ви встановите для aria-busy значення «true» для будь-якого елемента, він автоматично додасть індикатор завантаження. Ви можете знайти цю функцію зручною, якщо ви хочете повідомити користувачеві, що якийсь елемент не готовий для взаємодії з ним, або що браузер отримує певний ресурс.
<a href="#" aria-busy="true">Generating One-Time Password, please wait…</a>
Наведений вище код призведе до наступного:
Підказки можуть бути складними для реалізації, але Pico CSS подбає про це. Це дозволяє легко створити спливаючу підказку для будь-якого елемента без потреби будь-якого фантастичного JavaScript. Створюючи спливаючу підказку в Pico CSS, вам потрібно використовувати два атрибути:
- data-tooltip: це визначає вміст підказки.
- data-placement: це визначає положення підказки. Для цього атрибута можна встановити одне з чотирьох значень: «верх», «праворуч», «низ» і «ліворуч».
Наступний код показує, як використовувати цю утиліту:
<button data-tooltip="Top" data-placement="top">Top</button>
<button data-tooltip="Right" data-placement="right">Right</button>
<button data-tooltip="Bottom" data-placement="bottom">Bottom</button>
<button data-tooltip="Left" data-placement="left">Left</button>
Коли ви запускаєте його в браузері, ви повинні побачити наступне:
Акордеони в Pico CSS
Акордеони дозволяють користувачам перемикати видимість розділів вмісту, розгортаючи або згортаючи їх, подібно до того, як музичний інструмент-акордеон розширюється та звужується. Щоб реалізувати цю функцію в Pico CSS, використовуйте елемент деталей:
<details>
<summary>This is an accordion</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, якщо ви хочете заощадити час на повторюваних завданнях і використовувати попередньо створені компоненти.
Frameworks надають набір попередньо розроблених стилів CSS, сіток макета та компонентів, що дозволяє зосередитися на логіці та функціональності програми. Багато фреймворків CSS постачаються з розширеною документацією та підтримкою спільноти, яка стане в нагоді, якщо ви коли-небудь застрягнете.
