En Innføring i Pico CSS: Et Minimalistisk Rammeverk for Nettstyling
CSS er en fundamental og potent teknologi for styling, men den kan noen ganger oppleves som komplisert. Derfor finnes det CSS-rammeverk som TailwindCSS, og forprosessorer som Less CSS og Sass, for å forenkle arbeidet.
DAGENS MUO-VIDEO
SCROLL NED FOR Å FORTSETTE LESINGEN
Noen ganger kan imidlertid disse rammeverkene eller CSS-«smakene» virke overveldende for prosjektet du jobber med. Av og til trenger du et rammeverk som tilbyr essensielle funksjoner for å style nettsiden din. Det er her Pico CSS kommer inn i bildet. Pico er et minimalistisk CSS-rammeverk som forenkler stylingen av vanlige HTML-elementer.
Installere Pico CSS i Ditt Prosjekt
Den vanligste metoden for å integrere Pico CSS i prosjektet ditt er å bruke et Content Delivery Network (CDN). Pico CSS er tilgjengelig på jsDelivr CDN, så alt du behøver å gjøre er å referere til filen «pico.min.css» som ligger 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, må du sørge for at Node.js er installert på maskinen din. Du kan verifisere tilgjengeligheten av Node.js ved å kjøre følgende kommando i terminalen:
node -v
Hvis Node.js er tilgjengelig, vil terminalen vise versjonen. Hvis du ikke har det installert, kan du finne informasjon om hvordan du installerer Node.js på datamaskinen din. Installer Pico CSS ved å kjøre:
npm install @picocss/pico
Opprette en Nettside med Pico CSS
Når du konfigurerer layouten for nettstedet ditt, tilbyr Pico CSS to klasser: «container» og «grid». Opprett en ny mappe, og lag en fil med navn «index.htm» og en annen fil med navn «style.css» i denne mappen. I «index.htm»-filen legger du til følgende grunnleggende 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>Artikler Verdt å Lese...</h1>
</div>
</body>
</html>
Pico CSS Grid System
Gridsystemet i Pico CSS er enkelt og funksjonelt. Du kan definere et rutenett med klassen «grid». I Pico CSS kollapser rutenettkolonnene på enheter som er smalere enn 992 piksler.
Rett under h1-taggen i body-delen av index.htm-filen lager du 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: «container» og «card». Klassen «container» er en innebygd Pico CSS-klasse som sørger for en sentrert viewport. Deretter fyller du rutenettet med eksempel innhold, slik som dette:
<div class="grid">
<div class="container card">
<img
src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
/>
<h4 class="title">Hvorfor synger fugler om morgenen?</h4>
<div class="metadata">
<span>David Uzondu</span>
<span>13 minutter siden</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
/>
<h4 class="title">Det Hemmelige Livet til Andunger</h4>
<div class="metadata">
<span>Sam Holland</span>
<span>53 minutter siden</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
/>
<h4 class="title">NASAs Nye Oppdrag: Sende Flat-Jordere til Kanten av Jorden for å Motbevise Dem</h4>
<div class="metadata">
<span>Simon Peterson</span>
<span>1 time siden</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
/>
<h4 class="title">Lokal Bestemor Vinner Internasjonal Hip-Hop Dansekonkurranse, Beviser at Alder Bare er et Tall</h4>
<div class="metadata">
<span>Anonym</span>
<span>2 dager siden</span>
</div>
</div>
</div>
For å håndtere stylingen, åpner du style.css-filen og legger 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, skal du se noe tilsvarende dette:
Hvordan Bruke Knapper i Pico CSS
Pico CSS tilbyr et bredt utvalg av forhåndsdefinerte HTML-elementer og komponenter. Et av de mest brukte elementene på et nettsted er knappen.
Tradisjonelt sett gjengir forskjellige nettlesere knapper litt forskjellig. Knappe-elementet i Pico CSS skaper en knapp med en konsistent stil på tvers av nettlesere. For å bruke det, legger du til knappe-elementet som vanlig:
<button>Dette er en knapp</button>
Som standard i Pico CSS, vil knapper fylle hele bredden av sin container. Hvis du ikke ønsker denne oppførselen, sørg for å sette «role»-attributtet til «button» på et innebygd HTML-element:
<a href="https.//www.google.com" role="button">Gå til Google</a>
Hvordan Bruke 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 dersom du ønsker å signalisere til brukeren at et element ikke er klart for interaksjon, eller at nettleseren er i ferd med å hente en ressurs.
<a href="#" aria-busy="true">Genererer Engangspassord, vennligst vent…</a>
Koden ovenfor vil resultere i følgende:
Verktøytips kan være vanskelig å implementere, men Pico CSS gjør det enkelt. Det gjør det lett å lage et verktøytips på et hvilket som helst element uten behov for fancy JavaScript. Når du oppretter et verktøytips i Pico CSS, må du bruke to attributter:
- data-tooltip: Dette definerer innholdet i verktøytipset.
- data-placement: Dette definerer plasseringen til verktøytipset. Du kan sette dette attributtet til en av fire verdier: «top», «right», «bottom» og «left».
Følgende kode viser hvordan du bruker dette verktøyet:
<button data-tooltip="Topp" data-placement="top">Topp</button> <button data-tooltip="Høyre" data-placement="right">Høyre</button> <button data-tooltip="Bunn" data-placement="bottom">Bunn</button> <button data-tooltip="Venstre" data-placement="left">Venstre</button>
Når du kjører denne koden i nettleseren, skal du se noe lignende dette:
Trekkspill i Pico CSS
Trekkspill lar brukerne endre synligheten til innholdsseksjoner ved å utvide eller kollapse dem, på samme måte som et trekkspillinstrument utvides og trekkes sammen. For å implementere denne funksjonaliteten i Pico CSS, bruker du detaljelementet:
<details>
<summary>Dette er et trekkspill</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, skal den tilby et middel til å vise eller skjule innholdet, i dette tilfellet en nedtrekks-pil:
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 ønsker å spare tid på repeterende oppgaver og utnytte forhåndsbygde komponenter.
Rammeverkene gir et sett med forhåndsdefinerte CSS-stiler, layourutenett og komponenter, slik at du kan fokusere på applikasjonens logikk og funksjonalitet. Mange CSS-rammeverk kommer med omfattende dokumentasjon og fellesskapsstøtte som kan være nyttig dersom du skulle stå fast.