CMS tasarım sistemi.

CMS tasarım sistemi Core veya bir alt tema seçin

Paket, markalı tek bir görünüm değil, bir ürün ailesidir

CMS Core, ortak arayüz temellerini sunarken Healthcare.gov, Medicare.gov ve CMS.gov için ayrı alt sistemler sağlar. Bu referans, @cmsgov/design-system 18.1.0 sürümünü ve core-theme.css dosyasını temel alır. Bir alt temada bulunan renk, logo veya bileşen, otomatik olarak Core kuralı sayılmaz. Örnekte özellikle tarafsız bir bildirim tercihi iş akışı kullanılmış; resmî devlet banner’ları ve kimlik işaretleri kullanılmamıştır.

React, Preact, web bileşeni ve manuel HTML/CSS entegrasyon seçenekleri vardır. Belgeler, yerleşik davranışları kullanışlı olduğunda JavaScript bileşenlerini önerir; web bileşeni koleksiyonu bunların bir alt kümesidir. Bağımsız örneğimiz, düzenleme/kaydetme/iptal işlemleri için uygulama JavaScript’siyle birlikte gerçek Core CSS kullanır. CSS’ün doğrulama, yönlendirme veya kalıcılık sağladığını iddia etmez.

Destekleyici belirtimi okuyun

CMS tasarım sistemi Sürümlenmiş temayı okuma

Her iki stil sayfasını da ekleyin

index.css bileşen kurallarını tanımlar, core-theme.css ise bu kuralların değişkenlerini sağlar. Tema eklenmezse geçerli sınıf adlarının değerleri çözümlenmeden kalabilir. Buna karşılık, sayfa görüntülense bile Core tipografisini anlatırken Medicare teması içe aktarmak yanıltıcı olur. Kurulumda aynı 18.1.0 sürümündeki her iki kaynak da kullanılır.

Bu kılavuzdaki sayısal değerlerin kaynağı sürümlenmiş temadır. Örneğin --color-base değeri #262626’dır; ancak genel tipografi açıklamasında hâlâ #333’ten söz edilir. Temadaki --grid-gutter-width, --spacer-4 değerine (32px) karşılık gelirken --grid-form-gutter-width, --spacer-2 değerine (16px) karşılık gelir. 16px boşlukları tanımlayan genel bir cümle, her grid çeşidine uygulanmamalıdır. Gerçek bir düzeni yeniden oluştururken bu farklar önem taşır.

Destekleyici belirtimi okuyun

CMS tasarım sistemi Core tipografisi ve hiyerarşisi

Tek yazı tipi ailesi, belirgin rol boyutları

Core, başlıklar ve gövde içeriği için Open Sans kullanır. 18.1.0 temasındaki yedek yazı tipi zinciri Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial ve sans-serif ile devam eder. Yerel örnek, harici yazı tipi dosyaları istememek için açıkça Arial kullanır; bu nedenle ölçüleri resmî tipografinin tamamından farklıdır.

Gövde metninin temel boyutu 1rem, satır yüksekliği 1.5’tir. Boyut değişkenleri, 16px kök boyutunda 14, 16, 18, 21 ve 24px değerlerini içerir; ardından duyarlı daha büyük roller gelir: 3xl mobilde 30px, diğer durumlarda 36px; 4xl mobilde 36px, diğer durumlarda 48px; 5xl mobilde 36px, tablette 48px ve en büyük rolünde 60px’tir. Bunlar tema değerleridir; en büyük boyutu her sayfa başlığında kullanma izni değildir. Anlamsal başlıkları ve uygun yardımcı sınıfı ya da ds-content eşlemesini kullanın.

Destekleyici belirtimi okuyun

CMS tasarım sistemi Boşluklar ve duyarlı düzen

Sekiz piksellik ritim ve yarım adım

--spacer-1 ile --spacer-7 arasındaki değişkenler, sekiz piksellik artışlarla 8–56px değerlerine karşılık gelir. --spacer-half 4px, --spacer-none ise sıfırdır. Bu nedenle ds-u-margin--2 gibi bir sınıf 2rem değil, 16px anlamına gelir. İnceleme satırının yerel CSS’si dikeyde 16px dolgu ve altta 2px kenarlık sağlar; formun her yanıtını ayrıca dolgulu bir kartla çevrelemek gerekmez.

