Project scope
Pico CSS comparison
tty.css shares Pico's semantic, class-light direction, but it is an independent terminal-styled framework with a smaller public surface. Similar syntax does not imply drop-in compatibility.
Audit method
This audit compares the checked-in tty.css stylesheet and completed documentation with the official Pico CSS 2.1.1 documentation and tagged 2.1.1 source. It was reviewed on .
- Features were mapped by semantic purpose and documented public API, not by visual resemblance.
- “Available” means tty.css documents and styles the pattern. It does not mean selector names, Sass APIs, rendering, or edge-case behavior match Pico.
- “Partial” identifies a useful implementation with a narrower host, scope, variant set, or compatibility promise.
- Distribution, build tooling, and project resources are separated from runtime CSS features.
This is not an accessibility conformance review, browser certification, byte-size benchmark, or migration guarantee. Re-audit before relying on it for a later Pico or tty.css release.
Available in tty.css
Forms
Components
Content and navigation
Runtime differences and gaps
tty.css also provides horizontal tabs as its own component, not a Pico compatibility promise. CSS supplies presentation only; tab selection, panel visibility, and keyboard behavior require application JavaScript. The reference includes an optional vanilla controller rather than a runtime library.
These are current implementation differences, not commitments to reproduce Pico.
| Area | tty.css status | Practical consequence |
|---|---|---|
| Heading groups | Absent | hgroup receives no specialized title-and-subtitle rhythm. |
| Generic control groups | Aligned | [role="group"] joins connected controls and preserves joined borders when stacking on small screens; .group remains a spaced action layout. |
| Indeterminate progress | Partial | A value-less native progress is supported, but tty.css defines no dedicated indeterminate animation. |
| Fluid container helper | Absent | There is no .container-fluid; compose full-width regions in application CSS. |
| Local color schemes | Absent | Theme selectors apply only at :root, not to component subtrees. |
| Embedded media | Partial | Images, SVG, video, and canvas receive responsive defaults; audio and iframe do not. |
| Button-role hosts | Partial | Button styling covers native button inputs and links with role="button", not every element that could carry that role. |
| Tooltip semantics | Visual only | The CSS-generated bubble is not a full accessible tooltip pattern; essential help requires semantic text. |
| Modal behavior | Application-owned | tty.css styles native dialogs; application JavaScript opens, closes, and manages product behavior. |
Distribution and tooling
Pico 2.1.1 documents a broader distribution and build system. tty.css provides a root stylesheet for manual download and self-hosting; it does not claim equivalent packaging.
- No NPM or Composer package
- No published classless, fluid-classless, conditional, or minified build matrix
- No Sass module API or per-feature compilation
- No large named color palette or preset theme catalog
- No build-time selector prefixing or feature elimination
- No official framework-specific starter packages or hosted sandbox collection
References
Primary Pico references: quick start and version, CSS variables, classless builds, conditional styling, groups, loading, modals, progress, tooltips, and Sass.
Primary tty.css references: quick start, forms, navigation, native components, customization, and accessibility.