# sistema de diseño de Pure CSS

## Vista previa de la interfaz de sistema de diseño de Pure CSS

Filtre seis kits, ordénelos por nombre, seleccione los disponibles y conserve la selección al cambiar los filtros.

## Referencia de diseño de sistema de diseño de Pure CSS

Módulos del paquete compilado de Pure CSS 3.1.0. Estos son valores literales de selectores, no un conjunto de tokens de diseño con nombre API: Pure no publica un tema de variables CSS semánticas como Chakra o Pico. La aplicación añade su propia tipografía, espaciado de maquetación y un contorno de foco más visible.

### Valores oficiales de botones y formularios

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| .pure-button padding | 0.5em 1em | Se adapta al tamaño de texto heredado del botón. |
| .pure-button radius | 2px | Forma predeterminada de las esquinas del botón. |
| .pure-button background | #E6E6E6 | Relleno neutro del botón. |
| .pure-button-primary background | rgb(0, 120, 231) | Relleno principal o de selección opcional. |
| .pure-button disabled opacity | 0.40 | Use también el atributo disabled para controlar el comportamiento. |
| .pure-form input padding | 0.5em 0.6em | Relleno habitual de los campos de texto. |
| .pure-form input border | 1px solid #ccc | Borde predeterminado del campo de entrada. |
| .pure-form input radius | 4px | La forma del campo de entrada difiere del radio de las esquinas del botón. |
### Valores oficiales de las tablas

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| .pure-table border | 1px solid #cbcbcb | Borde exterior de la tabla. |
| .pure-table td / th padding | 0.5em 1em | Espaciado legible entre celdas. |
| .pure-table thead background | #e0e0e0 | Superficie de los encabezados de columna. |
| .pure-table-striped odd-row fill | #f2f2f2 | Franjas opcionales; este ejemplo usa líneas horizontales. |
| .pure-table-horizontal | Bottom borders only | Conserva la estructura de las filas sin separadores verticales. |
### Límites de la cuadrícula adaptable

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| sm | 35.5em | 568px con un valor predeterminado de 16px en el navegador. |
| md | 48em | 768px; la barra lateral pasa a ocupar una cuarta parte del ancho. |
| lg | 64em | 1024px. |
| xl | 80em | 1280px. |
| xxl | 120em | 1920px en la cuadrícula adaptable instalada de la versión 3.1.0. |
### Estilos originales del catálogo

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Body | 16px / 1.5 Arial, Helvetica, sans-serif | Tipografía explícita de la aplicación. |
| Page heading | 34px / 1.15; 28px on mobile | Jerarquía editorial original. |
| Section heading | 18px / 1.3 | Barra lateral y título de selección originales. |
| Content gutters | 24px desktop, 16px mobile | Relleno exterior original. |
| Focus outline | 3px solid #0078e7; offset 3px | Mejora de la aplicación sobre el degradado de foco predeterminado del botón. |
| Table minimum width | 540px | Conserva el significado de las columnas en una región con desplazamiento local. |
## Guía completa de sistema de diseño de Pure CSS

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

## sistema de diseño de Pure CSS: un pequeño conjunto de módulos de CSS

### Un pequeño conjunto de módulos de CSS

> Pure ofrece normalización básica, cuadrículas, botones, formularios, menús y tablas. Este catálogo utiliza el paquete compilado y un archivo independiente para la cuadrícula adaptable. No importa un framework, proveedor ni entorno de ejecución de widgets de JavaScript. El filtrado, la ordenación y la selección son código de la aplicación que se muestra íntegramente arriba.

Esta distinción es importante al comparar Pure con una plataforma completa de componentes. Una clase pure-table aplica estilos a las celdas; no proporciona ordenación, paginación, virtualización ni semántica de selección. pure-button es una clase visual que puede aplicarse a un botón nativo. El ejemplo conserva los elementos semánticos subyacentes en lugar de esperar que los nombres de clase creen funcionalidades.

Consulta la especificación complementaria

## sistema de diseño de Pure CSS: valores literales de CSS, no un sistema de tokens inventado

### Valores literales de CSS, no un sistema de tokens inventado

