Başlangıç · 5 dakika

Kurulum, beş dakikada.

fkdev UI bağımlılık gerektirmeyen tek bir CSS ve tek bir JS dosyasından oluşur. Derleme aracı, npm ya da framework şart değil; istersen hepsiyle de çalışır.

01fkdev UI nedir?#

fkdev UI, fkdev.sbs sitesinin tasarım dilini herkesin kullanabileceği bileşenlere çeviren bir tasarım sistemidir. Siyah-beyaz bir renk paleti, Apple Liquid Glass’tan ilham alan buzlu cam yüzeyler, Instrument Serif başlıklar ve yumuşak geçişli hareketler üzerine kuruludur.

Dosya	Ham	Brotli	Ne yapar?
`fkdev-ui.min.css`	62,1 KB	10,4 KB	Tasarım değişkenleri, tipografi, tüm bileşenler ve yardımcı sınıflar
`fkdev-ui.min.js`	21,8 KB	6,0 KB	Tema, bildirim, modal, drawer, sekme, tooltip, form, tablo sıralama, animasyon
Google Fonts	—	—	Instrument Serif, Geist, Geist Mono

Tasarım ilkesiHer şey simetrik, sade ve okunaklı. Renk yerine kontrast, süs yerine boşluk, gölge yerine ışık kullanılır.

02CDN ile kurulum#

En hızlı yol: aşağıdaki satırları sayfanın <head> bölümüne ekle, <body> etiketine de fk-body sınıfını ver. Dosyalar sürüm numarasıyla sabitlenmiştir ve integrity imzası taşır; biri dosyayı değiştirse tarayıcı yüklemeyi reddeder.

HTML<head> içine

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://ui.fkdev.sbs" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@300..700&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://ui.fkdev.sbs/v2.4.1/fkdev-ui.min.css" integrity="sha384-ywbvrnvLBhspdz061sb4+HVmL4bAnbhyuwKyDq0qCBVdEeLw2Le+aT+M0XhiumnM" crossorigin="anonymous">
<script src="https://ui.fkdev.sbs/v2.4.1/fkdev-ui.min.js" integrity="sha384-M00Zh34vyulzgDN4UvQcDJteSAYjql+zh1KP3B8lMfPikmAoJLDzbKnjWiFHPsvT" crossorigin="anonymous" defer></script>

Diğer adres türleri (/v2/, /latest/), önbellek kuralları ve canlı hız ölçümü için CDN sayfasına bak.

HTML<body>

<body class="fk-body fk-atmosphere">

fk-atmosphere isteğe bağlıdır; arka plana yavaş ışık küreleri ve hafif bir doku ekler. Cam yüzeylerin “cam” gibi görünmesini sağlayan budur.

03İndir ve kendin barındır#

Dosyaları indirip kendi sunucuna koyabilirsin. Böylece başka bir alan adına bağımlı kalmazsın.

Tüm paket · ZIP · 73,2 KB fkdev-ui.min.css fkdev-ui.min.js

Paketin içinde: sıkıştırılmış ve okunur CSS/JS, fkdev-tokens.json (tüm tasarım değişkenleri), icons/ klasöründe 95 SVG ikon, icons.json ve manifest.json (boyutlar ve SRI imzaları).

Terminal

mkdir -p assets/fkdev
curl -o assets/fkdev/fkdev-ui.css https://ui.fkdev.sbs/v2.4.1/fkdev-ui.min.css
curl -o assets/fkdev/fkdev-ui.js  https://ui.fkdev.sbs/v2.4.1/fkdev-ui.min.js

HTML

<link rel="stylesheet" href="/assets/fkdev/fkdev-ui.css">
<script src="/assets/fkdev/fkdev-ui.js" defer></script>

04İlk sayfa şablonu#

Aşağıdaki şablon boş bir sayfadır: header, hero, bir kart ızgarası ve footer. Kopyala, index.html olarak kaydet, tarayıcıda aç.

HTMLindex.html

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sitem — fkdev UI</title>
  <script>(function(d){try{var t=localStorage.getItem('fk-theme');if(t)d.documentElement.setAttribute('data-theme',t)}catch(e){}})(document)</script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@300..700&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://ui.fkdev.sbs/v2.4.1/fkdev-ui.min.css">
  <script src="https://ui.fkdev.sbs/v2.4.1/fkdev-ui.min.js" defer></script>
