USWDS Tasarım Sistemi.

USWDS Tasarım Sistemi: Yapılandırılabilir Bir Foundation

Varsayılan belirteçler başlangıç yapılandırmasıdır

USWDS; sistem belirteçlerini, proje tema ayarlarını, yardımcı sınıfları ve bileşenleri birbirinden ayırır. Aşağıdaki referans, mevcut belgelerdeki varsayılan tema tercihlerini kaydeder. Bir federal program, her bileşeni değiştirmek zorunda kalmadan farklı yazı tipi rollerini veya renk takma adlarını yapılandırabilir.

Önizleme, 3.14.0 CSS ve accordion JavaScript kullanan bağımsız bir araştırma fırsatları karşılaştırmasıdır. Devlet başlığını ve kurum kimliği işaretlerini içermez. Program adları ve aşamalar kurgusaldır; filtreleme tamamen tarayıcıda gerçekleşir.

Destekleyici belirtimi okuyun

USWDS Tasarım Sistemi: Aralık ve Tema Belirteçleri

Rakam yerine birimi okuyun

Bir USWDS aralık birimi 8px'tir: units(2), 16px; units(3) ise 24px anlamına gelir. Yarım birim belirteçleri daha küçük boşluklar sağlar; yardımcı sınıf yazımında yarım birim için 05 kullanılır. margin-2 yardımcı sınıfı, iki piksellik kenar boşluğu anlamına gelmez.

Ölçek, tablet ve desktop gibi adlandırılmış genişlikleri de içerir. Bu adlar yeniden kullanılabilir belirteçlerdir; her genişlikte her sayfanın yeniden tasarlanması gerektiği anlamına gelmez. Karşılaştırmada içeriğin çevresinde grid-container, tablo içinse odaklanılabilir ve kaydırılabilir bir alan kullanılır.

@use "uswds-core" as *;
.opportunity-meta {
  padding: units(2);
  margin-bottom: units(3);
}

Kod referansı

Destekleyici belirtimi okuyun

USWDS Tasarım Sistemi: Yazı Tipleri ve Roller

Bileşenleri yeniden adlandırmadan rol değiştirilebilir

Varsayılan sans belirteci Source Sans Pro'ya, serif belirteci ise Merriweather'a eşlenir. Body ve UI rolleri sans'a, heading rolü serif'e eşlenir. family("body") işlevi bu eşleme zincirini çözümler. Bir projeyi belgelerken anlamsal rolü son yazı tipi ailesinden ayrı ele alın.

Yerel önizlemede yazı tipi indirme gerekmemesi için gövde metninde açıkça Helvetica/Arial, başlıklarda ise Georgia kullanılır. Bu, standart USWDS yazı tipi kimliği değil, bir çalışma amaçlı geçersiz kılmadır. Üretim derlemesinde bu roller uswds-core ayarlarıyla yapılandırılmalı veya dağıtılan yazı tipi dosyaları kopyalanmalıdır.

@use "uswds-core" with (
  $theme-font-type-sans: "helvetica",
  $theme-font-type-serif: "georgia",
  $theme-font-role-body: "sans",
  $theme-font-role-heading: "serif"
);

Kod referansı

Destekleyici belirtimi okuyun

USWDS Tasarım Sistemi: Tema Rengi Takma Adları

Takma adları rollerine bağlı tutun

Varsayılan primary takma adı blue-60v, #005ea2 değerine çözümlenir. Primary-dark, blue-warm-70v ve #1a4480 değerlerine; ink ise gray-90 ve #1b1b1b değerlerine çözümlenir. Bunlar tema değerleridir; her USWDS sitesinin aynı marka rengini kullanması gerektiği anlamına gelmez.

Bir eylem veya başlık görünümü için anlamsal takma adı, yalnızca tasarım kararınız gerçekten buysa sistem renk belirtecini kullanın. Ayarlarda birincil takma adı değiştirmek, derlenmiş CSS içindeki aynı hex değerine sahip tüm dizeleri değiştirmekten daha kontrollü bir yaklaşımdır.

Destekleyici belirtimi okuyun

USWDS Tasarım Sistemi: Karşılaştırılabilir Fırsat Satırları

Tablonun anlamsal yapısını koruyun

Örnekte bir caption, scope="col" değerine sahip sütun başlıkları ve scope="row" değerine sahip bir fırsat adı bulunur. Okuyucular aynı konu ve aşama alanlarını kayıtlar arasında karşılaştırdığı için bu yapı bir tablodur. Bölge kaydırıldığında da bu ilişkiler korunur.

