# retrostrap cheatsheet

Build like it's 2026, look like it's 1999. Drop this whole file into context; it is
everything you need to produce a correct, era-faithful page.

## Install (pin the version in real projects)
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.1/dist/retrostrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.1/dist/themes/midnight.css">
<script defer src="https://cdn.jsdelivr.net/npm/retrostrap@0.1.1/dist/retrostrap.min.js"></script>
<html data-rs-theme="midnight">
```

## The five laws (violating one breaks the era)
1. Colors: only the 224 legal colors (216 web-safe plus the 16 classic named colors, 8 of them off the cube: silver/gray/navy/teal/maroon/purple/green/olive). Opaque.
2. Fonts: only the nine `--rs-font-*` stacks; sizes 10/13/16/18/24/32/48px (`rs-font-1..7`).
3. border-radius 0, shadow blur 0. Rounding via border-image only.
4. Easing linear/steps only; everything respects prefers-reduced-motion.
5. No autoplay audio, no tracking, no external calls. CSS works without JS.

## Structure
`<body>` wears the theme tile; wrap content in `<div class="rs-page rs-container">`.
Pick one layout recipe: `rs-layout--sidebar-left`, `--sidebar-right`, `--holy-grail`, `--three-col`, or `rs-frames`.

## Components
- `rs-alert` `rs-alert--info` `rs-alert--warn` `rs-alert--error`, An inline message bar in info, warn and error flavors; no animation, it is just there.
- `rs-ascii` `rs-ascii--center` `rs-ascii--framed` `rs-ascii--sig`, A <pre> block for ASCII art and text banners, marked up as an image so readers announce a label, not every slash.
- `rs-avatar` `rs-avatar--small`, An 80×80 pixelated avatar image with a 1px border; --small drops it to 40×40.
- `rs-award` `rs-award__caption`, A trophy-shelf block: one award image and the caption telling who gave it and when.
- `rs-badge` `rs-badge--new` `rs-badge--updated` `rs-badge--hot` `rs-badge--cool`, Inline flashing tags, NEW!, UPDATED!, HOT!, COOL!, for links you touched this month.
- `rs-banner`, A 468×60 banner shell that scales proportionally below 500px, the one sanctioned proportional scale.
- `rs-blink`, Inline text that blinks at exactly one hertz.
- `rs-blinkie` `rs-blinkie--hot` `rs-blinkie--cool` `rs-blinkie--candy`, The ~150×20 glitter strip that declared your allegiances in a sidebar or signature.
- `rs-breadcrumbs`, The "You are here:" trail as an ordered list of links.
- `rs-btn` `rs-btn--primary` `rs-btn--link` `rs-btn--small` `rs-btn--large` `rs-btn--icon`, The beveled system button; pressing it nudges the label one pixel down-right.
- `rs-button88` `rs-button88--navy` `rs-button88--maroon` `rs-button88--teal`, The 88×31 button as an element: fixed size forever, built for badge walls.
- `rs-card-profile` `rs-card-profile__avatar` `rs-card-profile__name` `rs-card-profile__rank` `rs-card-profile__fields`, The member card: avatar, name, rank stars and a fields table.
- `rs-center`, Centers text and block children. Culturally load-bearing.
- `rs-checkbox`, The 13×13 sunken checkbox with a proper check glyph.
- `rs-cols-2` `rs-cols-3` `rs-cols-4`, Equal columns for badge walls and link farms. 4 → 2 → 1, 3 → 1, 2 → 1 as the screen shrinks.
- `rs-construction` `rs-construction--bar`, The permanently-temporary under-construction sign: a yellow board between caution bars.
- `rs-container` `rs-container--wide` `rs-container--fluid`, Width governor: 760px by default, centered, fluid below its max.
- `rs-counter` `rs-counter__label`, The sunken odometer shell for a hit counter; static digits work today, the hit-counter widget populates it later.
- `rs-dialog` `rs-dialog__titlebar` `rs-dialog__body` `rs-dialog__buttons` `rs-dialog--info` `rs-dialog--warn` `rs-dialog--error`, The native dialog in system-alert costume: titlebar, icon, message and button row over a dithered backdrop.
- `rs-dos` `rs-dos__title`, A black terminal block on <pre>, with an optional C:\> title strip.
- `rs-error-page` `rs-error-page__code`, The 404 furniture: a DOS box with the status line and a link back home.
- `rs-fieldset`, Native fieldset and legend wearing the groove border.
- `rs-figure` `rs-figure__caption`, An image in a 2px outset frame with an optional sunken caption strip.
- `rs-font-1` `rs-font-2` `rs-font-3` `rs-font-4` `rs-font-5` `rs-font-6` `rs-font-7`, The seven sanctioned text sizes, 10px to 48px, as utility classes.
- `rs-footer` `rs-footer__updated` `rs-footer__badges` `rs-footer__email`, The page footer kit: last-updated line, 88×31 badge wall, and a mailto.
- `rs-form-table` `rs-form-error`, The label:field two-column form grid, minus the table.
- `rs-frames` `rs-frames__side` `rs-frames__main` `rs-frames--right`, Frameset cosplay: sticky side pane and main pane, each scrolling on its own, divided by a ridge.
- `rs-gradient-text` `rs-gradient-text--fire` `rs-gradient-text--ice` `rs-gradient-text--toxic`, Two-stop gradient display text in fire, ice, and toxic flavors.
- `rs-hr` `rs-hr--groove` `rs-hr--dotted` `rs-hr--rainbow` `rs-hr--stars`, A wardrobe of horizontal rules for the semantic <hr>.
- `rs-input`, The sunken single-line text input.
- `rs-kbd`, A <kbd> dressed as a beveled keycap.
- `rs-layout` `rs-layout--sidebar-left` `rs-layout--sidebar-right` `rs-layout--holy-grail` `rs-layout--three-col` `rs-layout__header` `rs-layout__nav` `rs-layout__main` `rs-layout__rail` `rs-layout__footer`, Page-shape recipes via grid areas: sidebars, holy grail, portal thirds. Single column below svga.
- `rs-list` `rs-list--stars` `rs-list--arrows` `rs-list--disks` `rs-list--paws`, A <ul> with themed pixel markers in place of the stock disc.
- `rs-loading` `rs-loading--bar`, An hourglass with "Loading, please wait…"; the --bar variant adds an indeterminate progress bar.
- `rs-marquee` `rs-marquee__content`, Scrolling text at one of three sane speeds; pauses on hover and focus, stands still under reduced motion.
- `rs-menu`, A dropdown menu bar: nested list submenus open on hover and focus; the enhancer adds keyboard and tap.
- `rs-navbar`, A horizontal bar of bevel-chip links; the current page renders sunken.
- `rs-note`, A yellow sticky note with a hard shadow, for asides and webmaster's notes.
- `rs-page`, The opaque content sheet that sits on the tiled or colored body.
- `rs-pagination`, A page-number row: current page bracketed, Prev/Next in angle brackets.
- `rs-panel` `rs-panel__title` `rs-panel--raised` `rs-panel--sunken`, The general-purpose box: groove border with a title riding the line, fieldset-style.
- `rs-progress` `rs-progress__bar` `rs-progress--indeterminate`, A segmented progress bar: sunken track, chunky accent blocks, optional marching indeterminate mode.
- `rs-quote` `rs-quote__source` `rs-quote__body` `rs-quote__sig`, The forum quote block: source strip, quoted body, and the signature divider.
- `rs-radio`, The 12×12 sunken pixel-circle radio; a dot appears when checked.
- `rs-rainbow`, Per-character rainbow text via a banded gradient, for headlines only.
- `rs-rollover` `rs-rollover__off` `rs-rollover__on`, The onmouseover swap, hide one thing, reveal another on hover or focus, in pure CSS.
- `rs-select`, A native <select> in bevel chrome with a pixel down-arrow.
- `rs-sidenav` `rs-sidenav__section`, The left nav list: pixel bullets, section headers, and visited links proudly purple.
- `rs-skip`, A skip-to-content link, visually hidden until focused, first in the tab order.
- `rs-spacer` `rs-spacer--1` `rs-spacer--2` `rs-spacer--3` `rs-spacer--4` `rs-spacer--5`, A vertical spacer block on the spacing scale.
- `rs-splash` `rs-splash__enter`, A click-to-enter intro sheet, hidden until its enhancer decides to show it; the page never depends on it.
- `rs-spoiler`, A details-based spoiler: content hidden until deliberately opened.
- `rs-stars` `rs-stars__empty`, A display-only star rating: filled and empty pixel stars sized to the font.
- `rs-statusbar`, A sunken status strip whose direct children become cells. With JS, a hovered or focused link's real destination previews in a cell laid over the bar.
- `rs-table` `rs-table--striped` `rs-table--bordered` `rs-table--data` `rs-num`, Dressing for honest data tables: bordered cells, silver header row, stripe and mono-numeral modifiers.
- `rs-tabs` `rs-tabs__tab` `rs-tabs__panel` `rs-tabs__tab--active`, Folder tabs over stacked panels; without the enhancer they are honest in-page links.
- `rs-textarea`, The sunken multi-line field, for messages of substance.
- `rs-toolbar` `rs-toolbar__sep`, A raised strip of buttons with groove separators that wraps instead of hiding.
- `rs-tooltip`, A small yellow tip box on hover and focus, fed by a data-rs-tip attribute.
- `rs-top`, The "^ Top" back-to-top link; instant jump, no smooth scroll.
- `rs-typewriter` `rs-typewriter--reveal`, Courier text with letterspacing; the reveal modifier types it on.
- `rs-webring-bar` `rs-webring-bar__name`, The centered prev/random/next bar with a ring name line; static links until the webring widget fills them.
- `rs-window` `rs-window__titlebar` `rs-window__title` `rs-window__controls` `rs-window__body` `rs-window__statusbar` `rs-window--inactive`, Window chrome: titlebar, control buttons, body and status bar; dragging arrives with the windows widget.

## Widgets (data-rs-widgets on any element)
- `clock`, An LED clock, refreshed once a second.
- `countdown`, An LED countdown to a target date and time.
- `crt`, Scanlines and a vignette, with an optional (off-by-default) flicker.
- `cursor-trail`, A little pool of sprites that chase your pointer.
- `dvd`, A logo that bounces around the viewport, waiting for the corner hit.
- `fortune`, Shows an old-web fortune; click for another.
- `guestbook`, Renders guestbook entries and wires the sign form.
- `hit-counter`, The odometer visitor counter: static, local, or api-backed.
- `jukebox`, A playlist audio player in window chrome. Never autoplays.
- `konami`, The cheat code, and a 30-second party mode.
- `kugeln`, Shiny 3D spheres that trail or orbit your pointer, in a rainbow of colours.
- `last-updated`, Prints the document's last-modified date, era-style.
- `neko`, A pixel cat that chases your cursor, patrols an element edge, or dozes.
- `pixel-pet`, A little desktop pet in the corner that you feed, and that remembers you between visits.
- `smilies`, Turns :) and friends into pixel emoticons.
- `snowfall`, Falling snow (or hearts, or confetti) on a canvas.
- `sparkle`, Twinkles at the pointer, or ambient glitter on a zone.
- `starfield`, Warp-speed stars on a canvas.
- `ticker`, A scrolling status-bar text ticker.
- `transitions`, Page-to-page wipes via the View Transitions API.
- `webring`, Fills an rs-webring-bar from a ring's JSON, computing prev/random/next.
- `windows`, Makes rs-window elements draggable, with click-to-front (or dispatch rs:window:raise) and a five-window cap.

## Themes
- bevel: The system desktop: teal, silver chrome, navy titlebars, Tahoma.
- bubble: Candy-plastic 2001: white windows on a pinstriped aqua desktop, gel buttons, and traffic-light window controls.
- classic: The 1996 browser default: silver page, white sheet, Times, blue links.
- cosmic: A starry deep-purple void: pink and cyan neon on aubergine, over a tiled starfield.
- highcontrast: Accessibility mode, 1998 spirit: black on white, larger text, an unmissable focus ring. Every pair clears AAA.
- kawaii: Pastel shrine: bubblegum page, tiled hearts, Comic Sans, hot-pink scalloped panels.
- midnight: GeoCities after dark: black page, tiled starfield, neon text, yellow headings.
- newspaper: The 1997 broadsheet: ink on newsprint, serif columns, a black masthead. Grayscale but for the links.
- phosphor: Green terminal on black: Courier, scanlines welcome, rs-dos blends in.
- y2k: Millennium chrome: dark navy dither page, banded silver panels, Impact headings.

## Verify
Run `Retrostrap.audit()` in the console; fix every violation it lists.
