XP.css – Windows XP CSS File and Framework for Building GUIs

XP.css – Windows XP CSS File and Framework for Building GUIs

A design system for building faithful recreations of old UIs. Intro XP.css is an extention of 98.css. A CSS library for building interfaces that look like old UIs. See XP.css on GitHub See 98.css on GitHub This library relies on the usage of semantic HTML. To make a button, you’ll need to use a . Input elements require labels. Icon buttons rely on aria-label. This page will guide you through that process, but accessibility is a primary goal of this project. You can override many of the styles of your elements while maintaining the appearance provided by this library. Need more padding on your buttons? Go for it. Need to add some color to your input labels? Be our guest. This library does not contain any JavaScript, it merely styles your HTML with some CSS. This means 98.css is compatible with your frontend framework of choice. Here is an example of XP.css used with React, and an example with vanilla JavaScript. The fastest way to use XP.css is to import it from unpkg. Windows XP Theme Windows 98 Theme You can also install XP.css from npm. Installation npm install xp.css Usage // For XP import “xp.css/dist/XP.css”; // For 98 import “xp.css/dist/98.css”; Components Button A command button, also referred to as a push button, is a control that causes the application to perform some action when the user clicks it. A standard button measures 75px wide and 23px tall, with a raised outer and inner border. They are given 12px of horizontal padding by default. Show code Click me When buttons are clicked, the raised borders become sunken. The following button is simulated to be in the pressed (active) state. Show code I am being pressed Disabled buttons maintain the same raised border, but have a “washed out” appearance in their label. Show code I cannot be clicked Button focus is communicated with a dotted border, set 4px within the contents of the button. The following example is simulated to be focused. Show code I am focused Checkbox A check box represents an independent or non-exclusive choice. Checkboxes are represented with a sunken panel, populated with a “check” icon when selected, next to a label indicating the choice. Note: You must include a corresponding label after your checkbox, using the element with a for attribute pointed at the id of your input. This ensures the checkbox is easy to use with assistive technologies, on top of ensuring a good user experience for all (navigating with the tab key, being able to click the entire label to select the box). This is a checkbox Show code This is a checkbox Checkboxes can be selected and disabled with the standard checked and disabled attributes. When grouping inputs, wrap each input in a container with the field-row class. This ensures a consistent spacing between inputs. I am checked I am inactive I am inactive but still checked Show code I am checked I am inactive I am inactive but still checked OptionButton An option button,  » Read More

Like to keep reading?

This article first appeared on botoxparty.github.io. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply