# Scottish Government tasarım sistemi

## Scottish Government tasarım sistemi arayüz önizlemesi

Uzun bir not deneyin, karakter sınırının altına inmek için düzenleyin, yerel olarak önizleyin ve ardından düzenleyip sıfırlayın.

## Scottish Government tasarım sistemi tasarım başvurusu

Güncel resmî tipografi, renk ve ızgara yönergeleriyle birlikte yayımlanmış Scottish Government Design System 4.3.0 CSS ve JavaScript. Yerel CharacterCount bileşeni ve stiller önizlemede çalışır. Arial, bağımsız örnek için açıkça belirtilmiş bir yedek yazı tipidir; Scottish Government müdürlükleri Roboto kullanmalıdır. Güncel paket varlıkları, eski kurulum örneklerinden farklıdır.

### Duyarlı tipografi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Body | 16/24px small →19/32px large | Normal 400; yerel büyük ekran stilleri 48rem'de başlar. |
| H1 | 30/40px →44/56px | Kalın 700. |
| H2 / H3 | 22/32 →30/40px;19/24 →22/32px | Anlamsal başlık düzeylerini kullanın; ds_h3, düzeyi değiştirmeden görünümü değiştirebilir. |
| H4 / H5 | 16/24 →19/32px;14/24 →16/24px | Kalın 700. |
| Lead | 19/32px →24/40px | İnce 300; her sayfada tek, özlü bir giriş metni kullanın. |
| Font | Roboto | Scottish Government müdürlükleri/politika alanları için zorunludur; bağımsız örnek açıkça Arial kullanır. |
### Sass renk rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $ds_colour__brand / __link | #0065bd | Birincil mavi; bağlantı üzerine gelindiğinde #00437e. |
| $ds_colour__text | #1a1a1a | İkincil metin #5e5e5e. |
| $ds_colour__focus / --background | #1a1a1a / #fdd522 | Markaya uyarlanmış bir temada bile bu odak rollerini koruyun. |
| $ds_colour__state--negative | #d32205 | Sınır aşımı alanı/hata mesajları. |
| $ds_colour__state--positive | #1a7032 | Olumlu mesajlar; yerel metnin gönderildiği anlamına gelmez. |
| $ds_colour__border | #b3b3b3 | Koyu #1a1a1a ve soluk #ebebeb alternatifleri. |
### Duyarlı boşluk yardımcı sınıfları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| ds_!_margin-bottom--1 / --2 / --3 | 8 /16 /24px | 48rem'de değişmeden kalır. |
| ds_!_margin-bottom--4 | 24px →32px | 48rem'de küçükten büyüğe geçer. |
| ds_!_margin-bottom--5 / --6 | 32→40px /40→48px | Tek bir sabit boşluk değeri yerine duyarlı boşluk kullanın. |
| ds_!_margin-bottom--7 / --8 / --9 | 40→56px /48→64px /56→72px | Daha geniş aralıklar için kullanın; en büyük boşluğu her yere uygulamaktan kaçının. |
### Izgara ve kullanılabilir iç genişlikler

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Viewport thresholds | 480,768,992,1200px | Sütun sayısı 2→6→12 olarak artar, ardından 12'de kalır. |
| Content width at medium/large/xl | 736 /928 /1120px | Yayımlanmış iç ızgara genişliği; sarmalayıcı kutusunun genişliğinden farklıdır. |
| Native ds_wrapper box | 768 /960 /1152px | Sürümdeki CSS için her iki yanda 16px dolgu içerir. |
| Gutter / side padding | 32px /16px | 768px altında sarmalayıcı akışkan genişliktedir. |
| Reading width in specimen | 42rem maximum | Yerel sarmalayıcının içindeki uygulama tercihi; resmî ve evrensel bir tasarım belirteci değildir. |
### CharacterCount sözleşmesi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Root | data-module="ds-character-count" | Yerel bir input veya textarea içerir. |
| Limit | maxlength="200" | Başlatma sırasında kullanılır ve kaldırılır; sınırı aşan metin düzenlenebilir durumda kalır. |
| Alternative | data-maxlength on root | JavaScript kullanılamıyorsa yerel maxlength yedeği yoktur. |
| Threshold | data-threshold="80" | Sınırın %80'ini, aşağı yuvarlayarak kullanır; 200 için 160 karakterde görünür. |
| Error state | ds_input--error;aria-invalid="true" | Sayaç negatife düştüğünde uygulanır; görünür aşım sayacıyla birlikte kullanılır. |
| Announcements | Separate hidden message;1000ms delay | aria-describedby mevcut ipucunu korur ve oluşturulan mesaj kimliklerini ekler. |
| Counting unit | JavaScript value.length | UTF-16 kod birimleri sayılır; emoji sayımının grafem kümelerine göre yapıldığı vaadinde bulunmayın. |
## Scottish Government tasarım sistemi eksiksiz kılavuzu

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ı.

