15 ms·

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

838 points by bennettfeely 6y ago

kuschku 6y ago
I’m impressed by how few people here have tested it in Firefox – Fieldset is broken, Button has ::-moz-focus-inner not properly disabled, Radio/Option isn’t rendering correctly (still shows the original input element as 2x2px black box), and quite a bit more. Hilariously, this is quite a good example on why the Chrome monoculture is just repeating the IE monoculture of years past
- tomxor 6y ago
  I use FireFox, I don't think it's that bad... xbrowser native UI consistency is literally the hardest xbrowser thing to do. Looking at firefox and chrome side by side it's actually impressive how they look near identical other than a few stray pixels.
- prezjordan 6y ago
  I’ve been getting a good amount of bug reports from FF users, and am grateful because - you are right - I did not test in it and should have. I’m tracking the fieldset and inner-focus ones (though unable to repro the latter on my machine). The third is new to me if you’d be so kind as to share some details about your system.
  - kuschku 6y ago
    I’m running Firefox 75 on Ubuntu 18.04. Pretty standard usage. Fieldset doesn’t allow inset box-shadows on Firefox, but you can fix that relatively easy: fieldset { position: relative; } fieldset::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #808080, inset 2px 2px #dfdfdf; } Moz-Inner-Focus and the Radio/Options are also equally easily fixed: ::-moz-focus-inner { border: 0; } input[type="radio"], input[type="checkbox"] { visibility: hidden; }
tomxor 6y ago
I can't believe how intensely functional the UI design of windows 95/98 was when looking back, and I say this as someone who intensely hates windows overall - but credit where it's due. Only when using it now is it clear how well they minimized ambiguity and cognitive load... everything is so frickin obvious. Contrast that with modern aesthetically obsessed UIs, ever ambiguous, lack of clear distinctions not in both spatial boundaries and UI states - it's a constant guessing game for the user, never certain about the outcome of an interaction, giving you this distracting sense of unease rather than just focusing on whats behind the UI.
- stjohnswarts 6y ago
  I don't get it when people people use strong descriptors like "unease" and "jarring" when describing UIs. I don't think I've ever had a UI that made me feel fearful for my life/psychological well-being like that.
  - tomxor 6y ago
    It's subconscious, if you don't try to notice you wont, instead you will just stop using things or dislike using things without knowing why specifically - or more subtle still, you will not be as efficient in those programs... The UI is inbetween what you are trying to interact with, so if it doesn't quite work right then the emotions are going to be more subtle and hard to differentiate because it's not your main focus. You are more likely to intuitively get this once you have some experience attempting to design effective UIs (and actually trying to care about it).
kup0 6y ago
It is rather amusing how this doesn't work in IE11. I'd almost be inclined to fork and make a version that does, just for the heck of it... for you know, corporate environments that need Win98-styled intranets :)
nonamenoslogan 6y ago
This is very cool! Mind if I fork and re-work to look like Solaris? :D
laken 6y ago
Wow that's pretty fleshed out. I created something similar 3 years ago, but I lost motivation (named it the same too haha): https://github.com/LakenH/98css https://github.com/LakenH/98css
stjohnswarts 6y ago
First thing I do in Windows is turn off the eye candy :) . I mostly use linux with KDE. It still has a real file menu and visible scrollbars and I hope that never changes :)
WolfOliver 6y ago
I bet the css is totally broken when you open it in a Windows 98 Internet Explorer :D
ChrisArchitect 6y ago
Flexbox was originally invented in the late ’90s by Mozilla (using vendor prefixes — `display: -moz-box`, `-moz-box-flex`, etc.) in order to use CSS to style and lay out their Windows 9x app UI. We’ve come full circle. https://twitter.com/frankyan/status/1253063046060109824 https://twitter.com/frankyan/status/1253063046060109824
busymom0 6y ago
I surprisingly like it! Only thing I didn't like is the font (makes it hard to read for some reason) but otherwise, it looks wonderful. I might use this as an inspiration for future project I am building!
winrid 6y ago
Oh yes. I can't wait to think of a product to build using this design system.
- enhdless 6y ago
  I think it would be hilarious to use this in a desktop Electron app and come full circle.
  - winrid 6y ago
    To top it off the bundle size and memory usage would still be more than just running Win95 in a VM...
    - speedgoose 6y ago
      I ran windows 95 in VirtualBox recently to play an old game. You need a shady kernel hack because modern CPUs are way too fast, and some shady display drivers. Electron sounds nicer.
    - squiggleblaz 6y ago
      It would give you the authentic feeling of running Win95 on a machine that maybe only had 8 MiB ram.
      - winrid 6y ago
        My sister had a Win95 machine with 32mb of ram and 2mb of video memory. What a powerhouse! Played 3D games on that thing...
- runawaybottle 6y ago
  I’ve got one, build the windows desktop with an IE link, basically a div with an iframe, and a text box. I wonder how many windows apps we can build out in a few lines of JS.
  - 6y ago
imbusy111 6y ago
I'm using this next time I'm building something from scratch. Thanks.
- LarvaFX 6y ago
  Me too
slobotron 6y ago
Certainly evokes a lot of nostalgia. The tactile feel of 3D buttons can be mesmerizing at times, a lot of experience has been lost in the race to flat, in addition to lowered affordability of modern UIs. One bug: Firefox on Linux introduces an extra dotted rectangle on focused buttons (so they end up with two oddly overlapping focus indicators)
- chrismorgan 6y ago
  I’m observing this extra outline on Firefox Nightly on Windows. I can’t discern what’s making it, and suspect it may be a Firefox bug, somehow.
  - Izkata 6y ago
    It's literally a feature, not a bug: https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-focus-inner https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-focu... https://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links https://stackoverflow.com/questions/71074/how-to-remove-fire...
    - chrismorgan 6y ago
      Ah yes, I had completely forgotten about ::-moz-focus-inner.
- zozbot234 6y ago
  There are a few extra bugs: one should be able to style a 'default' button with an extra black border giving it a lightly "inset" appearance, as is usual in this style. And "disabled" buttons shouldn't react to a click by changing their appearance. It would also be nice to support tristate checkbox and radio buttons (the "3rd" state is basically a selection with lowered contrast, so this should be achievable) and "ON/OFF switch"-like controls, which appear as "sticky" buttons where the ON state also has a lighter background.
davidgh 6y ago
This is fantastic. I looked for a CSS library like this some years ago and couldn’t find one. I didn’t have the courage to try to make it myself.
jhbadger 6y ago
Are there similar retro-UI systems for other older interfaces? While I don't have that much nostalgia for Win98 myself, I could see how it could be cute to have similar systems for classic (System 6-7) Mac, Amiga, etc. I've seen websites that try to go for these looks, but I think they were manually done.
- karateka 6y ago
  I've noticed there are a couple of these now so I threw a quick list up on Github: https://github.com/matt-auckland/retro-css https://github.com/matt-auckland/retro-css
  - ZenPsycho 6y ago
    i found this too, (but i can’t find a demo page) https://github.com/npjg/new-dawn https://github.com/npjg/new-dawn
    - lioeters 6y ago
      That one was a bit disappointing - here's a screenshot: https://imgur.com/oFz7e0p https://imgur.com/oFz7e0p Funny enough, just yesterday (before seeing this post), I was searching for re-creations of the Macintosh interface. Here's the best one I could find: Apple Macintosh System 7 UI in CSS - https://github.com/pfcode/system7css https://github.com/pfcode/system7css (Screenshot: https://imgur.com/ZEKolbS https://imgur.com/ZEKolbS) Aah, that nostalgic comfort.. Makes me dream of building my next toy "OS in a browser" from this.
      - ZenPsycho 6y ago
        What would be nice is if there was something like a standard test or demo set of HTML for all these to work against, which would enable a way to switch themes.
