Pico CSS Tasarım Sistemi.

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

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

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();

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