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
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!
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
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
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.
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:
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.
Yes, actually. Tired of chasing things with big promises and lackluster revelations that are in general not worth the effort. Been feeling that lately.
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'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.
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.
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.
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.
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!
Storybook: http://packard-belle.herokuapp.com
Implementation example: http://packard-belle.netlify.com
Things like this are a great way to learn about the difference between browsers if you can stick at it too
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:
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.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!
Yes, actually. Tired of chasing things with big promises and lackluster revelations that are in general not worth the effort. Been feeling that lately.
If you remove the icons (and also the font if that was ripped from Windows too), you might be okay.
> Must register to download
I guess that's true for only some definitions of "free"
See: https://react95.io/#
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.
Later edit: https://github.com/themesberg/windows-95-ui-kit