# Pico CSS Tasarım Sistemi

## Pico CSS Tasarım Sistemi Arayüz Önizlemesi

Satır genişliğini ve örnek metin boyutunu değiştirin, görünümü açıp kapatın ve yerel profili yerel bir iletişim penceresinde inceleyin.

## Pico CSS Tasarım Sistemi Tasarım Referansı

Pico CSS 2.1.1 varsayılan derlenmiş stil sayfası. İlk renk tanımları açık temaya aittir. Duyarlı kök yazı tipi boyutlandırması rem değerinin piksel karşılığını değiştirir; her görünüm alanında kök boyutun 16px olduğunu varsaymayın. Okuma genişlikleri ve 800px düzen kırılma noktası uygulamaya özgü tercihlerdir.

### Tipografi ve ritim

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --pico-font-family | var(--pico-font-family-sans-serif) | Sistem sans-serif ailesi takma adı. |
| --pico-line-height | 1.5 | Varsayılan gövde satır yüksekliği. |
| --pico-font-size | 100% | Duyarlı medya kurallarından önceki başlangıç kök boyutu. |
| --pico-spacing | 1rem | Temel aralık birimi. |
| --pico-typography-spacing-vertical | 1rem | Dikey metin ritmi. |
| --pico-grid-column-gap | var(--pico-spacing) | Yerel .grid sütunları arasındaki boşluk. |
| --pico-border-radius | 0.25rem | Varsayılan kontrol/kart biçimi. |
| --pico-border-width | 0.0625rem | Varsayılan sınır kalınlığı. |
| --pico-outline-width | 0.125rem | Odak dış çizgisi genişliği. |
| --pico-form-element-spacing-vertical | 0.75rem | Dikey giriş/düğme dolgusu. |
| --pico-form-element-spacing-horizontal | 1rem | Yatay giriş/düğme dolgusu. |
### Açık birincil roller

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --pico-primary | #0172ad | Bağlantı/birincil okuma rengi. |
| --pico-primary-background | #0172ad | Birincil düğme arka planı. |
| --pico-primary-hover | #015887 | Üzerine gelindiğinde birincil metin rengi. |
| --pico-primary-hover-background | #02659a | Üzerine gelindiğinde birincil düğme yüzeyi. |
| --pico-primary-focus | rgba(2, 154, 232, 0.5) | Odak vurgusu rengi. |
| --pico-primary-inverse | #fff | Birincil arka plan üzerindeki metin. |
| --pico-background-color | #fff | Sayfa yüzeyi. |
| --pico-color | #373c44 | Varsayılan gövde metni. |
| --pico-muted-color | #646b79 | İkincil metin. |
### Duyarlı kök boyutları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Base | 100% | Tarayıcı varsayılanı 16px ise 16px. |
| ≥576px | 106.25% | Aynı varsayımla 17px. |
| ≥768px | 112.5% | 18px. |
| ≥1024px | 118.75% | 19px. |
| ≥1280px | 125% | 20px. |
| ≥1536px | 131.25% | 21px. |
### Başlık boyutları ve uygulama kontrolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| h1 | 2rem / 1.125 | Resmî başlık boyutu ve satır yüksekliği. |
| h2 | 1.75rem / 1.15 | Resmî ikinci düzey başlık. |
| h3 | 1.5rem / 1.175 | Resmî üçüncü düzey başlık. |
| Reading measure | 48ch / 62ch / 72ch | Özgün, seçilebilir azami satır uzunlukları. |
| Sample scale | 90–125%; step 5 | Özgün aralık sınırları; yalnızca örnek metne uygulanır. |
| Composition breakpoint | 800px | Özgün iki sütundan tek sütuna geçiş kuralı. |
## Pico CSS Tasarım Sistemi Kapsamlı Kılavuz

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## Pico CSS Tasarım Sistemi: Anlamsal HTML Yüzeyine Genel Bakış

### Küçük bir semantik HTML yüzeyi

> Pico, her paragrafın, alanın veya düğmenin uzun bir bileşen sınıfı listesi taşımasını gerektirmek yerine tanıdık HTML öğelerini stillendirir. Bu örnekte article tercih kartını sağlar; başlığı ve altbilgisi sınırları belirler; etiketler de yerel input/select kontrollerini içerir. main öğesi container kullanır; çünkü bu, ayrı classless dağıtımı değil standart Pico derlemesidir.