Kaydırılabilir sarmalayıcıda tabindex="0" bulunur; böylece klavye kullananlar bu bölgeye odaklanabilir. Geniş veriyi tüm belgeyi genişletmek yerine bu bölgede tutar. Önizlemede sıradan metin hücreleri kullanılır; eksik program verisi için sayı uydurmak yerine açık bir içerik durumu gerekir.

Destekleyici belirtimi okuyun

Sıralama ayrı bir geliştirmedir

USWDS, data-sortable aracılığıyla sıralanabilir başlıkları destekler. Sıralanabilir bir tabloda ayrıca aria-live="polite" değerine sahip usa-table__announcement-region gerekir. Biçimlendirilmiş bir tutarın alfabetik sırayla değil, değer olarak sıralanması için sayısal gösterimlerde data-sort-value gerekebilir. Üç satırlı konu filtresi amaçlanan gösterim olduğundan, mevcut karşılaştırmada sıralama etkinleştirilmemiştir.

Destekleyici belirtimi okuyun

USWDS Tasarım Sistemi: Açılır Bölümler Olarak Gereksinimler

Düğme ve panel kimliklerini ilişkilendirin

Her usa-accordion__button, ilişkili usa-accordion__content öğesine işaret eden aria-controls değerine sahiptir. Yerleşik JavaScript, aria-expanded değerini ve görünürlüğü günceller. Kenarlıklı değiştirici kapsayıcı görünümünü değiştirir; data-allow-multiple ise birden fazla bölümün açık kalmasına olanak tanır.

İçerik anahattının anlaşılır kalması için düğme bir başlığın içinde yer alır. Bir programın uygun olup olmadığına karar vermek için gereken şartlar, açılır bölümün dışında ve görünür kalmalıdır. Buradaki panellerde tamamlayıcı hazırlık notları ve kurgusal veri kümesine ilişkin açıklamalar bulunur.

• Başlık, panelin konusunu açıklar.
• Düğme, genişletilmiş durumunu ve hedef kimliğini taşır.
• Panelin görünürlüğü değişse de kimliği aynı kalır.

Destekleyici belirtimi okuyun

USWDS Tasarım Sistemi: Tüm Varlık Ağacını Yükleyin

Derlenmiş CSS tarafından kullanılan dosya yollarını koruyun

@uswds/[email protected] paketini yükleyin ve dist dizinini; css, js, img ve fonts klasörlerini tek bir klasörde birleştirmeden kopyalayın. Stil sayfası, simgeler ve yazı tipleri için göreli yollar kullanır. Aksi durumda sayfa kısmen doğru görünürken açılır bölüm simgeleri veya yazı tipleri eksik kalabilir.

Önce head içinde uswds-init.min.js dosyasını, ardından stil sayfasını yükleyin; uswds.min.js dosyasını ise gövde işaretlemesinden sonra yükleyin. Paketlenmiş kütüphane akordeonu geliştirir. Aşağıdaki arama alanı ve konu filtresi özel uygulama mantığı kullanır; uzak bir arama hizmetini çağırmaz.

Destekleyici belirtimi okuyun

USWDS Tasarım Sistemi: Filtreleme ve Kurtarma

Sorgunun sonucu gösterilmelidir

Yerel label, input, select ve button stilleri denetimleri sağlar; uygulama, sorguyu ve seçilen konuyu üç kurgusal kayıtla karşılaştırır. Sonuç sayısı nazikçe duyurulan bir canlı bölgedir. Eşleşme bulunmadığında, girilen sorgu korunarak açıklama ve filtreleri sıfırlama eylemi gösterilir.

Bu gösterim, bir fırsatı keşfetmekle başvuruda bulunmak arasındaki farkı özellikle vurgular. Hazırlık içeriğini açmak taslak oluşturmaz veya bir gereksinimi tamamlandı olarak işaretlemez. Gerçek bir fon başvurusu için ilgili programın politikası, kimlik doğrulaması ve kalıcı işlem durumu gerekir.

1. Ortam konusuna göre filtreleyin ve kalan fırsatı inceleyin.
2. Eşleşmeyen bir ifade arayın ve Filtreleri temizle seçeneğini kullanın.
3. Her iki hazırlık panelini de açın ve genişletilmiş durumlarının birbirinden bağımsız olduğunu doğrulayın.

Destekleyici belirtimi okuyun

USWDS Tasarım Sistemi: Bileşen Örnekleri

