# ONS tasarım sistemi

## ONS tasarım sistemi Arayüz Önizlemesi

Birkaç seyahat yöntemi, bunlarla çelişen yanıt, boş yanıt doğrulaması, yerel inceleme ve korunan düzenlemelerle deneme yapın.

## ONS tasarım sistemi Tasarım Başvurusu

ONS Design System 73.13.1 derlemesi CSS, JavaScript ve Sass değişkenlerini içerir ve herkese açık hizmet kılavuzuna göre kontrol edilmiştir. Örnekte yerel Checkbox ve Mutually Exclusive davranışı kullanılır. Bağımsız örnekte OpenSans yerine Arial kullanılır; üretim kopyalama tarifi ise paketlenmiş yazı tiplerini içerir. Seyahat sorusu ve yerel yanıt incelemesi özgün örnek içeriğidir.

### Yazı türü matrisi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Primary family | OpenSans, Helvetica Neue, Arial, sans-serif | Resmî yazı tipi yönergesinde Open Sans stilistik küme 1 belirtilir; demoda özellikle Arial kullanılır. |
| ons-u-fs-3xl | 32/44px → 48/56px | Orta kırılım noktasında küçük boyuttan büyük boyuta geçer; ağırlık700. |
| ons-u-fs-2xl | 28/40px → 36/48px | Ağırlık700; başlık boyutunda hiyerarşi. |
| ons-u-fs-xl / ons-u-fs-l | 26/36 → 30/40px; 24/32 → 26/36px | Akışkan bir clamp değil, yerel duyarlı boyutlar ve satır aralığı. |
| ons-u-fs-m | 20/28px → 22/32px | Ağırlık700. |
| ons-u-fs-r / ons-u-fs-s | 18/28px / 14/20px | Normal400; --b varyantları 700 kullanır. |
### Anlamsal renk rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ons-color-text | #222 | --ons-color-black değişkenine karşılık gelir. |
| --ons-color-text-link | #206095 | Okyanus mavisi; üzerine gelme/etkin durumunda gece mavisi #003c57. |
| --ons-color-focus | #fbc900 | Odak göstergesi olarak güneş sarısı. |
| --ons-color-button | #0f8243 | Yaprak yeşili; bağlantı renginden ayrıdır. |
| --ons-color-errors | #d0021b | Yazılı bir açıklamayla birlikte kullanılan yakut kırmızısı hata rengi. |
| --ons-color-info-tint | #e9eff4 | Bilgi paneli arka planı; seçili onay kutusunun yerine kullanılmaz. |
### Gerçek aralık yardımcı sınıfları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| ons-u-mb-xs / s / m | 12px /16px /20px | 16px kök boyutunda alt kenar boşluğu yardımcı sınıfı değerleri. Bunlar, belgelenmiş 8px temel aralığının dışındaki adımları da içerir. |
| ons-u-mb-l / xl | 24px /32px | Yayımlanmış sürümün yardımcı sınıflarını kullanın; tüm değerleri temel aralık açıklamasından çıkarsamayın. |
### Düzen ve duyarlı tasarım modeli

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Grid | 12 percentage-width columns | ons-grid > ons-grid__col ve duyarlı sütun sınıfları. |
| Medium column | ons-col-8@m | 740px'ten itibaren sekiz sütun; daha küçük boyutlarda tam genişlik. |
| Breakpoints | 300,400,500,740,980,1300,1600px | 2xs,xs,s,m,l,xl,2xl. |
| Baseline | Multiples of8px | Izgara belgelerindeki aralık düzeni; her kenarlığın/yazı tipinin buna uyduğunu varsaymayın. |
| Documented gutters | 16px below600;24px at600+ | Izgara sınıflarını geçersiz kılacaksanız CSS sürümünü kontrol edin. |
| Default container | 64.6256rem maximum;1rem horizontal padding | 16px kök boyutunda doğrulanmış73.13.1 CSS, yaklaşık1034px. |
### Karşılıklı dışlama kancaları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Group root | ons-js-mutually-exclusive | Yerel betik, DOM hazır olduğunda bu kapsayıcıyı bulur. |
| Regular options | ons-js-exclusive-group-item | Birlikte seçilebilir; seçeneklerden biri seçildiğinde karşılıklı dışlanan seçenek temizlenir. |
| Opposing choice | ons-js-exclusive-option | Seçildiğinde normal gruptaki değerler temizlenir. |
| Explanation | data-deselect-message | Karşıt seçenek için uyarı metni. |
| Announcement | ons-js-exclusive-alert | data-group-adjective ve data-option-adjective özniteliklerini kullanan canlı bölge. |
| State updates | click for checkbox/radio;input for text | Denetleyici hasValue değerini önbelleğe alır; uygulama sıfırlaması yerel olayları kullanmalıdır. |
## ONS 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ı.

