Tento tenký rámec je skvelý spôsob, ako získať atraktívne webové stránky bez veľkého množstva problémov.

CSS je všadeprítomná a výkonná technológia na úpravu štýlu, no pracovať s ňou môže byť náročné. To je dôvod, prečo sú k dispozícii rámce CSS ako TailwindCSS a preprocesory ako Less CSS a Sass.

Niekedy však môžu byť tieto rámce alebo „príchute“ CSS pre projekt, na ktorom pracujete, prehnané. Niekedy chcete rámec, ktorý vám ponúka základné funkcie na úpravu vašich webových stránok. Tu prichádza na rad Pico CSS. Pico je minimálny rámec CSS, ktorý uľahčuje štýlovanie natívnych prvkov HTML.

Inštalácia Pico CSS vo vašom projekte

Najbežnejším spôsobom, ako spustiť Pico CSS vo vašom projekte, je použiť a Sieť na doručovanie obsahu (CDN). Pico CSS je k dispozícii na jsDelivr CDN, takže všetko, čo musíte urobiť, je ukázať na pico.min.css súbor tam hostený:

<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>

Prípadne môžete nainštalovať Pico CSS pomocou Správca balíkov uzlov

instagram viewer
. Aby táto metóda fungovala, uistite sa, že máte na svojom počítači nainštalovaný súbor Node.js. Dostupnosť Node.js na vašom počítači môžete potvrdiť spustením:

node -v

Ak je k dispozícii súbor Node.js, terminál zobrazí jeho verziu. Ak ho nemáte nainštalovaný, môžete sa naučiť, ako spustiť Node.js na vašom počítači. Nainštalujte Pico CSS spustením:

npm install @picocss/pico

Vytvorenie webovej stránky pomocou Pico CSS

Pri nastavovaní rozloženia pre vašu webovú stránku vám Pico CSS poskytuje dve triedy, kontajner a mriežka. Vytvorte nový priečinok a v tomto priečinku vytvorte priečinok index.htm súbor a a style.css súbor. V index.htm súbor, pridajte nasledujúci štandardný 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>

Gridový systém Pico CSS

Grid System v Pico CSS je celkom jednoduchý. Mriežku môžete definovať pomocou mriežka trieda. V Pico CSS sa stĺpce mriežky zbalia na zariadeniach so šírkou menšou ako 992 pixelov.

Hneď pod h1 tag v telo z index.htm súbor, vytvorte mriežku so štyrmi stĺpcami.

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

Každý div v mriežke by mala mať dve triedy: kontajner a kartu. The kontajner class je natívna trieda Pico CSS, ktorá umožňuje centrovaný výrez. Ďalej vyplňte mriežku vzorovým obsahom, ako 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>

Ak chcete upraviť štýl, otvorte style.css súbor a pridajte nasledujúce:

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: " -";
}

Keď otvoríte stránku v prehliadači, mali by ste vidieť nasledovné:

Ako používať tlačidlá v Pico CSS

Pico CSS ponúka širokú škálu predštylizovaných prvkov a komponentov HTML. Jedným z najbežnejších prvkov na akejkoľvek webovej stránke je tlačidlo.

Rôzne prehliadače tradične vykresľujú tlačidlá mierne odlišne. The tlačidlo prvok v Pico CSS vytvára tlačidlo s konzistentným štýlom vo všetkých prehliadačoch. Ak ho chcete použiť, jednoducho pridajte tlačidlo prvok ako obvykle:

<button>This is a buttonbutton>

V predvolenom nastavení v Pico CSS tlačidlá zaberajú celú šírku svojho kontajnera. Ak sa vám toto správanie nepáči, uistite sa, že ste nastavili úlohu atribút na vloženom prvku HTML na "tlačidlo":

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

V Pico CSS, ak ste nastavili árie zaneprázdnený na „pravda“ na ľubovoľnom prvku automaticky pridá indikátor načítania. Táto funkcia sa vám môže hodiť, ak chcete používateľovi oznámiť, že niektorý prvok nie je pripravený na interakciu s ním, alebo že prehliadač načítava nejaký zdroj.

<ahref="#"aria-busy="true">Generating One-Time Password, please wait…a>

Vyššie uvedený kód bude mať za následok nasledovné:

Implementácia popisov môže byť zložitá, ale Pico CSS sa o to postará. Uľahčuje vytvorenie popisku pre akýkoľvek prvok bez potreby akéhokoľvek efektného JavaScriptu. Pri vytváraní popisu v Pico CSS musíte použiť dva atribúty:

  • popis údajov: Toto definuje obsah popisu.
  • umiestňovanie údajov: Toto definuje polohu popisku. Tento atribút môžete nastaviť na jednu zo štyroch hodnôt: „top“, „right“, „bottom“ a „left“.

Nasledujúci kód ukazuje, ako používať 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>

Keď ho spustíte v prehliadači, mali by ste vidieť nasledovné:

Harmoniky v Pico CSS

Akordeóny umožňujú používateľom prepínať viditeľnosť sekcií obsahu ich rozšírením alebo zbalením, podobne ako sa rozťahuje a zmršťuje akordeónový hudobný nástroj. Na implementáciu tejto funkcie v Pico CSS použite podrobnosti element:

<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>

Keď prehliadač zobrazí toto označenie, mal by ponúkať prostriedky na zobrazenie alebo skrytie obsahu, v tomto prípade šípku rozbaľovacej ponuky:

Kedy by ste mali použiť rámec CSS

Rámce CSS vám môžu pomôcť zefektívniť proces vytvárania a štýlu webovej aplikácie. Mali by ste zvážiť použitie rámca CSS, ak chcete ušetriť čas na opakujúce sa úlohy a využiť vopred vytvorené komponenty.

Frameworky poskytujú sadu vopred navrhnutých štýlov CSS, mriežok rozloženia a komponentov, čo vám umožňuje zamerať sa na logiku a funkčnosť aplikácie. Mnoho rámcov CSS prichádza s rozsiahlou dokumentáciou a podporou komunity, ktorá sa vám bude hodiť v prípade, že sa niekedy zaseknete.