Ovaj tanki okvir izvrstan je način dobivanja atraktivnih web stranica bez puno muke.

CSS je sveprisutna, moćna tehnologija oblikovanja, ali može biti teško raditi s njom. Zbog toga su dostupni CSS okviri poput TailwindCSS i predprocesori poput Less CSS i Sass.

Ali ponekad ti okviri ili CSS "okusi" mogu biti pretjerani za projekt na kojem radite. Ponekad želite okvir koji nudi bitne značajke za stiliziranje vaše web stranice. Ovdje uskače Pico CSS. Pico je minimalni CSS okvir koji olakšava stiliziranje izvornih HTML elemenata.

Instaliranje Pico CSS-a u vaš projekt

Najčešći način da Pico CSS pokrenete i pokrenete u svom projektu je korištenje a Mreža za isporuku sadržaja (CDN). Pico CSS je dostupan na jsDelivr CDN, tako da sve što trebate učiniti je pokazati na pico.min.css datoteka smještena tamo:

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

Alternativno, možete instalirati Pico CSS s Node Package Manager. Da bi ova metoda funkcionirala, provjerite jeste li instalirali Node.js na svom računalu. Možete potvrditi dostupnost Node.js na vašem računalu pokretanjem:

instagram viewer 

node -v

Ako je Node.js dostupan, terminal će prikazati njegovu verziju. Ako ga nemate instaliran, možete naučiti kako pokrenuti Node.js na vašem računalu. Instalirajte Pico CSS pokretanjem:

npm install @picocss/pico

Izrada web stranice s Pico CSS-om

Prilikom postavljanja izgleda za vašu web stranicu, Pico CSS vam nudi dvije klase, spremnik i rešetka. Napravite novu mapu iu toj mapi stvorite indeks.htm datoteka i a stil.css datoteka. u indeks.htm datoteku, dodajte sljedeći šablonski kod:

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 sustav

Grid sustav u Pico CSS-u prilično je ogoljen. Možete definirati rešetku pomoću rešetka razreda. U Pico CSS-u, stupci rešetke se skupljaju na uređajima čija je širina manja od 992 px.

Točno ispod h1 oznaka u tijelo od indeks.htm datoteku, stvorite rešetku s četiri stupca.

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

Svaki div u mreži treba imati dvije klase: spremnik i kartica. The spremnik klasa je nativna Pico CSS klasa koja omogućuje centrirani prozor za prikaz. Zatim popunite rešetku uzorkom sadržaja poput ovog:

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

Za obradu stila otvorite stil.css datoteku i dodajte sljedeće:

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

Kada otvorite stranicu u pregledniku, trebali biste vidjeti sljedeće:

Kako koristiti gumbe u Pico CSS-u

Pico CSS nudi širok izbor unaprijed oblikovanih HTML elemenata i komponenti. Jedan od najčešćih elemenata na bilo kojoj web stranici je gumb.

Tradicionalno, različiti preglednici prikazuju gumbe malo drugačije. The dugme element u Pico CSS-u stvara gumb s dosljednim stilom u svim preglednicima. Da biste ga koristili, jednostavno dodajte dugme element kao i obično:

<button>This is a buttonbutton>

Prema zadanim postavkama, u Pico CSS-u, gumbi zauzimaju cijelu širinu svog spremnika. Ako vam se ne sviđa ovakvo ponašanje, svakako postavite uloga atribut na ugrađenom HTML elementu za "gumb":

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

U Pico CSS-u, ako postavite arija-zauzeto na "true" na bilo kojem elementu, automatski će dodati indikator učitavanja. Ova vam značajka može biti korisna ako korisniku želite priopćiti da neki element nije spreman za interakciju s njim ili da preglednik dohvaća neki resurs.

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

Gornji kod će rezultirati sljedećim:

Opise alata može biti teško implementirati, ali Pico CSS to rješava. Olakšava stvaranje opisa alata na bilo kojem elementu bez potrebe za bilo kakvim otmjenim JavaScriptom. Kada stvarate opis alata u Pico CSS-u, morate koristiti dva atributa:

  • data-tooltip: Ovo definira sadržaj opisa alata.
  • postavljanje podataka: Ovo definira položaj opisa alata. Ovaj atribut možete postaviti na jednu od četiri vrijednosti: "vrh", "desno", "dno" i "lijevo".

Sljedeći kôd pokazuje vam kako koristiti ovaj pomoćni program:

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

Kada ga pokrenete u pregledniku, trebali biste vidjeti sljedeće:

Harmonike u Pico CSS

Harmonike omogućuju korisnicima da mijenjaju vidljivost odjeljaka sadržaja tako da ih proširuju ili skupljaju, slično načinu na koji se glazbeni instrument harmonika širi i skuplja. Za implementaciju ove funkcije u Pico CSS, koristite pojedinosti 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>

Kada preglednik prikaže ovu oznaku, trebao bi ponuditi način za prikazivanje ili skrivanje sadržaja, u ovom slučaju, padajuću strelicu:

Kada biste trebali koristiti CSS Framework

CSS okviri mogu vam pomoći da pojednostavite proces izgradnje i oblikovanja web aplikacije. Trebali biste razmisliti o korištenju CSS okvira ako želite uštedjeti vrijeme na zadacima koji se ponavljaju i iskoristiti unaprijed izgrađene komponente.

Okviri pružaju skup unaprijed dizajniranih CSS stilova, rešetki izgleda i komponenti, omogućujući vam da se usredotočite na logiku i funkcionalnost aplikacije. Mnogi CSS okviri dolaze s opsežnom dokumentacijom i podrškom zajednice koja će vam dobro doći u slučaju da ikada zapnete.