ollcaih ui y2k / ps2 / weird docs · stable
workflow

Checklist: crear una página nueva en 2 minutos

  1. Copia la plantilla base (Getting started).
  2. Cambia el <title> y marca el tab activo con .is-active.
  3. En <main class="content">, pega 1–3 .card.
  4. Agrega componentes copiándolos desde Components.
  5. Si Neocities no muestra cambios, sube ?v=3 a ?v=4.
getting started

Plantilla universal (una sola base para todo)

Objetivo: tener un CSS universal (tu librería) y armar páginas nuevas usando clases: .topbar, .tabs, .rail, .card, .btn.

Cómo se usa:
1) Subes styleuniversal.css a Neocities.
2) En cada página enlazas el CSS universal + favicons.
3) Copias componentes desde esta docs.

Plantilla completa (copia/pega) copy 
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ollcaih — page</title>

  <!-- CSS universal -->
  <link rel="stylesheet" href="/styleuniversal.css?v=3" />

  <!-- Favicons -->
  <link rel="icon" href="/favicon.ico?v=3" sizes="any">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=3">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png?v=3">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png?v=3">

  <!-- Iconos Phosphor -->
  <script src="https://unpkg.com/@phosphor-icons/web"></script>
</head>

<body class="crt">
  <div class="fx" aria-hidden="true">
    <span class="orb orb--a"></span>
    <span class="orb orb--b"></span>
    <span class="orb orb--c"></span>
    <span class="orb orb--d"></span>
    <span class="orb orb--e"></span>
  </div>

  <header class="topbar">...</header>

  <div class="layout">
    <aside class="rail">...</aside>
    <main class="content">
      <section class="card card--hud">
        <div class="kicker">page</div>
        <h1 class="h1">Título</h1>
        <p class="lead">Texto principal…</p>
      </section>

      <footer class="footer">...</footer>
    </main>
  </div>
</body>
</html>

Cache-busting: si cambias el CSS y “no se actualiza”, sube ?v=3 a ?v=4.

tokens

Tokens (colores del sistema)

Tokens = variables en :root. Cambias tokens y el sitio entero cambia de skin. Es tu “paleta oficial”.

Tokens principales copy 
:root{
  --lime: #b6d317;
  --ice:  #8cc7ff;
  --pink: #ff55cc;
  --neon: #b7ff2a;
}

Regla: evita poner hex en HTML. Mejor crea variantes que usen tokens en CSS.

patterns

Patterns (home grid + panel HUD)

Estos son patrones “tipo home hub”: tiles en grid + paneles HUD. Los usas para recrear esa vibra sin inventar layout cada vez.

Tiles grid (tipo Home)

Tarjetas cuadradas con icono + título + descripción. Ideal para “hub” de secciones.

Pattern
Blog
texto + updates
Dibujo
galería + proceso
Juegos + Rol
Godot / TTRPG
Fotos
capturas / textura
Comentarios
notas / guestbook
Instagram
arte weird
HTML (copia/pega) copy 
<div class="tilegrid">
  <a class="tile" href="#">
    <i class="ph ph-notebook"></i>
    <div class="tile__title">Blog</div>
    <div class="tile__desc">texto + updates</div>
  </a>

  <a class="tile" href="#">
    <i class="ph ph-palette"></i>
    <div class="tile__title">Dibujo</div>
    <div class="tile__desc">galería + proceso</div>
  </a>
</div>

Panel HUD (header + log)

Bloque tipo STATUS con barra superior y franja inferior “LOG”.

Pattern
STATUS y2k / ps2 / weird

ollcaih — posteando cositas nuevas pronto.

  • 🎮 Godot / dev
  • 🎨 arte / comics
  • 🧩 weird / fanzines
LOG UI overlay active · scanlines ON · noise LOW
HTML (copia/pega) copy 
<section class="hudpanel">
  <div class="hudpanel__head">
    <span class="hudpanel__title">STATUS</span>
    <span class="hudpill"><i class="ph ph-sparkle"></i> y2k / ps2 / weird</span>
  </div>

  <div class="hudpanel__body">...</div>

  <div class="hudpanel__foot">
    <span class="hudpanel__log">LOG</span>
    <span class="muted">UI overlay active · scanlines ON · noise LOW</span>
  </div>
</section>
components