Core’un site için belirlediği azami genişlik 1104px’tir. Sürümlenmiş temada site kenar boşlukları 3rem, mobil kenar boşlukları ise 1.5rem’dir. Örnekte iki kısa inceleme satırı için daha küçük, 48rem genişliğinde bir okuma alanı seçilmiştir. Bu, uygulamaya özgü bir genişliktir; yeni bir CMS belirteci değildir.

Destekleyici belirtimi okuyun

CMS kesme noktası öneklerini kullanın

Destekleyici belirtimi okuyun

CMS tasarım sistemi İnceleme satırının yapısı ve API

Etiket, değer ve bağlama uygun düzenleme hedefi

Review, incelenebilir tek bir öğeyi kapsar. Başlığı varsayılan olarak h3’tür, headingLevel ile değiştirilebilir ve ardından geçerli değeri temsil eden children gelir. editHref bir hedef belirtir; bu özellik olmadan düzenleme bağlantısı gösterilmez. editAriaLabel, yinelenen görünür Düzenle bağlantısına erişilebilir ve açık bir ad verir. 18.1.0 tür tanımı ayrıca editText, onEditClick ve varsayılan bağlantının yerine geçen editContent özelliklerini de sunar.

React örneğinde, yayımlanmış tür tanımında doğrulanan gerçek özellikler kullanılır. Yollar, kullanan uygulamanın uygulaması gereken örnek uygulama rotalarıdır. Yerel CSS alternatifi ds-c-review, ds-c-review__content ve ds-c-review__heading yapısını gösterir; gezinme ve güncellemeleri yine uygulamanın yönetmesi gerekir.

import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';

export default function ContactReview() {
  return <section aria-labelledby="contact-title">
    <h2 id="contact-title">Contact preferences</h2>
    <Review heading="Notice format" headingLevel="3"
      editHref="/preferences/notice-format"
      editAriaLabel="Edit notice format">
      <p>Large print</p>
    </Review>
    <Review heading="Preferred language" headingLevel="3"
      editHref="/preferences/language"
      editAriaLabel="Edit preferred language">
      <p>English</p>
    </Review>
  </section>;
}

Kod referansı

Destekleyici belirtimi okuyun

CMS tasarım sistemi Satır düzenleme ve bölüm düzenleme

Düzeltme yolunu öngörülebilir tutun

CMS form inceleme örüntüsü, tek bir yanıtı düzenlemekle bütün bir bölümü düzenlemeyi birbirinden ayırır. Bildirim biçimi ve dil tercihi gibi bağımsız yanıtlar satır düzenlemeye uygundur. Hane üyeleri ve bunlarla ilişkili bağlar gibi birbiriyle bağlantılı yanıtlar, tutarlılığı birlikte yeniden hesaplayabilmesi için bölüm düzenleme gerektirebilir. Resmî kılavuz, bölüm düzeyindeki Düzenle seçeneğinin bölüm başlığının yanına yerleştirilmesinin Review bileşeni tarafından uygulanmadığını açıkça belirtir.

Önizleme, seçilen satır için odaklanmış bir fieldset açar. Kaydet yalnızca o değeri günceller ve odağı işlemi başlatan Düzenle denetimine geri getirir; İptal taslağı siler. Düzenleyici açıkken de görünür yanıtı değiştirmeden korur. Yerel durum iletisi, yalnızca düzenleme formunun açıldığını başarı olarak duyurmak yerine gerçekten yapılan değişikliği bildirir.

• Giriş ve inceleme adımlarında aynı soru etiketlerini ve sıralamasını kullanın.
• Görünür bağlantı Düzenle dese bile her satır için bağlama uygun bir düzenleme adı sağlayın.
• İlişkili yanıtların birlikte değiştirilmesi gerekiyorsa bölüm düzenlemeyi tek satırlı bileşenin dışında tutun.

Destekleyici belirtimi okuyun

