98.css – A design system for building faithful recreations of old UIs

471 点作者 OuterVale7 个月前

26 条评论

nielssp7 个月前

I made something similar as well (that includes both 3.11, 95, 2000, XP, CDE and Mac OS 9, and also all the default color schemes of those): <a href="https://nielssp.github.io/classic-stylesheets/?theme=win9x&skin=98" rel="nofollow">https://nielssp.github.io/classic-stylesheets/?theme=win9x&s...</a>My focus was not so much on pixel perfect, but instead on creating something that would also work and look aesthetically pleasing on modern systems, like with higher DPI monitors and such. So one of the the things I did was to recreate all the icons and symbols in SVG.I tried posting it as a Show HN when I added XP and Mac OS 9, but it didn't get much attention. Maybe the title of the project isn't as catchy.

评论 #42063202 未加载

评论 #42063267 未加载

评论 #42070628 未加载

评论 #42062577 未加载

评论 #42064265 未加载

评论 #42069310 未加载

评论 #42066114 未加载

评论 #42062425 未加载

评论 #42063842 未加载

评论 #42066770 未加载

prezjordan7 个月前

Author here – happy to see this posted again!This was my burnout recovery project and I wrote some thoughts on it recently <a href="https://notes.jordanscales.com/98-css-reflections" rel="nofollow">https://notes.jordanscales.com/98-css-reflections</a>

评论 #42062604 未加载

评论 #42063304 未加载

评论 #42065334 未加载

culi7 个月前

My collection:The Sims <a href="https://thesimscss.inbn.dev/" rel="nofollow">https://thesimscss.inbn.dev/</a>Windows 98 <a href="https://jdan.github.io/98.css/" rel="nofollow">https://jdan.github.io/98.css/</a>Windows XP <a href="https://botoxparty.github.io/XP.css/" rel="nofollow">https://botoxparty.github.io/XP.css/</a>Windows 7 <a href="https://khang-nd.github.io/7.css/" rel="nofollow">https://khang-nd.github.io/7.css/</a>Edward Tufte <a href="https://edwardtufte.github.io/tufte-css/" rel="nofollow">https://edwardtufte.github.io/tufte-css/</a>

评论 #42110248 未加载

metadat7 个月前

98.css is an HN Classic, for all the best reasons.Previous discussions:<a href="https://news.ycombinator.com/item?id=33310554">https://news.ycombinator.com/item?id=33310554</a> - October 2022 (179 comments)<a href="https://news.ycombinator.com/item?id=22940564">https://news.ycombinator.com/item?id=22940564</a> - April 2020 (211 comments)See also:HyperCard Simulator and Decker.<a href="https://hn.algolia.com/?q=hypercard" rel="nofollow">https://hn.algolia.com/?q=hypercard</a>

sbarre7 个月前

I don't know if anyone else remembers this but in the late 90s, Microsoft had built-in CSS named colours that matched the Windows desktop theme/colours.I have no idea if these still work (my IDE seems to say they do not, because everything is red).<pre><code> body { font-size : 11px ; color : windowtext ; background-color : appworkspace ; } a { color: menutext; } .headerBar { border-top : 1px solid threedlightshadow ; border-left : 1px solid threedlightshadow ; border-bottom : 1px solid threedshadow ; border-right : 1px solid threedshadow ; background-color : threedface ; } </code></pre> So you could build web UIs that matched the user's Desktop look and feel. We did this for our browser-based Intranet applications in 1998, which made them look a bit more "native".

评论 #42062503 未加载

myfonj7 个月前

NB, that style does not play well with non-native DPI (e.g. when you have monitor set to 150% scale); to see it mapped to physical pixels, try running this in the browser's console:<pre><code> with(document.documentElement.style){ transform = `scale(${ 1 / devicePixelRatio })`; transformOrigin = 'top left'; } </code></pre> (multiply the scale by whole number to get it "crisply zoomed").Still not 100% perfect, but much closer to intended rendering, I guess.

评论 #42068232 未加载

andrewstuart7 个月前

I used a little bit of this I think in crowdwave <a href="https://www.crowdwave.com" rel="nofollow">https://www.crowdwave.com</a>

评论 #42058380 未加载

评论 #42060668 未加载

OuterVale7 个月前

Also worth checking out: <a href="https://botoxparty.github.io/XP.css" rel="nofollow">https://botoxparty.github.io/XP.css</a> and <a href="https://khang-nd.github.io/7.css" rel="nofollow">https://khang-nd.github.io/7.css</a>

评论 #42061613 未加载

评论 #42060694 未加载

评论 #42057937 未加载

评论 #42060023 未加载

评论 #42060810 未加载

评论 #42062015 未加载

akx7 个月前

By eye alone, I'm pretty sure that is not MS Sans Serif as rendered in Windows 95 and Windows 98.

评论 #42059024 未加载

评论 #42058133 未加载

agluszak7 个月前

I'd claim that this is way better than what we've got after years of UX/UI "research" and "improvements".And it's not that I'm some old boomer. In '98 I was one year old. I just hate buttons which don't look like buttons, tabs which don't look like tabs, text fields that you have to click to discover they're editable etc.

