5 ms·

98.css

559 points by lopespm 2mo ago

gnabgib 2mo ago
Popular in 2024 (471 points, 93 comments) https://news.ycombinator.com/item?id=42056918 https://news.ycombinator.com/item?id=42056918 2022 (606 points, 182 comments) https://news.ycombinator.com/item?id=33310554 https://news.ycombinator.com/item?id=33310554 2020 (838 points, 211 comments) https://news.ycombinator.com/item?id=22940564 https://news.ycombinator.com/item?id=22940564
- deleted 2mo ago
  [deleted]
- mysterydip 2mo ago
  see you again in 2028
- culi 2mo ago
  last time this came up people appreciated my collection https://alexbsoft.github.io/win95.css/ https://alexbsoft.github.io/win95.css/ windows 95 https://bootstra386.com/ https://bootstra386.com/ 1980's websites https://botoxparty.github.io/XP.css/ https://botoxparty.github.io/XP.css/ windows xp https://code.divshot.com/geo-bootstrap/ https://code.divshot.com/geo-bootstrap/ geocities https://cs16.samke.me/ https://cs16.samke.me/ counter strike 1.6 https://edwardtufte.github.io/tufte-css/ https://edwardtufte.github.io/tufte-css/ edward tufte https://jdan.github.io/98.css/ https://jdan.github.io/98.css/ windows 98 https://khang-nd.github.io/7.css/ https://khang-nd.github.io/7.css/ windows 7 https://micah5.github.io/PSone.css/ https://micah5.github.io/PSone.css/ playstation one https://nostalgic-css.github.io/NES.css/ https://nostalgic-css.github.io/NES.css/ nes https://sakofchit.github.io/system.css/ https://sakofchit.github.io/system.css/ apple system https://snes-css.sadlative.com/ https://snes-css.sadlative.com/ snes https://thesimscss.inbn.dev/ https://thesimscss.inbn.dev/ the sims
  - _superposition_ 2mo ago
    Geocities is broken otherwise thanks!
    - culi 2mo ago
      Thanks! It's archived at Wayback Machine at least http://web.archive.org/web/20260405010843/https://code.divshot.com/geo-bootstrap/ http://web.archive.org/web/20260405010843/https://code.divsh...
  - sphars 2mo ago
    Another one to add to your list, which is another collection of vintage styles https://nielssp.github.io/classic-stylesheets/ https://nielssp.github.io/classic-stylesheets/
  - mrkpdl 2mo ago
    and don't forget Windows 93! https://www.windows93.net https://www.windows93.net
ranger_danger 2mo ago
https://github.com/lolstring/window98-html-css-js https://github.com/lolstring/window98-html-css-js https://github.com/anthmn/hackertosh.css https://github.com/anthmn/hackertosh.css https://github.com/AlexBSoft/win95.css https://github.com/AlexBSoft/win95.css https://github.com/1j01/os-gui https://github.com/1j01/os-gui https://github.com/themesberg/windows-95-ui-kit https://github.com/themesberg/windows-95-ui-kit https://github.com/andersevenrud/retro-css-shell-demo https://github.com/andersevenrud/retro-css-shell-demo https://github.com/arturbien/React95 https://github.com/arturbien/React95 https://github.com/botoxparty/XP.css https://github.com/botoxparty/XP.css https://github.com/Gioni06/terminal.css https://github.com/Gioni06/terminal.css https://github.com/jdan/98.css https://github.com/jdan/98.css https://github.com/jianzhongli/csswin10 https://github.com/jianzhongli/csswin10 https://github.com/khang-nd/7.css https://github.com/khang-nd/7.css https://github.com/kristopolous/BOOTSTRA.386 https://github.com/kristopolous/BOOTSTRA.386 https://github.com/lachsfilet/Renkbench https://github.com/lachsfilet/Renkbench https://github.com/lolstring/window98-html-css-js https://github.com/lolstring/window98-html-css-js https://github.com/micah5/PSone.css https://github.com/micah5/PSone.css https://github.com/nostalgic-css/NES.css https://github.com/nostalgic-css/NES.css https://github.com/npjg/classic.css https://github.com/npjg/classic.css https://github.com/robbiebyrd/platinum https://github.com/robbiebyrd/platinum https://github.com/bryanbraun/after-dark-css https://github.com/bryanbraun/after-dark-css https://github.com/npjg/new-dawn https://github.com/npjg/new-dawn https://github.com/ritenv/retro-desktop https://github.com/ritenv/retro-desktop https://github.com/RoelN/c64css3 https://github.com/RoelN/c64css3 https://github.com/sakofchit/system.css https://github.com/sakofchit/system.css https://github.com/vinibiavatti1/TuiCss https://github.com/vinibiavatti1/TuiCss https://code.divshot.com/geo-bootstrap/ https://code.divshot.com/geo-bootstrap/ https://cs16.samke.me/ https://cs16.samke.me/ https://edwardtufte.github.io/tufte-css/ https://edwardtufte.github.io/tufte-css/ https://thesimscss.inbn.dev/ https://thesimscss.inbn.dev/ https://snes-css.sadlative.com/ https://snes-css.sadlative.com/ https://css.ds.dreamyard.xyz/ https://css.ds.dreamyard.xyz/ https://irv77.github.io/Xbox360UI/ https://irv77.github.io/Xbox360UI/
- xbar 2mo ago
  Thank you for the library. I was about to ask after 2 of these design spaces.
