
Show HN: XP.css – Windows XP CSS file and framework for building GUIs - botoxparty
https://botoxparty.github.io/XP.css/
======
karateka
Beautiful! I've added it to my list of retro css: [https://github.com/matt-
auckland/retro-css](https://github.com/matt-auckland/retro-css)

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

~~~
parkovski
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.

------
TazeTSchnitzel
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.

~~~
ptx
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...](https://docs.microsoft.com/en-
us/windows/win32/controls/button-styles#BS_DEFPUSHBUTTON)

~~~
TazeTSchnitzel
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.

~~~
ptx
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...](https://devblogs.microsoft.com/oldnewthing/20040802-00/?p=38283)

~~~
TazeTSchnitzel
Aha, thanks for that!

------
vsskanth
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.

~~~
Multicomp
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.

~~~
voldacar
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!

~~~
vbezhenar
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.

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

------
pmalynin
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.

~~~
baddox
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`.

------
ComputerGuru
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?

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

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

~~~
mhd
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.

~~~
Fiveplus
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.

------
olq
Peak UX! Damn I miss it

~~~
quickthrower2
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

~~~
shawa_a_a
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](https://github.com/Open-
Shell/Open-Shell-Menu)

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

------
emdowling
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.

------
crizzlenizzle
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...](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) some
time.

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

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

~~~
Reelin
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.

------
theandrewbailey
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.

------
vehemenz
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.

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

------
zmix
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?

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

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

------
rutchkiwi
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

------
bawolff
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

~~~
soylentgraham
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)

~~~
toyg
_> 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.

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

------
swiley
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.

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

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

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

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

~~~
Jaruzel
Will the 98.css version do?

[https://github.com/jdan/98.css](https://github.com/jdan/98.css)

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

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

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

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

------
toastal
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.

------
CawCawCaw
Fantastic! Going to use this in my next project.

------
speedgoose
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.

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

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

------
sdwvit
Broken in safari ios

------
sebyx07
I think this was build too late..

------
pix64
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.

