Bu ince çerçeve, çok fazla güçlük çekmeden çekici web sayfaları elde etmenin harika bir yoludur.

CSS her yerde bulunan, güçlü bir şekillendirme teknolojisidir ancak onunla çalışmak zor olabilir. Bu nedenle TailwindCSS gibi CSS çerçeveleri ve Less CSS ve Sass gibi ön işlemciler mevcuttur.

Ancak bazen, bu çerçeveler veya CSS "çeşitleri", üzerinde çalıştığınız proje için gereğinden fazla olabilir. Bazen, web sitenize stil vermeniz için temel özellikleri sunan bir çerçeve istersiniz. Pico CSS'nin devreye girdiği yer burasıdır. Pico, yerel HTML öğelerine stil vermeyi kolaylaştıran minimal bir CSS çerçevesidir.

Projenize Pico CSS Kurulumu

Projenizde Pico CSS'yi çalışır duruma getirmenin en yaygın yolu, İçerik Dağıtım Ağı (CDN). Pico CSS, jsDelivr CDN'de mevcuttur, yani tek yapmanız gereken pico.min.css orada barındırılan dosya:

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

Alternatif olarak, Pico CSS'yi Düğüm Paket Yöneticisi. Bu yöntemin çalışması için makinenize Node.js yüklediğinizden emin olun. Aşağıdakileri çalıştırarak makinenizde Node.js'nin kullanılabilirliğini onaylayabilirsiniz:

instagram viewer 

node -v

Node.js varsa, terminal sürümünü gösterecektir. Eğer yüklü değilse, Node.js'yi bilgisayarınızda nasıl çalıştıracağınızı öğrenebilirsiniz. Çalıştırarak Pico CSS'yi kurun:

npm install @picocss/pico

Pico CSS ile Web Sitesi Oluşturma

Web siteniz için düzeni ayarlarken, Pico CSS size iki sınıf sağlar, konteyner Ve Kafes. Yeni bir klasör oluşturun ve bu klasörde bir index.htm dosya ve bir stil.css dosya. İçinde index.htm dosyasına aşağıdaki standart kodu ekleyin:

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

Pico CSS'deki Izgara Sistemi oldukça basit. ile bir ızgara tanımlayabilirsiniz. Kafes sınıf. Pico CSS'de ızgara sütunları, genişliği 992 pikselin altında olan cihazlarda daraltılır.

hemen altında h1 etiketle vücut arasında index.htm dosya, dört sütunlu bir ızgara oluşturun.

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

Her biri div ızgarada iki sınıf olmalıdır: konteyner Ve kart. bu konteyner sınıfı, ortalanmış bir görüntü alanı sağlayan yerel bir Pico CSS sınıfıdır. Ardından, ızgarayı bunun gibi bazı örnek içeriklerle doldurun:

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

Stili işlemek için stil.css dosya ve aşağıdakileri ekleyin:

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

Sayfayı tarayıcıda açtığınızda aşağıdakileri görmelisiniz:

Pico CSS'de Düğmeler Nasıl Kullanılır?

Pico CSS, çok çeşitli önceden biçimlendirilmiş HTML öğeleri ve bileşenleri sunar. Herhangi bir web sitesindeki en yaygın öğelerden biri düğmedir.

Geleneksel olarak, farklı tarayıcılar düğmeleri biraz farklı işler. bu düğme Pico CSS'deki öğesi, tarayıcılarda tutarlı stile sahip bir düğme oluşturur. Kullanmak için şunu eklemeniz yeterlidir: düğme eleman her zamanki gibi:

<button>This is a buttonbutton>

Varsayılan olarak, Pico CSS'de düğmeler kapsayıcılarının tüm genişliğini kaplar. Bu davranıştan hoşlanmıyorsanız, ayarladığınızdan emin olun. rol bir satır içi HTML öğesindeki özniteliği "düğme" olarak değiştirin:

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

Pico CSS'de ayarlarsanız arya meşgul herhangi bir öğede "true" olarak ayarlandığında, otomatik olarak bir yükleme göstergesi ekleyecektir. Kullanıcıya bazı öğelerin onunla etkileşime geçmeye hazır olmadığını veya tarayıcının bazı kaynakları getirdiğini bildirmek istiyorsanız bu özelliği kullanışlı bulabilirsiniz.

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

Yukarıdaki kod aşağıdaki sonucu verecektir:

Araç ipuçlarını uygulamak zor olabilir, ancak Pico CSS bununla ilgilenir. Süslü bir JavaScript'e ihtiyaç duymadan herhangi bir öğe üzerinde bir araç ipucu oluşturmayı kolaylaştırır. Pico CSS'de bir araç ipucu oluştururken kullanmanız gereken iki özellik vardır:

  • veri ipucu: Bu, araç ipucunun içeriğini tanımlar.
  • veri yerleştirme: Bu, araç ipucunun konumunu tanımlar. Bu özelliği şu dört değerden birine ayarlayabilirsiniz: "üst", "sağ", "alt" ve "sol".

Aşağıdaki kod, bu yardımcı programı nasıl kullanacağınızı gösterir:

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

Tarayıcıda çalıştırdığınızda, aşağıdakileri görmelisiniz:

Pico CSS'de akordeonlar

Akordeonlar, kullanıcıların içerik bölümlerinin görünürlüğünü, bir akordeon müzik aletinin genişleyip daralmasına benzer şekilde genişleterek veya daraltarak değiştirmesine olanak tanır. Bu işlevi Pico CSS'de uygulamak için şunu kullanın: detaylar öğe:

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

Bir tarayıcı bu işaretlemeyi görüntülediğinde, içeriği göstermek veya gizlemek için bir araç sunmalıdır, bu durumda bir açılır ok:

Ne Zaman CSS Çerçevesi Kullanmalısınız?

CSS çerçeveleri, bir web uygulaması oluşturma ve biçimlendirme sürecini kolaylaştırmanıza yardımcı olabilir. Yinelenen görevlerde zamandan tasarruf etmek ve önceden oluşturulmuş bileşenlerden yararlanmak istiyorsanız, bir CSS çerçevesi kullanmayı düşünmelisiniz.

Çerçeveler, uygulamanın mantığına ve işlevselliğine odaklanmanızı sağlayan bir dizi önceden tasarlanmış CSS stili, düzen ızgarası ve bileşen sağlar. Birçok CSS çerçevesi, takılıp kalmanız durumunda kullanışlı olacak kapsamlı belgeler ve topluluk desteği ile birlikte gelir.