Contents

BrowneUI Widget Reference

All widgets available via BrowneUI.css and companion static files. Requires Flask dev server for asset paths.

Typography

Heading 1 — h1 (4em, #554037)

Heading 2 — h2 (1.8em, solid underline)

Heading 3 — h3 (1.3em, solid underline)

Heading 4 — h4 (1.1em, wavy underline)

Body paragraph in #87746C. Bold text (font-weight 900 for Unifont). Strong text. Regular weight for comparison.

Ruby annotation: 漢字かんじ   日本語にほんご

Rainbow gradient text — .rainbow

.lead — oversized intro paragraph

Lead paragraph via .lead — slightly larger font and looser line height, used for the opening sentence under a title.

.pull — pull quote (left crimson border, italic)

A pull quote via .pull restates one key sentence in italic with a crimson left border.

Table

NameRoleScore
AliceEngineer92
BobDesigner85
CarolPM78

Code

Inline — code

Use inline code for short expressions like const x = 42 or SELECT *.

Block — div.codeblock > div.code-box (copy button auto-injected)

x = 42 print(x) # 42

Block — pre > code

SELECT name FROM users LIMIT 3;

.code-box .highlight — error / emphasis color (#B13254)

error: cannot borrow `x` as mutable more than once

Syntax-colored — github-light.css (.pl-* classes, manual markup)

def f(x): # comment return "{x}"

Lists

Unordered — ul

Ordered — ol.orderedlist

  1. First step
  2. Second step
  3. Third step

No-bullet — ul.nodot

Blockquote & Quote

blockquote — background + left border + open-quote

The best way to predict the future is to invent it. — Alan Kay

.quote — lightweight left border only

This uses .quote for an inline citation style — left border in #87746C, no background.

Buttons

Default .btn   .clicked

Struck-through text via .remove

Spoiler: he was dead the whole time

Toggle



Collapsible <details>

Click to expand

Hidden content revealed on click.

Code output
{"status": "ok", "count": 3}

Images

.img-box — bordered container

avatar

figure + figcaption

avatar
Fig 1. Avatar — same element koki_markdown generates for ![caption](img.png)

div.avatar — card with circular image

Koke

Hanke

img.nearest — pixel-art / crisp rendering

noise texture

Before / After Slider

Hover to scrub. CSS in BrowneUI.css (--pct custom property + clip-path); JS in /static/js/ba.js (oscillates when idle, tracks pointer on hover).

color (after)
greyscale (before)
◀▶

Animations

.rainbow — infinite horizontal gradient shift

BrowneUI Rainbow Animation

.typing — cursor blink (opacity 0→1 loop)

Loading▊

.fade — opacity: 0 (invisible but occupies layout space)

The following paragraph uses .fade:

This text is invisible (opacity: 0) but still in the layout flow.

↑ empty space above is the faded paragraph.

Form Elements

input.input

textarea

Layout Utilities

.floatbox — flex-wrap row, justify left

.icon-title — badge / chip label

💡 Icon Title Badge   📌 Another Badge

section.one-third — fixed 18em width columns

Column 1
Column 2
Column 3

.center

Centered text via .center (text-align: center)

HR variants

Scrollbar

Line 1

Line 2

Line 3

Line 4

Math — .arithmatex

Inline — span.arithmatex

Energy–mass relation: \(E = mc^2\)   Euler's identity: \(e^{i\pi} + 1 = 0\)

Block — div.arithmatex

\[\int_{-\infty}^{\infty} e^{-x^2}\, dx \;=\; \sqrt{\pi}\]

Tabs — .tabs (CSS-only, up to 3)

Panel 1 content.

Panel 2 content.

print("panel 3")

Tooltip — [data-tooltip]

Hover over this term or HTML or sort(arr) to see tooltips.

Video / Audio

audio

video

Footnotes — .footnote-ref + .footnotes

The quick brown fox1 jumped over the lazy dog.2 Footnote references link to the footnotes section below.

[1] The fox's speed has not been independently verified.

[2] The dog's laziness is well-documented in the literature.

Responsive & Print

BreakpointBehaviour
> 900px.container width 60% (default), #toc visible
≤ 900px.container 85%, #toc shrinks to 14% / 85% font
≤ 600px.container 96%, #toc hidden
print#toc hidden, .container full-width, links underlined black, .fade visible

KPI Cards — .kpi + .kpi-card

0.11train loss
87%accuracy
1ksteps

Note block — use .note for muted annotations.

Warn block — use .warn for warnings (left border #B13254).

SVG Polyline Chart — .chart

0.0 0.5 1.0 step loss train val

Chart.js — figure.chart > canvas

Interactive canvas charts via the Chart.js CDN, boxed in figure.chart with the BrowneUI palette. Needs the Chart.js script and the init block at page end.

Fig. Grouped bar chart — palette colors, muted grid and legend.

Mermaid Diagram — figure.diagram (pan/zoom)

Mermaid flowcharts themed to the palette, wrapped in a fixed-height .diagram-stage with a .diagram-bar toolbar. Drag to pan, scroll to zoom; buttons call svg-pan-zoom. Needs the Mermaid + svg-pan-zoom scripts and the init block at page end.

flowchart LR
  A["input"] --> B["transform"]
  B --> C["render"]
  C -->|"ok"| D["output"]
  C -->|"error"| B
drag to pan · scroll to zoom
Fig. A draggable, zoomable flowchart.

Panel Card — .panel-card + .panel-card-a/b/c

Option A

Key: value

Note: description

Option B

Key: value

Note: description

Option C

Key: value

Note: description

Sample Layout — .sample-card + .info-bar + .grid-3

Item Title tag

Short description of this item.

label·Type·Count 3

Caption A

Caption B

Caption C

3D Vox — .vox

test_wave.ply — colored sine wave (400 pts)

same file, independent orbit controls

empty scene — no data-src

Usage: <div class="vox" data-src="/static/ply/file.ply" data-kind="points"></div> — shared WebGL renderer, orbit controls, lazy-loaded.

Minecraft Schematic — .mcrender

black_cat.litematic — auto-loaded via data-src

Usage: <div class="mcrender" data-src="/static/litematic/file.litematic"></div> — lazy-loaded, shared resources, add data-grid="false" to hide grid.