## Scottish Government tasarım sistemi Metin girişi için pratik bir başvuru

### Kullanıcının çalışmasını kaybetmeden düzenleyebilmesini sağlayın

> Buradaki belirleyici etkileşim, metni silmeyen uzunluk yönergesidir. Kullanıcı uzun bir erişim notunu yapıştırabilir, ne kadarını düzenlemesi gerektiğini görebilir ve kısaltırken metnin tamamını koruyabilir. Yerel karakter sayacı; kalan sayıyı, sınır aşımı stilini ve gecikmeli yardımcı teknoloji mesajını gösterir. Notun önizleme için yeterince geçerli olup olmadığına ise uygulama ayrıca karar verir.

Bu, özgün bir atölye notu örneğidir; Scottish Government hizmeti değildir ve sağlık bilgisi istemez. Kimlik grafikleri, depolama veya gönderim içermez. Alan ipucu, görevin resmî bir işlemden ödünç alınmadan anlaşılabilmesi için pratik bir erişim gereksinimi ister ve özel ayrıntıların paylaşılmamasını önerir.

Destekleyici belirtimi okuyun

## Scottish Government tasarım sistemi Roboto ve duyarlı tipografik hiyerarşi

### Yayımlanmış ölçüleri koruyun

Sistem, Scottish Government müdürlükleri ve politika alanları için Roboto kullanılmasını zorunlu kılar. Sistemi benimseyen diğer kuruluşlar, boyut ve satır yüksekliği kurallarını koruyup sonucu test ederek okunaklı başka bir yazı tipi kullanabilir. Bağımsız örnekte Arial yedek yazı tipi olarak açıkça belirtilmiştir; bulunmayan bir web yazı tipinin Roboto olduğu iddia edilmez.

Gövde metni 16/24px'ten 19/32px'e, ana başlık ise 30/40px'ten 44/56px'e çıkar. Her iki değişiklik de yerel geniş ekran stil sayfasında yapılır. ds_h 3 sınıfı, üçüncü düzeyde anlamsal bir başlık gerektirmeden görsel boyutu değiştirir. Kısa bir formda daha küçük bir bölüm başlığına ihtiyaç duyulurken belge ana hattında yapay bir boşluk oluşturulmaması açısından bu ayrım önemlidir.

Destekleyici belirtimi okuyun

## Scottish Government tasarım sistemi Belirgin bir odak görünümü

### Odağı, hatayı ve tamamlanmayı birbirinden ayırın

Mavi, birincil marka/bağlantı rolünü; siyah metni; sarı ise odağı destekler. Bunlar, uydurulmuş bir CSS özel özellikler koleksiyonu değil, adlandırılmış Sass ayarlarıdır. Marka uyarlaması, sistem ayar modülüyle yüklenmeden önce yapılır. Diğer marka renkleri değişse bile resmî yönergeler odak paletinin korunmasını ister.

Karakter sayacı, negatif kırmızıyı yalnızca izin verilen uzunluk aşıldığında gösterir. Uygulama düzeyindeki ikinci bir boş alan hatasında da aynı negatif rol kullanılabilir; ancak mesaj, karakter sayımı sorununu değil, yanıtın eksik olduğunu belirtmelidir. Önizlemede uzak bir gönderimin başarılı olduğu izlenimini vermek için olumlu yeşil asla kullanılmaz.

- Textarea ve işlem düğmelerinde görünür klavye odağı dış çizgisini koruyun.

- Uzunluk aşımını yalnızca kırmızı kenarlıkla değil, metinle de açıklayın.

- Hata özetlerini ve alan ipuçlarını kararlı bir alan kimliğine bağlayın.

Destekleyici belirtimi okuyun

## Scottish Government tasarım sistemi Sarmalayıcı genişliği ve boşluklar

### Dış ve iç genişliklerin karıştırılmasını önleyin

