Windows 95 Web UI Kit | Hacker News Reader

Windows 95 Web UI Kit

themesberg.com

97 pointsthemesberg43 comments

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

Implementation example: http://packard-belle.netlify.com

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!

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

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

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

So key ones are: - the pixelated borders can only really be replicated with box -shadow insets, border does 45deg angles (JSPaint not doing the borders right was what spiralled into me doing my thing in the first place... D: ). If you go with the pixel-font (which maybe you shouldn't if the goal is more general usage over an outright homage) then it jars a bit. I've sass mixins that do these you can work from, think they're under "box-shadows.scss" or something like that - There's a bold version of the font, I have it on my repo but I don't think I made the one I use (iirc mine was junk). Almost certainly credited the place I took it from though - Tabs are a _nightmare_ across devices, their behaviour is pretty hard to track iirc (they move around depending on which you click I think when there's multiple rows?) - Text inputs have a very specific outline (again, box-shadow) however Safari based browsers just totally overwrite creative stylings here - The outline on buttons is wider, but on firefox has issues where it'll clash with the native outlines in some cases - content of buttons indents 1 pixel down and to the right on click - the icon examples list perhaps should cover their behaviour as buttons too, given that's what it's replicating? - border-dark on some buttons seems to be inaccurate? I believe that's just representing their focused state when the window they're in isn't the focused window? or the initial focused element within a new window? not 100% here though - Lemme know if you ever find a larger size version of MSSans! Way too tedious to recreate a larger one for me but it's be super useful - Start menu dividers between the various parts is prolly an easy win to add? (just an after element after each div inside that isn't the last child?) - checkboxes and radios could probably resemble the originals a bit closer, exact replicas would be prolly too far but chunky looking x's might be good

That's awesome! And it even uses the 256 color/win98 icons!

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.

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.

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.

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!

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

MIT licensed? With icons copied straight from Windows 95?

We used the icons from here while giving the author credit: https://artage.io/en/icon-packs/original-windows-95-icons?li...

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

Microsoft probably does not care, in all honesty. But that’s some pretty shaky legal footing.

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.

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.

We will remove the original icons in our next update.

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

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

> Free Download

> Must register to download

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

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.

Makes sense. Good luck!

Thanks :)

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.

I bet they will be happy if you raise a PR

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

Download & Details: https://themesberg.com/product/windows-95-ui-kit

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/#

Thanks for the feedback! We'll be fixing some of inconsistencies in the next update.

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

Wow, that's neat!

I don't recall buttons in Windows 95 having such thick borders or rounded corners, unless it was a Windows 3.1 UI. The checkboxes also had check marks in them, not an X.

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.

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

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

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

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

qvwm

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

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

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

Is there a paid upgrade for 256 color icons?

Reply on news.ycombinator.com