Водич за почетнике за коришћење Пицо ЦСС-а

by
Tweet
Share
Share
Pin

CSS, sveprisutna i moćna tehnologija za stilizovanje, ponekad može predstavljati izazov. Zato su razvijeni CSS okviri poput Tailwind CSS-a i preprocesori kao što su Less CSS i Sass, kako bi olakšali ovaj posao.

MUO VIDEO DANA

PREĐITE DA NASTAVITE SA SADRŽAJEM

Ipak, u nekim situacijama, ovi okviri ili CSS „ukusi“ mogu biti previše opterećujući za projekat na kojem radite. Ponekad je potreban okvir koji nudi osnovne funkcije za stilizovanje vaše veb stranice. Tu na scenu stupa Pico CSS. Pico je minimalni CSS okvir koji pojednostavljuje stilizovanje izvornih HTML elemenata.

Instalacija Pico CSS-a u vaš projekat

Najčešći način za uključivanje Pico CSS-a u projekat jeste upotreba mreže za isporuku sadržaja (CDN). Pico CSS je dostupan na jsDelivr CDN-u, pa je potrebno samo da usmerite link ka datoteci pico.min.css koja se tamo nalazi:

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

Alternativno, Pico CSS možete instalirati pomoću Node Package Manager-a (NPM). Da bi ovaj metod funkcionisao, potrebno je da imate instaliran Node.js na vašem računaru. Možete proveriti da li je Node.js dostupan na vašem sistemu pokretanjem sledeće komande:

 node -v

Ako je Node.js instaliran, terminal će prikazati njegovu verziju. Ukoliko ga nemate instaliran, možete pronaći uputstva kako da to uradite na vašem operativnom sistemu. Za instalaciju Pico CSS-a, pokrenite sledeću naredbu:

 npm install @picocss/pico

Kreiranje veb stranice pomoću Pico CSS-a

Prilikom postavljanja izgleda veb stranice, Pico CSS pruža dve klase: `container` i `grid`. Kreirajte novi folder i u njemu napravite datoteku `index.html` i `style.css`. U datoteku `index.html` dodajte sledeći početni kod:

 <!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">
      <h2>Članci vredni čitanja...</h2>
    </div>
  </body>
</html>

Pico CSS Grid sistem

Grid sistem u Pico CSS-u je prilično jednostavan. Mrežu možete definisati pomoću klase `grid`. U Pico CSS-u, kolone mreže se skupljaju na uređajima širine ispod 992 piksela.

Odmah ispod `h2` oznake u telu datoteke `index.html`, kreirajte mrežu sa četiri kolone.

 <div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Svaki `div` u mreži treba da ima dve klase: `container` i `card`. Klasa `container` je izvorna Pico CSS klasa koja omogućava centrirani okvir za prikaz. Nakon toga, popunite mrežu sa nekim uzorkom sadržaja, kao što je prikazano ispod:

 <div class="grid">
  <div class="container card">
    <img
      src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
    />
    <h4 class="title">Zašto ptice pevaju ujutru?</h4>
    <div class="metadata">
      <span>David Uzondu</span>
      <span>Pre 13 minuta</span>
    </div>
  </div>
  <div class="container card">
    <img
      src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
    />
    <h4 class="title">Tajni život pačića</h4>
    <div class="metadata">
      <span>Sam Holland</span>
      <span>Pre 53 minuta</span>
    </div>
  </div>
  <div class="container card">
    <img
      src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
    />
    <h4 class="title">Nova NASA misija: Slanje ravnozemljaša na ivicu Zemlje da im se dokaže suprotno</h4>
    <div class="metadata">
      <span>Simon Peterson</span>
      <span>Pre 1 sat</span>
    </div>
  </div>
  <div class="container card">
    <img
      src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
    />
    <h4 class="title">Lokalna baka pobedila na međunarodnom hip-hop takmičenju, dokazujući da su godine samo broj</h4>
    <div class="metadata">
      <span>Anoniman</span>
      <span>Pre 2 dana</span>
    </div>
  </div>