Resmî ızgara tablosunda orta, büyük ve ekstra büyük kesme noktaları için sırasıyla 736, 928 ve 1120px iç içerik genişlikleri belirtilir. Bunlara karşılık gelen yerel kapsayıcı kutular 768, 960 ve 1152px genişliğindedir; çünkü her birinde yanlarda 16px dolgu bulunur. Bu ayrımı gözetmek, uygulayıcıların bu iki genişliği iç içe kullanıp düzeni yanlışlıkla iki kez daraltmasını önler.

Önizlemede, yerel kapsayıcının içine 42rem genişliğinde bir metin sütunu yerleştirilir. Bu üst sınır, kısa bir form için uygun bir uygulama tercihidir; sistem için yeni bir ayar değildir. 768px altında kapsayıcı akışkan hâle gelir ve aynı 16px yan boşluk, metin alanını ekran kenarından korur.

Boşluk yardımcı sınıfları duyarlıdır. Örneğin ds_!_margin-bottom--4, 48rem’de 24px’ten 32px’e çıkar; daha büyük düzeyler de artar. Kaynakta her iki değer de verildiği için masaüstü ekran görüntüsündeki boşluğun her yerde sabit olduğu sanılmaz.

Destekleyici belirtimi okuyun

## Scottish Government tasarım sistemi Yerel karakter sayacı alanı

### Gerçek bir metin alanıyla başlayın

ds_question kök öğesi data-module niteliğini ve isteğe bağlı yüzde eşiğini taşır. İlişkili etiket ve ipucu, sıradan ve erişilebilir HTML öğeleridir. maxlength niteliğine sahip bir textarea, JavaScript olmadan da işe yarayan bir yedek çözüm sunar. İyileştirme uygulandıktan sonra bileşen bu değeri okur ve katı sınırı kaldırır; böylece yapıştırılan metin sessizce kesilmez.

%80 eşiğine sahip 200 karakterlik bir alanda sayaç, 160 karaktere ulaşıldığında gösterilir. Herkese açık bileşen sayfasındaki örnek metin ile 250 karakterlik kod örneğinde aynı sayılar kullanılmadığından, bu örnekte baştan sona tutarlı tek bir sınır kullanılmıştır. JavaScript yoksa görünür ipucu sınırı belirtmeye devam eder ve yerel maxlength niteliği uygulanır.

```
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>
```

Kod referansı

Destekleyici belirtimi okuyun

## Scottish Government tasarım sistemi Yerel bileşenin sorumlulukları

### Mesajlar, zamanlama ve sayım

Sürümlenmiş uygulama, aria-hidden niteliğine sahip görünür bir mesaj ve yardımcı teknoloji için ayrı, gizli bir mesaj oluşturur. Yazılmış ipucunu silmek yerine ilgili kimlikleri mevcut aria-describedby niteliğine ekler. Yazma geri bildiriminin önce tamamlanması için gizli duyuruyu güncellemeden önce 1000ms bekler.

Gerçek uzunluk, JavaScript string.value.length değerinden alınır: UTF-16 kod birimlerini sayar. Temel çok dilli düzlemin dışındaki bir sembol iki birim, birleşik bir emoji ise daha fazla birim kullanabilir. Farklı bir karakter politikası gerektiren hizmetler, bu bileşenin insan algısına göre karakter sayımı yaptığını iddia etmek yerine sayacı ve sunucu tarafı doğrulamasını birbiriyle uyumlu hâle getirmelidir.

Bileşen input olaylarını dinler. Uygulama bir örnek metin ekler veya alanı programatik olarak temizlerse input olayını da göndermelidir. Demodaki örnek metin ekleme ve sıfırlama işlemleri bunu yapar. Kaynaktaki bir yorumda konuşma tanıma için düzenli aralıklarla kontrol yapıldığından söz edilir; ancak incelenen uygulamada böyle bir aralık ayarlanmaz. Bu nedenle bu kılavuzda söz konusu davranışın mevcut olduğu ileri sürülmez.

Destekleyici belirtimi okuyun

## Scottish Government tasarım sistemi Güncel sürüm yollarını kullanın

### Modül yükleme ve kapsamlı başlatma

