Detta slimline ramverk är ett utmärkt sätt att få attraktiva webbsidor utan mycket krångel.

CSS är en allmänt förekommande, kraftfull stylingteknologi men den kan vara svår att arbeta med. Det är därför CSS-ramverk som TailwindCSS och förprocessorer som Less CSS och Sass är tillgängliga.

Men ibland kan dessa ramverk eller CSS "flavors" vara överdrivet för projektet du arbetar med. Ibland vill du ha ett ramverk som erbjuder viktiga funktioner för att styla din webbplats. Det är här Pico CSS kommer in. Pico är ett minimalt CSS-ramverk som gör det enkelt att styla inbyggda HTML-element.

Installera Pico CSS i ditt projekt

Det vanligaste sättet att få igång Pico CSS i ditt projekt är att använda en Content Delivery Network (CDN). Pico CSS är tillgängligt på jsDelivr CDN, så allt du behöver göra är att peka på pico.min.css fil som finns där:

<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>

Alternativt kan du installera Pico CSS med Node Package Manager

instagram viewer
. För att den här metoden ska fungera, se till att du har installerat Node.js på din dator. Du kan bekräfta tillgängligheten för Node.js på din maskin genom att köra:

node -v

Om Node.js är tillgängligt kommer terminalen att visa sin version. Om du inte har det installerat, du kan lära dig hur du får igång Node.js på din dator. Installera Pico CSS genom att köra:

npm install @picocss/pico

Skapa en webbplats med Pico CSS

När du ställer in layouten för din webbplats ger Pico CSS dig två klasser, behållare och rutnät. Skapa en ny mapp och skapa en i den mappen index.htm fil och en style.css fil. I den index.htm fil, lägg till följande typkod:

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 är ganska barbent. Du kan definiera ett rutnät med rutnät klass. I Pico CSS kollapsar rutnätskolumnerna på enheter med en bredd under 992px.

Precis nedanför h1 tagga i kropp av index.htm fil, skapa ett rutnät med fyra kolumner.

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

Varje div i rutnätet ska ha två klasser: behållare och kort. De behållare class är en inbyggd Pico CSS-klass som möjliggör en centrerad visningsport. Fyll sedan i rutnätet med något exempelinnehåll så här:

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

För att hantera stylingen, öppna style.css fil och lägg till följande:

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 öppnar sidan i webbläsaren bör du se följande:

Hur man använder knappar i Pico CSS

Pico CSS erbjuder ett brett utbud av förformaterade HTML-element och komponenter. En av de vanligaste elementen på alla webbplatser är knappen.

Traditionellt renderar olika webbläsare knappar något annorlunda. De knapp element i Pico CSS skapar en knapp med konsekvent stil i alla webbläsare. För att använda det, lägg bara till knapp element som vanligt:

<button>This is a buttonbutton>

Som standard, i Pico CSS, tar knappar upp hela bredden av sin behållare. Om du inte gillar detta beteende, se till att du ställer in roll attribut på ett inline HTML-element till "button":

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

I Pico CSS, om du ställer in aria-upptagen för att "sant" på något element kommer det automatiskt att lägga till en laddningsindikator. Du kan hitta den här funktionen praktiskt om du vill kommunicera till användaren att något element inte är redo för dem att interagera med det, eller att webbläsaren hämtar någon resurs.

<ahref="#"aria-busy="true">Generating One-Time Password, please wait…a>

Koden ovan kommer att resultera i följande:

Verktygstips kan vara knepiga att implementera, men Pico CSS tar hand om det. Det gör det enkelt att skapa ett verktygstips på vilket element som helst utan behov av något snyggt JavaScript. När du skapar ett verktygstips i Pico CSS finns det två attribut du behöver använda:

  • data-verktygstips: Detta definierar innehållet i verktygstipset.
  • dataplacering: Detta definierar positionen för verktygstipset. Du kan ställa in detta attribut till ett av fyra värden: "top", "right", "bottom" och "left".

Följande kod visar hur du använder detta verktyg:

<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ör det i webbläsaren bör du se följande:

Dragspel i Pico CSS

Dragspel låter användare växla synligheten för innehållssektioner genom att expandera eller komprimera dem, på samma sätt som ett dragspelsinstrument expanderar och drar ihop sig. För att implementera den här funktionen i Pico CSS, använd 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 webbläsare visar denna markering bör den erbjuda ett sätt att visa eller dölja innehållet, i det här fallet en rullgardinspil:

När ska du använda ett CSS-ramverk

CSS-ramverk kan hjälpa dig att effektivisera processen med att bygga och styla en webbapplikation. Du bör överväga att använda ett CSS-ramverk om du vill spara tid på repetitiva uppgifter och utnyttja förbyggda komponenter.

Frameworks tillhandahåller en uppsättning fördesignade CSS-stilar, layoutrutnät och komponenter, så att du kan fokusera på applikationens logik och funktionalitet. Många CSS-ramverk kommer med omfattande dokumentation och community-support som kommer att vara praktiskt om du någonsin skulle köra fast.