Show HN: XP.css – Windows XP CSS file and framework for building GUIs | Hacker News Reader

Show HN: XP.css – Windows XP CSS file and framework for building GUIs

botoxparty.github.io

297 pointsbotoxparty84 comments

Beautiful! I've added it to my list of retro css: https://github.com/matt-auckland/retro-css

You might enjoy: https://news.ycombinator.com/item?id=23129434

those repository might be better with more screenshots

Finally! Someone made a list on Github that's not Awesome.

I know the awesome meme seems overdone, but it's cool that you can search that one word and see curated lists of interesting/high quality projects.

I have tried before to recreate the 95 UI in CSS. I didn't release the results but I was quite happy with what I managed. Honestly, I should probably contribute to these projects.

Annoyingly, certain parts of the Windows UI cannot be recreated with just HTML and CSS. One of these is how focusing works. I don't know what the proper names for it are, but Windows has two kinds of focus:

• Dotted line (or flashing cursor for text boxes). If you press space bar, something will happen with this element.

• Black outline around the outside. If you press Enter, this button's action will be triggered. This is why the OK button in a typical Windows dialogue box looks different to the Cancel button. I don't remember what this looks like in XP but I think it uses a thicker blue border.

However, the browser only really has the former kind of focus — even for HTML buttons in Internet Explorer on Windows 95! So if you want a full Windows-like look and experience, you need some JavaScript to emulate the second. I notice that XP.css lacks this kind of focus, and I think that's why it feels like something is missing from the buttons.

The first kind is the input focus and the second kind is the default button in a dialog (not really a kind of focus): "If the button is in a dialog box, the user can select the button by pressing the ENTER key, even when the button does not have the input focus."[1]

[1] https://docs.microsoft.com/en-us/windows/win32/controls/butt...

I feel like it is almost its own kind of focus because that state can be lost, though I don't remember how. Multi-line text boxes maybe.

Yeah, there are definitely some non-obvious details in its behavior. The default button focus moves with the input focus to other buttons but reverts to the default default button if you focus another kind of control. Raymond Chen has an explanation: https://devblogs.microsoft.com/oldnewthing/20040802-00/?p=38...

Aha, thanks for that!

This brings back so many memories! I hope there is a windows 7 css out there.

Every time I have to use UWP apps I feel really sad and angry about how much Windows Desktop UI has regressed.

I know what you mean, I get that skeuomorphic was overdone in a lot of places but, the remedy may have been worse than the disease since we have had such regression in UI design that it now looks somewhat like high-dpi versions of text user interface graphical blue blocks everywhere.

Honestly skeuomorphism was so much better than the flat mobileshit we're stuck with now.

We had Windows 7, gnome 2, OSX Lion, all of which had mild drop shadows, 3d depth in icons and window borders, clearly delineated edges between various UI controls, and then it was as if one day some shadow illuminati council of UI design put out a worldwide decree that everything has to be flat and use indecipherable heiroglyphic vector icons made of little dots and lines.

I've been waiting for some kind of aesthetic counter-reaction to take place and it seems like it actually might be starting to happen. 2010-era was the peak of UI design and it's high time we went back, godammit!

History goes in spiral. After everyone will be fed up with flat style, someone will release gorgeous super-realistic skeuomorphic UI and everyone will praise it.

And then someone introduces the flat design all over again, and on and on it goes.

One can hope

Even worse actually. text user interfaces had contrasting backgrounds between different controls. It took me a while to learn the large-text-as-a-tab style in Metro UI.

It's not just the flatness that irritates me, there is such low information density, so much white space and large text sizes it feels like using a blown up tablet app.

it feels like using a blown up tablet app.

That's because that was precisely what it was intended as --- the idea was to use the same UI on both desktop and mobile, and unfortunately they picked the latter instead of the former to build upon. The former would've resulted in something more similar to WinCE.

I think WinCE fell victim to the technology of the time. I believe today’s higher precision and lower effort capacitive touch screens would have reduced much of the issues that plagued its usability with its crappy resistive touch screens and styli.

That regression helps in the hologram 4D criteria.

Are you speaking of Hololens? A device that only a bunch of people own or can afford is not a justification to break the UI of most desktop computers in the world.

Fluent Design is Microsoft's styling and it included a vision for where they want to get to. Some of that is reflected in the UI you see today in Windows 10.

Looks good, but seems to be really broken on my iPhone. The checkmarks float below the checkbox, and the slider also seems to have a check mark in it.

