Tento tenký rámec je skvělý způsob, jak získat atraktivní webové stránky bez velkých potíží.

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.

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.

Instalace Pico CSS do vašeho projektu

Nejběžnějším způsobem, jak zprovoznit Pico CSS ve vašem projektu, je použít a Content Delivery Network (CDN). Pico CSS je k dispozici na jsDelivr CDN, takže vše, co musíte udělat, je ukázat na pico.min.css soubor tam hostovaný:

<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 zprovoznit Node.js 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řížka. Vytvořte novou složku a v této složce vytvořte soubor index.htm soubor a styl.css soubor. V index.htm soubor, přidejte následující standardní kód:

html>
<htmllang="en">
<head>
<metacharset="utf-8" />
<metaname="viewport"content="width=device-width, initial-scale=1" />
<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
 />
<linkrel="stylesheet"href="style.css" />
<title>Pico Websitetitle>
head>
<body>
<divclass="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í mřížka třída. V Pico CSS se sloupce mřížky sbalí na zařízeních s šířkou pod 992 pixelů.

Přímo pod h1 značka v tělo z index.htm soubor, vytvořte mřížku se čtyřmi sloupci.

<divclass="grid">
<div>div>
<div>div>
<div>div>
<div>div>
div>

Každý div v mřížce by měla mít dvě třídy: kontejner a Kartu. The kontejner class 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:

<divclass="grid">
<divclass="container card">
<img
 src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
 />
<h4class="title">Why do birds sing in the morning?h4>
<divclass="metadata">
<span>David Uzonduspan>
<span>13 Minutes agospan>
div>
div>
<divclass="container card">
<img
 src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
 />
<h4class="title">The Secret Life of Ducklingsh4>
<divclass="metadata">
<span>Sam Hollandspan>
<span>53 Minutes agospan>
div>
div>


<divclass="container card">
<img
 src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
 />
<h4class="title">NASA's New Mission: Sending Flat-Earthers to 
 Edge of Earth to Prove Them Wrongh4>
<divclass="metadata">
<span>Simon Petersonspan>
<span>1 hour agospan>
div>
div>
<divclass="container card">
<img
 src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
 />
<h4class="title">Local Grandma Wins International Hip-Hop Dance Battle, 
 Proves Age is Just a Numberh4>
<divclass="metadata">
<span>Anonymousspan>
<span>2 days agospan>
div>
div>
div>

Chcete-li upravit styl, otevřete styl.css soubor 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ě. The knoflík prvek v Pico CSS vytvoří tlačítko s konzistentním stylem napříč prohlížeči. Chcete-li jej použít, jednoduše přidejte knoflík prvek jako obvykle:

<button>This is a buttonbutton>

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 role atribut na vloženém prvku HTML na "tlačítko":

<ahref="https.//www.google.com"role="button">Go To Googlea>

V Pico CSS, pokud nastavíte árie zaneprázdněný na "true" u libovolného prvku automaticky 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.

<ahref="#"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:

  • popis dat: Toto definuje obsah popisku.
  • umístění dat: 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:

<buttondata-tooltip="Top"data-placement="top">Topbutton>
<buttondata-tooltip="Right"data-placement="right">Rightbutton>
<buttondata-tooltip="Bottom"data-placement="bottom">Bottombutton>
<buttondata-tooltip="Left"data-placement="left">Leftbutton>

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 podrobnosti živel:

<details>
<summary>This is an accordionsummary>
<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.