Los estilos compilados de botones de Pure usan un relleno neutro #E6E6E6, un radio de dos píxeles y espaciado basado en em. El botón principal opcional es rgb(0,120,231) con texto blanco. Los campos de formulario tienen un radio de cuatro píxeles y su propio espaciado. La referencia del sistema muestra estas diferencias reales, en vez de normalizarlas en una escala de radios compartida ficticia.

Este catálogo añade una paleta de aplicación deliberadamente sobria: texto azul grisáceo oscuro, separadores neutros y un resumen de selección pálido. No son colores oficiales de la marca Pure. No hay un control para activar el modo oscuro porque esta versión del ejemplo no implementa una paleta alternativa completa para la aplicación. Un selector de tema tendría que abarcar a la vez formularios, encabezados de tabla, bordes, texto y estados de foco.

Consulta la especificación complementaria

## sistema de diseño de Pure CSS: la tipografía y el espaciado son responsabilidad de la aplicación

### La tipografía y el espaciado son responsabilidad de la aplicación

La capa original de la página elige Arial/Helvetica a dieciséis píxeles, con una altura de línea de 1.5, un encabezado de 34px y títulos de sección de 18px. En pantallas estrechas, el encabezado pasa a 28px. Son decisiones explícitas, no una afirmación de que Pure prescriba una escala editorial. El ejemplo de CSS incluye todos los valores necesarios para reproducir la composición.

La cuadrícula de Pure ajusta la representación del texto y el espaciado entre letras en su contenedor para gestionar las unidades en línea. Las reglas de las unidades restablecen el comportamiento normal del texto. El catálogo también asigna su familia tipográfica a las unidades de la cuadrícula para evitar cambios de fuente inesperados en la barra lateral y los resultados. El relleno de la aplicación se aplica dentro de las unidades, con el tamaño de caja border-box, para conservar intactos los anchos fraccionarios.

Consulta la especificación complementaria

## sistema de diseño de Pure CSS: las proporciones adaptables requieren el módulo adaptable

### Las proporciones adaptables requieren el módulo adaptable

La barra lateral combina pure-u-1 con pure-u-md-1-4; los resultados combinan pure-u-1 con pure-u-md-3-4. Al principio, ambos ocupan todo el ancho. En el límite del medio md, 48em, pasan a ocupar una cuarta parte y tres cuartas partes, respectivamente. Así, el filtro mantiene una proporción fija y legible sin cálculos de maquetación personalizados de JavaScript.

El paquete principal pure-min.css no incluye las clases de consultas de medios de la cuadrícula adaptable. Si se omite grids-responsive-min.css, los modificadores md no surtirán efecto. La configuración carga ambos archivos explícitamente. En pantallas móviles, la barra lateral aparece antes que la tabla y se elimina el borde de los resultados, lo que crea un único orden de lectura continuo.

Consulta la especificación complementaria

## Pure CSS El filtrado en el sistema de diseño es independiente de la selección

### El filtrado es independiente de la selección

El formulario apilado tiene un campo de búsqueda con etiqueta, un selector de categoría y una casilla de disponibilidad. Cada cambio en los campos vuelve a representar las filas visibles según las tres condiciones. Se evita el envío del formulario para que pulsar Intro en el campo de búsqueda no redirija a otra página. «Borrar filtros» ejecuta el restablecimiento nativo y vuelve a representar la lista después de que el navegador restaura los valores predeterminados.

La selección se guarda en un Set de IDs estables de kits. Ocultar un elemento seleccionado con un filtro no lo elimina de ese Set. Por eso, la lista de revisión, siempre visible, sigue siendo la referencia definitiva de los elementos seleccionados. Este comportamiento se explica junto al recuento de selecciones; de lo contrario, el usuario podría confundir las filas ocultas por los filtros con equipos que ya no están seleccionados.

1. Selecciona una grabadora o cámara disponible.

2. Filtra otra categoría y comprueba que el elemento seleccionado siga apareciendo en la lista de revisión.

3. Borra la selección para eliminar todos los IDs seleccionados, independientemente de los filtros.

