Sistema de design Pico CSS.

Sistema de design Pico CSS: uma pequena superfície semântica de HTML

Uma pequena superfície semântica de HTML

O Pico aplica estilos a elementos HTML familiares, sem exigir que cada parágrafo, campo ou botão use uma longa lista de classes de componentes. Neste exemplo, article fornece o cartão de preferências, seu cabeçalho e rodapé definem os limites, e os rótulos contêm os controles nativos input/select. O elemento main usa container porque esta é a compilação padrão do Pico, não a distribuição separada sem classes.

Isso torna o Pico útil para ferramentas compactas e interfaces orientadas a conteúdo, nas quais os controles nativos do navegador são suficientes. Por si só, ele não transforma um formulário em uma aplicação. O JavaScript completo controla a amostra de leitura, o resumo de revisão e o resultado local, enquanto o navegador cuida da semântica básica dos campos.

Consulte a especificação de apoio

Sistema de design Pico CSS: variáveis de tema e funções semânticas

Variáveis de tema e funções semânticas

A função primária padrão não é uma única cor aplicada indiscriminadamente. O Pico separa os valores de texto primário, plano de fundo, estado ao passar o cursor, foco e inversão. A tabela de referência lista as definições reais para o tema claro, permitindo personalizar a marca sem perder essas relações. Os rótulos da sala de leitura usam a função de texto primário; os botões herdam o tratamento completo dos componentes do Pico.

O controle de aparência define data-theme em html. Um atributo explícito de tema claro ou escuro prevalece sobre a seleção automática do esquema. Se você removê-lo, o Pico poderá seguir a preferência de esquema do navegador. A demonstração usa um modo inicial explícito para manter a caixa de seleção sincronizada com a aparência visual. Ao introduzir uma paleta primária personalizada, substitua as definições dos dois esquemas; alterar apenas um valor raiz do tema claro não basta para criar um tema escuro completo.

Consulte a especificação de apoio

Sistema de design Pico CSS: a tipografia responsiva altera toda a escala

A tipografia responsiva altera toda a escala

O Pico altera o tamanho da fonte raiz em vários intervalos de largura da janela de visualização: 100% inicialmente, depois 106,25%, 112,5%, 118,75%, 125% e 131,25%. Com o padrão de 16px do navegador, esses valores correspondem a 16–21px. Como o espaçamento dos componentes usa rem, o layout confortável se expande junto com o texto. Portanto, um token descrito como um rem nem sempre equivale a dezesseis pixels.

O controle deslizante do exemplo altera apenas font-size de #sample para um percentual do tamanho herdado. Ele não modifica a variável raiz do Pico nem o nível de zoom do navegador. Essa distinção mantém estáveis os controles de configuração e deixa claro o escopo local da alteração. O valor nativo exibe o percentual selecionado. Os títulos mantêm os padrões do Pico: h1 tem 2rem e h2 tem 1,75rem.

Consulte a especificação de apoio

Sistema de design Pico CSS: largura de linha e composição de leitura

Largura de linha e composição de leitura

As três larguras de linha são escolhas próprias expressas em unidades ch. Elas definem uma largura máxima, sem forçar o texto a ocupar toda a coluna. Em dispositivos móveis, o exemplo pode ficar mais estreito do que o limite máximo selecionado; esse é o resultado esperado de uma largura máxima responsiva. Não é necessário rolar horizontalmente para respeitar uma preferência por linhas mais largas.

O layout de leitura personalizado tem duas colunas minmax e se reorganiza em uma coluna abaixo de 800px. Esse limite é específico desta composição, não um ponto de interrupção oficial do Pico. Os botões de revisão e redefinição usam o auxiliar de grade do Pico, enquanto o rodapé do diálogo usa uma linha flexível que permite quebra. Em telas estreitas, manter um painel de configurações legível é mais importante do que preservar o layout em duas colunas.

Consulte a especificação de apoio

Sistema de design Pico CSS: validação nativa com uma etapa útil de revisão

Validação nativa com uma etapa útil de revisão

O nome do perfil usa required e minlength, com um pequeno texto de ajuda associado. A validação nativa de restrições impede o envio de um valor vazio. O script também verifica o valor sem espaços nas extremidades, para que dois espaços não satisfaçam a regra da aplicação. Um evento invalid adiciona aria-invalid para ativar o estilo de erro do Pico; ao digitar, o erro personalizado e o atributo de inválido desatualizado são removidos.

