Sistema de diseño Pico CSS.

Pico CSS Un sistema de diseño semántico y sencillo HTML

Una pequeña superficie semántica de HTML

Pico aplica estilos a elementos HTML habituales, sin exigir que cada párrafo, campo o botón lleve una larga lista de clases de componentes. En este ejemplo, article proporciona la tarjeta de preferencias, y su encabezado y pie delimitan el contenido; las etiquetas contienen los controles nativos input/select. El elemento main usa container porque se trata de la compilación estándar de Pico, no de la distribución independiente sin clases.

Esto hace que Pico sea útil para herramientas compactas e interfaces centradas en el contenido, donde los controles nativos del navegador son suficientes. Por sí solo, no convierte un formulario en una aplicación. El JavaScript completo gestiona la muestra de lectura, la vista previa y el resultado local, mientras que el navegador se ocupa de la semántica básica de entrada.

Consulta la especificación complementaria

Pico CSS Variables del tema y funciones semánticas del sistema de diseño

Variables del tema y funciones semánticas

La función primaria predeterminada no consiste en aplicar un único color indiscriminadamente. Pico separa los valores de texto primario, fondo, estado al pasar el cursor, foco e inverso. La tabla de referencia muestra las definiciones reales para el tema claro, de modo que una personalización de marca pueda conservar estas relaciones. Las etiquetas de la sala de lectura usan la función de texto primario; los botones heredan de Pico todos los estilos del componente.

El control de apariencia establece data-theme en html. Un atributo explícito light o dark prevalece sobre la selección automática del esquema. Si lo quitas, Pico puede seguir el esquema de color preferido del navegador. La demostración usa un modo inicial explícito para mantener sincronizados la casilla de verificación y el aspecto visual. Al introducir una paleta primaria personalizada, sobrescribe ambas definiciones de esquema; cambiar solo un valor de la raíz para el tema claro no basta para crear un tema oscuro completo.

Consulta la especificación complementaria

Pico CSS La tipografía adaptable del sistema de diseño cambia toda la escala

La tipografía adaptable cambia toda la escala

Pico cambia el tamaño de fuente raíz en varios anchos de ventana gráfica: 100 % al principio, seguido de 106,25 %, 112,5 %, 118,75 %, 125 % y 131,25 %. Con el valor predeterminado de 16px del navegador, esto equivale a entre 16 y 21px. Como el espaciado de los componentes usa rem, la cómoda disposición se amplía junto con el texto. Por tanto, un token descrito como un rem no siempre equivale a dieciséis píxeles.

El control deslizante de la muestra solo cambia el font-size de #sample a un porcentaje de su tamaño heredado. No modifica la variable raíz de Pico ni el ajuste de zoom del navegador. Esta distinción mantiene estables los controles de configuración y deja claro el alcance local del cambio. El elemento output nativo muestra el porcentaje seleccionado. Los encabezados conservan los tamaños predeterminados de Pico: h1 es 2rem y h2 es 1.75rem.

Consulta la especificación complementaria

Pico CSS Ancho de línea y composición de lectura del sistema de diseño

Ancho de línea y composición de lectura

Las tres medidas de línea son valores originales expresados en unidades ch. Definen un ancho máximo, no obligan al texto a ocupar toda la columna. En dispositivos móviles, la muestra puede ser más estrecha que el máximo seleccionado; ese es el resultado esperado de un ancho máximo adaptable. No hace falta desplazamiento horizontal para respetar una preferencia de ancho mayor.

La disposición de lectura personalizada usa dos columnas minmax y pasa a una sola por debajo de 800px. Ese umbral es específico de esta composición, no un punto de ruptura oficial de Pico. Los botones de revisión y restablecimiento emparejados usan el helper grid de Pico, mientras que el pie del diálogo usa una fila flex con ajuste de línea. En pantallas estrechas, mantener un panel de configuración legible tiene prioridad sobre conservar la disposición en dos columnas.

Consulta la especificación complementaria

Pico CSS Validación nativa con un paso de revisión útil en el sistema de diseño

Validación nativa con un paso de revisión útil

El nombre del perfil usa required y minlength, junto con un texto de ayuda small asociado. La validación de restricciones nativa impide enviar el formulario vacío. El script añade una comprobación del valor sin espacios al inicio ni al final, para que una pareja de espacios no satisfaga la regla de la aplicación. Un evento invalid añade aria-invalid para activar los estilos de error de Pico; al escribir, se borra el error personalizado y el atributo de invalidez obsoleto.

