Овај танки оквир је одличан начин за добијање атрактивних веб страница без много муке.

ЦСС је свеприсутна, моћна технологија стилизовања, али може бити тешко радити са њом. Због тога су доступни ЦСС оквири попут ТаилвиндЦСС и претпроцесори попут Лесс ЦСС и Сасс.

Али понекад, ови оквири или ЦСС „укуси“ могу бити претерани за пројекат на којем радите. Понекад желите оквир који нуди основне функције за стилизовање ваше веб странице. Овде долази Пицо ЦСС. Пицо је минимални ЦСС оквир који олакшава стилизовање изворних ХТМЛ елемената.

Инсталирање Пицо ЦСС-а у ваш пројекат

Најчешћи начин да покренете Пицо ЦСС у свом пројекту је да користите а Мрежа за испоруку садржаја (ЦДН). Пицо ЦСС је доступан на јсДеливр ЦДН-у, тако да све што треба да урадите је да покажете на пицо.мин.цсс фајл хостован тамо:

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

Алтернативно, можете инсталирати Пицо ЦСС са Ноде Пацкаге Манагер. Да би овај метод функционисао, уверите се да сте инсталирали Ноде.јс на своју машину. Можете да потврдите доступност Ноде.јс на вашој машини тако што ћете покренути:

instagram viewer 

node -v

Ако је Ноде.јс доступан, терминал ће приказати његову верзију. Ако га немате инсталиран, можете научити како да покренете Ноде.јс на свом рачунару. Инсталирајте Пицо ЦСС тако што ћете покренути:

npm install @picocss/pico

Креирање веб странице помоћу Пицо ЦСС-а

Када постављате изглед за своју веб локацију, Пицо ЦСС вам пружа две класе, контејнер и грид. Креирајте нови фолдер и у том фолдеру креирајте индек.хтм фајл и а стиле.цсс фајл. У индек.хтм датотеку, додајте следећи шаблонски код:

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>

Пицо ЦСС Грид систем

Мрежни систем у Пицо ЦСС-у је прилично једноставан. Можете дефинисати мрежу помоћу грид класа. У Пицо ЦСС-у, колоне мреже се скупљају на уређајима ширине испод 992 пиксела.

Тачно испод х1 таг у тело од индек.хтм датотеку, креирајте мрежу са четири колоне.

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

Сваки див у мрежи треба да има две класе: контејнер и картица. Тхе контејнер цласс је изворна Пицо ЦСС класа која омогућава центриран приказ. Затим попуните мрежу неким узорком садржаја попут овог:

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

Да бисте управљали стилом, отворите стиле.цсс датотеку и додајте следеће:

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

Када отворите страницу у претраживачу, требало би да видите следеће:

Како користити дугмад у Пицо ЦСС-у

Пицо ЦСС нуди широк избор унапред стилизованих ХТМЛ елемената и компоненти. Један од најчешћих елемената на било којој веб страници је дугме.

Традиционално, различити претраживачи приказују дугмад мало другачије. Тхе дугме елемент у Пицо ЦСС-у креира дугме са доследним стилом у свим претраживачима. Да бисте га користили, једноставно додајте дугме елемент као и обично:

<button>This is a buttonbutton>

Подразумевано, у Пицо ЦСС-у, дугмад заузимају целу ширину свог контејнера. Ако вам се не свиђа ово понашање, обавезно подесите улога атрибут на уграђеном ХТМЛ елементу на "буттон":

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

У Пицо ЦСС-у, ако подесите арија-заузет на "тачно" на било ком елементу, аутоматски ће додати индикатор учитавања. Можда ће вам ова функција бити згодна ако желите да саопштите кориснику да неки елемент није спреман за интеракцију са њим или да прегледач преузима неки ресурс.

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

Код изнад ће резултирати следећим:

Објашњење алата може бити тешко имплементирати, али Пицо ЦСС брине о томе. Олакшава креирање описа алата за било који елемент без потребе за било каквим фенси ЈаваСцрипт-ом. Када правите опис алата у Пицо ЦСС-у, потребно је да користите два атрибута:

  • дата-тоолтип: Ово дефинише садржај описа алата.
  • дата-плацемент: Ово дефинише позицију описа алата. Овај атрибут можете подесити на једну од четири вредности: "врх", "десно", "доле" и "лево".

Следећи код вам показује како да користите овај услужни програм:

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

Када га покренете у претраживачу, требало би да видите следеће:

Хармонике у Пицо ЦСС-у

Хармонике омогућавају корисницима да мењају видљивост секција садржаја тако што их проширују или скупљају, слично начину на који се музички инструмент хармонике шири и скупља. Да бисте имплементирали ову функционалност у Пицо ЦСС, користите детаљима елемент:

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

Када прегледач прикаже ову ознаку, требало би да понуди средство за приказивање или сакривање садржаја, у овом случају, стрелицу падајућег менија:

Када треба да користите ЦСС оквир

ЦСС оквири могу вам помоћи да поједноставите процес прављења и стилизовања веб апликације. Требало би да размислите о коришћењу ЦСС оквира ако желите да уштедите време на задацима који се понављају и да искористите унапред изграђене компоненте.

Оквири пружају скуп унапред дизајнираних ЦСС стилова, мрежа распореда и компоненти, омогућавајући вам да се фокусирате на логику и функционалност апликације. Многи ЦСС оквири долазе са обимном документацијом и подршком заједнице која ће вам добро доћи у случају да се икада заглавите.