This project attempts to recreate the visual stylings of Windows 3.1 for use on the web. Color schemes have been approximated as closely as possible based on the appearance settings in the control panel and the system color picker.
Bootstrap's grid system is utilized to make things responsive, but this is not a Bootstrap-specific project; the CSS classes can be used with any framework. Some tweaks will likely be required to make everything look right.
SCSS is used for the source files since it supports nesting and variables. You can build the project using Parcel. Check out the GitHub repo for information about setting up a local dev environment.
Use the sample dialog box to build an ice cream sundae.
Experiment with the different sundae selections. As you make selections, the calorie count for the sundae increases or decreases.
You can learn about the form controls on display here by inspecting element.
We use MS Sans Serif as the default font for headers and paragraphs.
You can override these fonts using the classes:
font-systemfont-sans-seriffont-seriffont-monospaceOur links are styled in the style of WinHelp. Definition links are in this style as well. What's this?
Windows are the main building blocks of the UI. They can be used to display content, forms, or anything else you can think of.
Windows can be nested inside of other windows.
RGB colors are copied from the default Windows color picker, and are referred to by the letters and numbers in this grid.
Dithered color simulation uses a tiled background image of what the dithered color would look like under 16 color mode in Windows 3.1.
You can specify a color using the classes below where XX is a
location on the grid. For example, A1, C3, D5, H6:
bg-XXrbg-XXdtext-XXrtext-XXdUse r for RGB or d for dithered.
Using the text-XXd classes will give you dithered text, however
this relies on
background-clip
and it isn't always guaranteed to work in all browsers.
There are some icons built-in that are available as CSS sprites. These all
start with ico-.
This is something you should pay attention to!
This is but a taste of our fury! Do you yield?
The retro encabulator is not responding properly. Check your IRQ values and restart your computer.
Remember: licking doorknobs is illegal on other planets.
Task failed successfully.
Bad command or file name.
These are mostly here for dialog boxes, which are featured above.
Your web page or application may want to display a list of links, and
the icon-list class simulates this. If you're using our
(under construction) web components, the minimized icons use this to
display on the desktop.
Themes are applied using the theme-* class. The following themes
are available: