1bit-ui is a small CSS library for making retro-inspired web pages using two colors. Its color palette is completely customizable using CSS Custom Properties (or CSS Variables).

1bit-ui Example

Click the buttons to see 1bit-ui in action.

More Detail

You can use 1bit-ui with basic form fields and other elements. 1bit-ui requires the use of CSS classes, so it won't clash with your existing CSS. 1bit-ui also uses the lowest specificity for each rule, making it much less likely to override your existing CSS.

1bit-ui is about 15 KB of unminified CSS and compresses to about 2.5 KB via gzip compression.

Standard Installation

Download 1-bit-ui.css and use a link tag:

<link rel="stylesheet" href="1bit-ui.css" />

Webpack Installation

If you're using webpack with css-loader, you can install it through npm:

npm install 1bit-ui

Then load the CSS through your JavaScript:

import "1bit-ui/dist/1bit-ui.css";

To use one of the custom themes at the top, add the following CSS to your page: