9 ms·

System.css: A design system for building retro Apple interfaces

253 points by surrTurr 4y ago

_the_inflator 4y ago
I love it! As great as the NES CSS framework: https://nostalgic-css.github.io/NES.css/ https://nostalgic-css.github.io/NES.css/
cush 4y ago
Ironically, I can't get the menu to close on iOS safari. The close button seems to be broken.
- cjsawyer 4y ago
  In ios chrome putting it in landscape lets me see the content past the unclosable window
swyx 4y ago
I collect these novelty CSS things for fun! here https://github.com/sw-yx/spark-joy/blob/master/README.md#fun-css-frameworks https://github.com/sw-yx/spark-joy/blob/master/README.md#fun... - [NES.css](https://github.com/nostalgic-css/NES.css https://github.com/nostalgic-css/NES.css): NES.css is a NES-style(8bit-like) CSS Framework. - [PSone.css](https://github.com/micah5/PSone.css https://github.com/micah5/PSone.css): PS1 style CSS Framework, inspired by NES.css. - [LaTeX.css](https://latex.now.sh/ https://latex.now.sh/) - Operating System CSS - [98.css](https://github.com/jdan/98.css): A Windows 98 inspired framework for building faithful recreations of old UIs. - [Office 97 clipart in svg format](https://archive.org/details/mso97clipart) - [XP.css](https://github.com/botoxparty/XP.css): A Windows XP inspired framework for building faithful recreations of operating system GUIs. An extension of 98.css. - [7.css](https://khang-nd.github.io/7.css/) - [System.css](https://sakofchit.github.io/system.css/) Retro Apple-inspired UI - [Commodore 64 CSS](http://pixelambacht.nl/2013/css3-c64/) - DOS: [BOOTSTRA.386](https://github.com/kristopolous/BOOTSTRA.386): A vintage 1980s DOS inspired Twitter Bootstrap theme - [Text UI CSS](https://github.com/vinibiavatti1/TuiCss https://github.com/vinibiavatti1/TuiCss): bios like UI's - [New Dawn](https://github.com/npjg/new-dawn https://github.com/npjg/new-dawn): A mac classic After Dark inspired stylesheet. - [Geocities Bootstrap theme](https://code.divshot.com/geo-bootstrap/ https://code.divshot.com/geo-bootstrap/) - more https://dev.to/iainfreestone/10-resources-for-recreating-old-school-retro-user-interfaces-today-hkj https://dev.to/iainfreestone/10-resources-for-recreating-old...
- kurupt213 4y ago
  We need gs/os
- purgedreality 4y ago
  Don't forget Puppertino for OSX! https://github.com/codedgar/Puppertino https://github.com/codedgar/Puppertino https://github.com/codedgar/Puppertino https://github.com/codedgar/Puppertino
  - dmitriid 4y ago
    "Based on MacOS HIG guidelines" ... uses links for buttons. Somehow this is even more aligned with Apple of today.
    - o_m 4y ago
      What do you mean? There is nothing wrong with displaying a link with a button style as long as you treat it as a link with that navigates somewhere else. In the docs they are using buttons on interaction that does not navigate.
      - dmitriid 4y ago
        > What do you mean? There is nothing wrong with displaying a link with a button style as long as you treat it as a link with that navigates somewhere else. Yup. This basically sums up current approach. There's a clear semantic distinction between a button and a link. For example, screen readers will treat them differently. And this is especially egregious when your example page is specifically about buttons: https://codedgar.github.io/Puppertino/examples/buttons.html https://codedgar.github.io/Puppertino/examples/buttons.html Edit: Segmented controls are also links: https://codedgar.github.io/Puppertino/examples/segmented_controls.html https://codedgar.github.io/Puppertino/examples/segmented_con... As are buttons like "close this sheet" in actions: https://codedgar.github.io/Puppertino/examples/segmented_controls.html https://codedgar.github.io/Puppertino/examples/segmented_con... etc. etc.
- 4y ago
duxup 4y ago
Site is broken in Firefox on an iPhone.
- dharmatva 4y ago
  Same - broken on Safari on an iPhone
  - stop50 4y ago
    Both use the same engine.
- uneekname 4y ago
  Same on an Android
metadat 4y ago
If this were more robust across browsers I'd totally start using it for my personal projects. Such a sweet throwback!
divbzero 4y ago
When I look at this I can’t help thinking that desktop UX reached its peak (or plateau?) three decades ago. What improvements have there been since System 6? Perhaps multiple desktops, tabs, and universal search (e.g. Spotlight) but those improvements feel more incremental than fundamental.
- deleted 4y ago
  [deleted]