评论 #42062460 未加载

评论 #42063124 未加载

ranger_danger7 个月前

<a href="https://github.com/lolstring/window98-html-css-js">https://github.com/lolstring/window98-html-css-js</a><a href="https://github.com/anthmn/hackertosh.css">https://github.com/anthmn/hackertosh.css</a><a href="https://github.com/AlexBSoft/win95.css">https://github.com/AlexBSoft/win95.css</a><a href="https://github.com/1j01/os-gui">https://github.com/1j01/os-gui</a><a href="https://github.com/themesberg/windows-95-ui-kit">https://github.com/themesberg/windows-95-ui-kit</a><a href="https://github.com/andersevenrud/retro-css-shell-demo">https://github.com/andersevenrud/retro-css-shell-demo</a><a href="https://github.com/arturbien/React95">https://github.com/arturbien/React95</a><a href="https://github.com/botoxparty/XP.css">https://github.com/botoxparty/XP.css</a><a href="https://github.com/Gioni06/terminal.css">https://github.com/Gioni06/terminal.css</a><a href="https://github.com/jdan/98.css">https://github.com/jdan/98.css</a><a href="https://github.com/jianzhongli/csswin10">https://github.com/jianzhongli/csswin10</a><a href="https://github.com/khang-nd/7.css">https://github.com/khang-nd/7.css</a><a href="https://github.com/kristopolous/BOOTSTRA.386">https://github.com/kristopolous/BOOTSTRA.386</a><a href="https://github.com/lachsfilet/Renkbench">https://github.com/lachsfilet/Renkbench</a><a href="https://github.com/lolstring/window98-html-css-js">https://github.com/lolstring/window98-html-css-js</a><a href="https://github.com/micah5/PSone.css">https://github.com/micah5/PSone.css</a><a href="https://github.com/nostalgic-css/NES.css">https://github.com/nostalgic-css/NES.css</a><a href="https://github.com/npjg/classic.css">https://github.com/npjg/classic.css</a><a href="https://github.com/robbiebyrd/platinum">https://github.com/robbiebyrd/platinum</a><a href="https://github.com/bryanbraun/after-dark-css">https://github.com/bryanbraun/after-dark-css</a><a href="https://github.com/npjg/new-dawn">https://github.com/npjg/new-dawn</a><a href="https://github.com/ritenv/retro-desktop">https://github.com/ritenv/retro-desktop</a><a href="https://github.com/RoelN/c64css3">https://github.com/RoelN/c64css3</a><a href="https://github.com/sakofchit/system.css">https://github.com/sakofchit/system.css</a><a href="https://github.com/vinibiavatti1/TuiCss">https://github.com/vinibiavatti1/TuiCss</a><a href="https://code.divshot.com/geo-bootstrap/" rel="nofollow">https://code.divshot.com/geo-bootstrap/</a>

评论 #42074868 未加载

Aardwolf7 个月前

This is really cool, the only thing I see is the font rendering looks choppy. An antialiasing issue I think, but it looks worse than some non-antialiazed fonts (like the EGA 8x14 pixels font) tooTo be very pedantic: also the dropdown menu, when opened, looks very different than the original 98 style

评论 #42060126 未加载

评论 #42062553 未加载

bwg20007 个月前

Very cool, will need to find a use for this. I briefly had a go at building similar trying to replicate the Club Penguin UI - need to get back to it!<a href="https://github.com/bwgraves/PenguinCSS">https://github.com/bwgraves/PenguinCSS</a>

smusamashah7 个月前

I made this Obsidian theme (now defunct) using lots of source from 98.css<a href="https://github.com/SMUsamaShah/Obsidian-Win98-Edition">https://github.com/SMUsamaShah/Obsidian-Win98-Edition</a>

AstroJetson7 个月前

This is weirdly compelling. I have some retro info that I've wanted to put in a small website, this may be the thing that pushes it into the active list.Thanks!

soul_grafitti6 个月前

Admirable job. Just wondering - was the impetus for this anything to do with movie or TV prop making? It would certainly be terrific for rendering real time screens of '90s era data.

uptownfunk7 个月前

I miss this era of life and childhood

klaussilveira7 个月前

It sucks that the fonts will never look amazing as they once were in CRT monitors in 800x600.

henning7 个月前

This would be an improvement over modern UI design. It's much more clear what is clickable. That is why old Windows versions were designed like that.

lastdong7 个月前

Where’s Clippy?Great job! I think adding Clippy notifications would be a fun touch

评论 #42062106 未加载

sigmonsays7 个月前

broken on firefox for me after clicking through a few times...the left side gets shift over and hidden behind the white navigation box.Does this happen to anyone else?

ayaros7 个月前

This is beautiful. The world needs more of this.

breakfastduck7 个月前

I hate and love this at the same time

webprofusion7 个月前

Cool but the fonts are all messed up.

distantsounds7 个月前

developers will do anything but actually recreate visual basic

croisillon7 个月前

i dream of a 16 cga colors css framework with bulky arrows