Pixelambacht

I collect niche 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

- [Puppertino](https://github.com/codedgar/Puppertino) meant to mimic the look of macOS. [demo](https://codedgar.github.io/Puppertino/)

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

- [a2k](https://a2000-docs.netlify.app/): A Windows 2000 inspired web component library

more at https://github.com/swyxio/spark-joy/tree/master

There are several color font formats. This one can't do gradients. You can check your browser's support at https://pixelambacht.nl/chromacheck/. SBIX is Apple's format and it basically just embeds PNGs in the font which isn't scalable. COLRv0 is Microsoft's format and it basically just stacks single-color glyphs, so it's scalable but doesn't do gradients. COLRv1 is newer (2019) and adds support for gradients. Opentype-SVG is Mozilla and Adobe's format and it embeds SVGs for glyphs. You can do gradients and maybe even animation, and it scales. CBDT/CBLC is Google's format and it also includes bitmap images like SBIX. You can make fonts that support multiple of these with https://github.com/googlefonts/nanoemoji.

Font Awesome allows stacking:
http://blog.fontawesome.io/2014/09/25/custom-file-types-with-stacked-icons/

Here's their demo but with some color added:
http://codepen.io/anon/pen/VYQMea

But yeah, you're typically stuck with one color. Here's a demo that shows off multi-color fonts (Firefox only):
http://pixelambacht.nl/2014/compyx-a-multicolor-8bit-font/

That technique could be used to make multi-color font icons if it were cross-browser compatible. Maybe one day. But I think SVG icons are where things are headed.

As for compatibility issues, there's one listed on this page:
https://news.ycombinator.com/item?id=9047846

Both of these ligatures (fi and ->) in standard computer fonts like TTF or OTF use exactly the same technology.

The only difference is that one ligature applies to alphabetic characters and the other to non-alphabetic characters.

Ligatures can be used to make some font aesthetically pleasing like this: http://www.impallari.com/lobster/

Or they can be abused like this: https://pixelambacht.nl/2015/sans-bullshit-sans/

It is perfectly possible for a font to have alphabetic and non-alphabetic ligatures.

The accompanying article by the developers has a really good explanation of how they pulled this off and font hacking in general. And if one was so inclined, it outlines all the steps necessary to add more buzzwords to the font.

http://pixelambacht.nl/2015/sans-bullshit-sans/

Here's the git if you want to play around with it:

https://github.com/RoelN/SansBullshitSans