# DSFR Tasarım Sistemi

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

Klavye ile kullanılabilen tetikleyiciler ve genişletilmiş durumu gösteren geri bildirimle, bağlantılı ve bağımsız bölümleri karşılaştırın.

## DSFR Tasarım Sistemi Tasarım Referansı

Resmî DSFR v1.15 belgeleri ve doğrulanmış @gouvfr/dsfr 1.15.3 paket meta verileri. Bunlar resmî referans değerleridir; nötr önizleme, devletin görsel kimliğini kullanmadan etkileşim yapısını gösterir.

### Resmî tipografi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Primary / supplementary families | Marianne / Spectral | Kurumsal yazı tipleri; geçerli kullanım koşullarına uyulmalıdır. |
| Fallback families | Arial / Georgia | Belgelenmiş ikameler. |
| Standard text | 16px / 24px | fr-text gövde metni stili. |
| Article text | 18px / 28px | fr-text--lg editoryal rolü. |
| H1 mobile → desktop | 32/40px → 40/48px | Yazı tipi boyutu / satır yüksekliği; MD boyutunda değişir. |
### Resmî ızgara

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| SM / MD / LG / XL | 576 / 768 / 992 / 1248px | Belgelenmiş kesme noktası eşikleri. |
| XL content maximum | 1200px | Izgara referansındaki en büyük kapsayıcı genişliği. |
| Optional gutters | 16px small; 24px LG and above | Kod ızgarasında oluklar varsayılan olarak etkin değildir. |
### Boşluklar

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Base progression | Multiples of 4px | Yaygın yerleşim ritmi. |
| Documented exceptions | −6, −2, 2, 6px | Yeni ve keyfî bir ölçek değil, belirli ayarlamalar. |
### Akordeon kuralları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| fr-accordions-group | Linked by default | Birini açmak diğerini kapatır. |
| data-fr-group="false" | Multiple panels may stay open | Açıkça belirtilen bağımsız mod. |
| aria-controls | Matches panel id | Tetikleyici/panel ilişkisi. |
| fr-collapse--expanded | Runtime expanded class | DSFR JavaScript tarafından yönetilir. |
## DSFR Tasarım Sistemi Eksiksiz Rehber

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

## DSFR Tasarım Sistemi Kurumsal kapsam

### Bir devlet kimliği sistemi

> DSFR, Fransız Devleti'nin tasarım sistemidir. Güncel resmî koşullar, .gouv.fr hizmetlerini ve devletin mobil uygulamalarını sistemin amaçlanan kullanım alanı olarak tanımlar; devlet kullanıcıları ve işletmecileriyle dış kuruluşları birbirinden ayırır. Bu, logoyu gizleyerek göz ardı edilebilecek bir dipnot değil, benimsemenin esaslı bir sınırıdır.

Uygun bir ekip, resmî proje onay ve uygulama sürecini izlemelidir. İlgisiz bir ürün, Fransız Devleti kimliğini kullanıyormuş izlenimi vermeden belgelenmiş bilgi mimarisini ve erişilebilirlik yaklaşımını inceleyebilir. Bu sayfadaki önizleme, özgün ve nötr bir akordeon örneğidir: DSFR stillerini, yazı tiplerini veya komut dosyalarını yüklemez.

Destekleyici belirtimi okuyun

## DSFR Tasarım Sistemi Resmî tipografi referansı

### Marianne rolleri ve yedek yazı tipleri

Tipografi belgelerinde sırasıyla Arial ve Georgia yedek yazı tipleriyle birlikte Marianne ve Spectral belirtilir. Standart gövde metni 16px/24px; makale metni 18px/28px boyutundadır. H1 boyutu mobilde 32px/40px, masaüstünde 40px/48px olarak değişir. Bu değerler resmî sistemi tanımlar; örnek ise kendine ait nötr bir tipografi kullanır.

Metin boyutu sınıfları anlamsal başlık düzeylerinin yerini almaz. Sayfa başlığını h1, her akordeon başlığını ise sayfanın yapısına uygun başlık düzeyinde tutun. Belge yapısındaki başlık sırasını atlamak için daha büyük bir görsel stil kullanmayın.

Destekleyici belirtimi okuyun