Consulta la especificación complementaria

## Pure CSS Conserva el significado de la tabla del sistema de diseño en pantallas estrechas

### Conserve el significado de las tablas en pantallas estrechas

La tabla utiliza los elementos caption, thead y tbody, y atributos scope en los encabezados de columna. El encabezado «Equipo» contiene un botón nativo que invierte el orden de los nombres. Su elemento th principal recibe aria-sort=ascending o descending, en consonancia con la flecha visible. Todas las filas conservan la misma estructura de columnas al ordenar.

Un ancho mínimo de 540px conserva el significado de «Seleccionar», «Equipo», «Categoría» y «Disponibilidad». En pantallas estrechas, solo la región etiquetada de la tabla se desplaza horizontalmente. Se puede enfocar con el teclado y muestra un contorno de foco visible. La página no se ensancha. Este tratamiento está pensado específicamente para tablas de datos, en lugar de forzar cada fila a convertirse en una tarjeta sin relación visual con las demás.

Consulta la especificación complementaria

## Pure CSS Los estados deshabilitado, vacío y de foco necesitan un comportamiento real en el sistema de diseño

### Los estados deshabilitado, vacío y de foco necesitan un comportamiento real

Los elementos prestados permanecen en la lista para explicar su disponibilidad, pero no se pueden seleccionar: sus casillas de verificación nativas están deshabilitadas. «Borrar selección» también se deshabilita cuando el Set está vacío. La regla de opacidad de Pure ayuda a comunicar el aspecto deshabilitado, pero el atributo HTML es lo que impide la activación.

Si un filtro no devuelve resultados, se muestra un mensaje específico de lista vacía y se conservan los encabezados. El recuento de resultados es una región de estado cortés. La hoja de estilos original añade un contorno marcado para el foco visible, ya que el tratamiento predeterminado del foco de los botones de Pure usa un degradado y restablece el contorno. En esta herramienta interactiva, resulta útil ofrecer un indicador de teclado más claro.

- Las casillas deshabilitadas explican qué kits no están disponibles sin eliminar sus filas.

- El estado vacío explica cómo recuperarse borrando los filtros.

- Los contornos de foco abarcan botones, campos de entrada, selectores y la región desplazable.

Consulta la especificación complementaria

## Pure CSS Instala y reproduce el catálogo completo del sistema de diseño

### Instala y reproduce el catálogo completo

Instala purecss@3.1.0, copia pure-min.css y grids-responsive-min.css en el directorio local de recursos e inclúyelos en ese orden antes de style.css. El cuerpo completo, el script de la aplicación y CSS se proporcionan más arriba. Un servidor estático puede servir los archivos resultantes; el catálogo no requiere un entorno de ejecución de compilación.

Los módulos del paquete también están disponibles por separado si el tamaño del paquete requiere una selección más limitada. Al reducir CSS, mantén la coherencia entre las dependencias base y las de cuadrícula. No copies solo una hoja de estilos de tabla y des por sentado que las clases de formularios o botones seguirán teniendo estilo. Este ejemplo prioriza una configuración completa y reproducible frente a un paquete parcial sin explicación.

Consulta la especificación complementaria

## Pure CSS Elige módulos CSS del sistema de diseño sin perder sus dependencias

### Elija módulos de CSS sin perder sus dependencias

El paquete de estilos compilado aplica estilos a los botones, formularios y tablas del catálogo, mientras que grids-responsive-min.css proporciona las fracciones con puntos de interrupción. Eliminar el archivo adaptable no produce ningún error: las clases md simplemente dejan de cambiar la distribución. Comprueba cómo se comportan las columnas al reducir los módulos importados.

Las unidades de cuadrícula también restauran el comportamiento del texto que el contenedor de cuadrícula ajusta para su disposición en línea. Asigna la fuente de la aplicación a las unidades y aplica el relleno dentro de ellas con un tamaño de caja border-box. Si más adelante el catálogo incorpora paginación, conserva la selección mediante IDs estables en el estado de la aplicación; ni CSS de la tabla ni una fracción de cuadrícula implementan ese comportamiento.

Consulta la especificación complementaria