teruakohatu 6y ago
This is great, I would love to be able to use this. Win98 always felt like a highpoint in easy to UI design. I am not a CSS ninja, how easy would it be to make this responsive? The example do not appear to be responsive.
- agumonkey 6y ago
  I somehow enjoyed the ride to css3 and full fledged responsive multi layer dom presentations but I do miss the wintel days GUI concept. Something about the simplicity, clarity.. makes it more to the point than the hyper capable yet systems of today.
- darepublic 6y ago
  From what I could see they were responsive
runawaybottle 6y ago
Using this to style my online resume next time.
zozbot234 6y ago
Isn't it a bit ridiculous that we need to do this in the first place? Shouldn't clear 3D controls on a neutral gray background be the default user-agent appearance, with no need for custom CSS of any sort?
- zapzupnz 6y ago
  Considering non-formatted HTML files are supposed to be documents, not windows, no? Adding to this: without any specification, the browser should, and does, use the operating system's native controls when rendering controls such as <button>.
  - the_pwner224 6y ago
    Not anymore for chrome & edge https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html https://blog.chromium.org/2020/03/updates-to-form-controls-a... All part of Google's master plan to commoditize desktop OSs. Everyone outside the US already uses Android, soon your computer will be a Chrome box instead of a Windows/Mac/Linux box. First they did the browser title bar & tab bar integration/styling & removed the normal OS title bar, then they made Chrome OS, now they are removing the last traces of OS-specific styling for those who haven't already switched to Chrome OS. And Gmail, Gdocs, and Chromebooks are huge in kids schools. The kids don't know anything outside the non-Google universe. Most of the kids I know think MS Word/Excel/PowerPoint are lame (not that I'm a fan, but you have to admit MS Office is unrivaled in its abilities). 20 years from now they will have a gigantic monopoly over a huge range of computing.
    - Thorentis 6y ago
      I ... have no issue with those Chromium changes. I don't want Google to control the web, but I certainly wish there more standards based work went into designing a set of controls that was default across all browsers that was coherent, consistent, and was a safe default if you didn't want a theme. Sadly, Bootstrap become this a while ago, followed by a plethora of other web "defaults" that you just plunk into the top of your HTML file to get a whole new design without changing much. I'm hoping Firefox Foundation or something like that will do some work in this area.
chadlavi 6y ago
> Today's mood > > Claire Saffitz > > Brad Leone > > Chris Morocco > > Carla Lalli Music I just wanted to let the author know that at least one other person appreciates this though tbh most of the time for me it's Sohla.
- frosted-flakes 6y ago
  If anyone's wondering, these are the people that regularly appear on Bon Appetit magazine's YouTube channel.
- prezjordan 6y ago
  ;) Glad someone noticed. A few other goodies in there.
- LandR 6y ago
  I think Molly is my favourite. Although I still can't make Carbonara well to save my life.
enhdless 6y ago
I think this would be a great reference for teaching introductory UI design; with the 3D-ness you can clearly see the different states that each UI element requires. I also really like the quotes about each component! Is there an online copy of this Microsoft Windows User Experience manual somewhere?
- layer8 6y ago
  You can borrow a (badly scanned) copy on archive.org: https://archive.org/details/microsoftwindows00micr_0/page/630 https://archive.org/details/microsoftwindows00micr_0/page/63...
airstrike 6y ago
We've come full circle. Thank you for this. It's so simple it's actually peaceful
- sedatk 6y ago
  We’ve also come full circle because this was pretty much the browser’s default style on Netscape.
Semiapies 6y ago
Surprising how rough on the eyes nostalgia can be, between the small font size and low contrast colors.
Causality1 6y ago
That's as refreshing as a dunk in a cold pool. My God we need more UIs that instantly tell you what they can and cannot do. Seems like the modern ones do as much as they can to obscure everything.
- ObsoleteNerd 6y ago
  Considering how cyclical everything is I wouldn’t be surprised if we see a return to Win95/98 style UIs soon enough. They’ll advertise it as “revolutionising productivity with an innovative new approach to desktop computing” and give us the a recoloured Win98. I’d probably switch back to Windows if they did.
- jerzyt 6y ago
  Some of the modern web pages are so obscure you have no idea what to click.
irrational 6y ago
I was going to post the quote about them not stopping to think if they should, but then I actually clicked the link. Wow, that brought back a lot of nostalgia. I haven't even used Windows in 15+ years, but I now realize that I still have a fondness for the interface of my youth ;-)
- skissane 6y ago
  I might be a few years older than you – I get far stronger nostalgic feelings from Windows 3.x UI than that of Windows 9x.
  - Minor49er 6y ago
    You're in luck: https://codepen.io/matthijss/pen/wzYjJQ https://codepen.io/matthijss/pen/wzYjJQ
    - squiggleblaz 6y ago
      Haha. I was just thinking of that. Been wondering if there's any operating system I can theme to look like Win3.1 any more - the aesthetic of Windows 95 is better but Windows 3.1 seems to fit our contemporary standards of flat and fewer colors better. I did like the more rounded buttons of Windows 3.1 better than the harsher edges of the Windows 95 buttons. The mistakes a driving me crazy. I assume the fonts are just issues with me not having the right font installed. The command menu should be flat and the bar in it should be longer, rectangular and with a drop shadow. The minimize/maximize buttons don't look at all right (no highlight, too stretched). When you move the window, the frame looks wrong - i think the grains are too big and widely separated.
      - anthk 6y ago
        Linux + XFCE has a Win 3.1 theme on b00merang's site. Borrow the icons from the Chicago95 theme and you are done.
        6y ago
atum47 6y ago
that's really gorgeous. I find windows 95 aesthetics a master piece. I'm not gonna lie, I thought about windows 95 when I was creating FOS, my Fake Operational System "framework". I'm thinking about refactoring it and I'll may incorporate windows color scheme to it. Here's the link if you wanna see what I am talking about. https://github.com/victorqribeiro/fos https://github.com/victorqribeiro/fos
- pazimzadeh 6y ago
  I think it's really the NeXTSTEP aesthetic.
  - LarvaFX 6y ago
    Yes it truly is. But Microsoft perfected it.
  - sedatk 6y ago
    ...or OSF/Motif aesthetic.
- cm2187 6y ago
  Fashion is cyclical. At one point people will get bored of these ambiguous modern UI with hidden fields and gestures, and made of 50 shades of light grey that only a calibrated display can render with any discernable contrast. And we will rediscover the merit of clear and explicit UIs, and Apple will claim it just invented it!
  - schrijver 6y ago
    I wouldn’t be surprised :) The Windows 95 aesthetic is already back into fashion, I see it a lot on flyers, web art… just not yet in computer applications! I guess that’s a matter of time. Check out the flyer for this party: https://highclouds.org/highclouds-online-antivirus-party-magdalena-bay-cobrah-dolly-bing-bing/ https://highclouds.org/highclouds-online-antivirus-party-mag... They used vectors, looks like the Windows 95 aesthetics that was so connected to pixel survives this transition quite well!
