98.css – un sistema de diseño que recrea fielmente interfaces de usuario antiguas

• Introducción

  • 98.css es una biblioteca CSS para construir interfaces con estilo de Windows 98.
  • Esta biblioteca tiene la accesibilidad como objetivo principal y fomenta el uso semántico de HTML.
  • Aplica estilo a HTML sin JavaScript y es compatible con diversos frameworks frontend.

• Componentes

  • Button
    • Un botón de comando es un control que hace que la aplicación realice una tarea específica cuando el usuario hace clic.
    • De forma predeterminada tiene 75px de ancho y 23px de alto, y al hacer clic su borde cambia a un estado presionado.
  • Checkbox
    • Una casilla de verificación representa una selección independiente o no exclusiva.
    • Se usa junto con una etiqueta para mejorar la accesibilidad.
  • OptionButton
    • Un botón de opción es un radio button que permite elegir una sola opción entre un conjunto limitado.
    • Los botones de opción del mismo grupo comparten el mismo atributo name para agruparse.
  • GroupBox
    • Un cuadro de grupo es un marco rectangular usado para organizar un conjunto de controles.
    • Se implementa con la etiqueta fieldset y puede incluir una etiqueta.
  • TextBox
    • Un cuadro de texto es un control rectangular que permite al usuario introducir o editar texto.
    • Para admitir varias líneas se usa el elemento textarea.
  • Slider
    • Un slider está compuesto por una barra que define el rango de ajuste y un indicador que muestra el valor actual.
    • Para crear un slider vertical se usa la clase is-vertical.
  • Dropdown
    • Una lista desplegable permite seleccionar un único elemento de una lista.
    • Se implementa con los elementos select y option.

• Ventana

  • Barra de título
    • La barra de título se ubica en el borde superior de la ventana e identifica su contenido.
    • Se implementa con las clases title-bar, title-bar-text y title-bar-controls.
  • Contenido de la ventana
    • La ventana se construye usando la clase window, que define sus bordes.
    • El contenido de la ventana se dibuja con la clase window-body.
  • Barra de estado
    • La barra de estado se ubica en la parte inferior de la ventana y muestra el estado actual u otra información.
    • Se implementa con la clase status-bar.
  • TreeView
    • El control de vista de árbol muestra objetos como un esquema con sangría según sus relaciones jerárquicas.
    • Se implementa con el elemento ul y la clase tree-view.
  • Tabs
    • El control de pestañas es similar a los separadores de un archivador o una libreta.
    • Se implementa con el elemento menu y el atributo [role=tablist].
  • TableView
    • La vista de tabla se renderiza usando el elemento table.
    • La clase sunken-panel proporciona el borde y el contenedor de overflow.

• Issues, Contributing, etc.

  • 98.css se distribuye bajo la licencia MIT.
  • Se pueden reportar errores o informar nuevos bugs en la página de issues de GitHub.
  • Las contribuciones al código abierto son bienvenidas y se ofrece revisión de código.

[GN⁺]

Comentarios de Hacker News

• Un usuario creó un proyecto que incluye los temas de colores predeterminados de varios sistemas operativos y recreó íconos y símbolos en SVG para que funcionen bien y se vean estéticos incluso en sistemas modernos

  • Publicó el proyecto en Show HN, pero no recibió mucha atención
  • Cree que el título del proyecto podría no ser muy atractivo

• Otro usuario comentó que este proyecto fue un proyecto para recuperarse del burnout y que recientemente dejó por escrito sus reflexiones al respecto

• Hay un usuario que recopiló estilos CSS relacionados con varios sistemas operativos

  • Incluye estilos de The Sims, Windows 98, Windows XP, Windows 7 y Edward Tufte

• 98.css es considerado un clásico en Hacker News y se ha discutido varias veces

  • HyperCard Simulator y Decker también pueden valer la pena revisar

• En configuraciones de DPI no nativas, es posible que el estilo no funcione bien, y se puede ejecutar cierto código en la consola del navegador para ajustarlo a los píxeles físicos

• Un usuario mencionó que en Windows 95 y Windows 98 parece que no se usa MS Sans Serif

• Otro usuario dijo que vale la pena revisar botoxparty.github.io/XP.css y khang-nd.github.io/7.css

• A finales de los 90, Microsoft ofrecía colores CSS alineados con los temas y colores del escritorio de Windows, lo que permitía hacer coincidir la UI web con el escritorio del usuario

• Un usuario sostuvo que los estilos del pasado son mejores que la investigación y las mejoras actuales de UX/UI

  • Prefiere que los botones, pestañas y campos de texto se vean claramente

• Un tema de Obsidian fue creado usando el código fuente de 98.css, pero actualmente está descontinuado