To tanko ogrodje je odličen način za pridobivanje privlačnih spletnih strani brez veliko težav.

CSS je vseprisotna, zmogljiva tehnologija oblikovanja, vendar je z njo težko delati. Zato so na voljo ogrodja CSS, kot je TailwindCSS, in predprocesorji, kot sta Less CSS in Sass.

Toda včasih so ti okviri ali "okusi" CSS lahko pretirani za projekt, na katerem delate. Včasih želite ogrodje, ki ponuja bistvene funkcije za oblikovanje vašega spletnega mesta. Tukaj nastopi Pico CSS. Pico je minimalno ogrodje CSS, ki olajša stiliziranje izvornih elementov HTML.

Namestitev Pico CSS v vaš projekt

Najpogostejši način za vzpostavitev in delovanje Pico CSS v vašem projektu je uporaba a Omrežje za dostavo vsebin (CDN). Pico CSS je na voljo na jsDelivr CDN, zato morate le pokazati na pico.min.css tam gostuje datoteka:

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

Druga možnost je, da namestite Pico CSS z Node Package Manager. Da bo ta metoda delovala, se prepričajte, da imate nameščen Node.js na vašem računalniku. Razpoložljivost Node.js na vašem računalniku lahko potrdite tako, da zaženete:

node -v

Če je Node.js na voljo, bo terminal prikazal njegovo različico. Če ga nimate nameščenega, se lahko naučite, kako pripraviti in zagnati Node.js v vašem računalniku. Namestite Pico CSS tako, da zaženete:

npm install @picocss/pico

Ustvarjanje spletne strani s Pico CSS

Ko nastavljate postavitev za vaše spletno mesto, vam Pico CSS ponuja dva razreda, posoda in mreža. Ustvarite novo mapo in v tej mapi ustvarite index.htm datoteka in a style.css mapa. V index.htm dodajte naslednjo kodo:

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>

Mrežni sistem Pico CSS

Mrežni sistem v Pico CSS je precej preprost. Mrežo lahko določite z mreža razred. V Pico CSS se stolpci mreže strnejo na napravah s širino pod 992 slikovnih pik.

Desno pod h1 oznako v telo od index.htm ustvarite mrežo s štirimi stolpci.

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

Vsak div v mreži mora imeti dva razreda: posoda in kartica. The posoda razred je izvorni razred Pico CSS, ki omogoča sredinsko vidno okno. Nato napolnite mrežo z nekaj vzorčne vsebine, kot je ta:

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

Če želite urediti oblikovanje, odprite style.css datoteko in dodajte naslednje:

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

Ko odprete stran v brskalniku, bi morali videti naslednje:

Kako uporabljati gumbe v Pico CSS

Pico CSS ponuja široko paleto vnaprej oblikovanih elementov in komponent HTML. Eden najpogostejših elementov na katerem koli spletnem mestu je gumb.

Tradicionalno različni brskalniki upodabljajo gumbe nekoliko drugače. The gumb element v Pico CSS ustvari gumb z doslednim slogom v vseh brskalnikih. Če ga želite uporabiti, preprosto dodajte gumb element kot običajno:

<button>This is a buttonbutton>

Privzeto v Pico CSS gumbi zavzemajo celotno širino vsebnika. Če vam to vedenje ni všeč, se prepričajte, da ste nastavili vlogo atribut v elementu HTML v vrstici za "button":

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

V Pico CSS, če nastavite arija-zaseden na »true« na katerem koli elementu, bo samodejno dodal indikator nalaganja. Ta funkcija se vam bo morda zdela priročna, če želite uporabniku sporočiti, da neki element ni pripravljen za interakcijo z njim, ali da brskalnik pridobiva vir.

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

Zgornja koda bo povzročila naslednje:

Namige orodij je lahko težavno implementirati, vendar Pico CSS poskrbi za to. Omogoča enostavno ustvarjanje namiga za kateri koli element, ne da bi potrebovali kakršen koli modni JavaScript. Ko ustvarjate opis orodja v Pico CSS, morate uporabiti dva atributa:

  • data-tooltip: To definira vsebino namiga orodja.
  • umestitev podatkov: To določa položaj namiga orodja. Ta atribut lahko nastavite na eno od štirih vrednosti: "zgoraj", "desno", "spodaj" in "levo".

Naslednja koda vam pokaže, kako uporabljati ta pripomoček:

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

Ko ga zaženete v brskalniku, bi morali videti naslednje:

Harmonike v Pico CSS

Harmonike uporabnikom omogočajo preklapljanje med vidnostjo razdelkov vsebine tako, da jih razširijo ali strnejo, podobno kot se glasbilo harmonika širi in krči. Za implementacijo te funkcije v Pico CSS uporabite podrobnosti 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>

Ko brskalnik prikaže to oznako, mora ponuditi način za prikaz ali skrivanje vsebine, v tem primeru puščico spustnega menija:

Kdaj uporabiti ogrodje CSS

Ogrodja CSS vam lahko pomagajo poenostaviti proces izdelave in oblikovanja spletne aplikacije. Razmislite o uporabi ogrodja CSS, če želite prihraniti čas pri ponavljajočih se nalogah in izkoristiti vnaprej zgrajene komponente.

Ogrodja zagotavljajo nabor vnaprej oblikovanih slogov CSS, mrež postavitve in komponent, ki vam omogočajo, da se osredotočite na logiko in funkcionalnost aplikacije. Veliko ogrodij CSS ima obsežno dokumentacijo in podporo skupnosti, ki vam bo prišla prav, če se kdaj zataknete.