1bit-ui

Introduction

This page demonstrates some of the ways 1bit-ui can be used, as well as code for its examples.

Basics

All CSS classes from 1bit-ui start with .bit-. This way you'll always know when you're using 1bit-ui CSS. 1bit-ui uses the lowest CSS specificity possible, if you need to override it.

Change the custom properties to try different values. Refresh the page to reset it.

The underlined links make them easy to see within a sentence or a paragraph text. The mouse hover border provides a visual cue when you're about to click a link.

Selects

Buttons

Text Inputs

Radio Buttons

For proper accessibility and appearance, wrap all radio buttons inside a bit-field and put a label after it with correct id and forattributes

Checkboxes

For proper accessibility and appearance, wrap all checkboxes inside a bit-field and put a label after it with correct id and forattributes

Inline Tags

Tables

A basic table.

A table with row headers.

A table with a footer.

Cards

Inline SVG

Using the CSS class bit-svg will set the fill property to --bit-color0, causing inline SVGs to automatically match your 1bit-ui theme.

Horizontal Rule

Code

The class bit-pre can be used for multiline code blocks.

The class bit-code can be used for inline code:

Scrollbars

Firefox has the ability to put custom colors on your scrollbars! Don't forget to put bit-scrollbar on your <html> element if you'd like to opt-in to this feature. You can also put it on only specific elements that you'd like to opt-in to this behavior. Hopefully in the future more browsers besides Firefox will implement this feature.

Get Creative!

CSS Custom Properties can be changed on your page at any time! You can use JavaScript, or even CSS selectors to do it! You could apply a :focus style to change --bit-color0 and --bit-color1 to different colors to make the focus state easier to read.

Or if you have a super dangerous delete button, you could force the color to be red so it stands out against your normal color scheme. 1bit-ui encourages your creativity.

Dark Mode

You can use the prefers-color-scheme: dark CSS media query to set the --bit-color0 and --bit-color1 variables, allowing your users to automatically get Dark Mode with a single block of CSS

.bit-auto,
.bit-root {
  --bit-color0: white;
  --bit-color1: black;
}

@media (prefers-color-scheme: dark) {
  .bit-auto,
  .bit-root {
    --bit-color0: white;
    --bit-color1: black;
  }
}

Rounded Corners

Sharp edges not your thing? You can customize that. CSS Custom Properties are inherited, so you can apply this to your whole page by setting --bit-border-radius on any element you want through CSS or even inline styles.

Auto Mode

The suggested way to use 1bit-ui is exclusively by adding CSS classes to elements you want to style. But sometimes your HTML is constrained to be entirely class free.

In order to use auto mode, put the class bit-auto on whichever tag you want class free markup inside of (e.g. on the main element of your blog post, or even the entire document if you want to work quicker, or use Markdown or something).