- thih9 4y ago
  > What improvements have there been since System 6 I can use touch gestures, scroll intuitively or swipe between recently active websites or apps on my iOS device. I can work seamlessly on the same document using multiple devices and/or with multiple people. (Web) UX advances let me view maps, browse apartment listings, compare various kinds of products and order stuff online. Then again, not sure how much all that is worth since I still use console for work.
  - bobthepanda 4y ago
    To be fair, they said desktop OS, where touch is pretty much irrelevant. Desktop OS has mostly been marked by innovations that didn’t really pan out even if they were interesting (e.g. Windows 8 and the tile-based Metro UX)
    - thih9 4y ago
      > To be fair, they said desktop OS, where touch is pretty much irrelevant. My preferred way of interacting with a desktop OS is via a touchpad.
- jahewson 4y ago
  Why would you expect the fundamentals to change? Wouldn’t that be a bad sign?
- flenserboy 4y ago
  System 6, with a few small tweaks (I liked MultiFinder, but it could have been done better), is pretty much an ideal desktop interface aimed at work. The problem is that modern interfaces are there for people who either aren't working or who aren't paying attention enough to notice consistency (indeed, they can be confused by it). I witnessed today for the first time someone search the web from the Windows Start menu search box; I think most people have no understanding that what they're using is an actual, underlying system, but is instead presented from the internet. They want to type in a word, click on the first answer, and move on. Well-made interfaces get in the way of that.
masswerk 4y ago
Minor nitpick: labels for checkboxes and radio buttons should be really in normal Geneva, not in Chicago. (Chicago appears in menu bars, menus and titles only.)
gabereiser 4y ago
Broken on mobile
jakearmitage 4y ago
Blurry on Firefox.
smm11 4y ago
Still better than Windows.
senzilla 4y ago
https://www.senzilla.io/software/nexus/ https://www.senzilla.io/software/nexus/ A classless CSS framework that makes content look like it would have in the very first web browser – the Nexus browser.
- sureglymop 4y ago
  Really cool! Thanks
KerrAvon 4y ago
Positioning of elements doesn't seem correct (I'm using Safari on macOS). Lots of things are simply wrong.
kixiQu 4y ago
The smoothing is wigging me out but this is so much closer than most everything I've found!!
todd3834 4y ago
I don't know why but I'm always shocked how good nostalgia feels. Whenever I see a throwback to geocities, a thread on proggies/punters for AOL 3.0, or anything from the early Apple days. Thank you for making that and giving me those feelings
RodgerTheGreat 4y ago
Lots of inconsistencies. What browser was this developed against? Here's an incorrectly centered checkbox, in three different ways, in Safari, Firefox, and Chrome: https://imgur.com/a/bSziuRd https://imgur.com/a/bSziuRd
- mwint 4y ago
  I really hope the answer is Netscape.
293984j29384 4y ago
This is great.
toastal 4y ago
Please don't use checkbook hacks for menu. When a lot of work can go into trying to make them accessible, it will be a lot easier and cleaner doing straight JavaScript. As it stands, you're missing a lot of ARIA for these components which isn't accessible and looks awful in TUI browsers with unusable checkbox elements scattered through the hierarchy. Further nitpick is using the `dd-` prefix for the inner dropdown bits; it's confusing because `<dd>` is already an HTML element.
lalwanivikas 4y ago
It's pretty good work man! Keep it up. Yes there are problems which people will point out, but I absolutely love old mac UIs, so we need more stuff like this :-)
clashmoore 4y ago
Brought back a fond memory. Growing up my family's computer was a Mac with system 6 and Jurassic Park was released. I'd make some park control user interfaces in the paint program - trying to replicate the Mac menu and button designs - then play some Jurassic Park trying to save the park.
infologics 4y ago
[dead]
alexpls 4y ago
Awesome! I had some fun implementing a System 6 inspired theme on a recent toy project for creating custom Slack emojis - https://temoji.me https://temoji.me (desktop only). Wish I knew about this framework earlier - would have saved me some time :)
devgonewild 4y ago
Is there a way to get my Mac to actually look like that? I enjoy the old UI
- RodgerTheGreat 4y ago
  perhaps https://hotdoglinux.com https://hotdoglinux.com or simply loading up Mini vMac, entering fullscreen, and basking for a while.

