Oat - Ultra hafif, sıfır bağımlılıklı, semantik HTML·CSS·JS UI kütüphanesi

 (oat.ink)
3 puan yazan GN⁺ 2026-02-16 | 1 yorum | WhatsApp'ta paylaş
  • HTML ve CSS tabanlı ultra hafif bir UI bileşen kütüphanesi olup, derleme süreci veya framework bağımlılığı olmayan bir yapıya sahip
  • Yalnızca 6KB CSS ve 2.2KB JS (sıkıştırılmış ve gzip ölçümüne göre) ile, web uygulamaları için gereken temel UI öğeleri anında kullanılabiliyor
  • <button>, <input>, <dialog> gibi semantik HTML öğelerini doğrudan stillendirir ve sınıf kullanımını en aza indirerek kod kirliliğini azaltır
  • Erişilebilirlik (Accessibility) gözetilerek ARIA rolleri ve klavye gezinmesi varsayılan olarak desteklenir
  • Karmaşık JS ekosistemi bağımlılıkları ve aşırı mühendislikten uzak durarak, basit ve standart tabanlı, uzun süre kullanılabilecek bir UI yapısı hedefler

Oat genel bakış

  • Oat, HTML + CSS tabanlı ultra hafif semantik bir UI bileşen kütüphanesidir ve hiçbir dış bağımlılığı yoktur
    • Framework, build aracı veya geliştirme ortamı yapılandırması gerekmez
    • Yalnızca küçük CSS ve JS dosyalarını ekleyerek hemen kullanılabilir
  • Yaklaşık 8KB (6KB CSS + 2.2KB JS) boyutuyla, web uygulamalarının temel UI'sini hızlıca oluşturmayı sağlar
  • Başlıca bileşenler arasında Button, Card, Dialog, Table, Tabs, Tooltip, Toast, Sidebar bulunur

Semantik HTML ve erişilebilirlik

  • Semantik etiketler ve öznitelikler temel alınarak stiller otomatik uygulanır; böylece sınıf tanımlamadan da tutarlı bir tasarım korunur
    • Örneğin: <button>, <input>, <dialog> gibi temel HTML öğelerine doğrudan stil uygulanır
    • role="button" gibi semantik öznitelikler de otomatik olarak tanınır
  • ARIA rolleri ve klavye gezinmesi tüm bileşenlerde desteklenir
    • Erişilebilirlik standartlarının varsayılan olarak uygulanması kullanıcı deneyimini iyileştirir

Sıfır bağımlılık ve sadelik

  • JS veya CSS framework'ü ya da kütüphane bağımlılığı yoktur
    • Node.js ekosisteminin karmaşıklığı ve gereksiz bağımlılık sorunları tamamen dışarıda bırakılır
    • Build veya paket yönetimi süreci olmadan doğrudan kullanılabilir
  • Bazı dinamik bileşenler WebComponents ile uygulanır ve yalnızca minimum düzeyde JS kullanılır

Özelleştirme ve tema

  • CSS değişkenleri üzerinden tema renkleri ve stiller kolayca ayarlanabilir
    • data-theme="dark" özniteliği body'ye eklendiğinde koyu tema otomatik uygulanır
  • Genel tasarım, shadcn estetiğinden etkilenmiştir

Geliştirilme arka planı

  • Çıkış noktası, mevcut JavaScript UI framework'lerinin aşırı karmaşıklığı ve bağımlılık sorunlarına duyulan rahatsızlıktır
    • Amaç, Node.js ekosistemindeki “dependency hell” ve “lock-in” sorunlarından kaçınmaktır
  • Basit, standart tabanlı ve uzun vadede sürdürülebilir bir UI kütüphanesini doğrudan kullanabilmek için geliştirildi
  • Geliştiriciler Oat sayesinde gereksiz build süreçleri olmadan anında kullanılabilir bir UI yapısı kurabilir

İlgili okumalar