Bu özellik, Pico’yu tarayıcının yerel kontrollerinin yeterli olduğu kompakt araçlar ve içerik odaklı arayüzler için kullanışlı kılar. Ancak tek başına bir formu uygulamaya dönüştürmez. Okuma örneği, inceleme özeti ve yerel sonuç JavaScript tarafından sağlanır; temel giriş anlambilimini ise tarayıcı yönetir.

Destekleyici belirtimi okuyun

## Pico CSS Tasarım Sistemi Tema Değişkenleri ve Anlamsal Roller

### Tema Değişkenleri ve Anlamsal Roller

Varsayılan birincil rol, gelişigüzel biçimde uygulanan tek bir renkten ibaret değildir. Pico; birincil metin, arka plan, üzerine gelme, odak ve ters renk değerlerini birbirinden ayırır. Referans tablosunda, marka özelleştirmesinin bu ilişkileri koruyabilmesi için gerçek açık tema tanımları listelenmiştir. Okuma arayüzündeki etiketler birincil metin rolünü kullanır; düğmeler ise bileşenin tüm stilini Pico’dan devralır.

Görünüm anahtarı, html üzerinde data-theme ayarlar. Açık veya koyu için belirlenen bir öznitelik, otomatik renk şeması seçimini geçersiz kılar. Özniteliği kaldırırsanız Pico, tarayıcının tercih ettiği renk şemasını izleyebilir. Demo, onay kutusu ile görsel görünümün eşleşmesini korumak için başlangıç modunu açıkça belirler. Özel bir birincil palet eklerken her iki renk şeması tanımını da geçersiz kılın; eksiksiz bir koyu tema için yalnızca açık kök değerini değiştirmek yeterli değildir.

Destekleyici belirtimi okuyun

## Pico CSS Tasarım Sistemi: Duyarlı Tipografi Tüm Ölçeği Değiştirir

### Duyarlı tipografi tüm ölçeği değiştirir

Pico, kök yazı tipi boyutunu çeşitli görünüm alanı genişliklerinde değiştirir: başlangıçta %100, ardından %106.25, %112.5, %118.75, %125 ve %131.25. Tarayıcının varsayılanı 16px olduğunda bunlar 16–21px aralığına karşılık gelir. Bileşen aralıkları rem kullandığından, rahat düzen metinle birlikte genişler. Bu nedenle bir rem olarak tanımlanan tasarım belirteci her zaman on altı piksele eşit değildir.

Örneğin kaydırıcısı yalnızca #sample font-size değerini, devralınan boyutun yüzdesi olarak değiştirir. Pico’nun kök değişkenini veya tarayıcının yakınlaştırma ayarını yeniden yazmaz. Bu ayrım, ayar kontrollerinin sabit kalmasını ve değişikliğin yerel kapsamda olmasını sağlar. Yerel çıktı, seçilen yüzdeyi gösterir. Başlık boyutları Pico’nun varsayılan değerlerini korur: h1 2rem, h2 ise 1.75rem’dir.

Destekleyici belirtimi okuyun

## Pico CSS Tasarım Sistemi: Satır Uzunluğu ve Okuma Düzeni

### Satır Uzunluğu ve Okuma Düzeni

Üç satır uzunluğu, ch birimiyle ifade edilmiş özgün tercihlerdir. Metni sütunun tamamını doldurmaya zorlamak yerine azami genişliği belirlerler. Mobil ekranda örnek metin, seçilen azami genişlikten daha dar olabilir; duyarlı bir azami genişlikte beklenen sonuç budur. Geniş bir tercihe uymak için yatay kaydırma gerekmez.

Özel okuma düzeninde iki minmax sütunu bulunur ve düzen 800px’nin altında tek sütuna iner. Bu eşik, bu düzene özgüdür; resmî bir Pico kırılma noktası değildir. Eşlenmiş inceleme/sıfırlama düğmeleri Pico’nun grid yardımcı sınıfını, iletişim kutusu altbilgisi ise satırları kaydırabilen bir flex satırını kullanır. Dar ekranlarda iki sütunlu düzeni korumak yerine okunabilir bir ayar paneli sunmaya öncelik verilir.

Destekleyici belirtimi okuyun

## Pico CSS Tasarım Sistemi: Kullanışlı Bir İnceleme Adımıyla Yerel Doğrulama

### Kullanışlı Bir İnceleme Adımıyla Yerel Doğrulama