## ONS tasarım sistemi Anketlere özgü tasarım

### Yanıtın anlamını koruyun

> ONS, bilginin yayımlanmasının yanı sıra istatistiksel veri toplama hizmeti de sunar. Anketlerde karşılıklı dışlanan yanıtlar veri kalitesiyle ilgilidir: kullanıcı hem bir seyahat yöntemi hem de hiç seyahat yapılmadığını belirten bir yanıt gönderememelidir. Yerel Mutually Exclusive bileşeni, bu seçenekleri ilişkilendirir ve seçimin kaldırıldığını yardımcı teknolojilere açıklar.

Örnek, kütüphaneye seyahatle ilgili özgün bir soru sorar ve yerel yanıt önizlemesi sunar. ONS kimlik grafiklerini özellikle kullanmaz ve yanıtların toplandığını iddia etmez. Üretim anketinin kendi onay, saklama süresi, yönlendirme ve sunucu doğrulama düzenlemeleri olmalıdır.

Destekleyici belirtimi okuyun

## ONS tasarım sistemi Okunaklı soru hiyerarşisi

### Legend, sayfa başlığı olabilir

Ana yazı tipi Open Sans'tır; ayırt edici harf biçimleri için stilistik küme 1 seçilmiştir. Yerel Sass yazı türü matrisi, uydurma kesintisiz bir ölçek yerine sabit küçük ve büyük değerler kullanır. Gövde metni 28px satır aralığıyla 18px olarak kalır. Ana büyük sınıf, orta kırılım noktasında 32/44 boyutundan 48/56 boyutuna geçer.

Tek sorulu bir sayfada h 1, grubun erişilebilir adıyla görünür başlığın eşleşmesi için fieldset legend öğesinin içine yerleştirilebilir. Üstüne ilgisiz ikinci bir h 1 eklemeyin. Örnek, hizmet bağlamını daha küçük bir paragraf olarak, yanıt yönergesini ise legend öğesinin altında tutar.

Bağımsız demoda eksik yazı tipi isteği oluşmaması için açıkça Arial kullanılır. Yükleme tarifinde yazı tipleri CSS ile birlikte kopyalanır; benimseyenler yedek yazı tipi yerine yayımlanmış OpenSans yazı tipini kullanmak istiyorsa bu gereklidir.

Destekleyici belirtimi okuyun

## ONS tasarım sistemi Anket arayüzündeki roller

### Odak, durumdan ayrıdır

ONS, temel renkler için anlamsal değişkenler tanımlar. Metin siyahtır, normal bağlantılar Okyanus Mavisi, birincil düğme ise Yaprak Yeşilidir. Odak rengi Güneş Sarısıdır. Yakut Kırmızısı hataları belirtir; ancak hata mesajında yine de hangi eylemin gerektiği yazmalıdır. Yeşil Devam düğmesi, yanıtın doğrulamadan geçtiği anlamına gelmez.

Yerel ankette yerel onay kutusu kenarlığı ve seçili görünümü kullanılır. Her yanıtı ayrı bir pazarlama kartı gibi biçimlendirmez. Kısa ve nötr bir üst çizgi, ONS masthead'ini taklit etmeden bağımsız örneği sorudan ayırır.

- Hem onay kutusu girdisindeki hem de eylem düğmesindeki görünür yerel odak görünümünü koruyun.

- Normal seçeneklerden önce “Uyanların tümünü seçin” yazılı yönergesini kullanın.

- Farkın etkileşimden önce görünür olması için karşıt seçeneği “Veya” ifadesiyle ayırın.

Destekleyici belirtimi okuyun

## ONS tasarım sistemi Sütunlar ve yanıt genişliği

### Anket içeriğinin genişliğini kullanın

On iki sütunlu ızgarada genişlikler ons-col-8@m gibi sınıflarla belirtilir. 740px ve üzerindeki genişliklerde bu sınıf sekiz sütun kaplar; daha küçük boyutlarda aynı öğe kullanılabilir içerik genişliğinin tamamını doldurur. Yerel örnek, uzun sorunun tüm masaüstü genişliğine yayılması yerine okunabilir bir genişlikte satırlara bölünmesi için bu yerel sütunu kullanır.

