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.
Click the buttons to see 2bit-ui color palettes in action.
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.
Download
2bit-ui.css
and use a link
tag:
<link rel="stylesheet" href="2bit-ui.css" />
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%); }