Helsinki Tasarım Sistemi.

Helsinki Tasarım Sistemi Core ve React sınırları

Gerçekte çalıştırdığınız uygulamayı seçin

HDS; Core CSS, React bileşenleri ve tasarım belirteçleri sunar. Bu örnek, örnek için indirilip incelenen hds-core5.2.2 sürümünü sabitler. Depo sürüm numaraları tek bir paketin sürümünden farklı olabilir; bu nedenle daha yeni bir depo etiketi, bu örneğin o sürümle çalıştığını göstermez.

Core, temel değişkenleri ve bileşenlere ait ayrı stilleri sağlar. Burada kullanılan form uygulama durumunu sağlamaz. Seçim, doğrulama, inceleme ve değiştirme mantığı; yerel HTML girişleri ve belgelenmiş HDS form örüntüsü üzerine kurulmuş özgün bir JavaScript uygulamasıdır.

Destekleyici belirtimi okuyun

Helsinki Tasarım Sistemi Tipografisi ve yazı tipi sınırı

Yerel yedek yazı tipini şeffaf biçimde kullanın

Yazı tipi değişkeni önce HelsinkiGroteskPro'yu, ardından Arial ve sans-serif'i belirtir. Core README dosyası, telif hakları nedeniyle Helsinki yazı tipi dosyalarının pakete dahil olmadığını açıkça belirtir. Önizleme, kısıtlı yazı tiplerini indirmek veya markaya özgü görünümü birebir sunduğunu sessizce iddia etmek yerine yedek yazı tipini kullanır.

Temel gövde belirteci, satır yüksekliği 1.5 olan 16px'tir. heading-xl 48px, mobil belirteç ise 40px'tir; önizleme bu ikisi arasında 576px'te geçiş yapar. Bunlar adlandırılmış değerlerdir; ancak bir kesme noktasını içeren CSS değişkeni, duyarlı davranışı kendiliğinden oluşturmaz. Açık medya kuralı, uygulama bileşimine aittir.

Destekleyici belirtimi okuyun

Helsinki Tasarım Sistemi İki aralık sistemi

Bileşen aralıklarını sayfa ritminden ayırın

HDS, bileşen aralıkları dizisini daha geniş bir düzen aralıkları dizisinden ayırır. İlk dizi, 72px'e kadar büyümeden önce 2, 4, 8, 12, 16 ve 24px değerlerini içerir. Düzen aralıkları 128px'e kadar çıkar. spacing-layout-xl geçerli bir değişken olsa da bitişik onay kutuları arasında kullanılması grubu gereğinden fazla açar.

Onay kutusu bileşeni 24px'lik bir kontrol, 2px'lik bir kenarlık ve 3px'lik bir odak çizgisi tanımlar. Düğmenin minimum boyutu 56px'tir ve köşeleri karedir. Önizleme bu yerel şekilleri korurken form, yayımlanmış 720px referans genişliğiyle sınırlı bir uygulama kapsayıcısında yer alır.

Destekleyici belirtimi okuyun

Helsinki Tasarım Sistemi Formdaki renk rolleri

Palet adlarını geri bildirim rolleriyle karıştırmayın

Varsayılan etkileşim teması Bus mavisini, odak çizgisi ise Coat of arms mavisini kullanır. Hata geri bildirimi için ayrı bir böğürtlen tonu ve soluk hata yüzeyi kullanılır. Copper gibi bir palet vurgusu başlığı destekleyebilir; ancak daha belirgin göründüğü için hata rolünün yerine kullanılmamalıdır.

Seçim grubunun satır içi hata göstergesi metin, zıt renkli bir sol kenarlık ve simge stili kullanır. Yalnızca kırmızı renge dayanmaz. Hata özetindeki bağlantılar, kullanıcıların alana dönüş yolunu tanıyabilmesi için alışıldık etkileşim rengini kullanır.

Destekleyici belirtimi okuyun

Helsinki Tasarım Sistemi Onay kutusu grubu anatomisi

Bir grupta tek bir soru ve birkaç yanıt bulunur

Yerel yapı; fieldset, legend, öğe kapsayıcısı ve ayrı onay kutusu sarmalayıcılarından oluşur. Stil sayfası görsel durumlar için bu ilişkiden yararlandığından her giriş, hemen öncesinde gelen etiketle eşleşir. Legend, seçim görevini açıklar; her etiket ise kullanılabilir konulardan birini adlandırır.

Demo, özgün bir iş kuralı olarak en az iki konu seçilmesini ister. Birden fazla seçenek seçili kalabildiği için onay kutuları uygundur. Radyo düğmesi grubu, birbirini dışlayan bir seçimi ifade eder ve bu görevle çelişir. Fieldset ipucu, doğrulama öncesinde ve sonrasında görünür kalır.

