# Poncho Tasarım Sistemi

## Poncho Tasarım Sistemi Arayüzü Önizlemesi

Yerel panel ızgarasını filtreleyin, bir ayrıntı açın ve seçili etkinliğe geri dönün.

## Poncho Tasarım Sistemi Tasarım Başvurusu

ar-poncho 2.0.320 CSS ve Bootstrap 3.4.1; hesaplanan değerler 1440, 768 ve 390px boyutlarında doğrulandı. Yazı tipi yedekleri açıkça belirtilmiştir.

### Yayımlanmış CSS tipografisi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Package inspected | ar-poncho 2.0.320 | Eski v0.3.3 başlığını paket sürümü olarak kullanmayın. |
| Font documentation | Lora headings / Montserrat body | Güncel tipografi sayfası ve CSS yazı tipi içe aktarımı; eski depo README dosyasında hâlâ Encode Sans adı geçiyor. |
| Body | 16px / 1.42857143; weight 500 | Bootstrap 3.4.1 ve Poncho ile ölçüldü; yerel önizlemede Arial kullanılır. |
| H1 | 2.5rem = 40px / 44px | Önizleme başlığı mobilde 40px olarak kalır. |
| H2 / H3 | 2rem / 1.75rem | Temel başlıklar; panele özel başlık kuralları bunların üzerine yazar. |
| Panel H3 | 20px / 26px | Bileşen bağlamında ölçülen yerel CSS. |
| Lead | 18px / 1.2; weight 500 | Başlık yerine kısa bir giriş metni. |
### Renk rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --primary | #242C4F | Ana bağlantı/eylem laciverti. |
| --secondary | #45658D | İkincil mavi. |
| --success | #2e7d33 | Ana/başarı eylemi rolü; gelişigüzel bir süsleme değildir. |
| --danger | #c62828 | Yıkıcı eylem veya hata rolü. |
| --warning | #E7BA61 | Dikkat rolü; metin kontrastı yine de kontrol edilmelidir. |
| --gray-base | #333333 | Varsayılan metin. |
| --gray-lighter | #f2f2f2 | Açık nötr yüzey. |
### Izgara ve bileşen boyutları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Grid | 12 columns; 30px gutter | Bootstrap 3.4.1: her sütunun iki yanında 15px dolgu. |
| Breakpoints | 768 / 992 / 1200px | sm, md, lg; col-sm-4, 768px’den itibaren üç sütun oluşturur. |
| Containers | 750 / 970 / 1170px | İlgili kesme noktalarında; 768px’nin altında akışkan genişlik. |
| Panel body | 15px 20px | Poncho bileşen geçersiz kılması. |
| Panel radius / spacing | 10px / 30px bottom margin | Bu örnekte kullanıldığı şekliyle yerel CSS. |
| Button | 16px; 8px 20px padding; 3px border; 30px radius | Poncho yuvarlatılmış eylem görünümü; Bootstrap varsayılan geometrisi değildir. |
| Section spacing | 30px default; 20px small; 40px large | section, section-sm ve section-lg kuralları. |
## Poncho 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ı.

## Poncho Tasarım Sistemi Sürümü ve bağımlılıklar

### Bootstrap 3 sistemidir

> Poncho, Arjantin kamu hizmetlerine yönelik stilleri Bootstrap 3.4.1 üzerine ekler. Kurulum sayfasında deneysel Bootstrap 4 yöneliminden hâlâ söz edilmesi, Bootstrap 5 sınıflarını yayımlanmış örneklerle uyumlu hâle getirmez. Bu kaynak, panel yapısını ve duyarlı davranışı birlikte inceleyebilmek için ar-poncho 2.0.320 ve Bootstrap 3.4.1 sürümlerini sabitler.

CSS başlığında v0.3.3 yazsa da kurulu paket 2.0.320 sürümündedir. Yalnızca başlığa değil, paket manifestine ve kilit dosyasına bakın. Bağımsız önizleme; paneller, düğmeler ve ızgara için yerel CSS kullanır. Etkinlik filtreleme, Poncho arama bileşeni değil, özgün JavaScript davranışıdır.

Destekleyici belirtimi okuyun

## Poncho Tasarım Sistemi Tipografisi ve kanıtlar

### Çelişen yazı tipi referanslarını uzlaştırın

