5 ms·

Windows 95 Web UI Kit

97 points by themesberg 7y ago

themesberg 7y ago
Download & Details: https://themesberg.com/product/windows-95-ui-kit https://themesberg.com/product/windows-95-ui-kit
- sansnomme 7y ago
  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/#
  - themesberg 7y ago
    Thanks for the feedback! We'll be fixing some of inconsistencies in the next update.
  - dchest 7y ago
    Even in unpressed state the buttons (and borders in general) are wrong, they look like they are from Win 3.1.
- theandrewbailey 7y ago
  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.
blumomo 7y ago
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 7y ago
  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.
ulzeraj 7y ago
I wonder if there is one for CDE or any ancient Unix desktops.
- dvh 7y ago
  qvwm
msie 7y ago
If only i could theme windows 10 PROPERLY with this. There are attempts that are almost there.
- themesberg 7y ago
  We're actually thinking of theming WP XP, Vista and 7 as well :)
brink 7y ago
> 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.
simlevesque 7y ago
it's weird because it does look like Win 95 but a lot of things are different
teddyh 7y ago
MIT licensed? With icons copied straight from Windows 95?
- themesberg 7y ago
  We used the icons from here while giving the author credit: https://artage.io/en/icon-packs/original-windows-95-icons?li=all https://artage.io/en/icon-packs/original-windows-95-icons?li...
  - teddyh 7y ago
    What is your rationale for believing that the copyright for those icons do not belong to Microsoft?
    - snazz 7y ago
      Microsoft probably does not care, in all honesty. But that’s some pretty shaky legal footing.
    - themesberg 7y ago
      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 7y ago
        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 7y ago
        We will remove the original icons in our next update.
degenerate 7y ago
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 7y ago
  I bet they will be happy if you raise a PR
pier25 7y ago
Those icons are outdated but still look better than the Windows 10 icons.
zerr 7y ago
The label on the button should move bit right and down when pressed.
- themesberg 7y ago
  You're right. We'll write that down for our next update.
zymhan 7y ago
> Free Download > Must register to download I guess that's true for only some definitions of "free"
- themesberg 7y ago
  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 7y ago
    Makes sense. Good luck!
    - themesberg 7y ago
      Thanks :)
JansjoFromIkea 7y ago
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 7y ago
  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 7y ago
    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 7y ago
      Thank you for all the information, we highly appreciate it :)
      - JansjoFromIkea 7y ago
        sorry that the rundown was all one line, HN removed all the linebreaks I added =/
  - JansjoFromIkea 7y ago
    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
vbezhenar 7y ago
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.
dheera 7y ago
Is there a paid upgrade for 256 color icons?
mattigames 7y ago
Integrate it with clippy.js (MIT license) for maximum nostalgia https://www.smore.com/clippy-js https://www.smore.com/clippy-js
dylan-m 7y ago
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 7y ago
  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!
Narishma 7y ago
The font looks blurry to me (FF68 on Windows).
themesberg 7y ago
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

97 points by themesberg 7y ago

themesberg 7y ago

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

sansnomme 7y ago
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/#
- themesberg 7y ago
  Thanks for the feedback! We'll be fixing some of inconsistencies in the next update.
- dchest 7y ago
  Even in unpressed state the buttons (and borders in general) are wrong, they look like they are from Win 3.1.
theandrewbailey 7y ago
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.

blumomo 7y ago

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

ulzeraj 7y ago

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

dvh 7y ago
qvwm

msie 7y ago

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

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

brink 7y ago

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

simlevesque 7y ago

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

teddyh 7y ago

MIT licensed? With icons copied straight from Windows 95?

themesberg 7y ago
We used the icons from here while giving the author credit: https://artage.io/en/icon-packs/original-windows-95-icons?li=all https://artage.io/en/icon-packs/original-windows-95-icons?li...
- teddyh 7y ago
  What is your rationale for believing that the copyright for those icons do not belong to Microsoft?
  - snazz 7y ago
    Microsoft probably does not care, in all honesty. But that’s some pretty shaky legal footing.
  - themesberg 7y ago
    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 7y ago
      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 7y ago
        We will remove the original icons in our next update.

degenerate 7y ago

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 7y ago
I bet they will be happy if you raise a PR

pier25 7y ago

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

zerr 7y ago

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

themesberg 7y ago
You're right. We'll write that down for our next update.

zymhan 7y ago

> Free Download > Must register to download I guess that's true for only some definitions of "free"

themesberg 7y ago
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 7y ago
  Makes sense. Good luck!
  - themesberg 7y ago
    Thanks :)

JansjoFromIkea 7y ago

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 7y ago
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 7y ago
  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 7y ago
    Thank you for all the information, we highly appreciate it :)
    - JansjoFromIkea 7y ago
      sorry that the rundown was all one line, HN removed all the linebreaks I added =/
- JansjoFromIkea 7y ago
  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

vbezhenar 7y ago

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.

dheera 7y ago

Is there a paid upgrade for 256 color icons?

mattigames 7y ago

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

dylan-m 7y ago

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 7y ago
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!

Narishma 7y ago

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

themesberg 7y ago

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