Output
Panel
A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.
Kit part · Cards & panels
Grille and cloth
Perforated metal and speaker cloth, for the place where a real device would breathe or sound.
- Element
- <div aria-hidden="true">
- Needs
- kit.css
- Rules
- grille.rules.md · 3
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
Speaker on
Every state, at once
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Grille | Cloth | Strip · 22px |
|---|---|---|---|
| Material |
Graphite
| Part | Grille | Cloth | Strip · 22px |
|---|---|---|---|
| Material |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-grille | class | min-height 48px | Perforated metal: 7px pitch, each hole a dark core with a lit lower lip, the whole sheet recessed. |
| .tui-cloth | class | min-height 48px | Woven speaker cloth. The same dark weave in both finishes, as cloth would be. |
| height / min-height | CSS property | any | Size it like any block. Set min-height: 0 for a strip thinner than 48px. |
Markup
<div class="tui-grille" aria-hidden="true"></div>
<div class="tui-cloth" aria-hidden="true"></div>Needs kit.css only, no script. How to install the kit.
Accessibility
- Always
aria-hidden="true": it is texture, not content. - Never put text on it: the holes fight every letter.
How it’s built
The grille is one radial-gradient tiled every 7px (a 1.1px dark hole, then a ring of --tui-hl for the lit lower lip) over --tui-face-lo, recessed with the kit’s inset light. The cloth is two repeating linear gradients, weft and warp, over a fixed dark grey: it does not follow the finish, because speaker cloth does not change colour with the plate around it. No images.
Rules
grille.rules.mdIn the brain
Only where a device would breathe or sound, and never behind text.
3 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.