1bit-ui

Introduction Basics Links Selects Buttons Text Inputs Radio Buttons Checkboxes Inline Tags Tables Cards Box Fieldsets Inline SVG Horizontal Rule Code Scrollbars Get Creative!Dark Mode Rounded Corners Auto Mode

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.

CSS Custom Properties

--bit-color0--bit-color1--bit-border-width--bit-border-radius

Links

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.

Example

CSS Custom Properties

--bit-underline-thickness

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.

Code

<custom-properties-editor data-properties="--bit-underline-thickness"></custom-properties-editor>
<p>
  This is an
  <a href="#" class="bit-link">example link</a>
  within a sentence.
</p>
<p>
  Lorem ipsum dolor sit amet,
  <a href="#" class="bit-link">consectetur</a> adipiscing elit. Nunc
  finibus est ac velit faucibus volutpat. Nullam aliquet sollicitudin
  accumsan. Nulla pretium et
  <a href="#" class="bit-link">augue vel scelerisque</a>. Donec sit amet
  semper sapien, at facilisis velit. Quisque vitae egestas justo,
  facilisis vulputate felis.
  <a href="#" class="bit-link">Phasellus</a> sit amet rhoncus nisi. Nullam
  quis dignissim tellus, vitae
  <a href="#" class="bit-link">tincidunt ex</a>. Maecenas tempus mi arcu,
  at gravida orci lobortis sed. In laoreet blandit eros non fermentum.
  Donec iaculis varius viverra.
</p>

Selects

CSS Custom Properties

--bit-select-padding-horizontal--bit-select-padding-vertical--bit-select-handle-width

Example

Code

<div class="site-flex-row-wrap">
  <select class="bit-select">
    <option selected="" disabled="">Choose a country...</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>

  <select class="bit-select" disabled="">
    <option selected="" disabled="">Choose a country...</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>

  <select class="bit-select">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>

  <select class="bit-select" disabled="">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>

  <select class="bit-select">
    <option selected="" disabled="">–</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>

  <select class="bit-select" disabled="">
    <option selected="" disabled="">–</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

Buttons

CSS Custom Properties

--bit-button-padding-horizontal--bit-button-padding-vertical

Example

Code

<div class="site-flex-row-wrap">
  <button type="button" class="bit-button">Save</button>
  <button type="button" class="bit-button" disabled="">Save</button>
  <button type="button" class="bit-button">Delete</button>
  <button type="button" class="bit-button" disabled="">Delete</button>
  <button type="button" class="bit-button">−</button>
  <button type="button" class="bit-button">+</button>
  <button type="button" class="bit-button" disabled="">
    +
  </button>
  <button type="button" class="bit-button" disabled="">
    −
  </button>
  <button type="button" class="bit-button">
    Create from template...
  </button>
  <button type="button" class="bit-button" disabled="">
    Create from template...
  </button>
</div>

Text Inputs

CSS Custom Properties

--bit-input-padding-horizontal--bit-input-padding-vertical

Example

Name

URL

Disabled

Description

Disabled

Code

<div class="site-columns-auto">
  <div class="site-flex-column">
    <label for="field-name">Name</label>
    <input class="bit-input" id="field-name">
  </div>
  <div class="site-flex-column">
    <label for="field-url">URL</label>
    <input class="bit-input" placeholder="https://example.com" id="field-url">
  </div>
  <div class="site-flex-column">
    <label for="field-disabled-1">Disabled</label>
    <input class="bit-input" id="field-disabled-1" disabled="">
  </div>
</div>
<br>
<div class="site-columns-auto">
  <div class="site-flex-column">
    <label for="field-description">Description</label>
    <textarea rows="4" class="bit-input" id="field-description">A textarea is used for multi-line text input.</textarea>
  </div>
  <div class="site-flex-column">
    <label for="field-disabled-2">Disabled</label>
    <textarea rows="4" class="bit-input" id="field-disabled-2" disabled="">Disabled.</textarea>
  </div>
</div>

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

CSS Custom Properties

--bit-radiocheckbox-size

Example

Red

Green

Blue

Multiline
text

Disabled

Code

<div class="site-flex-column">
  <div class="bit-field">
    <input class="bit-radio" type="radio" id="color-red" name="color" value="red" checked="">
    <label for="color-red">Red</label>
  </div>
  <div class="bit-field">
    <input class="bit-radio" type="radio" id="color-green" name="color" value="green">
    <label for="color-green">Green</label>
  </div>
  <div class="bit-field">
    <input class="bit-radio" type="radio" id="color-blue" name="color" value="blue">
    <label for="color-blue">Blue</label>
  </div>
  <div class="bit-field">
    <input class="bit-radio" type="radio" id="color-multiline" name="color" value="multiline">
    <label for="color-blue">Multiline<br>text</label>
  </div>
  <div class="bit-field">
    <input class="bit-radio" type="radio" id="color-disabled" name="color" value="disabled" disabled="">
    <label for="color-disabled">Disabled</label>
  </div>
