Poncho Tasarım Sistemi.

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

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

<!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>