Bileşenler · A’dan Z’ye

Bileşenler, A’dan Z’ye.

Her bileşen canlı bir demo, kopyalanabilir HTML ve sınıf tablosuyla gelir. Demo neyse kod da odur.

01Accordion#

Yerleşik <details> öğesiyle çalışır; JS gerekmez, klavye ve ekran okuyucu desteği hazırdır.

Kurulum zor mu?

Hayır. Bir CSS ve bir JS dosyası eklemen yeterli.

Bootstrap ile çakışır mı?

Tüm sınıflar fk- önekli olduğu için çakışmaz.

Ücretli mi?

MIT lisanslı, tamamen ücretsiz.

HTML

<div class="fk-accordion" style="width:100%">
  <details open><summary>Kurulum zor mu?</summary><div>Hayır. Bir CSS ve bir JS dosyası eklemen yeterli.</div></details>
  <details><summary>Bootstrap ile çakışır mı?</summary><div>Tüm sınıflar fk- önekli olduğu için çakışmaz.</div></details>
  <details><summary>Ücretli mi?</summary><div>MIT lisanslı, tamamen ücretsiz.</div></details>
</div>

Sınıf / öznitelik	Açıklama
`fk-accordion`	Kapsayıcı; içine `<details><summary>` yerleştir
`details[open]`	Açık başlar

02Alert (uyarı kutusu)#

Bilgi

Yeni sürüm yayında.

Kaydedildi

Değişiklikler başarıyla saklandı.

Dikkat

Kotanın %90’ı doldu.

Hata

Sunucuya bağlanılamadı.

HTML

<div class="demo-stack">
  <div class="fk-alert"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg><div><strong>Bilgi</strong><p>Yeni sürüm yayında.</p></div></div>
  <div class="fk-alert fk-alert-success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m8 12.5 2.8 2.8L16 10"/></svg><div><strong>Kaydedildi</strong><p>Değişiklikler başarıyla saklandı.</p></div></div>
  <div class="fk-alert fk-alert-warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 2 20h20L12 3Z"/><path d="M12 10v4M12 17h.01"/></svg><div><strong>Dikkat</strong><p>Kotanın %90’ı doldu.</p></div></div>
  <div class="fk-alert fk-alert-danger" role="alert"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m15 9-6 6M9 9l6 6"/></svg><div><strong>Hata</strong><p>Sunucuya bağlanılamadı.</p></div></div>
</div>

Sınıf / öznitelik	Açıklama
`fk-alert`	Nötr bilgi kutusu
`fk-alert-success / -warning / -danger`	Durum renkleri
`role="alert"`	Önemli hatalarda ekran okuyucuya hemen okutur

03Avatar#

FK FK FK

ABC

HTML

<div class="demo-row">
  <span class="fk-avatar fk-avatar-sm">FK</span>
  <span class="fk-avatar">FK</span>
  <span class="fk-avatar fk-avatar-lg">FK</span>
  <div class="fk-avatars"><span class="fk-avatar">A</span><span class="fk-avatar">B</span><span class="fk-avatar">C</span></div>
</div>

Sınıf / öznitelik	Açıklama
`fk-avatar`	44px yuvarlak; içine baş harfler ya da `<img>`
`fk-avatar-sm / -lg`	32px / 64px
`fk-avatars`	Üst üste binen avatar grubu

04Badge (rozet)#

Taslak Yeni Aktif Bekliyor Engellendi

HTML

<div class="demo-row">
  <span class="fk-badge">Taslak</span>
  <span class="fk-badge fk-badge-solid">Yeni</span>
  <span class="fk-badge fk-badge-success">Aktif</span>
  <span class="fk-badge fk-badge-warning">Bekliyor</span>
  <span class="fk-badge fk-badge-danger">Engellendi</span>
</div>

Sınıf / öznitelik	Açıklama
`fk-badge`	Küçük mono etiket
`fk-badge-solid`	Dolu siyah
`fk-badge-success / -warning / -danger`	Durum

Sayfanın en üstünde duyuru. data-fk-dismiss verilen şerit kapatıldığında tarayıcı bunu hatırlar ve bir daha göstermez.

HTML

<div class="fk-banner" data-fk-dismiss="demo-v241" style="width:100%;border-radius:16px">
  <span><b>v2.4.1</b> yayında: tooltip, drawer, OTP ve CDN. <a href="/surumler/">Neler yeni?</a></span>
  <button type="button" class="fk-banner-x" aria-label="Duyuruyu kapat">&times;</button>
</div>

Sınıf / öznitelik	Açıklama
`fk-banner`	Ters renkli, ortalanmış şerit
`data-fk-dismiss="anahtar"`	Kapatılınca `localStorage`’a yazar; anahtarı değiştirince yeniden görünür
`fk-banner-x`	Kapatma düğmesi

