Тази тънка рамка е чудесен начин за получаване на привлекателни уеб страници без много проблеми.

CSS е повсеместна, мощна технология за стилизиране, но може да бъде трудно да се работи с нея. Ето защо са налични CSS рамки като TailwindCSS и препроцесори като Less CSS и Sass.

Но понякога тези рамки или CSS „вкусове“ може да са излишни за проекта, върху който работите. Понякога искате рамка, която предлага основни функции, за да оформите своя уебсайт. Тук се намесва Pico CSS. Pico е минимална CSS рамка, която улеснява стилизирането на естествени HTML елементи.

Инсталиране на Pico CSS във вашия проект

Най-често срещаният начин да стартирате Pico CSS във вашия проект е да използвате a Мрежа за доставка на съдържание (CDN). Pico CSS е наличен в jsDelivr CDN, така че всичко, което трябва да направите, е да посочите pico.min.css файл, хостван там:

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

Като алтернатива можете да инсталирате Pico CSS с Мениджър на пакети на възли

instagram viewer
. За да работи този метод, уверете се, че сте инсталирали Node.js на вашата машина. Можете да потвърдите наличието на Node.js на вашата машина, като изпълните:

node -v

Ако Node.js е наличен, терминалът ще покаже неговата версия. Ако не сте го инсталирали, можете да научите как да накарате Node.js да работи на вашия компютър. Инсталирайте Pico CSS, като стартирате:

npm install @picocss/pico

Създаване на уебсайт с Pico CSS

Когато настройвате оформлението за вашия уебсайт, Pico CSS ви предоставя два класа, контейнер и решетка. Създайте нова папка и в тази папка създайте index.htm файл и a style.css файл. В index.htm файл, добавете следния шаблонен код:

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 е доста оголена. Можете да дефинирате решетка с решетка клас. В Pico CSS колоните на мрежата се свиват на устройства с ширина под 992px.

Точно под h1 етикет в тяло от index.htm файл, създайте мрежа с четири колони.

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

всеки див в мрежата трябва да има два класа: контейнер и карта. The контейнер class е собствен Pico CSS клас, който позволява центриран прозорец за изглед. След това попълнете мрежата с примерно съдържание като това:

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

За да се справите със стила, отворете style.css файл и добавете следното:

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

Когато отворите страницата в браузъра, трябва да видите следното:

Как да използвате бутони в Pico CSS

Pico CSS предлага голямо разнообразие от предварително стилизирани HTML елементи и компоненти. Един от най-често срещаните елементи във всеки уебсайт е бутонът.

Традиционно различните браузъри изобразяват бутоните малко по-различно. The бутон елемент в Pico CSS създава бутон с последователен стил в браузърите. За да го използвате, просто добавете бутон елемент както обикновено:

<button>This is a buttonbutton>

По подразбиране в Pico CSS бутоните заемат цялата ширина на контейнера си. Ако не ви харесва това поведение, уверете се, че сте задали роля атрибут на вграден HTML елемент към "button":

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

В Pico CSS, ако зададете ария-заето на "true" на всеки елемент, той автоматично ще добави индикатор за зареждане. Може да намерите тази функция за удобна, ако искате да съобщите на потребителя, че даден елемент не е готов за взаимодействие с него или че браузърът извлича някакъв ресурс.

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

Кодът по-горе ще доведе до следното:

Подсказките могат да бъдат трудни за прилагане, но Pico CSS се грижи за това. Това улеснява създаването на подсказка за който и да е елемент, без да е необходим фантастичен JavaScript. Когато създавате подсказка в Pico CSS, има два атрибута, които трябва да използвате:

  • подсказка за данни: Това дефинира съдържанието на подсказката.
  • поставяне на данни: Това определя позицията на подсказката. Можете да зададете този атрибут на една от четирите стойности: "отгоре", "вдясно", "отдолу" и "вляво".

Следният код ви показва как да използвате тази помощна програма:

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

Когато го стартирате в браузъра, трябва да видите следното:

Акордеони в Pico CSS

Акордеони позволяват на потребителите да превключват видимостта на секциите със съдържание, като ги разширяват или свиват, подобно на начина, по който музикален инструмент акордеон се разширява и свива. За да приложите тази функционалност в Pico CSS, използвайте подробности елемент:

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

Когато браузър показва това маркиране, той трябва да предлага средство за показване или скриване на съдържанието, в този случай стрелка за падащо меню:

Кога трябва да използвате CSS рамка

CSS рамките могат да ви помогнат да рационализирате процеса на изграждане и оформяне на уеб приложение. Трябва да обмислите използването на CSS рамка, ако искате да спестите време от повтарящи се задачи и да използвате предварително изградени компоненти.

Frameworks предоставят набор от предварително проектирани CSS стилове, решетки на оформление и компоненти, което ви позволява да се съсредоточите върху логиката и функционалността на приложението. Много CSS рамки идват с обширна документация и поддръжка от общността, които ще ви бъдат полезни, в случай че някога се затрудните.