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

#1

Post by surrTurr » Thu, Aug 11, 2022, 6:29 PM UTC

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

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

#2

Post by _the_inflator » Thu, Aug 11, 2022, 6:33 PM UTC

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

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

#3

Post by cush » Thu, Aug 11, 2022, 6:45 PM UTC

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

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

#4

Post by swyx » Thu, Aug 11, 2022, 6:46 PM UTC

I collect these novelty CSS things for fun! here https://github.com/sw-yx/spark-joy/blob/master/README.md#fun...

- [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): PS1 style CSS Framework, inspired by NES.css.

- [LaTeX.css](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): bios like UI's

- [New Dawn](https://github.com/npjg/new-dawn): A mac classic After Dark inspired stylesheet.

- [Geocities Bootstrap theme](https://code.divshot.com/geo-bootstrap/)

- more https://dev.to/iainfreestone/10-resources-for-recreating-old...

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

#5

Post by duxup » Thu, Aug 11, 2022, 6:52 PM UTC

Site is broken in Firefox on an iPhone.

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

#6

Post by cjsawyer » Thu, Aug 11, 2022, 7:02 PM UTC

cush wrote: post #3

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

In ios chrome putting it in landscape lets me see the content past the unclosable window

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

#7

Post by metadat » Thu, Aug 11, 2022, 7:07 PM UTC

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

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

#8

Post by dharmatva » Thu, Aug 11, 2022, 7:20 PM UTC

duxup wrote: post #5

Site is broken in Firefox on an iPhone.

Same - broken on Safari on an iPhone

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

#9

Post by divbzero » Thu, Aug 11, 2022, 7:31 PM UTC

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.

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

#10

Post by masswerk » Thu, Aug 11, 2022, 7:34 PM UTC

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