OsrsNeedsf2P 2mo ago
I really want to make one of my websites use this.. I just can't think of one that would fit. Also shout out XFCE-winxp-tc, which makes your Linux look like Windows XP. Lots of people know about Chicago95, but this project is excellent for that 2004 vibe [0] https://github.com/rozniak/xfce-winxp-tc https://github.com/rozniak/xfce-winxp-tc
- ranger_danger 2mo ago
  My gripe has always been that none of these xfce/gtk/etc. themes are ever actually pixel-perfect, even when they claim to be. Not sure if there is a legal concern there or not.
  - Gualdrapo 2mo ago
    More than legal concerns is that theming engines on each DE can be a bit limiting trying to do such things. i.e. for KDE Plasma you'd need to do a fair amount of SVG trickery to reach 100% accuracy respect of the originals. Plus the icons thing - they're not as easy as people might think. But this xfce-winxp-tc seems to be really, really close to the original. In those first two screenshots I thought it was just screenshots of the original WinXP. Also the CSS framework subject of this thread looks really identical to the widgets and stuff of Win98. But if you want true 100% pixel-perfect windows 98/xp/whatever... Just use them.
- dylan604 2mo ago
  man, it's the internet. you don't need a fit. you just need to want to.
- blurgo 2mo ago
  [dead]
jagged-chisel 2mo ago
The link points to the status bar. Was that intentional?
- zargon 2mo ago
  Probably not.
conductr 2mo ago
The HTML formatting behind the ‘Show Code’ triggered some PTSD when it appeared
- chrisweekly 2mo ago
  huh? it's clean basic HTML, for all the ones I checked...
  - conductr 2mo ago
    IE6 view source vibes
cush 2mo ago
Seeing this makes me unreasonably happy. Funny how nostalgia is
- harry8 2mo ago
  Funny how nostalgia differs for different people. I hated all that so much at the time that I installed linux (RH 7.x) from a magazine cd and learned to program in C & perl. That multirows tab UI thing was an utter abomination against usability, intelligence, good sense, decency, justice and obviously any and all aesthetics. Why bring it back? To fix it maybe?
  - j16sdiz 2mo ago
    What about discoverability? Multirow tab ai't pretty, but it allows you to know all your tabs -- unlike the modern scrollable tab bar that move one pixel on each click. I guess this depends on you are using mouse clicks or have a touch screen you can swipe
    - harry8 2mo ago
      The part where the rows switch order based on the last one you clicked so if you're searching you can't be systematic without an amazing memory is POISON for discoverability. Start on the top left tab, now it's on the bottom row. Thanks.
wseqyrku 2mo ago
Folks, can we have a css framework for TUIs please?
- bewuethr 2mo ago
  lipgloss is pretty close: https://github.com/charmbracelet/lipgloss https://github.com/charmbracelet/lipgloss
- mysterydip 2mo ago
  something like this? https://kristopolous.github.io/BOOTSTRA.386/v2.3.1/ https://kristopolous.github.io/BOOTSTRA.386/v2.3.1/
  - wseqyrku 2mo ago
    Unlike other comments this one is actually a css framework except that it's too cute. If you had ~textual theme for a css framework that could probably work for lots of practical use.
- eichin 2mo ago
  Textual? https://textual.textualize.io/ https://textual.textualize.io/
sshworld 2mo ago
Impressie that this is pure CSS with no JavaScript. The border and box-shadow tricks to recreate the beveled Win98 look are really well done!
- songhonglei1985 2mo ago
  [flagged]
deleted 2mo ago
[deleted]
pxtail 2mo ago
Nitpick: tabs in the multirow tabs example do not change position randomly as they should when clicked
lambdaone 2mo ago
Windows XP and MacOS System 7 had pretty good looking GUIs. Since then, modern keyboard-and-mouse UIs have not really improved that much; it's mostly been just evolving and polishing styling. All the real innovation has been on touchscreen devices.
- pdntspa 2mo ago
  XP? What with its Fischer-Price primary color scheme? You have got to be kidding me.
simonw 2mo ago
The blue gradients on the titlebars are actually very pleasing.
jordanscales 2mo ago
Author here! This was my burnout recovery project and holds a place near and dear to my heart. https://notes.jordanscales.com/98-css-reflections https://notes.jordanscales.com/98-css-reflections
- titzer 2mo ago
  This is awesome. IMHO things like this were the whole point of CSS. Nice job!
- bdickason 2mo ago
  Great project. Thanks for making it! Brings back memories
- timnetworks 2mo ago
  I wrapped many projects in 98.css. And some in Aero and even XP. Thank you!
  - rozap 2mo ago
    What are your favorite aero or xp css design systems?
- mattgerstman 2mo ago
  This is even more impressive knowing that its artisanal code, or as we called it back then, code.
