Decanter Tasarım Sistemi.

Decanter Tasarım Sistemi: SDK değil, Tailwind ön ayarı

Belgelenmiş sürüm yolunu sabitleyin

Doğrulanmış Decanter paketi 7.5.3'tür ve Tailwind CSS ^3.4.17 sürümünü belirtir. Genel giriş noktası bir Tailwind yapılandırma ön ayarıdır. presets listesine require("decanter") ekleyin, content alanını gerçek kaynak dosyalarına yönlendirin ve yardımcı sınıf stil sayfasını derleyin. İçe aktarılacak bir Decanter React sağlayıcısı yoktur.

Belgelerde, kurulum yolu hâlâ v7 olarak belirtilirken yakında v8'de kaldırılacak öğelere de yer verilir. Bu referans v7.5.3 sürümünü sabitler; kullanımdan kaldırılmış foggy, slab ve eski modüler metin yardımcı sınıflarını kullanmaz. Bağımsız önizleme, Tailwind ile derlendiği iddiası taşımayan, düzen kurallarının açıkça etiketlenmiş bir yorumudur.

Destekleyici belirtimi okuyun

Decanter Tasarım Sistemi Duyarlı modüler tipografi

Ölçek, taban değerine bağlıdır

Source Sans 3 ve Source Serif 4, birincil sans serif ve serif yazı tipi aileleridir; Helvetica/Arial ve Georgia/Times ise yedekleridir. type-* yardımcı sınıfları, sabit piksel boyutlu başlıklar değil, orantılı rollerdir. Ölçek çarpanı mobilde 1.15, tablette 1.2 ve masaüstünde 1.25'tir.

Örnek, belgelenmiş basefont-23 yapılandırmasını seçer: XS–SM aralığında 18px, MD–XL aralığında 21px ve 2XL'de 23px. Başlıkta type-3 boyutu kullanılır; böylece dar alana yerleştirilmiş örnekte görünüm orantılı kalır. Farklı bir taban değeri seçen proje, bu önizlemedeki piksel değerlerini kopyalamak yerine ortaya çıkan boyutları yeniden hesaplamalıdır.

Destekleyici belirtimi okuyun

Decanter Tasarım Sistemi Akışkan kapsayıcı ve ızgara

Ekran kenarı düzenin bir parçasıdır

cc kapsayıcısı, özenle belirlenmiş kenar boşlukları kullanır: XS'de 20px, SM'de 30px, MD'de 50px, LG'de 80px ve XL'de 100px. İçerik genişliği, 1700px görünüm alanında 1500px'lik üst sınıra ulaşıncaya kadar artar. Bu, yalnızca sabit 1200px genişliğinde bir kapsayıcı değil, açıkça tanımlanmış kenar kuralları olan akışkan bir sistemdir.

Örnek bu kenar boşluklarını izler ve MD'nin altında iki editoryal kartı tek sütuna dönüştürür. Kart içerikleri olağan belge sırasını kullanır; bu nedenle düzen tek sütuna geçtiğinde klavye gezintisi de aynı okuma sırasını izler.

Destekleyici belirtimi okuyun

Decanter tasarım sistemi Duyarlı boşluklar

Duyarlı yardımcı sınıfları bilinçli kullanın

Decanter, duyarlı margin ve padding için rs-m-* ve rs-p-* ailelerini sunar. Seçilen adım, belgelenmiş aralıklarda değişir; Tailwind'in sabit boşluk değerleriyle eşdeğer değildir. Örnek kod, kartın çevresinde rs-p-1; eyleminde ise sıradan sabit padding kullanır.

Referansı yeniden üretilebilir tutmak için bağımsız yorumda her CSS düzenlemesi uygulama kodu olarak belirtilir. Yerel bir derlemede, aynı adla ikinci bir çakışan kural tanımlamak yerine ön ayarın oluşturduğu yardımcı sınıfı kullanın. Derleme tarayıcısı sınıfın tamamını algılayamıyorsa "rs-p-" + size gibi dinamik parçalar kullanmaktan kaçının.

Destekleyici belirtimi okuyun

Decanter Tasarım Sistemi Kimlik ve etkileşim renkleri

Cardinal ve dijital kırmızı farklı amaçlara hizmet eder

Stanford'un birincil Cardinal kırmızısı #8c1515'tir. Dijital kırmızı #b1040e, etkileşim/vurgu rengidir ve üniversite kimliğinde Cardinal renginin yerini almaz. Dijital mavi #006cb8 bağlantılarda, daha koyu etkileşim durumu içinse #00548f kullanılır.