Güncel tipografi belgelerinde başlıklar için Lora, gövde metni için Montserrat belirtiliyor. İndirilen stil sayfası bu aileleri içe aktarsa da eski Encode Sans tanımlarını da içeriyor. Depo kurulum README dosyasında hâlâ Encode Sans öneriliyor. Bu, sürüm/kaynak tutarsızlığıdır; üretim ortamına geçişte seçilen sürümün son basamaklardaki kaskadını inceleyin ve geçmişteki her referansın aynı temayı anlattığını varsaymayın.

Önizleme, çevrimdışı güvenilirlik için Arial ve Georgia yedeklerini açıkça belirtir ve harici yazı tipi içe aktarımını kaldırır. Yerel geometri görünür kalır: 16px gövde metni, 40px H1 ve 18px giriş metni. Panel başlıklarının boyutu kendilerine özgü 20px’tir; bu nedenle temel H3 ölçeğini karta kopyalamak bileşenin görünümünü değiştirir.

Destekleyici belirtimi okuyun

## Poncho Tasarım Sistemi Renk ve eylem hiyerarşisi

### Eylemi anlamına göre seçin

Düğme belgeleri; varsayılan bağlantı eylemlerini, ikincil bağlantıları, tek bir ana veya başarılı eylemi ve yıkıcı eylemleri birbirinden ayırır. btn-primary, güçlü ve olağan bağlantı tarzı eylemdir; btn-link ikincil eylemleri destekler. btn-success ana ilerleme eylemini belirtir ve yönergeler sayfa başına tek bir tane kullanılmasını önerir. btn-danger yalnızca yıkıcı veya geri alınamaz eylemler için kullanılır.

Etkinlik tarayıcısı, ayrıntı açıldığında ikincil bir sıfırlama ve birincil bir geri dönme eylemi sunar. Kimseyi kaydedemediği için yeşil bir kayıt düğmesi yoktur. Bir ziyaretçi yerel bir paneli açtı diye başarı iddiasında bulunmayın.

- btn-primary: olağan güçlü eylem; aynı eylem grubunda benzer düğmelerle rekabete sokmayın.

- btn-link: filtreyi sıfırlamak gibi ikincil veya bilgilendirici eylemler.

- btn-success / btn-danger: yalnızca gerçek eylem belgelenen anlamı taşıyorsa kullanın.

Destekleyici belirtimi okuyun

## Poncho Tasarım Sistemi Izgarası ve boşlukları

### Devralınan ızgarayı bilinçli kullanın

Bootstrap 3, 30px oluklara sahip 12 sütunlu bir ızgara kullanır. Bir satır, sütunlardaki 15px dolguyu dengeler. col-sm-4, 768px’den itibaren üç etkinlik panelini eşit sütunlara yerleştirir; bu genişliğin altında paneller tam genişlikte bloklara dönüşür. Kapsayıcı genişlikleri, belgelenen kesme noktalarında 750px, 970px ve 1170px olur.

Poncho bileşen aralıklarını bunun üzerine ekler: panel gövdelerinde dikeyde 15px, yatayda 20px dolgu ve panel altında 30px boşluk bulunur. Düğmelerin köşe yarıçapı 30px, kenarlığı 3px, dolgusu ise 8px x 20px’tir. Bu değerler, görünümün değiştirilmemiş bir Bootstrap sayfasından neden farklı olduğunu açıklar; bunları genel amaçlı yuvarlak kart temasına dönüştürmeyin.

Destekleyici belirtimi okuyun

## Poncho Tasarım Sistemi Tıklanabilir panel yapısı

### Her kart için tek hedef

Resmî panel örneklerinde panelin tamamı bir bağlantıyla sarılır; panel-body bu bağlantının içinde, başlık ve açıklama metni de gövdenin içinde yer alır. Böylece kompakt bir dizin girdisi tek bir tutarlı hedef hâline gelir. Bu bağlantının içine başka bir bağlantı veya düğme yerleştirmeyin; çakışan etkileşim hedefleri oluşturur.

Üretim kodu parçası gerçek bir etkinlik yoluna gider. Yerel önizleme ise özgün ayrıntı metnini göstermek için aynı anlamsal bağlantıyı yakalar. Bağlantıyı açan öğeyi kaydeder, yeni ayrıntı bölümüne odağı taşır ve ziyaretçi kapattığında odağı geri verir. Bu davranış, belgelenen panel işaretlemesine eklenen bir uygulama katmanıdır.

