Ez a karcsú keret nagyszerű módja annak, hogy vonzó weboldalakat készítsünk különösebb gond nélkül.

A CSS egy mindenütt elterjedt, erőteljes stílustechnológia, de nehéz lehet vele dolgozni. Ezért állnak rendelkezésre olyan CSS-keretrendszerek, mint a TailwindCSS, és olyan előfeldolgozók, mint a Less CSS és Sass.

De néha ezek a keretrendszerek vagy CSS "ízek" túlzásba eshetnek a projektben, amelyen dolgozik. Néha olyan keretrendszerre van szükség, amely alapvető funkciókat kínál webhelye stílusának kialakításához. Itt jön be a Pico CSS. A Pico egy minimális CSS-keretrendszer, amely megkönnyíti a natív HTML-elemek stílusát.

A Pico CSS telepítése a projektben

A Pico CSS projektben való üzembe helyezésének és futtatásának legáltalánosabb módja az a Content Delivery Network (CDN). A Pico CSS elérhető a jsDelivr CDN-n, így mindössze annyit kell tennie, hogy rámutat a pico.min.css ott tárolt fájl:

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

Alternatív megoldásként telepítheti a Pico CSS-t a

instagram viewer
Node Package Manager. Ahhoz, hogy ez a módszer működjön, győződjön meg arról, hogy telepítette a Node.js fájlt a számítógépére. A Node.js elérhetőségét a számítógépen a következő futtatásával ellenőrizheti:

node -v

Ha elérhető a Node.js, a terminál megjeleníti a verzióját. Ha nincs telepítve, megtudhatja, hogyan állíthatja be és futtassa a Node.js fájlt a számítógépén. Telepítse a Pico CSS-t a következő futtatásával:

npm install @picocss/pico

Weboldal készítése Pico CSS segítségével

A webhely elrendezésének beállításakor a Pico CSS két osztályt kínál, tartály és rács. Hozzon létre egy új mappát, és abban a mappában hozzon létre egy index.htm fájl és a stílus.css fájlt. Ban,-ben index.htm fájlt, adja hozzá a következő alapkódot:

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 rácsrendszer

A Pico CSS rácsrendszere meglehetősen csupasz. Egy rácsot definiálhat a rács osztály. A Pico CSS-ben a rácsoszlopok összecsukódnak a 992 képpontnál kisebb szélességű eszközökön.

Közvetlenül a h1 címke a test a index.htm fájlt, hozzon létre egy négy oszlopból álló rácsot.

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

Minden egyes div a rácsban két osztálynak kell lennie: tartály és kártya. A tartály osztály egy natív Pico CSS-osztály, amely lehetővé teszi a központosított nézetablakot. Ezután töltse fel a rácsot néhány mintatartalommal, például:

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

A stílus kezeléséhez nyissa meg a stílus.css fájlt, és adja hozzá a következőket:

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

Amikor megnyitja az oldalt a böngészőben, a következőket kell látnia:

A gombok használata a Pico CSS-ben

A Pico CSS az előre stílusos HTML elemek és összetevők széles választékát kínálja. Minden webhelyen az egyik leggyakoribb elem a gomb.

Hagyományosan a különböző böngészők kissé eltérően jelenítik meg a gombokat. A gomb elem a Pico CSS-ben egy olyan gombot hoz létre, amelynek stílusa egységes a böngészőkben. Használatához egyszerűen adja hozzá a gomb elem szokás szerint:

<button>This is a buttonbutton>

A Pico CSS-ben alapértelmezés szerint a gombok a tárolójuk teljes szélességét elfoglalják. Ha nem tetszik ez a viselkedés, feltétlenül állítsa be a szerep attribútum egy soron belüli HTML-elemen a "button"-hoz:

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

Pico CSS-ben, ha beállítod ária-foglalt Az "igaz" értékre bármely elemen automatikusan hozzáad egy töltésjelzőt. Ez a funkció hasznos lehet, ha azt szeretné közölni a felhasználóval, hogy bizonyos elemek nem állnak készen arra, hogy kapcsolatba lépjenek vele, vagy hogy a böngésző valamilyen erőforrást kér le.

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

A fenti kód a következőket eredményezi:

Az eszköztippek megvalósítása bonyolult lehet, de a Pico CSS gondoskodik erről. Segítségével bármilyen elemhez egyszerűen hozhat létre elemleírást anélkül, hogy bármilyen díszes JavaScript-re lenne szüksége. Amikor elemleírást hoz létre a Pico CSS-ben, két attribútumot kell használnia:

  • adat-eszköztipp: Ez határozza meg az eszköztipp tartalmát.
  • adatelhelyezés: Ez határozza meg az eszköztipp helyzetét. Ezt az attribútumot a négy érték egyikére állíthatja be: "top", "right", "bottom" és "left".

A következő kód megmutatja, hogyan kell használni ezt a segédprogramot:

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

Amikor a böngészőben futtatja, a következőket kell látnia:

Harmonikák a Pico CSS-ben

A harmonika lehetővé teszi a felhasználók számára, hogy kibővítve vagy összecsukják a tartalomrészek láthatóságát, hasonlóan ahhoz, ahogyan a harmonika hangszer kitágul és összehúzódik. Ennek a funkciónak a Pico CSS-ben való megvalósításához használja a részletek elem:

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

Amikor egy böngésző megjeleníti ezt a jelölést, lehetőséget kell kínálnia a tartalom megjelenítésére vagy elrejtésére, ebben az esetben egy legördülő nyilat:

Mikor érdemes CSS-keretrendszert használni?

A CSS-keretrendszerek segítségével leegyszerűsítheti a webalkalmazások létrehozásának és stílusának kialakítását. Érdemes megfontolni a CSS-keretrendszer használatát, ha időt szeretne megtakarítani az ismétlődő feladatokra, és kihasználni az előre elkészített összetevőket.

A keretrendszerek előre megtervezett CSS-stílusokat, elrendezési rácsokat és összetevőket biztosítanak, lehetővé téve, hogy az alkalmazás logikájára és funkcionalitására összpontosítson. Sok CSS-keretrendszer kiterjedt dokumentációval és közösségi támogatással érkezik, amely jól jöhet, ha elakadna.