## DSFR Tasarım Sistemi Izgara ve boşluklandırma

### Duyarlı tasarım eşikleri açıkça tanımlanmıştır

Izgara referansında SM 576px, MD 768px, LG 992px ve XL 1248px olarak tanımlanır. En büyük içerik genişliği 1200px'tir. İsteğe bağlı oluklar küçük boyutlarda 16px, LG boyutundan itibaren 24px'tir. Kod ızgarasında varsayılan olarak oluk bulunmaz; Figma ızgarasını işaretlemeye dönüştürürken bu önemlidir.

Boşluklandırma, belgelenmiş −6px, −2px, 2px ve 6px istisnalarıyla 4px'in katlarına dayanır. Dolayısıyla bir boşluk sınıfı, keyfî ofsetler uydurma izni değil, kontrollü bir sistemi ifade eder. Nötr önizleme, bağımsız tek bir okuma sütunu kullanır ve resmî ızgarayı yeniden oluşturduğunu iddia etmez.

Destekleyici belirtimi okuyun

## DSFR Tasarım Sistemi Akordeon anatomisi

### Başlık, tetikleyici ve kontrol edilen panel

Belgelenen bileşen; section.fr-accordion, heading.fr-accordion__title, button.fr-accordion__btn ve bunu izleyen div.fr-collapse öğelerinden oluşur. Düğmenin aria-controls değeri panelin id değeriyle eşleşmelidir; aria-expanded ise açık olma durumunu belirtir. Başlık düzeyi, sayfanın çevresindeki yapıya göre belirlenir.

Panel, paragraf ve listeler gibi uygun metin öğeleri içerir. Yerel DSFR JavaScript, genişletilmiş sınıfı yönetir; uygun bir uygulama, bileşenle çakışan ikinci ve bağımsız bir tıklama işleyicisi eklememelidir. Nötr önizleme, eğitim amaçlı karşılaştırma için benzer şekilde açıkça tanımlanmış kendi açık/kapalı durumunu uygular.

Destekleyici belirtimi okuyun

## DSFR Tasarım Sistemi Gruplu veya bağımsız

### Grup ayarı davranışı değiştirir

fr-accordions-group varsayılan olarak bağlantılıdır: bir öğeyi açmak, açık olan diğer öğeyi kapatır. data-fr-group="false" ayarı birden fazla panelin açık kalmasına izin verir. Örnek, okuyucunun bu iki modun çapraz başvurulu bilgiler üzerindeki etkisini karşılaştırabilmesi için ikisini de sunar.

Bu ayrım, hazırlık talimatlarında önem taşır. Bir belge listesini kontrol eden kişinin, aynı anda adres panelini de açık tutması gerekebilir. Tek seferde yalnızca bir öğeyi açık bırakan grup yer kazandırır, ancak bağlamı tekrar tekrar gizler. Varsayılanı editoryal bir kural gibi görmek yerine, göreve uygun modu seçin.

Erişilebilirlik sayfası, çalışma zamanı varsayılanından daha ileri gider: bağlantılı gruplar kullanılabilirlik sorunlarına yol açabileceğinden, varsayılan olarak bağımsız gruplar önerir. Bu nedenle örnek, bağımsız modda açılır.

- Bağımsız mod, iki bölümü aynı anda karşılaştırmayı sağlar.

- Bağlantılı mod, ekranda aynı anda yalnızca bir bölümün genişletilmesine izin verir.

- Modlar değiştirilirken aria-expanded durumunun kendi içinde tutarlı kalması gerekir.

Destekleyici belirtimi okuyun

## DSFR Tasarım Sistemi Neler görünür kalmalı?

### Temel adımı gizlemeyin

Bileşen yönergeleri, akordeonların uzun, isteğe bağlı veya yalnızca belirli kişiler için önemli olan içeriklerde kullanılmasını önerir. Her kullanıcının mutlaka okuması gereken bilgileri gizlemek, çok kısa içerikleri akordeon içine koymak, karmaşık kontrolleri iç içe yerleştirmek veya akordeonları modal içine koymak önerilmez.

Bu nedenle örnek, amacını ve kontrollerini görünür tutar. Yalnızca isteğe bağlı oda erişimi notları, ekipman listesi ve varış açıklaması daraltılır. Her başlık farklı bir soruyu ifade eder; açılan içerik ise ikinci bir etkileşimli iş akışı yerine kısa paragraflar ve listelerden oluşur.

