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.
They used vectors, looks like the Windows 95 aesthetics that was so connected to pixel survives this transition quite well!
Haiku has this delightful vibe to it, I can't explain.
People probably have rose-tinted nostalgia for the 95 era because of the nightmare that followed: Windows XP :)
https://www.google.com/search?q=windows+95+mystery+theme&cli...
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/
[2] https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=as...
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/
Tried doing a design system thing too but got lazy:
I love that we arrived at the ~same solution using inset shadows for the buttons. Makes me feel validated.
Will take the font discussion over there
Stole that filter off codepen mind, nowhere near that clever... this one but toned down a bit https://codepen.io/lbebber/pen/XJRdrV
Adding to this: without any specification, the browser should, and does, use the operating system's native controls when rendering controls such as <button>.
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.
So what remains is either black or white. White seems to be a more rational pick.
Bah...
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/
Here's the mixin I done https://github.com/padraigfl/packard-belle/blob/master/src/_...
I wonder how many windows apps we can build out in a few lines of JS.
Hilariously, this is quite a good example on why the Chrome monoculture is just repeating the IE monoculture of years past
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.
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-focus-inner {
border: 0;
}
input[type="radio"], input[type="checkbox"] {
visibility: hidden;
}Looking at firefox and chrome side by side it's actually impressive how they look near identical other than a few stray pixels.
One bug: Firefox on Linux introduces an extra dotted rectangle on focused buttons (so they end up with two oddly overlapping focus indicators)
https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-focu...
https://stackoverflow.com/questions/71074/how-to-remove-fire...
>
> 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.
Although I still can't make Carbonara well to save my life.
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.
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).
I’d probably switch back to Windows if they did.
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).
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).
This (yazz/pilot [i]) needs more exposure... the webapp form designer is gorgeous and useful.
:-)
I am not a CSS ninja, how easy would it be to make this responsive? The example do not appear to be responsive.
...and they did! https://github.com/bokuweb/react-rnd
I also really like the quotes about each component! Is there an online copy of this Microsoft Windows User Experience manual somewhere?
The waves of nostalgia are sure coming on hard. Thank you to the author of this. This whole site is a work of art!
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!
[0] https://github.com/Baddaboo/ClassicKit/raw/master/Images/pix...
Can I find a list of these somewhere?
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/
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>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.
Great work, I love this interface style!
it might be useful to boot real windows 98 (e.g. by visiting http://copy.sh/v86/?profile=windows98) and check how things interact with clicks, in particular how checkboxes and radio buttons look with mouse down.