taikawatiti 6y ago
If the author is here, this is perfect except for 'space' not being able to click a button
- deleted 6y ago
  [deleted]
TimTheTinker 6y ago
Really nice! One minor nitpick: the title bar buttons actually need to be a pixel or two larger in each direction (so 2 or 4 pixels more of height and width, while remaining centered).
- jspash 6y ago
  That's the beauty of open code. You can pick all the nits you want -> https://github.com/jdan/98.css/issues https://github.com/jdan/98.css/issues :)
- theandrewbailey 6y ago
  Also, the font needs to be MS Sans Serif, not Arial. https://en.wikipedia.org/wiki/MS_Sans_Serif https://en.wikipedia.org/wiki/MS_Sans_Serif
bdcravens 6y ago
Nitpick: "My First VB4 Program" - VB6 came out in 1998
- boomlinde 6y ago
  I don't get the nit. VB6 came out in 1998 which caused every copy of VB4 to disintegrate?
- 2038AD 6y ago
  The present is made up of pieces of the past, my friend :)
thaeli 6y ago
I'd really love a Macintosh System 7.1 version of this.
petters 6y ago
Would be cool if it came with JS to resize, move close windows etc.
- gear54rus 6y ago
  Only if it's easy to swap out for your own. It's unlikely the JS it would come from would fit into they way you do things normally (in your project or even your head).
- JansjoFromIkea 6y ago
  When I was trying to do something similar I left all that stuff to the side on the assumption someone had made a neat wrapper to handle it ...and they did! https://github.com/bokuweb/react-rnd https://github.com/bokuweb/react-rnd
nstart 6y ago
My heart beat a little faster when I saw the VB dialog box. I experienced building software for the first time when I was taken to my father's office where they used VB and Foxpro (and still do) to build ERP systems. Everything looked like this site. The waves of nostalgia are sure coming on hard. Thank you to the author of this. This whole site is a work of art!
- prezjordan 6y ago
  This is so wonderful to read, thank you :) 100% feel the same way which is what kept me going to ship this.
CawCawCaw 6y ago
Brilliant. Now for Windows XP...
- iforgotpassword 6y ago
  <link rel="stylesheet" href="fisher-price.css"> :-)
- prezjordan 6y ago
  In between thinking of this project (about 2 years ago) and now I was _so_ desperate for someone to clue me in on the gradients used to draw windows XP window title bars. Still never found the answer.
travbrack 6y ago
For some reason this brought back memories of mIRC
krtkush 6y ago
The joy I get by clicking on those buttons cannot be expressed in words here.
- phreack 6y ago
  The clarity of such perfectly defined buttons is unbeatable! Maybe they'd be more amicable to modern tastes with rounded shapes or a touch of color, but that 3d visual effect of a button being physically pushed definitely needs to come back and never leave us again, it's so clear and pleasant!
Dig1t 6y ago
ouch, open this in Safari and highlight some text, then unhighlight the text. It's literally barely readable, maybe some bugs to fix there, but it looks great in Chrome. Cool idea!
asutekku 6y ago
The checked disabled radio button and text inputs do not look right on iPhone. Otherwise solid work!
lmoa 6y ago
Looks cool. Does it work on IE?
kccqzy 6y ago
The controls look great but the text looks off. I forgot the UI font in Windows 98 but perhaps it was Tahoma. Maybe try that and disable anti-aliasing. Better yet, get an image of how the actual font is rendered on Windows 98 and make the glyphs into a bitmap font. That would also sidestep all the font renderer differences between then and now.
- prezjordan 6y ago
  I started off by bringing in MS Sans Serif from my windows 98 VM, but ditched it since it was rendering almost identically to Arial. Making a webfont out of the original 8pt Tahoma sounds fun, but I am unsure if I have to do it manually. I was worried about having to provide bold glyphs, and wasn't sure how to make it scale while still looking pixelated. (That is, if I need to hand-draw an 8x7 lowercase 'e' do I also need to hand-draw the 24x21 version?) Anyway, I cut it but agree I should get this right!
prezjordan 6y ago
Author here! Thanks for all the nice comments (and helpful bug reports). This idea has been in the back of my mind for ~2 years now but I recently got a wave of motivation and decided to ride it - and here we are. Happy to answer any Qs :)
- VikingCoder 6y ago
  Fun work! Thanks for sharing. I was somewhat reminded of Wt [1], and I still wish that were open source. Also reminded a bit of Blazor [2]. [1] https://www.webtoolkit.eu/widgets/layout/ https://www.webtoolkit.eu/widgets/layout/ [2] https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-3.1 https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=as...
- fermienrico 6y ago
  I think the Text input field doesn’t match the rest.
  - andai 6y ago
    On iOS text and textarea are rounded. Not sure if you can override that with css.
    - efreak 6y ago
      You can get around that with contentEditable, but that creates an even bigger mess.
- raihansaputra 6y ago
  just wanted to say kudos for the BA Test Kitchen reference!
- djsumdog 6y ago
  It looks really good. It makes me wish I had a retro project idea I could use it on. It'd be great for a demo-scene website.
