# Skeleton Tasarım Sistemi ## Skeleton Tasarım Sistemi Arayüzü Önizlemesi Kaydedilmiş okuma durumunu korurken temayı ve görünümü değiştirin; çözümlenen değerleri inceleyin. ## Skeleton Tasarım Sistemi Tasarım Referansı Sabitleştirilmiş Skeleton 5.0.1 tema dosyaları, derlenmiş CSS yardımcı sınıf davranışı ve açıkça belirtilmiş özgün bileşim tercihleri. ### Cerberus tema değerleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --spacing | 0.25rem | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --radius-base | 0.5rem | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --typo-base--font-family | system-ui | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --typo-heading--font-weight | bold | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-primary-100 | oklch(0.84 0.08 254.62) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-primary-300 | oklch(0.7 0.15 254.36) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-primary-500 | oklch(0.57 0.21 258.29) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-primary-700 | oklch(0.46 0.17 257.78) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-primary-900 | oklch(0.34 0.11 257.14) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-surface-50 | oklch(0.99 0 0) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-surface-950 | oklch(0.18 0 0) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | ### Mint tema değerleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --spacing | 0.25rem | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --radius-base | 0.375rem | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --typo-base--font-family | system-ui, sans-serif | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --typo-heading--font-weight | normal | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-primary-100 | oklch(89.8% 0.08 156.34deg) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-primary-300 | oklch(86.28% 0.13 151.76deg) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-primary-500 | oklch(83.57% 0.18 148.98deg) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-primary-700 | oklch(71.28% 0.15 148.61deg) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-primary-900 | oklch(58.17% 0.13 148.16deg) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-surface-50 | oklch(89.13% 0.03 155.27deg) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-surface-950 | oklch(21.88% 0.02 186.33deg) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | ### Rose tema değerleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --spacing | 0.25rem | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --radius-base | 0.375rem | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --typo-base--font-family | Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --typo-heading--font-weight | normal | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-primary-100 | oklch(92.93% 0.03 340.64deg) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-primary-300 | oklch(81.16% 0.08 345.32deg) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-primary-500 | oklch(69.89% 0.13 348.12deg) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-primary-700 | oklch(57.25% 0.1 346.44deg) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-primary-900 | oklch(43.55% 0.07 343deg) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-surface-50 | oklch(96.76% 0.01 318.08deg) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | | --color-surface-950 | oklch(25.82% 0.01 304.87deg) | Gerçek tema bildirimi. data-theme bu içe aktarılmış temayı seçtiğinde bu değerler birlikte değişir; özgün okuma durumu değişmeden kalır. | ### CSS entegrasyonu ve anlamsal eşleştirmeler | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Foundation import | @import "@skeletonlabs/skeleton" | Yardımcı sınıf tanımlarının derlenmesi için Tailwind’den sonra yükleyin. | | Theme selection | data-theme="cerberus" / "mint" / "rose" | Değişkenleri yalnızca içe aktarılan temalar sağlayabilir. | | Class-based appearance | @custom-variant dark (&:where(.dark, .dark *)) | Özgün görünüm düğmesinin gerçek derlenmiş koyu varyantı etkilemesini sağlar. | | Surface pairings | light-dark(light value, dark value) | Skeleton genel kuralları color-scheme değerini ayarlar; eşleşen bir varyant olmadan yalnızca sınıfı değiştirmek yeterli değildir. | | Filled action | btn preset-filled-primary-500 | Yerel düğme geometrisini temaya duyarlı bir ön ayarla birleştirir. | | Supporting action | btn preset-tonal-primary | Mevcut görünüme uygun ton eşleştirmesi kullanır. | | Disclosure | details.disclosure > summary | Skeleton CSS ile tarayıcının yerel açılma durumu; Svelte bileşeni başlatma işlemi yoktur. | ## Skeleton Tasarım Sistemi Eksiksiz 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ı. ## 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 Palet örneklerinde kullanılan --radius-base değeri, köşe şeklini seçilen temaya göre değiştirir. Eksiksiz referans kılavuzunda --spacing de gösterilir. Dıştaki iki sütunlu yerleşimde 24px boşluk kullanılır ve 720px altında tek sütuna dönüşür; bunlar özgün bileşim tercihleridir. Tema, bilgi mimarisini belirlemez ve her sayfayı aynı ızgarayı paylaşmaya zorlamaz. ## 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 Svelte veya React bileşeni gerektiren bir ürün, ilgili çerçeve paketini ve belgelenmiş kurulumunu kullanmalıdır. CSS tabanlı bu örnek, ortak temaları ve yardımcı katmanını anlamak için yararlıdır; ancak bu bileşenlerle aynı API özelliğini sunduğunu iddia etmez. Sağlanan kılavuzu bir aracı için uyarlarken bu ayrımı koruyun. ## Skeleton Tasarım Sistemi Bileşen Örnekleri ### index.html Eksiksiz okuma içeriği, yerel CSS bileşenleri ve özgün kontroller. ``` Theme reading desk

SKELETON / THEME READING DESK

The same content, three themes.

Inspect actual Skeleton 5.0.1 palettes, surface pairings and native CSS components while keeping a complete reading card in view.

