Skeleton Tasarım Sistemi.

Skeleton Tasarım Sistemi CSS Temeller ve Çerçeve Katmanları

Gerçekten çalışan katmanı seçin

Okuma masası; @skeletonlabs/skeleton 5.0.1, Tailwind CSS yardımcı sınıfları ve kullanıma sunulan üç temayı kullanır. skeleton-svelte veya skeleton-react yüklemez. Düğmeler, rozet, etiket, kart ve açılır içerik sunumu gerçek CSS yardımcı sınıflarıdır; tema seçici ve kaydedilmiş durum mantığı ise özgün JavaScript uygulamalarıdır. Bu ayrım, eksiksiz örneğin bir çerçeve bileşeni çalışma zamanı olduğu izlenimini vermeden küçük bir Vite sayfası olarak çalışmasını sağlar.

Ham CSS öğesini tarayıcıya aktarmak yerine yardımcı sınıfları derleyin

Skeleton kaynağı, @utility ve @variant gibi Tailwind yönergeleri içerir. Sağlanan Vite yapılandırması @tailwindcss/vite eklentisini içerir; stil sayfası da Tailwind’i, ardından Skeleton öğesini ve seçilen temaları içe aktarır. Kaynak paketine doğrudan bağlantı vermek, derlenmiş stilleri yeniden oluşturmazdı. Önizlemenin gizli, oluşturulmuş CSS dosyalarına bağlı kalmaması için eksiksiz derleme kaynağı eklenmiştir.

1. Tailwind CSS öğesini içe aktarın.
2. Skeleton yardımcı sınıflarını içe aktarın.
3. Seçmek istediğiniz her temayı içe aktarın.
4. Stil sayfasını Tailwind Vite eklentisiyle derleyin.

Skeleton Tasarım Sistemi Tema Seçimi ve Gerçek Değerler

Kullanılabilir her temayı açıkça içe aktarın

Cerberus, Mint ve Rose temalarının her biri paketin themes yolundan içe aktarılır. Bir ad seçildiğinde kökteki data-theme değişir ve buna karşılık gelen değişken bildirimleri seçilir. Referans kılavuzu, her tema için gerçek birincil palet örneklerini, en uç yüzey değerlerini, boşlukları, köşe yarıçaplarını ve yazı tipi bildirimlerini listeler. Bu değerler, tek bir vurgu rengini değiştirerek üretilmek yerine sabitlenmiş dosyalardan okunur.

• Başlangıç görünümü Cerberus'tur.
• Mint ve Rose, ayrı ayrı içe aktarılan gerçek temalardır.
• Tema seçimi kopyalanmış bir içerik ağacını değil, data-theme değerini değiştirir.

Karşılaştırma sırasında içeriğin tamamını aynı tutun

Tema değiştiğinde okuma kartı, kontrol listesi ve kaydedilmiş durum aynı kalır. Yan panel, her seçimden sonra kökteki hesaplanmış değişkenleri okuyarak tarayıcının gerçekte çözdüğü değerleri gösterir. Böylece karşılaştırma anlamlı olur: okuyucu aynı içeriği ve durumu değerlendirirken tipografi, şekil ve palet değişebilir.

Skeleton Tasarım Sistemi Koyu Görünüm ve Renk Şeması

Koyu varyantı gerçek kontrole bağlayın

Stil sayfası, kökteki veya alt öğelerindeki .dark ile eşleşen sınıf tabanlı bir koyu varyant tanımlar. Skeleton genel kuralları, color-scheme değerini ayarlamak için bu varyantı kullanır. Böylece görünüm düğmesi, light-dark() yüzey eşleştirmelerinin kullandığı koşulları değiştirir. Bir sınıfı değiştirip Tailwind’in varsayılan, medya sorgusu tabanlı varyantını değiştirmeyen geçiş düğmesi, gerçek yüzeyler açık kalırken Koyu görünüm bildirebilir.

Okunaklı kalan bir ön ayar kullanın

Görünüm eylemi preset-tonal-primary, okuma eylemi ise preset-filled-primary-500 kullanır. Ön ayarlar, yüzey ile ön plan arasındaki ilişkiyi belirler; tek başına bir renk belirteci okunabilir kontrast sağlamaz. Sınıf değişikliğinin başarılı olmasının görsel doğruluğu kanıtladığı varsayılmamış; Rose'a geçildikten sonra kontrol metni ve açılır içerik dâhil olmak üzere, koyu temanın gerçekten oluşturulmuş durumu incelenmiştir.

Skeleton Tasarım Sistemi Tipografi, Şekil ve Yerleşim

Tema bildirimlerini özgün hiyerarşiden ayrı tutun

Cerberus bir sistem yazı tipi tanımlarken Rose farklı bir yedek yazı tipi yığını içerir. Bu çalışma uzaktaki bir yazı tipini getirmez; tarayıcı, seçili yığında bulunan yazı tiplerini kullanır. Özgün yerleşimde sayfa başlığı 36px, okuma başlığı ise 28px olarak açıkça belirtilir. Bu bileşim tercihleri, temanın kendi aile ve ağırlık bildirimlerinden ayrı kalır.