<div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
  <h3 class="usa-accordion__heading">
    <button type="button" class="usa-accordion__button"
      aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
  </h3>
  <div id="preparation" class="usa-accordion__content usa-prose" hidden>
    <p>This fictional opportunity asks for a project summary and a named contact.</p>
  </div>
</div>

<div class="usa-table-container--scrollable" tabindex="0">
  <table class="usa-table usa-table--borderless">
    <caption>Illustrative research opportunities</caption>
    <thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead>
    <tbody><tr><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr></tbody>
  </table>
</div>

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research opportunities — OpenDesign study</title><script src="vendor/uswds-3.14.0/uswds-init.min.js"></script><link rel="stylesheet" href="vendor/uswds-3.14.0/css/uswds.min.css"><style>body,body *,body *:before,body *:after{font-family:Helvetica,Arial,sans-serif!important}h1,h2{font-family:Georgia,serif!important}body{color:#1b1b1b;margin:0}[hidden]{display:none!important}.study-head{background:#d9e8f6;padding:16px 0;border-bottom:4px solid #005ea2}.study-head p{margin:0}.study-form{display:flex;gap:24px;align-items:end;flex-wrap:wrap}.study-form>div{flex:1;min-width:200px}.study-form .usa-input,.study-form .usa-select{max-width:none}.usa-table{width:100%}.study-main{padding-top:32px;padding-bottom:48px}.usa-table th{min-width:120px}#count{margin-top:24px}.study-note{border-top:1px solid #a9aeb1;margin-top:32px;padding-top:16px;line-height:1.5}</style></head><body><header class="study-head"><div class="grid-container"><p><strong>OpenDesign · USWDS component study</strong><br>Fictional research records. No application is submitted.</p></div></header><main class="grid-container study-main"><h1>Research opportunities</h1><p class="usa-intro">Compare topics and read the preparation notes.</p><form class="study-form" id="filters"><div><label class="usa-label" for="query">Search opportunity names</label><input class="usa-input" id="query" type="search"></div><div><label class="usa-label" for="topic">Topic</label><select class="usa-select" id="topic"><option value="">All topics</option><option>Environment</option><option>Transport</option><option>Education</option></select></div><button type="submit" class="usa-button">Apply filters</button><button type="button" class="usa-button usa-button--outline" id="clear">Clear filters</button></form><p id="count" aria-live="polite">3 opportunities</p><div class="usa-table-container--scrollable" tabindex="0"><table class="usa-table usa-table--borderless"><caption>Illustrative research opportunities</caption><thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead><tbody><tr data-topic="Environment"><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr><tr data-topic="Transport"><th scope="row">Accessible transport research</th><td>Transport</td><td>Example review</td></tr><tr data-topic="Education"><th scope="row">Local skills survey</th><td>Education</td><td>Example draft</td></tr></tbody></table></div><p id="empty" hidden>No matching opportunities. Broaden the topic or clear the filters.</p><h2>Preparation notes</h2><div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
  <h3 class="usa-accordion__heading">
    <button type="button" class="usa-accordion__button"
      aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
  </h3>
  <div id="preparation" class="usa-accordion__content usa-prose" hidden>
    <p>This fictional opportunity asks for a project summary and a named contact.</p>
  </div>
<h3 class="usa-accordion__heading"><button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="scope">What the example data means</button></h3><div id="scope" class="usa-accordion__content usa-prose" hidden><p>Draft and review are demonstration stages. They do not indicate an actual funding programme or eligibility decision.</p></div>
</div><p class="study-note">USWDS 3.14.0 native accordion and styles, with local Helvetica/Georgia font overrides. Filters are original application code. <a href="vendor/uswds-3.14.0/LICENSE.md">Distribution licence</a>.</p></main><script src="vendor/uswds-3.14.0/uswds.min.js"></script><script>const rows=[...document.querySelectorAll('tbody tr')],q=document.getElementById('query'),t=document.getElementById('topic');function filter(){let n=0;for(const row of rows){const show=(!t.value||row.dataset.topic===t.value)&&row.firstElementChild.textContent.toLowerCase().includes(q.value.trim().toLowerCase());row.hidden=!show;if(show)n++}document.getElementById('count').textContent=n+' '+(n===1?'opportunity':'opportunities');document.getElementById('empty').hidden=n!==0;}document.getElementById('filters').addEventListener('submit',e=>{e.preventDefault();filter()});document.getElementById('clear').addEventListener('click',()=>{q.value='';t.value='';filter();q.focus()});</script></body></html>