System.css: A design system for building retro Apple interfaces | Hacker News Reader

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

sakofchit.github.io

253 pointssurrTurr55 comments

Open articleView on HN

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

Don't forget Puppertino for OSX! https://github.com/codedgar/Puppertino

https://github.com/codedgar/Puppertino

"Based on MacOS HIG guidelines" ... uses links for buttons.

Somehow this is even more aligned with Apple of today.

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.

> 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

Edit: Segmented controls are also links: https://codedgar.github.io/Puppertino/examples/segmented_con...

As are buttons like "close this sheet" in actions: https://codedgar.github.io/Puppertino/examples/segmented_con...

etc. etc.

Nice, saw you also have a section on fonts! Think the following could make you smile, too. Checkout this font that changes with the users facial expression (shameless plug):

Description: https://danishdesignaward.com/en/arkiver/nominee/adam-lenzin...

Demo: https://facetype3000.herokuapp.com

haha nice demo! needs a smoothing function, wobbles too much. also i use an external cam, would be nice to pick cam source

This is awesome. I don't think i've bookmarked so many links in one go.

lol someday i'll try to turn this into a moneymaking side project but right now just having fun being a resource hoarder

For some reason, HackerNews does not render all the links correctly in this comment

Prefixing a line with two spaces does that.

  Prefixing a line with two spaces does this.

i wish HN would just adopt a subset of markdown (eg minus headers and other attention grabby tricks) - its such a standard at this point

BIOS like UI is Turbo Vision framework https://en.wikipedia.org/wiki/Turbo_Vision - one of the earliest windowed application frameworks. Not GUI framework, obviously. Made by Borland and made famous by its IDEs like Turbo C++ and Turbo Pascal.

Nowadays available as open source: https://github.com/magiblot/tvision

not CSS though. so doesnt fit on my list!

I love this so much, thank you.

We need gs/os

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.

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

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)

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

Why would you expect the fundamentals to change? Wouldn’t that be a bad sign?

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.

Specifically on the Mac?

Tasteful color UI elements (System 7). Unicode support. Multitouch trackpad gestures for window/app management. Dragging data and files between applications (System 7 Pro, IIRC). The ability to run more than one application at once (MultiFinder, but really only standard in System 7). Not having to manually allocate the amount of RAM an app should use (Mac OS X). The zoom box actually being useful (System 7). Being able to move (some) modal dialogs (System 7). Finder being able to do more than one file operation simultaneously (Mac OS 8). Window minimization (Mac OS 8). Menus that don't require you to keep holding the mouse button down (Mac OS 8).

Countless others, really -- System 6 is a very different UX. There's likely some element of modernity you'd actually miss.

Scroll wheel support

It's basically the same as the System 1 which was just a ripoff of the stuff at Xerox PARC. That is where things really went from zero to one, on a lot of things. The same thing happened with programming languages. C sparked a revolution and languages have been getting incrementally more bloated (and terrible) ever since. I think the difference stems from academic versus capitalist roots. I mean, even Xerox didn't want the stuff they had created.

> which was just a ripoff of the stuff at Xerox PARC

It was not a ripoff. They had a license agreement and a whole bunch of people went from PARC (where they felt they had amazing technologies but could not do much with them because Xerox did not care) to Apple (where they could actually put a lot of ideas in practice).

> That is where things really went from zero to one, on a lot of things.

Some things. Others did not exist at the time and there have been a lot of improvements since then. Things done at PARC also depended on a lot of groundwork done by people like Turing and in places like the Bell Labs. Yet we don’t argue that Babbage was the real revolution and nothing of note happened since then.

>It's basically the same as the System 1 which was just a ripoff of the stuff at Xerox PARC.

People say things like this and because they haven't researched the matter more deeply they miss out on some great gems from that such as the way overlapping windows worked on Apple's Macintosh compared to how Xerox did things because the Apple engineers didn't know how Xerox did it, thought they were doing more than they did and in the course of trying to recreate it invented something better.

A reference to what I mean can be found here:

http://novel.tingroom.com/lizhi/1019/30667.html

The bottom line is that even re-implementing something can lead to creativity and extend the original in exciting new ways as a result. To my mind that makes it much less a 'ripoff' since it's a new way of doing things.

I'm not sure what you are referencing from that. It reiterates what I stated, not what you are saying. "Great Artists Steal" etc. The developers sat down and had everything explained to them. I'm not sure what you mean by "engineers didn't know how Xerox did it."

A desktop environment for Linux, based on Windows 3.11, System 6 or 7 would be a really nice addition. You can even go as far as Windows 95. It wasn't pretty, but it was simple and at least tried to help you use the system efficiently.

Over time we seem to have decided that people where familiar enough with computers that we could drop manuals or hints in the UI. On a modern Mac there's a ton of keyboard shortcuts, gestures and helpful feature, there's just no good way to learn about them. I think where missing out on a ton of stuff, simply due to poor discoverability.

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.

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

I really hope the answer is Netscape.

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

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

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.

Really cool! Thanks

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.

Same - broken on Safari on an iPhone

Both use the same engine.

Same on an Android

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

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

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.

Awesome! I had some fun implementing a System 6 inspired theme on a recent toy project for creating custom Slack emojis - https://temoji.me (desktop only).

Wish I knew about this framework earlier - would have saved me some time :)

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

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

Broken on mobile

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

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

perhaps https://hotdoglinux.com

or simply loading up Mini vMac, entering fullscreen, and basking for a while.

Blurry on Firefox.

Still better than Windows.

This is great.

Reply on news.ycombinator.com