Köşe yarıçapı ve boşluk değerlerini temadan alın

Skeleton Tasarım Sistemi Okuma Durumu ve Sunum Sıfırlama

Kaydetme işlemini yerel ve geri alınabilir tutun

Okuma eylemi aria-pressed değerini değiştirir, etiketini günceller ve okunabilir bir durum mesajı gösterir. Yalnızca bu sayfa için bellekte tutulan bir boolean değeri kaydeder. Hesap, kalıcı depolama veya ağ isteği yoktur. Tema değiştirildiğinde de aynı durum görünür kalır; böylece okuyucular etkin durumu farklı paletlerde karşılaştırabilir.

Okuma durumunu silmeden sunumu sıfırlayın

Sunumu sıfırlama işlemi Cerberus'a ve açık görünüme döner, ancak kaydedilmiş boolean değeri bilerek değiştirmez. Etiketi de bu kapsamı açıklar. Ayrı bir eylem, okuma kartını yerel masadan kaldırabilir. Bu iki eylemi birleştirmek, zararsız bir görsel sıfırlamanın kullanıcının mevcut seçimini beklenmedik şekilde silmesine yol açar.

Skeleton Tasarım Sistemi Yerel Açılır İçerik ve Gerçek İçerik

Tarayıcının details öğesini kullanın

Destekleyici açıklama, açılır içerik yardımcı sınıfını kullanan gerçek bir details/summary yapısıdır. Klavye ve işaretçiyle açılma tarayıcı tarafından sağlanırken sunumu Skeleton sağlar. Bu, Skeleton Svelte Accordion bileşeni değildir; herhangi bir bileşen API öğesi veya olayı da uydurulmamıştır. Paragraf, neyin değiştiğini ve neyin sabit kaldığını somut biçimde açıklar.

Geçiş tamamlandıktan sonra açık durumu inceleyin

Stil sayfası, açılır içeriğin boyutunu animasyonla değiştirebilir. Açık durumun görüntüsü alınmadan önce geçişin tamamlanması beklenir; hemen alınan bir ekran görüntüsü, içeriği genişleme sırasında yakalayabilir. Yerleşim doğrulaması, yan panelin yalnızca kapsamlı içeriği gizliyken başarılı olmaması için açılmış paragrafı ve uzun, hesaplanmış yazı tipi yığınını da içerir.

Skeleton Tasarım Sistemi Duyarlı Tema İncelemesi

Dar ekranlarda değerleri okunaklı tutun

Çalışma alanı 720px altında tek sütuna geçer ve dış dolgu 16px'e düşer. Her hesaplanmış belirteç adı ve değeri ayrı bir satırda yer alır; böylece uzun yazı tipi yığınları ve OKLCH dizeleri yatay kaydırmaya neden olmadan satır kaydırabilir. Beş renk örneği kompakt bir ızgarada görünür kalır ve tema kontrolleri ek satırlara kayar.

Tema ve durum birleşimlerini test edin

Tarayıcı testi okuma kartını kaydeder, Mint ve Rose temaları arasında geçiş yapar, koyu görünümü etkinleştirir, açılır içeriği açar ve ardından sunumu sıfırlar. Kaydedilmiş durum tüm bu işlemler boyunca korunmalıdır. Test 280px genişliğe kadar doğrulanmıştır; böylece yalnızca tek bir başlangıç teması ekran görüntüsünü değil, gerçek uzun değerleri ve genişletilmiş içeriği de kapsar.

Skeleton Tasarım Sistemi Eksiksiz Vite Kaynağı

Dört kaynak dosyanın tamamını kaydedin

Örnek; index.html, style.css, main.js ve vite.config.mjs dosyalarını içerir. Sabitlenmiş Skeleton, Tailwind ve Vite bağımlılıklarını yükleyin, ardından bu dizinde Vite’ı çalıştırın. Açıkça belirtilen @source, yardımcı sınıfları içeren HTML konumunu göstererek derlenen çıktının okuma masasında kullanılan sınıfları içermesini sağlar. Eksik bir çerçeve iskeleti yoktur.

Gerektiğinde çerçeve bileşenlerini ayrı ayrı seçin

Skeleton Tasarım Sistemi Bileşen Örnekleri

