Průvodce pro začátečníky k používání Pico CSS
CSS je všudypřítomná a efektivní technologie pro stylování webových stránek, avšak práce s ní může být náročná. Proto existují CSS frameworky jako Tailwind CSS a preprocesory jako Less CSS a Sass.
Někdy ale tyto frameworky nebo "příchutě" CSS mohou být pro daný projekt zbytečně robustní. Občas potřebujete pouze základní funkce pro stylování webu. Právě zde se uplatní Pico CSS. Jedná se o minimalistický framework, který usnadňuje stylování nativních HTML prvků.
Instalace Pico CSS do projektu
Nejběžnějším způsobem, jak začít používat Pico CSS, je využití sítě pro doručování obsahu (CDN). Pico CSS je dostupné na jsDelivr CDN, takže stačí odkázat na soubor pico.min.css, který je tam uložen:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
Alternativně můžete Pico CSS nainstalovat pomocí správce balíčků Node.js (npm). Pro tuto metodu je nutné mít na počítači nainstalovaný Node.js. Jeho dostupnost ověříte spuštěním příkazu:
node -v
Pokud je Node.js nainstalován, terminál zobrazí jeho verzi. V opačném případě si můžete Node.js stáhnout a nainstalovat. Samotnou instalaci Pico CSS provedete pomocí příkazu:
npm install @picocss/pico
Vytvoření webové stránky s Pico CSS
Pro rozvržení webu nabízí Pico CSS dvě třídy: container a grid. Vytvořte novou složku, v ní soubor index.htm a style.css. Do index.htm vložte následující základní kód:
<!DOCTYPE html>
<html lang="cs">
<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="style.css" />
<title>Pico Website</title>
</head>
<body>
<div class="container">
<h2>Zajímavé články k přečtení...</h2>
</div>
</body>
</html>
Pico CSS Grid System
Systém mřížky (grid) v Pico CSS je poměrně jednoduchý. Mřížku definujete pomocí třídy grid. V Pico CSS se sloupce mřížky skládají na zařízeních s šířkou menší než 992 pixelů.
Přímo pod nadpis h2 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: container a card. Třída container je nativní třída Pico CSS, která zajišťuje centrované zobrazení obsahu. Dále mřížku vyplňte ukázkovým obsahem, například takto:
<div class="grid">
<div class="container card">
<img src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg" />
<h4 class="title">Proč ptáci zpívají ráno?</h4>
<div class="metadata">
<span>David Uzondu</span>
<span>Před 13 minutami</span>
</div>
</div>
<div class="container card">
<img src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg" />
<h4 class="title">Tajný život kachňat</h4>
<div class="metadata">
<span>Sam Holland</span>
<span>Před 53 minutami</span>
</div>
</div>
<div class="container card">
<img src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg" />
<h4 class="title">Nová mise NASA: Poslat zastánce ploché Země na okraj planety, aby se přesvědčili o opaku</h4>
<div class="metadata">
<span>Simon Peterson</span>
<span>Před 1 hodinou</span>
</div>
</div>
<div class="container card">
<img src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg" />
<h4 class="title">Místní babička vyhrála mezinárodní hip-hopovou taneční bitvu a dokázala, že věk je jen číslo</h4>
<div class="metadata">
<span>Anonym</span>
<span>Před 2 dny</span>
</div>
</div>
</div>
Pro úpravu vzhledu otevřete soubor style.css a přidejte následující styly:
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 zobrazení článků.
Použití tlačítek v Pico CSS
Pico CSS nabízí širokou škálu předdefinovaných stylů pro HTML prvky a komponenty. Jedním z nejpoužívanějších prvků na webových stránkách je tlačítko.
Standardně se tlačítka v různých prohlížečích mohou zobrazovat mírně odlišně. Pico CSS však zajišťuje konzistentní vzhled tlačítka ve všech prohlížečích. Pro jeho použití stačí vložit prvek button:
<button>Tohle je tlačítko</button>
Ve výchozím nastavení v Pico CSS tlačítka zabírají celou šířku svého kontejneru. Pokud s tímto chováním nesouhlasíte, nastavte atribut role na hodnotu "button" u inline HTML prvku:
<a href="https://www.google.com" role="button">Přejít na Google</a>
Použití indikátoru načítání v Pico CSS
Pokud v Pico CSS nastavíte atribut aria-busy na hodnotu "true", automaticky se u daného prvku zobrazí indikátor načítání. Tuto funkci využijete, pokud chcete uživateli dát vědět, že prvek ještě není připraven k interakci nebo že se právě načítají data.
<a href="#" aria-busy="true">Generuji jednorázové heslo, prosím čekejte…</a>
Výše uvedený kód vytvoří prvek s indikátorem načítání.
Implementace tooltipů (popisků) může být komplikovaná, ale Pico CSS to zjednodušuje. Umožňuje vytvořit tooltip u libovolného prvku bez nutnosti použití JavaScriptu. Pro vytvoření tooltipu v Pico CSS použijte dva atributy:
data-tooltip: Definuje text tooltipu.data-placement: Určuje pozici tooltipu. Může mít jednu ze čtyř hodnot: "top", "right", "bottom" a "left".
Následující kód demonstruje použití této funkce:
<button data-tooltip="Nahoře" data-placement="top">Nahoře</button> <button data-tooltip="Vpravo" data-placement="right">Vpravo</button> <button data-tooltip="Dole" data-placement="bottom">Dole</button> <button data-tooltip="Vlevo" data-placement="left">Vlevo</button>
Po spuštění v prohlížeči se tooltipy zobrazí u tlačítek.
Akordeony v Pico CSS
Akordeony umožňují uživatelům přepínat viditelnost obsahu rozbalováním nebo sbalováním, podobně jako u hudebního nástroje. Pro implementaci akordeonů v Pico CSS použijte prvek details:
<details>
<summary>Toto je akordeon</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í tento kód, měl by nabídnout možnost zobrazení nebo skrytí obsahu, v tomto případě pomocí šipky rozbalovací nabídky.
Kdy použít CSS Framework
CSS frameworky vám mohou pomoci zefektivnit proces vytváření a stylování webových aplikací. Měli byste zvážit jejich použití, pokud chcete ušetřit čas na opakujících se úkolech a využít předpřipravené komponenty.
Frameworky poskytují sady předdefinovaných CSS stylů, rozložení mřížky a komponenty, což vám umožňuje soustředit se na logiku a funkčnost aplikace. Mnohé frameworky CSS nabízí rozsáhlou dokumentaci a komunitní podporu, která se vám může hodit, pokud budete potřebovat pomoc.
