# tasarım sistemi .italia

## tasarım sistemi .italia Arayüz Önizlemesi

Gerçekçi, üç aşamalı yerel bir planı tamamlayın, boş bir seçimden sonra toparlanın ve notunuzu kaybetmeden geri dönün.

## tasarım sistemi .italia Tasarım Referansı

Bootstrap Italia 2.18.3 kurulu paketi ve resmî belgeleri; yerel CSS ve yazı tipi oluşturma üç farklı genişlikte kontrol edildi.

### Tipografi ve yazı tipleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Main family | Titillium Web | Önizlemeye 400/600/700 ağırlıklarında yerel WOFF2 dosyaları dahildir. |
| Long reading / code | Lora / Roboto Mono | font-serif ve font-monospace; arayüzün tamamında monospace kullanmayın. |
| Body | 16px / 1.5 | 2.7 tipografi düzenlemesinden bu yana varsayılan taban değeridir. |
| H1 mobile | 40px / 48px | 576px altında gerçek 2.18.3 CSS değeri. |
| H1 from 576px | 48px / 56px | Ölçülen yerel CSS; belgelerdeki tabloda satır aralığı hâlâ 60px olarak belirtiliyor. |
| Responsive typography | 576px threshold | Stepper'ın 992px olan kompakt eşiğinden farklıdır. |
### Yerel anlamsal belirteçler

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --bs-primary | hsl(210,100%,40%) = #0066cc | Birincil eylem ve bağlantı rengi. |
| --bs-body-color | hsl(0,0%,10%) | Varsayılan metin rengi. |
| --bs-success | hsl(160,100%,25%) | Başarı anlamı taşır; otomatik olarak tamamlanmış durumunu belirtmez. |
| --bs-danger | hsl(350,60%,50%) | Hata veya yıkıcı eylem anlamı. |
| --bs-warning | hsl(36,100%,30%) | Uyarı rolü; palet sarısından farklıdır. |
| --bs-border-radius | 4px | 2px'lik küçük ve 8px'lik büyük çeşitleri de vardır. |
### Boşluklar ve düzen

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Utility sizes 0–5 | 0, 4, 8, 16, 24, 48px | Kök boyut 16px iken; örneğin p-3=1rem, p-5=3rem. |
| Responsive thresholds | 576 / 768 / 992 / 1200 / 1400px | sm ile xxl arası. |
| Container maxima | 540 / 720 / 960 / 1176 / 1320px | Gerçek Italia CSS değeri; xl, standart Bootstrap 1140px değerinden farklıdır. |
| Preview width | 900px maximum | Resmî bir kapsayıcı belirteci değil, kısa bir yerel plan için uygulama tercihidir. |
| Stepper compact mode | Below 992px | Yalnızca etkin etiket ve metinsel sıra numarası görünür. |
### Stepper yapısı

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Root/header | steppers / steppers-header | Üstbilgi, aşamaların listesini içerir. |
| Stage states | confirmed / active | Doğrulama sonrasında bu listeyi uygulama kodu güncellemelidir. |
| Mobile index | steppers-index | n/total değerinin etkin aşamayla eşleşmesini sağlayın. |
| Body | steppers-content; aria-live=polite | Tek sayfadaki değişen içeriği duyurur. |
| Navigation | steppers-nav; steppers-btn-prev / steppers-btn-next | Sınıflar sunumu tanımlar; form yönlendirmesini otomatik olarak gerçekleştirmez. |
## tasarım sistemi .italia 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ı.

## tasarım sistemi .italia Sistem ve uygulama

### Kod kütüphanesiyle Designers Italia

> Designers Italia, bir CSS paketinden daha kapsamlıdır: hizmet tasarımı rehberliği, kitler ve uygulama kaynakları içerir. Bu örnek, 2.18.3 sürümüne sabitlenmiş ve belgelenmiş Bootstrap Italia uygulamasına odaklanır. Kütüphaneyi yüklemenin bir kamu hizmeti tasarımını tamamladığı veya belediye web sitesine yönelik tüm gereklilikleri karşıladığı anlamına gelmez.

İncelenen sürümde Bootstrap Italia, Bootstrap 5.2.3'ü içerir ve özelleştirir. Üzerine ikinci bir standart Bootstrap paketi eklemeyin. Önizlemede, yerel olarak sağlanan Titillium Web yazı tipi dosyalarıyla birlikte yerel CSS ve özgün, üç aşamalı bir kütüphane ziyareti planlama akışı kullanılır.