</head>
<body class="fk-body fk-atmosphere">
  <header class="fk-navbar">
    <div class="fk-navbar-in fk-glass">
      <a class="fk-brand" href="/"><b>Site <i>Adı</i></b></a>
      <nav class="fk-tabsbar">
        <span class="fk-tabsbar-ind"></span>
        <a href="/" aria-current="page">Ana sayfa</a>
        <a href="/hakkimda/">Hakkımda</a>
        <a href="/iletisim/">İletişim</a>
      </nav>
      <div class="fk-navbar-tools">
        <button class="fk-btn fk-btn-icon" data-fk-theme-toggle aria-label="Tema">◐</button>
      </div>
    </div>
  </header>

  <main class="fk-wrap fk-center" style="padding:120px 0">
    <span class="fk-eyebrow fk-glass">Merhaba</span>
    <h1 class="fk-display" data-fk-split>Yeni <em>site.</em></h1>
    <p class="fk-lede" style="margin:24px auto">fkdev UI ile kuruldu.</p>
    <a class="fk-btn fk-btn-primary" href="/iletisim/">İletişime geç</a>
  </main>

  <footer class="fk-footer">
    <div class="fk-footer-card">
      <a class="fk-footer-brand" href="/">Site <i>Adı</i></a>
      <p class="fk-footer-bottom">© 2026</p>
    </div>
  </footer>
</body>
</html>

Head içindeki küçük betik neden var?Kullanıcının seçtiği tema (açık/koyu) sayfa çizilmeden önce uygulanır; böylece açılışta beyaz-siyah “yanıp sönme” olmaz.

05Önerilen klasör yapısı#

Metin

site/
├── index.html
├── hakkimda/index.html      → /hakkimda/
├── iletisim/index.html      → /iletisim/
├── assets/
│   ├── fkdev/fkdev-ui.css
│   ├── fkdev/fkdev-ui.js
│   ├── css/site.css         → kendi eklemelerin
│   └── js/site.js
├── favicon.svg
├── robots.txt
├── sitemap.xml
├── 404.html
└── .htaccess

Her sayfayı kendi klasörüne index.html olarak koymak adresleri temiz yapar: /iletisim/ gibi. Kendi stillerini kütüphane dosyasına değil site.css dosyasına yaz; güncelleme geldiğinde kaybolmaz.

06Adlandırma kuralları#

Tüm sınıflar fk- önekiyle başlar; başka kütüphanelerle (Bootstrap, Tailwind) çakışmaz.

Kalıp	Örnek	Anlam
`fk-{bileşen}`	`fk-card`	Bileşenin kendisi
`fk-{bileşen}-{parça}`	`fk-card-title`	Bileşenin bir parçası
`fk-{bileşen}-{tür}`	`fk-btn-primary`	Görünüm türü
`is-{durum}`	`is-active`, `is-loading`	JS tarafından açılıp kapanan durum
`data-fk-{özellik}`	`data-fk-toast`	JS davranışı ekleyen öznitelik
`--fk-{değişken}`	`--fk-ink`	CSS tasarım değişkeni

07Tarayıcı desteği#

Tarayıcı	Sürüm	Not
Chrome / Edge	111+	Tam destek
Safari (macOS, iOS)	16.4+	Tam destek, cam efekti `-webkit-backdrop-filter` ile
Firefox	113+	Tam destek
Eski tarayıcılar	—	Cam efekti yerine düz yüzey görünür, içerik bozulmaz

Kütüphane color-mix(), backdrop-filter, <dialog> ve IntersectionObserver kullanır. Hareketler prefers-reduced-motion ayarına saygı duyar.

08Lisans ve sürümler#

fkdev UI MIT lisansı ile dağıtılır: ticari projeler dahil özgürce kullanabilir, değiştirebilirsin. Sürüm numaraları anlamsal sürümleme kuralına uyar: 2.x içindeki güncellemeler mevcut sınıfları bozmaz. Tüm değişiklikler sürüm notlarında.