Contents

BrowneUI Widget Reference

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

Parchment Lab · 羊皮纸实验

以你选的浅色纸底为基础，铺开相连的纤维簇，加入层叠水痕、 局部晕圈和不同方向的浅折。 默认参数已用于网站背景，可在这里继续调节对比。

实验效果 · 浅纸 · 小惊喜 正在生成纹理…
大尺度与小惊喜 · 设为 0 可逐项关闭
基础纸张 · 保留你选的参数
保存这组参数

参数会保留在当前浏览器。复制后可发给我，作为确认的版本。

Typography

Heading 1 — h1 (4em, var(--browne-heading))

Heading 2 — h2 (1.8em, solid underline)

Heading 3 — h3 (1.3em, solid underline)

Heading 4 — h4 (1.1em, wavy underline)

Body paragraph in var(--browne-words). 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 (var(--browne-highlight))

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 var(--browne-words), 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 var(--browne-highlight)).

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.

Node label rules. Labels are 1–4 words max. Never use \n inside a node to pack in detail — that turns labels into paragraphs and makes diagrams unreadable. Put detail in edge labels (-->|"on failure"|), the figcaption, or surrounding prose. One diagram = one concept; split rather than over-stuffing nodes.

Bad — node as paragraphGood — node as label
["spawn subprocess\nclaude -p prompt\n--output-format stream-json"] ["spawn subprocess"] + edge label or figcaption for flags
["check: idle > grace_s\nOR total > hard_max_s?"] {"idle timeout?"} — one question, no explanation

3 things that silently break pan/zoom for ALL diagrams on the page:

  1. Non-ASCII characters in Mermaid source. Em dash —, ellipsis …, curly quotes, etc. inside node or edge labels cause the Mermaid lexer to fail. mermaid.run() rejects; the .then(wirePanZoom) callback never fires; every diagram on the page loses pan/zoom. Use only ASCII: hyphens -, three dots ....
  2. Square or angle brackets inside quoted Mermaid strings. -->|"List[Action]"| and ["Result<T>"] confuse the tokenizer because [ and < are node-shape sigils in flowchart grammar. Replace with words: -->|"Actions"|, ["Result of T"].
  3. Diagrams inside hidden CSS tab panels. diagram.js wires svgPanZoom to all figure.diagram elements at once after mermaid.run() resolves. Non-active tab panels are display:none, so their SVGs have offsetWidth=0. svgPanZoom may throw; the forEach aborts; diagrams that appear later in DOM order also lose pan/zoom. Never put a figure.diagram inside a .tabs panel. Use separate sections with <h3> headings instead.
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.

Schematic Inputs

3D Schematic

Load

No schematic loaded

Choose a .litematic file.

Input Image

Load

No image loaded

Choose an image file.

Input JSON

Load

No JSON loaded

{ "status": "waiting for input" }

The schematic viewport uses the MCRender browser loader, which accepts .litematic files.