</div>

Za upravljanje stilovima, otvorite datoteku `style.css` i dodajte sledeći CSS kod:

 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 pregledaču, trebalo bi da vidite sledeći rezultat:

Korišćenje dugmadi u Pico CSS-u

Pico CSS nudi veliki izbor unapred stilizovanih HTML elemenata i komponenti. Jedan od najčešćih elemenata na svakoj veb lokaciji je dugme.

Tradicionalno, različiti pregledači prikazuju dugmad malo drugačije. Element dugmeta u Pico CSS-u kreira dugme sa doslednim stilom u svim pregledačima. Da biste ga koristili, jednostavno dodajte element dugmeta kao i obično:

 <button>Ovo je dugme</button>

Podrazumevano, u Pico CSS-u dugmad zauzimaju celu širinu svog kontejnera. Ako vam se ne sviđa ovo ponašanje, obavezno postavite atribut `role` na ugrađenom HTML elementu na „dugme“:

 <a href="https://www.google.com" role="button">Idi na Google</a>

Korišćenje uslužnog programa za učitavanje u Pico CSS-u

U Pico CSS-u, ako postavite `aria-busy` na „true“ na bilo kom elementu, on će automatski dodati indikator učitavanja. Ova funkcija može biti korisna ako želite da obavestite korisnika da neki element nije spreman za interakciju ili da pregledač preuzima neki resurs.

 <a href="#" aria-busy="true">Generisanje jednokratne lozinke, molimo sačekajte...</a>

Gornji kod će rezultirati sledećim:

Objašnjenje alata može biti komplikovano za implementaciju, ali Pico CSS se brine o tome. Olakšava kreiranje opisa alata za bilo koji element bez potrebe za JavaScript kodom. Kada pravite opis alata u Pico CSS-u, potrebno je da koristite dva atributa:

  • `data-tooltip`: Ovim se definiše sadržaj opisa alata.
  • `data-placement`: Ovim se definiše pozicija opisa alata. Ovaj atribut možete postaviti na jednu od četiri vrednosti: „gore“, „desno“, „dole“ i „levo“.

Sledeći kod prikazuje kako se koristi ovaj uslužni program:

 <button data-tooltip="Gore" data-placement="top">Gore</button>
<button data-tooltip="Desno" data-placement="right">Desno</button>
<button data-tooltip="Dole" data-placement="bottom">Dole</button>
<button data-tooltip="Levo" data-placement="left">Levo</button>

Kada ovo pokrenete u pregledaču, treba da vidite sledeći rezultat:

Harmonike u Pico CSS-u

Harmonike omogućavaju korisnicima da menjaju vidljivost sekcija sadržaja tako što ih proširuju ili skupljaju, slično načinu na koji se muzički instrument harmonike širi i skuplja. Da biste implementirali ovu funkcionalnost u Pico CSS-u, koristite element `details`:

 <details>
   <summary>Ovo je harmonika</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>

Kada pregledač prikaže ovu oznaku, trebalo bi da ponudi mogućnost prikaza ili sakrivanja sadržaja, u ovom slučaju, strelicu padajućeg menija:

Kada treba koristiti CSS okvir

CSS okviri mogu vam pomoći da pojednostavite proces pravljenja i stilizovanja veb aplikacije. Trebalo bi da razmislite o korišćenju CSS okvira ako želite da uštedite vreme na zadacima koji se ponavljaju i da iskoristite gotove komponente.

Okviri pružaju skup unapred definisanih CSS stilova, mreža izgleda i komponenti, omogućavajući vam da se fokusirate na logiku i funkcionalnost aplikacije. Mnogi CSS okviri dolaze sa opsežnom dokumentacijom i podrškom zajednice, što može biti od velike pomoći u slučaju da naiđete na probleme.