Profil adı alanında required ve minlength ile ilişkili kısa yardım metni kullanılır. Yerel kısıt doğrulaması boş gönderimi engeller. Betik, iki boşluğun uygulama kuralını karşılamasını önlemek için kırpılmış değeri de denetler. Geçersiz bir event, Pico’nun geçersiz alan stilini uygulaması için aria-invalid ekler; yazmaya başlandığında özel hata ve artık geçerli olmayan öznitelik temizlenir.

Select ve range, standart tarayıcı kontrolleridir. Okuma örneğini anında güncellerken Review profile ayrı bir bekleyen nesnenin anlık görüntüsünü alır. İletişim kutusunda gösterilen metin ve Apply locally tarafından kullanılan veri bu anlık görüntüdür; böylece onay adımı yanlışlıkla bir değer kümesini açıklayıp başka bir değer kümesini uygulamaz.

1. Profil adını boş bırakıp Review profile seçeneğini deneyin.

2. Bir ad girin, genişlik seçin ve örnek boyutunu değiştirin.

3. Anlık görüntüyü inceleyin; düzenlemeye devam etmek için iptal edin veya yerel duruma uygulayın.

Destekleyici belirtimi okuyun

## Pico CSS Tasarım Sistemi: Stil Verilmiş Bir Katman Değil, Gerçek Bir Modal

### Yalnızca biçimlendirilmiş bir katman değil, gerçek bir modal

Pico, dialog öğesini ve içindeki article içeriğini stillendirir; ancak uygulama JavaScript sağlamaz. Bu örnek HTMLDialogElement.showModal kullanır. Tarayıcı, iletişim kutusunu üst katmana taşır, belgenin geri kalanını etkisizleştirir ve yerel Escape tuşuyla kapatma davranışı sağlar. Yalnızca open özniteliğini ayarlamak farklı ve modal olmayan bir davranış oluştururdu; burada bu yöntem kullanılmaz.

İletişim kutusunda, aria-labelledby başlığını gösterir. Kapatma düğmesinin erişilebilir etiketi açıkça belirtilmiştir; Keep editing ve Apply locally ise iki sonucu tanımlar. Her iki iptal düğmesi de kaydedilen durumu değiştirmeden iletişim kutusunu kapatır. Uygulama seçeneği, bekleyen profili görünür metne kaydeder ve iletişim kutusunu kapatır; localStorage’a yazmaz veya istek göndermez.

Destekleyici belirtimi okuyun

## Pico CSS Tasarım Sistemi: Açıklayıcı İçerik İçin Yerel Bir Disclosure

### Açıklayıcı içerik için yerel bir açılır bölüm

details/summary çifti, hangi kontrollerin örneği etkilediğini ve hangilerinin etkilemediğini açıklar. Bu davranış HTML öğesine ait olduğu için JavaScript olmadan gerçekten açılıp kapanabilir. summary, açıklayıcı bir soru sunar ve klavyeyle kullanılabilir. Açıklama destekleyici içeriktir; bu nedenle ana formu sürekli açık başka bir panelle kesintiye uğratmaz.

Kapalı ekran görüntüsü benzer görünüyor diye details öğesini stillendirilmiş bir başlıkla değiştirmeyin. Benzer şekilde, görünüm girdisi de gerçek bir ikili duruma sahip olması için role=switch ile birlikte type=checkbox olarak kalır. Pico stilleri anlamsal yapılara uygulanır; etkileşim sözleşmesinin büyük bölümünü bu yapılar sağlar.

- article, tercih yüzeyini görsel olarak gruplandırır.

- details ve summary, yerel açılır içeriği sağlar.

- showModal ile açılan dialog, modal inceleme sınırı oluşturur.

Destekleyici belirtimi okuyun

## Pico CSS Tasarım Sistemi: Bir Kez Yükleyin, Örneği Yeniden Üretilebilir Tutun

### Bir Kez Yükleyin, Örneği Yeniden Üretilebilir Tutun

Standart pakette derlenmiş bir pico.min.css bulunur. Dosyayı yerel assets klasörüne kopyalayın, uygulamanın düzen kurallarından önce ekleyin ve sağlanan app.js dosyasını defer ile yükleyin. İşaretlemenin tamamı, CSS ve betik yukarıda verilmiştir. Bu örnek için bir çerçeve sağlayıcısı, simge yazı tipi veya üçüncü taraf JavaScript eklentisi gerekmez.

