
Windows 95 Web UI Kit - themesberg
https://themesberg.com/preview/windows-95-ui-kit
======
JansjoFromIkea
Hey man I done something similar a while back but kind of lost interest. That
being said I can probably share some details as to things you've missed or how
to implement various parts. Will have a look when I get home but ping me if I
don't

Storybook: [http://packard-belle.herokuapp.com](http://packard-
belle.herokuapp.com)

Implementation example: [http://packard-belle.netlify.com](http://packard-
belle.netlify.com)

~~~
themesberg
Oh that's really nice, since it's so complete! We tried to mold Windows 95
with more generic elements that you can use for any website. But the
details/feedback would be very much helpful!

~~~
JansjoFromIkea
Yep I can tell you a ton of that stuff doesn't work across browsers (weird
behaviour on Firefox due to me removing important a11y defaults being the main
one iirc, Safari totally overrides a lot of input styles too).

Things like this are a great way to learn about the difference between
browsers if you can stick at it too

~~~
themesberg
Thank you for all the information, we highly appreciate it :)

~~~
JansjoFromIkea
sorry that the rundown was all one line, HN removed all the linebreaks I added
=/

------
blumomo
Funny theme, though a layouting bug prevents its usage, even if it's very
unlikely that it will find many users: The buttons, when pressed, change in
width or height. You generally want to avoid that as otherwise the whole
layout starts to move – which is the case with this theme.

~~~
themesberg
We'll be rolling out a fix for that in our next update. We think it can be
used for some retro style websites or in-browser games.

------
dylan-m
This is cute :)

One nitpick: the buttons grow slightly when they're being clicked. This is
happening because of the style adding a dotted border around the nested .btn-
text element:

    
    
        .btn:not(:disabled):not(.disabled):active .btn-text, .btn:not(:disabled):not(.disabled):active:focus .btn-text {
            border: 1px dotted #000;
        }
    

There's no border in the non-active style, so that allocates an extra 1px on
each side of the text box. It'll work better if you use _outline_ instead of
_border_ , or add an invisible border of the same size when the button isn't
active.

~~~
themesberg
Hey Dylan,

Thanks for the debugging. That's the bug, you got it :)

We'll fix it by tomorrow, since it affects all of the buttons.

Cheers!

------
brink
> Tired of all the new design trends?

Yes, actually. Tired of chasing things with big promises and lackluster
revelations that are in general not worth the effort. Been feeling that
lately.

------
teddyh
MIT licensed? With icons copied straight from Windows 95?

~~~
themesberg
We used the icons from here while giving the author credit:
[https://artage.io/en/icon-packs/original-
windows-95-icons?li...](https://artage.io/en/icon-packs/original-
windows-95-icons?li=all)

~~~
teddyh
What is your rationale for believing that the copyright for those icons do not
belong to Microsoft?

~~~
themesberg
Under what license would you propose for us to apply? We just wanted to create
something for the community. We'll be creating a public repo in the coming
days on Github.

~~~
Cyberdog
The point is that there is no license under which you can lawfully
redistribute Microsoft’s copyrighted icons. And given GitHub’s current
ownership, they might not be able to ignore the violation for very long.

If you remove the icons (and also the font if that was ripped from Windows
too), you might be okay.

~~~
themesberg
We will remove the original icons in our next update.

------
msie
If only i could theme windows 10 PROPERLY with this. There are attempts that
are almost there.

~~~
themesberg
We're actually thinking of theming WP XP, Vista and 7 as well :)

------
zymhan
> Free Download

> Must register to download

I guess that's true for only some definitions of "free"

~~~
themesberg
We're a young company and we're trying to create a user base. All of our free
products eventually get featured on github.com a few days after our launch.

~~~
zymhan
Makes sense. Good luck!

~~~
themesberg
Thanks :)

------
degenerate
Form elements are a letdown; the <form> could have been styled to look like a
window and input elements skinned to look like actual checkbox/radio/input
boxes in Win95. Instead they are just white boxes.

~~~
mac_was
I bet they will be happy if you raise a PR

------
pier25
Those icons are outdated but still look better than the Windows 10 icons.

------
themesberg
Download & Details: [https://themesberg.com/product/windows-95-ui-
kit](https://themesberg.com/product/windows-95-ui-kit)

~~~
sansnomme
Congrats on shipping! A minor detail: the button design is slightly wrong.
When clicked, the border should invert to appear depressed. Not flattened.
Also the radio buttons should be skeuomorphic, not flat.

See: [https://react95.io/#](https://react95.io/#)

~~~
dchest
Even in unpressed state the buttons (and borders in general) are wrong, they
look like they are from Win 3.1.

------
vbezhenar
I'm not really sure but I think that after I pressed on button, it should
remain focused and that focus should be rendered as a dotted rectangle inside
button. Should be possible with CSS.

------
mattigames
Integrate it with clippy.js (MIT license) for maximum nostalgia
[https://www.smore.com/clippy-js](https://www.smore.com/clippy-js)

------
zerr
The label on the button should move bit right and down when pressed.

~~~
themesberg
You're right. We'll write that down for our next update.

------
ulzeraj
I wonder if there is one for CDE or any ancient Unix desktops.

~~~
dvh
qvwm

------
themesberg
We've updated the Kit and fixed the button clicking problem. We also removed
the icons because it is copyrighted by Microsoft. We used basic emoticons
instead. We will create a public repository on Github today so anyone can
contribute to it!

Later edit: [https://github.com/themesberg/windows-95-ui-
kit](https://github.com/themesberg/windows-95-ui-kit)

------
Narishma
The font looks blurry to me (FF68 on Windows).

------
simlevesque
it's weird because it does look like Win 95 but a lot of things are different

------
dheera
Is there a paid upgrade for 256 color icons?