- hanniabu 6y ago
longtermd 6y ago
Check out https://poolside.fm/ https://poolside.fm/ for some extra nostalgia Operating Systems.
5- 6y ago
nice attempt! it might be useful to boot real windows 98 (e.g. by visiting http://copy.sh/v86/?profile=windows98 http://copy.sh/v86/?profile=windows98) and check how things interact with clicks, in particular how checkboxes and radio buttons look with mouse down.
pgug 6y ago
What is the name for these simple css files that can turn plain html into a full layout/theme? Can I find a list of these somewhere?
- worble 6y ago
  I don't think there's anything official or even standard for naming. Some places refer to them as class-less: https://github.com/troxler/awesome-css-frameworks#class-less https://github.com/troxler/awesome-css-frameworks#class-less And these seem to be the strictly frameworks without classes. This site refers to them as "drop-in" frameworks (and lets you test them out live): https://dohliam.github.io/dropin-minimal-css/ https://dohliam.github.io/dropin-minimal-css/ The ones here appear to not be strictly class-less, since I know at least some of those frameworks do have classes, but are probably optional/very light on classes. 98.css would also be a "drop in" in this case since you can see things like the title bar do use classes: <div class="title-bar"> <div class="title-bar-text">A Title Bar</div> <div class="title-bar-controls"> <button aria-label="Close"></button> </div> </div>
severak_cz 6y ago
This is great. I was actually building something similar for my VST stuff page (work in progress - http://tilde.town/~severak/studio/ http://tilde.town/~severak/studio/). Now I am gonna copy that neat box-shadow border from 98.css.
andy_ppp 6y ago
My god they have even managed to switch off the anti aliasing of fonts! Looks so accurate I doubt I would be able to tell the difference, well done.
- xattt 6y ago
  I can’t decide whether the aliasing is part of the aesthetic or not.
  - andy_ppp 6y ago
    I am pretty sure it’s deliberate, I mean did ‘98 have clear type yet? Did it work?
    - tomcooks 6y ago
      [No, it started with XP](https://en.wikipedia.org/wiki/ClearType#Implementations https://en.wikipedia.org/wiki/ClearType#Implementations)
mnorvais 6y ago
Looks nice, gonna try to use it some of my projects. The old Windows UI is really functional and easy to understand
- MaxBarraclough 6y ago
  I generally agree, but as Semiapies pointed out there's some low-contrast text in places. Vaguely relevant: The FOX Toolkit implements the Windows 95 look for lightweight Linux/Windows GUI applications. [0] A pity we don't see more GUIs like that today. [0] http://fox-toolkit.org/screenshots.html http://fox-toolkit.org/screenshots.html
Bro2020 6y ago
Strong And Beautiful, Just Like Deals And Discounts. https://bit.ly/3eAbZ2K https://bit.ly/3eAbZ2K
FpUser 6y ago
Oh, those days when designers actually thought of ergonomic vs modern insanity with no standard, no contrast, no ability to deduct function from the look etc. etc. Well there are exceptions but generic picture looks rather depressing.
golemiprague 6y ago
Now bring me a visual editor like the one in visual basic
joshuawithers 6y ago
I’m not smart enough to get this into a Wordpress theme, but if it were ported to WP, it’d be my personal blog theme
Hamuko 6y ago
Guessing it doesn't have those fancy warning symbols that some Windows 98 dialogs had?
jannes 6y ago
I noticed that it's using box-shadow for the "3d effect" on buttons and window borders. I'm a bit disappointed they didn't use the "inset" or "outset" border-style [0] which pretty nobody uses anymore these days. I thought this kind of design is pretty much why these border-styles exist. [0]: https://htmldog.com/references/css/properties/border-style/ https://htmldog.com/references/css/properties/border-style/
- runxel 6y ago
  It may be because the transition wouldn't be as smooth as it is now?
  - jannes 6y ago
    Did Windows 98 have smoooth transitions, though?
    - runxel 6y ago
      Haha, you got a point there ;)
- JansjoFromIkea 6y ago
  Having done one of these myself a while ago, box-shadow was the only way to get the pixelated border corners. Here's the mixin I done https://github.com/padraigfl/packard-belle/blob/master/src/_scss/w98/functions/box-shadows.scss https://github.com/padraigfl/packard-belle/blob/master/src/_...
- zeven7 6y ago
  From what I recall, the shading for inset and outset is left up to the browser and is different for different browsers.
chj 6y ago
It may as well be called 2000.css, at least I won't be able to tell the difference.
- theandrewbailey 6y ago
  Windows 2000 used Tahoma for its UI font, but 9x used MS Sans Serif. https://en.wikipedia.org/wiki/MS_Sans_Serif https://en.wikipedia.org/wiki/MS_Sans_Serif https://en.wikipedia.org/wiki/Tahoma_(typeface) https://en.wikipedia.org/wiki/Tahoma_(typeface)
dvfjsdhgfv 6y ago
Does anyone know a similar project but with Windows 10 styling?
- yadco 6y ago
  https://github.com/microsoft/fluentui https://github.com/microsoft/fluentui
zubairq 6y ago
Really nice. I tried to get Windows look and feel in the headers for the Yazz code editor, but maybe I should have used this CSS lib instead. Great Job! https://yazz.com/app/homepage.html https://yazz.com/app/homepage.html
- canada_dry 6y ago
  > https://news.ycombinator.com/item?id=21734845 https://news.ycombinator.com/item?id=21734845 This (yazz/pilot [i]) needs more exposure... the webapp form designer is gorgeous and useful. [i] https://yazz.com/app/homepage.html https://yazz.com/app/homepage.html
  - zubairq 6y ago
    Thanks, glad you like it. We haven’t really pushed it out yet as we really want to get the debugger and App Store released before we can say it is useful
larschdk 6y ago
The widgets look spot on, but the text has atrocious kerning. 'ti', 'll', 'd!' are squashed together. Windows 95++ had extremely good small size font rendering and did pixel perfect alignment and kerning of pretty much any font (However, the UI font was probably bitmapped). Remove the 'letter-spacing' styling - it breaks kerning.
JansjoFromIkea 6y ago
Hey man, if you're looking for the fonts I had them on a similar thing I done a while ago. Only normal size unfortunately https://github.com/padraigfl/packard-belle/tree/master/src/_scss/w98/fonts https://github.com/padraigfl/packard-belle/tree/master/src/_... Cant remember where I sourced them from but it's probably in the code somewhere, the MSSansSerif ones are pixel perfect as far as I'm aware. It outputted CSS to be used independently but it was very much a secondary concern, pretty sure I'd be the only person who knows how to use it without backtracking from the react bits https://github.com/padraigfl/packard-belle/blob/master/css/w98_simple.css https://github.com/padraigfl/packard-belle/blob/master/css/w... the data-uris might be useful, will have a look through your issues to see if I can help with anything! Here's the attempt at a Windows 98 recreation I done with it feel free to take whatever from it: http://packard-belle.netlify.app/ http://packard-belle.netlify.app/ Tried doing a design system thing too but got lazy: http://packard-belle.herokuapp.com/ http://packard-belle.herokuapp.com/
- gmmeyer 6y ago
  This looks so good, especially the fake monitor effects
  - JansjoFromIkea 6y ago
    Thanks! Funnily that bit caused big issues for most my friends I showed it too, was definitely a case where rigidly straining to try and be _authentic_ clashed with the way most people remember things. There's an option to turn it off, I think (maybe not on mobile) Stole that filter off codepen mind, nowhere near that clever... this one but toned down a bit https://codepen.io/lbebber/pen/XJRdrV https://codepen.io/lbebber/pen/XJRdrV
- prezjordan 6y ago
  Beautiful work, thanks so much :) I'll keep poking at fonts and see what I can learn https://github.com/jdan/98.css/issues/10 https://github.com/jdan/98.css/issues/10 I love that we arrived at the ~same solution using inset shadows for the buttons. Makes me feel validated.
mayalan 6y ago
I'm not sure you can read this thread without thinking about this Bill Gates and Steve Balmer recreating what is love... https://www.youtube.com/watch?time_continue=8&v=byU3PZSn-CY https://www.youtube.com/watch?time_continue=8&v=byU3PZSn-CY
mikorym 6y ago
It's weird how this reminds me of the last two years of the newest changes in UIs. I think it was Windows 10 that brought back minimalist borders (as opposed to Windows 7)? I am not sure whether I am imagining this.
birslip 6y ago
It's great, I love it! It's quite similar to this project on iOS: https://github.com/Baddaboo/ClassicKit https://github.com/Baddaboo/ClassicKit They even went as far as building a fake Internet Explorer app.
- prezjordan 6y ago
  Woah, amazing attention to detail there. I love that they include this image in the README [0], buttons were the first thing that hooked me into building this. [0] https://github.com/Baddaboo/ClassicKit/raw/master/Images/pixel.png https://github.com/Baddaboo/ClassicKit/raw/master/Images/pix...
paweladamczuk 6y ago
Does anyone know what the easiest way to make those windows movable and resizable (dynamic in general) would be? Great work, I love this interface style!
kup0 6y ago
I don't know what it is about the 95, 98, 2000 era of Windows UI and aesthetics but I still strongly prefer it.
- AnIdiotOnTheNet 6y ago
  It was functional and clear, unlike modern "hide everything" UIs?
  - kup0 6y ago
    Very true, especially when it comes to scroll bars and similar elements. While I do enjoy some "modern" aesthetics from time to time, the Win98 style UI just feels far more "productive", for lack of a better term. And as much as I like that Linux in many ways often keeps that type of UI around, I still feel like Win98 did it better (almost can't believe I'm saying that).

838 points by bennettfeely 6y ago

I’m impressed by how few people here have tested it in Firefox – Fieldset is broken, Button has ::-moz-focus-inner not properly disabled, Radio/Option isn’t rendering correctly (still shows the original input element as 2x2px black box), and quite a bit more. Hilariously, this is quite a good example on why the Chrome monoculture is just repeating the IE monoculture of years past

tomxor 6y ago
I use FireFox, I don't think it's that bad... xbrowser native UI consistency is literally the hardest xbrowser thing to do. Looking at firefox and chrome side by side it's actually impressive how they look near identical other than a few stray pixels.
prezjordan 6y ago
I’ve been getting a good amount of bug reports from FF users, and am grateful because - you are right - I did not test in it and should have. I’m tracking the fieldset and inner-focus ones (though unable to repro the latter on my machine). The third is new to me if you’d be so kind as to share some details about your system.
- kuschku 6y ago
  I’m running Firefox 75 on Ubuntu 18.04. Pretty standard usage. Fieldset doesn’t allow inset box-shadows on Firefox, but you can fix that relatively easy: fieldset { position: relative; } fieldset::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #808080, inset 2px 2px #dfdfdf; } Moz-Inner-Focus and the Radio/Options are also equally easily fixed: ::-moz-focus-inner { border: 0; } input[type="radio"], input[type="checkbox"] { visibility: hidden; }

tomxor 6y ago

I can't believe how intensely functional the UI design of windows 95/98 was when looking back, and I say this as someone who intensely hates windows overall - but credit where it's due. Only when using it now is it clear how well they minimized ambiguity and cognitive load... everything is so frickin obvious. Contrast that with modern aesthetically obsessed UIs, ever ambiguous, lack of clear distinctions not in both spatial boundaries and UI states - it's a constant guessing game for the user, never certain about the outcome of an interaction, giving you this distracting sense of unease rather than just focusing on whats behind the UI.

stjohnswarts 6y ago
I don't get it when people people use strong descriptors like "unease" and "jarring" when describing UIs. I don't think I've ever had a UI that made me feel fearful for my life/psychological well-being like that.
- tomxor 6y ago
  It's subconscious, if you don't try to notice you wont, instead you will just stop using things or dislike using things without knowing why specifically - or more subtle still, you will not be as efficient in those programs... The UI is inbetween what you are trying to interact with, so if it doesn't quite work right then the emotions are going to be more subtle and hard to differentiate because it's not your main focus. You are more likely to intuitively get this once you have some experience attempting to design effective UIs (and actually trying to care about it).

kup0 6y ago

It is rather amusing how this doesn't work in IE11. I'd almost be inclined to fork and make a version that does, just for the heck of it... for you know, corporate environments that need Win98-styled intranets :)