Standart stil sayfasını container/grid sınıflarıyla tutarlı biçimde kullanın. Classless derlemesi farklı düzen varsayımlarına sahiptir, conditional derlemesi ise stilleri farklı biçimde kapsamlandırır; işaretlemeyi denetlemeden bu dağıtımlar arasında geçiş yapmak etkisiz bir optimizasyon değildir. Pico’yu mevcut bir siteye ekliyorsanız genel kullanıma açmadan önce öğe seçicilerinin mevcut form ve tipografi stilleriyle nasıl etkileştiğini inceleyin.

Destekleyici belirtimi okuyun

## Pico CSS Tasarım Sistemi: İşaretlemeyi Uyarlamadan Önce Dağıtımı Seçin

### İşaretlemeyi uyarlamadan önce dağıtım biçimini seçin

Bu örnek, standart dağıtımı ve onun container/grid yardımcılarını kullanır. Classless dağıtımı düzen varsayımlarını değiştirirken conditional dağıtımı Pico stillerini kapsamlandırır. Dağıtım seçimini, birbirinin yerine kullanılabilen bir dosya boyutu optimizasyonu değil, bir entegrasyon kararı olarak değerlendirin.

Mevcut bir sitede öğe seçicilerinin başlıklar, formlar, article öğeleri ve iletişim kutuları üzerindeki etkisini inceleyin. Okuma örneğinin yüzde cinsinden yazı tipi boyutu yerel bir geçersiz kılmadır ve yerel kalmalıdır; kök ölçeğini değiştirmek Pico’nun rem tabanlı aralıklarını ve kontrollerini de değiştirir. Belgenin hangi bölümlerinin temayı devralacağına karar verirken görünüm özniteliğiyle uygulama tercih kontrollerini uyumlu tutun.

Destekleyici belirtimi okuyun

## Pico CSS Tasarım Sistemi Bileşen Örnekleri

### Eksiksiz anlamsal okuma arayüzü

Etiketler denetimlerini sarar, article ayarlar kartını oluşturur, details açılır içeriği sağlar ve dialog inceleme adımını kapsar.

```
<main class="container"><header><p class="kicker">PICO CSS / READING ROOM</p><h1>A calmer reading setup</h1><p>Adjust a local reading profile. Semantic HTML does most of the work.</p></header><div class="reading-layout"><article><header><h2>Reading preferences</h2></header><form id="preferences"><label for="reader">Profile name<input id="reader" name="reader" required minlength="2" placeholder="Weekend reader" aria-describedby="name-help"></label><small id="name-help">At least two characters. Saved only for this open preview.</small><label for="measure">Reading width<select id="measure"><option value="48">Narrow — 48 characters</option><option value="62" selected>Balanced — 62 characters</option><option value="72">Wide — 72 characters</option></select></label><label for="scale">Text size <output id="size-label">100%</output><input id="scale" type="range" min="90" max="125" step="5" value="100"></label><label><input id="night" type="checkbox" role="switch"> Dark appearance</label><div class="grid"><button type="submit">Review profile</button><button type="reset" class="secondary outline">Reset</button></div></form><footer id="saved" role="status">No profile applied yet.</footer></article><section class="reading-copy"><p class="kicker">A SHORT SAMPLE</p><h2>Make space for attention.</h2><div id="sample"><p>The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.</p><p>A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.</p></div><details><summary>What changes in this preview?</summary><p>Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.</p></details></section></div><small>Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.</small></main><dialog id="review" aria-labelledby="review-title"><article><header><button id="close" aria-label="Close review" rel="prev"></button><h2 id="review-title">Review reading profile</h2></header><p id="review-text"></p><footer><button id="cancel" class="secondary">Keep editing</button><button id="apply">Apply locally</button></footer></article></dialog>
```

Kod referansı

- Bu öğelere Pico stil verir; yerel davranışı tarayıcı API’leri sağlar.

- Dialog, open niteliği eklenerek değil, showModal ile açılır.

### Özgün profil etkileşimi

Canlı stiller, yerel doğrulama, güvenli inceleme metni ve yerel uygulama/sıfırlama davranışı.