1. Temel talimatı akordeonun dışında tutun.

2. Destekleyici materyali keyfî uzunluklara göre değil, okuyucunun sorularına göre bölün.

3. Bir bölümde yalnızca kısa bir yanıt varsa sıradan bir paragraf kullanın.

Destekleyici belirtimi okuyun

## DSFR Tasarım Sistemi Klavye ve durum incelemesi

### Görsel süslemelerden önce yapıyı doğrulayın

Nötr önizlemedeki her tetikleyici gerçek bir düğmedir; bu nedenle Enter ve Boşluk tuşları tarayıcının düğme etkinleştirme davranışını kullanır. Komut dosyası hem aria-expanded değerini hem de kontrol edilen panelin gizli durumunu değiştirir. Panel kapandığında tetikleyiciyi kaldırmaz ve odak etkinleştirilen düğmede kalır.

Mod seçici, bağımsız ve bağlantılı davranışları anında karşılaştırmaya olanak tanır. Küçük ve görünür bir durum göstergesi, açık panelleri listeler; bu, örnekteki bir öğrenme aracıdır, resmî bir DSFR bileşeni değildir. Dar ekranlarda başlıklar satırlara bölünür ve düğmenin tıklama alanı genişliğinin tamamını korur.

Resmî erişilebilirlik sayfasında, koyu temadaki yetersiz hover kontrastları ve ekran okuyucu/tarayıcı duyurularına ilişkin belirli sınırlamalar da belgelenmiştir. Bileşeni değişiklik yapmadan kullanmak erişilebilirliğin eksiksiz olduğu anlamına gelmez; dağıtım yapacağınız sürüm ve ortam için bilinen bu sınırlamaları gözden geçirin.

Destekleyici belirtimi okuyun

## DSFR Tasarım Sistemi Uygun projelerde entegrasyon

### Çekirdek ve bileşen bağımlılıklarını birlikte yükleyin

Resmî kod sayfasında çekirdek ve akordeon CSS bağımlılıklarının yanı sıra çekirdek ve akordeon modül komut dosyaları listelenir. Yüklendikten sonra çalışma zamanı, belgelenmiş işaretlemeyi otomatik olarak geliştirir. Herkese açık API arayüzü, başlangıç tamamlandıktan sonra dsfr(element).collapse.disclose() aracılığıyla bir paneli açabilir.

Sağlanan kurulum girişi, uygun bir kurumsal proje içindir. Kaynak doğrulaması yapılmıştır ancak DSFR çalışma zamanı bağımlılığı bulunmayan bu tarafsız önizlemede çalıştırılmamıştır. Üretim ekipleri, yükseltme yaparken resmî varlık dizini yapısını, bileşen işaretlemesini ve güncel kullanım koşullarını birlikte korumalıdır.

Destekleyici belirtimi okuyun

## DSFR Tasarım Sistemi Bileşen Örnekleri

### Resmî akordeon yapısı

Bağımsız olarak genişletilebilen panellere sahip, uygun projeler için işaretleme örneği.

```
<div class="fr-accordions-group" data-fr-group="false">
  <section class="fr-accordion">
    <h2 class="fr-accordion__title">
      <button type="button" class="fr-accordion__btn"
        aria-expanded="false" aria-controls="documents">
        Documents to prepare
      </button>
    </h2>
    <div id="documents" class="fr-collapse">
      <p>Put the actual supporting-document instructions here.</p>
    </div>
  </section>
</div>
```

Kod referansı

### Programatik açma ve kapatma

Hedef paneli başlatmak için resmî çalışma zamanı başlatıldıktan sonra çağırın.

```
const panel = document.getElementById('documents');
window.dsfr(panel).collapse.disclose();
```

Kod referansı

### Eksiksiz bağımsız örnek

