98.css – Sistem desain CSS yang mereproduksi UI Windows 98

 (jdan.github.io)
3 poin oleh GN⁺ 2024-11-07 | 1 komentar | Bagikan ke WhatsApp
  • 98.css memungkinkan pembuatan antarmuka web yang terlihat seperti Windows 98 hanya dengan CSS, sehingga UI desktop lama bisa direproduksi dengan setia
  • Aksesibilitas bergantung pada HTML semantik, dengan asumsi penggunaan atribut ARIA yang benar untuk tombol, label, dan tombol ikon
  • Karena tidak menyertakan JavaScript, ia bisa dipasang pada proyek React, JavaScript murni, maupun HTML biasa tanpa bergantung pada pilihan framework
  • Menyediakan komponen bergaya Windows 98 seperti tombol, checkbox, radio button, jendela, tree view, tab, table view, dan progress bar
  • Dapat digunakan melalui npm, GitHub release, dan unpkg; dirilis dengan lisensi MIT serta menerima laporan bug dan pull request

Cara mereproduksi UI Windows 98 dengan CSS

  • 98.css adalah library CSS untuk membuat antarmuka yang terlihat seperti Windows 98
  • Proyeknya dapat dilihat di GitHub
  • Aksesibilitas bergantung pada struktur HTML semantik, bukan skrip terpisah
    • Tombol harus menggunakan <button>
    • Elemen input memerlukan <label> yang sesuai
    • Tombol ikon menyampaikan maksudnya melalui aria-label
  • Sebagian style elemen dapat dioverride sambil tetap mempertahankan tampilan dasar
    • Misalnya menambah padding tombol atau memberi warna pada label input

Instalasi dan integrasi framework

<link rel="stylesheet" href="https://unpkg.com/98.css">;

npm install 98.css

Kontrol form dasar

  • Button

    • Tombol standar memiliki lebar 75px dan tinggi 23px, dengan border luar dan dalam yang tampak timbul serta padding horizontal default 12px
    • Dengan menambahkan kelas default, tindakan default yang dijalankan dengan tombol Enter di Windows 98 dapat disampaikan secara visual
    • Saat diklik, border yang tampak timbul berubah menjadi bentuk tertekan
    • Tombol nonaktif mempertahankan border timbul yang sama, tetapi labelnya terlihat pudar
    • Fokus ditampilkan sebagai border putus-putus 4px di dalam konten tombol

  • Checkbox

    • Checkbox mewakili pilihan yang independen atau tidak saling eksklusif
    • Saat dipilih, ikon centang ditampilkan di dalam panel cekung, dengan label pilihan di sebelahnya
    • Setelah <input type="checkbox">, harus disertakan <label> dengan atribut for yang menunjuk ke id input
    • Atribut checked dan disabled dapat digunakan
    • Saat mengelompokkan beberapa input, bungkus tiap input dengan container berkelas field-row agar jaraknya selaras

  • Option Button

    • Radio button adalah kontrol untuk memilih hanya satu dari sejumlah pilihan terbatas
    • Digunakan dengan <input type="radio">; jika diberi atribut name yang sama, elemen-elemen tersebut menjadi satu grup
    • Seperti checkbox, dapat dibungkus dengan field-row agar jarak antarinput tetap konsisten
    • Mendukung atribut checked dan disabled

  • Group Box

    • Group box adalah frame persegi untuk mengorganisasi beberapa kontrol
    • Digunakan dengan membungkus elemen dalam fieldset, yang menyediakan border luar cekung dan border dalam timbul
    • legend dapat dimasukkan ke dalam fieldset untuk memberi label grup

Input teks, slider, dropdown

  • TextBox

    • Text box adalah kontrol persegi tempat pengguna memasukkan atau mengedit teks
    • Input satu baris dirender dengan <input type="text">
    • Disarankan menyediakan <label> yang sesuai dengan atribut for yang benar, lalu membungkus keduanya dalam container field-row
    • Dengan kelas field-row-stacked, label dapat ditempatkan di atas input, bukan di sampingnya
    • Input multi-baris menggunakan textarea
    • Atribut HTML standar seperti disabled dan value dapat digunakan

  • Slider

    • Slider terdiri dari bilah yang menunjukkan rentang penyesuaian dan indikator yang menunjukkan nilai saat ini
    • Dirender dengan <input type="range">
    • Kelas has-box-indicator dapat mengganti indikator default menjadi indikator berbentuk kotak
    • Jika dibungkus dengan div yang menggunakan is-vertical, slider ditampilkan secara vertikal
    • Untuk mengubah panjang slider vertikal, perlu menyesuaikan width pada input dan height pada div

  • Dropdown

    • Dropdown list box memungkinkan pengguna memilih satu item dari daftar
    • Dalam keadaan tertutup, ia menampilkan nilai saat ini; pengguna membuka daftar untuk mengubah nilainya
    • Dirender dengan elemen select dan option
    • Nilai default adalah opsi pertama; memberi selected pada option tertentu dapat mengubah pilihan default