Select e range são controles normais do navegador. Eles atualizam o exemplo de leitura imediatamente, enquanto Revisar perfil captura um objeto pendente separado. Esse instantâneo é o texto exibido no diálogo e os dados usados por Aplicar localmente, para que a confirmação não descreva um conjunto de valores e aplique outro por engano.

1. Deixe o nome do perfil vazio e tente selecionar Revisar perfil.
2. Digite um nome, escolha uma largura e altere o tamanho do texto do exemplo.
3. Revise o instantâneo, cancele para continuar editando ou aplique-o ao status local.

Consulte a especificação de apoio

Sistema de design Pico CSS: um modal de verdade, não apenas uma sobreposição estilizada

Um modal real, não apenas uma sobreposição estilizada

O Pico estiliza dialog e seu conteúdo article, mas não fornece JavaScript para a aplicação. Este exemplo chama HTMLDialogElement.showModal. O navegador coloca o diálogo na camada superior, torna inerte o restante do documento e permite fechá-lo nativamente com Escape. Definir apenas o atributo open criaria um comportamento diferente, não modal, que não é usado aqui.

O diálogo tem aria-labelledby apontando para o título. O botão de fechar tem um rótulo acessível explícito, enquanto Continuar editando e Aplicar localmente descrevem os dois resultados possíveis. Os dois botões de cancelamento chamam close sem alterar o status salvo. A aplicação registra o perfil pendente em um texto visível e fecha o diálogo; ela não grava em localStorage nem envia uma solicitação.

Consulte a especificação de apoio

Sistema de design Pico CSS: um disclosure nativo para explicações complementares

Um elemento nativo de divulgação para explicações complementares

O par details/summary explica quais controles afetam o exemplo e quais não afetam. Ele pode ser expandido de verdade sem JavaScript, pois esse comportamento pertence ao elemento HTML. O summary apresenta uma pergunta descritiva e continua operável pelo teclado. Como a explicação é conteúdo complementar, ela não interrompe o formulário principal com outro painel sempre aberto.

Não substitua details por um título estilizado apenas porque a captura de tela no estado fechado parece semelhante. Da mesma forma, o controle de aparência mantém type=checkbox com role=switch, de modo que tem um estado binário real. O Pico aplica estilos a estruturas semânticas; essas estruturas são responsáveis por boa parte do contrato de interação.

• article cria uma superfície de preferências visualmente agrupada.
• details e summary oferecem um disclosure nativo.
• O diálogo aberto com showModal estabelece um limite de revisão modal.

Consulte a especificação de apoio

Sistema de design Pico CSS: instale uma vez e mantenha o exemplo reproduzível

Instale uma vez e mantenha o exemplo reproduzível

O pacote padrão inclui um pico.min.css compilado. Copie-o para uma pasta local de assets, inclua-o antes das regras de layout da aplicação e carregue o app.js fornecido com defer. A marcação completa, CSS e o script são apresentados acima. Este exemplo não requer um provedor de framework, uma fonte de ícones nem um plugin de JavaScript de terceiros.

Use a folha de estilos padrão de forma consistente com as classes de container e grid. A versão sem classes parte de outras premissas de layout, e a versão condicional aplica estilos em escopos diferentes; trocar essas distribuições sem verificar a marcação não é uma otimização neutra. Se adicionar o Pico a um site existente, verifique como os seletores de elementos dele interagem com os estilos já aplicados a formulários e tipografia antes de usá-lo globalmente.

Consulte a especificação de apoio

Sistema de design Pico CSS: escolha a distribuição antes de adaptar a marcação

Escolha a distribuição antes de adaptar a marcação

Este exemplo usa a distribuição padrão e seus auxiliares de container e grid. A distribuição sem classes altera as premissas de layout, enquanto a distribuição condicional limita o escopo dos estilos do Pico. Trate a escolha da distribuição como uma decisão de integração, não como uma otimização intercambiável do tamanho dos arquivos.

Em um site existente, examine o alcance dos seletores de elementos sobre títulos, formulários, artigos e diálogos já existentes. O tamanho de fonte percentual do exemplo de leitura é uma substituição local e deve continuar restrito a esse escopo; alterar a escala raiz também modificaria o espaçamento e os controles do Pico baseados em rem. Ao decidir quais partes do documento herdam o tema, mantenha alinhados o atributo de aparência e os controles de preferência da aplicação.

Consulte a especificação de apoio

Sistema de design Pico CSS: exemplos 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}}