98.css – Eski kullanıcı arayüzlerini aslına sadık biçimde yeniden oluşturan bir tasarım sistemi

• Giriş

  • 98.css, Windows 98 tarzı arayüzler oluşturmak için bir CSS kütüphanesidir.
  • Bu kütüphane erişilebilirliği temel hedeflerinden biri olarak benimser ve HTML'in semantik kullanımını teşvik eder.
  • JavaScript olmadan HTML'i stillendirir ve çeşitli frontend framework'leriyle uyumludur.

• Bileşenler

  • Button
    • Komut düğmesi, kullanıcı tıkladığında uygulamanın belirli bir işlemi gerçekleştirmesini sağlayan bir kontroldür.
    • Varsayılan olarak 75px genişliğe ve 23px yüksekliğe sahiptir; tıklandığında kenarlık basılı duruma geçer.
  • Checkbox
    • Onay kutusu, bağımsız veya birbirini dışlamayan seçimleri ifade eder.
    • Erişilebilirliği artırmak için onay kutusu ile etiket birlikte kullanılır.
  • OptionButton
    • Seçenek düğmesi, sınırlı seçenekler arasından birini seçmeye yarayan bir radyo düğmesidir.
    • Aynı gruptaki seçenek düğmeleri, gruplanmak için aynı name niteliğini paylaşır.
  • GroupBox
    • Grup kutusu, kontrol kümelerini düzenlemek için kullanılan dikdörtgen bir çerçevedir.
    • fieldset etiketiyle uygulanır ve bir etiket eklenebilir.
  • TextBox
    • Metin kutusu, kullanıcının metin girmesine veya düzenlemesine olanak tanıyan dikdörtgen bir kontroldür.
    • Birden fazla satırı desteklemek için textarea öğesi kullanılır.
  • Slider
    • Kaydırıcı, ayar aralığını tanımlayan bir çubuk ile mevcut değeri gösteren bir göstergeden oluşur.
    • Dikey kaydırıcı oluşturmak için is-vertical sınıfı kullanılır.
  • Dropdown
    • Açılır liste kutusu, listeden tek bir öğe seçilmesini sağlar.
    • select ve option öğeleri kullanılarak uygulanır.

• Pencere

  • Title Bar
    • Başlık çubuğu, pencerenin üst kenarında bulunur ve pencerenin içeriğini tanımlar.
    • title-bar, title-bar-text, title-bar-controls sınıfları kullanılarak uygulanır.
  • Window contents
    • Pencere, sınırlarını tanımlayan window sınıfı kullanılarak oluşturulur.
    • Pencerenin içeriği window-body sınıfı kullanılarak çizilir.
  • Status Bar
    • Durum çubuğu, pencerenin alt kısmında yer alır ve mevcut durumu veya diğer bilgileri gösterir.
    • status-bar sınıfı kullanılarak uygulanır.
  • TreeView
    • Ağaç görünümü kontrolü, nesneleri hiyerarşik ilişkilerine göre girintili bir ana hat olarak gösterir.
    • ul öğesi ve tree-view sınıfı kullanılarak uygulanır.
  • Tabs
    • Sekme kontrolü, dosya dolabı veya not defterindeki ayırıcılara benzer.
    • menu öğesi ve [role=tablist] niteliği kullanılarak uygulanır.
  • TableView
    • Tablo görünümü, table öğesi kullanılarak render edilir.
    • sunken-panel sınıfı, kenarlık ve overflow kapsayıcısı sağlar.

• Sorunlar, Katkı, vb.

  • 98.css, MIT lisansı ile sunulur.
  • GitHub Issues sayfası üzerinden hata bildirebilir veya yeni hatalar raporlayabilirsiniz.
  • Açık kaynağa katkılar memnuniyetle karşılanır ve kod incelemesi sağlanır.

[GN⁺]

Hacker News görüşleri

• Bir kullanıcı, çeşitli işletim sistemlerinin varsayılan renk temalarını içeren bir proje yaptı ve modern sistemlerde de iyi çalışması ve estetik görünmesi için ikonları ve sembolleri SVG ile yeniden oluşturdu

  • Projeyi Show HN'de paylaştı ancak fazla ilgi görmedi
  • Proje başlığının yeterince çekici olmayabileceğini düşünüyor

• Başka bir kullanıcı, bu projenin tükenmişlikten toparlanma sürecinde yaptığı bir proje olduğunu ve yakın zamanda bununla ilgili düşüncelerini yazdığını belirtti

• Çeşitli işletim sistemleriyle ilgili CSS stilleri toplayan bir kullanıcı var

  • The Sims, Windows 98, Windows XP, Windows 7 ve Edward Tufte tarzını içeriyor

• 98.css, Hacker News'te bir klasik olarak görülüyor ve birçok kez tartışıldı

  • HyperCard Simulator ve Decker'a da bakılabilir

• Yerel olmayan DPI ayarlarında stil düzgün çalışmayabilir; fiziksel piksellere hizalamak için tarayıcı konsolunda belirli bir kod çalıştırılabilir

• Bir kullanıcı, Windows 95 ve Windows 98'de kullanılan yazı tipinin MS Sans Serif değilmiş gibi göründüğünü söyledi

• Başka bir kullanıcı, botoxparty.github.io/XP.css ve khang-nd.github.io/7.css adreslerine bakmaya değer olduğunu söyledi

• 90'ların sonlarında Microsoft, Windows masaüstü temaları ve renkleriyle uyumlu CSS renkleri sunuyordu; bu sayede web arayüzü kullanıcının masaüstüyle eşleştirilebiliyordu

• Bir kullanıcı, günümüzdeki UX/UI araştırmaları ve iyileştirmelerinden ziyade geçmişteki stillerin daha iyi olduğunu savunuyor

  • Butonların, sekmelerin ve metin alanlarının net biçimde görünmesini tercih ediyor

• Bir Obsidian teması, 98.css kaynakları kullanılarak yapılmıştı ancak şu anda geliştirilmesi durdurulmuş durumda