Original OpenDesign study
Reading / 4 minutes

Make the next step easier to see

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.

  • Keep the heading clear in both appearances.
  • Use a supporting surface to group related information.
  • Repeat an important state in text, not color alone.

This reading card is not saved.

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.

``` Kod referansı - Dört kaynak dosyanın tümünü aynı proje dizininde tutun. ### style.css Tema içe aktarımları, sınıf tabanlı koyu mod varyantı ve duyarlı kompozisyon. ``` @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} ``` Kod referansı - Dört kaynak dosyanın tümünü aynı proje dizininde tutun. ### main.js Hesaplanan token değerlerini inceleme ve okuma ile sunum durumlarını birbirinden bağımsız yönetme. ``` 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(); ``` Kod referansı - Dört kaynak dosyanın tümünü aynı proje dizininde tutun. ### vite.config.mjs Gerçek Tailwind derleyici entegrasyonu. ``` import{defineConfig}from'vite';import tailwindcss from'@tailwindcss/vite';export default defineConfig({plugins:[tailwindcss()],base:'./',build:{cssCodeSplit:false}}); ``` Kod referansı - Dört kaynak dosyanın tümünü aynı proje dizininde tutun. ## Skeleton Tasarım Sistemi Aracı Kurulumu ### Uygulamaya Başlangıç Noktası Önce sağlanan dört dosyayı kaydedin. Bu, CSS yardımcı katmanıdır ve Svelte veya React çalışma zamanı gerektirmez. ``` npm init -y npm install @skeletonlabs/skeleton@5.0.1 npm install --save-dev tailwindcss@4.3.3 @tailwindcss/vite@4.3.3 vite@8.3.2 npx vite --host 127.0.0.1 ``` ### Projeniz İçin Bir İstem ``` Gerçek CSS yardımcı sınıflarını ve Cerberus/Mint/Rose tema içe aktarımlarını kullanarak eksiksiz Skeleton 5.0.1 okuma masasını uygulayın. Sınıf tabanlı renk şeması davranışını, okunabilir hesaplanmış token satırlarını, eksiksiz içeriği, yerel kaydedilmiş durumu ve bu durumu silmeyen sunum sıfırlamasını koruyun. CSS katmanını çerçeve bileşeni API’lerinden ayrı tutun. ``` ## Skeleton Tasarım Sistemi Kaynakları ve Kapsamı Gerçek Skeleton Tailwind CSS yardımcı sınıfları ve sunulan temalar, özgün düz-JavaScript sayfa davranışıyla birlikte kullanılır. Skeleton Svelte veya React çalışma zamanı yüklenmez. - Kurulum CSS ve çerçeve entegrasyonu seçenekleri. - Temalar Tema kompozisyonu ve seçimi. - Renkler Palet ve kontrast eşleşmeleri. - Koyu görünüm Renk şeması ve varyant davranışı. - Açılır bölümler Yerel details/summary CSS katmanı. ## Skeleton Tasarım Sistemiyle İlgili Kaynaklar ### Tabler Gerçek 1.6 tema değişkenleri, zaman çizelgesi kartları, veri ızgarası bağlamı, modal doğrulama ve yerel kontrol noktalarıyla güncellenebilen açık/koyu kompozisyon içeren yerel bir Tabler proje günlüğü. ### Tamagui Doğrulama, ilerleme takibi ve boş durumdan kurtarma özelliklerine sahip eksiksiz, yerel bileşenlerle oluşturulmuş bir alışkanlık panosunda Tamagui’ın gerçek v5 belirteç kategorilerini ve açık/koyu mavi temalarını keşfedin. ### UIkit UIkit; CSS çatısı, Less özelleştirmesi ve özniteliklerle yönlendirilen JavaScript bileşenlerini bir araya getirir. Aşağıdaki atölye planlayıcısında Switcher, Accordion ve duyarlı ızgara birlikte çalışır; yerel bileşen davranışının nerede sona erdiğini ve uygulama seçim durumunun nerede başladığını gösterir. - [Uygulama başvurusu](https://www.skeleton.dev/docs/svelte/design/themes) - [Kaynak](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/cerberus.css) - [Kaynak](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/mint.css) - [Kaynak](https://cdn.jsdelivr.net/npm/@skeletonlabs/skeleton@5.0.1/src/themes/rose.css) - [Kaynak](https://www.skeleton.dev/docs/svelte/get-started/fundamentals) - [Kod referansı](https://www.skeleton.dev/docs/svelte/get-started/installation) - [Kurulum CSS ve çerçeve entegrasyonu seçenekleri.](https://www.skeleton.dev/docs/svelte/get-started/installation) - [Temalar Tema kompozisyonu ve seçimi.](https://www.skeleton.dev/docs/svelte/design/themes) - [Renkler Palet ve kontrast eşleşmeleri.](https://www.skeleton.dev/docs/svelte/design/colors) - [Koyu görünüm Renk şeması ve varyant davranışı.](https://www.skeleton.dev/docs/svelte/guides/mode) - [Açılır bölümler Yerel details/summary CSS katmanı.](https://www.skeleton.dev/docs/svelte/tailwind-components/disclosures)