98.css – Sistem desain yang dengan setia mereproduksi antarmuka pengguna lama

 (jdan.github.io)
3 poin oleh GN⁺ 2024-11-07 | 1 komentar | Bagikan ke WhatsApp

  • Intro

    • 98.css adalah pustaka CSS untuk membangun antarmuka bergaya Windows 98.
    • Pustaka ini menjadikan aksesibilitas sebagai tujuan utama dan mendorong penggunaan HTML yang semantik.
    • Menata gaya HTML tanpa JavaScript dan kompatibel dengan berbagai framework frontend.

  • Components

    • Button
      • Tombol perintah adalah kontrol yang membuat aplikasi menjalankan tindakan tertentu saat pengguna mengkliknya.
      • Secara default memiliki lebar 75px dan tinggi 23px, dan saat diklik batasnya berubah menjadi seperti tertekan.
    • Checkbox
      • Checkbox merepresentasikan pilihan yang independen atau tidak saling eksklusif.
      • Menggunakan checkbox bersama label untuk meningkatkan aksesibilitas.
    • OptionButton
      • Tombol opsi adalah radio button yang memungkinkan memilih satu dari sejumlah opsi terbatas.
      • Tombol opsi dalam grup yang sama dikelompokkan dengan berbagi atribut name yang sama.
    • GroupBox
      • Group box adalah bingkai persegi panjang yang digunakan untuk mengatur sekumpulan kontrol.
      • Diimplementasikan menggunakan tag fieldset, dan dapat ditambahkan label.
    • TextBox
      • Kotak teks adalah kontrol persegi panjang yang memungkinkan pengguna memasukkan atau mengedit teks.
      • Untuk mendukung banyak baris, gunakan elemen textarea.
    • Slider
      • Slider terdiri dari bilah yang mendefinisikan rentang penyesuaian dan penanda yang menunjukkan nilai saat ini.
      • Untuk membuat slider vertikal, gunakan kelas is-vertical.
    • Dropdown
      • Kotak daftar dropdown memungkinkan pemilihan satu item dari daftar.
      • Diimplementasikan menggunakan elemen select dan option.

  • Window

    • Title Bar
      • Bilah judul berada di tepi atas jendela dan mengidentifikasi isi jendela.
      • Diimplementasikan menggunakan kelas title-bar, title-bar-text, dan title-bar-controls.
    • Window contents
      • Jendela disusun menggunakan kelas window yang mendefinisikan batas jendela.
      • Isi jendela digambar menggunakan kelas window-body.
    • Status Bar
      • Bilah status berada di bagian bawah jendela untuk menampilkan status saat ini atau informasi lainnya.
      • Diimplementasikan menggunakan kelas status-bar.
    • TreeView
      • Kontrol tree view menampilkan objek sebagai kerangka berindentasi berdasarkan hubungan hierarkis.
      • Diimplementasikan menggunakan elemen ul dan kelas tree-view.
    • Tabs
      • Kontrol tab mirip dengan pembatas pada lemari arsip atau notebook.
      • Diimplementasikan menggunakan elemen menu dan atribut [role=tablist].
    • TableView
      • Table view dirender menggunakan elemen table.
      • Kelas sunken-panel menyediakan batas dan kontainer overflow.

  • Issues, Contributing, etc.

    • 98.css menggunakan lisensi MIT.
    • Bug dapat dilaporkan atau bug baru dapat diajukan di halaman issue GitHub.
    • Kontribusi open source disambut, dan code review disediakan.

Bacaan terkait

1 komentar

 
GN⁺ 2024-11-07
Komentar Hacker News

  • Seorang pengguna membuat proyek yang mencakup tema warna bawaan dari berbagai sistem operasi, serta menciptakan ulang ikon dan simbol dalam SVG agar tetap berfungsi baik dan terlihat estetis di sistem modern

    • Proyek tersebut pernah diposting di Show HN, tetapi tidak mendapat banyak perhatian
    • Ia merasa judul proyeknya mungkin kurang menarik

  • Pengguna lain mengatakan proyek ini adalah proyek pemulihan dari burnout, dan baru-baru ini menuliskan pemikirannya tentang hal itu

  • Ada pengguna yang mengumpulkan gaya CSS terkait berbagai sistem operasi

    • Termasuk gaya The Sims, Windows 98, Windows XP, Windows 7, dan Edward Tufte

  • 98.css dianggap sebagai karya klasik di Hacker News dan sudah beberapa kali dibahas

    • HyperCard Simulator dan Decker juga layak dijadikan referensi

  • Pada pengaturan DPI yang bukan bawaan, gaya ini mungkin tidak bekerja dengan baik, dan bisa disesuaikan ke piksel fisik dengan menjalankan kode tertentu di konsol browser

  • Seorang pengguna menyebut bahwa tampilannya tampaknya bukan MS Sans Serif seperti di Windows 95 dan Windows 98

  • Pengguna lain mengatakan botoxparty.github.io/XP.css dan khang-nd.github.io/7.css layak untuk dilihat

  • Pada akhir 1990-an, Microsoft menyediakan warna CSS yang disesuaikan dengan tema dan warna desktop Windows, sehingga UI web bisa dibuat selaras dengan desktop pengguna

  • Seorang pengguna berpendapat bahwa gaya lama lebih baik daripada riset dan penyempurnaan UX/UI saat ini

    • Ia lebih menyukai tombol, tab, dan kolom teks yang terlihat jelas

  • Seseorang pernah membuat tema Obsidian menggunakan sumber 98.css, tetapi sekarang sudah dihentikan