Destekleyici belirtimi okuyun

## tasarım sistemi .italia Tipografi ve kesin değerler

### Yazı tiplerinin görevleri farklıdır

Titillium Web, arayüzün standart yazı tipi ailesidir. Lora, uzun metinlerde okumak için serif seçeneğidir; Roboto Mono ise kod veya sabit genişlikli içerikler için kullanılır. Önizlemede kullanılan Titillium Web ağırlıklarının gerçek dosyaları yüklenir ve yazı tipi lisansı korunur; sistem yazı tipi sessizce onun yerine kullanılmaz.

Gövde metni 16px olarak kalır. Başlıklar 576px'te değişir: küçük ekranda H1 48px satır aralığıyla 40px, kurulu CSS sürümünde ise 56px satır aralığıyla 48px'tir. Belge tablosunda masaüstü satır aralığı 60px olarak verilmiştir; buradaki referans tablosu, iki kaynaktaki değerleri birbirine karıştırmak yerine incelenen sürümü kaydeder ve farkı açıklar.

Destekleyici belirtimi okuyun

## tasarım sistemi .italia Duyarlı ekran aralıkları ve boşluklar

### İki kesme noktası farklı sorunları çözer

Tipografi eşiği 576px'tir; Stepper ise üstbilgisinin sunumunu 992px altında değiştirir. Kompakt ekranlarda geçerli etiket ve n/total sıra numarası görünür kalır. Diğer aşama adları okunamayacak kadar dar sütunlara sıkıştırılmaz. Mobil kullanıcıya geçerli aşama yine de duyurulmalıdır; örnekte bu, başlığa odaklanılarak ve erişilebilir durum metniyle sağlanır.

Boşluk yardımcı sınıfları, doğrulanmış rem ölçeğini izler: kök boyutu normal olduğunda 1'den 5'e kadar olan boyutlar için 4, 8, 16, 24 ve 48px. Izgara kapsayıcısının en büyük genişlikleri arasında xl için 1176px bulunur; bu değer, belleğe güvenerek sıkça kopyalanan standart Bootstrap değerinden farklıdır. Bağımsız plan için uygulama tercihi olarak daha dar, 900px'lik bir üst sınır kullanılır.

Destekleyici belirtimi okuyun

## tasarım sistemi .italia Stepper yapısı ve sorumluluklar

### İş akışını üstbilgi yönetmez

Belgelenmiş yapı; steppers-header, steppers-content ve steppers-nav bölümlerini birbirinden ayırır. Üstbilgideki liste öğelerine confirmed ve active sınıfları atanır; sıra numarası konumu gösterir. Geri ve ileri düğmelerine kendi sınıfları atanır. Bu sınıflar sunumu tanımlar. Geçerli formun doğru olup olmadığına ve sonraki bir aşamaya geçilip geçilemeyeceğine uygulama karar vermelidir.

Örnekte her aşama için sıradan bölümler kullanılır; denetimler DOM'da tutulur ve etkin olmayan bölümler gizlenir. Böylece erişim notu adımına dönüldüğünde not korunur. İnceleme adımı mevcut denetimlerdeki değerleri okur; tahmin edilen bir sunucu yanıtından yeni değerler oluşturmaz.

```
<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>
```

Kod referansı

Destekleyici belirtimi okuyun

## tasarım sistemi .italia Doğrulama ve anlamlı ilerleme

### Yalnızca gerekli seçim yapıldığında ilerleyin

Ziyaret türü seçilmelidir. Herhangi bir seçim yapmadan devam edilirse ilk adım etkin kalır, belirli bir hata gösterilir ve ilk radyo düğmesine odaklanılır. Bir tür seçip devam edildiğinde ilk aşama tamamlanmış olarak işaretlenir. İsteğe bağlı not boş bırakılabilir; bu durumda inceleme ekranında not eklenmediği belirtilir.

Geri düğmesi, seçimi veya notu silmeden önceki aşamaya döner. Baştan başla düğmesi ikisini de bilerek siler ve başlangıca döner. Son ekran yerel bir plan olarak adlandırılır; hiçbir zaman rezervasyonun gönderildiğini, onaylandığını veya kaydedildiğini iddia etmez.

1. Hiçbir radyo düğmesini seçmeden Devam et'e basıp hatayı inceleyin.

2. Bir ziyaret türü seçin, kısa bir not ekleyin ve İnceleme'yi açın.

3. Nota geri dönüp değerinin korunduğunu doğrulayın; ardından planı temizlemek için baştan başlayın.