Komposisi jendela bergaya Windows 98

  • Title Bar

    • Title bar berada di bagian dalam tepi atas jendela dan mengidentifikasi isi jendela
    • Disusun dengan kelas title-bar, title-bar-text, dan title-bar-controls
    • Tombol tutup menggunakan aria-label="Close" untuk menyampaikan maksudnya kepada teknologi bantu
    • aria-label seperti Minimize, Maximize, Restore, dan Help juga dapat digunakan
    • Setiap aria-label memiliki kelas styling yang sesuai, sehingga meski teks aria-label menggunakan bahasa lain, tidak menimbulkan masalah rendering, aksesibilitas, maupun lokalisasi
    • Tombol maximize dapat dinonaktifkan dengan disabled
    • Menambahkan kelas inactive membuatnya terlihat sebagai title bar nonaktif

  • Window contents

    • Kelas window membuat container jendela yang dapat memuat title bar, serta menyediakan border luar dan dalam yang tampak timbul beserta padding
    • Ukuran jendela dapat disesuaikan bebas dengan menetapkan width pada style container
    • Konten di bawah title bar dapat digambar dengan kelas window-body

  • Status Bar

    • Status bar biasanya berada di bagian bawah jendela dan menampilkan status saat ini atau informasi kontekstual
    • Status bar dirender dengan kelas status-bar
    • Tiap elemen teks menggunakan kelas status-bar-field
    • Contoh mencakup field status seperti Press F1 for help, Slide 1, dan CPU Usage: 14%

Daftar, tab, tabel, dan indikator progres

  • TreeView

    • Tree view adalah list box khusus yang menampilkan kumpulan objek dalam bentuk outline berindentasi sesuai relasi hierarkis logis
    • Dirender dengan menambahkan kelas tree-view pada elemen ul
    • Elemen anak li dapat berisi konten yang diinginkan
    • Dengan memasukkan ul bertingkat, struktur tree ditampilkan melalui border putus-putus dan indentasi
    • Section yang dapat diperluas dapat dibuat dengan memasukkan daftar anak ke dalam elemen details

  • Tabs

    • Kontrol tab digunakan untuk mendefinisikan beberapa halaman logis atau section informasi dalam jendela yang sama
    • Tambahkan role="tablist" pada elemen menu, dan role="tab" pada elemen anak li
    • Pengelolaan tab harus ditangani oleh kode JavaScript pengguna
    • Untuk tab aktif, cukup tambahkan aria-selected="true"
    • Tab multi-baris dapat dibuat dengan menambahkan kelas multirows pada tag menu

  • TableView

    • Table view dirender dengan elemen table
    • Untuk menyediakan border yang sesuai dan container overflow, bungkus dengan div berkelas sunken-panel
    • Dengan sedikit skrip tambahan, table view dapat dibuat interaktif
    • Jika kelas interactive diberikan pada table, kursor pointer ditampilkan saat hover pada baris body
    • Memberi kelas highlighted pada baris membuatnya tampak seperti dipilih

  • Progress Indicator

    • Progress bar digunakan untuk menampilkan persentase penyelesaian tugas yang panjang
    • Default-nya adalah progress bar solid
    • Kelas segmented dapat digunakan untuk mendeklarasikan progress bar tersegmentasi
    • Progress ditampilkan melalui style width pada progress-indicator-bar

Border field dan partisipasi open source

  • Field borders

    • Text box, checkbox, dropdown list box, spin box, dan list box menggunakan style border field
    • Style yang sama juga dapat digunakan pada area kerja di dalam jendela
    • Border field menggunakan border luar cekung dan border dalam cekung
    • Bagian dalam sebagian besar kontrol menggunakan warna button highlight
    • Saat field teks seperti text box dan combo box berada dalam status read-only atau nonaktif, bagian dalamnya menggunakan warna button face
    • Untuk penggunaan umum, tersedia kelas field-border, field-border-disabled, dan status-field-border
    • Kelas-kelas ini hanya mendefinisikan border, warna latar, dan padding minimum, sehingga biasanya perlu menentukan padding tambahan sendiri

  • Lisensi dan kontribusi

    • 98.css adalah proyek dengan lisensi MIT
    • Untuk memeriksa dan melaporkan bug, gunakan halaman GitHub issues
    • Pull request disambut baik, dan proyek ini menyatakan akan menyediakan code review terutama bagi orang yang baru berpartisipasi dalam open source
    • Proyek ini ditujukan sebagai tempat untuk membangun pengalaman open source yang menyenangkan

