Tämä ohut kehys on loistava tapa saada houkuttelevia verkkosivuja ilman paljon vaivaa.

CSS on kaikkialla läsnä oleva, tehokas muotoilutekniikka, mutta sen käyttäminen voi olla vaikeaa. Tästä syystä CSS-kehykset, kuten TailwindCSS, ja esiprosessorit, kuten Less CSS ja Sass, ovat saatavilla.

Mutta joskus nämä puitteet tai CSS: n "maut" voivat olla ylivoimaisia ​​työskennellylle projektille. Joskus haluat kehyksen, joka tarjoaa tärkeitä ominaisuuksia verkkosivustosi tyyliin. Tässä Pico CSS tulee käyttöön. Pico on minimaalinen CSS-kehys, jonka avulla on helppo muotoilla alkuperäisiä HTML-elementtejä.

Pico CSS: n asentaminen projektiisi

Yleisin tapa saada Pico CSS käyttöön projektissasi on käyttää a Content Delivery Network (CDN). Pico CSS on saatavilla jsDelivr CDN: ssä, joten sinun tarvitsee vain osoittaa pico.min.css siellä isännöity tiedosto:

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

Vaihtoehtoisesti voit asentaa Pico CSS: n kanssa Node Package Manager

. Jotta tämä menetelmä toimisi, varmista, että olet asentanut Node.js: n koneellesi. Voit varmistaa Node.js: n saatavuuden koneessasi suorittamalla:

node -v

Jos Node.js on saatavilla, pääte näyttää sen version. Jos sinulla ei ole sitä asennettuna, voit oppia saamaan Node.js: n käyntiin tietokoneellasi. Asenna Pico CSS suorittamalla:

npm install @picocss/pico

Verkkosivuston luominen Pico CSS: llä

Kun määrität verkkosivustosi asettelua, Pico CSS tarjoaa sinulle kaksi luokkaa, kontti ja ruudukko. Luo uusi kansio ja luo siihen kansioon index.htm tiedosto ja a tyyli.css tiedosto. Vuonna index.htm tiedosto, lisää seuraava yleiskoodi:

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

Pico CSS: n ruudukkojärjestelmä on melko paljaat. Voit määrittää ruudukon -painikkeella ruudukko luokkaa. Pico CSS: ssä ruudukon sarakkeet kutistuvat laitteissa, joiden leveys on alle 992 kuvapistettä.

Aivan alapuolella h1 -tunnisteen kehon -lta index.htm tiedosto, luo ruudukko, jossa on neljä saraketta.

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

Jokainen div ruudukossa tulisi olla kaksi luokkaa: kontti ja kortti. The kontti luokka on alkuperäinen Pico CSS -luokka, joka mahdollistaa keskitetyn näkymän. Täytä seuraavaksi ruudukko esimerkkisisällöllä, kuten tämä:

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

Voit käsitellä muotoilua avaamalla tyyli.css tiedosto ja lisää seuraava:

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: " -";
}

Kun avaat sivun selaimessa, sinun pitäisi nähdä seuraava:

Painikkeiden käyttäminen Pico CSS: ssä

Pico CSS tarjoaa laajan valikoiman valmiiksi muotoiltuja HTML-elementtejä ja komponentteja. Yksi yleisimmistä elementeistä millä tahansa verkkosivustolla on painike.

Perinteisesti eri selaimet näyttävät painikkeet hieman eri tavalla. The -painiketta elementti Pico CSS: ssä luo painikkeen, jonka tyyli on yhtenäinen kaikissa selaimissa. Jos haluat käyttää sitä, lisää vain -painiketta elementti tavalliseen tapaan:

<button>This is a buttonbutton>

Oletuksena Pico CSS: ssä painikkeet vievät säilön koko leveyden. Jos et pidä tästä käytöksestä, varmista, että asetat rooli HTML-elementin attribuutti "button":

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

Pico CSS: ssä, jos määrität aria-varattu arvoksi "true" missä tahansa elementissä, se lisää automaattisesti latausilmaisimen. Tämä ominaisuus saattaa olla kätevä, jos haluat ilmoittaa käyttäjälle, että jokin elementti ei ole valmis vuorovaikutukseen sen kanssa tai että selain hakee jotain resurssia.

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

Yllä oleva koodi johtaa seuraavaan:

Työkaluvinkkejä voi olla hankala toteuttaa, mutta Pico CSS huolehtii siitä. Sen avulla on helppo luoda työkaluvihje mille tahansa elementille ilman mitään hienoa JavaScriptiä. Kun luot työkaluvihjeen Pico CSS: ssä, sinun on käytettävä kahta attribuuttia:

  • data-työkaluvinkki: Tämä määrittää työkaluvihjeen sisällön.
  • tietojen sijoittaminen: Tämä määrittää työkaluvihjeen sijainnin. Voit asettaa tälle attribuutille yhden neljästä arvosta: "ylä", "oikea", "ala" ja "vasen".

Seuraava koodi näyttää, kuinka tätä apuohjelmaa käytetään:

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

Kun suoritat sen selaimessa, sinun pitäisi nähdä seuraava:

Haitarit Pico CSS: ssä

Harmonikan avulla käyttäjät voivat vaihtaa sisältöosioiden näkyvyyttä laajentamalla tai supistamalla niitä samalla tavalla kuin harmonikka-instrumentti laajenee ja supistuu. Ota tämä toiminto käyttöön Pico CSS: ssä käyttämällä yksityiskohdat elementti:

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

Kun selain näyttää tämän merkinnän, sen pitäisi tarjota keino näyttää tai piilottaa sisältö, tässä tapauksessa avattava nuoli:

Milloin sinun pitäisi käyttää CSS-kehystä

CSS-kehykset voivat auttaa sinua virtaviivaistamaan verkkosovelluksen rakentamis- ja muotoiluprosessia. Harkitse CSS-kehyksen käyttöä, jos haluat säästää aikaa toistuvissa tehtävissä ja hyödyntää valmiita komponentteja.

Kehykset tarjoavat joukon valmiiksi suunniteltuja CSS-tyylejä, asetteluruudukoita ja komponentteja, joiden avulla voit keskittyä sovelluksen logiikkaan ja toimivuuteen. Monien CSS-kehysten mukana tulee kattava dokumentaatio ja yhteisön tuki, jotka ovat hyödyllisiä, jos joskus joudut jumiin.