/*! * wireframe-ui-lite v2.0.0 — https://github.com/marcosdocanto/wireframe-ui-lite * Lo-fi wireframe UI kit for rapid prototyping. One CSS file, zero JS, zero deps. * Everything is scoped under `.wf` — add it to (or any container) and * plain semantic HTML comes out looking like a wireframe. * MIT © Marcos Do Canto */ /* ---------------------------------------------------------------- tokens */ .wf { --wf-ink: #1c1c1c; /* text & strong lines */ --wf-ink-soft: #6b6b6b; /* secondary text */ --wf-paper: #ffffff; /* background */ --wf-fill: #f4f4f4; /* subtle fill */ --wf-fill-strong: #dcdcdc; /* placeholder fill */ --wf-line: #bfbfbf; /* container hairlines */ --wf-shadow: rgb(0 0 0 / 0.12); --wf-border: 1.5px; --wf-radius: 6px; --wf-gap: 1rem; --wf-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --wf-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-family: var(--wf-font); line-height: 1.5; color: var(--wf-ink); background: var(--wf-paper); accent-color: var(--wf-ink); color-scheme: light; -webkit-text-size-adjust: 100%; } .wf, .wf *, .wf *::before, .wf *::after { box-sizing: border-box; } /* dark — automatic, or forced with .wf-dark / .wf-light */ @media (prefers-color-scheme: dark) { .wf:not(.wf-light) { --wf-ink: #ececec; --wf-ink-soft: #9a9a9a; --wf-paper: #161616; --wf-fill: #232323; --wf-fill-strong: #3b3b3b; --wf-line: #4d4d4d; --wf-shadow: rgb(0 0 0 / 0.5); color-scheme: dark; } } .wf.wf-dark, .wf .wf-dark { --wf-ink: #ececec; --wf-ink-soft: #9a9a9a; --wf-paper: #161616; --wf-fill: #232323; --wf-fill-strong: #3b3b3b; --wf-line: #4d4d4d; --wf-shadow: rgb(0 0 0 / 0.5); color-scheme: dark; color: var(--wf-ink); background: var(--wf-paper); } .wf.wf-light, .wf .wf-light { --wf-ink: #1c1c1c; --wf-ink-soft: #6b6b6b; --wf-paper: #ffffff; --wf-fill: #f4f4f4; --wf-fill-strong: #dcdcdc; --wf-line: #bfbfbf; --wf-shadow: rgb(0 0 0 / 0.12); color-scheme: light; color: var(--wf-ink); background: var(--wf-paper); } /* ------------------------------------------------------------ typography */ .wf :where(h1, h2, h3, h4, h5, h6) { margin: 0 0 0.5em; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; } .wf :where(h1) { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; } .wf :where(h2) { font-size: 1.5rem; } .wf :where(h3) { font-size: 1.17rem; } .wf :where(h4, h5) { font-size: 1rem; } .wf :where(h6) { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wf-ink-soft); } .wf :where(p, ul, ol, table, pre, blockquote) { margin: 0 0 0.9em; } .wf :where(p, ul, ol, table, pre, blockquote):last-child { margin-bottom: 0; } .wf :where(a) { color: inherit; text-underline-offset: 2px; } .wf :where(small) { font-size: 0.85em; color: var(--wf-ink-soft); } .wf :where(img, svg, video) { max-width: 100%; height: auto; } .wf :where(hr), .wf-divider { border: 0; border-top: var(--wf-border) solid var(--wf-line); margin: var(--wf-gap) 0; } .wf :where(code) { font-family: var(--wf-mono); font-size: 0.88em; background: var(--wf-fill); padding: 0.15em 0.4em; border-radius: 4px; } .wf :where(pre) { font-family: var(--wf-mono); font-size: 0.85em; background: var(--wf-fill); border: 1px solid var(--wf-line); border-radius: var(--wf-radius); padding: 0.9em 1em; overflow-x: auto; } .wf :where(pre) code { background: none; padding: 0; } .wf :where(blockquote) { border-left: 3px solid var(--wf-ink-soft); background: var(--wf-fill); padding: 0.6em 1em; border-radius: 0 var(--wf-radius) var(--wf-radius) 0; } .wf :where(:focus-visible) { outline: 2px solid var(--wf-ink); outline-offset: 2px; } /* --------------------------------------------------------------- buttons */ .wf :where(button, .wf-btn, input[type="submit"], input[type="button"]) { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font: inherit; font-weight: 600; color: var(--wf-ink); background: var(--wf-paper); border: var(--wf-border) solid var(--wf-ink); border-radius: var(--wf-radius); padding: 0.5em 1.1em; cursor: pointer; text-decoration: none; text-align: center; box-shadow: 2px 2px 0 var(--wf-shadow); transition: translate 0.08s ease, box-shadow 0.08s ease, background 0.08s ease; } .wf :where(button, .wf-btn, input[type="submit"], input[type="button"]):hover { background: var(--wf-fill); } .wf :where(button, .wf-btn, input[type="submit"], input[type="button"]):active { translate: 1px 1px; box-shadow: 1px 1px 0 var(--wf-shadow); } .wf :where(button, .wf-btn):disabled, .wf :where(.wf-btn[aria-disabled="true"]) { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .wf .wf-btn-solid { background: var(--wf-ink); color: var(--wf-paper); } .wf .wf-btn-solid:hover { background: var(--wf-ink); opacity: 0.85; } .wf .wf-btn-ghost { border-color: transparent; background: transparent; box-shadow: none; } .wf .wf-btn-ghost:hover { background: var(--wf-fill); } .wf .wf-btn-sm { font-size: 0.85em; padding: 0.35em 0.8em; } .wf .wf-btn-lg { font-size: 1.1em; padding: 0.65em 1.5em; } /* ----------------------------------------------------------------- forms */ .wf :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"], [type="color"]), textarea, select) { font: inherit; color: inherit; width: 100%; padding: 0.5em 0.75em; background: var(--wf-paper); border: var(--wf-border) solid var(--wf-ink); border-radius: var(--wf-radius); } .wf :where(input, textarea)::placeholder { color: var(--wf-ink-soft); } .wf :where(textarea) { resize: vertical; min-height: 5em; } .wf :where(input[type="checkbox"], input[type="radio"]) { width: 1.05em; height: 1.05em; margin: 0 0.1em 0 0; } .wf-field { display: flex; flex-direction: column; gap: 0.35em; } .wf-field > label { font-weight: 600; font-size: 0.9em; } .wf-check { display: flex; align-items: center; gap: 0.5em; cursor: pointer; } .wf :where(fieldset) { border: var(--wf-border) solid var(--wf-line); border-radius: var(--wf-radius); padding: 1em; margin: 0 0 0.9em; } .wf :where(legend) { font-weight: 700; padding: 0 0.5em; } /* switch */ .wf input.wf-toggle { appearance: none; -webkit-appearance: none; width: 2.5em; height: 1.4em; margin: 0; border: var(--wf-border) solid var(--wf-ink); border-radius: 2em; background: var(--wf-paper); position: relative; cursor: pointer; flex: none; } .wf input.wf-toggle::before { content: ""; position: absolute; top: 50%; left: 0.15em; width: 0.95em; height: 0.95em; border-radius: 50%; translate: 0 -50%; background: var(--wf-ink-soft); transition: left 0.15s ease, background 0.15s ease; } .wf input.wf-toggle:checked { background: var(--wf-ink); } .wf input.wf-toggle:checked::before { left: calc(100% - 1.1em); background: var(--wf-paper); } /* progress */ .wf :where(progress) { appearance: none; -webkit-appearance: none; width: 100%; height: 0.75rem; border: var(--wf-border) solid var(--wf-ink); border-radius: 99px; background: var(--wf-paper); overflow: hidden; } .wf :where(progress)::-webkit-progress-bar { background: transparent; } .wf :where(progress)::-webkit-progress-value { background: var(--wf-ink); } .wf :where(progress)::-moz-progress-bar { background: var(--wf-ink); } /* ---------------------------------------------------------------- tables */ .wf :where(table) { width: 100%; border-collapse: collapse; font-size: 0.95em; } .wf :where(th, td) { border: 1px solid var(--wf-line); padding: 0.55em 0.75em; text-align: left; vertical-align: top; } .wf :where(thead th) { background: var(--wf-fill); border-bottom: var(--wf-border) solid var(--wf-ink); } .wf :where(tbody tr):hover { background: var(--wf-fill); } /* ---------------------------------------------------- placeholders (lo-fi) */ /* image placeholder — box with an X */ .wf-media { display: block; width: 100%; aspect-ratio: 16 / 9; border: var(--wf-border) solid var(--wf-line); border-radius: var(--wf-radius); background: linear-gradient(to top right, transparent calc(50% - 0.75px), var(--wf-line) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)), linear-gradient(to bottom right, transparent calc(50% - 0.75px), var(--wf-line) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)), var(--wf-fill); } .wf-media-square { aspect-ratio: 1; } .wf-media-4x3 { aspect-ratio: 4 / 3; } .wf-media-wide { aspect-ratio: 21 / 9; } .wf-media-tall { aspect-ratio: 9 / 16; } .wf-media-auto { aspect-ratio: auto; } /* small icon placeholder */ .wf-icon { display: inline-block; width: 1.4em; height: 1.4em; flex: none; vertical-align: -0.3em; border: 1px solid var(--wf-line); border-radius: 4px; background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--wf-line) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--wf-line) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)), var(--wf-fill); } .wf-icon-lg { width: 2.5em; height: 2.5em; } /* skeleton paragraph — set line count with style="--lines: 4" */ .wf-text { --lines: 3; height: calc(var(--lines) * 1.4em - 0.75em); background: repeating-linear-gradient(to bottom, var(--wf-fill-strong) 0 0.65em, transparent 0.65em 1.4em); } /* one skeleton line — combine with .wf-w-* widths */ .wf-line { height: 0.65em; border-radius: 3px; background: var(--wf-fill-strong); } .wf-line-title { height: 1em; } /* avatar — person silhouette */ .wf-avatar { --size: 2.75rem; width: var(--size); height: var(--size); flex: none; display: inline-block; border: var(--wf-border) solid var(--wf-line); border-radius: 50%; background: radial-gradient(circle at 50% 34%, var(--wf-fill-strong) 0 21%, transparent calc(21% + 1px)), radial-gradient(48% 34% at 50% 94%, var(--wf-fill-strong) 0 99%, transparent 100%), var(--wf-fill); } .wf-avatar-sm { --size: 2rem; } .wf-avatar-lg { --size: 4rem; } /* logo placeholder — shows "LOGO" when empty */ .wf-logo { display: inline-flex; align-items: center; justify-content: center; padding: 0.3em 0.75em; border: 2px solid var(--wf-ink); border-radius: var(--wf-radius); font-weight: 800; letter-spacing: 0.05em; text-decoration: none; color: inherit; white-space: nowrap; } .wf-logo:empty::before { content: "LOGO"; } /* chart placeholder — rising bars */ .wf-chart { min-height: 9rem; border-left: 2px solid var(--wf-ink-soft); border-bottom: 2px solid var(--wf-ink-soft); background: repeating-linear-gradient(to right, transparent 0 6%, var(--wf-fill-strong) 6% 14%); -webkit-mask-image: linear-gradient(to top left, black 35%, transparent 78%); mask-image: linear-gradient(to top left, black 35%, transparent 78%); } /* ------------------------------------------------------------- components */ .wf-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.1rem; background: var(--wf-paper); border: var(--wf-border) solid var(--wf-line); border-radius: calc(var(--wf-radius) * 1.5); } .wf-card > * { margin-block: 0; } .wf-card-fill { background: var(--wf-fill); } .wf-badge { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.1em 0.65em; font-size: 0.8em; font-weight: 600; border: 1px solid var(--wf-line); border-radius: 99px; background: var(--wf-fill); white-space: nowrap; } .wf-badge-solid { background: var(--wf-ink); color: var(--wf-paper); border-color: var(--wf-ink); } .wf-dot { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--wf-ink-soft); } .wf-alert { padding: 0.8em 1em; border: var(--wf-border) solid var(--wf-line); border-left: 0.35rem solid var(--wf-ink); border-radius: var(--wf-radius); background: var(--wf-fill); } /* annotation sticky note */ .wf-note { padding: 0.7em 1em; border: 1.5px dashed var(--wf-ink-soft); border-radius: var(--wf-radius); background: var(--wf-fill); color: var(--wf-ink-soft); font-size: 0.9em; } /* region label —
*/ .wf [data-wf-label] { position: relative; } .wf [data-wf-label]::after { content: attr(data-wf-label); position: absolute; inset: 0.4rem 0.4rem auto auto; z-index: 1; font: 600 0.62rem/1 var(--wf-font); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3em 0.55em; border-radius: 3px; background: var(--wf-ink); color: var(--wf-paper); opacity: 0.8; pointer-events: none; } /* visual tabs (non-interactive by design — mark one .wf-active) */ .wf-tabs { display: flex; gap: 1.25rem; border-bottom: var(--wf-border) solid var(--wf-line); overflow-x: auto; } .wf-tabs > * { padding: 0.5em 0.15em; text-decoration: none; color: var(--wf-ink-soft); border-bottom: 2.5px solid transparent; margin-bottom: calc(var(--wf-border) * -1); white-space: nowrap; } .wf-tabs > .wf-active { color: var(--wf-ink); font-weight: 600; border-bottom-color: var(--wf-ink); } .wf-crumbs { display: flex; flex-wrap: wrap; gap: 0.5em; list-style: none; margin: 0 0 0.9em; padding: 0; font-size: 0.9em; color: var(--wf-ink-soft); } .wf-crumbs li + li::before { content: "/"; margin-right: 0.5em; color: var(--wf-line); } .wf-crumbs a { text-decoration: none; } .wf-crumbs a:hover { text-decoration: underline; } /* menu — vertical nav list (sidebar, dropdown panel) */ .wf-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .wf-menu a, .wf-menu button { display: flex; align-items: center; gap: 0.6em; width: 100%; padding: 0.5em 0.7em; border: 0; border-radius: var(--wf-radius); background: none; box-shadow: none; font-weight: 500; text-decoration: none; color: inherit; cursor: pointer; } .wf-menu a:hover, .wf-menu button:hover { background: var(--wf-fill); } .wf-menu .wf-active { background: var(--wf-fill-strong); font-weight: 600; } /* accordion — plain
*/ .wf :where(details:not(.wf-dropdown)) { border: var(--wf-border) solid var(--wf-line); border-radius: var(--wf-radius); background: var(--wf-paper); margin: 0 0 0.5em; } .wf :where(details:not(.wf-dropdown)) > summary { padding: 0.7em 1em; font-weight: 600; cursor: pointer; border-radius: var(--wf-radius); } .wf :where(details:not(.wf-dropdown)) > summary:hover { background: var(--wf-fill); } .wf :where(details:not(.wf-dropdown))[open] > summary { border-bottom: 1px solid var(--wf-line); border-radius: var(--wf-radius) var(--wf-radius) 0 0; } .wf :where(details:not(.wf-dropdown)) > :not(summary) { margin: 0.8em 1em; } /* dropdown —
…
    … */ .wf-dropdown { position: relative; display: inline-block; } .wf-dropdown > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; padding: 0.5em 1.1em; border: var(--wf-border) solid var(--wf-ink); border-radius: var(--wf-radius); background: var(--wf-paper); cursor: pointer; box-shadow: 2px 2px 0 var(--wf-shadow); user-select: none; } .wf-dropdown > summary::-webkit-details-marker { display: none; } .wf-dropdown > summary::after { content: "▾"; font-size: 0.8em; } .wf-dropdown[open] > summary::after { content: "▴"; } .wf-dropdown > :not(summary) { position: absolute; top: calc(100% + 0.3rem); left: 0; z-index: 20; min-width: max(100%, 11rem); padding: 0.3rem; background: var(--wf-paper); border: var(--wf-border) solid var(--wf-ink); border-radius: var(--wf-radius); box-shadow: 4px 4px 0 var(--wf-shadow); } /* modal — native (open with el.showModal() or the `open` attribute) */ .wf :where(dialog) { color: var(--wf-ink); background: var(--wf-paper); border: var(--wf-border) solid var(--wf-ink); border-radius: calc(var(--wf-radius) * 1.5); padding: 1.25rem; width: calc(100% - 2rem); max-width: 30rem; box-shadow: 6px 6px 0 var(--wf-shadow); } .wf :where(dialog)::backdrop { background: rgb(0 0 0 / 0.4); } /* ----------------------------------------------------------------- layout */ .wf-container { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: 1rem; } .wf-container-narrow { max-width: 42rem; } .wf-container-wide { max-width: 82rem; } .wf-row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--wf-gap) * 0.75); } .wf-stack { display: flex; flex-direction: column; gap: var(--wf-gap); } .wf-grid { display: grid; gap: var(--wf-gap); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); } .wf-cols-2 { grid-template-columns: repeat(2, 1fr); } .wf-cols-3 { grid-template-columns: repeat(3, 1fr); } .wf-cols-4 { grid-template-columns: repeat(4, 1fr); } .wf-between { justify-content: space-between; } .wf-center { justify-content: center; align-items: center; text-align: center; } .wf-end { justify-content: flex-end; } .wf-top { align-items: flex-start; } /* top bar */ .wf-navbar { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1rem; background: var(--wf-paper); border-bottom: var(--wf-border) solid var(--wf-ink); } .wf-navbar a:not(.wf-btn, .wf-logo) { text-decoration: none; color: var(--wf-ink-soft); padding: 0.25em 0.5em; border-radius: var(--wf-radius); } .wf-navbar a:not(.wf-btn, .wf-logo):hover { background: var(--wf-fill); } .wf-navbar a.wf-active { color: var(--wf-ink); font-weight: 600; } /* hero */ .wf-hero { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; padding: clamp(2.5rem, 8vw, 5rem) 1rem; } .wf-hero > * { margin-block: 0; } .wf-hero > :where(p) { max-width: 38rem; color: var(--wf-ink-soft); } .wf-footer { border-top: var(--wf-border) solid var(--wf-line); padding: 1.5rem 1rem; font-size: 0.9em; color: var(--wf-ink-soft); } /* app shell —