[HN Gopher] 98.css - A design system for building faithful recre...
___________________________________________________________________
98.css - A design system for building faithful recreations of old
UIs
Author : OuterVale
Score : 349 points
Date : 2024-11-06 02:46 UTC (20 hours ago)
(HTM) web link (jdan.github.io)
(TXT) w3m dump (jdan.github.io)
| OuterVale wrote:
| Also worth checking out: https://botoxparty.github.io/XP.css and
| https://khang-nd.github.io/7.css
| ChrisNorstrom wrote:
| THANK you so much for the XP one. XP's UI is my favorite of all
| the Windows UIs. It had just enough modernity to feel sleek but
| still had contrast to be easily seen and read and understood.
|
| Windows 7 UI was a bit too flashy and employed looks over
| readability and Windows 98 was too old fashioned and also
| suffered from a lack of contrast with all the grey.
| stavros wrote:
| Was XP your first OS, by any chance? I really like the 98 UI,
| but that was my first and it evokes really nice memories.
| selectnull wrote:
| XP was my favorite as well, at least among the Windows. Not
| the first OS I used (that would be DOS 3). But it was the
| last MS OS I used.
| stavros wrote:
| Oh it was my favorite OS as well, it crashed way way less
| and did its job admirably, I just prefer the Windows 98
| UI.
| baq wrote:
| So basically windows server 2003. Peak desktop
| productivity UX.
| stavros wrote:
| Yep, exactly.
| d4rti wrote:
| XP x64 was a lovely desktop, and was essentially 2k3
| desktop. Last Windows system I enjoyed using.
| dotancohen wrote:
| For me that was KDE 3. In fact, KDE 3 had such a fan base
| that even until today there is still an active port.
| ChrisNorstrom wrote:
| Windows 98 was my first, but I loved XP UI the most,
| especially in the later years when Microsoft launched the
| ZUNE XP theme.
| mrighele wrote:
| I never enjoyed the XP one. Somebody called the Fisher-Price
| ui, and I think the remark is not too off. I would always
| switch to the "classic" UI, which I think was the same as
| Windows 2000, which in my opinion is the best of all (it is a
| similar but different from the one of Windows 98, especially
| in color choice and icon)
| a-french-anon wrote:
| Shilling mine (not as decoupled and extensive as those), since
| it's quite on point:
|
| https://git.sr.ht/~q3cpma/website/tree/master/item/src/resou...
|
| https://world-playground-deceit.net/
|
| These make me want to go all the way.
| mrighele wrote:
| The one that looks like Windows 7 seems to be the most complete
| and has a bunch of stuff not found in the others, like progress
| bar or menus. In fact while I never liked the window
| decorations that 7 used, the rest wouldn't look bad on an
| electron app
| rauli_ wrote:
| Now all we are missing is Windows 3.x -version.
| pen2l wrote:
| In both of these as well as submission link, one of the things
| that is clearly and strikingly different from modern UI is the
| lack of very abundant amount of padding space. I think it's
| almost the mantra that we need breathing room, e.g., between
| different options in a radio-group box list of items... but I
| find lesser space (as was characteristic of older UI's) to be
| more honest... more respectful to me as an end-user, more
| information-dense.
|
| I don't want to discard whatever innovation has been done, but
| man I find myself being nostalgic of old UI quite often.
| blenderob wrote:
| With old 640 x 480 or 800 x 600 resolutions, the screen real
| estate came at premium. There wasn't much room to use
| generous padding and still make all the buttons and UI fields
| fit in the low resolution displays.
| marginalia_nu wrote:
| Modern smartphones aren't that far off in terms of
| (logical) pixel counts. The difference is in input
| accuracy.
| marginalia_nu wrote:
| The mouse has significantly higher precision than touch
| interfaces. That's a large part of why modern hybrid
| interfaces have such low density.
| card_zero wrote:
| Realistically, desktop interfaces will never stop trying to
| cater for touchscreen devices. We need a eugenics program
| to breed people with sharp pointy fingers.
| culi wrote:
| It goes back to an accessibility study that found that 1.5x
| line-height is the most readable.
|
| As with a lot of things in ux accessibility research, these
| results were never replicated but the idea was seared into
| all our brains permanently. We know from research on fonts
| that ultimately, the most accessible font is the one the user
| is most used to. Sans vs. Serif vs. etc all don't seem to
| make a consistent difference across demographics. I suspect
| line spacing is something that's due for a relook
| bityard wrote:
| There's nothing preventing information-dense layouts today,
| except that the "flat design" crowd has decreed that no work
| spaces, toolbars, or controls shall have any borders or lines
| to delineate visual separation. Too much "clutter." So the
| only thing left is to separate things with vast volumes of
| whitespace which doesn't actually work all that well when you
| have to deal with different screen sizes.
| akx wrote:
| By eye alone, I'm pretty sure that is not MS Sans Serif as
| rendered in Windows 95 and Windows 98.
| vintagedave wrote:
| They've also kept the pixelated nature. The XP style sheet
| linked in another comment [1] draws at high res for its text
| and shapes and so retains the feel of the UI without the
| constraints.
|
| I -- we? -- like the 98 etc UI for its clarity and simplicity
| not its low resolution.
|
| [1] https://news.ycombinator.com/item?id=42056921
| exitb wrote:
| The fonts are pixelated, but those pixels don't appear to
| align with the physical ones, so they're blurry in some
| places. Meanwhile, on a real 98 you either had crisp fonts,
| or neatly and consistently blurred by the CRT.
| worble wrote:
| Recreating old fonts in modern browsers is a hard problem
|
| https://web.archive.org/web/20230603234837/https://vistaserv...
| akx wrote:
| Sure, but I refuse to call this a faithful recreation of the
| aesthetic until the fonts look correct. :D
|
| On a related note, I did start working on some tools to work
| with legacy .FONs for this exact purpose earlier this year,
| but the project is iceboxed for now...
| sbarre wrote:
| Sounds like it was a hard problem!
| andrewstuart wrote:
| I used a little bit of this I think in crowdwave
| https://www.crowdwave.com
| OuterVale wrote:
| What a lovely website. Thank you for sharing! :)
| notracks wrote:
| That's an interesting website!
| myfonj wrote:
| 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:
| with(document.documentElement.style){ transform =
| `scale(${ 1 / devicePixelRatio })`; transformOrigin =
| 'top left'; }
|
| (multiply the scale by whole number to get it "crisply zoomed").
|
| Still not 100% perfect, but much closer to intended rendering, I
| guess.
| paulirish wrote:
| Wow, your use of `with` is both terrifying and super fresh. I
| love/hate it.
| Aardwolf wrote:
| 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)
| too
|
| To be very pedantic: also the dropdown menu, when opened, looks
| very different than the original 98 style
| uniq7 wrote:
| Chrome on Windows 10 here. The font rendering looks very
| similar (if not identical) to what I remember it in Win98 -- no
| antialiasing, 1px thick, very easy to spot the pixels on curved
| strokes, very easy to spot the pixels on bold style, etc.
|
| The style looks incredible accurate to what I remember,
| although there are some differences:
|
| - The opened dropdown menu, as my parent suggested.
|
| - I don't remember textareas being resizable.
|
| - I remember stepped sliders had little marks indicating where
| each step is. Only continuous sliders (e.g., the one in the
| Windows volume control) had no marks.
|
| - The tabs don't look like as I remember from Win95/98, these
| ones look more like Win 3.1. Too much padding, the border is
| too thick, and the border radius is too big.
|
| - In tables, the headers looked like buttons because they were
| actually buttons (you could press them to sort the table).
| However, here they are not clickable.
| Aardwolf wrote:
| Interesting, I tried zooming in now and when zooming in far
| enough the font does look alright!
|
| It might be that it just happens to look bad on high
| resolution screens, and/or maybe some browser fractional
| scaling issue
|
| As an example, one of the text fields on the page contains
| the word "Incredible". When zoomed in it looks fine, when
| zoomed at 100% the I and the n are stuck together to each
| other without any pixel in-between which is very ugly
| prezjordan wrote:
| > also the dropdown menu, when opened, looks very different
| than the original 98 style
|
| Sadly this is the dropdown provided by the host operating
| system. The tell is that it can extend beyond the browser
| chrome! 98.css doesn't ship with any JS, and I thought about
| hacking it with checkboxes and :after but.... no thanks.
| lastdong wrote:
| Where's Clippy?
|
| Great job! I think adding Clippy notifications would be a fun
| touch
| petepete wrote:
| Here he is (+ friends)
|
| https://github.com/pi0/clippyjs
| AstroJetson wrote:
| This is pretty cool, sadly the sites that it uses to show the
| examples in action are long gone.
| agluszak wrote:
| 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.
| mrweasel wrote:
| Have much UX/UI research been put into operation systems UIs
| since Windows 95?
|
| I suppose Apple must have done some research for MacOSX, but in
| the past two decades it feels like features are just be thrown
| in, especially on mobile, with no concept of discoverability or
| consistency. More than anything I think companies desire to
| have "consistent branding" or "unique look" is to blame for
| much of this.
| bityard wrote:
| Yes, Apple at one time had a phenomenal Human Interface Guide
| for native OS X applications which was based on actual UX
| testing and research. Things like, "make your application
| features discoverable," "clearly delineate functional areas
| and controls," and "use verb+noun on action buttons." It was
| Good Stuff and it heavily informed a lot of UX decisions for
| the prominent Linux desktops at the time.
|
| It's still around but I flipped through it recently and it
| seems to be a mix of the absurdly general ("don't build an
| app for a specific screen size") to the very specific (MacOS
| and iOS APIs). Maybe there's some gold buried in there still,
| but I'm not sure where to find it.
| jandrese wrote:
| That said I'm not a fan of the black text over dark gray
| background.
|
| Also, that website includes "show code" buttons disguised as
| ordinary text.
| ranger_danger wrote:
| https://github.com/lolstring/window98-html-css-js
|
| https://github.com/anthmn/hackertosh.css
|
| https://github.com/AlexBSoft/win95.css
|
| https://github.com/1j01/os-gui
|
| https://github.com/themesberg/windows-95-ui-kit
|
| https://github.com/andersevenrud/retro-css-shell-demo
|
| https://github.com/arturbien/React95
|
| https://github.com/botoxparty/XP.css
|
| https://github.com/Gioni06/terminal.css
|
| https://github.com/jdan/98.css
|
| https://github.com/jianzhongli/csswin10
|
| https://github.com/khang-nd/7.css
|
| https://github.com/kristopolous/BOOTSTRA.386
|
| https://github.com/lachsfilet/Renkbench
|
| https://github.com/lolstring/window98-html-css-js
|
| https://github.com/micah5/PSone.css
|
| https://github.com/nostalgic-css/NES.css
|
| https://github.com/npjg/classic.css
|
| https://github.com/robbiebyrd/platinum
|
| https://github.com/bryanbraun/after-dark-css
|
| https://github.com/npjg/new-dawn
|
| https://github.com/ritenv/retro-desktop
|
| https://github.com/RoelN/c64css3
|
| https://github.com/sakofchit/system.css
|
| https://github.com/vinibiavatti1/TuiCss
|
| https://code.divshot.com/geo-bootstrap/
| prezjordan wrote:
| Author here - happy to see this posted again!
|
| This was my burnout recovery project and I wrote some thoughts on
| it recently https://notes.jordanscales.com/98-css-reflections
| sphars wrote:
| Thanks for your work on this! I recently used 98.css in my
| fairly simple web app[0] for a recreation of something from my
| childhood, and it worked beautifully for my purposes.
|
| [0]: https://www.mathsheets.net/
| prezjordan wrote:
| Phenomenal work
| Jackim wrote:
| I'd suggest using checkboxes instead of radio buttons for the
| operator selection. It would be useful, I think, to have a
| mix of just addition and subtraction, or just multiplication
| and division, instead of having one option or all four.
| sphars wrote:
| I hadn't thought of that use case, thanks for the feedback!
| lioeters wrote:
| > burnout recovery
|
| I hope you're feeling better. Interesting how retro computing,
| like old games and operating systems, can be comforting and
| even healing. I've had similar experience with emulators -
| playing Gameboy and Nintendo games from childhood, or running
| Macintosh System 9.
|
| Reminds me of Pico-8, SerenityOS, TempleOS. There's a common
| thread of a retro-style computing environment that can be
| entirely understood and controlled by the user.
|
| I imagine there's deeper psychological dynamics to this, like a
| safe "sandbox" as a therapeutic tool.
|
| It also says something about design with empathy and focus on
| user experience. There are so many hostile dark patterns these
| days in technology and society, that it's a relief to find some
| space (physical or mental) that's designed for your comfort.
| wg0 wrote:
| This is the most accurate replication I have ever seen of
| Windows 98. Wish there's one for Windows 2000 and Windows XP.
| smusamashah wrote:
| I made this Obsidian theme (now defunct) using lots of source
| from 98.css
|
| https://github.com/SMUsamaShah/Obsidian-Win98-Edition
| nielssp wrote:
| 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): https://nielssp.github.io/classic-
| stylesheets/?theme=win9x&s...
|
| 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.
| a-french-anon wrote:
| Very cool, thank you!
| sphars wrote:
| This is amazing, thanks for this! I made a simple app using
| 98.css because that was the most feature-filled retro CSS
| library I could find. Going to try and use your 3.1 schemes :)
| tiffanyh wrote:
| Love it; though the Windows 2000 theme seems a bit off
| (headings to heavy/bold).
|
| Windows 2000 was the pinnacle of UI design IMO.
| netbioserror wrote:
| Whoa. Insanely cool. Outstanding quality and theming, such a
| simple implementation. Only thing I'd want to see is theming
| for data tables, maybe even an interactive table that behaves
| like the lists and grids.
| replwoacause wrote:
| This is incredible
| syx wrote:
| This project is absolutely gorgeous, you really did a great job
| at mapping each UI elements, really great work!
| breakfastduck wrote:
| Absolutely incredible work
| zachwill wrote:
| Holy crap, that Mac OS 9 one is fantastic!!!
| alspaca wrote:
| To echo the other comments: this is beautiful work!
| jonwinstanley wrote:
| Hotdog stand!
|
| https://nielssp.github.io/classic-stylesheets/?theme=win3x&s...
| webprofusion wrote:
| Cool but the fonts are all messed up.
| sbarre wrote:
| 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). 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 ; }
|
| 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".
| sbarre wrote:
| I did a bit of digging and it seems this was generalized into
| CSS System Colours at some point:
|
| https://drafts.csswg.org/css-color/#css-system-colors
|
| And all these old colours were deprecated:
|
| https://drafts.csswg.org/css-color/#deprecated-system-colors
| croisillon wrote:
| i dream of a 16 cga colors css framework with bulky arrows
| bwg2000 wrote:
| 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!
|
| https://github.com/bwgraves/PenguinCSS
| klaussilveira wrote:
| It sucks that the fonts will never look amazing as they once were
| in CRT monitors in 800x600.
| uptownfunk wrote:
| I miss this era of life and childhood
| henning wrote:
| 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.
| ayaros wrote:
| This is beautiful. The world needs more of this.
| breakfastduck wrote:
| I hate and love this at the same time
| AstroJetson wrote:
| 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!
| metadat wrote:
| 98.css is an HN Classic, for all the best reasons.
|
| Previous discussions:
|
| https://news.ycombinator.com/item?id=33310554 - October 2022 (179
| comments)
|
| https://news.ycombinator.com/item?id=22940564 - April 2020 (211
| comments)
|
| See also:
|
| HyperCard Simulator and Decker.
|
| https://hn.algolia.com/?q=hypercard
| culi wrote:
| My collection:
|
| 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/
| sigmonsays wrote:
| 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?
| distantsounds wrote:
| developers will do anything but actually recreate visual basic
___________________________________________________________________
(page generated 2024-11-06 23:00 UTC)