```
const $=id=>document.getElementById(id);let pending=null;
function update(){ $('sample').style.maxWidth=$('measure').value+'ch';$('sample').style.fontSize=$('scale').value+'%';$('size-label').value=$('scale').value+'%';document.documentElement.dataset.theme=$('night').checked?'dark':'light';}
for(const id of ['measure','scale','night'])$(id).addEventListener('input',update);
$('preferences').addEventListener('submit',event=>{event.preventDefault();pending={name:$('reader').value.trim(),width:$('measure').value,size:$('scale').value,dark:$('night').checked};if(pending.name.length<2){$('reader').setCustomValidity('Use at least two non-space characters.');$('reader').reportValidity();return;}$('review-text').textContent=`${pending.name}: ${pending.width}-character maximum, ${pending.size}% sample text, ${pending.dark?'dark':'light'} appearance. This will apply only to this preview.`;$('review').showModal();});
$('reader').addEventListener('input',()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid')});$('reader').addEventListener('invalid',()=>{$('reader').setAttribute('aria-invalid','true')});
for(const id of ['close','cancel'])$(id).addEventListener('click',()=>$('review').close());
$('apply').addEventListener('click',()=>{$('saved').textContent=`Applied ${pending.name} locally (${pending.width}ch, ${pending.size}%, ${pending.dark?'dark':'light'}). Reloading clears this profile.`;$('review').close();});
$('preferences').addEventListener('reset',()=>{setTimeout(()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid');$('saved').textContent='No profile applied yet.';update()},0)});update();
```

Kod referansı

- Profil bu belgenin dışına çıkmaz.

- Yalnızca boşluklardan oluşan adlar setCustomValidity ile reddedilir.

### Okuma düzeni

Açık uygulama kuralları, ayarlar panelini örnekten ayırır.

```
main.container{max-width:1120px;padding:2rem 1rem}.kicker{font-size:.7rem;letter-spacing:.13em;font-weight:700;color:var(--pico-primary)}.reading-layout{display:grid;grid-template-columns:minmax(260px,.95fr) minmax(0,1.05fr);gap:2rem;align-items:start}.reading-copy{padding-top:1rem}#sample{transition:font-size .15s}output{float:right}#review article{max-width:560px}#review footer{display:flex;flex-wrap:wrap;gap:.5rem}#review footer button{flex:1}h1{max-width:20ch}header>p{max-width:65ch}@media(max-width:800px){.reading-layout{grid-template-columns:1fr;gap:1rem}}
```

Kod referansı

- 800px kesme noktası ve ch ölçüleri özel tercihlerdir.

## Pico CSS Tasarım Sistemi Aracı Kurulumu

### Uygulamaya Başlangıç Noktası

Yukarıdaki örneklerin tamamını body, style.css ve app.js dosyalarına kaydedin. Bağımsız önizlemede aynı resmî CSS ve özgün uygulama kodu satır içine eklenmiştir. Yerel dialog API için tarayıcıların mevcut desteğini kullanır. HTML sarmalayıcısı body işaretlemesinin tamamını içerir; sağlanan etkileşim ve CSS örneklerini burada belirtilen dosya adlarıyla kaydedin.

```
<!-- npm install @picocss/pico@2.1.1
mkdir -p assets
cp node_modules/@picocss/pico/css/pico.min.css assets/pico.min.css -->
<!doctype html>
<html lang="en" data-theme="light">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Reading room</title>
<link rel="stylesheet" href="assets/pico.min.css">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script></head>
<body><main class="container"><header><p class="kicker">PICO CSS / READING ROOM</p><h1>A calmer reading setup</h1><p>Adjust a local reading profile. Semantic HTML does most of the work.</p></header><div class="reading-layout"><article><header><h2>Reading preferences</h2></header><form id="preferences"><label for="reader">Profile name<input id="reader" name="reader" required minlength="2" placeholder="Weekend reader" aria-describedby="name-help"></label><small id="name-help">At least two characters. Saved only for this open preview.</small><label for="measure">Reading width<select id="measure"><option value="48">Narrow — 48 characters</option><option value="62" selected>Balanced — 62 characters</option><option value="72">Wide — 72 characters</option></select></label><label for="scale">Text size <output id="size-label">100%</output><input id="scale" type="range" min="90" max="125" step="5" value="100"></label><label><input id="night" type="checkbox" role="switch"> Dark appearance</label><div class="grid"><button type="submit">Review profile</button><button type="reset" class="secondary outline">Reset</button></div></form><footer id="saved" role="status">No profile applied yet.</footer></article><section class="reading-copy"><p class="kicker">A SHORT SAMPLE</p><h2>Make space for attention.</h2><div id="sample"><p>The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.</p><p>A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.</p></div><details><summary>What changes in this preview?</summary><p>Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.</p></details></section></div><small>Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.</small></main><dialog id="review" aria-labelledby="review-title"><article><header><button id="close" aria-label="Close review" rel="prev"></button><h2 id="review-title">Review reading profile</h2></header><p id="review-text"></p><footer><button id="cancel" class="secondary">Keep editing</button><button id="apply">Apply locally</button></footer></article></dialog>
</body>
</html>
```

