98.css – ein Designsystem zur originalgetreuen Nachbildung alter Benutzeroberflächen

 (jdan.github.io)
3 Punkte von GN⁺ 2024-11-07 | 1 Kommentare | Auf WhatsApp teilen

  • Intro

    • 98.css ist eine CSS-Bibliothek zum Erstellen von Oberflächen im Stil von Windows 98.
    • Diese Bibliothek verfolgt Barrierefreiheit als zentrales Ziel und empfiehlt die semantische Verwendung von HTML.
    • Sie stylt HTML ohne JavaScript und ist mit verschiedenen Frontend-Frameworks kompatibel.

  • Components

    • Button
      • Ein Befehlsbutton ist ein Steuerelement, das die Anwendung beim Klicken eine bestimmte Aktion ausführen lässt.
      • Standardmäßig ist er 75px breit und 23px hoch; beim Klicken erscheint der Rahmen eingedrückt.
    • Checkbox
      • Eine Checkbox steht für unabhängige oder nicht-exklusive Auswahlmöglichkeiten.
      • Durch die gemeinsame Verwendung von Checkbox und Label wird die Barrierefreiheit verbessert.
    • OptionButton
      • Ein Optionsbutton ist ein Radio-Button, mit dem sich eine von mehreren begrenzten Optionen auswählen lässt.
      • Optionsbuttons derselben Gruppe werden gruppiert, indem sie dasselbe Attribut name teilen.
    • GroupBox
      • Eine Group Box ist ein rechteckiger Rahmen zum Organisieren einer Gruppe von Steuerelementen.
      • Sie wird mit dem Tag fieldset umgesetzt und kann mit einer Beschriftung versehen werden.
    • TextBox
      • Eine Text Box ist ein rechteckiges Steuerelement, mit dem Benutzer Text eingeben oder bearbeiten können.
      • Für die Unterstützung mehrerer Zeilen wird das Element textarea verwendet.
    • Slider
      • Ein Slider besteht aus einer Leiste, die den Einstellbereich definiert, und einem Marker, der den aktuellen Wert anzeigt.
      • Um einen vertikalen Slider zu erstellen, wird die Klasse is-vertical verwendet.
    • Dropdown
      • Eine Dropdown-Listbox ermöglicht die Auswahl eines einzelnen Eintrags aus einer Liste.
      • Sie wird mit den Elementen select und option umgesetzt.

  • Window

    • Title Bar
      • Die Titelleiste befindet sich am oberen Rand des Fensters und identifiziert dessen Inhalt.
      • Sie wird mit den Klassen title-bar, title-bar-text und title-bar-controls umgesetzt.
    • Window contents
      • Das Fenster wird mit der Klasse window aufgebaut, die seine Begrenzung definiert.
      • Mit der Klasse window-body wird der Inhalt des Fensters dargestellt.
    • Status Bar
      • Die Statusleiste befindet sich am unteren Rand des Fensters und zeigt den aktuellen Status oder andere Informationen an.
      • Sie wird mit der Klasse status-bar umgesetzt.
    • TreeView
      • Das Tree-View-Steuerelement zeigt Objekte als eingerückte Übersicht entsprechend ihrer hierarchischen Beziehungen an.
      • Es wird mit dem Element ul und der Klasse tree-view umgesetzt.
    • Tabs
      • Ein Tab-Steuerelement ähnelt den Registerreitern eines Karteikastens oder Notizbuchs.
      • Es wird mit dem Element menu und dem Attribut [role=tablist] umgesetzt.
    • TableView
      • Die Table View wird mit dem Element table gerendert.
      • Die Klasse sunken-panel stellt Rahmen und einen Overflow-Container bereit.

  • Issues, Contributing, etc.

    • 98.css steht unter der MIT-Lizenz.
    • Auf der GitHub-Issues-Seite können Bugs gemeldet oder neue Fehlerberichte eingereicht werden.
    • Beiträge zu Open Source sind willkommen, und es wird Code-Review angeboten.

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-11-07
Hacker-News-Kommentare

  • Ein Nutzer hat ein Projekt erstellt, das Standard-Farbthemen verschiedener Betriebssysteme enthält, und Symbole und Icons als SVG neu geschaffen, damit sie auch auf modernen Systemen gut funktionieren und ansprechend aussehen

    • Das Projekt wurde auf Show HN veröffentlicht, erhielt aber keine große Aufmerksamkeit
    • Er vermutet, dass der Projekttitel möglicherweise nicht besonders ansprechend ist

  • Ein anderer Nutzer schrieb, dass dieses Projekt ein Erholungsprojekt nach einem Burnout war, und hat seine Gedanken dazu kürzlich festgehalten

  • Ein Nutzer hat CSS-Stile gesammelt, die mit verschiedenen Betriebssystemen in Verbindung stehen

    • Darunter sind The Sims, Windows 98, Windows XP, Windows 7 und ein Edward-Tufte-Stil

  • 98.css gilt auf Hacker News als Klassiker und wurde bereits mehrfach diskutiert

    • HyperCard Simulator und Decker sind ebenfalls einen Blick wert

  • Bei nicht nativen DPI-Einstellungen funktioniert der Stil möglicherweise nicht gut; im Browser-Konsolenfenster kann bestimmter Code ausgeführt werden, um ihn an physische Pixel anzupassen

  • Ein Nutzer merkte an, dass es unter Windows 95 und Windows 98 offenbar nicht MS Sans Serif ist

  • Ein anderer Nutzer sagte, dass botoxparty.github.io/XP.css und khang-nd.github.io/7.css einen Blick wert seien

  • Microsoft bot Ende der 90er Jahre CSS-Farben an, die auf Windows-Desktop-Themen und -Farben abgestimmt waren, sodass sich Web-UIs an den Desktop der Nutzer anpassen ließen

  • Ein Nutzer argumentiert, dass frühere Stile besser seien als die heutige UX/UI-Forschung und deren Verbesserungen

    • Er bevorzugt es, wenn Buttons, Tabs und Textfelder klar erkennbar sind

  • Ein Obsidian-Theme wurde unter Verwendung des 98.css-Quellcodes erstellt, ist inzwischen aber eingestellt