Güncel paketin adı @scottish-government/design-system'dir. 4.3.0 sürümünde derlenmiş stil sayfası dist/css/design-system.min.css konumundadır; eski bir kurulum paragrafında ise hâlâ dist/styles/main.css yoluna başvurulur. Bu tarif, yayımlanmış gerçek varlığı kullanır. Betik bir ES modülü dışa aktarımı içerdiğinden, sıradan bir klasik betik etiketi yerine type="module" ile içe aktarın.

Bu tek alan için bir CharacterCount örneği oluşturup init çağrısını yapın. Birden fazla bileşen içeren sayfalarda DS.initAll da kullanılabilir; ancak bu örnek yalnızca gereken sayacı başlatır. Ek bir analiz hizmeti yapılandırılmamıştır. Sunucu tarafı doğrulama kütüphaneden bağımsızdır: sayaç, kullanımı kolaylaştıran bir düzenleme aracıdır; kısıtlamaları uygulama sınırı değildir.

1. Sabitlenmiş 4.3.0 paketini yükleyin ve derlenmiş CSS dosyasını ve modülü yerel bir varlık dizinine kopyalayın.

2. Modülü içe aktarmadan önce sayfaya etiketin, ipucunun ve textarea yapısının tamamını ekleyin.

3. Sayacı bir kez başlatın; ardından uygulamanın önizleme/sıfırlama işlemlerini olağan input olaylarıyla bağlayın.

Destekleyici belirtimi okuyun

## Scottish Government tasarım sistemi Sınır aşımından kurtulmayı sınayın

### Yalnızca boş alanı sınamayın

Eşiğin altında başlayın, 160 karakteri geçin ve ardından 200 karakterden uzun bir metin yapıştırın. “çok fazla” mesajı görünürken metnin tamamı textarea içinde kalmalı ve aria-invalid true olmalıdır. Değeri sınırın altına indirin; hata sınıfının ve geçersiz durumun sıfırlandığını doğrulayın.

Uygulamanın Önizleme işlemi, boş veya sınırı aşan notları ilişkili bir hatayla engeller. Geçerli bir not, textContent kullanılarak yerel önizlemede gösterilir; böylece yazılan işaretleme yorumlanmak yerine metin olarak görüntülenir. Notu düzenle işlemi, değeri korunmuş olarak aynı textarea alanına döndürür. Sıfırla işlemi, yerel sayacın da sıfırlanması için bir input olayıyla alanı temizler.

390px genişlikte başlığın satırlara bölünmesini, textarea'nın tam genişliğini, düğmelerin satır kaydırmasını ve hata özetini inceleyin. Daha geniş ekranlarda metin sütunu geniş bir paragrafa dönüşmemelidir. Bu kontroller bu örneği doğrular; gerçek bir hizmetin ise son bağlamında kullanıcı araştırması, yazı tipi testleri ve yardımcı teknoloji incelemesi yapması gerekir.

Destekleyici belirtimi okuyun

## Scottish Government tasarım sistemi Bileşen Örnekleri

### Yıkıcı olmayan karakter sınırı

Etiket, ipucu, textarea ve %80 eşiğiyle aşamalı iyileştirme.

```
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>
```

Kod referansı

### Güncel 4.3.0 derlenmiş varlıkları

Sürümü doğrulanmış CSS yolu ve ES modülüyle başlatma.

```
npm install --save-exact @scottish-government/design-system@4.3.0
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>
```

Kod referansı

### Eksiksiz bağımsız örnek

