Acest cadru subțire este o modalitate excelentă de a obține pagini web atractive fără prea multe bătăi de cap.

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.

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.

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 a Rețeaua 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 pico.min.css fișier 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

instagram viewer
Manager de pachete Node. 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ă activați și să rulați 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. web, Pico CSS vă oferă două clase, recipient și grilă. Creați un folder nou și în acel folder, creați un index.htm dosar și a stil.css fişier. În index.htm fișier, adăugați următorul cod boilerplate:

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

Sistemul Grid din Pico CSS este destul de simplu. Puteți defini o grilă cu grilă clasă. În Pico CSS, coloanele grilei se prăbușesc pe dispozitivele cu o lățime sub 992 px.

Chiar sub h1 eticheta în corp al index.htm fișier, creați o grilă cu patru coloane.

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

Fiecare div în grilă ar trebui să aibă două clase: recipient și card. The recipient clasa 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:

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

Pentru a gestiona stilul, deschideți stil.css fișier ș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. The buton elementul din Pico CSS creează un buton cu stil consecvent în toate browserele. Pentru a-l folosi, adăugați pur și simplu buton element ca de obicei:

<button>This is a buttonbutton>

În mod implicit, în Pico CSS, butoanele ocupă întreaga lățime a containerului lor. Dacă nu vă place acest comportament, asigurați-vă că ați setat rol atribut pe un element HTML inline la „button”:

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

În Pico CSS, dacă setați aria-ocupat la „adevărat” pe orice element, 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ă.

<ahref="#"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. Ușurează crearea unui sfat explicativ pentru orice element, fără a fi nevoie de JavaScript. Când creați un sfat explicativ în Pico CSS, există două atribute pe care trebuie să le utilizați:

  • date-tooltip: Aceasta definește conținutul descrierii explicative.
  • plasarea datelor: Aceasta definește poziția indicatorului. 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:

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

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

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.