Sayfanın sitedeki yerini gösterir. <ol> ile kurulur; son öğe aria-current="page" taşır.

HTML

<nav class="fk-crumbs fk-glass" aria-label="Örnek sayfa yolu">
  <ol>
    <li><a href="/"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg><span>Ana Sayfa</span></a></li>
    <li class="fk-sep" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></li>
    <li><a href="/bilesenler/">Bileşenler</a></li>
    <li class="fk-sep" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></li>
    <li><span aria-current="page">Breadcrumb</span></li>
  </ol>
</nav>

SEO ipucuBreadcrumb’ı JSON-LD BreadcrumbList ile de işaretle; Google arama sonuçlarında sayfa yolunu gösterir. Örnek için SEO bölümüne bak.

07Button (buton)#

Üzerine gelince içi dalga gibi dolar. Hem <button> hem <a> ile kullanılabilir.

HTML

<div class="demo-stack" style="align-items:center">
  <div class="demo-row">
    <button type="button" class="fk-btn fk-btn-primary">Birincil <svg class="fk-go" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>
    <button type="button" class="fk-btn fk-btn-ghost">Cam</button>
    <button type="button" class="fk-btn fk-btn-text">Metin</button>
    <button type="button" class="fk-btn fk-btn-danger">Sil</button>
  </div>
  <div class="demo-row">
    <button type="button" class="fk-btn fk-btn-primary fk-btn-sm">Küçük</button>
    <button type="button" class="fk-btn fk-btn-primary fk-btn-lg">Büyük</button>
    <button type="button" class="fk-btn fk-btn-icon" aria-label="Ara"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></button>
    <button type="button" class="fk-btn fk-btn-primary is-loading">Yükleniyor</button>
    <button type="button" class="fk-btn fk-btn-primary" disabled>Pasif</button>
  </div>
</div>

Sınıf / öznitelik	Açıklama
`fk-btn`	Temel buton (her zaman gerekli)
`fk-btn-primary / -ghost / -text / -danger`	Görünüm
`fk-btn-sm / -lg / -block`	Boyut / tam genişlik
`fk-btn-icon`	Yalnızca ikon; `aria-label` zorunlu
`is-loading`	Dönen gösterge, tıklamayı kapatır
`data-fk-magnetic`	Fare yaklaşınca butonu hafifçe çeker
`svg.fk-go`	Üzerine gelince sağa kayan ok

08Button group (buton grubu)#

HTML

<div class="demo-row">
  <div class="fk-btn-group" role="group" aria-label="Görünüm">
    <button type="button" class="fk-btn fk-btn-text"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>Izgara</button>
    <button type="button" class="fk-btn fk-btn-text"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h18l-7 8v6l-4 2v-8L3 5Z"/></svg>Liste</button>
    <button type="button" class="fk-btn fk-btn-text"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg>Grafik</button>
  </div>
</div>

Sınıf / öznitelik	Açıklama
`fk-btn-group`	Butonları tek kapsül içinde birleştirir
`role="group" + aria-label`	Ekran okuyucuya grubun adını söyler

09Card (kart)#

01 · Cam

Varsayılan

Liquid Glass yüzey, fare ışığı.

02 · Bağlantı

Tıklanabilir

Üzerine gelince yükselir.

03 · Koyu

Ters

Vurgu için ters renk.

HTML

<div class="fk-grid fk-g-3" style="width:100%">
  <article class="fk-card"><span class="fk-card-num">01 · Cam</span><h3 class="fk-card-title">Varsayılan</h3><p>Liquid Glass yüzey, fare ışığı.</p></article>
  <a class="fk-card" href="#card"><span class="fk-card-num">02 · Bağlantı</span><h3 class="fk-card-title">Tıklanabilir</h3><p>Üzerine gelince yükselir.</p></a>
  <article class="fk-card fk-card-dark"><span class="fk-card-num">03 · Koyu</span><h3 class="fk-card-title">Ters</h3><p>Vurgu için ters renk.</p></article>
</div>

Sınıf / öznitelik	Açıklama
`fk-card`	Cam kart; fare imlecini takip eden ışık JS ile gelir
`a.fk-card`	Bağlantı kartı, hover’da yükselir
`fk-card-solid`	Opak yüzey (cam yok)
`fk-card-dark`	Ters renkli kart
`fk-card-num / fk-card-title`	Üst etiket / serif başlık

10Code (kod bloğu ve kısayol)#

Aramak için Ctrl + K, değişken: --fk-ink

const merhaba = "fkdev";

HTML