Components (copiar y usar)

Cada bloque: qué hace, cuándo usarlo, preview y “HTML (copia/pega)”.

Rail Tabs Buttons IconBtn Forms Toggle Checks Tags Alerts Toast Dropdown Tooltip Accordion List Table Breadcrumbs Pagination Progress Avatar Divider Modal Disclosure

Rail (barra de iconos)

Barra vertical con botones. Ideal para accesos rápidos fijos. Marca el actual con .is-active.

Component

Úsalo cuando: quieras navegación secundaria sin llenar el header.
Si no lo quieres: borra el <aside class="rail"> y listo.

HTML (copia/pega) copy 
<aside class="rail" aria-label="Accesos rápidos">
  <a class="rail__btn is-active" href="#section" title="Start">
    <i class="ph ph-rocket-launch"></i><span class="sr-only">Start</span>
  </a>

  <a class="rail__btn" href="#section2" title="Grid">
    <i class="ph ph-squares-four"></i><span class="sr-only">Grid</span>
  </a>

  <div class="rail__spacer"></div>

  <a class="rail__btn" href="/contact.html" title="Contacto">
    <i class="ph ph-envelope"></i><span class="sr-only">Contacto</span>
  </a>
</aside>

Tabs (navegación superior)

Botones del header (secciones principales). El activo se marca con .is-active (manual).

Component

Úsalo para: que siempre se entienda “en qué parte del sitio estás”.

HTML (copia/pega) copy 
<nav class="tabs" aria-label="Navegación">
  <a class="tab is-active" href="/docs.html"><i class="ph ph-book-open"></i><span>docs</span></a>
  <a class="tab" href="/tokens.html"><i class="ph ph-sliders"></i><span>tokens</span></a>
  <a class="tab" href="/components.html"><i class="ph ph-squares-four"></i><span>components</span></a>
</nav>

Buttons (botones)

Botones reusables. Base: .btn. Variantes: .btn--lime, .btn--ghost.

Component

Idea: cambias el “skin” por clase y listo. Todo usa tokens del tema.

Primary Ghost
HTML (copia/pega) copy 
<a class="btn btn--lime" href="#"><i class="ph ph-arrow-right"></i> Primary</a>
<a class="btn btn--ghost" href="#"><i class="ph ph-user"></i> Ghost</a>

Icon Button (botón solo icono)

Botón compacto para acciones rápidas. Ideal para headers, cards, modals. Siempre incluye aria-label.

Component
HTML (copia/pega) copy 
<button class="iconbtn" type="button" aria-label="Ajustes">
  <i class="ph ph-gear"></i>
</button>

Próximo: variantes .iconbtn--ghost, .iconbtn--sm, .iconbtn--danger.

Form kit (inputs)

Campos unificados: label + input + help + estados (.is-error, .is-success).

Component
Tip: usa emails reales en forms.
Este usuario ya existe.
HTML (copia/pega) copy 
<div class="field">
  <label class="label" for="email">Email</label>
  <input class="input" id="email" type="email" placeholder="name@domain.com">
  <div class="help">Texto de ayuda</div>
</div>

<div class="field is-error">
  <label class="label" for="user">Usuario</label>
  <input class="input" id="user" type="text">
  <div class="error">Mensaje de error</div>
</div>

Toggle / Switch

ON/OFF tipo consola. Útil para settings. Accesible con role="switch".

Component
HTML (copia/pega) copy 
<button class="switch" type="button" role="switch" aria-checked="false">
  <span class="switch__thumb" aria-hidden="true"></span>
  <span class="switch__label">Scanlines</span>
</button>

Nota: el comportamiento (cambiar aria-checked) puede ser JS opcional.

Checkbox / Radio

Checks para preferencias. Radios para elegir 1 opción. (Estilizados por CSS).

Component
HTML (copia/pega) copy 
<label class="check">
  <input type="checkbox">
  <span class="check__box" aria-hidden="true"></span>
  <span class="check__text">Activar HUD</span>
</label>

<label class="radio">
  <input name="theme" type="radio">
  <span class="radio__dot" aria-hidden="true"></span>
  <span class="radio__text">Ice</span>
</label>

Tags / Pills

Etiquetas rápidas para status. Unifica .badge y .hudpill con un sistema .tag.