Belgenin tamamı düzeni, denetimleri ve başlatma kodunu içerir. Tam göreli vendor varlıklarını almak için bağlantılı örnek arşivini çıkarın ve HTTP üzerinden sunun.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Scottish design system character count specimen</title><link rel="stylesheet" href="vendor/scot-4.3.0/dist/css/design-system.min.css"><style>body,button,input,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.reading{max-width:42rem}.eyebrow{border-top:4px solid #0065bd;padding-top:16px;color:#5e5e5e}.actions{display:flex;flex-wrap:wrap;gap:16px}.actions .ds_button{margin:0}.preview-text{white-space:pre-wrap;overflow-wrap:anywhere;border-left:4px solid #b3b3b3;padding-left:24px}[hidden]{display:none!important}</style><main class="ds_wrapper"><div class="reading"><p class="ds_small eyebrow">Independent specimen · Workshop access note</p><section id="entry"><h1>Tell us what would help</h1><p>Practice a short access note for a community workshop. This page does not save or send your text.</p><div id="error" class="ds_error-summary" tabindex="-1" hidden><h2 class="ds_error-summary__title">There is a problem</h2><p><a href="#access-note" id="error-link"></a></p></div><form id="form" novalidate><div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div><p class="ds_small">Use up to 200 characters. The count appears after 160.</p><div class="actions"><button class="ds_button" type="submit">Preview note</button><button class="ds_button ds_button--secondary" id="sample" type="button">Try a long example</button><button class="ds_button ds_button--secondary" id="reset" type="button">Reset</button></div></form></section><section id="preview" hidden><h1 tabindex="-1">Your note preview</h1><p id="result" class="preview-text"></p><p>No note has been sent. You can return to edit it.</p><button id="edit" class="ds_button ds_button--secondary">Edit note</button></section></div></main><script type="module">import DS from './vendor/scot-4.3.0/dist/scripts/design-system.js';const field=document.querySelector('[data-module="ds-character-count"]');new DS.components.CharacterCount(field).init();const input=document.querySelector('#access-note'),entry=document.querySelector('#entry'),preview=document.querySelector('#preview'),error=document.querySelector('#error');function setValue(value){input.value=value;input.dispatchEvent(new Event('input',{bubbles:true}));input.focus()}document.querySelector('#sample').onclick=()=>setValue('A clear route from the entrance to the workshop room would help me take part. Please describe where the quiet seating area is and whether instructions will be available in writing. I would also appreciate knowing where to find the nearest accessible entrance.');document.querySelector('#reset').onclick=()=>{setValue('');error.hidden=true};document.querySelector('#form').onsubmit=e=>{e.preventDefault();let message=!input.value.trim()?'Enter a short access note.':input.value.length>200?'Shorten your note to 200 characters or fewer.':'';if(message){document.querySelector('#error-link').textContent=message;error.hidden=false;error.focus();return}error.hidden=true;document.querySelector('#result').textContent=input.value;entry.hidden=true;preview.hidden=false;preview.querySelector('h1').focus()};document.querySelector('#edit').onclick=()=>{entry.hidden=false;preview.hidden=true;input.focus()};window.demoReady=true;</script></html>
```

Kod referansı

- Eksiksiz örneği Kaynaklar bölümünden indirin. README dosyasında tam yerel başlatma komutu bulunur.

- Vendor yollarını bu belgeye göreli tutun; arşiv, bu önizlemenin kullandığı tüm varlıkları içerir.

## Scottish Government tasarım sistemi Aracı Kurulumu

### Uygulamaya Başlangıç Noktası

Yerel demo, gerçek 4.3.0 CSS paketini ve CharacterCount modülünü çalıştırır. Yazı tipi yedeği açıkça belirtilmiştir; kurulum sayfasındaki eski dist/styles yolu kullanılmaz. Kaynaklar bölümündeki eksiksiz çalışan örnek ZIP dosyası, doğru önizleme bağımlılıklarını ve belgenin tamamını da içerir. Dosyaları çıkarın, bu dizinde python3 -m http.server 8080 komutunu çalıştırın, ardından http://localhost:8080/scottish-government.html adresini açın. Modül kullanan örnekleri file:// üzerinden açmayın.

```
npm install --save-exact @scottish-government/design-system@4.3.0
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>
```

### Projeniz İçin Bir İstem

```
Bağımsız bir erişim notu formunda gerçek Scottish Government Design System 4.3.0 CharacterCount bileşenini kullanın. Doğrulanmış dist/css/design-system.min.css ve ES modülü olan dist/scripts/design-system.js yollarını sabitleyin. İlişkili ipucu ve kapsamlı bileşen başlatma içeren, %80 eşikli 200 karakterlik bir textarea sağlayın. Sınırı aşan yapıştırılmış metni koruyun; yerel sayım ve ARIA güncellemelerini kütüphaneye bırakın, ayrıca yerel doğrulama ile yalnızca metin gösteren güvenli bir önizleme/düzenleme/sıfırlama akışı ekleyin. Örnek metin ekleme/sıfırlama işlemleri programatik olarak input olayları göndermelidir. Yayımlanmış duyarlı tipografi ve boşluk değerlerini, açıkça belirtilmiş bir yazı tipi tercihini kullanın; resmî kimlik unsurlarına veya sahte gönderim işlevine yer vermeyin.
```

## Scottish Government tasarım sistemi Kaynaklar ve Kapsam

Bağımsız uygulama referansı. Scottish Government müdürlükleri Roboto kullanmalıdır; markasız bu örnekte yedek yazı tipi olarak açıkça Arial belirtilmiştir. Özgün metin; depolama/gönderim veya resmî bağlantı yoktur. Kod lisansı ile resmî grafik varlıklarının kullanım izinleri birbirinden ayrıdır.

- Tür Tipografi ve yazı tipi kullanımı kuralları.

- Renk Sass palet rolleri ve tema sınırları.

- Izgara İç ızgara genişlikleri, sütunlar ve oluklar.

- Sayaç Yıkıcı olmayan sınırlar ve eşik davranışı.

- JS Başlatma API'leri ve iyileştirme.

- Kurulum Paket kurulumu; yayımlanmış güncel yollarla karşılaştırın.

- Odak Görünür klavye odağı yönergeleri.

- Soru Soru gruplama yapısı.

- Hata Kurtarma ve hata özeti yönergeleri.

- Çalışan örneğin tamamını indirin Tam HTML, yerel CSS/JavaScript bağımlılıklarını, sağlanan lisansları ve başlatma talimatlarının tam hâlini içeren ZIP. Derleme adımı gerekmez.

## Scottish Government tasarım sistemi İlgili Kaynaklar

### Singapore Government tasarım sistemi

Güncel SGDS Web Components bileşenlerini gerçek duyarlı belirteçler, gündüz ve gece temaları ve yerel planı senkronize tutan yerel, sınırlandırılmış miktarlarla kullanın.

### Decanter

Decanter’ın Tailwind ön ayarı, duyarlı tipografi ölçeği ve esnek ekran kenarlarıyla akademik editoryal sayfalar oluşturun. Çalışan konu filtreleri ve genişletilebilir özetler içeren özgün etkinlik kartlarını keşfedin.

### Suomi.fi tasarım sistemi

Source Sans 3, açıkça tanımlanmış boşluk belirteçleri ve kurtarılabilir belge seçimi düzeniyle okunaklı Fince kamu hizmeti formları oluşturun.


- [Uygulama başvurusu](https://designsystem.gov.scot/components/character-count)
- [Kaynak](https://designsystem.gov.scot/styles/typography)
- [Kaynak](https://designsystem.gov.scot/styles/colour)
- [Kaynak](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/dist/css/design-system.min.css)
- [Kaynak](https://designsystem.gov.scot/styles/column-grid)
- [Kaynak](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/src/components/character-count/character-count.ts)
- [Destekleyici belirtimi okuyun](https://designsystem.gov.scot/components/character-count)
- [Destekleyici belirtimi okuyun](https://designsystem.gov.scot/styles/typography)
- [Destekleyici belirtimi okuyun](https://designsystem.gov.scot/styles/colour)
- [Destekleyici belirtimi okuyun](https://designsystem.gov.scot/styles/column-grid)
- [Kod referansı](https://designsystem.gov.scot/components/character-count)
- [Destekleyici belirtimi okuyun](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/src/components/character-count/character-count.ts)
- [Destekleyici belirtimi okuyun](https://designsystem.gov.scot/get-started/javascript)
- [Destekleyici belirtimi okuyun](https://designsystem.gov.scot/components/error-summary)
- [Kod referansı](https://designsystem.gov.scot/get-started/javascript)
- [Tür Tipografi ve yazı tipi kullanımı kuralları.](https://designsystem.gov.scot/styles/typography)
- [Renk Sass palet rolleri ve tema sınırları.](https://designsystem.gov.scot/styles/colour)
- [Izgara İç ızgara genişlikleri, sütunlar ve oluklar.](https://designsystem.gov.scot/styles/column-grid)
- [Sayaç Yıkıcı olmayan sınırlar ve eşik davranışı.](https://designsystem.gov.scot/components/character-count)
- [JS Başlatma API'leri ve iyileştirme.](https://designsystem.gov.scot/get-started/javascript)
- [Kurulum Paket kurulumu; yayımlanmış güncel yollarla karşılaştırın.](https://designsystem.gov.scot/get-started/installation)
- [Odak Görünür klavye odağı yönergeleri.](https://designsystem.gov.scot/styles/focus-states)
- [Soru Soru gruplama yapısı.](https://designsystem.gov.scot/components/question)
- [Hata Kurtarma ve hata özeti yönergeleri.](https://designsystem.gov.scot/components/error-summary)