<fieldset class="hds-selection-group" aria-describedby="topics-hint">
  <legend class="hds-selection-group__legend">Topics for your afternoon</legend>
  <p id="topics-hint">Choose at least two topics.</p>
  <div class="hds-selection-group__items hds-selection-group__items--vertical">
    <div class="hds-checkbox">
      <input class="hds-checkbox__input" type="checkbox" id="repair" value="Repair and reuse">
      <label class="hds-checkbox__label" for="repair">Repair and reuse</label>
    </div>
    <div class="hds-checkbox">
      <input class="hds-checkbox__input" type="checkbox" id="garden" value="Urban gardening">
      <label class="hds-checkbox__label" for="garden">Urban gardening</label>
    </div>
  </div>
</fieldset>

Kod referansı

Destekleyici belirtimi okuyun

Helsinki Tasarım Sistemi Bağlantılı hatalar ve düzeltme

Önce soruna odaklanın, sonra girilen bilgileri koruyun

HDS, form gönderimi başarısız olduktan sonra form başlığının altına hata özeti yerleştirilmesini önerir. Özetteki bağlantılar hatalı kontrollere gider ve odak özet başlığına taşınır. Demo bu sırayı izler: hiç konu seçilmediğinde veya bir konu seçildiğinde inceleme özeti ve satır içi hata mesajı görünür; bağlantı, odağı ilk onay kutusuna taşır.

İlk denemeden sonra her seçim değişikliğinde asgari seçim sayısı yeniden doğrulanır. İki konu seçildiğinde, seçili girişler temizlenmeden her iki hata gösterimi de kaybolur. Sonraki başarısız denemede odak özet başlığına döner. Kural, inceleme sırasında yeniden denetlenir; gerçek bir hizmette istemci tarafı geri bildirimi sunucu doğrulamasının yerini tutmaz.

1. Hiç konu seçmeden incelemeyi başlatın ve özetin odak aldığını doğrulayın.
2. Bağlantıyı izleyip iki konu seçin; hatanın giderildiğini doğrulayın.
3. Yerel incelemeyi açın, konu değiştirmek için geri dönün ve iki seçimin de korunduğunu doğrulayın.

Destekleyici belirtimi okuyun

Helsinki Tasarım Sistemi Varlıklar ve eksiksiz örnek

Temel stilleri ve seçili bileşenleri yükleyin

Core paketi base.css dosyasını bileşen stillerinden ayırır. Yalnızca base dosyasını içe aktarmak değişkenleri ve tipografiyi sağlar; ancak onay kutusu veya bildirim yapısını sağlamaz. Kurulum, bu örnekte kullanılan dosyaları açıkça belirtir ve tüm bileşenleri içeren pakete kıyasla varlık kümesini daha küçük tutar.

Eksiksiz örnek, uygulama doğrulamasını ve sıfırlamayı içerir. Son durumu, hiçbir şey kaydedilmediği veya gönderilmediği için yerel inceleme olarak adlandırır. Seçimleri temizlemek; seçimleri ve doğrulama geçmişini sıfırlayan, ardından odağı ilk girişe taşıyan bilinçli bir eylemdir. Olağan bir alan hatası bu işlemi tetiklemez.

• base.css renkleri, aralıkları, tipografiyi ve referans ölçülerini sağlar.
• checkbox ve selection-group stilleri, gruplandırılmış kontrolleri ve satır içi geri bildirimi sağlar.
• notification ve button stilleri, hata özeti yüzeyini ve eylemleri sağlar.

Destekleyici belirtimi okuyun

Helsinki Tasarım Sistemi Bu örnek neyi gösteriyor

Yanlış hizmet iddiasında bulunmadan uygulama ayrıntıları

Önizleme; 1440, 768 ve 390px genişliklerde gerçek HDS bileşen stillerini, klavye odağını, düzeltmeyi ve verilerin korunmasını gösterir. Kapsamlı bir erişilebilirlik denetimi yapıldığını iddia etmez. Gerçek bir çok dilli şehir hizmeti ayrıca yerelleştirilmiş etiketlere, uygun dil üst verilerine, sunucu tarafı kurallara ve hizmet arka ucundan onaylanmış bir yanıta ihtiyaç duyar.

Kaynak kodu MIT lisanslıdır; ancak özel şehir yazı tipinin ayrı bir hak sınırı vardır. Bu bağımsız öğrenme örneği, kurgusal program konuları kullanır ve resmî Helsinki kimliği taşımaz. Görünüm ve yerel durum, gerçek bir etkinlik kaydıyla asla karıştırılmamalıdır.

Destekleyici belirtimi okuyun

Helsinki Tasarım Sistemi Bileşen Örnekleri

<fieldset class="hds-selection-group" aria-describedby="topics-hint">
  <legend class="hds-selection-group__legend">Topics for your afternoon</legend>
  <p id="topics-hint">Choose at least two topics.</p>
  <div class="hds-selection-group__items hds-selection-group__items--vertical">
    <div class="hds-checkbox">
      <input class="hds-checkbox__input" type="checkbox" id="repair" value="Repair and reuse">
      <label class="hds-checkbox__label" for="repair">Repair and reuse</label>
    </div>
    <div class="hds-checkbox">
      <input class="hds-checkbox__input" type="checkbox" id="garden" value="Urban gardening">
      <label class="hds-checkbox__label" for="garden">Urban gardening</label>
    </div>
  </div>
