98.css – sistema de design que recria fielmente interfaces de usuário antigas

• Intro

  • 98.css é uma biblioteca CSS para criar interfaces no estilo do Windows 98.
  • A biblioteca tem a acessibilidade como objetivo principal e incentiva o uso semântico de HTML.
  • Ela estiliza HTML sem JavaScript e é compatível com vários frameworks de frontend.

• Components

  • Button
    • O botão de comando é um controle que faz o aplicativo executar uma ação específica quando o usuário clica.
    • Por padrão, ele tem 75px de largura e 23px de altura, e ao clicar a borda muda para um estado pressionado.
  • Checkbox
    • A caixa de seleção representa escolhas independentes ou não exclusivas.
    • Use a caixa de seleção junto com um rótulo para melhorar a acessibilidade.
  • OptionButton
    • O botão de opção é um botão de rádio que permite selecionar uma entre opções limitadas.
    • Os botões de opção do mesmo grupo compartilham o mesmo atributo name para serem agrupados.
  • GroupBox
    • A caixa de grupo é uma moldura retangular usada para organizar um conjunto de controles.
    • Ela é implementada com a tag fieldset e pode receber um rótulo.
  • TextBox
    • A caixa de texto é um controle retangular em que o usuário pode inserir ou editar texto.
    • Para oferecer suporte a várias linhas, use o elemento textarea.
  • Slider
    • O slider é composto por uma barra que define o intervalo de ajuste e um indicador que mostra o valor atual.
    • Para criar um slider vertical, use a classe is-vertical.
  • Dropdown
    • A lista suspensa permite selecionar um único item da lista.
    • Ela é implementada com os elementos select e option.

• Window

  • Title Bar
    • A barra de título fica na borda superior da janela e identifica o conteúdo da janela.
    • Ela é implementada com as classes title-bar, title-bar-text e title-bar-controls.
  • Window contents
    • A janela é composta usando a classe window, que define suas bordas.
    • O conteúdo da janela é renderizado com a classe window-body.
  • Status Bar
    • A barra de status fica na parte inferior da janela e exibe o estado atual ou outras informações.
    • Ela é implementada com a classe status-bar.
  • TreeView
    • O controle de visualização em árvore exibe objetos em um esquema recuado de acordo com relações hierárquicas.
    • Ele é implementado com o elemento ul e a classe tree-view.
  • Tabs
    • O controle de abas é semelhante às divisórias de um fichário ou caderno.
    • Ele é implementado com o elemento menu e o atributo [role=tablist].
  • TableView
    • A visualização de tabela é renderizada com o elemento table.
    • A classe sunken-panel fornece a borda e o contêiner de overflow.

• Issues, Contributing, etc.

  • 98.css usa a licença MIT.
  • Você pode relatar bugs ou registrar novos problemas na página de issues do GitHub.
  • Contribuições para o código aberto são bem-vindas, e há revisão de código.

[GN⁺]

Comentários no Hacker News

• Um usuário criou um projeto que inclui temas de cores padrão de vários sistemas operacionais e recriou ícones e símbolos em SVG para que funcionem bem e tenham uma boa aparência também em sistemas modernos

  • Publicou o projeto no Show HN, mas ele não recebeu muita atenção
  • Acha que o título do projeto pode não ser muito atraente

• Outro usuário disse que esse projeto foi um projeto de recuperação de burnout e que recentemente registrou seus pensamentos sobre isso

• Há um usuário que reuniu estilos CSS relacionados a vários sistemas operacionais

  • Inclui estilos do The Sims, Windows 98, Windows XP, Windows 7 e Edward Tufte

• O 98.css é considerado um clássico no Hacker News e já foi discutido várias vezes

  • HyperCard Simulator e Decker também valem a pena conferir

• Em configurações de DPI diferentes do original, o estilo pode não funcionar bem, e é possível ajustá-lo aos pixels físicos executando um código específico no console do navegador

• Um usuário comentou que no Windows 95 e no Windows 98 a fonte não parece ser MS Sans Serif

• Outro usuário disse que vale a pena conferir botoxparty.github.io/XP.css e khang-nd.github.io/7.css

• No fim dos anos 90, a Microsoft oferecia cores CSS alinhadas aos temas e cores da área de trabalho do Windows, o que permitia fazer a UI da web combinar com a área de trabalho do usuário

• Um usuário argumentou que os estilos do passado são melhores do que as pesquisas e melhorias atuais de UX/UI

  • Prefere que botões, abas e campos de texto sejam claramente visíveis

• Um usuário criou um tema do Obsidian usando o código-fonte do 98.css, mas ele está descontinuado no momento