This page demonstrates some of the ways 1bit-ui can be used, as well as code for its examples.
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.
For proper accessibility and appearance, wrap all radio buttons inside a
bit-field and put a
label after it with correct
id and
forattributes
For proper accessibility and appearance, wrap all checkboxes inside a
bit-field and put a
label after it with correct
id and
forattributes
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
--bit-color0, causing inline SVGs to
automatically match your 1bit-ui theme.
The class bit-pre can be used for multiline
code blocks.
The class bit-code can be used for inline
code:
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.
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.
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;
}
}
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 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).
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| 11 | 21 | 31 |
| 12 | 22 | 32 |
| 13 | 23 | 33 |
code, this is a kbd, this is a
samp.
// 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!");
}
The flatMap() method first maps each
element using a mapping function, then flattens the result into a new
array. It is identical to a map() followed
by a flat() of depth 1, but
flatMap() is often quite useful, as
merging both into one method is slightly more efficient.
| # | 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 | |