Introducere în Pico CSS: Un cadru CSS minimalist
CSS, limbajul de stilizare web, este o unealtă puternică și omniprezentă, dar complexitatea sa poate fi uneori o provocare. De aceea, dezvoltatorii apelează adesea la cadre CSS precum Tailwind CSS sau preprocesoare ca Less și Sass, pentru a simplifica procesul de stilizare.
VIDEO MUO AL ZILEI
DERULAȚI PENTRU A VEDEA CONȚINUTUL
Însă, în anumite situații, aceste cadre complexe pot fi prea mult pentru un anumit proiect. Uneori, ceea ce ai nevoie este un cadru care să ofere doar elementele esențiale pentru a stiliza un site. Aici intervine Pico CSS, un cadru CSS minimalist, care simplifică modul în care stilizezi elementele HTML.
Integrarea Pico CSS în proiectul tău
Cea mai frecventă metodă de a adăuga Pico CSS într-un proiect este prin intermediul unei rețele de distribuție a conținutului (CDN). Pico CSS este disponibil pe jsDelivr CDN, astfel încât este suficient să adaugi un link către fișierul `pico.min.css` găzduit acolo:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
Alternativ, poți instala Pico CSS folosind Node Package Manager (npm). Pentru a utiliza această metodă, asigură-te că ai instalat Node.js pe computerul tău. Poți verifica dacă Node.js este instalat rulând următoarea comandă în terminal:
node -v
Dacă Node.js este instalat, terminalul va afișa versiunea sa. În caz contrar, va trebui să instalezi Node.js. După ce Node.js este gata, poți instala Pico CSS folosind comanda:
npm install @picocss/pico
Crearea unui site web cu Pico CSS
Pentru a configura structura site-ului tău, Pico CSS oferă două clase importante: `container` și `grid`. Pentru a începe, creează un folder nou, iar în interiorul acestuia, crează două fișiere: `index.htm` și `style.css`. În fișierul `index.htm`, adaugă următorul cod de bază:
<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>Articole interesante...</h1>
</div>
</body>
</html>
Sistemul de grilă Pico CSS
Sistemul de grilă oferit de Pico CSS este destul de simplu de utilizat. Poți defini o grilă utilizând clasa `grid`. În Pico CSS, coloanele grilei se rearanjează pe dispozitivele cu o lățime mai mică de 992px.
Imediat sub eticheta `h1` din corpul fișierului `index.htm`, creează o grilă formată din patru coloane:
<div class="grid"> <div></div> <div></div> <div></div> <div></div> </div>
Fiecare div din grilă ar trebui să aibă două clase: `container` și `card`. Clasa `container` este o clasă nativă Pico CSS care permite afișarea conținutului centrat. Apoi, adaugă un exemplu de conținut în grilă:
<div class="grid">
<div class="container card">
<img
src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
/>
<h4 class="title">De ce cântă păsările dimineața?</h4>
<div class="metadata">
<span>David Uzondu</span>
<span>Acum 13 minute</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
/>
<h4 class="title">Viața secretă a rățuștelor</h4>
<div class="metadata">
<span>Sam Holland</span>
<span>Acum 53 de minute</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
/>
<h4 class="title">Noua misiune NASA: Trimiterea adepților Pământului plat la marginea Pământului pentru a-i demonstra că greșesc</h4>
<div class="metadata">
<span>Simon Peterson</span>
<span>Acum o oră</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
/>
<h4 class="title">O bunică locală câștigă o bătălie internațională de dans Hip-Hop, dovedind că vârsta este doar un număr</h4>
<div class="metadata">
<span>Anonim</span>
<span>Acum 2 zile</span>
</div>
</div>
</div>
Pentru a gestiona stilizarea, deschide fișierul `style.css` și adaugă următorul cod:
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: " -";
}
Când deschizi pagina în browser, ar trebui să vizualizezi un aspect similar.
Utilizarea butoanelor în Pico CSS
Pico CSS include o varietate de elemente și componente HTML pre-stilate. Butonul este unul dintre cele mai utilizate elemente pe un site web.
În mod normal, butoanele sunt afișate ușor diferit de către browserele web. Elementul buton din Pico CSS creează un buton cu aspect consistent în toate browserele. Pentru a-l folosi, adaugă elementul buton obișnuit:
<button>Acesta este un buton</button>
În mod implicit, butoanele Pico CSS ocupă toată lățimea containerului lor. Dacă nu dorești acest lucru, asigură-te că setezi atributul `role` la `button` pentru un element HTML inline:
<a href="https.//www.google.com" role="button">Accesează Google</a>
Utilizarea indicatorului de încărcare în Pico CSS
În Pico CSS, poți adăuga automat un indicator de încărcare prin setarea atributului `aria-busy` la `true` pentru orice element. Această caracteristică este utilă atunci când vrei să indici utilizatorului că un element nu este gata pentru interacțiune sau că browserul preia o resursă.
<a href="#" aria-busy="true">Generarea parolei unice, vă rugăm să așteptați…</a>
Codul de mai sus va produce următorul rezultat:
Sfaturile cu instrumente pot fi dificil de implementat, dar Pico CSS simplifică acest proces. Permite crearea unui sfat explicativ pentru orice element, fără a fi nevoie de cod JavaScript complex. Pentru a crea un sfat explicativ în Pico CSS, trebuie să utilizezi două atribute:
- `data-tooltip`: Definește conținutul sfatului explicativ.
- `data-placement`: Definește poziția sfatului explicativ. Poți seta acest atribut la una dintre cele patru valori: „top”, „right”, „bottom” și „left”.
Următorul cod demonstrează cum să utilizezi acest utilitar:
<button data-tooltip="Sus" data-placement="top">Sus</button> <button data-tooltip="Dreapta" data-placement="right">Dreapta</button> <button data-tooltip="Jos" data-placement="bottom">Jos</button> <button data-tooltip="Stânga" data-placement="left">Stânga</button>
Când rulezi codul în browser, ar trebui să vezi următorul aspect:
Acordeoane în Pico CSS
Acordeoanele permit utilizatorilor să schimbe vizibilitatea secțiunilor de conținut prin extinderea sau restrângerea lor. Pentru a implementa această funcționalitate în Pico CSS, poți utiliza elementul `details`:
<details>
<summary>Acesta este un acordeon</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>
Când un browser afișează acest cod, ar trebui să ofere o modalitate de a afișa sau ascunde conținutul, în acest caz, o săgeată derulantă:
Când ar trebui să folosești un cadru CSS
Cadrele CSS pot simplifica procesul de construire și stilizare a unei aplicații web. Ar trebui să iei în considerare utilizarea unui cadru CSS dacă vrei să economisești timp cu sarcinile repetitive și să utilizezi componente pre-construite.
Cadrele oferă un set de stiluri CSS, grile și componente predefinite, permițându-ți să te concentrezi pe logica și funcționalitatea aplicației. Multe cadre CSS vin cu documentație extinsă și suport din partea comunității, lucru care poate fi foarte util în cazul în care întâmpini dificultăți.