### Projeniz İçin Bir İstem

```
Standart stil sayfası, anlamsal article, yerel form ve details açılır içeriğiyle Pico 2.1.1 okuma profili örneğini kullanın. Metin boyutu ve satır uzunluğu değişikliklerini yalnızca örneğe uygulayın; görünüm onay kutusunu data-theme ile eşzamanlayın. Kırpılmış profil adını doğrulayın, inceleme anlık görüntüsünü alın ve dialog.showModal ile açın; iptal edildiğinde profil uygulanmamalıdır. Yalnızca alınan yerel profili uygulayın ve yerel form varsayılanları geri yüklendikten sonra sıfırlayın. Pico’nun duyarlı kök ölçeğini koruyun; örneğin metin boyutu ayarıyla değiştirmeyin.
```

## Pico CSS Tasarım Sistemi Kaynakları ve Kapsamı

Pico CSS 2.1.1. Varsayılan belirteçler, özgün okuma düzeni ve profil kurallarından ayrılmıştır. Kalıcı depolama veya uzak hizmet uygulanmamıştır.

- CSS değişkenleri Gerçek stil ve renk tanımları.

- Tipografi Anlamsal başlıklar ve tipografi.

- Formlar Yerel form bileşimi.

- Modal Dialog stili ve uygulama davranışının sınırı.

- Izgara Duyarlı düzen yardımcısı.

- Açılır bölüm Details ve summary açılır içeriği.

## Pico CSS Tasarım Sistemiyle İlgili Kaynaklar

### Preline UI

Bağlantılı sekmeler, sınırlandırılmış bir input-number eklentisi, yüklü tema takma adları, gerçek Tailwind ölçekleri ve seçilen oturuma göre güncellenen yerel bir malzeme tahmini içeren yerel bir Preline oturum planlayıcısı.

### Prime UI

Prime UI ekosisteminin sürümü sabitlenmiş bir PrimeVue uygulaması: gerçek ön ayar referansları, denetimli genişletme, filtreleme, seçim ve yerel sabitleme içeren Aura temalı bir belge ağacı.

### Pure CSS

Pure CSS; çalışma zamanı bileşenleri olmadan ızgaralar, formlar, düğmeler, menüler ve tablolar için kullanılan modüler bir stil sayfasıdır. Bu kılavuz, isteğe bağlı duyarlı ızgara modülünün ve yerel anlamsal öğelerin filtrelenebilir bir ekipman kataloğunda nasıl birlikte çalıştığını gösterir; sıralama ve seçim açıkça uygulanmıştır.


- [Uygulama başvurusu](https://picocss.com/docs/forms)
- [Kaynak](https://picocss.com/docs/css-variables)
- [Destekleyici belirtimi okuyun](https://picocss.com/docs/forms)
- [Destekleyici belirtimi okuyun](https://picocss.com/docs/css-variables)
- [Destekleyici belirtimi okuyun](https://picocss.com/docs/typography)
- [Destekleyici belirtimi okuyun](https://picocss.com/docs/grid)
- [Destekleyici belirtimi okuyun](https://picocss.com/docs/modal)
- [Destekleyici belirtimi okuyun](https://picocss.com/docs/accordion)
- [Kod referansı](https://picocss.com/docs/modal)
- [Kod referansı](https://picocss.com/docs/forms)
- [Kod referansı](https://picocss.com/docs/grid)
- [CSS değişkenleri Gerçek stil ve renk tanımları.](https://picocss.com/docs/css-variables)
- [Tipografi Anlamsal başlıklar ve tipografi.](https://picocss.com/docs/typography)
- [Formlar Yerel form bileşimi.](https://picocss.com/docs/forms)
- [Modal Dialog stili ve uygulama davranışının sınırı.](https://picocss.com/docs/modal)
- [Izgara Duyarlı düzen yardımcısı.](https://picocss.com/docs/grid)
- [Açılır bölüm Details ve summary açılır içeriği.](https://picocss.com/docs/accordion)