Destekleyici belirtimi okuyun

## tasarım sistemi .italia Erişilebilir durum ve odak

### Görsel ve sesli konumu eşleştirin

Etkin liste öğesinde aria-current="step" ve görsel olarak gizlenmiş, geçerli aşamayı belirten bir etiket bulunur. Önceki aşamalara confirmed sınıflarının yanı sıra tamamlanma metni de atanır. Geçerli başlık ve aşama semantiği konumu zaten belirttiği için kompakt sayısal sıra numarası yardımcı teknolojilerden gizlenir; görsel yön bulma amacıyla görünür kalır.

Değişen gövdede, resmî kılavuzun tek sayfalı bir akış için önerdiği aria-live="polite" kullanılır. Örnekte ayrıca klavye kullanıcılarına okunmaya nereden başlayacakları konusunda öngörülebilir bir işaret vermek için yeni başlığa odaklanılır. Daha karmaşık bir formda gereğinden tekrarlı duyuruları önlemek üzere bu ikiliyi desteklediğiniz yardımcı teknolojiyle sınayın.

- Aşama değişiklikleri için gerçek düğmeler kullanın; ilk aşamada Geri düğmesi disabled olsun.

- Etiketleri radyo düğmelerine ve metin alanına bağlayın; yer tutucu metin etiket yerine geçmez.

- Geçerli/tamamlanmış durumları yalnızca mavi renkle veya simgeyle değil, metinle de belirtin.

Destekleyici belirtimi okuyun

## tasarım sistemi .italia Yerel varlıklar ve başlatma

### CSS, yazı tipleri ve isteğe bağlı JavaScript

Paket; CSS, paketlenmiş bir betik, kaynak yazı tipleri ve bir SVG sprite sağlar. Bu Stepper örneği CSS ve seçilen yazı tiplerini gerektirir; gezinme uygulama mantığına bağlıdır. Diğer bileşenler, otomatik başlatma için data-bs-toggle veya belgelenmiş veri özniteliklerini kullanır. Aynı bileşen için otomatik başlatma ile ikinci bir manuel örneği birlikte kullanmayın.

Modüller kullanıyorsanız yalnızca uygulamanın ihtiyaç duyduğu bileşenleri içe aktarın. Resmî kılavuz, geçiş yöntemlerinin geçiş tamamlanmadan geri döndüğünü ve geçiş sırasında yapılan çağrıların yok sayılabileceğini belirtir. Bu bileşenlerde birbirine bağlı eylemleri sıralamadan önce ilgili tamamlanma olayını bekleyin; bu basit Stepper, yerel bir geçiş API uydurmaz.

Destekleyici belirtimi okuyun

## tasarım sistemi .italia Entegrasyon sınırları

### Hizmetin tamamlandığı izlenimini vermeden kiti kullanın

Kütüphane belgeleri, sürümün güncel tutulmasını önerir ve üretimde herkese açık bir CDN bağımlılığını sakıncalı bulur. Kurulum, doğrulanmış sürümü sabitler; yerel örnek ise kendi varlıklarını ve lisanslarını içerir. Gerçek bir hizmette ayrıca içerik tasarımı, veri işleme, sunucu tarafı doğrulama ve gönderimin alındığını doğrulayan bir yanıt gerekir.

Örnekte belediye logosu veya resmî amblem kullanılmadan genel bir kütüphane ziyareti anlatılır. Bu, öğretim amaçlı bir OpenDesign örneğidir; bir kamu kurumu hizmeti değildir. Görsel açıdan özenli bir inceleme ekranının gerçek bir başvuru kaydı sanılmaması için prototiplerde bu ayrımı koruyun.

Destekleyici belirtimi okuyun

## tasarım sistemi .italia Tasarım Sistemi Bileşen Örnekleri

### İkinci aşamadaki Stepper yapısı

Tamamlanmış, etkin ve mobil sıra numarası durumları uygulama koduyla eşzamanlı tutulmalıdır.

```
<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Visit type <span class="visually-hidden">Completed</span></li>
      <li class="active" aria-current="step">Access note <span class="visually-hidden">Current step</span></li>
      <li>Review</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/3</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <h2>Add an access note</h2>
    <label for="note">Access note (optional)</label>
    <textarea id="note" class="form-control" rows="3"></textarea>
  </div>
  <nav class="steppers-nav" aria-label="Plan steps">
    <button class="btn btn-outline-primary steppers-btn-prev">Back</button>
    <button class="btn btn-primary steppers-btn-next">Continue</button>
  </nav>
</div>
```

