Šis plāns ietvars ir lielisks veids, kā bez lielām grūtībām iegūt pievilcīgas tīmekļa lapas.

CSS ir visuresoša, jaudīga veidošanas tehnoloģija, taču ar to var būt grūti strādāt. Tāpēc ir pieejami CSS ietvari, piemēram, TailwindCSS, un priekšapstrādātāji, piemēram, Less CSS un Sass.

Taču dažreiz šie ietvari vai CSS “garšas” var būt pārspīlēti projektam, pie kura strādājat. Dažreiz jūs vēlaties ietvaru, kas piedāvā būtiskas funkcijas, lai jūs varētu veidot vietnes stilu. Šeit parādās Pico CSS. Pico ir minimāls CSS ietvars, kas atvieglo vietējo HTML elementu stilu veidošanu.

Pico CSS instalēšana jūsu projektā

Visizplatītākais veids, kā Pico CSS izveidot un darboties savā projektā, ir izmantot a Satura piegādes tīkls (CDN). Pico CSS ir pieejams jsDelivr CDN, tāpēc viss, kas jums jādara, ir jānorāda uz pico.min.css tur mitināts fails:

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

Varat arī instalēt Pico CSS, izmantojot Mezglu pakotņu pārvaldnieks. Lai šī metode darbotos, pārliecinieties, vai datorā esat instalējis Node.js. Varat apstiprināt Node.js pieejamību savā datorā, izpildot:

instagram viewer 

node -v

Ja Node.js ir pieejams, terminālis parādīs tā versiju. Ja jums tas nav instalēts, varat uzzināt, kā Node.js iestatīt un darboties savā datorā. Instalējiet Pico CSS, palaižot:

npm install @picocss/pico

Vietnes izveide, izmantojot Pico CSS

Iestatot vietnes izkārtojumu, Pico CSS piedāvā divas klases, konteiners un režģis. Izveidojiet jaunu mapi un šajā mapē izveidojiet index.htm fails un a stils.css failu. Iekš index.htm failu, pievienojiet šādu standarta kodu:

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 režģa sistēma

Pico CSS režģa sistēma ir diezgan tukša. Jūs varat definēt režģi ar režģis klasē. Programmā Pico CSS režģa kolonnas sakļaujas ierīcēs, kuru platums ir mazāks par 992 pikseļiem.

Tieši zem h1 tagā ķermeni no index.htm failu, izveidojiet režģi ar četrām kolonnām.

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

Katrs div režģī jābūt divām klasēm: konteiners un karti. The konteiners klase ir vietējā Pico CSS klase, kas nodrošina centrētu skata portu. Pēc tam aizpildiet režģi ar satura paraugu, piemēram:

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

Lai apstrādātu stilu, atveriet stils.css failu un pievienojiet šo:

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

Atverot lapu pārlūkprogrammā, jums vajadzētu redzēt šādu informāciju:

Kā lietot pogas Pico CSS

Pico CSS piedāvā plašu iepriekš noformētu HTML elementu un komponentu klāstu. Viens no visizplatītākajiem elementiem jebkurā vietnē ir poga.

Tradicionāli dažādas pārlūkprogrammas atveido pogas nedaudz atšķirīgi. The pogu elements Pico CSS izveido pogu ar konsekventu stilu visās pārlūkprogrammās. Lai to izmantotu, vienkārši pievienojiet pogu elements kā parasti:

<button>This is a buttonbutton>

Pēc noklusējuma Pico CSS pogas aizņem visu konteinera platumu. Ja jums nepatīk šī uzvedība, noteikti iestatiet lomu atribūts iekļautajā HTML elementā uz "poga":

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

Pico CSS, ja iestatāt ārija-aizņemts uz "true" jebkuram elementam, tas automātiski pievienos ielādes indikatoru. Šī funkcija var būt noderīga, ja vēlaties paziņot lietotājam, ka kāds elements nav gatavs mijiedarbībai ar to vai ka pārlūkprogramma ienes kādu resursu.

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

Iepriekš norādītais kods radīs sekojošo:

Rīka padomus var būt sarežģīti ieviest, taču Pico CSS par to parūpējas. Tas ļauj viegli izveidot rīka padomu jebkuram elementam, neizmantojot izdomātu JavaScript. Veidojot rīka padomu programmā Pico CSS, ir jāizmanto divi atribūti:

  • datu rīka padoms: tas nosaka rīka padoma saturu.
  • datu izvietošana: tas nosaka rīka padoma pozīciju. Šim atribūtam varat iestatīt vienu no četrām vērtībām: "augšējā", "pa labi", "apakšā" un "pa kreisi".

Šis kods parāda, kā izmantot šo utilītu:

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

Palaižot to pārlūkprogrammā, jums vajadzētu redzēt šādu informāciju:

Akordeoni Pico CSS

Akordeoni ļauj lietotājiem pārslēgt satura sadaļu redzamību, tās paplašinot vai sakļaujot, līdzīgi kā akordeona mūzikas instruments izplešas un saraujas. Lai ieviestu šo funkcionalitāti Pico CSS, izmantojiet detaļas elements:

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

Kad pārlūkprogramma parāda šo marķējumu, tai ir jāpiedāvā līdzeklis satura rādīšanai vai paslēpšanai, šajā gadījumā nolaižamajai bultiņai:

Kad jums vajadzētu izmantot CSS ietvaru

CSS ietvari var palīdzēt racionalizēt tīmekļa lietojumprogrammas izveides un stila veidošanas procesu. Apsveriet iespēju izmantot CSS ietvaru, ja vēlaties ietaupīt laiku atkārtotiem uzdevumiem un izmantot iepriekš izveidotos komponentus.

Frameworks nodrošina iepriekš izstrādātu CSS stilu, izkārtojuma režģu un komponentu kopu, ļaujot koncentrēties uz lietojumprogrammas loģiku un funkcionalitāti. Daudzām CSS ietvarām ir plaša dokumentācija un kopienas atbalsts, kas noderēs, ja kādreiz iestrēgsit.