Temeller · Tasarım değişkenleri

Her şeyin temeli.

Bütün bileşenler aynı küçük değişken setinden beslenir. Bir değişkeni değiştirdiğinde sistemin tamamı birlikte değişir.

01Renkler#

Palet bilinçli olarak monokromdur. Renk yalnızca durum bildirmek için (başarı, uyarı, hata) kullanılır. Aşağıdaki kartlar seçili temaya göre canlı değişir; üstteki tema düğmesini dene.

Zemin--fk-bg

İkincil zemin--fk-bg-2

Yüzey--fk-surface

Mürekkep (ana)--fk-ink

Mürekkep 2--fk-ink-2

Metin--fk-text

Yumuşak metin--fk-soft

Çizgi--fk-line-2

Başarı--fk-success

Uyarı--fk-warning

Hata--fk-danger

Ters zemin--fk-inv-bg

CSS

.benim-kartim {
  background: var(--fk-surface);
  color: var(--fk-text);
  border: 1px solid var(--fk-line);
}
.benim-kartim h3 { color: var(--fk-ink); }

Kendi renk tonunu tanımlaDeğişkenleri :root içinde ezmen yeterli. Örneğin :root { --fk-bg: #f7f5f2; } zemini sıcak bir kırık beyaza çevirir.

02Açık ve karanlık tema#

Tema üç katmanda çözülür: kullanıcı bir seçim yaptıysa <html data-theme="dark|light">, yoksa işletim sistemi tercihi (prefers-color-scheme).

HTML

<button type="button" class="fk-btn fk-btn-primary" data-fk-theme-toggle>Temayı değiştir</button>

JavaScript

FK.setTheme('dark');
FK.setTheme('light');
console.log(FK.theme());

Sınıf / öznitelik	Açıklama
`data-fk-theme-toggle`	Tıklandığında açık/koyu tema arasında geçiş yapar, seçimi hatırlar
`html[data-theme="dark"]`	Koyu temayı zorlar
`html[data-theme="light"]`	Açık temayı zorlar

03Tipografi#

Başlıklarda Instrument Serif, metinde Geist, etiketlerde Geist Mono kullanılır. Başlıklardaki <em> italik ve gri yazılır; vurgu böyle verilir.

.fk-displayDisplay başlık

.fk-h1Sayfa başlığı

.fk-h2Bölüm başlığı

.fk-h3Kart başlığı

.fk-h4Alt başlık, sans-serif

.fk-ledeGiriş paragrafı; biraz daha büyük ve rahat okunur.

.fk-asideİtalik serif not, espri ya da alıntı.

.fk-monoEtiket · Mono · Büyük harf

HTML

<h1 class="fk-h1">Yaptıkça <em>öğrendim.</em></h1>

04Boşluk ölçeği#

Boşluklar 4 pikselin katlarıdır. Bileşenler bu ölçeği kullanır; kendi düzenlerinde de kullanman simetriyi korur.

--fk-s-14px

--fk-s-28px

--fk-s-312px

--fk-s-416px

--fk-s-524px

--fk-s-632px

--fk-s-748px

--fk-s-864px

--fk-s-996px

--fk-s-10128px

05Köşe yarıçapı ve gölge#

--fk-r-xs

--fk-r-sm

--fk-r-md

--fk-r-lg

--fk-r-xl

--fk-r-full

Değişken	Kullanım
`--fk-gshadow`	Cam yüzeylerin yumuşak gölgesi
`--fk-shadow`	Üzerine gelince derinleşen büyük gölge
`--fk-hi`	Cam yüzeyin üst kenarındaki ışık çizgisi

06Liquid Glass#

fk-glass sınıfı her öğeyi buzlu cama çevirir: arkasını bulanıklaştırır, doygunluğu artırır, üst kenarına ışık çizgisi ve köşesine yansıma ekler. Cam, arkasında bir şey olduğunda güzel görünür; bu yüzden fk-atmosphere ile birlikte kullan.

Cam kart

Arkadaki ışık bu yüzeyin içinden süzülür.

HTML

<div class="demo-bg">
  <div class="fk-card" style="max-width:360px;margin:auto">
    <span class="fk-card-num">01</span>
    <h3 class="fk-card-title">Cam <em>kart</em></h3>
    <p>Arkadaki ışık bu yüzeyin içinden süzülür.</p>
  </div>
</div>

CSSKendi cam yüzeyini yazmak

.benim-panelim {
  background: var(--fk-glass);
  -webkit-backdrop-filter: var(--fk-blur);
  backdrop-filter: var(--fk-blur);
  box-shadow: inset 0 1px 0 var(--fk-hi), inset 0 0 0 1px var(--fk-line), var(--fk-gshadow);
  border-radius: var(--fk-r-xl);
}

07Izgara ve düzen#

Izgaralar her zaman simetrik dolar: 2, 3 ya da 4 sütun. Tablette 2’ye, telefonda tek sütuna iner.

01

02

03

HTML

<div class="fk-grid fk-g-3" style="width:100%">
  <div class="fk-card fk-center"><h3 class="fk-card-title">01</h3></div>
  <div class="fk-card fk-center"><h3 class="fk-card-title">02</h3></div>
  <div class="fk-card fk-center"><h3 class="fk-card-title">03</h3></div>
</div>

Sınıf / öznitelik	Açıklama
`fk-wrap`	İçeriği 1200px’e sınırlar, kenarlarda 24px boşluk bırakır
`fk-grid fk-g-2 / -3 / -4`	Eşit sütunlu ızgara
`fk-stack`	Dikey yığın; aralık `--fk-gap` ile değişir
`fk-cluster`	Yatay, satır kaydıran grup (butonlar, etiketler)
`fk-center`	Metni ortalar

08İkonlar#

Bütün ikonlar 24×24 görünüm kutulu, 1.8 çizgi kalınlıklı SVG’dir ve ikon servisi olarak CDN’den sunulur. İki yolu var: satır içi SVG (aşağıdaki kutulara tıklayınca kopyalanır) ya da tek satırlık ikon CSS’i ile sınıf kullanmak. Rengini iki yolda da yazıdan (currentColor) alır.

HTMLİkon servisi · sınıfla kullanım

<link rel="stylesheet" href="https://ui.fkdev.sbs/v2.4.1/fkdev-icons.css" crossorigin="anonymous">

<i class="fk-i fk-i-cart" aria-hidden="true"></i>
<button class="fk-btn fk-btn-primary"><i class="fk-i fk-i-send" aria-hidden="true"></i>Gönder</button>
<i class="fk-i fk-i-trend-up fk-i-lg" aria-hidden="true"></i>

Sınıf / öznitelik	Açıklama
`fk-i`	Temel ikon; boyutu yazı boyutu kadar (1em)
`fk-i-{ad}`	İkonun kendisi; ad aşağıdaki listede
`fk-i-sm / -md / -lg / -xl`	16 / 20 / 28 / 40 px
`aria-hidden="true"`	Süs ikonlarında ekran okuyucudan gizle; anlam taşıyorsa yanına metin yaz

Toplam 95 ikon. Kutunun altındaki ad sınıf adıdır (fk-i- önekiyle) ve dosya adıdır (icons/{ad}.svg).

HTML

<button class="fk-btn fk-btn-primary"><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="M21 3 3 10.5l7 2.5 2.5 7L21 3Z"/><path d="m10 13 4-4"/></svg>Gönder</button>