Component
info ok warn danger
HTML (copia/pega) copy 
<span class="tag tag--info"><i class="ph ph-info"></i> info</span>
<span class="tag tag--ok"><i class="ph ph-check"></i> ok</span>
<span class="tag tag--warn"><i class="ph ph-warning"></i> warn</span>
<span class="tag tag--danger"><i class="ph ph-x-circle"></i> danger</span>

Alerts / Callouts

Mensajes inline: info, warning, error, success. Útiles en forms, docs y dashboards.

Component
Info: Este componente muestra mensajes útiles.
Warning: Esto puede afectar comportamiento.
HTML (copia/pega) copy 
<div class="alert alert--info"><strong>Info:</strong> Mensaje</div>
<div class="alert alert--warn"><strong>Warning:</strong> Mensaje</div>
<div class="alert alert--danger"><strong>Error:</strong> Mensaje</div>
<div class="alert alert--ok"><strong>OK:</strong> Mensaje</div>

Toast / Snackbar

Notificación flotante (ej. “copied”, “guardado”). Puede ser CSS+JS mínimo.

Component
Copiado al portapapeles
HTML (copia/pega) copy 
<div class="toast is-show" role="status" aria-live="polite">
  <i class="ph ph-check-circle"></i>
  <span>Copiado al portapapeles</span>
</div>

Nota: en producción, se muestra/oculta con clase (.is-show).

Dropdown / Menu

Botón que abre un menú de opciones. Puede funcionar con <details> (sin JS).

Component
Opciones
HTML (copia/pega) copy 
<details class="dropdown">
  <summary class="dropdown__btn">
    <i class="ph ph-dots-three"></i> Opciones
    <i class="ph ph-caret-down"></i>
  </summary>

  <div class="dropdown__menu" role="menu">
    <a class="dropdown__item" href="#" role="menuitem"><i class="ph ph-user"></i> Perfil</a>
    <a class="dropdown__item" href="#" role="menuitem"><i class="ph ph-gear"></i> Ajustes</a>
    <a class="dropdown__item is-danger" href="#" role="menuitem"><i class="ph ph-sign-out"></i> Salir</a>
  </div>
</details>

Tooltip

Texto flotante para explicar iconos del rail y acciones. (CSS usando data-tip).

Component
Settings
HTML (copia/pega) copy 
<a class="rail__btn tip" href="#" data-tip="Settings" title="Settings">
  <i class="ph ph-gear"></i><span class="sr-only">Settings</span>
</a>

Accordion

Similar a disclosure pero pensado para FAQs o secciones largas. (Puede ser un set de <details>).

Component
¿Qué es ollcaih UI?
Es tu librería base para páginas rápidas con estética PS2/Y2K.
¿Cómo copio un bloque?
Abre el disclosure y presiona el chip “copy”.
HTML (copia/pega) copy 
<details class="accordion" open>
  <summary class="accordion__sum">Pregunta</summary>
  <div class="accordion__body">Respuesta…</div>
</details>

List / Item row

Filas estilo dashboard: icono + título + descripción + meta. Perfecto para links tipo “panel”.

Component
Documentación UI kit + patrones + bloques listos v3
HTML (copia/pega) copy 
<a class="row" href="#">
  <span class="row__icon"><i class="ph ph-folder"></i></span>
  <span class="row__main">
    <span class="row__title">Título</span>
    <span class="row__desc">Descripción</span>
  </span>
  <span class="row__meta">meta</span>
</a>

Table

Tabla simple para datos: zebra, hover y scroll horizontal en mobile.

Component
Componente Estado Notas
Modal ok Overlay + ESC
Dropdown new Sin JS usando details
HTML (copia/pega) copy 
<div class="tableWrap">
  <table class="table">
    <thead>
      <tr><th>A</th><th>B</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>2</td></tr>
    </tbody>
  </table>
</div>

Breadcrumbs

Ruta para secciones profundas: docs / components / modal.

Component
HTML (copia/pega) copy 
<nav class="crumbs" aria-label="Breadcrumb">
  <a class="crumbs__a" href="#">docs</a>
  <span class="crumbs__sep" aria-hidden="true">/</span>
  <span class="crumbs__here" aria-current="page">page</span>
</nav>

Pagination

Para listas largas: prev/next y números.