Bacaan terkait

1 komentar

 
GN⁺ 2024-11-07
Komentar Hacker News

  • Saya membuat sesuatu yang serupa, mencakup 3.11, 95, 2000, XP, CDE, Mac OS 9, beserta semua palet warna bawaannya: https://nielssp.github.io/classic-stylesheets/?theme=win9x&s...
    Fokusnya bukan reproduksi sempurna sampai tingkat piksel, melainkan bentuk yang tetap bekerja baik dan terlihat bagus di lingkungan modern seperti monitor beresolusi tinggi
    Jadi semua ikon dan simbol saya buat ulang sebagai SVG, dan ketika menambahkan XP serta Mac OS 9 saya mengunggahnya ke Show HN, tetapi tidak mendapat banyak perhatian

    • Saya suka, tetapi tema Windows 2000 terlihat agak meleset karena teks judulnya terlalu tebal atau terlalu bold
      Secara pribadi, Windows 2000 adalah puncak desain UI
    • Sangat keren, kualitasnya, penanganan temanya, dan kesederhanaan implementasinya luar biasa
      Tambahan yang ingin saya lihat adalah tema tabel data, dan akan bagus jika ada juga tabel interaktif yang berperilaku seperti daftar dan grid
    • Hotdog stand!
      https://nielssp.github.io/classic-stylesheets/?theme=win3x&s...
    • Saya pernah memakai 98.css untuk aplikasi sederhana karena itu pustaka CSS retro paling kaya fitur yang bisa saya temukan, dan proyek ini membuat saya ingin mencoba palet warna Windows 3.1 juga
    • Proyeknya benar-benar indah dan sangat matang, dengan pemetaan tiap elemen UI yang baik

  • Saya pembuatnya. Senang melihat ini naik lagi
    Ini adalah proyek pemulihan dari burnout saya, dan baru-baru ini saya menulis beberapa pemikiran terkait: https://notes.jordanscales.com/98-css-reflections

    • Dulu saya memakai 98.css untuk aplikasi web yang cukup sederhana guna menciptakan ulang sesuatu dari masa kecil, dan itu sangat cocok untuk tujuannya
      [0]: https://www.mathsheets.net/
    • Semoga keadaan Anda sudah membaik
      Menarik bahwa komputasi retro seperti gim lama atau sistem operasi lama bisa memberi ketenangan dan bahkan terasa terapeutik
      Saya merasakan hal serupa saat memainkan gim Gameboy dan Nintendo dari masa kecil di emulator atau menjalankan Macintosh System 9, dan Pico-8, SerenityOS, TempleOS juga terlintas
      Ada kesamaan berupa lingkungan komputasi bergaya retro yang bisa sepenuhnya dipahami dan dikendalikan pengguna, dan mungkin ada dinamika psikologis yang lebih dalam, seperti sandbox yang aman sebagai alat terapi
      Teknologi dan masyarakat saat ini punya terlalu banyak dark pattern yang bermusuhan, jadi menemukan ruang fisik dan mental yang dirancang demi kenyamanan pengguna terasa sangat melegakan
    • Ini reproduksi Windows 98 paling akurat yang pernah saya lihat sejauh ini
      Akan bagus jika ada juga untuk Windows 2000 dan Windows XP

  • Kumpulan yang saya simpan:
    The Sims https://thesimscss.inbn.dev/
    Windows 98 https://jdan.github.io/98.css/
    Windows XP https://botoxparty.github.io/XP.css/
    Windows 7 https://khang-nd.github.io/7.css/
    Edward Tufte https://edwardtufte.github.io/tufte-css/

    • Baru pertama kali dengar Tufte OS :)

  • 98.css menjadi klasik HN karena alasan yang baik
    Diskusi sebelumnya:
    https://news.ycombinator.com/item?id=33310554 - Oktober 2022, 179 komentar
    https://news.ycombinator.com/item?id=22940564 - April 2020, 211 komentar
    Yang juga layak dilihat adalah HyperCard Simulator dan Decker
    https://hn.algolia.com/?q=hypercard

  • Saya ingat pada akhir 90-an Microsoft punya nama warna bawaan CSS yang menyesuaikan dengan tema dan warna desktop Windows
    Saya tidak tahu apakah masih berfungsi sekarang, dan di IDE semuanya terlihat merah sehingga sepertinya tidak berfungsi
    Dengan nilai seperti windowtext, appworkspace, menutext, threedlightshadow, threedshadow, threedface, kita bisa membuat UI web yang sesuai dengan look-and-feel desktop pengguna
    Pada 1998 saya memakainya di aplikasi intranet berbasis browser, dan berkat itu tampilannya terasa lebih native

  • Gaya ini tidak cocok dengan DPI non-default
    Misalnya, saat skala monitor diatur ke 150%, untuk mencoba menyesuaikannya dengan piksel fisik, Anda bisa menjalankan yang berikut di konsol browser:
    with(document.documentElement.style){ transform = \scale(${ 1 / devicePixelRatio })`; transformOrigin = 'top left'; }`
    Jika skala dikalikan dengan bilangan bulat, Anda bisa mendapatkan kesan diperbesar dengan tajam, dan meski tidak 100% sempurna, hasilnya terlihat jauh lebih dekat dengan rendering yang dimaksudkan

    • Penggunaan with seperti ini terasa menakutkan sekaligus sangat segar
      Saya menyukainya sekaligus membencinya

  • Sepertinya ini sedikit dipakai di crowdwave: https://www.crowdwave.com

  • Yang juga layak dilihat: https://botoxparty.github.io/XP.css dan https://khang-nd.github.io/7.css

    • Perbedaan yang sangat jelas antara semuanya, termasuk tautan yang dikirimkan, dengan UI modern adalah ruangnya jauh lebih sedikit
      Sekarang ini, seolah sudah menjadi mantra bahwa perlu ada ruang bernapas, seperti di antara opsi dalam grup tombol radio, tetapi jarak rapat pada UI lama terasa lebih jujur, lebih menghormati pengguna akhir, dan punya kepadatan informasi lebih tinggi
      Saya tidak ingin membuang semua inovasi, tetapi saya sering merindukan UI lama
    • Yang terlihat seperti Windows 7 paling matang, dan cukup banyak elemen yang tidak ada di yang lain, seperti bilah progres atau menu
      Saya tidak suka dekorasi jendela Windows 7, tetapi bagian lainnya sepertinya tidak buruk untuk dipakai di aplikasi Electron
    • Senang sekali ada tautan untuk XP
      UI Windows XP adalah yang terbaik dari semua UI Windows; cukup modern hingga terasa rapi, tetapi tetap kontras sehingga mudah dilihat, dibaca, dan dipahami
      UI Windows 7 terlalu berkilau dan lebih mengutamakan tampilan daripada keterbacaan, sementara Windows 98 terlalu kuno dan serba abu-abu sehingga juga agak kurang kontras
    • Saya juga sekalian mempromosikan milik saya. Tidak seterpisah atau seluas yang di atas, tetapi cukup sesuai dengan topik:
      https://git.sr.ht/~q3cpma/website/tree/master/item/src/resou...
      https://world-playground-deceit.net/
      Melihat hal-hal seperti ini membuat saya ingin mengerjakannya sampai tuntas
    • Sekarang yang kurang tinggal versi Windows 3.x

  • Dari tampilan saja, sepertinya ini bukan MS Sans Serif yang dulu dirender di Windows 95 dan Windows 98

  • Menurut saya ini jauh lebih baik daripada hasil bertahun-tahun “riset” dan “perbaikan” UX/UI
    Bukan karena saya generasi lama; pada 1998 saya baru berusia satu tahun
    Saya hanya tidak suka tombol yang tidak terlihat seperti tombol, tab yang tidak terlihat seperti tab, dan kolom teks yang baru bisa diketahui dapat diedit setelah dicoba diklik

    • Saya tidak yakin apakah setelah Windows 95, benar-benar banyak riset UX/UI yang diterapkan pada UI sistem operasi
      Apple mungkin melakukan sejumlah riset untuk MacOSX, tetapi selama 20 tahun terakhir, terutama di mobile, rasanya fitur-fitur dilempar begitu saja tanpa konsep discoverability atau konsistensi
      Di atas segalanya, keinginan perusahaan akan “branding yang konsisten” atau “tampilan yang unik” tampaknya menjadi penyebab banyak masalah
    • Namun saya tidak suka teks hitam di atas latar abu-abu gelap
      Dan di situs web itu juga ada tombol “show code” yang menyamar seperti teks biasa