Pure CSS é uma folha de estilos modular para grades, formulários, botões, menus e tabelas, sem um runtime de widgets. Este guia mostra como o módulo opcional de grade responsiva e os elementos semânticos nativos se combinam em um catálogo de equipamentos filtrável, com ordenação e seleção implementadas explicitamente.
Módulos oficiais de grade do Pure CSS 3.1.0 e responsivos; JavaScript original sem dependências. · Referência de implementação
02
Referência de design do sistema de design Pure CSS
Módulos compilados do pacote Pure CSS 3.1.0. Estes são valores literais de seletores, não um API de design tokens nomeado: Pure não publica um tema com variáveis CSS semânticas como Chakra ou Pico. A aplicação acrescenta sua própria tipografia, espaçamento de layout e contorno de foco mais destacado.
Sistema de design Pure CSS: um pequeno conjunto de módulos CSS
Um pequeno conjunto de módulos CSS
Pure oferece normalização básica, grades, botões, formulários, menus e tabelas. Este catálogo usa o rollup compilado do pacote e um arquivo separado de grade responsiva. Ele não importa um framework, provedor ou runtime de widgets JavaScript. A filtragem, a ordenação e a seleção são implementadas no código da aplicação, exibido por completo acima.
Essa distinção é importante ao comparar Pure com uma plataforma completa de componentes. Uma classe pure-table fornece estilos às células; ela não oferece ordenação, paginação, virtualização nem semântica de seleção. pure-button é uma classe visual que pode ser aplicada a um botão nativo. O exemplo mantém os elementos semânticos subjacentes, sem esperar que os nomes das classes criem comportamento.
Valores literais de CSS do sistema de design Pure CSS, não um sistema de tokens inventado
Valores literais de CSS, não um sistema de tokens inventado
Os estilos compilados dos botões de Pure usam preenchimento neutro #E6E6E6, raio de dois pixels e preenchimento baseado em em. O botão primário opcional usa rgb(0,120,231) com texto branco. Os campos de formulário têm raio de quatro pixels e preenchimento próprio. A referência do sistema expõe essas diferenças reais, em vez de normalizá-las em uma escala compartilhada de raios que não existe.
Este catálogo adota uma paleta de aplicação intencionalmente discreta: texto em azul-acinzentado escuro, divisórias neutras e um resumo de seleção em tom claro. Essas escolhas não são cores oficiais da marca Pure. Não há opção para alternar para o modo escuro, pois esta versão do exemplo não implementa uma paleta alternativa completa para a aplicação. Uma troca de tema precisaria abranger formulários, cabeçalhos da tabela, bordas, texto e estados de foco em conjunto.
Pure CSS Tipografia e espaçamento do sistema de design pertencem à aplicação
Tipografia e espaçamento pertencem à aplicação
A camada original da página define Arial/Helvetica a dezesseis pixels, com altura de linha de 1.5, título de 34px e títulos de seção de 18px. Em telas estreitas, o título passa a 28px. São escolhas explícitas, não uma afirmação de que Pure determina uma escala editorial. Todos os valores necessários para reproduzir a composição estão no exemplo CSS.
A grade do Pure ajusta a renderização do texto e o espaçamento entre letras no contêiner da grade para lidar com unidades em linha. As regras das unidades restauram o comportamento normal do texto. O catálogo também define a família tipográfica nas unidades da grade, evitando uma mudança inesperada de fonte na barra lateral e nos resultados. O preenchimento da aplicação fica dentro das unidades, com dimensionamento border-box, para preservar as larguras fracionárias.
Pure CSS Frações responsivas do sistema de design exigem o módulo responsivo
Frações responsivas exigem o módulo responsivo
A barra lateral combina pure-u-1 com pure-u-md-1-4; os resultados combinam pure-u-1 com pure-u-md-3-4. Inicialmente, ambos ocupam a largura total. No ponto de quebra md, em 48em, passam a ocupar um quarto e três quartos da largura. Assim, o filtro mantém uma proporção legível sem cálculos de layout personalizados em JavaScript.
O arquivo agregado principal pure-min.css não inclui as classes de media query da grade responsiva. Se grids-responsive-min.css for esquecido, esses modificadores md não terão efeito. A configuração carrega os dois arquivos explicitamente. Em telas pequenas, a barra lateral aparece antes da tabela e a borda dos resultados é removida, criando uma sequência de leitura contínua.
Pure CSS No sistema de design, filtrar é diferente de selecionar
Filtrar é diferente de selecionar
O formulário empilhado tem um campo de pesquisa com rótulo, um seletor de categoria e uma caixa de seleção de disponibilidade. Cada alteração nos campos renderiza novamente as linhas visíveis usando as três condições. O envio do formulário é impedido para que pressionar Enter no campo de pesquisa não leve o usuário a outra página. Limpar filtros chama o reset nativo e renderiza novamente a lista depois que o navegador restaura os valores padrão.
A seleção é armazenada em um Set de IDs estáveis dos kits. Ocultar um item selecionado com um filtro não o remove desse Set. Portanto, a lista de revisão, sempre visível, continua sendo a referência do que está selecionado. Esse comportamento é explicado ao lado da contagem de itens selecionados; caso contrário, o usuário poderia confundir itens ocultos pelo filtro com equipamentos desmarcados.
Selecione um gravador ou uma câmera disponível.
Filtre por outra categoria e confira se o item selecionado continua na lista de revisão.
Limpe a seleção para remover todos os IDs selecionados, independentemente dos filtros.
Pure CSS Preserve o significado da tabela em telas estreitas no sistema de design
Preserve o significado da tabela em telas estreitas
A tabela usa caption, thead e tbody, além dos atributos scope nos cabeçalhos das colunas. O cabeçalho Equipamento contém um botão nativo que inverte a ordem dos nomes. Seu elemento pai, th, recebe aria-sort=ascending ou descending, em correspondência com a seta visível. Todas as linhas mantêm a mesma estrutura de colunas durante a ordenação.
A largura mínima de 540px preserva o significado de Seleção, Equipamento, Categoria e Disponibilidade. Em telas estreitas, somente a região identificada da tabela rola horizontalmente. Essa região pode receber foco pelo teclado e exibe um contorno de foco visível. A página em si não fica mais larga. Essa é uma solução intencional para tabelas de dados, em vez de forçar cada linha a se transformar em um cartão visualmente desconexo.
Pure CSS Estados desativados, vazios e de foco precisam ter comportamento real no sistema de design
Estados desativados, vazios e de foco precisam ter comportamento real
Os itens emprestados permanecem na lista para explicar sua disponibilidade, mas não podem ser selecionados: suas caixas de seleção nativas ficam desativadas. Limpar a seleção também fica desativado quando o Set está vazio. A regra de opacidade do Pure ajuda a comunicar o estado desativado, mas é o atributo HTML que impede a ativação.
Quando um filtro não retorna resultados, uma mensagem específica de estado vazio é exibida e os cabeçalhos são mantidos. A contagem de resultados é uma região de status educada. A folha de estilos original adiciona um contorno de foco visível e destacado, pois o estilo padrão de foco dos botões do Pure usa um gradiente e redefine o contorno; nessa ferramenta funcional, um indicador de teclado mais nítido é útil.
As caixas de seleção desativadas explicam quais kits estão indisponíveis sem remover suas linhas.
O estado vazio explica como recuperar os resultados limpando os filtros.
Os contornos de foco abrangem botões, campos de entrada, seletores e a região de rolagem.
Pure CSS Instale e reproduza o catálogo completo do sistema de design
Instale e reproduza o catálogo completo
Instale [email protected], copie pure-min.css e grids-responsive-min.css para o diretório local de recursos e inclua-os nessa ordem, antes de style.css. O corpo completo, o script da aplicação e CSS são fornecidos acima. Um servidor estático pode servir os arquivos resultantes; o catálogo não exige um ambiente de build.
Os módulos do pacote também estão disponíveis separadamente, caso o tamanho do pacote exija uma seleção mais restrita. Ao reduzir CSS, mantenha coerentes as dependências básicas e da grade. Não copie apenas a folha de estilos da tabela e suponha que as classes de formulários ou botões continuarão estilizadas. O exemplo atual prioriza uma configuração completa e reproduzível, em vez de um pacote parcial sem explicação.
Pure CSS Escolha módulos CSS no sistema de design sem perder as dependências
Escolha módulos CSS sem perder suas dependências
O arquivo agregado compilado estiliza os botões, formulários e a tabela do catálogo, enquanto grids-responsive-min.css fornece as frações associadas aos pontos de quebra. Remover o arquivo responsivo não gera um erro: as classes md simplesmente deixam de alterar o layout. Ao reduzir os módulos importados, confira como as colunas se comportam.
As unidades da grade também restauram o comportamento do texto, ajustado pelo contêiner da grade para acomodar o layout em linha. Mantenha a definição da fonte da aplicação nas unidades e coloque o preenchimento dentro delas, usando dimensionamento border-box. Se o catálogo ganhar paginação, mantenha a seleção por IDs estáveis no estado da aplicação; nem a tabela CSS nem uma fração da grade implementa esse comportamento.
grids-responsive-min.css é carregado separadamente.
As caixas de seleção dos itens emprestados usam disabled, não apenas um estilo esmaecido.
Estado de filtro, ordenação e seleção
O comportamento original renderiza seis registros de exemplo fixos e mantém a seleção por ID estável.
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();
Esses valores são escolhas originais da aplicação, não tokens oficiais do Pure.
04
Sistema de design Pure CSS Configuração do agente de IA
Ponto de partida para implementação
Salve os exemplos CSS e JavaScript como style.css e app.js. As classes de media query da grade responsiva ficam em um arquivo separado. A prévia offline incorpora as duas folhas de estilos oficiais e o código original da aplicação. O contêiner HTML inclui toda a marcação do corpo; salve os exemplos fornecidos de interação e CSS com os nomes de arquivo indicados aqui.
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>
Um prompt para seu projeto
Prompt para agente de IA
Parta do catálogo de equipamentos fornecido em Pure CSS 3.1.0 e carregue pure-min.css e grids-responsive-min.css. Preserve as unidades responsivas da grade em proporção de um quarto/três quartos, os filtros com rótulos, uma tabela semântica ordenável e sua região de rolagem horizontal contida. Combine os filtros de pesquisa, categoria e disponibilidade sem limpar os IDs selecionados. Mantenha desativadas as caixas de seleção dos itens emprestados, atualize aria-sort ao inverter a coluna Equipamento e mantenha na lista de revisão os itens selecionados que forem ocultados pelos filtros. A seleção é local e não deve ser apresentada como uma reserva.
05
Pure CSS Fontes e escopo do sistema de design
Pure CSS 3.1.0. Os valores dos seletores são os valores oficiais do pacote; tipografia, cores, espaçamento e comportamento da aplicação no catálogo são originais. Nenhuma reserva é feita.