## Pure CSS Ejemplos de componentes del sistema de diseño

### Marcado del catálogo con módulos de Pure

Distribución adaptable de un cuarto y tres cuartos, formulario apilado y tabla con líneas horizontales.

```
<main class="catalog"><header><p class="eyebrow">PURE CSS / LENDING DESK</p><h1>A small equipment catalog.</h1><p>Find a kit, select available items, and review the local selection.</p></header><div class="pure-g"><aside class="pure-u-1 pure-u-md-1-4"><div class="sidebar"><h2>Refine the list</h2><form class="pure-form pure-form-stacked" id="filters"><label for="query">Equipment name</label><input id="query" type="search" placeholder="Camera, recorder…"><label for="kind">Category</label><select id="kind"><option value="all">All categories</option><option>Camera</option><option>Audio</option><option>Lighting</option></select><label class="pure-checkbox"><input id="available" type="checkbox"> Available only</label><button class="pure-button" type="reset">Clear filters</button></form><div class="selection"><strong id="selected-count">0 items selected</strong><p>Selection is kept when a filter hides a row.</p><button id="clear-selection" class="pure-button" disabled>Clear selection</button></div></div></aside><section class="pure-u-1 pure-u-md-3-4"><div class="results"><p id="count" role="status"></p><div class="table-scroll" tabindex="0" role="region" aria-label="Equipment table, scroll horizontally on narrow screens"><table class="pure-table pure-table-horizontal"><caption>Studio lending kits — local sample records</caption><thead><tr><th scope="col">Select</th><th scope="col" aria-sort="ascending"><button id="sort" class="sort">Equipment ↑</button></th><th scope="col">Category</th><th scope="col">Availability</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No matching equipment. Clear the filters to see all six kits.</p><section class="summary" aria-labelledby="selection-title"><h2 id="selection-title">Selected for review</h2><ul id="selection-list"><li>No equipment selected.</li></ul><p>This is a browsing example. Selecting a kit does not reserve it.</p></section></div></section></div></main>
```

Referencia de código

- grids-responsive-min.css se carga por separado.

- Las casillas de los elementos prestados usan disabled, no solo un estilo atenuado.

### Estado de filtros, ordenación y selección

El comportamiento original representa seis registros de muestra fijos y mantiene la selección mediante IDs estables.

```
const data=[{id:'c1',name:'Compact camera kit',kind:'Camera',available:true},{id:'c2',name:'Cinema camera kit',kind:'Camera',available:false},{id:'a1',name:'Field recorder',kind:'Audio',available:true},{id:'a2',name:'Wireless microphone pair',kind:'Audio',available:true},{id:'l1',name:'Portable LED panel',kind:'Lighting',available:false},{id:'l2',name:'Softbox lighting kit',kind:'Lighting',available:true}];const selected=new Set();let ascending=true;const $=id=>document.getElementById(id);
function selection(){ $('selected-count').textContent=selected.size+(selected.size===1?' item selected':' items selected');$('clear-selection').disabled=!selected.size;const list=$('selection-list');list.replaceChildren();for(const x of data.filter(x=>selected.has(x.id))){const li=document.createElement('li');li.textContent=x.name;list.append(li);}if(!selected.size){const li=document.createElement('li');li.textContent='No equipment selected.';list.append(li);}}
function render(){const query=$('query').value.toLowerCase().trim();const visible=data.filter(x=>x.name.toLowerCase().includes(query)&&($('kind').value==='all'||x.kind===$('kind').value)&&(!$('available').checked||x.available)).sort((a,b)=>(ascending?1:-1)*a.name.localeCompare(b.name));$('count').textContent=visible.length+' of '+data.length+' kits shown';$('empty').hidden=visible.length!==0;$('rows').replaceChildren();for(const x of visible){const tr=document.createElement('tr');const choice=document.createElement('td');const input=document.createElement('input');input.type='checkbox';input.disabled=!x.available;input.checked=selected.has(x.id);input.setAttribute('aria-label','Select '+x.name);input.addEventListener('change',()=>{input.checked?selected.add(x.id):selected.delete(x.id);selection()});choice.append(input);tr.append(choice);for(const value of [x.name,x.kind,x.available?'Available':'On loan']){const td=document.createElement('td');td.textContent=value;tr.append(td);}$('rows').append(tr);}selection();}
$('filters').addEventListener('input',render);$('filters').addEventListener('submit',e=>e.preventDefault());$('filters').addEventListener('reset',()=>setTimeout(render,0));$('sort').addEventListener('click',()=>{ascending=!ascending;$('sort').textContent='Equipment '+(ascending?'↑':'↓');$('sort').parentElement.setAttribute('aria-sort',ascending?'ascending':'descending');render()});$('clear-selection').addEventListener('click',()=>{selected.clear();render()});render();
```

