See õhuke raamistik on suurepärane viis atraktiivsete veebilehtede saamiseks ilma suurema vaevata.

CSS on üldlevinud võimas stiilitehnoloogia, kuid sellega võib olla raske töötada. Seetõttu on saadaval CSS-i raamistikud, nagu TailwindCSS, ja eelprotsessorid, nagu Less CSS ja Sass.

Kuid mõnikord võivad need raamistikud või CSS-i "maitsed" olla teie töötatava projekti jaoks üle jõu käivad. Mõnikord soovite raamistikku, mis pakub veebisaidi kujundamiseks olulisi funktsioone. Siin tuleb mängu Pico CSS. Pico on minimaalne CSS-i raamistik, mis muudab HTML-i algelementide stiilimise lihtsaks.

Pico CSS-i installimine teie projekti

Kõige tavalisem viis Pico CSS-i projektis käivitamiseks ja käivitamiseks on kasutada a Sisu edastamise võrk (CDN). Pico CSS on saadaval jsDelivr CDN-is, nii et peate vaid osutama sellele pico.min.css seal hostitud fail:

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

Teise võimalusena saate installida Pico CSS-i rakendusega Sõlme paketihaldur

instagram viewer
. Selle meetodi toimimiseks veenduge, et olete oma arvutisse installinud Node.js'i. Saate kontrollida Node.js-i saadavust oma arvutis, käivitades:

node -v

Kui Node.js on saadaval, kuvab terminal selle versiooni. Kui teil pole seda installitud, saate teada, kuidas Node.js arvutis tööle panna. Installige Pico CSS, käivitades:

npm install @picocss/pico

Veebisaidi loomine Pico CSS-iga

Oma veebisaidi paigutuse seadistamisel pakub Pico CSS teile kahte klassi, konteiner ja võre. Looge uus kaust ja looge selles kaustas index.htm fail ja a stiil.css faili. Aastal index.htm faili, lisage järgmine standardkood:

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-võrksüsteem

Pico CSS-i võrgusüsteem on üsna tühine. Saate määrata ruudustiku nupuga võre klass. Pico CSS-is ahenevad ruudustiku veerud seadmetes, mille laius on alla 992 piksli.

Otse all h1 märgendis keha selle index.htm faili, looge nelja veeruga ruudustik.

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

Iga div ruudustikus peaks olema kaks klassi: konteiner ja kaardile. The konteiner klass on Pico CSS-i klass, mis võimaldab tsentreeritud vaateporti. Järgmisena täitke ruudustik mõne näidissisuga, näiteks järgmiselt:

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

Stiili käsitlemiseks avage stiil.css faili ja lisage järgmine:

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

Kui avate lehe brauseris, peaksite nägema järgmist:

Kuidas Pico CSS-is nuppe kasutada

Pico CSS pakub laias valikus eelnevalt kujundatud HTML-i elemente ja komponente. Üks levinumaid elemente igal veebisaidil on nupp.

Traditsiooniliselt renderdavad erinevad brauserid nuppe veidi erinevalt. The nuppu Pico CSS-i element loob ühesuguse stiiliga nupu kõigis brauserites. Selle kasutamiseks lisage lihtsalt nuppu element nagu tavaliselt:

<button>This is a buttonbutton>

Vaikimisi hõivavad nupud Pico CSS-is kogu konteineri laiuse. Kui teile see käitumine ei meeldi, määrake kindlasti rolli atribuut tekstisisesel HTML-elemendil nupule "button":

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

Pico CSS-is, kui määrate aria-hõivatud mis tahes elemendi väärtuseks "tõene", lisab see automaatselt laadimisnäidiku. See funktsioon võib olla kasulik, kui soovite kasutajale teada anda, et mõni element ei ole valmis sellega suhtlema või et brauser tõmbab mõnda ressurssi.

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

Ülaltoodud kood annab tulemuseks järgmise:

Tööriistanäpunäiteid võib olla keeruline rakendada, kuid Pico CSS hoolitseb selle eest. See muudab tööriistaspikri loomise lihtsaks mis tahes elemendi kohta, ilma et oleks vaja mingit väljamõeldud JavaScripti. Pico CSS-is kohtspikri loomisel peate kasutama kahte atribuuti.

  • andmete tööriistavihje: see määrab kohtspikri sisu.
  • andmete paigutus: see määrab kohtspikri asukoha. Saate määrata selle atribuudi ühele neljast väärtusest: "top", "right", "bottom" ja "left".

Järgmine kood näitab, kuidas seda utiliiti kasutada:

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

Kui käivitate selle brauseris, peaksite nägema järgmist.

Akordionid Pico CSS-is

Akordionid võimaldavad kasutajatel muuta sisusektsioonide nähtavust, laiendades või ahendades neid, sarnaselt akordioni muusikariista laienemisele ja kokkutõmbumisele. Selle funktsiooni rakendamiseks Pico CSS-is kasutage üksikasjad 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>

Kui brauser kuvab selle märgistuse, peaks see pakkuma võimalust sisu kuvamiseks või peitmiseks, antud juhul rippmenüü noolt:

Millal peaksite kasutama CSS-i raamistikku?

CSS-i raamistikud aitavad teil veebirakenduse loomise ja stiili kujundamise protsessi sujuvamaks muuta. Kui soovite säästa aega korduvate ülesannete jaoks ja kasutada eelehitatud komponente, peaksite kaaluma CSS-i raamistiku kasutamist.

Raamistikud pakuvad eelnevalt kujundatud CSS-stiile, paigutusruudustikke ja komponente, võimaldades teil keskenduda rakenduse loogikale ja funktsionaalsusele. Paljud CSS-i raamistikud on varustatud ulatusliku dokumentatsiooni ja kogukonna toega, mis on abiks juhuks, kui kunagi peaks jänni jääma.