<div class="demo-stack">
  <p style="margin:0">Aramak için <kbd class="fk-kbd">Ctrl</kbd> + <kbd class="fk-kbd">K</kbd>, değişken: <code class="fk-code-inline">--fk-ink</code></p>
  <pre class="fk-code"><code>const merhaba = "fkdev";</code></pre>
</div>

Sınıf / öznitelik	Açıklama
`fk-code`	Koyu kod bloğu (`<pre>`)
`fk-code-inline`	Satır içi kod
`fk-kbd`	Klavye tuşu

11Confirm (onay penceresi)#

Tek satır JS ile Promise döndüren onay penceresi. Ekstra HTML yazmana gerek yok; tarayıcının çirkin confirm() kutusunun yerini alır.

HTML

<button type="button" class="fk-btn fk-btn-danger" id="demo-confirm"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg>Dosyayı sil</button>

JavaScript

document.getElementById('demo-confirm').addEventListener('click', async () => {
  const ok = await FK.confirm({
    title: 'Dosya silinsin mi?',
    text: 'proje.zip kalıcı olarak silinecek. Bu işlem geri alınamaz.',
    ok: 'Evet, sil',
    cancel: 'Vazgeç',
    danger: true
  });
  FK.toast(ok ? 'Dosya silindi' : 'İşlem iptal edildi', ok ? 'success' : 'info');
});

Seçenek	Varsayılan	Açıklama
`title`	“Emin misin?”	Başlık
`text`	—	Açıklama metni
`ok` / `cancel`	“Onayla” / “Vazgeç”	Buton yazıları
`danger`	`false`	Onay butonunu kırmızı yapar

12Description list (tanım listesi)#

Paket: fkdev UI
Sürüm: 2.4.1
Lisans: MIT
Boyut: 10,4 KB CSS · 6,0 KB JS (brotli)

HTML

<dl class="fk-dl" style="width:100%">
  <dt>Paket</dt><dd>fkdev UI</dd>
  <dt>Sürüm</dt><dd>2.4.1</dd>
  <dt>Lisans</dt><dd>MIT</dd>
  <dt>Boyut</dt><dd>10,4 KB CSS · 6,0 KB JS (brotli)</dd>
</dl>

Profil, sipariş özeti ve ayar sayfaları için. Telefonda etiket değerin üstüne geçer.

13Divider (ayraç)#

HTML

<div class="demo-stack">
  <div class="fk-divider" aria-hidden="true"><i></i><b></b><i></i></div>
  <hr class="fk-hr">
</div>

Sınıf / öznitelik	Açıklama
`fk-divider`	Ortada elmas olan simetrik ayraç
`fk-hr`	Kenarlara doğru solan ince çizgi

14Drawer (yan panel)#

Kenardan kayarak açılan panel: filtreler, sepet, ayarlar ve mobil menü için. Modal ile aynı data-fk-open / data-fk-close özniteliklerini kullanır.

HTML

<div class="demo-row">
  <button type="button" class="fk-btn fk-btn-primary" data-fk-open="#demo-drawer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h18l-7 8v6l-4 2v-8L3 5Z"/></svg>Filtreleri aç</button>
  <button type="button" class="fk-btn fk-btn-ghost" data-fk-open="#demo-drawer-l"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h16M4 16h16"/></svg>Soldan aç</button>
</div>
<dialog class="fk-drawer" id="demo-drawer" aria-labelledby="demo-drawer-t">
  <div class="fk-modal-head"><h3 class="fk-h3" id="demo-drawer-t">Filtreler</h3><button type="button" class="fk-btn fk-btn-icon" data-fk-close aria-label="Kapat"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></div>
  <div class="fk-modal-body fk-stack">
    <label class="fk-check"><input type="checkbox" checked> Yalnızca yeni dosyalar</label>
    <label class="fk-check"><input type="checkbox"> Şüpheli olarak işaretlenenler</label>
    <label class="fk-switch"><input type="checkbox" role="switch"> Arşivi göster</label>
  </div>
  <div class="fk-modal-foot"><button type="button" class="fk-btn fk-btn-ghost" data-fk-close>Temizle</button><button type="button" class="fk-btn fk-btn-primary" data-fk-close>Uygula</button></div>
</dialog>
<dialog class="fk-drawer fk-drawer-left" id="demo-drawer-l" aria-labelledby="demo-drawer-l-t">
  <div class="fk-modal-head"><h3 class="fk-h3" id="demo-drawer-l-t">Menü</h3><button type="button" class="fk-btn fk-btn-icon" data-fk-close aria-label="Kapat"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></div>
  <div class="fk-modal-body"><ul class="fk-list"><li>Genel bakış</li><li>Dosyalar</li><li>Ayarlar</li></ul></div>