Örnek, açılır ayrıntı eyleminde dijital kırmızıyı; yüzeylerde ise ölçülü nötr renkleri kullanır. Stanford logosu, mührü veya resmî kimlik çubuğu içermez. Bir kurumda kullanıma alınacaksa yetkili kimlik öğeleri ve üniversitenin marka kuralları kullanılmalıdır; teknik bir referans, resmî onay anlamına gelmez.

Destekleyici belirtimi okuyun

Decanter Tasarım Sistemi Eylem içeren editoryal kartlar

Bileşen API tahmin etmek yerine içeriği bir araya getirin

Resmî kart örnekleri; boşluk, tipografi, yüzey ve eylem yardımcı sınıfları kullanan anlamsal HTML öğelerdir. Bizim kompozisyonumuzda etkinlik kategorisi başlıktan ayrı tutulur, tarih ve mekân metin olarak gösterilir, özet ise olduğu yerde açılmak üzere gerçek bir düğme kullanılır. Var olmayan bir Decanter Card prop API uydurulmaz.

Gezinme gerçekten yapılacak işlemse başlığın bağlantı olması uygundur. Burada sonuç, içeriğin sayfa içinde genişletilmesidir; bu nedenle aria-expanded ve aria-controls özelliklerine sahip bir düğme bu davranışı açıkça belirtir. Önizlemede üniversite haberleri kopyalanmak yerine özgün etkinlik adları ve özetleri kullanılır.

• Kart başlığı olarak etkinlik adını kullanın.
• Saat ve konumu açılmadan önce görünür tutun.
• İçeriği açıp kapatmak için düğme, yalnızca gerçek gezinme için bağlantı kullanın.

Destekleyici belirtimi okuyun

Decanter Tasarım Sistemi Filtreler ve açılır içerik

İçeriği tüm düzenlerde erişilebilir tutun

Konu seçici, özgün iki araştırma etkinliği kartını filtreler ve görünür sonuç sayısını günceller. Eşleşme bulunmayan seçenek, boş durumu ve filtreyi sıfırlama yolunu göstermek için özellikle eklenmiştir. Filtre, başlık hiyerarşisini değiştirmez ve kartları formda seçilebilir seçeneklere dönüştürmez.

Her özetin kendine ait bir düğme durumu vardır. Kartı kapatmak odağı aynı tetikleyicide bırakır. Filtre değiştirildiğinde gizlenen özetler kapatılır; böylece bir konuya geri dönüldüğünde tutarlı bir genel bakışla başlanır. Kontroller, yardımcı sınıf tabanlı tasarım yaklaşımına eklenen uygulama davranışlarıdır; Decanter JavaScript ile birlikte sunulmazlar.

Destekleyici belirtimi okuyun

Decanter Tasarım Sistemi Derleyin ve sonucu doğrulayın

Oluşturulan sınıflar, taranan kaynakları gerektirir

Sağlanan kurulum Tailwind 3'ü ve doğrulanmış Decanter 7.5.3 hazır ayarını hedefler. Girdi yönergelerini, içerik globunu, çıktı komutunu ve özgün bir kart düzenini içerir. Ortaya çıkan stil sayfasını belge başlığına bağlayın. Onaylı yazı tipi dosyalarını ayrıca yükleyin veya belgelenmiş yedekleri bilinçli olarak kullanmaya devam edin.

Önizleme bu araç zinciriyle oluşturulmadı ve uygulama etiketinde bu açıkça belirtiliyor. Üretim ortamındaki bir entegrasyon, eksiksiz sınıf kümesini derlemeli ve oluşturulan çıktıyı incelemelidir; özellikle de ana sürüm yükseltmesi kullanımdan kaldırılmış yardımcı sınıfları değiştirdikten sonra.

1. Decanter ve uyumlu Tailwind ana sürümünü sabitleyin.
2. Hazır ayarı kaydedin ve gerçek kaynak dizinini tarayın.
3. Üç Tailwind yönerge katmanını derleyin.
4. Seçilen temel yazı tipini, ekran kenarlarını ve kart eylemlerini belgelenmiş kesme noktalarında doğrulayın.

Destekleyici belirtimi okuyun

Decanter Tasarım Sistemi Bileşen Örnekleri

<article class="bg-white border border-solid border-black-20 rs-p-1">
  <p class="font-semibold text-digital-red">Research conversation</p>
  <h2 class="type-2 font-serif leading-display">Reading the changing coast</h2>
  <p class="leading-normal">An original example event about field observations.</p>
  <button type="button" class="bg-digital-red text-white px-26 py-10
    hocus:bg-cardinal-red-dark focus:outline focus:outline-2">
    Show session details
  </button>
</article>