It's broken on MacOS Safari as well. It looks like they need to add a `top: 0` to the selector `input[type=checkbox]:checked+label:after`.

I’m also seeing these two issues, although I wouldn’t call it really broken. Minor bugs in an otherwise great library.

It’s honestly great - it’s what I was hoping someone would make when the 98.css made it to HN - but does the kerning have to suck? What’s wrong with beautiful typography that’s not constrained by the DPI of the 90s?

The kerning is part of the font, which is part of the experience.

This article highlights the importance of the "shitty" typography.

[0] article: https://vistaserv.net/blog/90s-fonts-modern-browsers

[1] discussion: https://news.ycombinator.com/item?id=23129434

Yes, HN with XP, 98, and old OSX CSS would truly be awesome.

Nice! Windows XP was peak UI design, I wish we'd make more UI's like it today.

Really? I thought it was quite garish, plastic-y, especially the blue version.

I still think that in the Windows timeline, original Win95 (with actual toolbar buttons) was the best. It got all "designy" with each official iteration afterwards, but at least the progress of time meant that the weird third party shenanigans died out (like Borlands(?) huge buttons with the cross/checkmark).

Switching back to 9x looks, moving away from Nappa and installing a real file manager was always on top of my list when switching to Windows.

Windows XP was peak windows aesthetic without compromising usability. The toolbars, icons, Taskbar and everything in between was the right balance of style and functionality.

Now you've got the tool to fulfill your wish

Peak UX! Damn I miss it

I still think that the UI of Windows 2000 was better. Windows 2000 had also better usability for keyboard users since you can be extremely productive without a mouse. I think it is the last versions where they really cared about keyboard users. For example latter versions added extra information to Explorer and that had the resukt of requiring extra keystrokes to move from the path bar to the file list.

Anyway I am digressing... I came here to say that while the Css is very cool, it seems to introduce strange delays. On my android phone actions on tabs, checkboxes and radio buttons give a result at least one second after i click them.

I miss the old start menu. I now have to remember the complete names of programs I have installed, as win 10 search won’t find partial matches all the time

After using Windows 10 for a while I grew similarly fed up. I found OpenShell [1] to be a very faithful replication of the old start menu I'm used to from XP and before.

1: https://github.com/Open-Shell/Open-Shell-Menu

Thanks! Reskinned to look and act like xp. Hopefully I’m not getting stuck in my ways...

I'm using that too, but under W7 in classic aka W2k-look.

I’m still stunned at how bad Windows search is. They’ve been trying to get this right since they begun development of Windows Vista nearly 20 years ago.

Meanwhile in OS X land, their 16-year-old search implementation has always been so good that in a lot of cases, the file manager isn’t necessary to find even the most obscure and poorly organized documents.

> They’ve been trying to get this right

Company politics interfered with the work on database as file system, one of Longhorn's greater ideas. I can't remember the specifics, it's on Slashdot somewhere, can't find it anymore.

> their 16-year-old search implementation

… is Giampaolo's 22-year-old implementation.

http://enwp.org/Dominic_Giampaolo https://arstechnica.com/information-technology/2018/07/the-b...

This is something that is really puzzling to me, how such a basic and useful feature can be broken for years. It's annoying me since the release of Windows 8.

Keyboard Launchers like Keypirinha (also used Launchy back in the days) are my current workaround. They can index what the start menu should be indexing and do it right. I also keep my own (synced) folder of shortcuts that I add to the indexing.

Pin to the star menu?

Funny you say that, as I could lunch program with search in Win7 way faster than I can click on pinned menu in Win10.

I miss the Windows 7 start menu. It really was peak Windows.

I loved the Media Center Edition theme :-)

Don't forget the zune theme with the orange start button and the black taskbar!

Edit: or the embedded blue theme!

So nostalgic and brings back many memories of my teenage years. I had way too much time when Windows XP was being built - would hang out on IRC and download leaked new builds every week or so. devils0wn is forever embedded in my memory (if you know, you know). It was such a fun time, downloading new builds, installing hacks to disable product key checks. A golden age.

I love it. I’m sure we can also get a Vista theme using things like https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-fi... some time.

the most surprising thing is how readable the whole webpage is. really a good testament to the user interface of windows xp.

Wow, that's awesome. I'd also forgotten how nice the interface was of xp.

I really liked it as well. Most systems are more functional in one way or another these days but somehow nothing ever seems to achieve a look and feel on par with XP (IMO). It was a sad day when regular security updates for it stopped.

