CSS este o tehnologie de styling omniprezentă, puternică, dar poate fi dificil de lucrat. Acesta este motivul pentru care sunt disponibile cadrele CSS precum TailwindCSS și preprocesoare precum Less CSS și Sass.
VIDEO MUO AL ZILEI
DEfilați PENTRU A CONTINUA CU CONȚINUT
Dar uneori, aceste cadre sau „arome” CSS pot fi exagerate pentru proiectul la care lucrați. Uneori, doriți un cadru care să ofere caracteristici esențiale pentru a vă stila site-ul. Aici intervine Pico CSS. Pico este un cadru CSS minim care facilitează stilarea elementelor HTML native.
Cuprins
Instalarea Pico CSS în proiectul dvs
Cea mai obișnuită modalitate de a pune Pico CSS în funcțiune în proiectul dvs. este să utilizați o rețea de livrare de conținut (CDN). Pico CSS este disponibil pe jsDelivr CDN, așa că tot ce trebuie să faceți este să indicați 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, puteți instala Pico CSS cu Node Package Manager. Pentru ca această metodă să funcționeze, asigurați-vă că ați instalat Node.js pe computer. Puteți confirma disponibilitatea Node.js pe computer rulând:
node -v
Dacă Node.js este disponibil, terminalul își va afișa versiunea. Dacă nu îl aveți instalat, puteți afla cum să puneți în funcțiune Node.js pe computer. Instalați Pico CSS rulând:
npm install @picocss/pico
Crearea unui site web cu Pico CSS
Când configurați aspectul pentru site-ul dvs., Pico CSS vă oferă două clase, container și grilă. Creați un folder nou și în acel folder, creați un fișier index.htm și un fișier style.css. În fișierul index.htm, adăugați următorul cod boilerplate:
<!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
Sistemul Grid din Pico CSS este destul de simplu. Puteți defini o grilă cu clasa grilă. În Pico CSS, coloanele grilei se prăbușesc pe dispozitivele cu o lățime sub 992 px.
Chiar sub eticheta h1 din corpul fișierului index.htm, creați o grilă cu 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 o fereastră de vizualizare centrată. Apoi, populați grila cu un exemplu de conținut ca acesta:
<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>
Pentru a gestiona stilul, deschideți fișierul style.css și adăugați următoarele:
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 deschideți pagina în browser, ar trebui să vedeți următoarele:
Cum să utilizați butoanele în Pico CSS
Pico CSS oferă o mare varietate de elemente și componente HTML pre-stilizate. Unul dintre cele mai comune elemente ale oricărui site web este butonul.
În mod tradițional, diferite browsere redau butoanele ușor diferit. Elementul buton din Pico CSS creează un buton cu stil consecvent în toate browserele. Pentru a-l folosi, pur și simplu adăugați elementul butonului ca de obicei:
<button>This is a button</button>
În mod implicit, în Pico CSS, butoanele ocupă întreaga lățime a containerului lor. Dacă nu vă place acest comportament, asigurați-vă că setați atributul rol pe un element HTML inline la „button”:
<a href="https.//www.google.com" role="button">Go To Google</a>
Cum să utilizați utilitarul de încărcare în Pico CSS
În Pico CSS, dacă setați aria-busy la „adevărat” pentru orice element, acesta va adăuga automat un indicator de încărcare. Puteți găsi această caracteristică la îndemână dacă doriți să comunicați utilizatorului că un element nu este pregătit pentru a interacționa cu el sau că browserul preia o resursă.
<a href="#" aria-busy="true">Generating One-Time Password, please wait…</a>
Codul de mai sus va avea ca rezultat următoarele:
Sfaturile cu instrumente pot fi dificil de implementat, dar Pico CSS se ocupă de asta. Facilitează crearea unui sfat explicativ pentru orice element, fără a fi nevoie de niciun JavaScript sofisticat. Când creați un sfat explicativ în Pico CSS, există două atribute pe care trebuie să le utilizați:
- data-tooltip: Aceasta definește conținutul tooltip.
- data-placement: Aceasta definește poziția tooltip. Puteți seta acest atribut la una dintre cele patru valori: „sus”, „dreapta”, „jos” și „stânga”.
Următorul cod vă arată cum să utilizați acest utilitar:
<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>
Când îl rulați în browser, ar trebui să vedeți următoarele:
Acordeoane în Pico CSS
Acordeoanele le permite utilizatorilor să comute vizibilitatea secțiunilor de conținut prin extinderea sau restrângerea acestora, similar modului în care un instrument muzical acordeon se extinde și se contractă. Pentru a implementa această funcționalitate în Pico CSS, utilizați elementul de detalii:
<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>
Când un browser afișează acest marcaj, ar trebui să ofere un mijloc de a afișa sau ascunde conținutul, în acest caz, o săgeată derulantă:
Când ar trebui să utilizați un cadru CSS
Cadrele CSS vă pot ajuta să simplificați procesul de construire și stilare a unei aplicații web. Ar trebui să luați în considerare utilizarea unui cadru CSS dacă doriți să economisiți timp cu sarcini repetitive și să utilizați componentele pre-construite.
Framework-urile oferă un set de stiluri CSS pre-proiectate, grile de aspect și componente, permițându-vă să vă concentrați pe logica și funcționalitatea aplicației. Multe cadre CSS vin cu documentație extinsă și asistență comunitară care vă va fi utilă în cazul în care veți rămâne vreodată blocat.