</dialog>

Sınıf / öznitelik	Açıklama
`dialog.fk-drawer`	Sağdan açılan panel
`fk-drawer-left`	Soldan açılır
`data-fk-open="#id"`	Açar
`data-fk-close`	Kapatır; Esc ve arka plana tıklama da kapatır

HTML

<details class="fk-dropdown">
  <summary class="fk-btn fk-btn-ghost">Seçenekler <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></summary>
  <div class="fk-dropdown-menu">
    <a href="#dropdown"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16v4Z"/><path d="m13 7 4 4"/></svg>Düzenle</a>
    <a href="#dropdown"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2.5"/><path d="M15 9V6.5A2.5 2.5 0 0 0 12.5 4h-6A2.5 2.5 0 0 0 4 6.5v6A2.5 2.5 0 0 0 6.5 15H9"/></svg>Kopyala</a>
    <hr>
    <button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg>Sil</button>
  </div>
</details>

Sınıf / öznitelik	Açıklama
`details.fk-dropdown`	JS’siz açılır menü
`fk-dropdown-menu`	Cam menü paneli

16Empty state (boş durum)#

Henüz dosya yok

İlk dosyanı yükle; burada listelenecek.

HTML

<div class="fk-empty" style="width:100%">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2.5h8.5A1.5 1.5 0 0 1 21 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5v-12Z"/></svg>
  <strong>Henüz dosya yok</strong>
  <p>İlk dosyanı yükle; burada listelenecek.</p>
  <button type="button" class="fk-btn fk-btn-primary fk-btn-sm"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16V4M6 9l6-6 6 6M4 20h16"/></svg>Dosya yükle</button>
</div>

17Eyebrow ve pill#

Canlı Yazılımcı Stratejist

HTML

<div class="demo-row">
  <span class="fk-eyebrow fk-glass"><span class="fk-dot"></span>Canlı</span>
  <span class="fk-pill fk-glass">Yazılımcı</span>
  <span class="fk-pill fk-glass">Stratejist</span>
</div>

Sınıf / öznitelik	Açıklama
`fk-eyebrow`	Başlık üstü mono etiket
`fk-dot`	Yanıp sönen nokta
`fk-pill`	Hover’da dolan hap

18List (liste)#

TypeScript & React İleri
Node.js İleri
PHP Orta

HTML

<ul class="fk-list" style="width:100%">
  <li>TypeScript &amp; React <span class="fk-badge">İleri</span></li>
  <li>Node.js <span class="fk-badge">İleri</span></li>
  <li>PHP <span class="fk-badge">Orta</span></li>
</ul>

19Loader (yükleniyor)#

Yükleniyor…

HTML

<div class="demo-stack">
  <div class="demo-row"><span class="fk-spinner" role="status" aria-label="Yükleniyor"></span><span class="fk-muted">Yükleniyor…</span></div>
  <div class="fk-progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" style="--v:.64"><i></i></div>
  <div class="fk-progress fk-progress-indeterminate"><i></i></div>
  <span class="fk-skeleton" style="height:16px;width:70%"></span>
  <span class="fk-skeleton" style="height:16px;width:45%"></span>
</div>

Sınıf / öznitelik	Açıklama
`fk-spinner`	Dönen halka
`fk-progress + --v`	İlerleme çubuğu; `--v` 0–1 arası
`fk-progress-indeterminate`	Süresi belirsiz işlem
`fk-skeleton`	İçerik yüklenirken gri iskelet

Yerleşik <dialog> öğesini kullanır: odak tuzağı, Esc ile kapanma ve arka plan bulanıklığı hazırdır.

HTML

<button type="button" class="fk-btn fk-btn-primary" data-fk-open="#demo-modal">Modalı aç</button>
<dialog class="fk-modal" id="demo-modal" aria-labelledby="demo-modal-t">
  <div class="fk-modal-head"><h3 class="fk-h3" id="demo-modal-t">Emin misin?</h3><button type="button" class="fk-btn fk-btn-icon" data-fk-close aria-label="Kapat"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></div>
  <div class="fk-modal-body"><p>Bu dosya kalıcı olarak silinecek.</p></div>
  <div class="fk-modal-foot"><button type="button" class="fk-btn fk-btn-ghost" data-fk-close>Vazgeç</button><button type="button" class="fk-btn fk-btn-danger" data-fk-close>Sil</button></div>
</dialog>

Sınıf / öznitelik	Açıklama
`dialog.fk-modal`	Modal penceresi
`data-fk-open="#id"`	Tıklayınca o modalı açar
`data-fk-close`	Modalı kapatır
`fk-modal-head / -body / -foot`	Bölümler