Component
HTML (copia/pega) copy 
<nav class="pager" aria-label="Paginación">
  <a class="pager__btn" href="#">Prev</a>
  <a class="pager__num is-active" href="#">1</a>
  <a class="pager__num" href="#">2</a>
  <a class="pager__btn" href="#">Next</a>
</nav>

Progress / Meter

Barra de progreso estilo HUD (carga, completado, stats).

Component
65%
HTML (copia/pega) copy 
<div class="meter" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="65">
  <div class="meter__bar" style="width:65%;"></div>
</div>

Avatar / User chip

Bloque compacto: avatar + nombre + estado. Útil en headers y cards.

Component
ollcaih online
HTML (copia/pega) copy 
<div class="userchip">
  <span class="userchip__av" aria-hidden="true"></span>
  <span class="userchip__name">ollcaih</span>
  <span class="tag tag--info">online</span>
</div>

Divider / Section header

Separador con texto para “partir” contenido en secciones.

Component
SYSTEM
HTML (copia/pega) copy 
<div class="divider">
  <span class="divider__line" aria-hidden="true"></span>
  <span class="divider__text">SYSTEM</span>
  <span class="divider__line" aria-hidden="true"></span>
</div>

Modal (ventana)

Ventana emergente con overlay. Útil para mostrar info (about), confirmaciones o quick views.

Component

Uso típico: un botón abre el modal. Se cierra con ESC, click fuera o botón “cerrar”.

HTML (copia/pega) copy 
<button class="btn btn--lime" type="button" data-modal-open="#myModal">
  <i class="ph ph-browsers"></i> Abrir modal
</button>

<div class="modal" id="myModal" aria-hidden="true">
  <div class="modal__overlay" data-modal-close></div>

  <div class="modal__panel" role="dialog" aria-modal="true" aria-labelledby="myModalTitle" tabindex="-1">
    <div class="modal__head">
      <h3 class="modal__title" id="myModalTitle">Título</h3>
      <button class="iconbtn" type="button" data-modal-close aria-label="Cerrar">
        <i class="ph ph-x"></i>
      </button>
    </div>

    <div class="modal__body">
      Contenido del modal…
    </div>

    <div class="modal__foot">
      <button class="btn btn--ghost" type="button" data-modal-close>Cerrar</button>
      <a class="btn btn--lime" href="#">Acción</a>
    </div>
  </div>
</div>

Disclosure (preview + ver código)

Patrón de documentación: bloque que se abre/cierra con <details> + <summary>. Útil para mostrar código sin librerías.

Component

Preview: esto es lo que verías en tu docs (título + chip copy + código adentro).

HTML (copia/pega) copy 
<div class="card card--hud">Hola mundo</div>
Código base (para reutilizar) copy 
<details class="disclosure">
  <summary class="disclosure__summary" data-copy="next-code">
    <span class="disclosure__left"><i class="ph ph-code"></i> HTML (copia/pega)</span>
    <span class="disclosure__hint">copy</span>
  </summary>

  <pre><code>...tu código aquí...</code></pre>
</details>

Tip: el chip copy funciona solo si el <summary> tiene data-copy="next-code".

icons

Iconos (Phosphor)

Phosphor funciona por clases: ph + ph-nombre. Úsalos para que todo se sienta “dashboard / sistema”.

Preview (cómo se ve)

Ejemplos reales: botón con icono, botón solo icono, tamaños y set.

Preview
Perfil Settings
Llamar librería copy 
<script src="https://unpkg.com/@phosphor-icons/web"></script>
Usos típicos copy 
<!-- Botón con icono -->
<a class="btn btn--ghost" href="#">
  <i class="ph ph-user"></i> Perfil
</a>

<!-- Botón solo icono (siempre con sr-only) -->
<a class="rail__btn" href="#" title="Settings">
  <i class="ph ph-gear"></i>
  <span class="sr-only">Settings</span>
</a>

<!-- Icono suelto con tamaño -->
<i class="ph ph-sparkle" style="font-size:24px;"></i>
Tamaños (helpers) copy 
/* Helpers (ya incluidos en tu CSS universal) */
.is-24{ font-size:24px; }
.is-32{ font-size:32px; }
.is-40{ font-size:40px; }

Tip: En botones “solo icono”, siempre incluye .sr-only para accesibilidad.