</fieldset>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Plan a skills afternoon</title><link rel="stylesheet" href="vendor/hds-core-5.2.2/base.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/checkbox.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/selection-group.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/notification.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/button.css"><style>*{box-sizing:border-box}body{margin:0;padding:var(--spacing-layout-s) var(--spacing-s);font-family:var(--font-default);color:var(--color-black-90)}main{max-width:720px;margin:auto}h1{margin-top:8px}header{border-top:8px solid var(--color-copper);padding-top:var(--spacing-m)}.hds-selection-group{margin:24px 0}.hds-notification{margin:24px 0}.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}footer{font-size:14px;line-height:1.5;margin-top:32px;border-top:1px solid var(--color-black-20);padding-top:16px}#review{background:var(--color-silver-light);padding:24px;margin-top:24px}[hidden]{display:none!important}@media(max-width:575px){.heading-xl{font-size:var(--fontsize-heading-xl-mobile)}}button{max-width:100%}</style><main class="text-body"><header><small>COMMUNITY SKILLS · LOCAL PLAN</small><h1 class="heading-xl">Plan a skills afternoon</h1><p>Select at least two topics for an example programme. Nothing is registered or sent.</p></header><form id="form" novalidate><div id="summary" class="hds-notification hds-notification--error" hidden><div class="hds-notification__content"><h2 id="summary-heading" class="hds-notification__label" tabindex="-1">Check your topic selection</h2><div class="hds-notification__body"><ul><li><a href="#repair" id="error-link">Choose at least two topics</a></li></ul></div></div></div><fieldset class="hds-selection-group" aria-describedby="hint field-error"><legend class="hds-selection-group__legend">Topics for your afternoon</legend><p id="hint">Choose two or more. You can change your selection before reviewing the plan.</p><div class="hds-selection-group__items hds-selection-group__items--vertical"><div class="hds-checkbox"><input id="repair" type="checkbox" class="hds-checkbox__input" value="Repair and reuse"><label class="hds-checkbox__label" for="repair">Repair and reuse</label></div><div class="hds-checkbox"><input id="digital" type="checkbox" class="hds-checkbox__input" value="Everyday digital skills"><label class="hds-checkbox__label" for="digital">Everyday digital skills</label></div><div class="hds-checkbox"><input id="garden" type="checkbox" class="hds-checkbox__input" value="Urban gardening"><label class="hds-checkbox__label" for="garden">Urban gardening</label></div></div><div id="field-error" class="hds-selection-group__error-text" hidden>Choose at least two topics.</div></fieldset><p id="count" role="status">0 topics selected.</p><div class="actions"><button class="hds-button hds-button--primary" type="submit">Review local plan</button><button id="reset" class="hds-button hds-button--secondary" type="button">Clear selection</button></div></form><section id="review" hidden tabindex="-1"><h2 class="heading-m">Your selected topics</h2><ul id="selected"></ul><p>This is a local review, not a booking confirmation.</p><button id="change" class="hds-button hds-button--secondary">Change topics</button></section><footer>Native HDS Core5.2.2 styles with Arial fallback. Original selection rule and local review. No Helsinki branding, registration or backend.</footer></main><script>let attempted=false;const boxes=[...document.querySelectorAll('input[type=checkbox]')];const values=()=>boxes.filter(x=>x.checked);function validate(focus=false){const n=values().length;document.querySelector('#count').textContent=n+' topics selected.';const bad=attempted&&n<2;document.querySelector('#summary').hidden=!bad;document.querySelector('#field-error').hidden=!bad;boxes.forEach(x=>{if(bad)x.setAttribute('aria-invalid','true');else x.removeAttribute('aria-invalid')});if(bad&&focus)document.querySelector('#summary-heading').focus();return !bad}boxes.forEach(x=>x.onchange=()=>validate());document.querySelector('#error-link').onclick=e=>{e.preventDefault();boxes[0].focus()};document.querySelector('#form').onsubmit=e=>{e.preventDefault();attempted=true;if(!validate(true))return;const list=document.querySelector('#selected');list.replaceChildren();values().forEach(x=>{const li=document.createElement('li');li.textContent=x.value;list.append(li)});document.querySelector('#form').hidden=true;document.querySelector('#review').hidden=false;document.querySelector('#review').focus()};document.querySelector('#change').onclick=()=>{document.querySelector('#form').hidden=false;document.querySelector('#review').hidden=true;boxes[0].focus()};document.querySelector('#reset').onclick=()=>{boxes.forEach(x=>x.checked=false);attempted=false;validate();boxes[0].focus()};</script></html>