İncelenen sürümde standart kapsayıcının azami genişliği 64.6256rem, yatay dolgusu ise 1rem'dir. Herkese açık ızgara kılavuzunda ayrıca 8px temel aralık ve 600px aralık sınırının çevresinde 16/24px oluklar açıklanır. Bu kavramları 740px orta sütun kırılımından ayrı tutun; bunlar tek bir evrensel mobil geçiş noktası değildir.

Yanıt incelemesi aynı sütunda sorunun yerini alır; Yanıtları değiştir seçeneği mevcut denetimlere geri döndürür. Değerler, rota değişikliği veya ağ isteği olmaksızın bellekte kalır.

Çalıştırılabilir aralık yardımcı sınıfları, 8px temel aralık açıklamasından daha ayrıntılıdır: 16px kök boyutunda xs, s, m, l ve xl alt kenar boşlukları sırasıyla 12,16,20,24 ve 32px'tir. Bu nedenle başvuru, gerçek yardımcı sınıf değerlerini ızgara kılavuzundan ayrı listeler.

Destekleyici belirtimi okuyun

## ONS tasarım sistemi Yanıt grubunu oluşturun

### Yerel onay kutusu yapısı

Bir onay kutusu, ons-checkbox içinde ons-checkbox__input ve buna bağlı bir ons-checkbox__label kullanır. Giriş, yerel form davranışının çalışmaya devam etmesi için standart name ve value özniteliklerini korur. Daha kapsamlı ons-checkboxes__item yapısı, stil dosyasının beklediği boşluğu ve tıklama alanını sağlar.

Normal seçeneklerde ons-js-exclusive-group-item kullanılır. Son seçenek ise bunun yerine ons-js-exclusive-option kullanır ve etkisini açıklayan data-deselect-message özniteliğini içerir. Canlı bölge span’i, her iki sıfat özniteliğiyle birlikte bulunmalıdır; dekoratif bir ek işaretleme değildir. Bu span’in kaldırılması, yerel denetleyicinin varsayımlarını bozar.

Bu kaynak örneği, üç normal seçenek ve bir karşıt yanıt için eksiksizdir. İsimleri ve değerleri gerçek bir soruya uyarlayın; ilgisiz bir doğrulama denetimini yalnızca “exclusive” olarak yeniden adlandırmayın.

```
<fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset>
```

Kod referansı

Destekleyici belirtimi okuyun

## ONS tasarım sistemi Doğrulama ve değişiklik davranışı

### Kitaplık durumu ve uygulama durumu

Karşıt seçeneklerden hangilerinin temizleneceğini kitaplık belirler. Örnekteki küçük uygulama işleyicisi, yerel bir inceleme gösterilmeden önce yalnızca en az bir yanıtın bulunup bulunmadığını denetler. Seçim yapılmadığında yazılı bir hata gösterir ve odağı bağlantılı iletiye taşır. Hata bağlantısı doğrudan ilk seçeneğe gider; kullanıcı burada işlem yapabilir.

Denetleyici, DOM’daki onay kutusu değerine ek olarak önbelleğe alınmış hasValue durumunu da izler. Yalnızca checked=false ile sıfırlama yapmak, bu önbelleğin güncel olmamasına yol açabilir. Bu nedenle sıfırlama işlemi, yerel dinleyicilerin modeli güncellemesini sağlamak için işaretli her girişe tıklar ve ardından odağı soruya geri taşır. Bu, stil dosyasına bakarak denetlenemeyecek somut bir entegrasyon konusudur.

İnceleme, seçilen etiketlerin listesini gösterir. Yanıtları değiştir seçeneği, denetimleri ve seçimlerini korur. Bu örneğin arkasında bir sunucu bulunmadığından, anket yanıtının alındığını öne süren bir başarı paneli gösterilmez.

Destekleyici belirtimi okuyun

## ONS tasarım sistemi Varlıklar ve şablon kullanımı

### Desteklenen iki yöntem

npm paketi derlenmiş varlıkları, Sass kaynaklarını, Nunjucks makrolarını ve temel sayfa şablonunu içerir. Bu önizlemede derlenmiş HTML yöntemi kullanılır: resmî CSS dosyasını ve main.js’yi kopyalayın, belgelenen işaretlemeyi oluşturun ve betiği gövde içeriğinden sonra yükleyin. Betik, DOM hazır olduğunda eşleşen bileşen kancalarını başlatır.