- sphars 2mo ago
  Thanks for creating this, it fit perfect for a tiny web site I made[0]. Hits just the right mix of usability and nostalgia and makes me want to use it for more projects. [0]: https://www.mathsheets.net/ https://www.mathsheets.net/
  - woqe 2mo ago
    Off topic, I love your site - it's a perfect homage to a loving family tradition (even if it was only for a couple of vacations). This site is, I think, an example of what a beautiful internet could be (and maybe is, if anyone knows got to find more sites like this-really authentic stories). Now, I hope I'm not being fooled by an AI generated story, but even if I am, I am happy to believe in that illusion. Edit: After reflecting on this situation, your creation, your art: the css library paired with your story gave me a modern day Norman Rockwell dopamine hit. This has been an absolute experience, bravo to the collaboration!
deleted 2mo ago
[deleted]
bhouston 2mo ago
Very authentic almost down to the pixel. I love it! Btw default buttons like OK should have a thick black outline. Also windows UIs loved group boxes and radio buttons and checkboxes. I notice those are missing. Also it seems that the dropdown is missing.
- deleted 2mo ago
  [deleted]
- codazoda 2mo ago
  You may not have scrolled up. Much of that is included.
deleted 2mo ago
[deleted]
zemo 2mo ago
unjokingly I think the fact that we removed grayed out buttons for "the button just doesn't appear" is one of the more confusing UI trends of our day and the sight of a grayed out button warms my heart
- cube00 2mo ago
  Microsoft had some excellent guidance[1] on this: > Reconsider disabled controls. Disabled controls can be hard to use because users literally have to deduce why they are disabled. Disable a control when users expect it to apply and they can easily deduce why the control is disabled. Remove the control when there is no way for users to enable it or they don't expect it to apply, or leave it enabled, but provide an error message when it is used incorrectly. > Tip: If you aren't sure whether you should disable a control or provide an error message, start by composing the error message that you might provide. If the error message contains helpful information that target users aren't likely to quickly deduce, leave the control enabled and provide the error. Otherwise, disable the control. Unfortunately, that nuance has been lost in the modern version of the guidelines with no mention of disabled buttons at all [2] [1]: https://learn.microsoft.com/en-us/windows/win32/uxguide/top-violations#:~:text=Reconsider%20disabled%20controls,disable%20the%20control. https://learn.microsoft.com/en-us/windows/win32/uxguide/top-... [2]: https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/buttons https://learn.microsoft.com/en-us/windows/apps/develop/ui/co...
  - deathanatos 2mo ago
    Excellent? No, > Remove the control when there is no way for users to enable it That guidance is unhinged, and is exactly the anti-pattern that upthread points to that needs to die. Removing the control is like gaslighting the user: they're looking for "how to do X?" and documentation, Internet searchable screenshots, and, god help us, now AI, are pointing them at a button that does not exist. I cannot tell you how many times I've frustratingly circled that mulberry bush as a user, for a wide range of products. No, the button (and all other UI elements) should always present/be visible, and if there is a disabled control, there should be a HIG-standardized way to determine why it is disabled. (I.e., a mandatory tool-tip that states what actions would cause the control to enable, though I'd accept that tool-tips themselves are not always discoverable. You could have a small, standardized icon on the disabled control, like an :information-symbol-emoji: that might hit towards the tool-tip, or just put in underneath.)
blakeburnette 2mo ago
This is lovely.
sodapopcan 2mo ago
Flat design is so ridiculous. Made someone a bunch of money. Now everyone follows like sheep. Sorry for the doomer comment but, like, really. I'd love to say that I'm surprised that we haven't gotten over this, but given it's been... 20 years (?)... I'm not surprised. Also, the way multi-row tabs Just Work in the UIs of yesteryear *chef's kiss*
- acchow 2mo ago
  If it takes longer to find stuff on a page, one of the most prized metrics goes up: time on page. And here we are.
  - cube00 2mo ago
    > one of the most prized metrics goes up: time on page It took me way too long to realise those widgets that show stats quickly counting up are only there hoping you'll wait until they finish counting to see the total number. All to increase your time on the page and make the metrics look good for the designer.
- theandrewbailey 2mo ago
  We've been getting flatter over time. Win9x (and even 3.x) styles have subtle 3D cues, like the edges of buttons, window borders, tabs, and text boxes. There were gradients. Apparently, these are technologies that we've lost.
  - inigyou 2mo ago
    Win3.1 style was completely flat and ugly though.
    - ObscureScience 2mo ago
      Are you thinking of Win 2.0? https://static0.howtogeekimages.com/wordpress/wp-content/uploads/2020/05/windows_button_comparison.png https://static0.howtogeekimages.com/wordpress/wp-content/upl...
fitsumbelay 2mo ago
This is pretty cool plus I love anything that references classics like 980css and 2Advanced. I'm even OK with hearing the word "Flash" now in a way that some day I'll be with hearing "React" ...
olivierestsage 2mo ago
Still waiting desperately on a KDE theme for the win32 aesthetic
pdntspa 2mo ago
Finally, a throwback lib that seems to be mostly pixel-accurate! Some of the element spacing seems to be off but it does actually look like Windows 98. The lack of accuracy and attention to detail in a lot of these efforts is incredibly irksome and annoying, just about as obnoxious as pixel-art games with inconsistent pixel sizes (like how hard is it to render to a smaller buffer and do a simple linear upscale?!?)
kushalpandya 2mo ago
While the browser support is not complete, styling the dropdown menu to match with Windows 98 should still be doable https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select https://developer.mozilla.org/en-US/docs/Learn_web_developme...
zkmon 2mo ago
With every new version of the OS, the UI desigenrs were forced to show some change and call it improvement, even though those changes functionally unnecessary, more resource consuming, less faster, and less reliable.
- akoboldfrying 2mo ago
  > less faster I suspect those UI designers have been working on your comment, too
ithadhumor 2mo ago
This is so clean. It reminds me of the good ol’ times.
- reddalo 2mo ago
  I wish modern operating systems were like that: simple, clean, with no wasted space for decorative purposes.
deleted 2mo ago
[deleted]
luciana1u 2mo ago
[flagged]
TheAceOfHearts 2mo ago
A few months back I was playing around with win32 UI widgets and found one instance of surprising behavior which diverges from what is implemented here. To be clear this is not a dig on the project, and in particular the way it works on the web feels more correct to me. When using the TrackBar widget, equivalent of <input type=range min=0 max=100 value=0>, assuming you have value 0 / 100 if you click on the line bar it will jump to the 20 value regardless of how far or close you click on the line [0]. I found that behavior very surprising, and would've expected it to jump to wherever you clicked. [0] https://bsky.app/profile/cesarandreu.bsky.social/post/3mitlruu4gk22 https://bsky.app/profile/cesarandreu.bsky.social/post/3mitlr...
- danielrmay 2mo ago
  I remember this behavior. I think it would be more historically accurate to omit pointer cursors on expandable treeview items, too
neya 2mo ago
Is there a version for Windows 7 as well? Because, that was the last good design from anyone from that era and everything just went downhill after that.
- masklinn 2mo ago
  https://khang-nd.github.io/7.css/ https://khang-nd.github.io/7.css/
  - neya 2mo ago
    Thanks!
naveed125 2mo ago
This is really cool
t1234s 2mo ago
I remember the gradient in the title bar was a big thing for apps that pulled it off on windows 95.
anpsmn 2mo ago
I used to hate this because XP felt like such a huge upgrade. Now this is pure nostalgia.
pkage 2mo ago
I used this to build my personal site: https://ka.ge https://ka.ge . It's a pixel-perfect (and functional) recreation of the windows 98 desktop environment in under a MB.
RedShift1 2mo ago
Is there a watercolor.css? (XP beta theme).
jhoechtl 2mo ago
I do not understand efforts like these. It's not that 98 Windows UI design has been the paramount of UX. Today's technology bloat and layer upon layer of abastractions caused a total bloat. Understanding what is required to make a good UX site, and idenifying the minimum neccessary technological components is it.
- fodkodrasz 2mo ago
  You are right, Windows 2000 was the peak of UI design. Since then everything is getting worse, the rounded corners and floating margins being one example. The MacOS and web-designer influences were detrimental to usability.
rienbdj 2mo ago
I’ve always found this style ugly but so much clearer than modern UIs!
self_awareness 2mo ago
This one is pretty good, but it has one common flaw that other implementations have: lots of empty space between controls. Win95/98 was very efficient in this area. Too much empty space wastes the space.
- hilti 2mo ago
  Totally agree and I think the root cause are today's larger screen sizes, less constraints. Win95 was designed at a time when 800x600 and 1024x768 have been the standards to work with.
sleepytoken 2mo ago
[dead]
hilti 2mo ago
I love this UI, so here is my attempt to re-create this using ImGUI https://github.com/marchildmann/BevelDesk https://github.com/marchildmann/BevelDesk
akx 2mo ago
Something that always irked me about 98.css and its friends was the ever-so-slightly-incorrect version of MS Sans Serif. Finally decided to do something about it: https://github.com/jdan/98.css/pull/230 https://github.com/jdan/98.css/pull/230
shumaila12 2mo ago
[dead]
shumaila12 2mo ago
[dead]
Tepix 2mo ago
This is neat for all Windows fans. Has anyone done the same for OSF/MOTIF? Edit: Relying on my memory, the CDE style at https://nielssp.github.io/classic-stylesheets/ https://nielssp.github.io/classic-stylesheets/ comes pretty close!
jagadaga 2mo ago
Looks terrible on my machine. Something wrong with the font. And button press animation is too slow and annoying.
armchairhacker 2mo ago
Why isn’t all the text in the Microsoft font?
doitright99 2mo ago
Better interface than the current Windows UI.
CM30 2mo ago
Looks pretty neat. Definitely brings me back to the olden days of Windows 98, that's for sure. However, is there any JavaScript functionality implemented here? I tried clicking on the tabs in the tab component, and nothing happened. There's also no talk about that side of things on the page itself. So, would be nice to have some sort of scripting functionality for the more interactive elements here.
VioletVandal 2mo ago
Neat. an og OS X library would be a good follow-on idea
ghtbircshotbe 2mo ago
The page references a document Microsoft Windows User Experience. Is this online somewhere? I can only find Amazon links. Are there other good design manuals I can find online?
MetroWind 2mo ago
I have my own version of this. The 98 style is still my favorite.
keane 2mo ago
Very cool throwback! Of course not to be confused with https://960.gs https://960.gs from 2008
hwc 2mo ago
Those fonts make me very sad.
rbanffy 2mo ago
Honestly, I think Windows 2000 was peak coolness. XP was too colourful and it went down from there. Windows 8, 10, and 11 look OK, as they toned down the XP, Vista, and 7 visual noise.

559 points by lopespm 2mo ago

Popular in 2024 (471 points, 93 comments) https://news.ycombinator.com/item?id=42056918 https://news.ycombinator.com/item?id=42056918 2022 (606 points, 182 comments) https://news.ycombinator.com/item?id=33310554 https://news.ycombinator.com/item?id=33310554 2020 (838 points, 211 comments) https://news.ycombinator.com/item?id=22940564 https://news.ycombinator.com/item?id=22940564

deleted 2mo ago
[deleted]
mysterydip 2mo ago
see you again in 2028
culi 2mo ago
last time this came up people appreciated my collection https://alexbsoft.github.io/win95.css/ https://alexbsoft.github.io/win95.css/ windows 95 https://bootstra386.com/ https://bootstra386.com/ 1980's websites https://botoxparty.github.io/XP.css/ https://botoxparty.github.io/XP.css/ windows xp https://code.divshot.com/geo-bootstrap/ https://code.divshot.com/geo-bootstrap/ geocities https://cs16.samke.me/ https://cs16.samke.me/ counter strike 1.6 https://edwardtufte.github.io/tufte-css/ https://edwardtufte.github.io/tufte-css/ edward tufte https://jdan.github.io/98.css/ https://jdan.github.io/98.css/ windows 98 https://khang-nd.github.io/7.css/ https://khang-nd.github.io/7.css/ windows 7 https://micah5.github.io/PSone.css/ https://micah5.github.io/PSone.css/ playstation one https://nostalgic-css.github.io/NES.css/ https://nostalgic-css.github.io/NES.css/ nes https://sakofchit.github.io/system.css/ https://sakofchit.github.io/system.css/ apple system https://snes-css.sadlative.com/ https://snes-css.sadlative.com/ snes https://thesimscss.inbn.dev/ https://thesimscss.inbn.dev/ the sims
- _superposition_ 2mo ago
  Geocities is broken otherwise thanks!
  - culi 2mo ago
    Thanks! It's archived at Wayback Machine at least http://web.archive.org/web/20260405010843/https://code.divshot.com/geo-bootstrap/ http://web.archive.org/web/20260405010843/https://code.divsh...
- sphars 2mo ago
  Another one to add to your list, which is another collection of vintage styles https://nielssp.github.io/classic-stylesheets/ https://nielssp.github.io/classic-stylesheets/
- mrkpdl 2mo ago
  and don't forget Windows 93! https://www.windows93.net https://www.windows93.net

ranger_danger 2mo ago

https://github.com/lolstring/window98-html-css-js https://github.com/lolstring/window98-html-css-js https://github.com/anthmn/hackertosh.css https://github.com/anthmn/hackertosh.css https://github.com/AlexBSoft/win95.css https://github.com/AlexBSoft/win95.css https://github.com/1j01/os-gui https://github.com/1j01/os-gui https://github.com/themesberg/windows-95-ui-kit https://github.com/themesberg/windows-95-ui-kit https://github.com/andersevenrud/retro-css-shell-demo https://github.com/andersevenrud/retro-css-shell-demo https://github.com/arturbien/React95 https://github.com/arturbien/React95 https://github.com/botoxparty/XP.css https://github.com/botoxparty/XP.css https://github.com/Gioni06/terminal.css https://github.com/Gioni06/terminal.css https://github.com/jdan/98.css https://github.com/jdan/98.css https://github.com/jianzhongli/csswin10 https://github.com/jianzhongli/csswin10 https://github.com/khang-nd/7.css https://github.com/khang-nd/7.css https://github.com/kristopolous/BOOTSTRA.386 https://github.com/kristopolous/BOOTSTRA.386 https://github.com/lachsfilet/Renkbench https://github.com/lachsfilet/Renkbench https://github.com/lolstring/window98-html-css-js https://github.com/lolstring/window98-html-css-js https://github.com/micah5/PSone.css https://github.com/micah5/PSone.css https://github.com/nostalgic-css/NES.css https://github.com/nostalgic-css/NES.css https://github.com/npjg/classic.css https://github.com/npjg/classic.css https://github.com/robbiebyrd/platinum https://github.com/robbiebyrd/platinum https://github.com/bryanbraun/after-dark-css https://github.com/bryanbraun/after-dark-css https://github.com/npjg/new-dawn https://github.com/npjg/new-dawn https://github.com/ritenv/retro-desktop https://github.com/ritenv/retro-desktop https://github.com/RoelN/c64css3 https://github.com/RoelN/c64css3 https://github.com/sakofchit/system.css https://github.com/sakofchit/system.css https://github.com/vinibiavatti1/TuiCss https://github.com/vinibiavatti1/TuiCss https://code.divshot.com/geo-bootstrap/ https://code.divshot.com/geo-bootstrap/ https://cs16.samke.me/ https://cs16.samke.me/ https://edwardtufte.github.io/tufte-css/ https://edwardtufte.github.io/tufte-css/ https://thesimscss.inbn.dev/ https://thesimscss.inbn.dev/ https://snes-css.sadlative.com/ https://snes-css.sadlative.com/ https://css.ds.dreamyard.xyz/ https://css.ds.dreamyard.xyz/ https://irv77.github.io/Xbox360UI/ https://irv77.github.io/Xbox360UI/

xbar 2mo ago
Thank you for the library. I was about to ask after 2 of these design spaces.

OsrsNeedsf2P 2mo ago

I really want to make one of my websites use this.. I just can't think of one that would fit. Also shout out XFCE-winxp-tc, which makes your Linux look like Windows XP. Lots of people know about Chicago95, but this project is excellent for that 2004 vibe [0] https://github.com/rozniak/xfce-winxp-tc https://github.com/rozniak/xfce-winxp-tc

ranger_danger 2mo ago
My gripe has always been that none of these xfce/gtk/etc. themes are ever actually pixel-perfect, even when they claim to be. Not sure if there is a legal concern there or not.
- Gualdrapo 2mo ago
  More than legal concerns is that theming engines on each DE can be a bit limiting trying to do such things. i.e. for KDE Plasma you'd need to do a fair amount of SVG trickery to reach 100% accuracy respect of the originals. Plus the icons thing - they're not as easy as people might think. But this xfce-winxp-tc seems to be really, really close to the original. In those first two screenshots I thought it was just screenshots of the original WinXP. Also the CSS framework subject of this thread looks really identical to the widgets and stuff of Win98. But if you want true 100% pixel-perfect windows 98/xp/whatever... Just use them.
dylan604 2mo ago
man, it's the internet. you don't need a fit. you just need to want to.
blurgo 2mo ago
[dead]

jagged-chisel 2mo ago

The link points to the status bar. Was that intentional?

zargon 2mo ago
Probably not.

conductr 2mo ago

The HTML formatting behind the ‘Show Code’ triggered some PTSD when it appeared

chrisweekly 2mo ago
huh? it's clean basic HTML, for all the ones I checked...
- conductr 2mo ago
  IE6 view source vibes

cush 2mo ago

Seeing this makes me unreasonably happy. Funny how nostalgia is

harry8 2mo ago
Funny how nostalgia differs for different people. I hated all that so much at the time that I installed linux (RH 7.x) from a magazine cd and learned to program in C & perl. That multirows tab UI thing was an utter abomination against usability, intelligence, good sense, decency, justice and obviously any and all aesthetics. Why bring it back? To fix it maybe?
- j16sdiz 2mo ago
  What about discoverability? Multirow tab ai't pretty, but it allows you to know all your tabs -- unlike the modern scrollable tab bar that move one pixel on each click. I guess this depends on you are using mouse clicks or have a touch screen you can swipe
  - harry8 2mo ago
    The part where the rows switch order based on the last one you clicked so if you're searching you can't be systematic without an amazing memory is POISON for discoverability. Start on the top left tab, now it's on the bottom row. Thanks.

wseqyrku 2mo ago

Folks, can we have a css framework for TUIs please?

bewuethr 2mo ago
lipgloss is pretty close: https://github.com/charmbracelet/lipgloss https://github.com/charmbracelet/lipgloss
mysterydip 2mo ago
something like this? https://kristopolous.github.io/BOOTSTRA.386/v2.3.1/ https://kristopolous.github.io/BOOTSTRA.386/v2.3.1/
- wseqyrku 2mo ago
  Unlike other comments this one is actually a css framework except that it's too cute. If you had ~textual theme for a css framework that could probably work for lots of practical use.
eichin 2mo ago
Textual? https://textual.textualize.io/ https://textual.textualize.io/

sshworld 2mo ago

Impressie that this is pure CSS with no JavaScript. The border and box-shadow tricks to recreate the beveled Win98 look are really well done!

songhonglei1985 2mo ago
[flagged]

deleted 2mo ago

[deleted]

pxtail 2mo ago

Nitpick: tabs in the multirow tabs example do not change position randomly as they should when clicked

lambdaone 2mo ago

Windows XP and MacOS System 7 had pretty good looking GUIs. Since then, modern keyboard-and-mouse UIs have not really improved that much; it's mostly been just evolving and polishing styling. All the real innovation has been on touchscreen devices.

pdntspa 2mo ago
XP? What with its Fischer-Price primary color scheme? You have got to be kidding me.

simonw 2mo ago

The blue gradients on the titlebars are actually very pleasing.

jordanscales 2mo ago

Author here! This was my burnout recovery project and holds a place near and dear to my heart. https://notes.jordanscales.com/98-css-reflections https://notes.jordanscales.com/98-css-reflections

titzer 2mo ago
This is awesome. IMHO things like this were the whole point of CSS. Nice job!
bdickason 2mo ago
Great project. Thanks for making it! Brings back memories
timnetworks 2mo ago
I wrapped many projects in 98.css. And some in Aero and even XP. Thank you!
- rozap 2mo ago
  What are your favorite aero or xp css design systems?
mattgerstman 2mo ago
This is even more impressive knowing that its artisanal code, or as we called it back then, code.
sphars 2mo ago
Thanks for creating this, it fit perfect for a tiny web site I made[0]. Hits just the right mix of usability and nostalgia and makes me want to use it for more projects. [0]: https://www.mathsheets.net/ https://www.mathsheets.net/
- woqe 2mo ago
  Off topic, I love your site - it's a perfect homage to a loving family tradition (even if it was only for a couple of vacations). This site is, I think, an example of what a beautiful internet could be (and maybe is, if anyone knows got to find more sites like this-really authentic stories). Now, I hope I'm not being fooled by an AI generated story, but even if I am, I am happy to believe in that illusion. Edit: After reflecting on this situation, your creation, your art: the css library paired with your story gave me a modern day Norman Rockwell dopamine hit. This has been an absolute experience, bravo to the collaboration!

deleted 2mo ago

[deleted]

bhouston 2mo ago

Very authentic almost down to the pixel. I love it! Btw default buttons like OK should have a thick black outline. Also windows UIs loved group boxes and radio buttons and checkboxes. I notice those are missing. Also it seems that the dropdown is missing.

deleted 2mo ago
[deleted]
codazoda 2mo ago
You may not have scrolled up. Much of that is included.

deleted 2mo ago

[deleted]

zemo 2mo ago

unjokingly I think the fact that we removed grayed out buttons for "the button just doesn't appear" is one of the more confusing UI trends of our day and the sight of a grayed out button warms my heart

cube00 2mo ago
Microsoft had some excellent guidance[1] on this: > Reconsider disabled controls. Disabled controls can be hard to use because users literally have to deduce why they are disabled. Disable a control when users expect it to apply and they can easily deduce why the control is disabled. Remove the control when there is no way for users to enable it or they don't expect it to apply, or leave it enabled, but provide an error message when it is used incorrectly. > Tip: If you aren't sure whether you should disable a control or provide an error message, start by composing the error message that you might provide. If the error message contains helpful information that target users aren't likely to quickly deduce, leave the control enabled and provide the error. Otherwise, disable the control. Unfortunately, that nuance has been lost in the modern version of the guidelines with no mention of disabled buttons at all [2] [1]: https://learn.microsoft.com/en-us/windows/win32/uxguide/top-violations#:~:text=Reconsider%20disabled%20controls,disable%20the%20control. https://learn.microsoft.com/en-us/windows/win32/uxguide/top-... [2]: https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/buttons https://learn.microsoft.com/en-us/windows/apps/develop/ui/co...
- deathanatos 2mo ago
  Excellent? No, > Remove the control when there is no way for users to enable it That guidance is unhinged, and is exactly the anti-pattern that upthread points to that needs to die. Removing the control is like gaslighting the user: they're looking for "how to do X?" and documentation, Internet searchable screenshots, and, god help us, now AI, are pointing them at a button that does not exist. I cannot tell you how many times I've frustratingly circled that mulberry bush as a user, for a wide range of products. No, the button (and all other UI elements) should always present/be visible, and if there is a disabled control, there should be a HIG-standardized way to determine why it is disabled. (I.e., a mandatory tool-tip that states what actions would cause the control to enable, though I'd accept that tool-tips themselves are not always discoverable. You could have a small, standardized icon on the disabled control, like an :information-symbol-emoji: that might hit towards the tool-tip, or just put in underneath.)

blakeburnette 2mo ago

This is lovely.

sodapopcan 2mo ago

Flat design is so ridiculous. Made someone a bunch of money. Now everyone follows like sheep. Sorry for the doomer comment but, like, really. I'd love to say that I'm surprised that we haven't gotten over this, but given it's been... 20 years (?)... I'm not surprised. Also, the way multi-row tabs Just Work in the UIs of yesteryear *chef's kiss*

acchow 2mo ago
If it takes longer to find stuff on a page, one of the most prized metrics goes up: time on page. And here we are.
- cube00 2mo ago
  > one of the most prized metrics goes up: time on page It took me way too long to realise those widgets that show stats quickly counting up are only there hoping you'll wait until they finish counting to see the total number. All to increase your time on the page and make the metrics look good for the designer.
theandrewbailey 2mo ago
We've been getting flatter over time. Win9x (and even 3.x) styles have subtle 3D cues, like the edges of buttons, window borders, tabs, and text boxes. There were gradients. Apparently, these are technologies that we've lost.
- inigyou 2mo ago
  Win3.1 style was completely flat and ugly though.
  - ObscureScience 2mo ago
    Are you thinking of Win 2.0? https://static0.howtogeekimages.com/wordpress/wp-content/uploads/2020/05/windows_button_comparison.png https://static0.howtogeekimages.com/wordpress/wp-content/upl...

fitsumbelay 2mo ago

This is pretty cool plus I love anything that references classics like 980css and 2Advanced. I'm even OK with hearing the word "Flash" now in a way that some day I'll be with hearing "React" ...

olivierestsage 2mo ago

Still waiting desperately on a KDE theme for the win32 aesthetic

pdntspa 2mo ago

Finally, a throwback lib that seems to be mostly pixel-accurate! Some of the element spacing seems to be off but it does actually look like Windows 98. The lack of accuracy and attention to detail in a lot of these efforts is incredibly irksome and annoying, just about as obnoxious as pixel-art games with inconsistent pixel sizes (like how hard is it to render to a smaller buffer and do a simple linear upscale?!?)

kushalpandya 2mo ago

While the browser support is not complete, styling the dropdown menu to match with Windows 98 should still be doable https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select https://developer.mozilla.org/en-US/docs/Learn_web_developme...

zkmon 2mo ago

With every new version of the OS, the UI desigenrs were forced to show some change and call it improvement, even though those changes functionally unnecessary, more resource consuming, less faster, and less reliable.

akoboldfrying 2mo ago
> less faster I suspect those UI designers have been working on your comment, too

ithadhumor 2mo ago

This is so clean. It reminds me of the good ol’ times.

reddalo 2mo ago
I wish modern operating systems were like that: simple, clean, with no wasted space for decorative purposes.

deleted 2mo ago

[deleted]

luciana1u 2mo ago

[flagged]

TheAceOfHearts 2mo ago

A few months back I was playing around with win32 UI widgets and found one instance of surprising behavior which diverges from what is implemented here. To be clear this is not a dig on the project, and in particular the way it works on the web feels more correct to me. When using the TrackBar widget, equivalent of <input type=range min=0 max=100 value=0>, assuming you have value 0 / 100 if you click on the line bar it will jump to the 20 value regardless of how far or close you click on the line [0]. I found that behavior very surprising, and would've expected it to jump to wherever you clicked. [0] https://bsky.app/profile/cesarandreu.bsky.social/post/3mitlruu4gk22 https://bsky.app/profile/cesarandreu.bsky.social/post/3mitlr...

danielrmay 2mo ago
I remember this behavior. I think it would be more historically accurate to omit pointer cursors on expandable treeview items, too

neya 2mo ago

Is there a version for Windows 7 as well? Because, that was the last good design from anyone from that era and everything just went downhill after that.

masklinn 2mo ago
https://khang-nd.github.io/7.css/ https://khang-nd.github.io/7.css/
- neya 2mo ago
  Thanks!

naveed125 2mo ago

This is really cool

t1234s 2mo ago

I remember the gradient in the title bar was a big thing for apps that pulled it off on windows 95.

anpsmn 2mo ago

I used to hate this because XP felt like such a huge upgrade. Now this is pure nostalgia.

pkage 2mo ago

I used this to build my personal site: https://ka.ge https://ka.ge . It's a pixel-perfect (and functional) recreation of the windows 98 desktop environment in under a MB.

RedShift1 2mo ago

Is there a watercolor.css? (XP beta theme).

jhoechtl 2mo ago

I do not understand efforts like these. It's not that 98 Windows UI design has been the paramount of UX. Today's technology bloat and layer upon layer of abastractions caused a total bloat. Understanding what is required to make a good UX site, and idenifying the minimum neccessary technological components is it.

fodkodrasz 2mo ago
You are right, Windows 2000 was the peak of UI design. Since then everything is getting worse, the rounded corners and floating margins being one example. The MacOS and web-designer influences were detrimental to usability.

rienbdj 2mo ago

I’ve always found this style ugly but so much clearer than modern UIs!

self_awareness 2mo ago

This one is pretty good, but it has one common flaw that other implementations have: lots of empty space between controls. Win95/98 was very efficient in this area. Too much empty space wastes the space.

hilti 2mo ago
Totally agree and I think the root cause are today's larger screen sizes, less constraints. Win95 was designed at a time when 800x600 and 1024x768 have been the standards to work with.

sleepytoken 2mo ago

[dead]

hilti 2mo ago

I love this UI, so here is my attempt to re-create this using ImGUI https://github.com/marchildmann/BevelDesk https://github.com/marchildmann/BevelDesk

akx 2mo ago

Something that always irked me about 98.css and its friends was the ever-so-slightly-incorrect version of MS Sans Serif. Finally decided to do something about it: https://github.com/jdan/98.css/pull/230 https://github.com/jdan/98.css/pull/230

shumaila12 2mo ago

[dead]

shumaila12 2mo ago

[dead]

Tepix 2mo ago

This is neat for all Windows fans. Has anyone done the same for OSF/MOTIF? Edit: Relying on my memory, the CDE style at https://nielssp.github.io/classic-stylesheets/ https://nielssp.github.io/classic-stylesheets/ comes pretty close!

jagadaga 2mo ago

Looks terrible on my machine. Something wrong with the font. And button press animation is too slow and annoying.

armchairhacker 2mo ago

Why isn’t all the text in the Microsoft font?

doitright99 2mo ago

Better interface than the current Windows UI.

CM30 2mo ago

Looks pretty neat. Definitely brings me back to the olden days of Windows 98, that's for sure. However, is there any JavaScript functionality implemented here? I tried clicking on the tabs in the tab component, and nothing happened. There's also no talk about that side of things on the page itself. So, would be nice to have some sort of scripting functionality for the more interactive elements here.

VioletVandal 2mo ago

Neat. an og OS X library would be a good follow-on idea

ghtbircshotbe 2mo ago

The page references a document Microsoft Windows User Experience. Is this online somewhere? I can only find Amazon links. Are there other good design manuals I can find online?

MetroWind 2mo ago

I have my own version of this. The 98 style is still my favorite.

keane 2mo ago

Very cool throwback! Of course not to be confused with https://960.gs https://960.gs from 2008

hwc 2mo ago

Those fonts make me very sad.

rbanffy 2mo ago

Honestly, I think Windows 2000 was peak coolness. XP was too colourful and it went down from there. Windows 8, 10, and 11 look OK, as they toned down the XP, Vista, and 7 visual noise.