```
<div class="row">
  <div class="col-sm-4">
    <a class="panel panel-default" href="/activities/repair-cafe/">
      <div class="panel-body">
        <h3>Repair café</h3>
        <p class="text-muted">Skills · Saturday, 10:00</p>
      </div>
    </a>
  </div>
</div>
```

Kod referansı

Destekleyici belirtimi okuyun

## Poncho Tasarım Sistemi Filtreleme ve yerel durum

### Süs amaçlı etiketler değil, gerçek bir filtre

Etkinlik türü seçicisinin açık bir etiketi ve üç kategorisi vardır. Seçim değiştiğinde eşleşmeyen panel sarmalayıcıları gizlenir ve durum mesajı yeni sayıyı gösterir. Bu sayı, toplam kaydı veya uygunluğu değil, görünür etkinlikleri ifade eder. Sıfırlama üç etkinliğin tamamını yeniden gösterir ve odağı filtreye taşır.

Bir kategorinin değiştirilmesi, açık bir ayrıntıyı kapatır; böylece artık gizli olan bir etkinliğin içeriği sonuçlardan kopuk kalmaz. Bir paneli açmak filtreyi değiştirmez. Bu kurallar küçük ama kontroller, sonuçlar ve ayrıntılar arasındaki ilişkiyi sınamak için yeterince kapsamlıdır.

1. Arts seçeneğini belirleyin ve yalnızca Printmaking workshop etkinliğinin kaldığını doğrulayın.

2. Etkinliği açıp açıklamasını inceleyin, ardından aynı panele geri dönün.

3. Filtreyi sıfırlayın ve üç etkinliğin de yeniden görünür olduğunu doğrulayın.

Destekleyici belirtimi okuyun

## Poncho Tasarım Sistemi Klavye ve içerik yapısı

### Yalnızca görsel olarak devre dışı durumları kopyalamayın

Resmî düğme tablosunda devre dışı bir CSS sınıfı gösterilir. Gerçek bir HTML düğmesinin devre dışı bırakılması gerekiyorsa disabled niteliği de eklenmelidir; tek başına sınıf, klavyeyle etkinleştirmeyi engelleyemez. Bağlantılarda, devre dışı biçimlendirmeyi eksiksiz bir etkileşim modeli saymak yerine geçerli bir hedefin hâlâ olup olmadığını değerlendirin.

Tek bir H1 ve tutarlı bir başlık hiyerarşisi kullanın. Genişletilmiş ayrıntı bir H2 bölümü olduğundan, bu dizinde paneller içinde H3 kullanılır. Arada başka bir bölüm başlığı olmadan tek başına duran bir liste için başlık düzeylerini gerçek belge yapısına göre uyarlayın. Dekoratif simge kitaplıkları isteğe bağlıdır; her eylemi metin etiketleri anlattığı için bu örnekte kullanılmamıştır.

Destekleyici belirtimi okuyun

## Poncho Tasarım Sistemi Yerel kurulum ve kapsam

### Yalnızca örneğin kullandığı katmanları yükleyin

Temelinin üzerine temanın geçmesi için Bootstrap CSS dosyasını Poncho CSS dosyasından önce yükleyin. Temel ızgara ve paneller için Bootstrap JavaScript veya jQuery gerekmez. Uygulamaya Bootstrap etkileşimli bileşenleri eklenirse, Bootstrap 3.4.1 JavaScript öncesinde uyumlu bir jQuery sürümü yükleyin ve kullanılan bileşenleri sınayın.

Bu, uyumluluk sınırları belirli eski bir bağımlılık yığınıdır. Yanına modern Bootstrap kurmak bir geçiş stratejisi değildir. Depodaki MIT lisansı kapsamındaki kodu yeniden kullanmayı; devlet kimliğinden, resmî logolardan ve devlet sayfalarında görünen içerik lisansından ayrı değerlendirin. Önizlemede kurgusal topluluk etkinlikleri kullanılır ve bunun Arjantin devlet hizmeti olduğu iddia edilmez.

Destekleyici belirtimi okuyun

## Poncho Tasarım Sistemi Bileşen örnekleri

### Panelin tamamında gezinme

Panel gövdesini tek bir bağlantı sarmalar; etkileşimli kontrolleri iç içe yerleştirmeyin.

```
<div class="row">
  <div class="col-sm-4">
    <a class="panel panel-default" href="/activities/repair-cafe/">
      <div class="panel-body">
        <h3>Repair café</h3>
        <p class="text-muted">Skills · Saturday, 10:00</p>
      </div>
    </a>
  </div>
</div>
```