nonamenoslogan 6y ago

This is very cool! Mind if I fork and re-work to look like Solaris? :D

laken 6y ago

Wow that's pretty fleshed out. I created something similar 3 years ago, but I lost motivation (named it the same too haha): https://github.com/LakenH/98css https://github.com/LakenH/98css

stjohnswarts 6y ago

First thing I do in Windows is turn off the eye candy :) . I mostly use linux with KDE. It still has a real file menu and visible scrollbars and I hope that never changes :)

WolfOliver 6y ago

I bet the css is totally broken when you open it in a Windows 98 Internet Explorer :D

ChrisArchitect 6y ago

Flexbox was originally invented in the late ’90s by Mozilla (using vendor prefixes — `display: -moz-box`, `-moz-box-flex`, etc.) in order to use CSS to style and lay out their Windows 9x app UI. We’ve come full circle. https://twitter.com/frankyan/status/1253063046060109824 https://twitter.com/frankyan/status/1253063046060109824

busymom0 6y ago

I surprisingly like it! Only thing I didn't like is the font (makes it hard to read for some reason) but otherwise, it looks wonderful. I might use this as an inspiration for future project I am building!

winrid 6y ago

Oh yes. I can't wait to think of a product to build using this design system.

enhdless 6y ago
I think it would be hilarious to use this in a desktop Electron app and come full circle.
- winrid 6y ago
  To top it off the bundle size and memory usage would still be more than just running Win95 in a VM...
  - speedgoose 6y ago
    I ran windows 95 in VirtualBox recently to play an old game. You need a shady kernel hack because modern CPUs are way too fast, and some shady display drivers. Electron sounds nicer.
  - squiggleblaz 6y ago
    It would give you the authentic feeling of running Win95 on a machine that maybe only had 8 MiB ram.
    - winrid 6y ago
      My sister had a Win95 machine with 32mb of ram and 2mb of video memory. What a powerhouse! Played 3D games on that thing...
runawaybottle 6y ago
I’ve got one, build the windows desktop with an IE link, basically a div with an iframe, and a text box. I wonder how many windows apps we can build out in a few lines of JS.
- 6y ago

imbusy111 6y ago

I'm using this next time I'm building something from scratch. Thanks.

LarvaFX 6y ago
Me too

slobotron 6y ago

Certainly evokes a lot of nostalgia. The tactile feel of 3D buttons can be mesmerizing at times, a lot of experience has been lost in the race to flat, in addition to lowered affordability of modern UIs. One bug: Firefox on Linux introduces an extra dotted rectangle on focused buttons (so they end up with two oddly overlapping focus indicators)

chrismorgan 6y ago
I’m observing this extra outline on Firefox Nightly on Windows. I can’t discern what’s making it, and suspect it may be a Firefox bug, somehow.
- Izkata 6y ago
  It's literally a feature, not a bug: https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-focus-inner https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-focu... https://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links https://stackoverflow.com/questions/71074/how-to-remove-fire...
  - chrismorgan 6y ago
    Ah yes, I had completely forgotten about ::-moz-focus-inner.
zozbot234 6y ago
There are a few extra bugs: one should be able to style a 'default' button with an extra black border giving it a lightly "inset" appearance, as is usual in this style. And "disabled" buttons shouldn't react to a click by changing their appearance. It would also be nice to support tristate checkbox and radio buttons (the "3rd" state is basically a selection with lowered contrast, so this should be achievable) and "ON/OFF switch"-like controls, which appear as "sticky" buttons where the ON state also has a lighter background.

davidgh 6y ago

This is fantastic. I looked for a CSS library like this some years ago and couldn’t find one. I didn’t have the courage to try to make it myself.

jhbadger 6y ago

Are there similar retro-UI systems for other older interfaces? While I don't have that much nostalgia for Win98 myself, I could see how it could be cute to have similar systems for classic (System 6-7) Mac, Amiga, etc. I've seen websites that try to go for these looks, but I think they were manually done.

karateka 6y ago
I've noticed there are a couple of these now so I threw a quick list up on Github: https://github.com/matt-auckland/retro-css https://github.com/matt-auckland/retro-css
- ZenPsycho 6y ago
  i found this too, (but i can’t find a demo page) https://github.com/npjg/new-dawn https://github.com/npjg/new-dawn
  - lioeters 6y ago
    That one was a bit disappointing - here's a screenshot: https://imgur.com/oFz7e0p https://imgur.com/oFz7e0p Funny enough, just yesterday (before seeing this post), I was searching for re-creations of the Macintosh interface. Here's the best one I could find: Apple Macintosh System 7 UI in CSS - https://github.com/pfcode/system7css https://github.com/pfcode/system7css (Screenshot: https://imgur.com/ZEKolbS https://imgur.com/ZEKolbS) Aah, that nostalgic comfort.. Makes me dream of building my next toy "OS in a browser" from this.
    - ZenPsycho 6y ago
      What would be nice is if there was something like a standard test or demo set of HTML for all these to work against, which would enable a way to switch themes.

