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

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

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.

Please don&#x27;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&#x27;re missing a lot of ARIA for these components which isn&#x27;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&#x27;s confusing because `&lt;dd&gt;` is already an HTML element.

Lots of inconsistencies. What browser was this developed against?<p>Here&#x27;s an incorrectly centered checkbox, in three different ways, in Safari, Firefox, and Chrome: <a href="https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;bSziuRd" rel="nofollow">https:&#x2F;&#x2F;imgur.com&#x2F;a&#x2F;bSziuRd</a>

I love it! As great as the NES CSS framework: <a href="https:&#x2F;&#x2F;nostalgic-css.github.io&#x2F;NES.css&#x2F;" rel="nofollow">https:&#x2F;&#x2F;nostalgic-css.github.io&#x2F;NES.css&#x2F;</a>

Ironically, I can&#x27;t get the menu to close on iOS safari. The close button seems to be broken.

<a href="https:&#x2F;&#x2F;www.senzilla.io&#x2F;software&#x2F;nexus&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.senzilla.io&#x2F;software&#x2F;nexus&#x2F;</a><p>A classless CSS framework that makes content look like it would have in the very first web browser – the Nexus browser.

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

Site is broken in Firefox on an iPhone.

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

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

Brought back a fond memory. Growing up my family&#x27;s computer was a Mac with system 6 and Jurassic Park was released. I&#x27;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.

Awesome! I had some fun implementing a System 6 inspired theme on a recent toy project for creating custom Slack emojis - <a href="https:&#x2F;&#x2F;temoji.me" rel="nofollow">https:&#x2F;&#x2F;temoji.me</a> (desktop only).<p>Wish I knew about this framework earlier - would have saved me some time :)

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

It&#x27;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 :-)

Broken on mobile

The smoothing is wigging me out but this is <i>so</i> much closer than most everything I&#x27;ve found!!

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

Blurry on Firefox.

Still better than Windows.

This is great.