İçerik sistemi
Doküman Bileşenleri
Tipografi, başlık ritmi, tablolar, callout'lar, diyagramlar ve ortak içerik bileşenleri.
Base
base doküman sayfalarının görsel omurgasıdır. Diğer CSS dosyaları çoğunlukla buradaki tokenlara dayanır.
Callout'ları yalnızca okuyucunun kararını veya uygulamasını değiştiren kritik bilgi için kullanın. Aynı konu altında art arda kutu dizmeyin; örnekleri ve ilgili bağlantıları düz içerik olarak gösterin.
Kod
Çıktı
Örnek: Gerçek hayat senaryoları renkli kutu yerine bu daha sakin içerik biçimiyle anlatılır.
Temel Doküman Bileşenleri
Feature'lardan bağımsız olarak, bu doküman tipinde sık kullanılan temel HTML/CSS bileşenleri de base içinde gelir. Aşağıdaki örnekler sayfa yazarken en çok lazım olan parçaları gösterir.
Başlık hiyerarşisi
h2 ana bölüm, h3 alt bölüm, h4 detay başlık için kullanılır. Sidemenu ve search için başlıklara id vermek iyi alışkanlıktır.
Belge Akışı
Validasyon
İstek önce iş kurallarına göre doğrulanır.
Hata durumları
Eksik alan varsa süreç durur.
Section ayırıcıları
Ana konuların birbirinden net ayrılması için kapsayıcıya .section-dividers ekleyin. İlk section hariç doğrudan çocuk section'ların başına çizgi ve nefes alanı otomatik gelir.
Birinci konu
Birinci konu burada tamamlanır.
İkinci konu
Çizgiden sonra yeni konu başlar.
İçeriğe atlama bağlantısı
Klavye kullanıcılarının tekrarlanan navigasyonu geçip doğrudan ana içeriğe ulaşmasını sağlar. Normalde gizlidir ve Tab ile odaklandığında görünür.
Slogan banner
Kısa ve akılda kalıcı bir ana kuralı veya bölüm sonucunu öne çıkarmak için kullanın. Uzun açıklamalar ve uyarılar için callout tercih edin.
İçerik görseli
Ekran görüntüsü, fotoğraf ve dış kaynaklı görselleri semantik figure yapısıyla ekleyin. Standart görünüm resmi çerçeveler; dar görsellerde .is-compact, logo ve şeffaf görsellerde .is-unframed kullanılır.
.is-unframed kullanın.Tablo
Tabloları yatay taşma sorunlarına karşı her zaman .table-wrapper içine alın. Sütun adları okuyucunun hangi kararı vereceğini açıkça anlatmalı; boş “Kullan/Kullanma” sütunları veya emojiyle kodlanan anlam kullanılmamalıdır.
| Alan | Zorunluluk | Açıklama |
|---|---|---|
ExpenseVoucherTypeCode | Z | SATIS veya IADE |
UUId | O | Boşsa platform üretir |
Rowspan ile ortak kural
Bir kural birden fazla satırı kapsıyorsa boş hücreleri tekrar etmek yerine rowspan kullanın. Kural hücresindeki dikey çizgi, kapsanan satır grubunu görsel olarak ayırır.
| Alan | Değer | Kural |
|---|---|---|
| TypeCode | IADE | |
| SchemeId | PASAPORTNO | |
| ChannelCodeName | IADE_PROVIDER | Kargo → zorunlu |
| VerificationInfo.Type | IADEKODU | |
| CargoCompany | Dolu |
Endpoint kartı
API referansı yazarken endpoint kartı kullanın. Method etiketi için method-post veya method-get class'ı ekleyin.
Yeni bir e-Gider Pusulası oluşturur.
Senaryo kartı
İş senaryolarını gruplamak için kullanılır. İçine tablo, callout veya kod bloğu koyabilirsiniz.
Kargo ile İade
Kargo iadede iade kodu ve kargo şirketi bilgisi zorunludur.
Açılır örnek bloğu
Uzun JSON/XML örneklerini sayfayı şişirmeden göstermek için details.example-details kullanın.
Örnek: SATIS request
Basit satın alma senaryosu.
{"ExpenseVoucherTypeCode":"SATIS"}Diagram wrapper
SVG diyagramlarını ortalamak ve responsive genişlik vermek için .diagram-wrapper kullanın. Diyagramın dışına ayrıca kart, çerçeve veya gölge eklenmez.
fill veya stroke kullanılmaz. Diyagramlar light ve dark temada aynı semantik tokenlarla çalışmalıdır.| Amaç | Token |
|---|---|
| Kart zemini ve kenarı | --svg-box, --svg-stroke |
| Ana ve yardımcı metin | --svg-text, --svg-muted |
| Bağlantı ve ok çizgisi | --svg-line |
| Brand / başarı / uyarı / hata | --svg-brand-s, --svg-ok-s, --svg-warn-s, --svg-err-s |
| Anlamsal renkli zemin | --svg-brand-bg, --svg-ok-bg, --svg-warn-bg, --svg-err-bg |