Ši plona sistema yra puikus būdas sukurti patrauklius tinklalapius be didelio vargo.

CSS yra visur paplitusi, galinga stiliaus technologija, tačiau dirbti su ja gali būti sunku. Štai kodėl yra prieinamos CSS sistemos, tokios kaip TailwindCSS, ir išankstiniai procesoriai, tokie kaip Less CSS ir Sass.

Tačiau kartais šios sistemos arba CSS „skoniai“ gali būti pernelyg sudėtingi projektui, su kuriuo dirbate. Kartais jums reikia sistemos, kuri siūlo esmines svetainės stiliaus ypatybes. Čia atsiranda Pico CSS. „Pico“ yra minimali CSS sistema, leidžianti lengvai formuoti vietinių HTML elementų stilių.

„Pico CSS“ diegimas jūsų projekte

Dažniausias būdas sukurti ir paleisti „Pico CSS“ projekte yra naudoti a Turinio pristatymo tinklas (CDN). „Pico CSS“ galima rasti „jsDelivr“ CDN, todėl viskas, ką jums reikia padaryti, tai nurodyti pico.min.css ten patalpintas failas:

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

Arba galite įdiegti Pico CSS naudodami Mazgo paketų tvarkyklė

instagram viewer
. Kad šis metodas veiktų, įsitikinkite, kad įrenginyje įdiegėte Node.js. Galite patvirtinti, kad jūsų kompiuteryje yra Node.js, vykdydami:

node -v

Jei yra Node.js, terminale bus rodoma jo versija. Jei jo neįdiegėte, galite sužinoti, kaip sukurti ir paleisti Node.js kompiuteryje. Įdiekite „Pico CSS“ paleisdami:

npm install @picocss/pico

Svetainės kūrimas naudojant Pico CSS

Kai nustatote savo svetainės išdėstymą, „Pico CSS“ pateikia dvi klases, konteineris ir tinklelis. Sukurkite naują aplanką ir tame aplanke sukurkite index.htm failas ir a stilius.css failą. Viduje index.htm failą, pridėkite šį pagrindinį 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 tinklelio sistema

„Pico CSS“ tinklelio sistema yra gana švari. Galite apibrėžti tinklelį naudodami tinklelis klasė. „Pico CSS“ tinklelio stulpeliai sutraukiami įrenginiuose, kurių plotis mažesnis nei 992 pikseliai.

Tiesiai žemiau h1 žyma kūnas iš index.htm failą, sukurkite tinklelį su keturiais stulpeliais.

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

Kiekvienas div tinklelyje turi būti dvi klasės: konteineris ir kortelę. The konteineris klasė yra vietinė Pico CSS klasė, kuri įgalina centrinę peržiūros sritį. Tada užpildykite tinklelį tam tikru pavyzdiniu turiniu, pavyzdžiui:

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

Norėdami tvarkyti stilių, atidarykite stilius.css failą ir pridėkite:

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

Atidarę puslapį naršyklėje, turėtumėte pamatyti šiuos dalykus:

Kaip naudoti mygtukus „Pico CSS“.

„Pico CSS“ siūlo platų iš anksto sukurtų HTML elementų ir komponentų pasirinkimą. Vienas iš labiausiai paplitusių elementų bet kurioje svetainėje yra mygtukas.

Tradiciškai skirtingos naršyklės mygtukus pateikia šiek tiek skirtingai. The mygtuką elementas Pico CSS sukuria nuoseklaus stiliaus mygtuką visose naršyklėse. Norėdami jį naudoti, tiesiog pridėkite mygtuką elementas kaip įprasta:

<button>This is a buttonbutton>

Pagal numatytuosius nustatymus „Pico CSS“ mygtukai užima visą konteinerio plotį. Jei jums nepatinka toks elgesys, būtinai nustatykite vaidmenį eilutinio HTML elemento atributas "button":

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

„Pico CSS“, jei nustatėte aria-užimtas į „true“ bet kuriame elemente automatiškai pridės įkrovos indikatorių. Ši funkcija gali būti naudinga, jei norite pranešti vartotojui, kad tam tikras elementas nėra pasirengęs su juo sąveikauti arba kad naršyklė gauna tam tikrus išteklius.

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

Aukščiau pateiktas kodas bus toks:

Patarimus gali būti sudėtinga įgyvendinti, tačiau Pico CSS tuo pasirūpina. Tai leidžia lengvai sukurti bet kurio elemento patarimą, nereikalaujant jokio išgalvoto „JavaScript“. Kurdami patarimą „Pico CSS“, turite naudoti du atributus:

  • duomenų patarimas: tai apibrėžia patarimo turinį.
  • duomenų talpinimas: tai apibrėžia patarimo vietą. Šiam atributui galite nustatyti vieną iš keturių reikšmių: „viršuje“, „dešinėje“, „apačioje“ ir „kairėje“.

Šis kodas parodo, kaip naudoti šią priemonę:

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

Kai paleisite jį naršyklėje, turėtumėte pamatyti šiuos dalykus:

Akordeonai Pico CSS

Akordeonai leidžia vartotojams perjungti turinio skilčių matomumą jas išplečiant arba sutraukiant, panašiai kaip akordeono muzikos instrumentas plečiasi ir susitraukia. Norėdami įdiegti šią funkciją „Pico CSS“, naudokite detales elementas:

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

Kai naršyklė rodo šį žymėjimą, ji turėtų pasiūlyti priemonę rodyti arba paslėpti turinį, šiuo atveju išskleidžiamąją rodyklę:

Kada turėtumėte naudoti CSS sistemą

CSS sistemos gali padėti supaprastinti žiniatinklio programos kūrimo ir stiliaus kūrimo procesą. Turėtumėte apsvarstyti galimybę naudoti CSS sistemą, jei norite sutaupyti laiko atliekant pasikartojančias užduotis ir panaudoti iš anksto sukurtus komponentus.

Frameworks suteikia iš anksto sukurtų CSS stilių, išdėstymo tinklelių ir komponentų rinkinį, leidžiantį sutelkti dėmesį į programos logiką ir funkcionalumą. Daugelyje CSS sistemų yra daug dokumentų ir bendruomenės palaikymas, kuris pravers, jei kada nors užstrigtumėte.