Kod referansı

### Yerel planlama akışını tamamla

Yerel CSS/fonts, zorunlu radyo düğmesi doğrulaması, isteğe bağlı not, gözden geçirme, geri ve sıfırlama.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Prepare a library visit</title><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/bootstrap-italia.min.css"><link rel="stylesheet" href="vendor/bootstrap-italia-2.18.3/fonts.css"><style>body{padding:32px 16px}main{max-width:900px;margin:auto}.steppers-content{padding:24px 0}.steppers-nav{display:flex;gap:16px;justify-content:space-between}.form-check{margin-bottom:16px}footer{font-size:14px;margin-top:32px;border-top:1px solid #ccc;padding-top:16px}[hidden]{display:none!important}.error{color:var(--bs-danger)}@media(max-width:575px){body{padding:24px 16px}}</style><main><p class="text-uppercase">Independent service example</p><h1>Prepare a library visit</h1><p class="lead">Choose a visit format, add a note and review your local plan.</p><div class="steppers"><div class="steppers-header"><ul id="steps"><li class="active" aria-current="step">Visit type <span class="visually-hidden">Current step</span></li><li>Access note</li><li>Review</li></ul><span class="steppers-index" id="index" aria-hidden="true">1/3</span></div><div class="steppers-content" aria-live="polite"><section data-step="0"><h2 tabindex="-1">Choose a visit type</h2><fieldset><legend class="visually-hidden">Visit type</legend><div class="form-check"><input id="guided" type="radio" name="visit" value="Guided introduction"><label for="guided">Guided introduction</label></div><div class="form-check"><input id="quiet" type="radio" name="visit" value="Quiet reading visit"><label for="quiet">Quiet reading visit</label></div></fieldset><p id="error" class="error" role="alert" hidden>Choose a visit type before continuing.</p></section><section data-step="1" hidden><h2 tabindex="-1">Add an access note</h2><p id="hint">Optional. Describe what would help you use the space; avoid sensitive personal information.</p><label for="note">Access note</label><textarea id="note" rows="3" class="form-control" aria-describedby="hint" maxlength="200"></textarea></section><section data-step="2" hidden><h2 tabindex="-1">Review your local plan</h2><dl><dt>Visit type</dt><dd id="review-type"></dd><dt>Access note</dt><dd id="review-note"></dd></dl><p>This is a local plan only. No booking or request has been sent.</p></section></div><nav class="steppers-nav" aria-label="Plan steps"><button id="back" class="btn btn-outline-primary steppers-btn-prev" disabled>Back</button><button id="next" class="btn btn-primary steppers-btn-next">Continue</button><button id="reset" class="btn btn-primary" hidden>Start again</button></nav></div><footer>Native Bootstrap Italia 2.18.3 CSS and Titillium Web. Original local planning flow; no municipal identity or booking service.</footer></main><script>let step=0;const labels=['Visit type','Access note','Review'];function render(){document.querySelectorAll('[data-step]').forEach(x=>x.hidden=Number(x.dataset.step)!==step);document.querySelectorAll('#steps li').forEach((li,i)=>{li.className=i===step?'active':i<step?'confirmed':'';li.removeAttribute('aria-current');li.textContent=labels[i];const state=document.createElement('span');state.className='visually-hidden';state.textContent=i===step?' Current step':i<step?' Completed':'';li.append(state);if(i===step)li.setAttribute('aria-current','step')});document.querySelector('#index').textContent=(step+1)+'/3';document.querySelector('#back').disabled=step===0;document.querySelector('#next').hidden=step===2;document.querySelector('#reset').hidden=step!==2;if(step===2){document.querySelector('#review-type').textContent=document.querySelector('[name=visit]:checked').value;document.querySelector('#review-note').textContent=document.querySelector('#note').value.trim()||'No note added'}document.querySelector('[data-step="'+step+'"] h2').focus()}document.querySelector('#next').onclick=()=>{if(step===0&&!document.querySelector('[name=visit]:checked')){document.querySelector('#error').hidden=false;document.querySelector('#guided').focus();return}document.querySelector('#error').hidden=true;step++;render()};document.querySelector('#back').onclick=()=>{step--;render()};document.querySelector('#reset').onclick=()=>{document.querySelectorAll('[name=visit]').forEach(x=>x.checked=false);document.querySelector('#note').value='';step=0;render()};</script></html>
```

Kod referansı

## tasarım sistemi .italia Aracı Kurulumu

### Uygulamaya Başlangıç Noktası

Yerel CSS ve yazı tipi kurulumu. Adım göstergesinde gezinme uygulama mantığıdır; aşağıda çalışan eksiksiz bir örnek sunulmuştur. Kaynaklardaki çalışan örneğin tam ZIP dosyası, önizleme için gereken bağımlılıkların tam listesini ve eksiksiz belgeyi de içerir. Dosyaları çıkarın, bu dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/designers-italia.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.

```
npm install bootstrap-italia@2.18.3
# Copy dist/css/bootstrap-italia.min.css into public/vendor.
# Copy the needed src/fonts/Titillium_Web WOFF2 files and declare @font-face.
# CSS is sufficient for the Stepper presentation; application code owns navigation.
# For data-bs-toggle widgets, load dist/js/bootstrap-italia.bundle.min.js once.
```

### Projeniz İçin Bir İstem

```
Bootstrap Italia 2.18.3 yerel CSS ve Titillium Web kullanın. Belgelenen adım göstergesi/başlık/içerik/gezinme yapısını; etkin, onaylanmış ve mobilde eşitlenmiş dizin durumlarıyla oluşturun. Doğrulama ve gezinmeyi uygulama kodunda yönetin, Geri ile dönüldüğünde değerleri koruyun ve son durumu gerçek bir arka uç yanıtına göre etiketleyin. İkinci bir Bootstrap çalışma zamanı kullanmayın veya yerel bir incelemenin gönderildiğini iddia etmeyin.
```

## tasarım sistemi .italia Kaynaklar ve Kapsam

Bootstrap Italia odaklı bağımsız bir OpenDesign örneği. Herhangi bir kamu kurumu kimliği veya gerçek rezervasyon hizmeti içermez.

- Kurulum ve varlıklar CSS, modüller, paket, yazı tipleri ve çalışma zamanı sınırları.

- Adım göstergeleri Yerel yapı, durumlar, kompakt kip ve canlı bölge.

- Tipografi Yazı tipi aileleri ve duyarlı başlıklar.

- Boşluklar Yardımcı ölçeği ve söz dizimi.

- Yayımlanan kaynak Sabitlenmiş sürüm boyutları ve anlamsal değişkenler.

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

## tasarım sistemi .italia İlgili Kaynaklar

### Designsystemet

Designsystemet’ın gerçek tema rollerini, boyut modlarını ve yerel alan davranışını; karakter geri bildirimi ve korunan sunum durumuyla eksiksiz bir görev özeti düzenleyicisi aracılığıyla keşfedin.

### DSFR

Fransız Devlet tasarım sisteminin kurumsal kapsamı içindeki somut tipografi, ızgara ve akordeon API yapısını inceleyin. Açık ve tarafsız bir eğitim örneğinde birbirine bağlı ve bağımsız açılır-kapanır davranışları karşılaştırın.

### Europa Component Library

Klavye kullanımı, tümünü açma davranışı ve JavaScript olmadığında okunabilir yedek davranış da dahil olmak üzere eksiksiz bir yerel akordeon özeti üzerinden Europa’nın EC renk, tipografi ve boşluk rollerini inceleyin.


- [Uygulama başvurusu](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Kaynak](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/)
- [Kaynak](https://github.com/italia/bootstrap-italia/blob/v2.18.3/dist/css/bootstrap-italia.min.css)
- [Kaynak](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/)
- [Kaynak](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Destekleyici belirtimi okuyun](https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/)
- [Destekleyici belirtimi okuyun](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/)
- [Destekleyici belirtimi okuyun](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/)
- [Kod referansı](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Destekleyici belirtimi okuyun](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Kurulum ve varlıklar CSS, modüller, paket, yazı tipleri ve çalışma zamanı sınırları.](https://italia.github.io/bootstrap-italia/docs/come-iniziare/introduzione/)
- [Adım göstergeleri Yerel yapı, durumlar, kompakt kip ve canlı bölge.](https://italia.github.io/bootstrap-italia/docs/componenti/steppers/)
- [Tipografi Yazı tipi aileleri ve duyarlı başlıklar.](https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tipografia/)
- [Boşluklar Yardımcı ölçeği ve söz dizimi.](https://italia.github.io/bootstrap-italia/docs/organizzare-gli-spazi/spaziature/)
- [Yayımlanan kaynak Sabitlenmiş sürüm boyutları ve anlamsal değişkenler.](https://github.com/italia/bootstrap-italia/blob/v2.18.3/dist/css/bootstrap-italia.min.css)