Sunucu tarafında oluşturulan bir projede bunun yerine components içindeki Nunjucks makro dosyaları kullanılabilir. Checkbox makrosu; onay kutusu dizisini, etiketleri, açıklamaları, hata yapılandırmasını ve mutuallyExclusive yapılandırmasını kabul eder. dontWrap ayarını yapmak, fieldset sorumluluğunu kapsayıcı soru bileşenine aktarır; erişilebilir grup adını atlamanın bir yolu değildir.

Tek tek Sass dosyalarını seçiyorsanız önce sistem değişkenlerini, yardımcıları, araç sınıflarını, temel stilleri ve nesneleri; ardından bileşen kurallarını ve bileşen bağımlılıklarını içe aktarın. Tam derlenmiş CSS, bu küçük ve bağımsız örnek için bağımlılıkları tek tek seçme gereğini ortadan kaldırır.

1. Paket sürümünü sabitleyin ve css, scripts ile fonts dosyalarını tek bir kararlı yerel varlık dizininden sunun.

2. Statik sayfalar için derlenmiş HTML yöntemini seçin veya sunucu tarafında oluşturulan bir uygulamada Nunjucks makro yollarını yapılandırın.

3. CSS, JavaScript ve işaretlemenin aynı sürümden olmasını sağlayın; yükseltme sonrasında karşılıklı dışlama davranışını yeniden denetleyin.

Destekleyici belirtimi okuyun

## ONS tasarım sistemi Çelişkili yanıtları sınayın

### Verilerin anlamını doğrulayın

Yürüyüş ve Otobüs’ü seçin, ardından “Kütüphaneyi ziyaret etmedim.” seçeneğini seçin. Önceki iki seçimin de temizlenmesi gerekir. Ardından Bisiklet’i seçin: karşıt yanıt temizlenirken Bisiklet işaretli kalmalıdır. Odaktaki girişlerde Boşluk tuşunu kullanarak testi tekrarlayın ve görsel bir onay işaretinin tüm davranışları doğruladığını varsaymak yerine duyuru bölgesini inceleyin.

Hatayı sınamak için seçim yapmadan devam edin; ardından geçerli bir yanıtı inceleyip Yanıtları değiştir ile geri dönün. Son olarak, çelişkili yanıtlar dizisinden sonra sıfırlama yapıp yeni bir seçim yapın; bu, yerel denetleyicideki eski durumun yakalanmasına yardımcı olur. 390px genişlikte soru ve tüm etiketler, sayfayı yatay kaydırmadan okunabilir kalmalıdır.

Bu testler, yerel etkileşimi doğrular; gerçek bir ankette yanıtların gönderilmesini, erişilebilirlik sertifikasını veya soruların istatistiksel açıdan niteliğini doğrulamaz. Gerçek bir hizmette çelişkili değerler için sunucu tarafı doğrulaması ve yanıt kategorilerinin eksiksiz olup olmadığına yönelik araştırma yine gerekir.

Destekleyici belirtimi okuyun

## ONS tasarım sistemi Bileşen Örnekleri

### Eksiksiz bir karşılıklı dışlama sorusu

Normal yanıt seçenekleri ve yerel canlı bölge kancalarını kullanan karşıt bir yanıt.

```
<fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset>
```

Kod referansı

### Eşleşen tek bir sürüm sunun

Tam bir proje için göreli font varlıklarını da içeren derlenmiş varlık yöntemi.