teruakohatu 6y ago

This is great, I would love to be able to use this. Win98 always felt like a highpoint in easy to UI design. I am not a CSS ninja, how easy would it be to make this responsive? The example do not appear to be responsive.

agumonkey 6y ago
I somehow enjoyed the ride to css3 and full fledged responsive multi layer dom presentations but I do miss the wintel days GUI concept. Something about the simplicity, clarity.. makes it more to the point than the hyper capable yet systems of today.
darepublic 6y ago
From what I could see they were responsive

runawaybottle 6y ago

Using this to style my online resume next time.

zozbot234 6y ago

Isn't it a bit ridiculous that we need to do this in the first place? Shouldn't clear 3D controls on a neutral gray background be the default user-agent appearance, with no need for custom CSS of any sort?

zapzupnz 6y ago
Considering non-formatted HTML files are supposed to be documents, not windows, no? Adding to this: without any specification, the browser should, and does, use the operating system's native controls when rendering controls such as <button>.
- the_pwner224 6y ago
  Not anymore for chrome & edge https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html https://blog.chromium.org/2020/03/updates-to-form-controls-a... All part of Google's master plan to commoditize desktop OSs. Everyone outside the US already uses Android, soon your computer will be a Chrome box instead of a Windows/Mac/Linux box. First they did the browser title bar & tab bar integration/styling & removed the normal OS title bar, then they made Chrome OS, now they are removing the last traces of OS-specific styling for those who haven't already switched to Chrome OS. And Gmail, Gdocs, and Chromebooks are huge in kids schools. The kids don't know anything outside the non-Google universe. Most of the kids I know think MS Word/Excel/PowerPoint are lame (not that I'm a fan, but you have to admit MS Office is unrivaled in its abilities). 20 years from now they will have a gigantic monopoly over a huge range of computing.
  - Thorentis 6y ago
    I ... have no issue with those Chromium changes. I don't want Google to control the web, but I certainly wish there more standards based work went into designing a set of controls that was default across all browsers that was coherent, consistent, and was a safe default if you didn't want a theme. Sadly, Bootstrap become this a while ago, followed by a plethora of other web "defaults" that you just plunk into the top of your HTML file to get a whole new design without changing much. I'm hoping Firefox Foundation or something like that will do some work in this area.

chadlavi 6y ago

> Today's mood > > Claire Saffitz > > Brad Leone > > Chris Morocco > > Carla Lalli Music I just wanted to let the author know that at least one other person appreciates this though tbh most of the time for me it's Sohla.

frosted-flakes 6y ago
If anyone's wondering, these are the people that regularly appear on Bon Appetit magazine's YouTube channel.
prezjordan 6y ago
;) Glad someone noticed. A few other goodies in there.
LandR 6y ago
I think Molly is my favourite. Although I still can't make Carbonara well to save my life.

enhdless 6y ago

I think this would be a great reference for teaching introductory UI design; with the 3D-ness you can clearly see the different states that each UI element requires. I also really like the quotes about each component! Is there an online copy of this Microsoft Windows User Experience manual somewhere?

layer8 6y ago
You can borrow a (badly scanned) copy on archive.org: https://archive.org/details/microsoftwindows00micr_0/page/630 https://archive.org/details/microsoftwindows00micr_0/page/63...

airstrike 6y ago

We've come full circle. Thank you for this. It's so simple it's actually peaceful

sedatk 6y ago
We’ve also come full circle because this was pretty much the browser’s default style on Netscape.

Semiapies 6y ago

Surprising how rough on the eyes nostalgia can be, between the small font size and low contrast colors.

Causality1 6y ago

That's as refreshing as a dunk in a cold pool. My God we need more UIs that instantly tell you what they can and cannot do. Seems like the modern ones do as much as they can to obscure everything.

ObsoleteNerd 6y ago
Considering how cyclical everything is I wouldn’t be surprised if we see a return to Win95/98 style UIs soon enough. They’ll advertise it as “revolutionising productivity with an innovative new approach to desktop computing” and give us the a recoloured Win98. I’d probably switch back to Windows if they did.
jerzyt 6y ago
Some of the modern web pages are so obscure you have no idea what to click.

irrational 6y ago

I was going to post the quote about them not stopping to think if they should, but then I actually clicked the link. Wow, that brought back a lot of nostalgia. I haven't even used Windows in 15+ years, but I now realize that I still have a fondness for the interface of my youth ;-)

skissane 6y ago
I might be a few years older than you – I get far stronger nostalgic feelings from Windows 3.x UI than that of Windows 9x.
- Minor49er 6y ago
  You're in luck: https://codepen.io/matthijss/pen/wzYjJQ https://codepen.io/matthijss/pen/wzYjJQ
  - squiggleblaz 6y ago
    Haha. I was just thinking of that. Been wondering if there's any operating system I can theme to look like Win3.1 any more - the aesthetic of Windows 95 is better but Windows 3.1 seems to fit our contemporary standards of flat and fewer colors better. I did like the more rounded buttons of Windows 3.1 better than the harsher edges of the Windows 95 buttons. The mistakes a driving me crazy. I assume the fonts are just issues with me not having the right font installed. The command menu should be flat and the bar in it should be longer, rectangular and with a drop shadow. The minimize/maximize buttons don't look at all right (no highlight, too stretched). When you move the window, the frame looks wrong - i think the grains are too big and widely separated.
    - anthk 6y ago
      Linux + XFCE has a Win 3.1 theme on b00merang's site. Borrow the icons from the Chicago95 theme and you are done.
      - 6y ago

atum47 6y ago

that's really gorgeous. I find windows 95 aesthetics a master piece. I'm not gonna lie, I thought about windows 95 when I was creating FOS, my Fake Operational System "framework". I'm thinking about refactoring it and I'll may incorporate windows color scheme to it. Here's the link if you wanna see what I am talking about. https://github.com/victorqribeiro/fos https://github.com/victorqribeiro/fos

pazimzadeh 6y ago
I think it's really the NeXTSTEP aesthetic.
- LarvaFX 6y ago
  Yes it truly is. But Microsoft perfected it.
- sedatk 6y ago
  ...or OSF/Motif aesthetic.
cm2187 6y ago
Fashion is cyclical. At one point people will get bored of these ambiguous modern UI with hidden fields and gestures, and made of 50 shades of light grey that only a calibrated display can render with any discernable contrast. And we will rediscover the merit of clear and explicit UIs, and Apple will claim it just invented it!
- schrijver 6y ago
  I wouldn’t be surprised :) The Windows 95 aesthetic is already back into fashion, I see it a lot on flyers, web art… just not yet in computer applications! I guess that’s a matter of time. Check out the flyer for this party: https://highclouds.org/highclouds-online-antivirus-party-magdalena-bay-cobrah-dolly-bing-bing/ https://highclouds.org/highclouds-online-antivirus-party-mag... They used vectors, looks like the Windows 95 aesthetics that was so connected to pixel survives this transition quite well!

