Denne slanke ramme er en fantastisk måde at få attraktive websider på uden en masse besvær.

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.

Men nogle gange kan disse frameworks eller CSS "flavors" 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.

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 en Content Delivery Network (CDN). Pico CSS er tilgængelig på jsDelivr CDN, så alt du skal gøre er at pege på pico.min.css fil 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

instagram viewer
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, du kan 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, beholder og gitter. Opret en ny mappe, og opret en i den mappe index.htm fil og en style.css fil. I den index.htm fil, skal du tilføje følgende kedelkode:

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

Grid-systemet i Pico CSS er temmelig bare-bones. Du kan definere et gitter med gitter klasse. I Pico CSS kollapser gitterkolonnerne på enheder med en bredde under 992px.

Lige under h1 tag i legeme af index.htm fil, skal du oprette et gitter med fire kolonner.

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

Hver div i gitteret skal have to klasser: beholder og kort. Det beholder klasse er en indbygget Pico CSS-klasse, der muliggør en centreret visningsport. Udfyld derefter gitteret med noget eksempelindhold som dette:

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

For at håndtere stylingen skal du åbne style.css fil og tilføj 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. Det knap element i Pico CSS skaber en knap med ensartet stil på tværs af browsere. For at bruge det skal du blot tilføje knap element som normalt:

<button>This is a buttonbutton>

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 rolle attribut på et inline HTML-element til "button":

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

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 vil kommunikere til brugeren, at et element ikke er klar til, at de kan interagere med det, eller at browseren henter en ressource.

<ahref="#"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 placeringen 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:

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

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

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