</div>

Checkboxes

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

CSS Custom Properties

--bit-radiocheckbox-size

Example

Pineapple

Mushrooms

Olives

Multiline
text

Checkbox wrapped in a label Multiline checkbox
wrapped in a label

Disabled

Code

<div class="site-flex-column">
  <div class="bit-field">
    <input class="bit-checkbox" type="checkbox" id="toppings-pineapple" name="toppings" value="pineapple" checked="">
    <label for="toppings-pineapple">Pineapple</label>
  </div>
  <div class="bit-field">
    <input class="bit-checkbox" type="checkbox" id="toppings-mushrooms" name="toppings" value="mushrooms">
    <label for="toppings-mushrooms">Mushrooms</label>
  </div>
  <div class="bit-field">
    <input class="bit-checkbox" type="checkbox" id="toppings-olives" name="toppings" value="olives">
    <label for="toppings-olives">Olives</label>
  </div>
  <div class="bit-field">
    <input class="bit-checkbox" type="checkbox" id="toppings-multiline" name="toppings" value="multiline">
    <label for="toppings-multiline">Multiline<br>text</label>
  </div>
  <label class="bit-field">
    <input class="bit-checkbox" type="checkbox" name="toppings">
    Checkbox wrapped in a label
  </label>
  <label class="bit-field">
    <input class="bit-checkbox" type="checkbox" name="toppings">
    Multiline checkbox<br>
    wrapped in a label
  </label>
  <div class="bit-field">
    <input class="bit-checkbox" type="checkbox" id="toppings-disabled" name="toppings" value="disabled" disabled="">
    <label for="toppings-disabled">Disabled</label>
  </div>
</div>

Inline Tags

Example

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.

Code

<p>
  Leverage <b>agile</b> frameworks to provide a robust synopsis for high
  level overviews.
  <a href="#" class="bit-link">Iterative approaches</a> to corporate
  strategy foster collaborative thinking to further the
  <i>overall</i> value proposition. Organically grow the
  <code class="bit-code">holistic world</code> view of disruptive
  innovation via workplace diversity and empowerment.
</p>

Tables

A basic table.

CSS Custom Properties

--bit-table-padding-horizontal--bit-table-padding-vertical

Example

#	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	★★★★★

Code

<div class="site-table-responsive">
  <table class="bit-table" style="width: 100%;">
    <thead>
      <tr>
        <th>#</th>
        <th>Title</th>
        <th>Time</th>
        <th>Rating</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>1</td>
        <td>Pretelethal</td>
        <td>3:21</td>
        <td>★★★★☆</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Key Entity Extraction V: Sentry the Defiant</td>
        <td>5:45</td>
        <td>★★★★★</td>
      </tr>
      <tr>
        <td>3</td>
        <td>The Hard Sell</td>
        <td>5:10</td>
        <td>★★☆☆☆</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Number City</td>
        <td>3:49</td>
        <td>★★★☆☆</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Gravity's Union</td>
        <td>6:46</td>
        <td>★★★★★</td>
      </tr>
    </tbody>
  </table>
</div>

A table with row headers.

CSS Custom Properties

--bit-table-padding-horizontal--bit-table-padding-vertical

Example

	Rock	Paper	Scissors
Rock vs...	=	−	+
Paper vs...	+	=	−
Scissors vs...	-	+	−

Code

<div class="site-table-responsive">
  <table class="bit-table">
    <thead>
      <tr>
        <th>&nbsp;</th>
        <th>Rock</th>
        <th>Paper</th>
        <th>Scissors</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Rock vs...</th>
        <td>=</td>
        <td>−</td>
        <td>+</td>
      </tr>
      <tr>
        <th>Paper vs...</th>
        <td>+</td>
        <td>=</td>
        <td>−</td>
      </tr>
      <tr>
        <th>Scissors vs...</th>
        <td>-</td>
        <td>+</td>
        <td>−</td>
      </tr>
    </tbody>
  </table>
</div>

A table with a footer.

CSS Custom Properties

--bit-table-padding-horizontal--bit-table-padding-vertical

Example

Name	Qty	Price
Sandwich	1	$9.00
Iced Tea	1	$2.00
French Fries	1	$4.00
Total		$100.00

Code

<div class="site-table-responsive">
  <table class="bit-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Qty</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sandwich</td>
        <td>1</td>
        <td>$9.00</td>
      </tr>
      <tr>
        <td>Iced Tea</td>
        <td>1</td>
        <td>$2.00</td>
      </tr>
      <tr>
        <td>French Fries</td>
        <td>1</td>
        <td>$4.00</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th colspan="2">Total</th>
        <td>$100.00</td>
      </tr>
    </tfoot>
  </table>