Referencia de código

- El filtrado no descarta silenciosamente los IDs seleccionados.

- La búsqueda introducida por el usuario nunca se convierte en HTML.

### Tipografía y foco de la aplicación CSS

Una capa visual completa que complementa la biblioteca, intencionadamente minimalista.

```
*{box-sizing:border-box}body{font:16px/1.5 Arial,Helvetica,sans-serif;color:#263238;background:#fff}.catalog{max-width:1120px;margin:auto;padding:32px 24px}h1{font-size:34px;line-height:1.15;letter-spacing:-.03em;margin:12px 0}h2{font-size:18px;line-height:1.3}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#435c68}header{border-bottom:3px solid #263238;padding-bottom:24px;margin-bottom:24px}.pure-g [class*=pure-u]{font-family:Arial,Helvetica,sans-serif}.sidebar{padding-right:24px}.results{padding-left:24px;border-left:1px solid #d7dfe3}.pure-form input[type=search],.pure-form select{width:100%;max-width:100%}.pure-form label{margin-top:16px}.selection{border-top:1px solid #d7dfe3;margin-top:28px;padding-top:20px;font-size:14px}.table-scroll{overflow:auto}table{width:100%;min-width:540px}.pure-table caption{text-align:left;font-style:normal;color:#52616a}.sort{border:0;background:none;padding:0;color:inherit;text-align:left;font-weight:700;cursor:pointer}.summary{padding:16px 20px;background:#f3f6f7;margin-top:24px}.summary p{font-size:14px;color:#52616a}.pure-button:focus-visible,.sort:focus-visible,.table-scroll:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #0078e7;outline-offset:3px}#empty{padding:20px;border:1px dashed #83919a}@media(max-width:767px){.catalog{padding:24px 16px}h1{font-size:28px}.sidebar{padding:0}.results{padding:24px 0 0;border-left:0}.selection{margin-bottom:24px}}
```

Referencia de código

- Estos valores son elecciones originales de la aplicación, no tokens oficiales de Pure.

## Pure CSS Configuración del agente de IA del sistema de diseño

### Punto de partida para la implementación

Guarda los ejemplos de CSS y JavaScript como style.css y app.js. Las clases de medios de la cuadrícula adaptable se encuentran en un archivo independiente. La vista previa sin conexión integra las dos hojas de estilos oficiales y el código original de la aplicación. El contenedor HTML incluye todo el marcado del cuerpo; guarda los ejemplos de interacción y CSS proporcionados con los nombres de archivo que se indican aquí.

