Aşamalı açılır içerik, ilerleme göstergesi ve sonraki adıma klavye odağı içeren eksiksiz bir atölye zaman çizelgesi üzerinden Ripple’ın gerçek renk rollerini, 14 kademeli aralık ölçeğini ve duyarlı tipografi referanslarını keşfedin.
Belgelenmiş Ripple değerlerini kullanarak eksiksiz özgün HTML/CSS/JavaScript; Arial yedeği, yerel Ripple çalışma zamanı yok. · Uygulama başvurusu
02
Ripple Tasarım Sistemi Tasarım Referansı
Bu çalışma için incelenen, yayımlanmış Ripple tasarım belgeleri: varsayılan renk rolleri, aralıklar, yazı boyutu/satır yüksekliği çiftleri ve odak renkleri. Bunlar tasarım referanslarıdır; yerel bir Ripple sürümünün pakete dahil olduğu iddiası değildir.
Ripple Tasarım Sistemi Temelleri ve Çalışma Zamanı Kapsamı
Tasarım referansını bileşen çalışma zamanından ayırın
Referans, yayımlanmış Ripple tasarım sistemini açıklar. Bu atölye zaman çizelgesi, seçili değerlerin özgün ve eksiksiz bir HTML, CSS ve JavaScript yorumudur. Ripple Vue bileşenlerini çalıştırmaz, belgelenmemiş bir paket aynası kullanmaz ve Victoria Hükûmeti hizmeti olduğunu iddia etmez. Bu sınır önizlemede açıkça belirtilir ve indirilebilir kaynakta da korunur.
Yerel entegrasyon yolunu bilinçli seçin
Ripple, Vue odaklı bir paket yolu ve temel paketi üzerinden yalnızca stilleri içeren bir yol sunar. Resmî kurulum için GitHub Packages erişimi gerekir. Yalnızca stilleri içeren yolda da işaretleme ve davranış uygulamaya aittir. Bu dağıtımı entegre ederken resmî erişim talimatlarını izleyin ve seçtiğiniz sürümü sabitleyin; aşağıdaki bağımsız çalışma için kimlik doğrulama veya paket kurulumu gerekmez.
Ripple Tasarım Sistemi Renk Rolleri ve Klavye Odağı
Marka ve içerik arasındaki ayrımı koruyun
Zaman çizelgesinin başlığında koyu birincil değer, kenarında vurgu rengi, okuma metninde ise nötr metin rolü kullanılır. Sağlanan kaynakta bunlar ayrı CSS değişkenleridir. Özgün durum panelinde açık vurgu yüzeyi kullanılır. Referans, gelecekte bir tema değişikliğinde birbiriyle ilgisiz onaltılık renk sabitleri yerine amaçlanan ilişkiyi güncelleyebilmek için rol adlarını da değerlerle birlikte içerir.
Klavye odağını belirgin biçimde farklı gösterin
Odak rengi, varsayılan mavinin başka bir tonu değil; koyu içerikle birlikte kullanılan turuncudur. Özgün düğme ve özet odak kuralı, yüzeyi değiştirir ve koyu bir dış çizgi çizer. Onay kutusu odağında dış çizgi kullanılır. Bu, yayımlanmış odak rengi yaklaşımının bir uygulamasıdır; örneğin Ripple’ın yerel odak araçlarını içe aktardığı veya olası her tema için erişilebilirlik sağladığı anlamına gelmez.
Ripple Tasarım Sistemi Aralıkları ve Duyarlı Tipografi
Gerçek aralık dizisini kullanın
Kaynakta okuma ritmi için 8, 16, 24, 32 ve 48px değerlerinden oluşan adlandırılmış adımlar kullanılır. Eksiksiz referansta daha büyük adımlar da yer alır; dizi, indeksin basit bir katı olmaktan çıkar. Bu nedenle rpl-sp-9, 36px değil 40px değerindedir. Tanımlanan ızgara aralığı ve bölüm dolgusu, farklı yerleşim rollerine hizmet ederken aynı ölçek değerlerini bilinçli olarak paylaşır.
Yazı tipi sınırını açıkça belirtin
Ripple, VIC için Arial ve Helvetica yedeklerini belgeler. Bu çalışma VIC yazı tipi dosyası sağlamaz ve açıkça Arial kullanır. Başlık, örnekteki 992px kesme noktasında 32/36px’ten 56/60px’e geçerken gövde metni 16/24px olarak kalır. Bu yazı tipi boyutu ve satır yüksekliği değerleri belgelenmiş referanslardır; zaman çizelgesinin düzeni özgündür ve piksel düzeyinde aynı yerel bileşen olarak tanımlanmamalıdır.
Ripple Tasarım Sistemi Zaman Çizelgesi İçeriği ve Aşamalı Ayrıntılandırma
Her aşamaya farklı bir görev verin
İlk aşama kararı tanımlar, ikincisi katılımı hazırlar, üçüncüsü ise bir eylemi kaydeder. Göreli zaman etiketleri, resmî bir son tarih veya hizmet taahhüdü uydurmadan sıralamayı belirtir. Her aşamada görünür kalan kısa bir özet ve yerel bir details öğesinde sunulan ek hazırlık notları bulunur. Görsel işaretçiler özel olsa da aşamalar sıralı liste olarak kalır.
Göreli zaman, atölye akışının sırasını belirtir.
Görünür özetler her aşamanın amacını açıklar.
Genişletilebilir notlar ikincil ayrıntıları içerir.
Hazır olma durumu, açıkça bir onay kutusu eylemiyle belirtilir.
Okumayı hazır olma durumuyla karıştırmayın
Ripple Tasarım Sistemi İlerlemesi, Sonraki Adım ve Sıfırlama
Sonraki eylemi mevcut duruma göre belirleyin
Tamamlanmamış sonraki adıma git, işaretlenmemiş ilk aşamayı bulur, notlarını genişletir ve odağı onay kutusuna taşır. Okuyucu daha önce o aşamayı açmış olsa bile aşamayı atlamaz. Üç onay kutusunun tümü işaretlendiğinde sonraki adım düğmesi devre dışı kalır ve durum mesajı tüm hazırlık adımlarının hazır olduğunu belirtir. Bir öğenin işaretini kaldırmak bu eylemi yeniden kullanılabilir hâle getirir.
İlgili tüm durumları birlikte sıfırlayın
Sıfırlama, üç onay kutusunun işaretini kaldırır, notları kapatır, ilerleme öğesini günceller ve odağı ilk onay kutusuna döndürür. Tamamlandı bandını ekranda bırakmaz veya uzak bir kaydın silindiği izlenimini vermez. Bu yerel çalışma için durum bilinçli olarak bellekte tutulur; ekranda görünen açıklama da kaydedilmediğini veya gönderilmediğini belirtir.
Ripple Tasarım Sistemi Eksiksiz Kaynak ve Doğrulama
Bağımsız çalışmayı başlatın
Sağlanan eksiksiz belgeyi index.html olarak kaydedip bulunduğu dizini sunun. Belge kendi belirteçlerini, işaretlemesini, okunabilir örnek içeriğini ve etkileşim kodunu içerir; bu nedenle harici çalışma zamanı veya yazı tipi isteği gerekmez. Gerçek bir hizmet geliştirmeden önce yerel Ripple API’lerini, sürüm seçeneklerini ve yetkili marka öğelerini kontrol etmek için kaynaklardaki bağlantılara başvurun.
Eksiksiz HTML örneğini index.html olarak kaydedin.
Dizini yerel olarak sunun.
Sonraki adıma odaklanmayı, tamamlanmayı ve sıfırlamayı klavyeyle sınayın.
Ayrı bir yerel Ripple entegrasyonu için resmî paket erişimini kullanın ve sürümleri sabitleyin.
Durum geçişinin tamamını doğrulayın
İlk öğeyi hazır olarak işaretleyin, sonraki adım eylemini kullanın ve notları genişletilmiş ikinci onay kutusuna odağın taşındığını doğrulayın. Tüm öğeleri tamamlayın, sonraki adım eyleminin devre dışı kaldığını onaylayın; ardından bir öğenin işaretini kaldırıp eylemin yeniden kullanılabilir olduğunu doğrulayın. Sıfırlayın ve hem ilerlemeyi hem de açılır notları kontrol edin. Telefon genişliğinde durum paneli zaman çizelgesinin altına geçer ve tüm denetimler kullanılabilir kalır.
Ripple Tasarım Sistemi Bileşen Örnekleri
index.html — eksiksiz atölye zaman çizelgesi
Tüm belirteç değerleri, duyarlı stiller, içerik, ilerleme ve odak davranışı çalıştırılabilir tek bir belgede.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop planning timeline</title><style>
:root{--rpl-clr-primary:#0052c2;--rpl-clr-primary-alt:#003174;--rpl-clr-accent:#0095ec;--rpl-clr-accent-alt:#e6f5fd;--rpl-clr-type-default:#1a1a1a;--rpl-clr-neutral-0:#fff;--rpl-clr-neutral-100:#f5f5f5;--rpl-clr-neutral-200:#e6e6e6;--rpl-clr-focus:#ff9e1b;--rpl-clr-focus-contrast:#1a1a1a;--rpl-sp-2:8px;--rpl-sp-4:16px;--rpl-sp-6:24px;--rpl-sp-8:32px;--rpl-sp-10:48px;--rpl-type-font-family:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--rpl-clr-neutral-0);color:var(--rpl-clr-type-default);font:16px/1.5 var(--rpl-type-font-family)}main{max-width:1160px;margin:auto;padding:var(--rpl-sp-8)}header{background:var(--rpl-clr-primary-alt);color:white;padding:var(--rpl-sp-8);border-bottom:8px solid var(--rpl-clr-accent)}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}h1{font-size:32px;line-height:36px;margin:16px 0;max-width:20ch}header p:last-child{max-width:65ch;margin-bottom:0}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:var(--rpl-sp-10);margin-top:var(--rpl-sp-8)}h2{font-size:24px;line-height:32px;margin:0 0 16px}h3{font-size:20px;line-height:28px;margin:0}.timeline{list-style:none;margin:0;padding:0 0 0 24px;border-left:2px solid var(--rpl-clr-primary);}.timeline>li{position:relative;padding:0 0 32px 8px}.timeline>li:before{content:'';position:absolute;width:14px;height:14px;background:var(--rpl-clr-primary);border:3px solid white;outline:2px solid var(--rpl-clr-primary);border-radius:50%;left:-32px;top:6px}.when{font-size:14px;font-weight:700;color:var(--rpl-clr-primary);margin:0 0 8px}.timeline p{margin:8px 0 16px}.timeline label{display:flex;align-items:flex-start;gap:8px;font-weight:700}.timeline input{width:20px;height:20px;flex-shrink:0;margin:2px 0;accent-color:var(--rpl-clr-primary)}details{background:var(--rpl-clr-neutral-100);margin:16px 0;padding:16px}summary{font-weight:700;cursor:pointer}details ul{padding-left:24px}.progress{background:var(--rpl-clr-accent-alt);padding:24px;align-self:start;border-top:4px solid var(--rpl-clr-primary)}progress{width:100%;height:16px;accent-color:var(--rpl-clr-primary)}button{font:700 16px/24px var(--rpl-type-font-family);padding:12px 16px;cursor:pointer;border:2px solid var(--rpl-clr-primary);background:var(--rpl-clr-primary);color:white;text-align:left;max-width:100%}button:hover{background:var(--rpl-clr-primary-alt)}.secondary{color:var(--rpl-clr-primary);background:white;margin-top:16px}button:disabled{cursor:default;opacity:.6}.progress button{width:100%;margin-top:16px}button:focus-visible,summary:focus-visible{outline:3px solid var(--rpl-clr-focus-contrast);outline-offset:2px;background:var(--rpl-clr-focus);color:var(--rpl-clr-focus-contrast);border-radius:0}input:focus-visible{outline:3px solid var(--rpl-clr-focus);outline-offset:3px}.note{font-size:14px;border-top:1px solid var(--rpl-clr-neutral-200);padding-top:24px;margin-top:8px;max-width:80ch}[hidden]{display:none!important}@media(min-width:992px){h1{font-size:56px;line-height:60px}h2{font-size:32px;line-height:40px}}@media(max-width:760px){main{padding:20px}header{padding:24px}.layout{grid-template-columns:1fr;gap:24px}.eyebrow{overflow-wrap:anywhere}}
</style></head><body><main><header><p class="eyebrow">OpenDesign · Workshop practice</p><h1>Make room for a useful conversation</h1><p>A short planning timeline for a team workshop. Mark what is ready and jump to the next unfinished step.</p></header><div class="layout"><section aria-labelledby="plan-heading"><h2 id="plan-heading">Your preparation timeline</h2><ol class="timeline">
<li><p class="when">One week before</p><h3>Define the decision</h3><p>Agree on the question the workshop should answer and the people who need to take part.</p><details><summary>Preparation notes</summary><ul><li>Write a one-sentence outcome.</li><li>Invite people with different perspectives on the decision.</li><li>Explain what is already decided and what is still open.</li></ul></details><label><input type="checkbox" data-step="0">The purpose and invitations are ready</label></li>
<li><p class="when">Two days before</p><h3>Prepare for participation</h3><p>Share a short agenda and offer a way to contribute before the session.</p><details><summary>Preparation notes</summary><ul><li>Send readable material in advance.</li><li>Check access needs and remote participation.</li><li>Choose someone to capture decisions.</li></ul></details><label><input type="checkbox" data-step="1">The agenda and access arrangements are ready</label></li>
<li><p class="when">On the day</p><h3>Leave with a next step</h3><p>Close with a clear decision, an owner and a date to review what happens next.</p><details><summary>Preparation notes</summary><ul><li>Leave time to compare different views.</li><li>Record unanswered questions separately.</li><li>Read back the agreed action before closing.</li></ul></details><label><input type="checkbox" data-step="2">The action and follow-up are recorded</label></li>
</ol></section><aside class="progress" aria-labelledby="progress-heading"><h2 id="progress-heading">Preparation status</h2><p id="count" role="status">0 of 3 steps ready</p><progress max="3" value="0" aria-label="Preparation progress"></progress><p id="next-note">Next: Define the decision</p><button id="next" type="button">Go to next unfinished step</button><button class="secondary" id="reset" type="button">Reset checklist</button></aside></div><p class="note">An original OpenDesign HTML/CSS study using published Ripple color, spacing and type values. It uses Arial, Ripple’s documented fallback, and does not run the Ripple Vue components or supply the VIC font. The checklist stays in this page and is not saved or sent.</p></main><script>
const checks=[...document.querySelectorAll('[data-step]')],names=['Define the decision','Prepare for participation','Leave with a next step'];const next=document.querySelector('#next');
function update(){let count=checks.filter(c=>c.checked).length,first=checks.findIndex(c=>!c.checked);document.querySelector('#count').textContent=`${count} of 3 steps ready`;document.querySelector('progress').value=count;document.querySelector('#next-note').textContent=first<0?'All three preparation steps are ready.':'Next: '+names[first];next.disabled=first<0;}
checks.forEach(c=>c.addEventListener('change',update));next.addEventListener('click',()=>{let check=checks.find(c=>!c.checked);if(check){check.closest('li').querySelector('details').open=true;check.focus();}});document.querySelector('#reset').addEventListener('click',()=>{checks.forEach(c=>c.checked=false);document.querySelectorAll('details').forEach(d=>d.open=false);update();checks[0].focus();});update();
</script></body></html>
Bu, özgün uygulama kodudur; Ripple Vue bileşeninin kaynağı değildir.
Harici çalışma zamanı, yazı tipi isteği, hesap veya veri gönderimi gerekmez.
04
Ripple Tasarım Sistemi Aracısı Kurulumu
Uygulamaya Başlangıç Noktası
Bu komut, kendi içinde eksiksiz olan yorumu sunar. Yerel Ripple için Kaynaklar bölümünde bağlantısı verilen resmî GitHub Packages erişimini ve Vue veya yalnızca stilleri içeren kurulum yolunu izleyin.
sh
# Save the complete example as index.html in an empty directory.
python3 -m http.server 8000
# Open http://localhost:8000/
Projeniz İçin Bir İstem
Ajan İstemi
Sağlanan belgeden eksiksiz ve özgün atölye zaman çizelgesini oluşturun. Ripple’ın belgelenmiş rol değerlerini ve aralıklarını, açıkça belirtilen Arial yedeğini, okuma ve hazır olma durumlarının birbirinden ayrılmasını, tamamlanmamış sonraki adım odağını, tamamlanmayı ve tam sıfırlamayı koruyun. Sonucu yerel bir Ripple Vue uygulaması olarak değil, HTML/CSS yorumu olarak etiketleyin.
05
Ripple Tasarım Sistemi Kaynakları ve Kapsamı
Yayımlanmış Ripple tasarım değerlerini ve belgelenmiş Arial yedeğini kullanan bir OpenDesign HTML/CSS yorumudur. Bu önizleme Ripple Vue bileşenlerini çalıştırmaz ve VIC yazı tipi varlıklarını içermez.