I like everything but the font. The dropdowns in particular are superior to browser defaults.

Wow, that's awesome!

Title bars are a bit thick. Take off the min-height, and you're practically there. The title bar gradient seems a bit off, but unless you're looking at an XP VM, no one would know.

It's slightly unsettling to see the default window theme of XP to be used for this. Most users of XP (at least in my experience) changed the theme from "Royale" to "Windows Classic" immediately and never looked back. Except for your parents or those people in your office who didn't know what they were doing and wanted to look at goofy colors all day.

Nah the zune theme is where's it's at. That black and orange theme was the best

Ouch! This just came 15 years too late for me. I would have loved this in Windows XP times to style MS HTML Applications (HTA).

Anybody knows of some (preferrably simple, preferrably outside of any UI framework) Windows 10 CSS style, that is free?

Doesn't really fit your 'outside any UI framework' requirement but there is http://reactdesktop.js.org/

Does a pretty good job at mimicking both Windows 10 and Mac OS. If there isn't a CSS framework someone else can link you to then you could either just use react (providing it's a project where that sort of decision doesn't affect anything) or attempt to take the CSS styles from this project.

While its not exactly Windows 10, MIcrosoft's design system is called "Fluent UI"[0] which includes what they use for the Web. It features a similar flat UI but isn't exactly a copy of Windows 10, it does it's own thing. The components are also unfortunately tied to React.

[0]https://developer.microsoft.com/en-us/fluentui#/

For what it's worth, it may be impossible to implement this using CSS features no more recent than 2005.

I’m imagining some horrible <table> layout now.

My company, an online pharamcy, actually works with more than one supplier whose website has some elements looking like this. You can tell they definitly didn't do it for a nice retro feeling though.. sigh

This is cool, but To me, the 98.css rocks more. It feels like a more clear and consistent ui. I wonder if that's really true or if its just ny nostalgia for what i had as a kid. Probably the latter.

Nonetheless, props to the author

This is what I think too, but the amount of people I hear that say XP was the best windows makes me wonder, do the more colourful buttons, lighter backgrounds, (maybe not rounded edges?) make for a better UI than win95 ultra-consistency (very grey, X not highlighted)?

Can any proffesional designers chip in?

(Win2k was the peak windows, although using win3.1 web emulators to play solitaire is my peak nostalgia)

> the amount of people I hear that say XP was the best windows makes me wonder

It's just a function of generational popularity IMHO. Windows XP broke into the mainstream in a way that 98/2000 had not, for a number of reasons. It was literally garish, but between people looking for a "wow" factor after years of grey borders, and the increased amount of total desktop users, more people loved it right there and then than anything that preceded it or followed it. I wouldn't extrapolate any big theory of design from this phenomenon.

As a long-time Windows user at the time, I can say that "the dream" back then was OSX.

It's awesome and nostalgic! Just one thing: the scroll bars should change color/brightness when they're hovered/clicked.

You can almost hear ticks and shwoops from XP! That’s fantastic!

I wish the scroll bars worked on mobile but that probably needs JS in addition to the CSS.

The fade when hovering & clicking the minimize/maximize/close buttons in the title bar should be removed, otherwise pretty neat.

It's strange, but I like it now much more then 18 years ago. Though this sharp blue is still not my style.

If I display the page in 90% size, the images are become dirty. If I enhance to >100% they seem to be fine.

If we could get a windows 2000 version of this I would 100% use it for real projects...

Will the 98.css version do?

https://github.com/jdan/98.css

TreeView lists should have selected state for items, otherwise it's very accurate.

This one also includes a styled Dropdown, which missed from the 98 one.

I always used classic in XP, that said, anything not win10 is welcome.

The checkboxes don’t seem to render correctly in Safari (iOS).

I appreciate that the dropdowns are native so they actually work on mobile. I think the treeview (and others) however should select off of the aria roles for this kind of widget to enforce accessibility.

Fantastic! Going to use this in my next project.

Great work! It's interesting to see that Windows XP's blue and gradients design didn't age well compared to Mac OS X's blue and gradients.

Well, you have to compare it to early 2000s Mac OS with Aqua pill buttons and pinstripe background.

Is there a macos alternative? A mac like UI is something I'd personally be happy to use in prod.

Broken in safari ios

I think this was build too late..

Font scaling on "Pixelated MS Sans Serif" is terrible in Windows (both Firefox and Chrome). This does not look correct on a high dpi monitor.

Reply on news.ycombinator.com