Belgenin tamamı düzeni, denetimleri ve başlatma kodunu içerir. Tam göreli vendor varlıklarını almak için bağlantılı örnek arşivini çıkarın ve HTTP üzerinden sunun.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Accordion structure laboratory</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.6 Arial,sans-serif;color:#28251f;background:#faf9f6}main{max-width:54rem;margin:auto;padding:32px 24px}.notice{background:#eee9df;border-left:4px solid #6b573d;padding:16px}h1{font:700 32px/1.3 Georgia,serif;margin:24px 0}h2{font-size:18px;margin:0}.mode{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:24px 0}select{font:inherit;padding:10px;background:white;border:1px solid #777}section{border-bottom:1px solid #aaa18f}.trigger{font:700 18px/1.5 Arial,sans-serif;border:0;background:transparent;color:inherit;display:flex;justify-content:space-between;gap:16px;text-align:start;padding:20px 8px;width:100%;cursor:pointer}.trigger::after{content:'+'}.trigger[aria-expanded=true]::after{content:'−'}.panel{padding:0 24px 24px}.panel p{margin-top:0}:focus-visible{outline:3px solid #6b573d;outline-offset:3px}#state{font-size:14px;background:#eee9df;padding:12px;margin-top:24px}small{display:block;margin-top:24px;color:#625a4e;font-size:14px}[hidden]{display:none!important}@media(max-width:600px){main{padding:24px 16px}h1{font-size:28px}.panel{padding-inline:8px}}</style><main><div class="notice">Neutral interaction study · No DSFR visual identity or assets</div><h1>Prepare for a community workshop</h1><p>The purpose and main instruction stay visible: arrive with your booking note. Optional supporting details can be opened below.</p><div class="mode"><label for="mode">Panel behaviour</label><select id="mode"><option value="independent">Independent: compare sections</option><option value="linked">Linked: one section at a time</option></select></div><div id="group"><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="access">Room access</button></h2><div class="panel" id="access" hidden><p>The fictional workshop room is reached from the courtyard. The step-free entrance is on the same level as the activity room.</p><p>Ask the example welcome desk for assistance if the courtyard route is unavailable. These are demonstration instructions, not a real venue guide.</p></div></section><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="equipment">Equipment to bring</button></h2><div class="panel" id="equipment" hidden><p>The example workshop uses simple paper materials. Bring the following if convenient:</p><ul><li>A notebook for your own observations.</li><li>A pencil or pen you can use comfortably.</li><li>Your fictional booking reference.</li></ul></div></section><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="arrival">What happens on arrival</button></h2><div class="panel" id="arrival" hidden><p>The example facilitator explains the activity before participants choose a seat. No personal information is collected by this demonstration.</p><p>Keep this panel open with the equipment list to compare the two instructions in independent mode.</p></div></section></div><p id="state" role="status">Open sections: none</p><small>Original OpenDesign educational specimen. DSFR documentation informs the structural comparison; this is not a government service or native DSFR rendering.</small></main><script>const buttons=[...document.querySelectorAll('.trigger')],mode=document.querySelector('#mode');function set(b,open){b.setAttribute('aria-expanded',String(open));document.getElementById(b.getAttribute('aria-controls')).hidden=!open}function announce(){const names=buttons.filter(b=>b.getAttribute('aria-expanded')==='true').map(b=>b.textContent);document.querySelector('#state').textContent='Open sections: '+(names.join(', ')||'none')}buttons.forEach(b=>b.onclick=()=>{const open=b.getAttribute('aria-expanded')!=='true';if(open&&mode.value==='linked')buttons.forEach(x=>set(x,false));set(b,open);announce()});mode.onchange=()=>{if(mode.value==='linked'){let retained=false;buttons.forEach(b=>{if(b.getAttribute('aria-expanded')==='true'){if(retained)set(b,false);retained=true}})}announce()};</script></html>
```

Kod referansı

- Eksiksiz örneği Kaynaklar bölümünden indirin. README dosyasında tam yerel başlatma komutu bulunur.

- Vendor yollarını bu belgeye göreli tutun; arşiv, bu önizlemenin kullandığı tüm varlıkları içerir.

## DSFR Tasarım Sistemi Aracı Kurulumu

### Uygulamaya Başlangıç Noktası

Kaynak doğrulaması yapılmış, uygun projelere yönelik kurulum; tarafsız önizlemede çalıştırılmaz. Kurumsal kullanım kapsamını ve güncel resmî koşulları koruyun. Bağımlı varlıkların göreli yollarını korumak için dist dizinini kopyalayın. Sources bölümündeki eksiksiz çalışan örnek ZIP dosyası, tam önizleme bağımlılıklarını ve belgenin tamamını da içerir. Dosyayı çıkarın, bu dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/dsfr.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.

```
# For a project within the documented DSFR institutional scope:
npm install @gouvfr/dsfr@1.15.3
# Copy node_modules/@gouvfr/dsfr/dist to your public asset directory.
# In <head>:
# <link rel="stylesheet" href="/dsfr/core/core.min.css">
# <link rel="stylesheet" href="/dsfr/component/accordion/accordion.min.css">
# Before </body>:
# <script type="module" src="/dsfr/core/core.module.min.js"></script>
# <script type="module" src="/dsfr/component/accordion/accordion.module.min.js"></script>
```

### Projeniz İçin Bir İstem

```
DSFR akordeon yapısını ve kullanım kapsamını açıklayın. Uygun bir devlet projesinde fr-accordion, fr-accordion__title, fr-accordion__btn ve eşleşen id/aria-controls değerleriyle fr-collapse kullanın; core ve accordion varlıklarını ekleyin. Karşılaştırmalar için birden fazla bölümün açık kalması gerekiyorsa data-fr-group=false ayarını kullanın. Bağımsız bir eğitim amaçlı önizlemede özgün, tarafsız bir stil kullanın ve bunun yapısal bir yorum olduğunu açıkça belirtin; devlet kimliği yazı tiplerini yüklemeyin veya hizmetin resmî olduğunu iddia etmeyin.
```

## DSFR Tasarım Sistemi Kaynakları ve Kapsamı

DSFR için belgelenmiş bir kurumsal kullanım kapsamı vardır. Bu sayfa teknik bir başvuru kaynağıdır; özgün ve tarafsız önizlemesi bir Fransız devlet hizmeti veya DSFR markalı bir uygulama değildir.

- DSFR genel bakış Resmî sistem giriş noktası ve kaynak kategorileri.

- Uygulama kapsamı Hangi kuruluşların DSFR kullanabileceğini belirleyen resmî kurallar.

- Temel ilkeler Temel tasarım ve kimlik yönergeleri.

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

## DSFR Tasarım Sistemi İlgili Kaynaklar

### Europa Component Library

Klavye kullanımı, tümünü açma davranışı ve JavaScript olmadığında okunabilir yedek davranış da dahil olmak üzere eksiksiz bir yerel akordeon özeti üzerinden Europa’nın EC renk, tipografi ve boşluk rollerini inceleyin.

### gov.cz tasarım sistemi

Altı kaynaklı eksiksiz bir okuma araç takımı üzerinden Gov Design System CE’nin gerçek renk rollerini, kart yuvalarını ve yerel sayfalandırmasını; ayrıca açık odak ve sayfa durumlarını inceleyin.

### GOV.UK tasarım sistemi

Güncel v6 yazı tipi ölçeği, duyarlı boşluklar, işlevsel renkler, bağlantılı doğrulama ve somut Frontend entegrasyonuyla GOV.UK tarzı bir soru yanıtlama ve cevapları kontrol etme akışı oluşturun.


- [Uygulama başvurusu](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon)
- [Kaynak](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/typographie)
- [Kaynak](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/grille-et-points-de-rupture)
- [Kaynak](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/espacement)
- [Kaynak](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon)
- [Destekleyici belirtimi okuyun](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon)
- [Destekleyici belirtimi okuyun](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/typographie)
- [Destekleyici belirtimi okuyun](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/grille-et-points-de-rupture)
- [Destekleyici belirtimi okuyun](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon)
- [Destekleyici belirtimi okuyun](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/accessibilite-de-l-accordeon)
- [Kod referansı](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon)
- [DSFR genel bakış Resmî sistem giriş noktası ve kaynak kategorileri.](https://www.systeme-de-design.gouv.fr/version-courante/fr)
- [Uygulama kapsamı Hangi kuruluşların DSFR kullanabileceğini belirleyen resmî kurallar.](https://www.systeme-de-design.gouv.fr/version-courante/fr/premiers-pas/perimetre-d-application)
- [Temel ilkeler Temel tasarım ve kimlik yönergeleri.](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux)