Back

adamham.dev

XP.css

May 14, 2020

A demo of XP.css

A CSS framework for building faithful recreations of operating system GUIs.

So i've just published XP.css, it's a CSS library that let's you build components that look exactly like Windows XP using semantic HTML.

Preview the library

View Demo with React

I took on this project because of the amount of times that i've had to build a UI for the web that is mean to emulate the GUI of an operating system. I stumbled on Jordan Scales' 98.css and immediately what he'd put together made a lot of sense. His attention to detail is what really caught my eye.

My first attempt... In 98, all of the styles were written in a single style sheet. I began by modifying this stylesheet to conform to the screenshots of components that I was capturing using XP running in a virtual machine, and I used Photoshop to measure pixel values and spacing. Some of the assets could not be rebuilt using just CSS so I would create SVGs of them. I found this tool Pixels.svg to help me convert my images to SVG.

Boilerplating the GUI

After having some success, I realised quickly that 98 could easily be converted into a CSS framework to build themes for any operating system's GUI. So then I started looking at how the whole 98 was put together. The project uses PostCSS to process the stylesheet (hard-code variables and transform SVGs to be inline). I used an online converter to refactor the existing stylesheet into a nested SCSS format and included the postcss-nested plugin, then split the code into files depending on the components and added the postcss-import plugin.

I started separating the styles that were specific to Windows 98 until I had a core stylesheet (gui.css), then I could theme it for Windows XP.

Check out the before and after of the core stylesheet, the 98 theme and the XP theme.

Addings a Tabs component

Ok so this library is not a complete set of all the components available in XP, but it includes the main building blocks. For a more true XP experience Tabs are a crucial element so i've included them. I based the markup according to the MDN web docs accessibility guidelines for tabs.

Since this library ships as only CSS, fully functional tabs would have taken some kind of witchcraft. I've made an attempt at a solution however I would advise to manage the active states of the tabs yourself using Javascript.

Tabs on XP.css

When I was adding the documentation for the Tabs I noticed Jordan was referencing a document called 'Microsoft Windows User Experience'. I didn't have access to the specific edition that he uses but I referenced the version that's published online.

Next

By creating more themes, we'll be able to clearly define the core stylesheet even further.

I would love to see other people's work on gui.css, if anyone else if up for creating a theme for another OS using this framework. Also new components and bugs/issues are also welcome!

There's also some opimisations that can be done to reduce the bundle size.

Feel free to contribute in whatever way you like!