This page demonstrates some of the ways 2bit-ui can be used, as well as code for its examples.
All CSS classes from 2bit-ui start with
bit-. This way you'll always know when
you're using 2bit-ui CSS.
Change the custom properties to try different values. Refresh the page to reset it.
The thickly underlined links make them easy to see within a large amount of text.
For proper accessibility and appearance, wrap all radio buttons inside a
bit-field and put a
label after it with correct
id and
for attributes (or nest the radio button
inside a label)
For proper accessibility and appearance, wrap all checkboxes inside a
bit-field and put a
label after it with correct
id and
for attributes (or nest the checkbox inside
a label)
A basic table.
A table with row headers.
A table with a footer.
Using the CSS class bit-svg will set the
fill property to
currentcolor, causing inline SVGs to
automatically match your 2bit-ui theme.
The class bit-pre can be used for multiline
code blocks.
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.
You can also use the nonstandard WebKit scrollbar properties to color scrollbars if you'd like. This is not included in 2bit-ui.css itself.
::-webkit-scrollbar {
width: 1rem;
height: 1rem;
background-color: var(--bit-color-bg);
}
::-webkit-scrollbar:vertical {
border-left: 1px solid var(--bit-color-shadow);
}
::-webkit-scrollbar:horizontal {
border-top: 1px solid var(--bit-color-shadow);
}
::-webkit-scrollbar-track {
padding: 2px;
}
::-webkit-scrollbar-corner {
background-color: var(--bit-color-shadow);
}
::-webkit-scrollbar-thumb {
background: var(--bit-color-fg);
background-clip: content-box;
box-shadow: inset 0 0 0 3px var(--bit-color-bg);
}
::-webkit-scrollbar-thumb:vertical {
border-left: 1px solid var(--bit-color-shadow);
min-height: 1rem;
}
::-webkit-scrollbar-thumb:horizontal {
border-top: 1px solid var(--bit-color-shadow);
min-width: 1rem;
}
You can use the
prefers-color-scheme: dark CSS media query
to set the --bit-color-* variables, allowing
your visitors to automatically get dark mode with a single block of CSS
.bit-auto,
.bit-root {
--bit-color-bg: #fff;
--bit-color-fg: #333;
--bit-color-shadow: #666;
--bit-color-accent: #c00;
}
@media (prefers-color-scheme: dark) {
.bit-auto,
.bit-root {
--bit-color-bg: #333;
--bit-color-fg: #ccc;
--bit-color-shadow: #666;
--bit-color-accent: #0dd;
}
}
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.
The suggested way to use 2bit-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).
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| 11 | 21 | 31 |
| 12 | 22 | 32 |
| 13 | 23 | 33 |
// JavaScript example
console.log("Hello, world!");
This is an example link within a sentence.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus est ac velit faucibus volutpat. Nullam aliquet sollicitudin accumsan. Nulla pretium et augue vel scelerisque. Donec sit amet semper sapien, at facilisis velit. Quisque vitae egestas justo, facilisis vulputate felis. Phasellus sit amet rhoncus nisi. Nullam quis dignissim tellus, vitae tincidunt ex. Maecenas tempus mi arcu, at gravida orci lobortis sed. In laoreet blandit eros non fermentum. Donec iaculis varius viverra.
Leverage agile frameworks to provide a robust synopsis for high
level overviews.
Iterative approaches to corporate
strategy foster collaborative thinking to further the
overall value proposition. Organically grow the
holistic world view of disruptive
innovation via workplace diversity and empowerment.
function sayHello() {
console.log("Hello!");
}
A regular table with a responsive wrapper added. The responsive wrapper is not part of 2bit-ui.
| # | Title | Time | Rating |
|---|---|---|---|
| 1 | Pretelethal | 3:21 | ★★★★☆ |
| 2 | Key Entity Extraction V: Sentry the Defiant | 5:45 | ★★★★★ |
| 3 | The Hard Sell | 5:10 | ★★☆☆☆ |
| 4 | Number City | 3:49 | ★★★☆☆ |
| 5 | Gravity's Union | 6:46 | ★★★★★ |
Table inside a box
| # | Title | Time | Rating |
|---|---|---|---|
| 1 | Pretelethal | 3:21 | ★★★★☆ |
| 2 | Key Entity Extraction V: Sentry the Defiant | 5:45 | ★★★★★ |
| 3 | The Hard Sell | 5:10 | ★★☆☆☆ |
| 4 | Number City | 3:49 | ★★★☆☆ |
| 5 | Gravity's Union | 6:46 | ★★★★★ |
Table inside a card
| # | Title | Time | Rating |
|---|---|---|---|
| 1 | Pretelethal | 3:21 | ★★★★☆ |
| 2 | Key Entity Extraction V: Sentry the Defiant | 5:45 | ★★★★★ |
| 3 | The Hard Sell | 5:10 | ★★☆☆☆ |
| 4 | Number City | 3:49 | ★★★☆☆ |
| 5 | Gravity's Union | 6:46 | ★★★★★ |
| Rock | Paper | Scissors | |
|---|---|---|---|
| Rock vs... | = | − | + |
| Paper vs... | + | = | − |
| Scissors vs... | - | + | − |
| Name | Qty | Price |
|---|---|---|
| Sandwich | 1 | $9.00 |
| Iced Tea | 1 | $2.00 |
| French Fries | 1 | $4.00 |
| Total | $100.00 | |