1 yorum

 
GN⁺ 2026-02-16
Hacker News görüşleri

  • Yalnızca semantic HTML öğeleri ile bir web uygulamasında doğru etkiyi yaratmaya çalışma fikrinin harika olduğunu düşünüyorum
    “classless CSS” paradigmasını hedeflemesi de hoşuma gidiyor. Ancak bileşen kataloğuna bakınca semantic öğelerle temel öğelerin, data etiketleri ve aria özniteliklerinin, ayrıca CSS sınıflarının birbirine karıştığı görülüyor; bu da biraz tutarsız hissettiriyor
    Yine de CSS’in aria özniteliklerine tepki vererek stillenmesi etkileyici. React gibi ağır bileşen kütüphaneleri yerine aria-first yaklaşımıyla düşünmeyi sağlayan iyi bir alıştırma olabilir
    Özellikle bu bileşen kütüphanesinde yerel bir sidebar bulunması hoşuma gitti. Çoğu kütüphane yalnızca yeniden kullanılabilir küçük bileşenlere odaklanırken, bu yapı aside > nav > ul düzeniyle main yanına doğal biçimde yerleşiyor ve temiz görünüyor

  • Bu siteyi görünce gerçekten şaşırdım. Bir bağlantıya dokunduğum anda sayfa anında yüklendi; adeta kırbaç gibi hızlı hissettirdi
    İnternette böyle bir hızı unuttuğumu fark ettim; şimdi web geliştirmeyi denemek istiyorum

    • Eğer bir site yapacaksanız, Astro ile denemenizi öneririm. Yükleme hızı gerçekten çılgın
    • Bu arada Hacker News de benzer bir hız hissi veren iyi bir örnek

  • Bu proje, DaisyUI’den beklediğim sadeliği gerçekten hayata geçirmiş gibi hissettiriyor
    Buna Datastar da eklenirse, web standartlarına dayalı güçlü bir kombinasyon olabilir. “Ekosistem”den çok gerçek web teknolojilerine yaslanan bir yaklaşım

  • fosiao/rclone-webui-oat,
    mevcut ağır ve artık bakımı yapılmayan rclone-webui-react yerine geçiyor gibi görünüyor

  • Ana sayfada bağlantısı verilen blog yazısı, framework’ün kendisinden daha ilginç bir tartışma başlatacak gibi duruyor
    İşim gereği hem Angular hem de Next.js ile çalışıyorum ve giderek bu yazının bakış açısına daha çok katılıyorum
    İlgili yazı: JavaScript ecosystem is a hot mess

    • Güzel bağlantı. 2021 tarihli olsa da hâlâ geçerli içgörüler barındırıyor
      O dönemki tartışma: HN başlığı
    • Bu web sitesini gerçekten çok beğendim. Tıklamadan tamamen yüklenmeye kadar gecikme 0 saniye
    • Bu arada aynı konu 2021’de de burada tartışılmıştı

  • <aside>, bir sidebar için her zaman uygun bir semantic öğe değildir
    Asıl amacı, ana içerikle dolaylı olarak ilişkili içerikler için kullanılmaktır. Bazen bir sidebar bu tanıma uyar ama her zaman değil

  • Bu tür semantic drop-in CSS kütüphaneleri gerçekten çok fazla. Yeni bir proje görmek keyifli
    Kaliteleri değişken ama bu sitede semantic HTML için 50’den fazla drop-in stylesheet derlenmiş
    Bağlantı: Drop-in Minimal CSS koleksiyonu

    • Demek “drop in” demek istemiştin. Tek bir kısa çizginin bu kadar önemli olabileceğini bilmiyordum :)
    • Bunun daha fazla ilgi görmesi gerek. Açıkçası orijinal gönderiden daha ilginç bir kaynak
    • Buna bayıldım. Sağ ok ile stylesheet’ler arasında döngüsel gezinti yapılabiliyor
    • Listedekiler arasından özellikle önerebileceğiniz bir stylesheet var mı diye merak ediyorum

  • Bu proje bana 10 yıl önceki Bootstrap’ın ilk sürümlerini hatırlattı
    Bugünkü Bootstrap çok şişmiş olsa da o dönemin sadeliği hissediliyor
    Referans: Bootstrap resmi sitesi

  • Eski tarayıcılarda da test etmiş olman güzel. Gerçekten aşırı minimal bir kütüphane
    Ekran görüntüleri: görsel1, görsel2

    • Merak ettim, günlük kullanımda neden ana tarayıcı olarak hâlâ eski tarayıcıları tercih ettiğini öğrenmek isterim

  • Ben de uygulamamda benzer bir şey denedim ama bazı semantic/functional etiketlerin hâlâ tarayıcılarda düzgün desteklenmediğini fark ettim
    Örneğin Safari’de dialog etiketinin showModal özelliği kullanıldığında sayfanın tüm düzeni yeniden hesaplanıyor ve bu, Chromium’dan 59 kat daha yavaş oluyor
    Yine de yaklaşımın kendisini hâlâ seviyorum