<!doctype html><html lang="en" data-theme="cerberus"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Theme reading desk</title></head><body><main><header><div><p class="text-sm font-bold">SKELETON / THEME READING DESK</p><h1>The same content, three themes.</h1><p class="intro">Inspect actual Skeleton 5.0.1 palettes, surface pairings and native CSS components while keeping a complete reading card in view.</p></div><span class="badge preset-tonal-primary">Original OpenDesign study</span></header><div class="controls"><label for="theme">Theme<select id="theme" class="select"><option value="cerberus">Cerberus</option><option value="mint">Mint</option><option value="rose">Rose</option></select></label><button id="mode" class="btn preset-tonal-primary">Use dark appearance</button><button id="reset" class="btn preset-tonal-surface">Reset presentation</button></div><div class="workbench"><article class="card preset-outlined-surface-200-800 reading"><span class="chip preset-tonal-primary">Reading / 4 minutes</span><h2 class="mt-6">Make the next step easier to see</h2><p>A useful interface explains the next action without making every detail compete for attention. Start with a complete piece of content, then inspect how its hierarchy survives a change of theme.</p><ul><li>Keep the heading clear in both appearances.</li><li>Use a supporting surface to group related information.</li><li>Repeat an important state in text, not color alone.</li></ul><button id="bookmark" class="btn preset-filled-primary-500 bookmark" aria-pressed="false">Save to this reading desk</button><p id="message" role="status">This reading card is not saved.</p></article><aside class="card preset-tonal-surface side"><h2 class="text-xl font-bold">Current theme values</h2><div class="palette" aria-label="Primary palette samples"><div class="swatch" style="background:var(--color-primary-100)"></div><div class="swatch" style="background:var(--color-primary-300)"></div><div class="swatch" style="background:var(--color-primary-500)"></div><div class="swatch" style="background:var(--color-primary-700)"></div><div class="swatch" style="background:var(--color-primary-900)"></div></div><dl class="tokens" id="tokens"></dl><details class="disclosure mt-6"><summary class="preset-tonal-primary">What changes with the theme?</summary><p>The imported theme changes palette, typography declarations and shape variables. The reading text and local saved state stay the same. Dark appearance changes surface pairings; it is not a second copy of the content.</p></details></aside></div><p class="scope">Uses Skeleton’s actual Tailwind CSS utilities and three shipped themes. The page logic is original plain JavaScript; no Skeleton Svelte or React component runtime is loaded. Saving changes this page only and sends nothing.</p></main><script type="module" src="./main.js"></script></body></html>

@import 'tailwindcss';
@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/themes/cerberus';
@import '@skeletonlabs/skeleton/themes/mint';
@import '@skeletonlabs/skeleton/themes/rose';
@source './index.html';
@custom-variant dark (&:where(.dark, .dark *));
body{margin:0}*{box-sizing:border-box}main{max-width:1080px;margin:auto;padding:32px}header{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}h1{font-size:36px;line-height:1.15;font-weight:700;margin:16px 0}.intro{max-width:66ch;line-height:1.6}.controls{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin:32px 0}.controls label{display:grid;gap:8px}.workbench{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}.reading{padding:32px}.reading h2{font-size:28px;line-height:1.25;font-weight:700}.reading p{line-height:1.7;margin:24px 0}.reading ul{list-style:disc;padding-left:24px}.reading li{margin:12px 0}.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:24px 0}.swatch{height:72px;border-radius:var(--radius-base)}.tokens{display:grid;gap:12px;font-size:13px}.tokens div{display:grid;gap:8px;padding-bottom:12px;border-bottom:1px solid currentColor}.tokens dd{overflow-wrap:anywhere}.side{padding:24px}.disclosure p{padding:16px;line-height:1.6}.scope{font-size:13px;line-height:1.6;margin-top:32px}.bookmark{margin-top:24px}#message{font-size:14px;margin-top:16px}:focus-visible{outline:3px solid var(--color-primary-500);outline-offset:3px}@media(max-width:720px){main{padding:16px}.workbench{grid-template-columns:1fr}.reading{padding:24px}.palette{gap:4px}.swatch{height:56px}}

.workbench>*{min-width:0}.bookmark{max-width:100%;white-space:normal;height:auto;min-height:2rem;text-align:center}.disclosure summary{white-space:normal}

import './style.css';
const root=document.documentElement;let saved=false;function inspect(){const style=getComputedStyle(root);const keys=['--color-primary-500','--radius-base','--spacing','--typo-base--font-family'];document.querySelector('#tokens').replaceChildren(...keys.map(key=>{const row=document.createElement('div'),dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=key;dd.textContent=style.getPropertyValue(key).trim();row.append(dt,dd);return row}));}document.querySelector('#theme').addEventListener('change',e=>{root.dataset.theme=e.target.value;inspect()});document.querySelector('#mode').addEventListener('click',e=>{let dark=root.classList.toggle('dark');e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance';inspect()});document.querySelector('#bookmark').addEventListener('click',e=>{saved=!saved;e.currentTarget.setAttribute('aria-pressed',String(saved));e.currentTarget.textContent=saved?'Remove from this reading desk':'Save to this reading desk';document.querySelector('#message').textContent=saved?'Saved in this preview only.':'This reading card is not saved.'});document.querySelector('#reset').addEventListener('click',()=>{root.dataset.theme='cerberus';root.classList.remove('dark');document.querySelector('#theme').value='cerberus';document.querySelector('#mode').textContent='Use dark appearance';inspect()});inspect();

import{defineConfig}from'vite';import tailwindcss from'@tailwindcss/vite';export default defineConfig({plugins:[tailwindcss()],base:'./',build:{cssCodeSplit:false}});