Pure CSS es una hoja de estilos modular para cuadrículas, formularios, botones, menús y tablas, sin un entorno de ejecución para widgets. Esta guía muestra cómo se combinan su módulo opcional de cuadrícula adaptable y los elementos semánticos nativos en un catálogo de equipos filtrable, con la ordenación y la selección implementadas explícitamente.
Módulos oficiales de Pure CSS 3.1.0 y de cuadrícula adaptable; JavaScript original sin dependencias. · Referencia de implementación
02
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.
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.
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.
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.
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.
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.
Selecciona una grabadora o cámara disponible.
Filtra otra categoría y comprueba que el elemento seleccionado siga apareciendo en la lista de revisión.
Borra la selección para eliminar todos los IDs seleccionados, independientemente de los filtros.
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.
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.
Pure CSS Instala y reproduce el catálogo completo del sistema de diseño
Instala y reproduce el catálogo completo
Instala [email protected], 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.
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.
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.
javascript
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();
Estos valores son elecciones originales de la aplicación, no tokens oficiales de Pure.
04
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í.
HTML
<!-- npm install [email protected]
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
Instrucción para el agente
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.
05
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.
