CSS er en allestedsnærværende, kraftig stylingteknologi, men den kan være vanskelig å jobbe med. Dette er grunnen til at CSS-rammeverk som TailwindCSS og forprosessorer som Less CSS og Sass er tilgjengelige.
DAGENS MUO-VIDEO
RULL FOR Å FORTSETTE MED INNHOLD
Men noen ganger kan disse rammene eller CSS-«smakene» være overkill for prosjektet du jobber med. Noen ganger vil du ha et rammeverk som tilbyr viktige funksjoner for å style nettstedet ditt. Det er her Pico CSS kommer inn. Pico er et minimalt CSS-rammeverk som gjør det enkelt å style native HTML-elementer.
Innholdsfortegnelse
Installere Pico CSS i prosjektet ditt
Den vanligste måten å få Pico CSS i gang i prosjektet ditt er å bruke et Content Delivery Network (CDN). Pico CSS er tilgjengelig på jsDelivr CDN, så alt du trenger å gjøre er å peke på pico.min.css-filen som er vert der:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
Alternativt kan du installere Pico CSS med Node Package Manager. For at denne metoden skal fungere, sørg for at du har installert Node.js på maskinen din. Du kan bekrefte tilgjengeligheten av Node.js på maskinen din ved å kjøre:
node -v
Hvis Node.js er tilgjengelig, vil terminalen vise sin versjon. Hvis du ikke har det installert, kan du lære hvordan du får Node.js opp og kjører på datamaskinen. Installer Pico CSS ved å kjøre:
npm install @picocss/pico
Opprette et nettsted med Pico CSS
Når du setter opp layouten for nettstedet ditt, gir Pico CSS deg to klasser, container og grid. Opprett en ny mappe og opprett en index.htm-fil og en style.css-fil i den mappen. I index.htm-filen legger du til følgende boilerplate-kode:
<!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">
<h1>Articles Worth Reading...</h1>
</div>
</body>
</html>
Pico CSS Grid System
Grid-systemet i Pico CSS er ganske bare bein. Du kan definere et rutenett med rutenettklassen. I Pico CSS kollapser rutenettkolonnene på enheter med en bredde under 992 piksler.
Rett under h1-taggen i brødteksten til index.htm-filen, lag et rutenett med fire kolonner.
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Hver div i rutenettet skal ha to klasser: beholder og kort. Beholderklassen er en innebygd Pico CSS-klasse som muliggjør en sentrert visningsport. Deretter fyller du rutenettet med noe eksempelinnhold som dette:
<div class="grid">
<div class="container card">
<img
src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
/>
<h4 class="title">Why do birds sing in the morning?</h4>
<div class="metadata">
<span>David Uzondu</span>
<span>13 Minutes ago</span>
</div>
</div><div class="container card">
<img
src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
/>
<h4 class="title">The Secret Life of Ducklings</h4>
<div class="metadata">
<span>Sam Holland</span>
<span>53 Minutes ago</span>
</div>
</div><div class="container card">
<img
src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
/>
<h4 class="title">NASA's New Mission: Sending Flat-Earthers to
Edge of Earth to Prove Them Wrong</h4>
<div class="metadata">
<span>Simon Peterson</span>
<span>1 hour ago</span>
</div>
</div><div class="container card">
<img
src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
/>
<h4 class="title">Local Grandma Wins International Hip-Hop Dance Battle,
Proves Age is Just a Number</h4>
<div class="metadata">
<span>Anonymous</span>
<span>2 days ago</span>
</div>
</div>
</div>
For å håndtere stylingen, åpne style.css-filen og legg til følgende:
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: " -";
}
Når du åpner siden i nettleseren, bør du se følgende:
Slik bruker du knapper i Pico CSS
Pico CSS tilbyr et bredt utvalg av forhåndsstilte HTML-elementer og komponenter. Et av de vanligste elementene på et nettsted er knappen.
Tradisjonelt gjengir forskjellige nettlesere knapper litt annerledes. Knappeelementet i Pico CSS skaper en knapp med konsekvent stil på tvers av nettlesere. For å bruke det, legg til knappeelementet som vanlig:
<button>This is a button</button>
Som standard, i Pico CSS, tar knappene opp hele bredden av beholderen. Hvis du ikke liker denne oppførselen, sørg for at du setter rolleattributtet på et innebygd HTML-element til «knapp»:
<a href="https.//www.google.com" role="button">Go To Google</a>
Slik bruker du Loading Utility i Pico CSS
I Pico CSS, hvis du setter aria-busy til «true» på et hvilket som helst element, vil det automatisk legge til en lasteindikator. Du kan finne denne funksjonen nyttig hvis du ønsker å kommunisere til brukeren at et element ikke er klart for dem å samhandle med det, eller at nettleseren henter en ressurs.
<a href="#" aria-busy="true">Generating One-Time Password, please wait…</a>
Koden ovenfor vil resultere i følgende:
Verktøytips kan være vanskelig å implementere, men Pico CSS tar seg av det. Det gjør det enkelt å lage et verktøytips på ethvert element uten behov for noe fancy JavaScript. Når du oppretter et verktøytips i Pico CSS, er det to attributter du må bruke:
- data-verktøytips: Dette definerer innholdet i verktøytipset.
- data-plassering: Dette definerer posisjonen til verktøytipset. Du kan sette dette attributtet til en av fire verdier: «top», «right», «bottom» og «venstre».
Følgende kode viser deg hvordan du bruker dette verktøyet:
<button data-tooltip="Top" data-placement="top">Top</button>
<button data-tooltip="Right" data-placement="right">Right</button>
<button data-tooltip="Bottom" data-placement="bottom">Bottom</button>
<button data-tooltip="Left" data-placement="left">Left</button>
Når du kjører den i nettleseren, bør du se følgende:
Trekkspill i Pico CSS
Trekkspill lar brukere endre synligheten til innholdsseksjoner ved å utvide eller kollapse dem, på samme måte som et trekkspillinstrument utvider seg og trekker seg sammen. For å implementere denne funksjonaliteten i Pico CSS, bruk detaljelementet:
<details>
<summary>This is an accordion</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>
Når en nettleser viser denne markeringen, bør den tilby et middel til å vise eller skjule innholdet, i dette tilfellet en rullegardinpil:
Når bør du bruke et CSS-rammeverk
CSS-rammeverk kan hjelpe deg med å effektivisere prosessen med å bygge og style en nettapplikasjon. Du bør vurdere å bruke et CSS-rammeverk hvis du vil spare tid på repeterende oppgaver og utnytte forhåndsbygde komponenter.
Frameworks gir et sett med forhåndsdesignede CSS-stiler, layoutrutenett og komponenter, slik at du kan fokusere på applikasjonens logikk og funksjonalitet. Mange CSS-rammeverk kommer med omfattende dokumentasjon og fellesskapsstøtte som vil komme godt med i tilfelle du noen gang blir sittende fast.