fkdev.sbs’teki yüzen cam header. Ortadaki fk-tabsbar fareyi takip eden siyah bir hap göstergesine sahiptir.

HTML

<header class="fk-navbar" style="position:relative;top:0;padding:0;width:100%">
  <div class="fk-navbar-in fk-glass">
    <a class="fk-brand" href="#navbar"><b>Furkan <i>Kırcı</i></b></a>
    <nav class="fk-tabsbar" aria-label="Demo menü"><span class="fk-tabsbar-ind" aria-hidden="true"></span><a href="#navbar" aria-current="page">Özet</a><a href="#navbar">Deneyim</a><a href="#navbar">İletişim</a></nav>
    <div class="fk-navbar-tools"><a class="fk-btn fk-btn-primary fk-btn-sm" href="#navbar">Konuşalım</a></div>
  </div>
</header>

Sınıf / öznitelik	Açıklama
`fk-navbar`	Yapışkan kapsayıcı
`fk-navbar-in`	3 sütunlu (sol-orta-sağ) simetrik iç düzen
`fk-tabsbar + fk-tabsbar-ind`	Kayan gösterge; `aria-current="page"` olanın altında durur
`fk-brand`	Serif marka

22Notification count (bildirim sayacı)#

HTML

<div class="demo-row">
  <button type="button" class="fk-btn fk-btn-icon fk-notif" data-count="3" aria-label="Bildirimler, 3 okunmamış"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 0 0 3.4 0"/></svg></button>
  <button type="button" class="fk-btn fk-btn-icon fk-notif" data-count="12" aria-label="Mesajlar, 12 okunmamış"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="3"/><path d="m4 7 8 6 8-6"/></svg></button>
  <button type="button" class="fk-btn fk-btn-icon fk-notif" data-count="0" aria-label="Görevler"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></button>
</div>

Sınıf / öznitelik	Açıklama
`fk-notif + data-count`	Sağ üstte kırmızı sayaç; `0` ise gizlenir
`aria-label`	Sayıyı ekran okuyucu için de yaz

23Pagination (sayfalama)#

HTML

<nav class="fk-pagination" aria-label="Sayfalar">
  <a href="#pagination" aria-label="Önceki">←</a>
  <a href="#pagination">1</a>
  <span aria-current="page">2</span>
  <a href="#pagination">3</a>
  <span>…</span>
  <a href="#pagination">12</a>
  <a href="#pagination" aria-label="Sonraki">→</a>
</nav>

24Pricing (fiyat kartı)#

Başlangıç

₺0 / ay

Tüm bileşenler
CDN erişimi
MIT lisansı

Başla

Stüdyo · önerilen

₺490 / ay

Özel tema tokenları
Öncelikli destek
Panel şablonları

Seç

Kurumsal

Teklif

Kurulum ve entegrasyon
Eğitim
SLA

Görüşelim

HTML

<div class="fk-grid fk-g-3" style="width:100%">
  <article class="fk-card fk-price"><span class="fk-card-num">Başlangıç</span><div class="fk-price-amount">₺0<small> / ay</small></div><ul><li>Tüm bileşenler</li><li>CDN erişimi</li><li>MIT lisansı</li></ul><a class="fk-btn fk-btn-ghost fk-btn-block" href="/baslangic/">Başla</a></article>
  <article class="fk-card fk-card-dark fk-price"><span class="fk-card-num">Stüdyo · önerilen</span><div class="fk-price-amount">₺490<small> / ay</small></div><ul><li>Özel tema tokenları</li><li>Öncelikli destek</li><li>Panel şablonları</li></ul><a class="fk-btn fk-btn-primary fk-btn-block" href="/kaliplar/" style="background:var(--fk-inv-text);color:var(--fk-inv-bg)">Seç</a></article>
  <article class="fk-card fk-price"><span class="fk-card-num">Kurumsal</span><div class="fk-price-amount">Teklif</div><ul><li>Kurulum ve entegrasyon</li><li>Eğitim</li><li>SLA</li></ul><a class="fk-btn fk-btn-ghost fk-btn-block" href="https://www.fkdev.sbs/iletisim/">Görüşelim</a></article>
</div>

Fiyatlar örnektir.

Sınıf / öznitelik	Açıklama
`fk-price`	Kartın içini dikey dizer (fk-card ile birlikte)
`fk-price-amount`	Büyük serif fiyat; `<small>` dönem
`fk-price ul`	Onay işaretli özellik listesi

25Progress ring (halka)#

72%

40%

✓

HTML