CMS tasarım sistemi İnceleme, tamamlama ve doğruluk

İnceleme, gönderim makbuzu değildir

Review, düzenlenebilir form yanıtları için uygundur; arama sonuçlarının yerine kullanılamaz. Gerçek bir gönderim akışında, bu örüntü incelemenin ardından son bir gönderme eylemi gerektirir. Makbuz gösterilmeden önce bu eylem, gerçek bir arka uç sonucunu yansıtmalıdır. Bu örnek bunun yerine Yerel incelemeyi tamamla seçeneğini sunar ve hiçbir şeyin gönderilmediğini veya saklanmadığını açıkça belirtir.

Core; birincil mavi #0071bc, hata kırmızısı #e31c3d, başarı yeşili #12890e ve kenarlık grisi #d9d9d9 renklerini birbirinden ayırır. Kaydedilen tercih yalnızca renkle değil, metinle de belirtilir. Odak göstergesinde temanın açık ve koyu odak referansları kullanılır; Düzenle seçeneğini sade bir denetim olarak biçimlendirirken bu göstergeyi kaldırmayın. Son durum klavyeyle erişilebilir olmalı ve inceleme satırlarını silmemelidir.

Destekleyici belirtimi okuyun

CMS tasarım sistemi Güvenli biçimde yükleyin ve genişletin

Eksiksiz bir CSS yolu ve gerçek bileşen yolu

Sabitlenmiş paketi yükleyin ve paket dışa aktarımları üzerinden css/index.css ile css/core-theme.css dosyalarını içe aktarın. React kullananlar Review bileşenini paketin kökünden; Preact kullananlar ise /preact giriş noktasından içe aktarır. Örnek, Sass derlemesi gerektirmez. Statik CSS kopyalıyorsanız, göreli yazı tipi ve görsel kaynak yollarını koruyun ya da bu örnekte yapıldığı gibi desteklenen bir yedek seçeneği açıkça belirleyin.

CMS ad alanında düzenler ds-l-, bileşenler ds-c- ve yardımcı sınıflar ds-u- önekleriyle ayrılır. Uygulama sınıfları, belgelenmemiş resmî bileşenlermiş gibi gösterilmemelidir. Önizlemedeki okuma alanı ve satır içi düzenleyici yerel bileşimlerdir; inceleme satırı ve düğmeler dağıtılan stilleri kullanır.

1. Eşleşen Core bileşenini ve tema CSS’sini yükleyin, ardından iki inceleme satırını oluşturun.
2. Her düzenleme eylemini denetlenen bir düzenleyiciye bağlayın; kaydetme ve iptalden sonra odağı geri getirin.
3. Masaüstü ve mobil genişliklerde değiştirilen değerleri, atılan taslakları ve yerel tamamlamayı test edin.

Destekleyici belirtimi okuyun

CMS tasarım sistemi Bileşen Örnekleri

import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';

export default function ContactReview() {
  return <section aria-labelledby="contact-title">
    <h2 id="contact-title">Contact preferences</h2>
    <Review heading="Notice format" headingLevel="3"
      editHref="/preferences/notice-format"
      editAriaLabel="Edit notice format">
      <p>Large print</p>
    </Review>
    <Review heading="Preferred language" headingLevel="3"
      editHref="/preferences/language"
      editAriaLabel="Edit preferred language">
      <p>English</p>
    </Review>
  </section>;
}

<div class="ds-c-review">
  <div class="ds-c-review__content">
    <h3 class="ds-c-review__heading">Notice format</h3>
    <p>Large print</p>
  </div>
  <a href="/preferences/notice-format" aria-label="Edit notice format">Edit</a>