```
npm install --save-exact @ons/design-system@73.13.1
mkdir -p public/vendor/ons
cp -R node_modules/@ons/design-system/css public/vendor/ons/
cp -R node_modules/@ons/design-system/scripts public/vendor/ons/
cp -R node_modules/@ons/design-system/fonts public/vendor/ons/

<!-- In your page head -->
<link rel="stylesheet" href="/vendor/ons/css/main.css">
<!-- Place the compiled component markup in the body. -->
<!-- Immediately before </body>; initializes matching component hooks -->
<script src="/vendor/ons/scripts/main.js"></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>ONS survey question specimen</title><link rel="stylesheet" href="vendor/ons-73.13.1/css/main.css"><style>body,input,button,select,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.specimen{border-top:4px solid var(--ons-color-ocean-blue);padding-top:16px}.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:32px}[hidden]{display:none!important}.error{border-left:4px solid var(--ons-color-errors);padding:16px;margin:24px 0;color:var(--ons-color-errors)}.quiet{color:var(--ons-color-text-light)}fieldset{min-width:0}.ons-checkbox__label{max-width:100%}</style><main class="ons-container"><p class="ons-u-fs-s specimen">Independent specimen · Original library survey</p><div class="ons-grid"><div class="ons-grid__col ons-col-8@m"><section id="question"><p class="quiet">Travel · Question 1 of 1</p><div id="error" class="error" tabindex="-1" hidden><strong>Select a travel method or tell us you did not visit.</strong><p><a href="#walk">Go to the answer choices</a></p></div><form id="survey" novalidate><fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset><div class="actions"><button class="ons-btn" type="submit"><span class="ons-btn__inner">Review answer</span></button><button id="reset" type="button" class="ons-btn ons-btn--secondary"><span class="ons-btn__inner">Reset</span></button></div></form><p class="ons-u-mt-l ons-u-fs-s quiet">Practice only. Your selection stays in this page and is not submitted.</p></section><section id="review" hidden><h1 tabindex="-1">Review your answer</h1><h2 class="ons-u-fs-m">Travel to the library last week</h2><ul id="answer"></ul><p>No response has been sent. Return to the question to change your selection.</p><button id="change" class="ons-btn ons-btn--secondary"><span class="ons-btn__inner">Change answers</span></button></section></div></div></main><script src="vendor/ons-73.13.1/scripts/main.js"></script><script>const form=document.querySelector('#survey'),q=document.querySelector('#question'),r=document.querySelector('#review'),err=document.querySelector('#error'),checks=[...form.querySelectorAll('input[type=checkbox]')];form.onsubmit=e=>{e.preventDefault();const chosen=checks.filter(x=>x.checked);if(!chosen.length){err.hidden=false;err.focus();return}err.hidden=true;document.querySelector('#answer').replaceChildren(...chosen.map(x=>{let li=document.createElement('li');li.textContent=document.querySelector('label[for="'+x.id+'"]').textContent.replace(/^Or, /,'');return li}));q.hidden=true;r.hidden=false;r.querySelector('h1').focus()};document.querySelector('#change').onclick=()=>{r.hidden=true;q.hidden=false;checks[0].focus()};document.querySelector('#reset').onclick=()=>{checks.filter(x=>x.checked).forEach(x=>x.click());err.hidden=true;checks[0].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.

## ONS tasarım sistemi Ajan Kurulumu

### Uygulamaya Başlangıç Noktası

Yerel örnekte, yerel Checkbox ve Mutually Exclusive kancalarıyla derlenmiş CSS ve JavaScript sürümü 73.13.1 kullanılır. Arial, açıkça belirtilmiş yerel bir yedek yazı tipidir; üretim kopyalama talimatları paketteki OpenSans fontlarını içerir. Sources bölümündeki eksiksiz çalışan örnek ZIP’i, önizleme bağımlılıklarının tam hâlini ve belgenin tamamını da sağlar. ZIP’i çıkarın, ilgili dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/ons.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.

```
npm install --save-exact @ons/design-system@73.13.1
mkdir -p public/vendor/ons
cp -R node_modules/@ons/design-system/css public/vendor/ons/
cp -R node_modules/@ons/design-system/scripts public/vendor/ons/
cp -R node_modules/@ons/design-system/fonts public/vendor/ons/