<div class="demo-row">
  <div class="fk-ring fk-reveal" data-fk-value=".72" role="img" aria-label="Depolama yüzde 72 dolu"><span>72%</span></div>
  <div class="fk-ring" style="--v:.4;--size:64px" role="img" aria-label="Yüzde 40"><span>40%</span></div>
  <div class="fk-ring" style="--v:1;--size:120px" role="img" aria-label="Tamamlandı"><span>✓</span></div>
</div>

Sınıf / öznitelik	Açıklama
`fk-ring + --v`	Doluluk 0–1 arası
`--size`	Çap (varsayılan 88px)
`data-fk-value`	Ekrana girince 0’dan bu değere dolar

26Quote (alıntı)#

Mükemmeli arayan göz, mükemmeli üretir.
Sevgiyle, F.K.

HTML

<blockquote class="fk-quote">
  <p>Mükemmeli arayan göz, mükemmeli üretir.</p>
  <cite>Sevgiyle, F.K.</cite>
</blockquote>

27Read bar (okuma çubuğu)#

Sayfanın en üstünde, ne kadar okunduğunu gösteren ince çizgi. Body’nin başına bir kez koy.

HTML

<div class="fk-readbar" aria-hidden="true"></div>

Bu sayfanın tepesindeki ince çizgi tam olarak bu bileşen.

28Segmented control (segment)#

Radyo düğmeleriyle çalışan, JS gerektirmeyen seçim kapsülü. Klavyede ok tuşlarıyla gezilir.

Aylık Yıllık Ömür boyu

HTML

<div class="fk-segment" role="radiogroup" aria-label="Fatura dönemi">
  <label><input type="radio" name="donem" checked><span>Aylık</span></label>
  <label><input type="radio" name="donem"><span>Yıllık</span></label>
  <label><input type="radio" name="donem"><span>Ömür boyu</span></label>
</div>

Sınıf / öznitelik	Açıklama
`fk-segment`	Kapsül; içinde `label > input[type=radio] + span`
`role="radiogroup"`	Grubun adını `aria-label` ile ver

29Stats (sayılar)#

4Eksen

20Yetkinlik

6Ülke

1Canlı ürün

HTML

<div class="fk-stats fk-glass" style="width:100%">
  <div><strong data-fk-count="4">4</strong><span>Eksen</span></div>
  <div><strong data-fk-count="20">20</strong><span>Yetkinlik</span></div>
  <div><strong data-fk-count="6">6</strong><span>Ülke</span></div>
  <div><strong data-fk-count="1">1</strong><span>Canlı ürün</span></div>
</div>

Sınıf / öznitelik	Açıklama
`fk-stats`	4 eşit sütun; telefonda 2×2
`data-fk-count="20"`	Ekrana girince 0’dan sayar

30Status (durum noktası)#

Çevrimiçi Meşgul Kapalı Bilinmiyor

HTML

<div class="demo-row">
  <span class="fk-status is-online">Çevrimiçi</span>
  <span class="fk-status is-busy">Meşgul</span>
  <span class="fk-status is-offline">Kapalı</span>
  <span class="fk-status">Bilinmiyor</span>
</div>

31Steps (adımlar)#

Bilgiler
Dosya
Onay

HTML

<ol class="fk-steps" style="width:100%">
  <li class="is-done">Bilgiler</li>
  <li class="is-active">Dosya</li>
  <li>Onay</li>
</ol>

32Table (tablo)#

Dosya	Boyut	Durum
proje.zip	12,4 MB	Yüklendi
brif.pdf	1,1 MB	İnceleniyor

HTML

<div class="fk-table-wrap" style="width:100%">
  <table class="fk-table">
    <thead><tr><th scope="col">Dosya</th><th scope="col">Boyut</th><th scope="col">Durum</th><th scope="col"></th></tr></thead>
    <tbody>
      <tr><td><strong>proje.zip</strong></td><td>12,4 MB</td><td><span class="fk-badge fk-badge-success">Yüklendi</span></td><td><button type="button" class="fk-btn fk-btn-icon" aria-label="İndir"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v12M6 11l6 6 6-6M5 20h14"/></svg></button></td></tr>
      <tr><td><strong>brif.pdf</strong></td><td>1,1 MB</td><td><span class="fk-badge fk-badge-warning">İnceleniyor</span></td><td><button type="button" class="fk-btn fk-btn-icon" aria-label="İndir"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v12M6 11l6 6 6-6M5 20h14"/></svg></button></td></tr>
    </tbody>
  </table>
</div>

Sınıf / öznitelik	Açıklama
`fk-table-wrap`	Taşarsa yatay kaydırır, köşeleri yuvarlar
`fk-table`	Tablo stili; satır hover’ı dahil

Sıralanabilir tablo