</div>

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Notice preferences — CMS Core specimen</title><link rel="stylesheet" href="vendor/cms-18.1.0/index.css"><link rel="stylesheet" href="vendor/cms-18.1.0/core-theme.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}body{margin:0;border-top:8px solid #0071bc}.shell{max-width:48rem;margin:auto;padding:32px 24px}h1{font-size:32px;line-height:1.3;margin:16px 0 24px}h2{font-size:24px;margin:32px 0 16px}.intro{margin-bottom:32px}.ds-c-review__content p{margin:8px 0}.edit{align-self:flex-start;min-width:48px;border:0;background:none;color:#0071bc;text-decoration:underline;font-size:16px;padding:4px;cursor:pointer}.editor{margin:24px 0;padding:24px;background:#e6f1f8;border-left:4px solid #0071bc}fieldset{padding:0;border:0;margin:0}legend{font-size:20px;font-weight:700;margin-bottom:16px}.choice{display:flex;align-items:center;gap:12px;margin:16px 0}.choice input{width:20px;height:20px;accent-color:#0071bc}.actions{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px}footer{margin-top:40px;padding-top:24px;border-top:1px solid #d9d9d9}#status{margin-top:24px;font-weight:bold}button:focus-visible,input:focus-visible{outline:3px solid #bd13b8;outline-offset:3px}[hidden]{display:none!important}@media(max-width:543px){.editor{padding:16px}.actions{flex-direction:column;align-items:flex-start}}</style></head><body><main class="shell"><p>CMS Core component example</p><h1>Review your notice preferences</h1><p class="intro">Check these fictional preferences before completing the local review. This example does not collect health information or contact details.</p><section aria-labelledby="preferences"><h2 id="preferences">Notice preferences</h2><div class="ds-c-review"><div class="ds-c-review__content"><h3 class="ds-c-review__heading">Notice format</h3><p id="format-value">Standard print</p></div><button class="edit" data-field="format" aria-label="Edit notice format">Edit</button></div><div class="ds-c-review"><div class="ds-c-review__content"><h3 class="ds-c-review__heading">Preferred language</h3><p id="language-value">English</p></div><button class="edit" data-field="language" aria-label="Edit preferred language">Edit</button></div></section><form class="editor" id="editor" hidden><fieldset><legend id="legend"></legend><div id="choices"></div></fieldset><div class="actions"><button class="ds-c-button ds-c-button--solid" type="submit">Save preference</button><button class="ds-c-button" id="cancel" type="button">Cancel</button></div></form><div class="actions"><button class="ds-c-button ds-c-button--solid" id="complete">Complete local review</button><button class="ds-c-button" id="reset">Reset example</button></div><p id="status" role="status"></p><footer>Native CMS Core 18.1.0 CSS · Arial fallback<br>Changes exist only on this page. Nothing is submitted or saved after you leave.</footer></main><script>const values={format:'Standard print',language:'English'},options={format:['Standard print','Large print','Electronic text'],language:['English','Spanish']},labels={format:'Notice format',language:'Preferred language'};let field,opener;const editor=document.querySelector('#editor'),status=document.querySelector('#status');function close(){editor.hidden=true;opener?.focus()}document.querySelectorAll('.edit').forEach(button=>button.addEventListener('click',()=>{field=button.dataset.field;opener=button;document.querySelector('#legend').textContent='Edit '+labels[field].toLowerCase();document.querySelector('#choices').replaceChildren(...options[field].map((text,i)=>{const label=document.createElement('label');label.className='choice';const input=document.createElement('input');input.type='radio';input.name='preference';input.value=text;input.checked=text===values[field];label.append(input,document.createTextNode(text));return label}));editor.hidden=false;editor.querySelector('input:checked').focus();status.textContent=''}));editor.addEventListener('submit',event=>{event.preventDefault();values[field]=editor.querySelector('input:checked').value;document.querySelector('#'+field+'-value').textContent=values[field];status.textContent=labels[field]+' updated to '+values[field]+'.';close()});document.querySelector('#cancel').addEventListener('click',close);document.querySelector('#complete').addEventListener('click',()=>{if(!editor.hidden){status.textContent='Save or cancel the open edit before completing the review.';editor.querySelector('input:checked').focus();return}status.textContent='Local review complete. No data was submitted.'});document.querySelector('#reset').addEventListener('click',()=>{values.format='Standard print';values.language='English';Object.entries(values).forEach(([key,value])=>document.querySelector('#'+key+'-value').textContent=value);editor.hidden=true;status.textContent='Example reset.'});</script></body></html>