CSS je všudypřítomná, výkonná stylingová technologie, ale může být obtížné s ní pracovat. To je důvod, proč jsou k dispozici frameworky CSS jako TailwindCSS a preprocesory jako Less CSS a Sass.
MUO VIDEO DNE
POKRAČOVÁNÍ V OBSAHU POKRAČUJTE PŘEJÍMÁNÍM
Někdy však mohou být tyto rámce nebo „příchuti“ CSS pro projekt, na kterém pracujete, přehnané. Někdy chcete rámec, který nabízí základní funkce pro styl vašeho webu. Zde přichází na řadu Pico CSS. Pico je minimální rámec CSS, který usnadňuje stylování nativních prvků HTML.
Table of Contents
Instalace Pico CSS do vašeho projektu
Nejběžnějším způsobem, jak zprovoznit Pico CSS ve vašem projektu, je použít síť pro doručování obsahu (CDN). Pico CSS je k dispozici na jsDelivr CDN, takže vše, co musíte udělat, je ukázat na soubor pico.min.css, který je tam hostován:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
Případně můžete nainstalovat Pico CSS pomocí Správce balíčků uzlů. Aby tato metoda fungovala, ujistěte se, že jste na svůj počítač nainstalovali Node.js. Dostupnost Node.js na vašem počítači můžete potvrdit spuštěním:
node -v
Pokud je k dispozici Node.js, terminál zobrazí jeho verzi. Pokud jej nemáte nainstalovaný, můžete se naučit, jak Node.js zprovoznit a spustit na vašem počítači. Nainstalujte Pico CSS spuštěním:
npm install @picocss/pico
Vytvoření webu pomocí Pico CSS
Při nastavování rozvržení pro váš web vám Pico CSS poskytuje dvě třídy, kontejner a mřížku. Vytvořte novou složku a v této složce vytvořte soubor index.htm a soubor style.css. Do souboru index.htm přidejte následující standardní kód:
<!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 Grid System
Grid System v Pico CSS je docela holý. Mřížku můžete definovat pomocí třídy mřížky. V Pico CSS se sloupce mřížky sbalí na zařízeních s šířkou pod 992 pixelů.
Přímo pod tagem h1 v těle souboru index.htm vytvořte mřížku se čtyřmi sloupci.
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Každý div v mřížce by měl mít dvě třídy: kontejner a kartu. Třída kontejneru je nativní třída Pico CSS, která umožňuje centrovaný výřez. Dále vyplňte mřížku nějakým ukázkovým obsahem, jako je tento:
<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>
Chcete-li upravit styl, otevřete soubor style.css a přidejte následující:
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: " -";
}
Když stránku otevřete v prohlížeči, měli byste vidět následující:
Jak používat tlačítka v Pico CSS
Pico CSS nabízí širokou škálu předem stylizovaných HTML prvků a komponent. Jedním z nejběžnějších prvků na jakékoli webové stránce je tlačítko.
Různé prohlížeče tradičně vykreslují tlačítka mírně odlišně. Prvek tlačítka v Pico CSS vytváří tlačítko s konzistentním stylem napříč prohlížeči. Chcete-li jej použít, jednoduše přidejte prvek tlačítka jako obvykle:
<button>This is a button</button>
Ve výchozím nastavení v Pico CSS tlačítka zabírají celou šířku svého kontejneru. Pokud se vám toto chování nelíbí, ujistěte se, že jste nastavili atribut role na vloženém HTML prvku na „button“:
<a href="https.//www.google.com" role="button">Go To Google</a>
Jak používat nástroj načítání v Pico CSS
Pokud v Pico CSS nastavíte u libovolného prvku aria-busy na „true“, automaticky se přidá indikátor načítání. Tato funkce se vám může hodit, pokud chcete uživateli sdělit, že některý prvek není připraven na interakci s ním nebo že prohlížeč načítá nějaký zdroj.
<a href="#" aria-busy="true">Generating One-Time Password, please wait…</a>
Výše uvedený kód bude mít za následek následující:
Implementace popisků může být složitá, ale Pico CSS se o to postará. Usnadňuje vytvoření popisku k libovolnému prvku bez nutnosti použití jakéhokoli efektního JavaScriptu. Při vytváření popisku v Pico CSS musíte použít dva atributy:
- data-tooltip: Definuje obsah popisku.
- data-placement: Toto definuje polohu popisku. Tento atribut můžete nastavit na jednu ze čtyř hodnot: „top“, „right“, „bottom“ a „left“.
Následující kód ukazuje, jak používat tento nástroj:
<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>
Když jej spustíte v prohlížeči, měli byste vidět následující:
Akordeony v Pico CSS
Akordeony umožňují uživatelům přepínat viditelnost částí obsahu jejich rozbalováním nebo sbalováním, podobně jako se roztahuje a smršťuje akordeonový hudební nástroj. Chcete-li implementovat tuto funkci v Pico CSS, použijte prvek detailů:
<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>
Když prohlížeč zobrazí toto označení, měl by nabízet způsob zobrazení nebo skrytí obsahu, v tomto případě šipku rozbalovací nabídky:
Kdy byste měli použít CSS Framework
CSS frameworky vám mohou pomoci zefektivnit proces vytváření a stylování webové aplikace. Měli byste zvážit použití frameworku CSS, pokud chcete ušetřit čas na opakující se úkoly a využít předpřipravené komponenty.
Frameworky poskytují sadu předem navržených stylů CSS, mřížky rozvržení a komponenty, což vám umožní soustředit se na logiku a funkčnost aplikace. Mnoho frameworků CSS přichází s rozsáhlou dokumentací a podporou komunity, která se bude hodit v případě, že se někdy zaseknete.