253 points by surrTurr 4y ago

I love it! As great as the NES CSS framework: https://nostalgic-css.github.io/NES.css/ https://nostalgic-css.github.io/NES.css/

cush 4y ago

Ironically, I can't get the menu to close on iOS safari. The close button seems to be broken.

cjsawyer 4y ago
In ios chrome putting it in landscape lets me see the content past the unclosable window

swyx 4y ago

I collect these novelty CSS things for fun! here https://github.com/sw-yx/spark-joy/blob/master/README.md#fun-css-frameworks https://github.com/sw-yx/spark-joy/blob/master/README.md#fun... - [NES.css](https://github.com/nostalgic-css/NES.css https://github.com/nostalgic-css/NES.css): NES.css is a NES-style(8bit-like) CSS Framework. - [PSone.css](https://github.com/micah5/PSone.css https://github.com/micah5/PSone.css): PS1 style CSS Framework, inspired by NES.css. - [LaTeX.css](https://latex.now.sh/ https://latex.now.sh/) - Operating System CSS - [98.css](https://github.com/jdan/98.css): A Windows 98 inspired framework for building faithful recreations of old UIs. - [Office 97 clipart in svg format](https://archive.org/details/mso97clipart) - [XP.css](https://github.com/botoxparty/XP.css): A Windows XP inspired framework for building faithful recreations of operating system GUIs. An extension of 98.css. - [7.css](https://khang-nd.github.io/7.css/) - [System.css](https://sakofchit.github.io/system.css/) Retro Apple-inspired UI - [Commodore 64 CSS](http://pixelambacht.nl/2013/css3-c64/) - DOS: [BOOTSTRA.386](https://github.com/kristopolous/BOOTSTRA.386): A vintage 1980s DOS inspired Twitter Bootstrap theme - [Text UI CSS](https://github.com/vinibiavatti1/TuiCss https://github.com/vinibiavatti1/TuiCss): bios like UI's - [New Dawn](https://github.com/npjg/new-dawn https://github.com/npjg/new-dawn): A mac classic After Dark inspired stylesheet. - [Geocities Bootstrap theme](https://code.divshot.com/geo-bootstrap/ https://code.divshot.com/geo-bootstrap/) - more https://dev.to/iainfreestone/10-resources-for-recreating-old-school-retro-user-interfaces-today-hkj https://dev.to/iainfreestone/10-resources-for-recreating-old...

kurupt213 4y ago
We need gs/os
purgedreality 4y ago
Don't forget Puppertino for OSX! https://github.com/codedgar/Puppertino https://github.com/codedgar/Puppertino https://github.com/codedgar/Puppertino https://github.com/codedgar/Puppertino
- dmitriid 4y ago
  "Based on MacOS HIG guidelines" ... uses links for buttons. Somehow this is even more aligned with Apple of today.
  - o_m 4y ago
    What do you mean? There is nothing wrong with displaying a link with a button style as long as you treat it as a link with that navigates somewhere else. In the docs they are using buttons on interaction that does not navigate.
    - dmitriid 4y ago
      > What do you mean? There is nothing wrong with displaying a link with a button style as long as you treat it as a link with that navigates somewhere else. Yup. This basically sums up current approach. There's a clear semantic distinction between a button and a link. For example, screen readers will treat them differently. And this is especially egregious when your example page is specifically about buttons: https://codedgar.github.io/Puppertino/examples/buttons.html https://codedgar.github.io/Puppertino/examples/buttons.html Edit: Segmented controls are also links: https://codedgar.github.io/Puppertino/examples/segmented_controls.html https://codedgar.github.io/Puppertino/examples/segmented_con... As are buttons like "close this sheet" in actions: https://codedgar.github.io/Puppertino/examples/segmented_controls.html https://codedgar.github.io/Puppertino/examples/segmented_con... etc. etc.
4y ago

duxup 4y ago

Site is broken in Firefox on an iPhone.

dharmatva 4y ago
Same - broken on Safari on an iPhone
- stop50 4y ago
  Both use the same engine.
uneekname 4y ago
Same on an Android

metadat 4y ago

If this were more robust across browsers I'd totally start using it for my personal projects. Such a sweet throwback!

divbzero 4y ago

When I look at this I can’t help thinking that desktop UX reached its peak (or plateau?) three decades ago. What improvements have there been since System 6? Perhaps multiple desktops, tabs, and universal search (e.g. Spotlight) but those improvements feel more incremental than fundamental.