Tabloya data-fk-sort ekle; başlıklara tıklayınca sıralanır. Sayılar ve tarihler için başlığa data-fk-type="number" / "date" ver; hücrede ham değer gerekiyorsa data-value kullan.

Dosya	Boyut	Tarih	Yükleyen
proje.zip	12,4 MB	21 Eki	Ali Y.
brif.pdf	1,1 MB	24 Eki	Zeynep A.
logo.ai	4,8 MB	2 Eki	Mehmet D.
sunum.key	88 MB	30 Eyl	Ayşe K.

HTML

<div class="fk-table-wrap" style="width:100%">
  <table class="fk-table" data-fk-sort>
    <thead><tr><th scope="col">Dosya</th><th scope="col" data-fk-type="number">Boyut</th><th scope="col" data-fk-type="date">Tarih</th><th scope="col">Yükleyen</th></tr></thead>
    <tbody>
      <tr><td><strong>proje.zip</strong></td><td data-value="12.4">12,4 MB</td><td data-value="2026-10-21">21 Eki</td><td>Ali Y.</td></tr>
      <tr><td><strong>brif.pdf</strong></td><td data-value="1.1">1,1 MB</td><td data-value="2026-10-24">24 Eki</td><td>Zeynep A.</td></tr>
      <tr><td><strong>logo.ai</strong></td><td data-value="4.8">4,8 MB</td><td data-value="2026-10-02">2 Eki</td><td>Mehmet D.</td></tr>
      <tr><td><strong>sunum.key</strong></td><td data-value="88">88 MB</td><td data-value="2026-09-30">30 Eyl</td><td>Ayşe K.</td></tr>
    </tbody>
  </table>
</div>

JavaScriptSıralama olayı

document.querySelector('table').addEventListener('fk:sort', (e) => console.log(e.detail.column, e.detail.direction));

33Tabs (sekmeler)#

Ok tuşlarıyla gezilebilen, ARIA uyumlu sekmeler.

Saf HTML ile CDN bağlantısı yeterli.

PHP’de header/footer’ı include et.

Express ile statik klasörden sun.

HTML

<div data-fk-tabs style="width:100%">
  <div class="fk-tabsbar" role="tablist" aria-label="Kod dili">
    <span class="fk-tabsbar-ind" aria-hidden="true"></span>
    <button type="button" role="tab" id="t-html" aria-controls="p-html" aria-selected="true">HTML</button>
    <button type="button" role="tab" id="t-php" aria-controls="p-php" aria-selected="false">PHP</button>
    <button type="button" role="tab" id="t-node" aria-controls="p-node" aria-selected="false">Node.js</button>
  </div>
  <div class="fk-tabs-panel is-active" id="p-html" role="tabpanel" aria-labelledby="t-html">Saf HTML ile CDN bağlantısı yeterli.</div>
  <div class="fk-tabs-panel" id="p-php" role="tabpanel" aria-labelledby="t-php">PHP’de header/footer’ı include et.</div>
  <div class="fk-tabs-panel" id="p-node" role="tabpanel" aria-labelledby="t-node">Express ile statik klasörden sun.</div>
</div>

Sınıf / öznitelik	Açıklama
`data-fk-tabs`	Sekme grubunun kapsayıcısı
`[role="tab"] + aria-controls`	Sekme düğmesi ve bağlı panel
`fk-tabs-panel / is-active`	Panel ve açık hali

34Tag (etiket)#

TypeScript PHP Tasarım

HTML

<div class="demo-row">
  <span class="fk-tag">TypeScript<button type="button" class="fk-tag-x" aria-label="TypeScript etiketini kaldır">&times;</button></span>
  <span class="fk-tag">PHP<button type="button" class="fk-tag-x" aria-label="PHP etiketini kaldır">&times;</button></span>
  <span class="fk-tag">Tasarım<button type="button" class="fk-tag-x" aria-label="Tasarım etiketini kaldır">&times;</button></span>
</div>

Kullanıcının etiket yazabildiği alan için Formlar → Etiket girişi.

35Timeline (zaman çizelgesi)#

2021 — 2023Serbest geliştirici
İlk müşteri projeleri.
2024 — 2025Yayın altyapısı
Uzaktan projeler.
2025 — Günümüzfkdev stüdyo
Kendi ürünler.

HTML

<ol class="fk-timeline">
  <li class="is-done"><time>2021 — 2023</time><strong>Serbest geliştirici</strong><p>İlk müşteri projeleri.</p></li>
  <li class="is-done"><time>2024 — 2025</time><strong>Yayın altyapısı</strong><p>Uzaktan projeler.</p></li>
  <li><time>2025 — Günümüz</time><strong>fkdev stüdyo</strong><p>Kendi ürünler.</p></li>
</ol>

36Toast (bildirim)#