taikawatiti 6y ago

If the author is here, this is perfect except for 'space' not being able to click a button

deleted 6y ago
[deleted]

TimTheTinker 6y ago

Really nice! One minor nitpick: the title bar buttons actually need to be a pixel or two larger in each direction (so 2 or 4 pixels more of height and width, while remaining centered).

jspash 6y ago
That's the beauty of open code. You can pick all the nits you want -> https://github.com/jdan/98.css/issues https://github.com/jdan/98.css/issues :)
theandrewbailey 6y ago
Also, the font needs to be MS Sans Serif, not Arial. https://en.wikipedia.org/wiki/MS_Sans_Serif https://en.wikipedia.org/wiki/MS_Sans_Serif

bdcravens 6y ago

Nitpick: "My First VB4 Program" - VB6 came out in 1998

boomlinde 6y ago
I don't get the nit. VB6 came out in 1998 which caused every copy of VB4 to disintegrate?
2038AD 6y ago
The present is made up of pieces of the past, my friend :)

thaeli 6y ago

I'd really love a Macintosh System 7.1 version of this.

petters 6y ago

Would be cool if it came with JS to resize, move close windows etc.

gear54rus 6y ago
Only if it's easy to swap out for your own. It's unlikely the JS it would come from would fit into they way you do things normally (in your project or even your head).
JansjoFromIkea 6y ago
When I was trying to do something similar I left all that stuff to the side on the assumption someone had made a neat wrapper to handle it ...and they did! https://github.com/bokuweb/react-rnd https://github.com/bokuweb/react-rnd

nstart 6y ago

My heart beat a little faster when I saw the VB dialog box. I experienced building software for the first time when I was taken to my father's office where they used VB and Foxpro (and still do) to build ERP systems. Everything looked like this site. The waves of nostalgia are sure coming on hard. Thank you to the author of this. This whole site is a work of art!

prezjordan 6y ago
This is so wonderful to read, thank you :) 100% feel the same way which is what kept me going to ship this.

CawCawCaw 6y ago

Brilliant. Now for Windows XP...

iforgotpassword 6y ago
<link rel="stylesheet" href="fisher-price.css"> :-)
prezjordan 6y ago
In between thinking of this project (about 2 years ago) and now I was _so_ desperate for someone to clue me in on the gradients used to draw windows XP window title bars. Still never found the answer.

travbrack 6y ago

For some reason this brought back memories of mIRC

krtkush 6y ago

The joy I get by clicking on those buttons cannot be expressed in words here.

phreack 6y ago
The clarity of such perfectly defined buttons is unbeatable! Maybe they'd be more amicable to modern tastes with rounded shapes or a touch of color, but that 3d visual effect of a button being physically pushed definitely needs to come back and never leave us again, it's so clear and pleasant!

Dig1t 6y ago

ouch, open this in Safari and highlight some text, then unhighlight the text. It's literally barely readable, maybe some bugs to fix there, but it looks great in Chrome. Cool idea!

asutekku 6y ago

The checked disabled radio button and text inputs do not look right on iPhone. Otherwise solid work!

lmoa 6y ago

Looks cool. Does it work on IE?

kccqzy 6y ago

The controls look great but the text looks off. I forgot the UI font in Windows 98 but perhaps it was Tahoma. Maybe try that and disable anti-aliasing. Better yet, get an image of how the actual font is rendered on Windows 98 and make the glyphs into a bitmap font. That would also sidestep all the font renderer differences between then and now.

prezjordan 6y ago
I started off by bringing in MS Sans Serif from my windows 98 VM, but ditched it since it was rendering almost identically to Arial. Making a webfont out of the original 8pt Tahoma sounds fun, but I am unsure if I have to do it manually. I was worried about having to provide bold glyphs, and wasn't sure how to make it scale while still looking pixelated. (That is, if I need to hand-draw an 8x7 lowercase 'e' do I also need to hand-draw the 24x21 version?) Anyway, I cut it but agree I should get this right!

prezjordan 6y ago

Author here! Thanks for all the nice comments (and helpful bug reports). This idea has been in the back of my mind for ~2 years now but I recently got a wave of motivation and decided to ride it - and here we are. Happy to answer any Qs :)

VikingCoder 6y ago
Fun work! Thanks for sharing. I was somewhat reminded of Wt [1], and I still wish that were open source. Also reminded a bit of Blazor [2]. [1] https://www.webtoolkit.eu/widgets/layout/ https://www.webtoolkit.eu/widgets/layout/ [2] https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-3.1 https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=as...
fermienrico 6y ago
I think the Text input field doesn’t match the rest.
- andai 6y ago
  On iOS text and textarea are rounded. Not sure if you can override that with css.
  - efreak 6y ago
    You can get around that with contentEditable, but that creates an even bigger mess.
raihansaputra 6y ago
just wanted to say kudos for the BA Test Kitchen reference!
djsumdog 6y ago
It looks really good. It makes me wish I had a retro project idea I could use it on. It'd be great for a demo-scene website.
hanniabu 6y ago

longtermd 6y ago

Check out https://poolside.fm/ https://poolside.fm/ for some extra nostalgia Operating Systems.

5- 6y ago

