UI CSS library implementation

[serapath]

37

@todo

• [ ] research many retro operating systems and images for inspirations
  • [ ] go through comment and linked documents below to add more tasks
• [ ] turn everything into vanillaJS CSS theme components

[serapath]

feedback 2023.03.09

This is for the implementation phase of our themes

Implementation should aim for at least 3 things:

1. cherry pick best "retro UX features", but back-porting them into retro 70s/80s UI
   • best UX without compromising 1970s/1980s retr UI
2. using tech json/css/javascript/html/markdown and tools/usecases from now
3. retro in terms of dither, pixelated, monochrome like late 70s early 80s (more below)

---

Can we plan and implement a CSS UI library?

Maybe even two, to ensure we can apply not just a light and dark theme, but a different one, and that our components are generally easily re-usable and themable.

1. The main theme should be a dat garden retro style ancient 1970s/80s theme.
2. The second one could fall more into windows95 or super nintendo style.

>click<

An old commercial video for the commodore 64, the most sold computer system of all time

---

css theme

some css libraries that enable the style of a certain retro system

examples

• https://nostalgic-css.github.io/NES.css/
• https://github.com/vinibiavatti1/TuiCss
  • https://github.com/vinibiavatti1/TuiCss/wiki/Showcase
• https://alexbsoft.github.io/win95.css/
• https://demo.themesberg.com/windows-95-ui-kit/
• https://botoxparty.github.io/XP.css/
• https://jdan.github.io/98.css/

css reset ides

• https://www.resset.dev/docs/#features
• https://github.com/jgthms/minireset.css/blob/master/minireset.css
• https://elad.medium.com/the-new-css-reset-53f41f13282e

can we have a radical and minimal css reset (maybe not as radical as below)

:root { all: unset; } *:after, *:before { all: inherit; }

and then implement on top of that a css ui library for all our desktop elements?

• e.g. icons, windows, scrollbars, etc...

First, all the regular html tags to have a baseline that can be used standalone. Then all the more advanced components we need as part of our css desktop ui library.

---

elements

I list a vast variety of screenshots, but the point is to pick specific visual elements or aspects from each of those so we can combine them. So for most screenshots, the majority of content should be ignored and just the specific parts i describe should be considered for inspiration.

I think in "retro" designs, things are often very "explicit". I would like to focus on minimalism, but not lose the retro explicitness.

In all the links to documents below, please ignore almost everything in the screenshots and focus only on the specific aspects of the screenshot, based on the text and title of the linked documents.

1. how to drag/resize borders
2. window, title bar, with window icons (e.g. minimize/maximize/close/...)
3. contrast, dither, colors, gradients, etc...
4. window border/borderless & transparency
5. icons
6. popups/overlay
7. status bar
8. context menus
9. shell
10. programs
11. tiling window manager

---

retro systems (for inspiration)

There are specifically six retro desktop systems i would love to take inspiration from, maybe even add future themes for those in general and those are:

1. suntools
2. perq System
3. visi on visicorp
4. tandy deskmate
5. at&t unix pc
6. c64 geos