nobeui

A tiny CSS and JS library to get more out of native HTML elements.

Getting started

npm

npm add -D nobeui

Import CSS with postcss-import or any other tool that resolves node_modules: 

@import 'nobeui';

Import JS with a bundler that resolves node_modules: 

import { details, ripple } from 'nobeui'

details.init()
ripple.init()

CDN

CSS via HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nobeui@1.0.0/dist/nobeui.css">

CSS via CSS:

@import 'https://cdn.jsdelivr.net/npm/nobeui@1.0.0/dist/nobeui.css';

JS:

import { details, ripple } from 'https://cdn.jsdelivr.net/npm/nobeui@1.0.0/dist/nobeui.js'

details.init()
ripple.init()

Elements

Checkbox

<input type="checkbox" class="nobe-checkbox" checked>
<input type="checkbox" class="nobe-checkbox">

Color

<input type="color" class="nobe-color" value="#3377ff">

Details

Summary
Details
<details class="nobe-details">
	<summary class="nobe-summary">
		<svg class="nobe-marker" width="24" height="24" viewbox="0 0 24 24">
			<path d="M8 9 12 16 16 9Z" fill="currentColor" />
		</svg>
		Summary
	</summary>
	<div>Details</div>
</details>

Meter

<meter class="nobe-meter"></meter>
<meter class="nobe-meter" value="0.3" optimum="1" low="0.4" high="0.6"></meter>
<meter class="nobe-meter" value="0.5" optimum="1" low="0.4" high="0.6"></meter>
<meter class="nobe-meter" value="0.7" optimum="1" low="0.4" high="0.6"></meter>

Number

<input type="number" class="nobe-number">

Progress

<progress class="nobe-progress" value="0"></progress>
<progress class="nobe-progress" value="50" max="100"></progress>
<progress class="nobe-progress"></progress>

Radio

<input type="radio" class="nobe-radio" name="example" checked>
<input type="radio" class="nobe-radio" name="example">

Range

<input type="range" class="nobe-range">

Select

<select class="nobe-select">
	<option value="1" selected>Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
</select>

Switch

<input type="checkbox" class="nobe-switch" role="switch">

Others

Flow

Container for content. Applies styles to direct children.

Use nobe-flee class on a child to escape these styles.

no classes
nobe-edge
nobe-wide
nobe-edge nobe-wide
nobe-full
nobe-edge nobe-full
nobe-push
nobe-pull
<div class="nobe-flow">
	<div>no classes</div>
	<div class="nobe-edge">nobe-edge</div>
	<div class="nobe-wide">nobe-wide</div>
	<div class="nobe-edge nobe-wide">nobe-edge nobe-wide</div>
	<div class="nobe-full">nobe-full</div>
	<div class="nobe-edge nobe-full">nobe-edge nobe-full</div>
	<div class="nobe-push">nobe-push</div>
	<div class="nobe-pull">nobe-pull</div>
	<div class="nobe-flee">nobe-flee</div>
</div>

Overlay

Container for fixed elements.

.nobe-overlay {
	display: grid;
	position: fixed;
	top: 0;
	left: 0;
	block-size: 100%;
	block-size: 100dvb;
	inline-size: 100%;
	inline-size: 100dvi;
	z-index: 88;
	pointer-events: none;
}

.nobe-overlay > * {
	grid-area: 1 / 1;
}

Ripple

Add nobe-ripple class to any element. Uses background-image.

Click here

Stripes

Add nobe-stripes class to any element. Uses background-image.

Variables

:root {
	/* :focus */
	--nobe-outline-color: #37f;
	--nobe-outline-width: 4px;
	--nobe-outline-style: solid;
	--nobe-outline-offset: 2px;

	/* Checkbox */
	--nobe-checkbox-bg: #37f0;
	--nobe-checkbox-fg: #37f;
	--nobe-checkbox-border-width: 1px;

	/* Details */
	--nobe-marker-shut: rotate(-90deg);
	--nobe-marker-open: rotate(0deg);

	/* Meter */
	--nobe-meter-bg: #37f2;
	--nobe-meter-success: #3b3;
	--nobe-meter-warning: #fb0;
	--nobe-meter-danger: #f54;

	/* Progress */
	--nobe-progress-bg: #37f2;
	--nobe-progress-fg: #37f;

	/* Radio */
	--nobe-radio-bg: #37f0;
	--nobe-radio-fg: #37f;
	--nobe-radio-border-width: 1px;

	/* Range */
	--nobe-range-bg: #37f3;
	--nobe-range-fg: #37f;
	--nobe-range-inset: 0.125em;

	/* Select */
	--nobe-select-arrow-fg: currentColor;
	--nobe-select-arrow-right: 6px;

	/* Switch */
	--nobe-switch-bg: #37f3;
	--nobe-switch-fg: #37f;
	--nobe-switch-inset: 0.125em;
	--nobe-switch-width: 2em;

	/* Flow */
	--nobe-flow-gutter: 12px;
	--nobe-flow-margin: initial; /* 1em / 1rem */
	--nobe-flow-width: 45rem;

	/* Ripple */
	--nobe-ripple-bg: #37f4;

	/* Stripes */
	--nobe-stripes-bg: #0001;
	--nobe-stripes-fg: #fff1;
	--nobe-stripes-size: 3rem;
}