Select y range son controles normales del navegador. Actualizan la muestra de lectura de inmediato, mientras que Review profile captura un objeto pendiente independiente. Esa copia es el texto que se muestra en el diálogo y los datos que usa Apply locally, de modo que la confirmación no describa por accidente un conjunto de valores y aplique otro.

1. Deja vacío el nombre del perfil e intenta revisar el perfil.
2. Introduce un nombre, elige un ancho y cambia el tamaño de la muestra.
3. Revisa la copia, cancela para seguir editando o aplícala al estado local.

Consulta la especificación complementaria

Pico CSS Un modal real, no solo una superposición con estilo del sistema de diseño

Un cuadro de diálogo modal real, no solo una capa superpuesta con estilos

Pico aplica estilos a dialog y al contenido de article, pero no proporciona el JavaScript de la aplicación. Este ejemplo llama a HTMLDialogElement.showModal. El navegador sitúa el diálogo en la capa superior, vuelve inerte el resto del documento y permite cerrarlo de forma nativa con Escape. Limitarse a establecer el atributo open produciría un comportamiento distinto, no modal, que no se usa aquí.

El diálogo tiene aria-labelledby, que apunta a su encabezado. El botón de cierre tiene una etiqueta accesible explícita, mientras que Keep editing y Apply locally describen los dos resultados posibles. Ambos botones para cancelar llaman a close sin cambiar el estado guardado. Al aplicar, se muestra el perfil pendiente en el texto visible y se cierra el diálogo; no se escribe en localStorage ni se envía ninguna solicitud.

Consulta la especificación complementaria

Pico CSS Un elemento de divulgación nativo para la explicación complementaria del sistema de diseño

Un elemento nativo de divulgación para explicaciones complementarias

El par details/summary explica qué controles afectan a la muestra y cuáles no. Es realmente desplegable sin JavaScript porque ese comportamiento forma parte del elemento HTML. El resumen plantea una pregunta descriptiva y se puede usar con el teclado. La explicación es contenido complementario, por lo que no interrumpe el formulario principal con otro panel siempre abierto.

No reemplaces los detalles por un encabezado con estilo solo porque la captura cerrada se vea similar. Asimismo, el control de apariencia conserva type=checkbox con role=switch, por lo que tiene un estado binario real. Los estilos de Pico se aplican a estructuras semánticas; esas estructuras definen gran parte del contrato de interacción.

• article proporciona una superficie de preferencias agrupada visualmente.
• details y summary proporcionan una divulgación nativa.
• dialog, abierto con showModal, proporciona un límite modal para la revisión.

Consulta la especificación complementaria

Sistema de diseño Pico CSS: instálalo una vez y mantén el ejemplo reproducible

Instálalo una vez y mantén el ejemplo reproducible

El paquete estándar incluye un archivo pico.min.css compilado. Cópialo en una carpeta local de recursos, inclúyelo antes de las reglas de diseño de la aplicación y carga el app.js proporcionado con defer. El marcado completo, CSS y el script se incluyen arriba. Este ejemplo no requiere ningún proveedor de framework, fuente de iconos ni plugin de JavaScript de terceros.

Usa la hoja de estilos estándar de forma coherente con sus clases de contenedor y cuadrícula. La compilación sin clases parte de supuestos de diseño distintos, y la compilación condicional aplica los estilos con un alcance diferente; intercambiar estas distribuciones sin revisar el marcado no es una optimización neutra. Si añades Pico a un sitio existente, comprueba cómo interactúan sus selectores de elementos con los estilos de formularios y tipografía existentes antes de aplicarlos globalmente.

Consulta la especificación complementaria

Sistema de diseño Pico CSS: elige la distribución antes de adaptar el marcado

Elige la distribución antes de adaptar el marcado

Este ejemplo utiliza la distribución estándar y sus utilidades de contenedor y cuadrícula. La distribución sin clases cambia los supuestos de diseño, mientras que la distribución condicional limita el alcance de los estilos de Pico. Considera la elección de una distribución como una decisión de integración, no como una optimización intercambiable del tamaño del archivo.