module.exports = {
  presets: [require('decanter')],
  content: ['./src/**/*.{html,js}']
};

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Decanter editorial composition</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f5f2;color:#2e2d29;font:18px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif}.cc{margin-inline:20px;max-width:1500px;padding-block:40px}h1{font-family:Georgia,serif;font-size:1.520875em;line-height:1.2;margin:24px 0}h2{font:700 1.3225em/1.25 Georgia,serif;margin:12px 0}p{margin:16px 0}.overline{letter-spacing:.12em;font-size:14px;font-weight:700}.filters{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding-block:24px;border-block:1px solid #c0c0bf;margin-block:32px}select{font:inherit;background:white;border:1px solid #767674;padding:8px}.cards{display:grid;grid-template-columns:1fr;gap:20px}article{background:white;padding:24px;border-top:4px solid #8c1515}article time{font-size:16px;color:#53565a}.topic{font-size:14px;font-weight:600;letter-spacing:.04em}.abstract{border-top:1px solid #d5d5d4;padding-top:16px}.action{font:600 16px/1.3 Arial,sans-serif;background:#b1040e;color:white;border:0;padding:12px 20px;cursor:pointer}.action:hover{background:#820000;text-decoration:underline}.reset{font:inherit;color:#006cb8;background:none;border:0;text-decoration:underline;padding:8px 0;cursor:pointer}:focus-visible{outline:3px solid #00548f;outline-offset:4px}small{display:block;font-size:14px;color:#53565a;margin-top:32px}[hidden]{display:none!important}@media(min-width:576px){.cc{margin-inline:30px}}@media(min-width:768px){body{font-size:21px}.cc{margin-inline:50px}h1{font-size:1.728em}h2{font-size:1.44em}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:992px){.cc{margin-inline:80px}.cards{gap:36px}h1{font-size:1.953125em}h2{font-size:1.5625em}}@media(min-width:1200px){.cc{margin-inline:100px}.cards{gap:40px}}@media(min-width:1500px){body{font-size:23px}.cards{gap:48px}}@media(min-width:1700px){.cc{margin-inline:auto}}
</style><main class="cc"><p class="overline">RESEARCH CONVERSATIONS · ORIGINAL EXAMPLES</p><h1>Ideas take shape in conversation.</h1><p>A compact editorial collection interpreting Decanter’s responsive type and screen-edge rules.</p><div class="filters"><label for="topic">Topic</label><select id="topic"><option value="all">All topics</option><option value="environment">Environment</option><option value="archives">Archives</option><option value="astronomy">Astronomy</option></select><span id="count" role="status">2 example events</span></div><div class="cards"><article data-topic="environment"><p class="topic">ENVIRONMENT</p><h2>Reading the changing coast</h2><time datetime="2026-10-12">12 October · Fictional seminar room</time><p>How field notes reveal changes that a single measurement cannot capture.</p><button class="action" type="button" aria-expanded="false" aria-controls="coast">Show session details</button><div class="abstract" id="coast" hidden><p>This original sample session compares written observations, sketches and repeat measurements. The conversation asks how researchers describe uncertainty when a landscape changes gradually.</p></div></article><article data-topic="archives"><p class="topic">ARCHIVES</p><h2>The stories between records</h2><time datetime="2026-10-19">19 October · Fictional reading room</time><p>Exploring how context connects objects in a community archive.</p><button class="action" type="button" aria-expanded="false" aria-controls="archive">Show session details</button><div class="abstract" id="archive" hidden><p>This original example considers correspondence, oral history and catalogue descriptions together. It examines how a collection can preserve disagreement without erasing individual perspectives.</p></div></article></div><div id="empty" hidden><h2>No events in this example topic</h2><p>Choose another topic or return to the full collection.</p><button type="button" class="reset" id="reset">Show all topics</button></div><small>Independent OpenDesign specimen. Original content, local font fallbacks and interpreted Decanter layout rules. No Stanford identity or real event listing.</small></main><script>const topic=document.querySelector('#topic'),cards=[...document.querySelectorAll('article')];function filter(){let count=0;cards.forEach(c=>{c.hidden=topic.value!=='all'&&topic.value!==c.dataset.topic;if(!c.hidden)count++;const b=c.querySelector('button');b.setAttribute('aria-expanded','false');b.textContent='Show session details';c.querySelector('.abstract').hidden=true});document.querySelector('#count').textContent=count+' example events';document.querySelector('#empty').hidden=count!==0}topic.onchange=filter;document.querySelector('#reset').onclick=()=>{topic.value='all';filter();topic.focus()};document.querySelectorAll('.action').forEach(b=>b.onclick=()=>{let open=b.getAttribute('aria-expanded')!=='true';b.setAttribute('aria-expanded',String(open));b.textContent=open?'Hide session details':'Show session details';document.getElementById(b.getAttribute('aria-controls')).hidden=!open});</script></html>