<!-- In your page head -->
<link rel="stylesheet" href="/vendor/ons/css/main.css">
<!-- Place the compiled component markup in the body. -->
<!-- Immediately before </body>; initializes matching component hooks -->
<script src="/vendor/ons/scripts/main.js"></script>
```

### Projeniz İçin Bir İstem

```
Yerel Checkbox ve Mutually Exclusive kancalarını, ilişkili fieldset/legend öğelerini, normal yanıt grubunu ve bir karşıt yanıtı kullanarak bağımsız bir ONS73.13.1 anket örneği oluşturun. Gerekli canlı bölgeyi ve seçim kaldırma özniteliklerini ekleyin. Eşleşen yerel CSS ve main.js dosyalarını sunun; bunların yerine geçecek bir karşılıklı dışlama denetleyicisi yazmayın. Düzenlemeleri koruyan, sunucusuz yerel boş yanıt doğrulaması ve yanıt incelemesi ekleyin; sunucuda yanıt alındığı iddiasında bulunmayın. Önbelleğe alınmış durumun tutarlı kalması için yerel olaylarla sıfırlayın. Resmî kimlik işaretlerini kullanmadan ons-col-8@m sınıfından ve doğrulanmış tipografi/anlamsal renk kurallarından yararlanın.
```

## ONS tasarım sistemi Kaynaklar ve Kapsam

Özgün anket metni kullanan bağımsız uygulama örneği. Yerel kod MIT lisanslıdır; ONS kimliği ve içerik lisansları bundan ayrıdır. Yanıtlar iletilmez, kalıcı olarak saklanmaz veya resmî istatistik olarak sunulmaz.

- Tür Yazı tipi ve duyarlı tipografi hiyerarşisi.

- Renk Anlamsal renk yönergeleri.

- Izgara Izgara sınıfları, boşluklar ve kesme noktaları.

- Denetimler Onay kutusu anatomisi ve makro seçenekleri.

- Karşılıklı dışlama Karşıt yanıtlar ve seçim kaldırma davranışı.

- Varlıklar Varlık yolları ve Sass bağımlılıkları.

- npm Paket içeriği ve kurulum.

- Şablon Sunucu tarafı şablon kullanımı.

- Hata Hata konumu ve düzeltme 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.

## ONS tasarım sistemi İlgili Kaynaklar

### Ontario tasarım sistemi

Gerçek tipografi, yayımlanmış aralık ve renk değerleri, yerel akordeon davranışı ve sürümüyle eşleşen eksiksiz kaynak koduyla Ontario tarzı uzun biçimli bir kılavuz oluşturun.

### Poncho

Çalışan bir etkinlik dizini üzerinden Poncho’in Bootstrap 3 ızgarasını, anlamsal eylem renklerini ve tümü tıklanabilir hizmet panellerini inceleyin.

### Queensland Government tasarım sistemi

Gerçek tema rolleri, yerel onay kutusu stilleri ve erişilebilir bir inceleme iletişim kutusu içeren, resimli ve eksiksiz bir kaynak seçici üzerinden Queensland’in Bootstrap uygulamasını keşfedin.


- [Uygulama başvurusu](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive)
- [Kaynak](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/scss/vars/_typography.scss)
- [Kaynak](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/scss/vars/_colors.scss)
- [Kaynak](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/css/main.css)
- [Kaynak](https://service-manual.ons.gov.uk/design-system/foundations/grid)
- [Kaynak](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/components/mutually-exclusive/mutually-exclusive.js)
- [Destekleyici belirtimi okuyun](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive)
- [Destekleyici belirtimi okuyun](https://service-manual.ons.gov.uk/design-system/foundations/typography)
- [Destekleyici belirtimi okuyun](https://service-manual.ons.gov.uk/design-system/foundations/colours)
- [Destekleyici belirtimi okuyun](https://service-manual.ons.gov.uk/design-system/foundations/grid)
- [Kod referansı](https://service-manual.ons.gov.uk/design-system/components/checkboxes)
- [Destekleyici belirtimi okuyun](https://service-manual.ons.gov.uk/design-system/components/checkboxes)
- [Destekleyici belirtimi okuyun](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/components/mutually-exclusive/mutually-exclusive.js)
- [Destekleyici belirtimi okuyun](https://service-manual.ons.gov.uk/design-system/guidance/using-the-css-js-and-assets)
- [Kod referansı](https://service-manual.ons.gov.uk/design-system/guidance/using-the-css-js-and-assets)
- [Kod referansı](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive)
- [Tür Yazı tipi ve duyarlı tipografi hiyerarşisi.](https://service-manual.ons.gov.uk/design-system/foundations/typography)
- [Renk Anlamsal renk yönergeleri.](https://service-manual.ons.gov.uk/design-system/foundations/colours)
- [Izgara Izgara sınıfları, boşluklar ve kesme noktaları.](https://service-manual.ons.gov.uk/design-system/foundations/grid)
- [Denetimler Onay kutusu anatomisi ve makro seçenekleri.](https://service-manual.ons.gov.uk/design-system/components/checkboxes)
- [Karşılıklı dışlama Karşıt yanıtlar ve seçim kaldırma davranışı.](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive)
- [Varlıklar Varlık yolları ve Sass bağımlılıkları.](https://service-manual.ons.gov.uk/design-system/guidance/using-the-css-js-and-assets)
- [npm Paket içeriği ve kurulum.](https://service-manual.ons.gov.uk/design-system/guidance/install-with-npm)
- [Şablon Sunucu tarafı şablon kullanımı.](https://service-manual.ons.gov.uk/design-system/guidance/templating-in-nunjucks)
- [Hata Hata konumu ve düzeltme yönergeleri.](https://service-manual.ons.gov.uk/design-system/components/error-summary)