deleted 4y ago
[deleted]
thih9 4y ago
> What improvements have there been since System 6 I can use touch gestures, scroll intuitively or swipe between recently active websites or apps on my iOS device. I can work seamlessly on the same document using multiple devices and/or with multiple people. (Web) UX advances let me view maps, browse apartment listings, compare various kinds of products and order stuff online. Then again, not sure how much all that is worth since I still use console for work.
- bobthepanda 4y ago
  To be fair, they said desktop OS, where touch is pretty much irrelevant. Desktop OS has mostly been marked by innovations that didn’t really pan out even if they were interesting (e.g. Windows 8 and the tile-based Metro UX)
  - thih9 4y ago
    > To be fair, they said desktop OS, where touch is pretty much irrelevant. My preferred way of interacting with a desktop OS is via a touchpad.
jahewson 4y ago
Why would you expect the fundamentals to change? Wouldn’t that be a bad sign?
flenserboy 4y ago
System 6, with a few small tweaks (I liked MultiFinder, but it could have been done better), is pretty much an ideal desktop interface aimed at work. The problem is that modern interfaces are there for people who either aren't working or who aren't paying attention enough to notice consistency (indeed, they can be confused by it). I witnessed today for the first time someone search the web from the Windows Start menu search box; I think most people have no understanding that what they're using is an actual, underlying system, but is instead presented from the internet. They want to type in a word, click on the first answer, and move on. Well-made interfaces get in the way of that.

masswerk 4y ago

Minor nitpick: labels for checkboxes and radio buttons should be really in normal Geneva, not in Chicago. (Chicago appears in menu bars, menus and titles only.)

gabereiser 4y ago

Broken on mobile

jakearmitage 4y ago

Blurry on Firefox.

smm11 4y ago

Still better than Windows.

senzilla 4y ago

https://www.senzilla.io/software/nexus/ https://www.senzilla.io/software/nexus/ A classless CSS framework that makes content look like it would have in the very first web browser – the Nexus browser.

sureglymop 4y ago
Really cool! Thanks

KerrAvon 4y ago

Positioning of elements doesn't seem correct (I'm using Safari on macOS). Lots of things are simply wrong.

kixiQu 4y ago

The smoothing is wigging me out but this is so much closer than most everything I've found!!

todd3834 4y ago

I don't know why but I'm always shocked how good nostalgia feels. Whenever I see a throwback to geocities, a thread on proggies/punters for AOL 3.0, or anything from the early Apple days. Thank you for making that and giving me those feelings

RodgerTheGreat 4y ago

Lots of inconsistencies. What browser was this developed against? Here's an incorrectly centered checkbox, in three different ways, in Safari, Firefox, and Chrome: https://imgur.com/a/bSziuRd https://imgur.com/a/bSziuRd

mwint 4y ago
I really hope the answer is Netscape.

293984j29384 4y ago

This is great.

toastal 4y ago

Please don't use checkbook hacks for menu. When a lot of work can go into trying to make them accessible, it will be a lot easier and cleaner doing straight JavaScript. As it stands, you're missing a lot of ARIA for these components which isn't accessible and looks awful in TUI browsers with unusable checkbox elements scattered through the hierarchy. Further nitpick is using the `dd-` prefix for the inner dropdown bits; it's confusing because `<dd>` is already an HTML element.

lalwanivikas 4y ago

It's pretty good work man! Keep it up. Yes there are problems which people will point out, but I absolutely love old mac UIs, so we need more stuff like this :-)

clashmoore 4y ago

Brought back a fond memory. Growing up my family's computer was a Mac with system 6 and Jurassic Park was released. I'd make some park control user interfaces in the paint program - trying to replicate the Mac menu and button designs - then play some Jurassic Park trying to save the park.

infologics 4y ago

[dead]

alexpls 4y ago

Awesome! I had some fun implementing a System 6 inspired theme on a recent toy project for creating custom Slack emojis - https://temoji.me https://temoji.me (desktop only). Wish I knew about this framework earlier - would have saved me some time :)

devgonewild 4y ago

Is there a way to get my Mac to actually look like that? I enjoy the old UI

RodgerTheGreat 4y ago
perhaps https://hotdoglinux.com https://hotdoglinux.com or simply loading up Mini vMac, entering fullscreen, and basking for a while.