4 ms·

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

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
djsumdog 7y ago
That's awesome! And it even uses the 256 color/win98 icons!

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

djsumdog 7y ago

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