CSS er en allestedsnærværende, kraftfuld stylingteknologi, men den kan være svær at arbejde med. Dette er grunden til, at CSS-frameworks som TailwindCSS og præprocessorer som Less CSS og Sass er tilgængelige.
DAGENS MUO-VIDEO
RUL FOR AT FORTSÆTTE MED INDHOLD
Men nogle gange kan disse rammer eller CSS “smag” være overkill for det projekt, du arbejder på. Nogle gange vil du have en ramme, der tilbyder væsentlige funktioner, så du kan style dit websted. Det er her Pico CSS kommer ind i billedet. Pico er en minimal CSS-ramme, der gør det nemt at style native HTML-elementer.
Indholdsfortegnelse
Installation af Pico CSS i dit projekt
Den mest almindelige måde at få Pico CSS op at køre i dit projekt er at bruge et Content Delivery Network (CDN). Pico CSS er tilgængelig på jsDelivr CDN, så alt hvad du skal gøre er at pege på filen pico.min.css, der er hostet 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 metode skal fungere, skal du sørge for, at du har installeret Node.js på din maskine. Du kan bekræfte tilgængeligheden af Node.js på din maskine ved at køre:
node -v
Hvis Node.js er tilgængelig, vil terminalen vise sin version. Hvis du ikke har det installeret, kan du lære, hvordan du får Node.js op at køre på din computer. Installer Pico CSS ved at køre:
npm install @picocss/pico
Oprettelse af en hjemmeside med Pico CSS
Når du opsætter layoutet til din hjemmeside, giver Pico CSS dig to klasser, container og grid. Opret en ny mappe, og opret en index.htm-fil og en style.css-fil i den mappe. I filen index.htm skal du tilføje 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 temmelig bare-bones. Du kan definere et gitter med gitterklassen. I Pico CSS kollapser gitterkolonnerne på enheder med en bredde under 992px.
Lige under h1-tagget i index.htm-filens brødtekst skal du oprette et gitter med fire kolonner.
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Hver div i gitteret skal have to klasser: beholder og kort. Containerklassen er en indbygget Pico CSS-klasse, der muliggør en centreret visningsport. Udfyld derefter gitteret med noget eksempelindhold 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 at håndtere stylingen skal du åbne filen style.css og tilføje 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 åbner siden i browseren, bør du se følgende:
Sådan bruges knapper i Pico CSS
Pico CSS tilbyder en bred vifte af præ-stylede HTML-elementer og komponenter. Et af de mest almindelige elementer på ethvert websted er knappen.
Traditionelt gengiver forskellige browsere knapper lidt forskelligt. Knapelementet i Pico CSS skaber en knap med ensartet stil på tværs af browsere. For at bruge det skal du blot tilføje knapelementet som normalt:
<button>This is a button</button>
Som standard fylder knapper i Pico CSS hele bredden af deres beholder. Hvis du ikke kan lide denne adfærd, skal du sørge for at indstille rolleattributten på et inline HTML-element til “knap”:
<a href="https.//www.google.com" role="button">Go To Google</a>
Sådan bruger du Loading Utility i Pico CSS
I Pico CSS, hvis du indstiller aria-optaget til “true” på ethvert element, vil det automatisk tilføje en indlæsningsindikator. Du kan finde denne funktion praktisk, hvis du ønsker at kommunikere til brugeren, at et element ikke er klar til, at de kan interagere med det, eller at browseren henter en ressource.
<a href="#" aria-busy="true">Generating One-Time Password, please wait…</a>
Ovenstående kode vil resultere i følgende:
Værktøjstip kan være vanskelige at implementere, men det tager Pico CSS sig af. Det gør det nemt at oprette et værktøjstip på ethvert element uden behov for noget fancy JavaScript. Når du opretter et værktøjstip i Pico CSS, er der to attributter, du skal bruge:
- data-værktøjstip: Dette definerer indholdet af værktøjstip.
- data-placering: Dette definerer positionen af værktøjstip. Du kan indstille denne egenskab til en af fire værdier: “top”, “højre”, “bund” og “venstre”.
Følgende kode viser dig, hvordan du bruger dette værktøj:
<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 kører det i browseren, bør du se følgende:
Harmonikaer i Pico CSS
Accordions lader brugere skifte synligheden af indholdssektioner ved at udvide eller kollapse dem, på samme måde som et harmonikainstrument udvider sig og trækker sig sammen. For at implementere denne funktionalitet i Pico CSS skal du bruge elementet detaljer:
<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 browser viser denne markering, bør den tilbyde et middel til at vise eller skjule indholdet, i dette tilfælde en rullepil:
Hvornår skal du bruge en CSS-ramme
CSS-rammer kan hjælpe dig med at strømline processen med at bygge og style en webapplikation. Du bør overveje at bruge en CSS-ramme, hvis du vil spare tid på gentagne opgaver og udnytte forudbyggede komponenter.
Frameworks giver et sæt foruddesignede CSS-stile, layoutgitter og komponenter, så du kan fokusere på applikationens logik og funktionalitet. Mange CSS-frameworks leveres med omfattende dokumentation og fællesskabssupport, som vil være praktisk, hvis du nogensinde skulle gå i stå.