En un sitio existente, examina el alcance de los selectores de elementos sobre los encabezados, formularios, artículos y diálogos existentes. El tamaño de fuente porcentual de la muestra de lectura es una modificación local y debe mantenerse como tal; cambiar la escala raíz también modificaría el espaciado y los controles de Pico basados en rem. Al decidir qué partes del documento heredan el tema, mantén sincronizados el atributo de apariencia y los controles de preferencias de la aplicación.

Consulta la especificación complementaria

Sistema de diseño Pico CSS: ejemplos de componentes

<main class="container"><header><p class="kicker">PICO CSS / READING ROOM</p><h1>A calmer reading setup</h1><p>Adjust a local reading profile. Semantic HTML does most of the work.</p></header><div class="reading-layout"><article><header><h2>Reading preferences</h2></header><form id="preferences"><label for="reader">Profile name<input id="reader" name="reader" required minlength="2" placeholder="Weekend reader" aria-describedby="name-help"></label><small id="name-help">At least two characters. Saved only for this open preview.</small><label for="measure">Reading width<select id="measure"><option value="48">Narrow — 48 characters</option><option value="62" selected>Balanced — 62 characters</option><option value="72">Wide — 72 characters</option></select></label><label for="scale">Text size <output id="size-label">100%</output><input id="scale" type="range" min="90" max="125" step="5" value="100"></label><label><input id="night" type="checkbox" role="switch"> Dark appearance</label><div class="grid"><button type="submit">Review profile</button><button type="reset" class="secondary outline">Reset</button></div></form><footer id="saved" role="status">No profile applied yet.</footer></article><section class="reading-copy"><p class="kicker">A SHORT SAMPLE</p><h2>Make space for attention.</h2><div id="sample"><p>The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.</p><p>A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.</p></div><details><summary>What changes in this preview?</summary><p>Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.</p></details></section></div><small>Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.</small></main><dialog id="review" aria-labelledby="review-title"><article><header><button id="close" aria-label="Close review" rel="prev"></button><h2 id="review-title">Review reading profile</h2></header><p id="review-text"></p><footer><button id="cancel" class="secondary">Keep editing</button><button id="apply">Apply locally</button></footer></article></dialog>

const $=id=>document.getElementById(id);let pending=null;
function update(){ $('sample').style.maxWidth=$('measure').value+'ch';$('sample').style.fontSize=$('scale').value+'%';$('size-label').value=$('scale').value+'%';document.documentElement.dataset.theme=$('night').checked?'dark':'light';}
for(const id of ['measure','scale','night'])$(id).addEventListener('input',update);
$('preferences').addEventListener('submit',event=>{event.preventDefault();pending={name:$('reader').value.trim(),width:$('measure').value,size:$('scale').value,dark:$('night').checked};if(pending.name.length<2){$('reader').setCustomValidity('Use at least two non-space characters.');$('reader').reportValidity();return;}$('review-text').textContent=`${pending.name}: ${pending.width}-character maximum, ${pending.size}% sample text, ${pending.dark?'dark':'light'} appearance. This will apply only to this preview.`;$('review').showModal();});
$('reader').addEventListener('input',()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid')});$('reader').addEventListener('invalid',()=>{$('reader').setAttribute('aria-invalid','true')});
for(const id of ['close','cancel'])$(id).addEventListener('click',()=>$('review').close());
$('apply').addEventListener('click',()=>{$('saved').textContent=`Applied ${pending.name} locally (${pending.width}ch, ${pending.size}%, ${pending.dark?'dark':'light'}). Reloading clears this profile.`;$('review').close();});
$('preferences').addEventListener('reset',()=>{setTimeout(()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid');$('saved').textContent='No profile applied yet.';update()},0)});update();

main.container{max-width:1120px;padding:2rem 1rem}.kicker{font-size:.7rem;letter-spacing:.13em;font-weight:700;color:var(--pico-primary)}.reading-layout{display:grid;grid-template-columns:minmax(260px,.95fr) minmax(0,1.05fr);gap:2rem;align-items:start}.reading-copy{padding-top:1rem}#sample{transition:font-size .15s}output{float:right}#review article{max-width:560px}#review footer{display:flex;flex-wrap:wrap;gap:.5rem}#review footer button{flex:1}h1{max-width:20ch}header>p{max-width:65ch}@media(max-width:800px){.reading-layout{grid-template-columns:1fr;gap:1rem}}