2bit-ui

Introduction

2bit-ui is a small CSS library for making retro-inspired web pages using four colors. Its color palette is completely customizable using CSS Custom Properties.

2bit-ui Examples

Click the buttons to see 2bit-ui color palettes in action.

More Detail

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

2bit-ui is about 18 KB of unminified CSS and compresses to about 2.6 KB via gzip compression.

Standard Installation

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

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

Webpack Installation

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

npm install 2bit-ui

Then load the CSS through your JavaScript:

import "2bit-ui";

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

.bit-root,
.bit-auto {
  --bit-color-bg: hsl(22 100% 95%);
  --bit-color-fg: hsl(22 100% 30%);
  --bit-color-shadow: hsl(22 80% 80%);
  --bit-color-accent: hsl(202 100% 30%);
}