Dette slanke rammeverket er en flott måte å få attraktive nettsider på uten mye stress.

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.

Men noen ganger kan disse rammeverkene 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.

Installere Pico CSS i prosjektet ditt

Den vanligste måten å få Pico CSS i gang i prosjektet ditt er å bruke en Content Delivery Network (CDN). Pico CSS er tilgjengelig på jsDelivr CDN, så alt du trenger å gjøre er å peke på pico.min.css fil 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

instagram viewer
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 den installert, du kan lære hvordan du får Node.js i gang på datamaskinen din. 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 Nett. Opprett en ny mappe og opprett en i den mappen index.htm fil og en style.css fil. I index.htm fil, legg til følgende standardkode:

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 ganske bare bein. Du kan definere et rutenett med Nett klasse. I Pico CSS kollapser rutenettkolonnene på enheter med en bredde under 992 piksler.

Rett under h1 tag i kropp av index.htm fil, lag et rutenett med fire kolonner.

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

Hver div i rutenettet skal ha to klasser: container og kort. De container class er en innebygd Pico CSS-klasse som muliggjør en sentrert visningsport. Deretter fyller du rutenettet med noe eksempelinnhold 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 å håndtere stylingen, åpne style.css fil 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. De knapp element i Pico CSS skaper en knapp med konsekvent stil på tvers av nettlesere. For å bruke den, legg til knapp element som vanlig:

<button>This is a buttonbutton>

Som standard, i Pico CSS, tar knappene opp hele bredden av beholderen. Hvis du ikke liker denne oppførselen, sørg for at du stiller inn rolle attributt på et innebygd HTML-element til "knapp":

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

I Pico CSS, hvis du angir aria-opptatt 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.

<ahref="#"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.
  • dataplassering: Dette definerer posisjonen til verktøytipset. Du kan sette dette attributtet til en av fire verdier: "top", "right", "bottom" og "left".

Følgende kode viser deg hvordan du bruker dette verktøyet:

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