nice attempt! it might be useful to boot real windows 98 (e.g. by visiting http://copy.sh/v86/?profile=windows98 http://copy.sh/v86/?profile=windows98) and check how things interact with clicks, in particular how checkboxes and radio buttons look with mouse down.

pgug 6y ago

What is the name for these simple css files that can turn plain html into a full layout/theme? Can I find a list of these somewhere?

worble 6y ago
I don't think there's anything official or even standard for naming. Some places refer to them as class-less: https://github.com/troxler/awesome-css-frameworks#class-less https://github.com/troxler/awesome-css-frameworks#class-less And these seem to be the strictly frameworks without classes. This site refers to them as "drop-in" frameworks (and lets you test them out live): https://dohliam.github.io/dropin-minimal-css/ https://dohliam.github.io/dropin-minimal-css/ The ones here appear to not be strictly class-less, since I know at least some of those frameworks do have classes, but are probably optional/very light on classes. 98.css would also be a "drop in" in this case since you can see things like the title bar do use classes: <div class="title-bar"> <div class="title-bar-text">A Title Bar</div> <div class="title-bar-controls"> <button aria-label="Close"></button> </div> </div>

severak_cz 6y ago

This is great. I was actually building something similar for my VST stuff page (work in progress - http://tilde.town/~severak/studio/ http://tilde.town/~severak/studio/). Now I am gonna copy that neat box-shadow border from 98.css.

andy_ppp 6y ago

My god they have even managed to switch off the anti aliasing of fonts! Looks so accurate I doubt I would be able to tell the difference, well done.

xattt 6y ago
I can’t decide whether the aliasing is part of the aesthetic or not.
- andy_ppp 6y ago
  I am pretty sure it’s deliberate, I mean did ‘98 have clear type yet? Did it work?
  - tomcooks 6y ago
    [No, it started with XP](https://en.wikipedia.org/wiki/ClearType#Implementations https://en.wikipedia.org/wiki/ClearType#Implementations)

mnorvais 6y ago

Looks nice, gonna try to use it some of my projects. The old Windows UI is really functional and easy to understand

MaxBarraclough 6y ago
I generally agree, but as Semiapies pointed out there's some low-contrast text in places. Vaguely relevant: The FOX Toolkit implements the Windows 95 look for lightweight Linux/Windows GUI applications. [0] A pity we don't see more GUIs like that today. [0] http://fox-toolkit.org/screenshots.html http://fox-toolkit.org/screenshots.html

Bro2020 6y ago

Strong And Beautiful, Just Like Deals And Discounts. https://bit.ly/3eAbZ2K https://bit.ly/3eAbZ2K

FpUser 6y ago

Oh, those days when designers actually thought of ergonomic vs modern insanity with no standard, no contrast, no ability to deduct function from the look etc. etc. Well there are exceptions but generic picture looks rather depressing.

golemiprague 6y ago

Now bring me a visual editor like the one in visual basic

joshuawithers 6y ago

I’m not smart enough to get this into a Wordpress theme, but if it were ported to WP, it’d be my personal blog theme

Hamuko 6y ago

Guessing it doesn't have those fancy warning symbols that some Windows 98 dialogs had?

jannes 6y ago

I noticed that it's using box-shadow for the "3d effect" on buttons and window borders. I'm a bit disappointed they didn't use the "inset" or "outset" border-style [0] which pretty nobody uses anymore these days. I thought this kind of design is pretty much why these border-styles exist. [0]: https://htmldog.com/references/css/properties/border-style/ https://htmldog.com/references/css/properties/border-style/

runxel 6y ago
It may be because the transition wouldn't be as smooth as it is now?
- jannes 6y ago
  Did Windows 98 have smoooth transitions, though?
  - runxel 6y ago
    Haha, you got a point there ;)
JansjoFromIkea 6y ago
Having done one of these myself a while ago, box-shadow was the only way to get the pixelated border corners. Here's the mixin I done https://github.com/padraigfl/packard-belle/blob/master/src/_scss/w98/functions/box-shadows.scss https://github.com/padraigfl/packard-belle/blob/master/src/_...
zeven7 6y ago
From what I recall, the shading for inset and outset is left up to the browser and is different for different browsers.

chj 6y ago

It may as well be called 2000.css, at least I won't be able to tell the difference.

theandrewbailey 6y ago
Windows 2000 used Tahoma for its UI font, but 9x used MS Sans Serif. https://en.wikipedia.org/wiki/MS_Sans_Serif https://en.wikipedia.org/wiki/MS_Sans_Serif https://en.wikipedia.org/wiki/Tahoma_(typeface) https://en.wikipedia.org/wiki/Tahoma_(typeface)

dvfjsdhgfv 6y ago

Does anyone know a similar project but with Windows 10 styling?

yadco 6y ago
https://github.com/microsoft/fluentui https://github.com/microsoft/fluentui

zubairq 6y ago

Really nice. I tried to get Windows look and feel in the headers for the Yazz code editor, but maybe I should have used this CSS lib instead. Great Job! https://yazz.com/app/homepage.html https://yazz.com/app/homepage.html

canada_dry 6y ago
> https://news.ycombinator.com/item?id=21734845 https://news.ycombinator.com/item?id=21734845 This (yazz/pilot [i]) needs more exposure... the webapp form designer is gorgeous and useful. [i] https://yazz.com/app/homepage.html https://yazz.com/app/homepage.html
- zubairq 6y ago
  Thanks, glad you like it. We haven’t really pushed it out yet as we really want to get the debugger and App Store released before we can say it is useful

larschdk 6y ago

The widgets look spot on, but the text has atrocious kerning. 'ti', 'll', 'd!' are squashed together. Windows 95++ had extremely good small size font rendering and did pixel perfect alignment and kerning of pretty much any font (However, the UI font was probably bitmapped). Remove the 'letter-spacing' styling - it breaks kerning.

JansjoFromIkea 6y ago

Hey man, if you're looking for the fonts I had them on a similar thing I done a while ago. Only normal size unfortunately https://github.com/padraigfl/packard-belle/tree/master/src/_scss/w98/fonts https://github.com/padraigfl/packard-belle/tree/master/src/_... Cant remember where I sourced them from but it's probably in the code somewhere, the MSSansSerif ones are pixel perfect as far as I'm aware. It outputted CSS to be used independently but it was very much a secondary concern, pretty sure I'd be the only person who knows how to use it without backtracking from the react bits https://github.com/padraigfl/packard-belle/blob/master/css/w98_simple.css https://github.com/padraigfl/packard-belle/blob/master/css/w... the data-uris might be useful, will have a look through your issues to see if I can help with anything! Here's the attempt at a Windows 98 recreation I done with it feel free to take whatever from it: http://packard-belle.netlify.app/ http://packard-belle.netlify.app/ Tried doing a design system thing too but got lazy: http://packard-belle.herokuapp.com/ http://packard-belle.herokuapp.com/

gmmeyer 6y ago
This looks so good, especially the fake monitor effects
- JansjoFromIkea 6y ago
  Thanks! Funnily that bit caused big issues for most my friends I showed it too, was definitely a case where rigidly straining to try and be _authentic_ clashed with the way most people remember things. There's an option to turn it off, I think (maybe not on mobile) Stole that filter off codepen mind, nowhere near that clever... this one but toned down a bit https://codepen.io/lbebber/pen/XJRdrV https://codepen.io/lbebber/pen/XJRdrV
prezjordan 6y ago
Beautiful work, thanks so much :) I'll keep poking at fonts and see what I can learn https://github.com/jdan/98.css/issues/10 https://github.com/jdan/98.css/issues/10 I love that we arrived at the ~same solution using inset shadows for the buttons. Makes me feel validated.

mayalan 6y ago

I'm not sure you can read this thread without thinking about this Bill Gates and Steve Balmer recreating what is love... https://www.youtube.com/watch?time_continue=8&v=byU3PZSn-CY https://www.youtube.com/watch?time_continue=8&v=byU3PZSn-CY

mikorym 6y ago

It's weird how this reminds me of the last two years of the newest changes in UIs. I think it was Windows 10 that brought back minimalist borders (as opposed to Windows 7)? I am not sure whether I am imagining this.

birslip 6y ago

It's great, I love it! It's quite similar to this project on iOS: https://github.com/Baddaboo/ClassicKit https://github.com/Baddaboo/ClassicKit They even went as far as building a fake Internet Explorer app.

prezjordan 6y ago
Woah, amazing attention to detail there. I love that they include this image in the README [0], buttons were the first thing that hooked me into building this. [0] https://github.com/Baddaboo/ClassicKit/raw/master/Images/pixel.png https://github.com/Baddaboo/ClassicKit/raw/master/Images/pix...

paweladamczuk 6y ago

Does anyone know what the easiest way to make those windows movable and resizable (dynamic in general) would be? Great work, I love this interface style!

kup0 6y ago

I don't know what it is about the 95, 98, 2000 era of Windows UI and aesthetics but I still strongly prefer it.

AnIdiotOnTheNet 6y ago
It was functional and clear, unlike modern "hide everything" UIs?
- kup0 6y ago
  Very true, especially when it comes to scroll bars and similar elements. While I do enjoy some "modern" aesthetics from time to time, the Win98 style UI just feels far more "productive", for lack of a better term. And as much as I like that Linux in many ways often keeps that type of UI around, I still feel like Win98 did it better (almost can't believe I'm saying that).