Sağ altta beliren, kendiliğinden kapanan bildirim. HTML özniteliği ya da JS ile tetiklenir.

HTML

<div class="demo-row">
  <button type="button" class="fk-btn fk-btn-ghost" data-fk-toast="Bilgi mesajı" data-fk-type="info">Bilgi</button>
  <button type="button" class="fk-btn fk-btn-ghost" data-fk-toast="Kaydedildi!" data-fk-type="success">Başarı</button>
  <button type="button" class="fk-btn fk-btn-ghost" data-fk-toast="Kota dolmak üzere" data-fk-type="warning">Uyarı</button>
  <button type="button" class="fk-btn fk-btn-ghost" data-fk-toast="Bir şeyler ters gitti" data-fk-type="danger">Hata</button>
</div>

JavaScript

FK.toast('Dosya yüklendi', 'success');
FK.toast('Bağlantı koptu', 'danger', 8000);

Odaklan

HTML

<div class="demo-row">
  <button type="button" class="fk-btn fk-btn-icon" data-fk-tip="Kopyala" aria-label="Kopyala"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2.5"/><path d="M15 9V6.5A2.5 2.5 0 0 0 12.5 4h-6A2.5 2.5 0 0 0 4 6.5v6A2.5 2.5 0 0 0 6.5 15H9"/></svg></button>
  <button type="button" class="fk-btn fk-btn-icon" data-fk-tip="Sil" aria-label="Sil"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></svg></button>
  <span class="fk-badge" tabindex="0" data-fk-tip="Klavyeyle de açılır">Odaklan</span>
  <button type="button" class="fk-btn fk-btn-ghost fk-btn-sm" data-fk-tip="Ekranın kenarına yakınsa kendini içeri çeker; üstte yer yoksa alta geçer.">Uzun ipucu</button>
</div>

v2.4.1 ile tooltip artık sayfanın en üst katmanında çizilir: taşan kapsayıcılar (tablolar, butonlar) onu kesmez, ekran kenarına çarpmaz, kaydırınca ve Esc ile kapanır.

ErişilebilirlikTooltip yalnızca ek bilgi içindir. Butonun asıl adını mutlaka aria-label ile ver. Açıkken öğeye aria-describedby otomatik bağlanır.

Bileşenler, A’dan Z’ye.

01Accordion#

02Alert (uyarı kutusu)#

03Avatar#

04Badge (rozet)#

05Banner (duyuru şeridi)#

07Button (buton)#

08Button group (buton grubu)#

09Card (kart)#

Varsayılan

Tıklanabilir

Ters

10Code (kod bloğu ve kısayol)#

11Confirm (onay penceresi)#

12Description list (tanım listesi)#

13Divider (ayraç)#

14Drawer (yan panel)#

16Empty state (boş durum)#

17Eyebrow ve pill#

18List (liste)#

19Loader (yükleniyor)#

21Navbar#

22Notification count (bildirim sayacı)#

24Pricing (fiyat kartı)#

25Progress ring (halka)#

26Quote (alıntı)#

27Read bar (okuma çubuğu)#

28Segmented control (segment)#

29Stats (sayılar)#

30Status (durum noktası)#

31Steps (adımlar)#

32Table (tablo)#

Sıralanabilir tablo

33Tabs (sekmeler)#

34Tag (etiket)#

35Timeline (zaman çizelgesi)#

36Toast (bildirim)#

37Tooltip (ipucu)#

Dokümantasyonda ara

01Accordion#

02Alert (uyarı kutusu)#

03Avatar#

04Badge (rozet)#

05Banner (duyuru şeridi)#

06Breadcrumb#

07Button (buton)#

08Button group (buton grubu)#

09Card (kart)#

Varsayılan

Tıklanabilir

Ters

10Code (kod bloğu ve kısayol)#

11Confirm (onay penceresi)#

12Description list (tanım listesi)#

13Divider (ayraç)#

14Drawer (yan panel)#

15Dropdown (açılır menü)#

16Empty state (boş durum)#

17Eyebrow ve pill#

18List (liste)#

19Loader (yükleniyor)#

20Modal#

21Navbar#

22Notification count (bildirim sayacı)#

23Pagination (sayfalama)#

24Pricing (fiyat kartı)#

25Progress ring (halka)#

26Quote (alıntı)#

27Read bar (okuma çubuğu)#

28Segmented control (segment)#

29Stats (sayılar)#

30Status (durum noktası)#

31Steps (adımlar)#

32Table (tablo)#

Sıralanabilir tablo

33Tabs (sekmeler)#

34Tag (etiket)#

35Timeline (zaman çizelgesi)#

36Toast (bildirim)#

37Tooltip (ipucu)#