</div>

Cards

CSS Custom Properties

--bit-card-padding-horizontal--bit-card-padding-vertical

Example

This is a 1bit-ui Card. It has a 3D shadow effect, as well as some padding on the inside.

Code

<div class="site-columns-auto">
  <div class="bit-card">
    This is a 1bit-ui Card. It has a 3D shadow effect, as well as some
    padding on the inside.
  </div>
  <div class="bit-card">
    This is a 1bit-ui Card. It has a 3D shadow effect, as well as some
    padding on the inside.
  </div>
  <div class="bit-card">
    This is a 1bit-ui Card. It has a 3D shadow effect, as well as some
    padding on the inside.
  </div>
  <div class="bit-card">
    This is a 1bit-ui Card. It has a 3D shadow effect, as well as some
    padding on the inside.
  </div>
</div>

Box

CSS Custom Properties

--bit-box-padding-horizontal--bit-box-padding-vertical

Example

This is a 1bit-ui Box. It has a simple border and just enough padding to offset your content for a bit of contrast.

Code

<div class="site-flex-column site-gap">
  <div class="site-flex-row-wrap">
    <div class="bit-box">
      <div style="width: 50px; height: 50px; background: red;"></div>
    </div>
    <div class="bit-box">
      <div style="width: 50px; height: 50px; background: blue;"></div>
    </div>
    <div class="bit-box">
      <div style="width: 50px; height: 50px; background: green;"></div>
    </div>
    <div class="bit-box">
      <div style="width: 50px; height: 50px; background: magenta;"></div>
    </div>
  </div>
  <div class="site-columns-auto">
    <div class="bit-box">
      This is a 1bit-ui Box. It has a simple border and just enough
      padding to offset your content for a bit of contrast.
    </div>
    <div class="bit-box">
      This is a 1bit-ui Box. It has a simple border and just enough
      padding to offset your content for a bit of contrast.
    </div>
  </div>
</div>

Fieldsets

CSS Custom Properties

--bit-fieldset-padding-horizontal--bit-fieldset-padding-vertical--bit-legend-padding-horizontal--bit-legend-padding-vertical

Example

Pizza Toppings

Pineapple

Mushroom

Olives

Disabled

Code

<fieldset class="bit-fieldset">
  <legend class="bit-legend">Pizza Toppings</legend>
  <div class="bit-field">
    <input checked="" type="checkbox" class="bit-checkbox" name="small-pizza" value="cat" id="small-pizza-pineapple">
    <label for="small-pizza-pineapple">Pineapple</label>
  </div>
  <div class="bit-field">
    <input type="checkbox" class="bit-checkbox" name="small-pizza" value="dog" id="small-pizza-mushroom">
    <label for="small-pizza-mushroom">Mushroom</label>
  </div>
  <div class="bit-field">
    <input type="checkbox" class="bit-checkbox" name="small-pizza" value="Other" id="small-pizza-olives">
    <label for="small-pizza-olives">Olives</label>
  </div>
  <div class="bit-field">
    <input type="checkbox" class="bit-checkbox" name="small-pizza" value="Disabled" id="small-pizza-disabled" disabled="">
    <label for="small-pizza-disabled">Disabled</label>
  </div>
</fieldset>

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.

Example

Code

<svg class="bit-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48">
  <path d="M16,10c-.41,7.68-12,7.75-12,0s11.59-7.69,12,0c.1,1.92,3.1,1.93,3,0-.26-4.88-3.91-9-9-9a9.1,9.1,0,0,0-9,9,9.08,9.08,0,0,0,8.59,9c5.25.23,9.14-3.93,9.41-9C19.1,8.07,16.1,8.08,16,10Z"></path>
  <path d="M14.44,16.56l5,5a1.5,1.5,0,0,0,2.12-2.12l-5-5a1.5,1.5,0,0,0-2.12,2.12Z"></path>
</svg>
<svg class="bit-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48">
  <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm2.94,16.56L12,14.25,9.06,17.56c-1.28,1.45-3.4-.68-2.12-2.12L10,12,6.94,8.56C5.66,7.12,7.78,5,9.06,6.44L12,9.75l2.94-3.31c1.28-1.45,3.4.68,2.12,2.12L14,12l3.06,3.44C18.34,16.88,16.23,19,14.94,17.56Z"></path>
</svg>

Horizontal Rule

Example

Code

<hr class="bit-hr">

Code

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

CSS Custom Properties

--bit-pre-padding-horizontal--bit-pre-padding-vertical

Example

function sayHello() {
  console.log("Hello!");
}

Code

<pre class="bit-pre">function sayHello() {
  console.log("Hello!");
}</pre>

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

CSS Custom Properties

--bit-code-padding-horizontal--bit-code-padding-vertical

Example

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.

Code