```
<!-- npm install purecss@3.1.0
mkdir -p assets
cp node_modules/purecss/build/pure-min.css assets/
cp node_modules/purecss/build/grids-responsive-min.css assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Equipment catalog</title>
<link rel="stylesheet" href="assets/pure-min.css">
<link rel="stylesheet" href="assets/grids-responsive-min.css">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script></head>
<body><main class="catalog"><header><p class="eyebrow">PURE CSS / LENDING DESK</p><h1>A small equipment catalog.</h1><p>Find a kit, select available items, and review the local selection.</p></header><div class="pure-g"><aside class="pure-u-1 pure-u-md-1-4"><div class="sidebar"><h2>Refine the list</h2><form class="pure-form pure-form-stacked" id="filters"><label for="query">Equipment name</label><input id="query" type="search" placeholder="Camera, recorder…"><label for="kind">Category</label><select id="kind"><option value="all">All categories</option><option>Camera</option><option>Audio</option><option>Lighting</option></select><label class="pure-checkbox"><input id="available" type="checkbox"> Available only</label><button class="pure-button" type="reset">Clear filters</button></form><div class="selection"><strong id="selected-count">0 items selected</strong><p>Selection is kept when a filter hides a row.</p><button id="clear-selection" class="pure-button" disabled>Clear selection</button></div></div></aside><section class="pure-u-1 pure-u-md-3-4"><div class="results"><p id="count" role="status"></p><div class="table-scroll" tabindex="0" role="region" aria-label="Equipment table, scroll horizontally on narrow screens"><table class="pure-table pure-table-horizontal"><caption>Studio lending kits — local sample records</caption><thead><tr><th scope="col">Select</th><th scope="col" aria-sort="ascending"><button id="sort" class="sort">Equipment ↑</button></th><th scope="col">Category</th><th scope="col">Availability</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No matching equipment. Clear the filters to see all six kits.</p><section class="summary" aria-labelledby="selection-title"><h2 id="selection-title">Selected for review</h2><ul id="selection-list"><li>No equipment selected.</li></ul><p>This is a browsing example. Selecting a kit does not reserve it.</p></section></div></section></div></main>
</body></html>
```

### Una instrucción para tu proyecto

```
Crea la implementación a partir del catálogo de equipos Pure CSS 3.1.0 suministrado y carga tanto pure-min.css como grids-responsive-min.css. Conserva las unidades responsive de cuadrícula de un cuarto y tres cuartos, los filtros etiquetados, una tabla semántica ordenable y su región de desplazamiento horizontal contenida. Combina los filtros de búsqueda, categoría y disponibilidad sin borrar los IDs seleccionados. Mantén deshabilitadas las casillas de los artículos prestados, actualiza aria-sort al invertir el orden de la columna Equipo y conserva los artículos seleccionados en la lista de revisión cuando los filtros los oculten. La selección es local y no debe presentarse como una reserva.
```

## Fuentes y alcance del sistema de diseño Pure CSS

Pure CSS 3.1.0. Los valores de los selectores son valores oficiales del paquete; la tipografía, los colores, el espaciado y el comportamiento de la aplicación del catálogo son originales. No se realizan reservas.

- Repositorio oficial Límites entre módulos, archivos de compilación, inclusión de cuadrícula responsive y licencia.

- Implementación de cuadrícula Contenedor de cuadrícula y manejo del texto de las unidades.

- Origen del paquete Origen a nivel de selector utilizado para verificar los módulos instalados de la versión 3.1.0.

## Recursos relacionados con el sistema de diseño Pure CSS

### Quasar

Un flujo guiado nativo de Quasar con valores reales de marca y espaciado, validación de QForm, un creador de informes en tres pasos, opciones de formato con botones de radio y una agenda dinámica de cuarenta y cinco minutos.

### React Native Elements

Crea un compositor completo de planes de concentración con React Native Elements 5.0.0: roles de tema reales, entradas y selecciones controladas, validación, confirmación local y una compilación web probada.

### React Suite

Un calendario de revisión nativo de React Suite con variables verificadas de CSS v6, marcadores en las celdas de fecha, una agenda para el día seleccionado, validación modal y reglas explícitas para la programación local.


- [Referencia de implementación](https://github.com/pure-css/pure)
- [Fuente](https://github.com/pure-css/pure)
- [Consulta la especificación complementaria](https://github.com/pure-css/pure)
- [Referencia de código](https://github.com/pure-css/pure)
- [Repositorio oficial Límites entre módulos, archivos de compilación, inclusión de cuadrícula responsive y licencia.](https://github.com/pure-css/pure)
- [Implementación de cuadrícula Contenedor de cuadrícula y manejo del texto de las unidades.](https://github.com/pure-css/pure/blob/main/src/grids/css/grids-core.css)
- [Origen del paquete Origen a nivel de selector utilizado para verificar los módulos instalados de la versión 3.1.0.](https://github.com/pure-css/pure/tree/main/src)