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