KERN Tasarım Sistemi Yerel HTML, CSS ve tarayıcı davranışı
Paketin sağladıkları
KERN native 2.8.2, bileşen CSS dosyasını ve yazı tiplerini içerir. Örnek, bu dosyaları doğrudan içe aktarır: düğme, metin alanı, Details ve Dialog, KERN sınıflarına sahip yerel öğelerdir. React sağlayıcısına veya JavaScript bileşen oluşturucusuna gerek yoktur. Dialog çevresindeki karar mantığını uygulama sağlar; yalnızca stil vermek bir girdiyi temizlemez.
Sabitlenmiş yerel paketi yükleyin.
Göreli yolları koruyarak stil sayfasını ve yazı tiplerini birlikte kopyalayın.
Aşağıdaki eksiksiz örneği kaydedin ve dizini HTTP üzerinden sunun.
KERN Tasarım Sistemi Fira Sans ve uyarlanabilir tipografi
Tipografiyi açıkça yükleyin
kern.min.css, Fira Sans’ı belirtir; fonts/fira-sans.css ise gerçek yazı tipi yüzlerini ve göreli WOFF2 varlıklarını tanımlar. Yazı tipi dizinini olduğu gibi korumak, görünüşte doğru bir stil sayfasının sessizce başka bir yazı tipine geçmesini önler. Statik metin boyutları 16, 18 ve 21px olarak kalırken uyarlanabilir başlık belirteçleri 768px’de değişir. Hiyerarşi için bir başlık öğesi, görsel stil için de uygun KERN sınıfını kullanın. Örnek tek bir h1 kullanır ve dialog için ayrı bir h2 tanımlar.
KERN Tasarım Sistemi Boşluk, genişlik ve duyarlı düzen
Belirteçleri düzen kompozisyonundan ayırın
KERN, küçük boyutlarda 2px ve 4px artışlar da içeren, 0 ile 192px arasındaki adlandırılmış boşluk belirteçlerini sunar. Kenarlık ve köşe yarıçapı belirteçleri ayrı ölçeklerdir. Örnek, 24px’lik dikey ritim ve satır kaydırabilen bir eylem satırı kullanır. 800px’lik içerik üst sınırı ve 560px’lik dialog sınırı, uygulamaya özgü açık tercihlerdir; hiçbiri evrensel bir KERN kapsayıcısı olarak sunulmaz. Dar ekranlarda sayfa dolgusu 16px’e iner ve dialog genişliği görüntü alanı içinde kalır. Belgede görüntü alanı yüksekliğine ilişkin bir minimum uygulanmaz; böylece gömülü kullanımda yeniden boyutlandırma geri bildirim döngüsü oluşmaz.
Yalıtılmış onaltılık değerleri değil, rolleri değiştirin
Paket; metin, eylem, arka plan ve odak için anlamsal CSS özelliklerini kullanır. Açık ve koyu paletlerde bu roller birlikte değişir. Örneğin action-default, açık modda darkblue-700 ile, koyu modda darkblue-300 ile eşleşirken ön plan rengi beyazdan siyaha döner. Örnek, html üzerinde data-kern-theme ayarlar ve basılı durumunu bildiren bir düğme sunar. Tercih yalnızca bu belge boyunca geçerlidir; kaydedilmez. Açık özniteliği kaldırmak, stil sayfasının prefers-color-scheme değerini izlemesini sağlar.
KERN Tasarım Sistemi Etiketli, düzenlenebilir bir not
Yönergeleri erişilebilir tutun
Metin alanı, kern-form-input içinde kern-form-input__input kullanır ve gerçek bir etiket, input id değerine bağlanır. İpucunun kendine ait bir id değeri vardır ve aria-describedby aracılığıyla bağlı kalır. Bu, isteğe bağlı yerel bir nottur; bu nedenle örnek, zorunlu alan hataları veya sunucuya kayıt işlevi uydurmaz. Örneği geri yükleme işlemi başlangıç değerini ayarlar ve düzenlenebilir alana odaklanır. Bir durum bölgesi, etiketi değiştirmeden veya odağı etkileşimsiz metne taşımadan sonucu duyurur.
details öğesi açık durumunu yönetir; tetikleyici ise summary öğesidir. KERN, sunum amacıyla kern-details__header, küçük bir başlık span’i ve kern-details__body ekler. Örnek, saklama bilgilerini ek bilgi olarak burada gösterir. Zorunlu yönergeler, hatalar ve silme eylemi açılır bölümün dışında görünür kalır. Yerel klavye davranışı, ikinci bir tıklama işleyicisi veya yinelenen aria-expanded durumu olmadan etkinleştirme sağlar.
Summary metnini açıklayıcı ve kısa tutun.
Summary içine başka bir düğme veya bağlantı yerleştirmeyin.
İlişkili açılır bölümlerden oluşan bir koleksiyon için Accordion kullanın; birbiriyle ilgisiz eylemleri Details gibi göstermeyin.
Dialog, h2 ile etiketlenir ve kısa bir sonuç açıklamasıyla tanımlanır. Üstbilgi, gövde ve altbilgide KERN’ın belgelenmiş sınıfları kullanılır. showModal(), yerel dialog’u üst katmana taşır; close() etkileşimi sonlandırır. Keep note, autofocus aracılığıyla başlangıçta odaklanır. Escape, metni değiştirmeden dialog’u kapatır ve close dinleyicisi odağı Discard note düğmesine geri verir. Değeri yalnızca Yes, discard değiştirir. Bu yıkıcı bir onay olduğundan arka plana tıklamak özellikle etkisiz bırakılmıştır. Bu yaklaşım, genel örneğin arka plana tıklayınca kapatma işleyicisini gelişigüzel kopyalamak yerine kritik kararlara ilişkin belgelenmiş yönergeleri izler.
KERN Tasarım Sistemi Entegrasyon ve uygulanabilirlik
Bağımlılık zincirinin tamamını ekleyin
Aşağıdaki kurulum, tek bir kesin sürümlü paketi yükler ve CSS dosyasını yazı tipi diziniyle birlikte kopyalar. Eksiksiz örnek; kendi düzenine ait CSS dosyasını, kök tema özniteliğini, DOM yapısını ve olay bağlantılarını içerir. Gerçek bir formla bütünleştirdikten sonra dialog’un her iki sonucunu, Escape tuşunu ve dar ekranları test edin. KERN kodu EUPL lisansına sahiptir; web sitesi metinsel ve grafik materyallerini CC BY-NC-SA kapsamında ayrı ayrı belirtir. Bu özgün örnek, herhangi bir yetkili kurumun kimliğini kopyalamaz veya bir hizmetin erişilebilirlik denetiminden geçtiği izlenimini vermez. Gerçek bir uygulama için yine de kalıcı depolama, sunucu tarafı doğrulama ve tüm kullanıcı yolculuğunun değerlendirilmesi gerekir.
Belge işaretlemesinin tamamı, düzen CSS ve uygulama davranışı; varlıkları kurulum bloğunu kullanarak yükleyin.
html
<!doctype html><html lang="en" data-kern-theme="light"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>KERN workshop note</title><link rel="stylesheet" href="vendor/kern-2.8.2/kern.min.css"><link rel="stylesheet" href="vendor/kern-2.8.2/fonts/fira-sans.css"><style>body{margin:0;padding:clamp(16px,4vw,40px);color:var(--kern-color-layout-text-default)}main{max-width:800px;margin:auto;display:grid;gap:24px}.top,.actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.top{justify-content:space-between}.kern-dialog{max-width:min(560px,calc(100% - 32px))}textarea{width:100%;resize:vertical}#status{min-height:24px}.kern-details{width:100%}</style><main><div class="top"><span class="kern-preline">KERN · Native components</span><button class="kern-btn kern-btn--secondary" id="theme" aria-pressed="false"><span class="kern-label">Dark appearance</span></button></div><h1 class="kern-heading kern-heading--large">Workshop note</h1><p class="kern-body">Prepare a short note for your next workshop. This demonstration keeps edits only in this page.</p><div class="kern-form-input"><label class="kern-label" for="note">Your note</label><p class="kern-hint" id="hint">No personal information is needed. Nothing is submitted.</p><textarea class="kern-form-input__input" rows="5" id="note" aria-describedby="hint">Discuss accessible ways to collect workshop feedback.</textarea></div><details class="kern-details"><summary class="kern-details__header"><span class="kern-title kern-title--small">What happens to this note?</span></summary><div class="kern-details__body"><p class="kern-body">Edits live in this browser tab. Reloading restores the example text. Discarding clears the current note after confirmation; it does not delete a server record.</p></div></details><div class="actions"><button class="kern-btn kern-btn--primary" id="discard"><span class="kern-label">Discard note</span></button><button class="kern-btn kern-btn--secondary" id="restore"><span class="kern-label">Restore example</span></button></div><p id="status" class="kern-body" role="status"></p><dialog class="kern-dialog" id="confirm" aria-labelledby="confirm-title" aria-describedby="confirm-description"><header class="kern-dialog__header"><h2 class="kern-title kern-title--large" id="confirm-title">Discard this note?</h2></header><section class="kern-dialog__body"><p class="kern-body" id="confirm-description">Your current text will be cleared from this page. Choose Keep note to continue editing.</p></section><footer class="kern-dialog__footer"><button class="kern-btn kern-btn--secondary" id="keep" autofocus><span class="kern-label">Keep note</span></button><button class="kern-btn kern-btn--primary" id="clear"><span class="kern-label">Yes, discard</span></button></footer></dialog></main><script>const byId=id=>document.getElementById(id),note=byId('note'),modal=byId('confirm'),original=note.value;byId('discard').onclick=()=>modal.showModal();byId('keep').onclick=()=>modal.close('keep');byId('clear').onclick=()=>{note.value='';modal.close('discard');byId('status').textContent='Note discarded from this page.'};modal.addEventListener('close',()=>byId('discard').focus());byId('restore').onclick=()=>{note.value=original;byId('status').textContent='Example restored.';note.focus()};byId('theme').onclick=()=>{const dark=document.documentElement.dataset.kernTheme!=='dark';document.documentElement.dataset.kernTheme=dark?'dark':'light';byId('theme').setAttribute('aria-pressed',String(dark))};</script></html>
Derleme adımı veya kullanıcı arayüzü çerçevesi gerekmez. Yazı tipi dizinini koruyun; bu dizindeki CSS göreli WOFF2 dosyalarını çözümler. Kaynaklardaki eksiksiz çalışan örnek ZIP dosyası, tam belgeyi ve önizleme için gereken bağımlılıkları da içerir. ZIP’i çıkarın, bu dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/kern.html adresini açın. Modül kullanan örnekleri file:// üzerinden açmayın.
bash
npm install --save-exact @kern-ux/[email protected]
mkdir -p vendor/kern-2.8.2
cp node_modules/@kern-ux/native/dist/kern.min.css vendor/kern-2.8.2/
cp -R node_modules/@kern-ux/native/dist/fonts vendor/kern-2.8.2/
# Save the complete HTML example below as kern.html beside vendor/.
python3 -m http.server 8080
# Open http://localhost:8080/kern.html
Projeniz İçin Bir İstem
Ajan İstemi
@kern-ux/native 2.8.2 CSS ve paketlenmiş Fira Sans ile yerel atölye notu örneğini oluşturun. Etiketli bir kern-form-input metin alanı, ek bilgi sunan yerel bir Details açılır bölümü ve üstbilgisi, gövdesi ve altbilgisi etiketli bir kern-dialog bir araya getirin. Dialog’u showModal() ile açın, Keep note düğmesine başlangıçta odak verin, Escape tuşunun metni değiştirmeden işlemi iptal etmesini sağlayın ve notu yalnızca Yes, discard seçildikten sonra temizleyin. Kapatıldığında odağı tetikleyiciye geri verin ve Restore example seçeneğini sunun. Yeni palet belirteçleri uydurmadan data-kern-theme değerini açık ve koyu arasında değiştirin. Özgün uygulamanın genişlik tercihlerini koruyun ve notu yerel tutun; yükleme, sunucu taslağı veya kamu hizmeti iddiası gerekmez.
05
KERN Tasarım Sistemi Kaynaklar ve kapsam
KERN kodunu kullanan özgün tanıtım. Herhangi bir kamu kurumu kimliği, kalıcı depolama veya erişilebilirlik sertifikasyonu ima edilmez.