Kod referansı

### Eksiksiz etkinlik dizini

Yerel Poncho panelleri; çalışan bir kategori filtresi ve odağı geri yükleyen ayrıntı görünümüyle birlikte.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Community activities</title><link rel="stylesheet" href="vendor/poncho-2.0.320/bootstrap.min.css"><link rel="stylesheet" href="vendor/poncho-2.0.320/poncho.min.css"><style>html,body{height:auto}body{padding:30px 0;font-family:Arial,sans-serif!important}h1,h2,h3{font-family:Georgia,serif!important}.container{max-width:100%}.panel{display:block}.filter{display:flex;gap:15px;flex-wrap:wrap;align-items:end;margin:30px 0}.filter>div{flex:1;min-width:180px}.panel:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #333;outline-offset:3px}#detail{border-left:5px solid var(--secondary);padding-left:20px;margin:25px 0}footer{font:14px/1.5 Arial;border-top:1px solid #ddd;padding-top:20px}[hidden]{display:none!important}</style><main class="container"><p class="text-muted">COMMUNITY PROGRAMME · INDEPENDENT EXAMPLE</p><h1>Find a local activity</h1><p class="lead">Browse practical sessions at the community centre.</p><div class="filter"><div><label for="category">Activity type</label><select id="category" class="form-control"><option value="all">All activities</option><option value="skills">Skills</option><option value="outdoors">Outdoors</option><option value="arts">Arts</option></select></div><button id="reset" class="btn btn-link" type="button">Reset filter</button></div><p id="count" role="status">3 activities</p><div class="row"><div class="col-sm-4" data-category="skills"><a class="panel panel-default" href="#detail" data-title="Repair café" data-copy="Bring one small household item to a supervised repair session. This demonstration does not reserve a place."><div class="panel-body"><h3>Repair café</h3><p class="text-muted">Skills · Saturday, 10:00</p></div></a></div><div class="col-sm-4" data-category="outdoors"><a class="panel panel-default" href="#detail" data-title="Community garden" data-copy="Meet at the garden gate for a planting session. Wear suitable footwear; tools are provided in this fictional programme."><div class="panel-body"><h3>Community garden</h3><p class="text-muted">Outdoors · Sunday, 09:30</p></div></a></div><div class="col-sm-4" data-category="arts"><a class="panel panel-default" href="#detail" data-title="Printmaking workshop" data-copy="Explore simple printing techniques in the studio. This local example has no registration service."><div class="panel-body"><h3>Printmaking workshop</h3><p class="text-muted">Arts · Tuesday, 16:00</p></div></a></div></div><section id="detail" hidden tabindex="-1"><h2 id="title"></h2><p id="copy"></p><button id="close" class="btn btn-primary">Back to activities</button></section><footer>Native Poncho 2.0.320 CSS with Bootstrap 3.4.1. Arial / Georgia fallbacks. Original activity data and filtering; no government identity or booking service.</footer></main><script>let opener;const select=document.querySelector('#category');function filter(){let n=0;document.querySelectorAll('[data-category]').forEach(x=>{x.hidden=select.value!=='all'&&x.dataset.category!==select.value;if(!x.hidden)n++});document.querySelector('#count').textContent=n+' activit'+(n===1?'y':'ies');document.querySelector('#detail').hidden=true}select.onchange=filter;document.querySelector('#reset').onclick=()=>{select.value='all';filter();select.focus()};document.querySelectorAll('[data-title]').forEach(a=>a.onclick=e=>{e.preventDefault();opener=a;document.querySelector('#title').textContent=a.dataset.title;document.querySelector('#copy').textContent=a.dataset.copy;document.querySelector('#detail').hidden=false;document.querySelector('#detail').focus()});document.querySelector('#close').onclick=()=>{document.querySelector('#detail').hidden=true;opener.focus()};</script></html>
```

Kod referansı

## Poncho Tasarım Sistemi Aracı kurulumu

### Uygulamaya Başlangıç Noktası

Yerel CSS kurulumu. Bu önizlemede özgün filtreleme ve ayrıntı mantığı kullanıldığından Bootstrap JavaScript gerekmez. Kaynaklar bölümündeki, çalışan örneğin tamamını içeren ZIP dosyası gerekli önizleme bağımlılıklarını ve belgenin tamamını da sağlar. Dosyaları çıkarın, ilgili dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/poncho.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.

```
npm install ar-poncho@2.0.320 bootstrap@3.4.1
# Copy the following package assets into your site's public vendor directory:
# node_modules/bootstrap/dist/css/bootstrap.min.css
# node_modules/ar-poncho/dist/css/poncho.min.css
# Load Bootstrap first, then Poncho.
# Optional Bootstrap JS components also need jQuery before bootstrap.min.js.
```

### Projeniz İçin Bir İstem

```
Bootstrap 3.4.1 üzerinde ar-poncho 2.0.320 kullanın. 12 sütunlu ızgara ve tek bağlantı içeren panel kartlarıyla erişilebilir bir dizin oluşturun. Yerel düğme rol renklerini, dolguları ve köşe yarıçaplarını koruyun. Etiketli filtreleme, sonuç sayıları ve odak geri yükleme sağlayın. Yazı tipi basamaklandırmasını sabitlenmiş paketle karşılaştırarak doğrulayın; Bootstrap 5 API’lerini karıştırmayın veya kayıt işleminin başarılı olduğunu varsaymayın.
```

## Poncho Tasarım Sistemi Kaynaklar ve kapsam

Devlet kimliği kullanmayan, yerel CSS ile hazırlanmış bağımsız bir OpenDesign örneği. Güncel belgeler ile eski README, yazı tipi aileleri konusunda birbiriyle çelişiyor; bu önizlemenin yazı tipi tercihlerini sabitlenmiş CSS ve açıkça belirtilen yedek yazı tipi belirliyor.

- Resmî depo ve kurulum Paket kurulumu, bağımlılıklar ve MIT kod lisansı.

- Panel anatomisi Kartın tamamını kapsayan bağlantılar, yardımcı metinler ve varyantlar.

- Düğmelerin anlamı Eylem hiyerarşisi, sınıf adları ve durumlar.

- Tipografi Güncel yazı tipi aileleri ve anlamsal metin yönergeleri.

- Yayımlanan CSS Gerçek renk, tipografi ve geometri bildirimleri.

- Bootstrap 3 ızgarası Devralınan duyarlı sütunlar, oluklar ve kapsayıcı genişlikleri.

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

## Poncho Tasarım Sistemi İlgili kaynaklar

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

### Ripple

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.

### Scottish Government tasarım sistemi

İskoç Hükümeti’nin duyarlı tipografi, aralık ve renk rollerini, sınırı aşan metni koruyan ve düzeltme olanağı sunan yerel bir karakter sayacı alanında uygulayın.


- [Uygulama başvurusu](https://argob.github.io/poncho/componentes/paneles/)
- [Kaynak](https://github.com/argob/poncho/blob/master/dist/css/poncho.css)
- [Kaynak](https://getbootstrap.com/docs/3.4/css/#grid)
- [Destekleyici belirtimi okuyun](https://github.com/argob/poncho)
- [Destekleyici belirtimi okuyun](https://argob.github.io/poncho/identidad/tipografia/)
- [Destekleyici belirtimi okuyun](https://argob.github.io/poncho/componentes/botones/)
- [Destekleyici belirtimi okuyun](https://getbootstrap.com/docs/3.4/css/#grid)
- [Kod referansı](https://argob.github.io/poncho/componentes/paneles/)
- [Destekleyici belirtimi okuyun](https://argob.github.io/poncho/componentes/paneles/)
- [Resmî depo ve kurulum Paket kurulumu, bağımlılıklar ve MIT kod lisansı.](https://github.com/argob/poncho)
- [Panel anatomisi Kartın tamamını kapsayan bağlantılar, yardımcı metinler ve varyantlar.](https://argob.github.io/poncho/componentes/paneles/)
- [Düğmelerin anlamı Eylem hiyerarşisi, sınıf adları ve durumlar.](https://argob.github.io/poncho/componentes/botones/)
- [Tipografi Güncel yazı tipi aileleri ve anlamsal metin yönergeleri.](https://argob.github.io/poncho/identidad/tipografia/)
- [Yayımlanan CSS Gerçek renk, tipografi ve geometri bildirimleri.](https://github.com/argob/poncho/blob/master/dist/css/poncho.css)
- [Bootstrap 3 ızgarası Devralınan duyarlı sütunlar, oluklar ve kapsayıcı genişlikleri.](https://getbootstrap.com/docs/3.4/css/#grid)