<p>
  The <code class="bit-code">flatMap()</code> method first maps each
  element using a mapping function, then flattens the result into a new
  array. It is identical to a <code class="bit-code">map()</code> followed
  by a <code class="bit-code">flat()</code> of depth 1, but
  <code class="bit-code">flatMap()</code> is often quite useful, as
  merging both into one method is slightly more efficient.
</p>

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.

Example

Code

<style>
  .site-theme-white {
    --bit-color0: black;
    --bit-color1: white;
  }

  .site-theme-blue {
    --bit-color0: hsl(200, 100%, 20%);
    --bit-color1: hsl(200, 100%, 90%);
  }

  .site-theme-red {
    --bit-color0: hsl(0, 100%, 20%);
    --bit-color1: hsl(0, 100%, 90%);
  }
</style>
<div class="bit-card site-columns-auto site-theme-white">
  <button type="button" class="bit-button site-theme-blue">
    Blue
  </button>
  <button type="button" class="bit-button site-theme-red">
    Red
  </button>
  <button type="button" class="bit-button" style="--bit-color0: #222222; --bit-color1: #eeeeee;">
    Inline Styles
  </button>
  <button type="button" class="bit-button">
    Default
  </button>
</div>

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.

Example

Code

<div style="--bit-border-radius: 5px;" class="bit-card site-columns-auto">
  <button class="bit-button">OK</button>
  <button class="bit-button">Cancel</button>
  <input class="bit-input" placeholder="Input">
  <select class="bit-select">
    <option selected="" disabled="">–</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

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).

Example

Input

Text area

Fieldset & legend Pineapple Mushroom Olives Disabled

Column 1	Column 2	Column 3
11	21	31
12	22	32
13	23	33

Select

Checked checkbox Unchecked checkbox Checkbox with
line that wraps
because it's long Checkbox with
line that wraps
because it's long
and no HMTL ID

Checkbox label sibling

Disabled checkbox

Checked radio button Unchecked radio button Disabled radio button

This is a code, this is a kbd, this is a samp.

// JavaScript example
console.log("Hello, world!");

Code

<div class="bit-auto">
  <button type="button">Button</button>
  <br>
  <br>
  <hr>
  <br>
  <label>
    <div>Input</div>
    <input type="text" value="Example text here">
  </label>
  <br>
  <label>
    <div>Text area</div>
    <textarea>Example text here</textarea>
  </label>
  <br>
  <hr>
  <br>
  <fieldset>
    <legend>Fieldset &amp; legend</legend>
    <label>
      <input type="checkbox">
      <span>Pineapple</span>
    </label>
    <label>
      <input type="checkbox">
      <span>Mushroom</span>
    </label>
    <label>
      <input type="checkbox">
      <span>Olives</span>
    </label>
    <label>
      <input type="checkbox" disabled="">
      <span>Disabled</span>
    </label>
  </fieldset>
  <br>
  <br>
  <hr>
  <br>
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>11</td>
        <td>21</td>
        <td>31</td>
      </tr>
      <tr>
        <td>12</td>
        <td>22</td>
        <td>32</td>
      </tr>
      <tr>
        <td>13</td>
        <td>23</td>
        <td>33</td>
      </tr>
    </tbody>
  </table>
  <br>
  <hr>
  <br>
  <label>
    <span>Select</span>
    <select>
      <option disabled="" selected="">–</option>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </label>
  <br>
  <hr>
  <br>
  <div>
    <label>
      <input type="checkbox" checked="">
      <span>Checked checkbox</span>
    </label>
    <label>
      <input type="checkbox">
      <span>Unchecked checkbox</span>
    </label>
    <label>
      <input type="checkbox">
      <span>Checkbox with<br>line that wraps<br>because it's long</span>
    </label>
    <label>
      <input type="checkbox">
      <span>Checkbox with<br>line that wraps<br>because it's long<br>and
        no HMTL ID</span>
    </label>
    <div>
      <input type="checkbox">
      <label>Checkbox label sibling</label>
    </div>
    <label>
      <input type="checkbox" disabled="">
      <span>Disabled checkbox</span>
    </label>
    <br>
    <hr>
    <br>
    <label>
      <input type="radio" checked="" name="auto-b" value="auto-b1">
      <span>Checked radio button</span>
    </label>
    <label>
      <input type="radio" name="auto-b" value="auto-b2">
      <span>Unchecked radio button</span>
    </label>
    <label>
      <input type="radio" disabled="" name="auto-b" value="auto-b3">
      <span>Disabled radio button</span>
    </label>
    <br>
    <hr>
    <br>
    <div>
      This is a <code>code</code>, this is a <kbd>kbd</kbd>, this is a
      <samp>samp</samp>.
    </div>
    <br>
    <hr>
    <br>
    <pre>// JavaScript example
e.log("Hello, world!");</pre>
  </div>
</div>