# Sistema de design Pure CSS

## Prévia da interface do sistema de design Pure CSS

Filtre seis kits, ordene pelo nome, selecione os itens disponíveis e mantenha a seleção ao alterar os filtros.

## 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.

### Valores oficiais de botões e formulários

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| .pure-button padding | 0.5em 1em | Dimensiona-se de acordo com o tamanho de texto herdado pelo botão. |
| .pure-button radius | 2px | Formato padrão dos cantos dos botões. |
| .pure-button background | #E6E6E6 | Preenchimento neutro do botão. |
| .pure-button-primary background | rgb(0, 120, 231) | Preenchimento primário/selecionado opcional. |
| .pure-button disabled opacity | 0.40 | Use também o atributo disabled para controlar o comportamento. |
| .pure-form input padding | 0.5em 0.6em | Preenchimento comum de campo de texto. |
| .pure-form input border | 1px solid #ccc | Borda padrão do campo de entrada. |
| .pure-form input radius | 4px | O formato do campo de entrada é diferente do raio do botão. |
### Valores oficiais de tabelas

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| .pure-table border | 1px solid #cbcbcb | Borda externa da tabela. |
| .pure-table td / th padding | 0.5em 1em | Espaçamento entre células para facilitar a leitura. |
| .pure-table thead background | #e0e0e0 | Superfície do cabeçalho da coluna. |
| .pure-table-striped odd-row fill | #f2f2f2 | Listras opcionais; neste exemplo, são usadas linhas horizontais. |
| .pure-table-horizontal | Bottom borders only | Mantém a estrutura das linhas sem separadores verticais. |
### Limites da grade responsiva

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| sm | 35.5em | 568px com o padrão do navegador de 16px. |
| md | 48em | 768px; a barra lateral passa a ocupar um quarto da largura. |
| lg | 64em | 1024px. |
| xl | 80em | 1280px. |
| xxl | 120em | 1920px na grade responsiva instalada da versão 3.1.0. |
### Estilo original do catálogo

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Body | 16px / 1.5 Arial, Helvetica, sans-serif | Tipografia explícita da aplicação. |
| Page heading | 34px / 1.15; 28px on mobile | Hierarquia editorial original. |
| Section heading | 18px / 1.3 | Barra lateral e título de seleção originais. |
| Content gutters | 24px desktop, 16px mobile | Preenchimento externo original. |
| Focus outline | 3px solid #0078e7; offset 3px | Aprimoramento da aplicação sobre o gradiente de foco padrão do botão. |
| Table minimum width | 540px | Preserva o significado das colunas em uma área com rolagem local. |
## Guia completo do sistema de design Pure CSS

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## 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.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

## 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.

1. Selecione um gravador ou uma câmera disponível.

2. Filtre por outra categoria e confira se o item selecionado continua na lista de revisão.

3. Limpe a seleção para remover todos os IDs selecionados, independentemente dos filtros.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

## Pure CSS Instale e reproduza o catálogo completo do sistema de design

### Instale e reproduza o catálogo completo

Instale purecss@3.1.0, 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.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

## Pure CSS Exemplos de componentes do sistema de design

### Marcação do catálogo com módulos Pure

Layout responsivo de um quarto/três quartos, formulário empilhado e tabela com divisórias horizontais.

```
<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>
```

Referência de código

- 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.

```
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();
```

Referência de código

- A filtragem não descarta silenciosamente os IDs selecionados.

- O que o usuário digita na pesquisa nunca se transforma em HTML.

### Tipografia e foco da aplicação CSS

Uma camada visual completa que complementa a biblioteca intencionalmente 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}}
```

Referência de código

- Esses valores são escolhas originais da aplicação, não tokens oficiais do Pure.

## 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.

```
<!-- 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>
```

### Um prompt para seu projeto

```
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.
```

## 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.

- Repositório oficial Limites entre módulos, arquivos de build, inclusão da grade responsiva e licença.

- Implementação da grade Contêiner da grade e tratamento de texto das unidades.

- Código-fonte do pacote Código-fonte no nível do seletor, usado para verificar os módulos instalados na versão 3.1.0.

## Pure CSS Recursos relacionados do sistema de design

### Quasar

Um fluxo guiado nativo do Quasar, com valores reais de marca e espaçamento, validação do QForm, um criador de brief em três etapas, opções de formato por botões de opção e uma agenda dinâmica de quarenta e cinco minutos.

### React Native Elements

Crie um compositor completo de plano de foco com React Native Elements 5.0.0: funções reais de tema, campos e seleções controlados, validação, confirmação local e uma compilação web testada.

### React Suite

Um calendário de revisão nativo do React Suite, com variáveis CSS verificadas da versão 6, marcadores nas células de data, agenda do dia selecionado, validação em modal e regras explícitas para agendamentos locais.


- [Referência de implementação](https://github.com/pure-css/pure)
- [Fonte](https://github.com/pure-css/pure)
- [Consulte a especificação de apoio](https://github.com/pure-css/pure)
- [Referência de código](https://github.com/pure-css/pure)
- [Repositório oficial Limites entre módulos, arquivos de build, inclusão da grade responsiva e licença.](https://github.com/pure-css/pure)
- [Implementação da grade Contêiner da grade e tratamento de texto das unidades.](https://github.com/pure-css/pure/blob/main/src/grids/css/grids-core.css)
- [Código-fonte do pacote Código-fonte no nível do seletor, usado para verificar os módulos instalados na versão 3.1.0.](https://github.com/pure-css/pure/tree/main/src)