Inspecione a grade Bootstrap 3 de Poncho, as cores semânticas das ações e os painéis de serviço totalmente clicáveis em um diretório de atividades funcional.
Filtre a grade nativa de painéis, abra um detalhe e volte à atividade escolhida.
ar-poncho 2.0.320 CSS e Bootstrap 3.4.1; valores calculados verificados em 1440, 768 e 390px. As fontes alternativas estão definidas explicitamente.
| Nome / Regra | Valor / Configuração | Uso |
|---|---|---|
Package inspected | ar-poncho 2.0.320 | Não use o banner desatualizado v0.3.3 como versão do pacote. |
Font documentation | Lora headings / Montserrat body | Página atual de tipografia e importação de fontes de CSS; o README antigo do repositório ainda menciona Encode Sans. |
Body | 16px / 1.42857143; weight 500 | Medido com Bootstrap 3.4.1 e Poncho; a prévia local usa Arial. |
H1 | 2.5rem = 40px / 44px | O título da prévia permanece em 40px em dispositivos móveis. |
H2 / H3 | 2rem / 1.75rem | Títulos básicos; regras específicas dos painéis substituem estas. |
Panel H3 | 20px / 26px | Contexto do componente, CSS nativo medido. |
Lead | 18px / 1.2; weight 500 | Uma breve introdução, não um título. |
| Nome / Regra | Valor / Configuração | Uso |
|---|---|---|
--primary | #242C4F | Azul-marinho para links/ações principais. |
--secondary | #45658D | Azul secundário. |
--success | #2e7d33 | Papel de ação principal/sucesso; não é uma decoração arbitrária. |
--danger | #c62828 | Papel de ação destrutiva ou erro. |
--warning | #E7BA61 | Papel de alerta; ainda é preciso verificar o contraste do texto. |
--gray-base | #333333 | Texto padrão. |
--gray-lighter | #f2f2f2 | Superfície neutra clara. |
| Nome / Regra | Valor / Configuração | Uso |
|---|---|---|
Grid | 12 columns; 30px gutter | Bootstrap 3.4.1: preenchimento de 15px em cada lado da coluna. |
Breakpoints | 768 / 992 / 1200px | sm, md, lg; col-sm-4 cria três colunas a partir de 768px. |
Containers | 750 / 970 / 1170px | Nos breakpoints correspondentes; largura fluida abaixo de 768px. |
Panel body | 15px 20px | Substituição de componente de Poncho. |
Panel radius / spacing | 10px / 30px bottom margin | CSS nativo, como usado neste exemplo. |
Button | 16px; 8px 20px padding; 3px border; 30px radius | Estilo de ação arredondado de Poncho; não é a geometria padrão de Bootstrap. |
Section spacing | 30px default; 20px small; 40px large | Regras para section, section-sm e section-lg. |
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.
Poncho sobrepõe estilos de serviços públicos argentinos ao Bootstrap 3.4.1. A página de instalação ainda menciona uma direção experimental do Bootstrap 4; isso não torna as classes do Bootstrap 5 compatíveis com os exemplos publicados. Este recurso fixa ar-poncho 2.0.320 e Bootstrap 3.4.1 para permitir a análise conjunta da anatomia dos painéis e do comportamento responsivo.
O banner de CSS exibe v0.3.3, embora a versão instalada do pacote seja 2.0.320. Consulte o manifesto do pacote e o arquivo de lock, não apenas o banner. A prévia independente usa CSS nativo para painéis, botões e grade; a filtragem de atividades é original de JavaScript, não um componente de busca de Poncho.
A documentação atual de tipografia indica Lora para os títulos e Montserrat para o texto corrido. A folha de estilos baixada importa essas famílias, mas também contém declarações antigas de Encode Sans. O README de configuração do repositório ainda recomenda Encode Sans. Essa é uma inconsistência real entre versões e fontes; uma migração para produção deve examinar a cascata final da versão escolhida, em vez de presumir que todas as referências históricas descrevem um tema uniforme.
A prévia explicita suas fontes alternativas Arial e Georgia e remove a importação externa de fontes para garantir a confiabilidade offline. A geometria nativa continua visível: corpo de 16px, H1 de 40px e texto de introdução de 18px. Os títulos dos painéis usam tamanho próprio de 20px; portanto, copiar a escala básica de H3 para um cartão mudaria o componente.
A documentação dos botões distingue ações de link padrão, links secundários, uma ação principal ou de sucesso e ações destrutivas. btn-primary é a ação comum forte, no estilo de link; btn-link atende a ações secundárias. btn-success indica a ação principal de avanço, e as orientações limitam seu uso a uma por página. btn-danger é reservado para intenções destrutivas ou irreversíveis.
O navegador de atividades usa uma ação secundária para redefinir o filtro e uma ação principal para voltar ao detalhe expandido. Não há botão verde de inscrição porque não é possível inscrever ninguém. Nunca indique sucesso só porque alguém abriu um painel local.
Bootstrap 3 usa uma grade de 12 colunas com espaçamentos de 30px. Uma linha equilibra o preenchimento de 15px das colunas. col-sm-4 divide igualmente os três painéis de atividades a partir de 768px; abaixo dessa largura, eles passam a ocupar toda a largura. Nos breakpoints documentados, os contêineres adotam as larguras de 750px, 970px e 1170px.
Poncho acrescenta espaçamento próprio dos componentes: o corpo dos painéis usa 15px na vertical e 20px na horizontal, com uma margem inferior de 30px. Os botões usam raio de 30px, borda de 3px e preenchimento de 8px por 20px. Esses valores explicam a diferença visível em relação a uma página Bootstrap sem modificações; não os substitua por um tema genérico de cartões arredondados.
Os exemplos oficiais de painel envolvem todo o painel em uma âncora, com panel-body dentro dela e o título e o texto de apoio dentro desse corpo. Assim, uma entrada compacta de diretório forma um único destino coerente. Evite colocar outro link ou botão dentro dessa âncora: isso cria alvos interativos conflitantes.
O trecho de produção aponta para uma rota real de atividade. A prévia local, por sua vez, intercepta essa mesma âncora semântica para exibir o texto original do detalhe. Ela registra o elemento que abriu o detalhe, move o foco para a nova região e devolve o foco quando a pessoa fecha o detalhe. Esse comportamento da aplicação é acrescentado à marcação documentada do painel.
<div class="row">
<div class="col-sm-4">
<a class="panel panel-default" href="/activities/repair-cafe/">
<div class="panel-body">
<h3>Repair café</h3>
<p class="text-muted">Skills · Saturday, 10:00</p>
</div>
</a>
</div>
</div>O seletor de tipos de atividade tem um rótulo explícito e três categorias. Uma alteração oculta os contêineres dos painéis que não correspondem à seleção e atualiza uma mensagem de status com a nova contagem. A contagem representa as atividades visíveis, não o total de inscrições ou a disponibilidade. A redefinição restaura as três atividades e devolve o foco ao filtro.
Ao mudar de categoria, um detalhe aberto é fechado para que o conteúdo de uma atividade que agora está oculta não fique desconectado dos resultados. Abrir um painel não altera o filtro. Essas regras são intencionalmente simples, mas completas o bastante para testar a relação entre controles, resultados e detalhes.
A tabela oficial de botões demonstra a classe CSS para estado desabilitado. Um botão real de HTML que precise ser desabilitado também requer o atributo disabled; a classe sozinha não impede a ativação pelo teclado. Para links, avalie se ainda há um destino válido, em vez de tratar o estilo desabilitado como um modelo de interação completo.
Use um H1 e uma hierarquia coerente. Este diretório usa H3 nos painéis porque o detalhe expandido é uma seção H2; em uma lista independente, sem uma seção intermediária, adapte os níveis dos títulos à estrutura real do documento. Bibliotecas de ícones decorativos são opcionais e foram omitidas aqui, pois os rótulos de texto comunicam todas as ações.
Carregue Bootstrap CSS antes de Poncho CSS para que o tema substitua os estilos da base. A grade básica e os painéis não exigem Bootstrap JavaScript nem jQuery. Se a aplicação adicionar componentes interativos de Bootstrap, carregue uma versão compatível do jQuery antes de Bootstrap 3.4.1 JavaScript e teste os componentes que ela realmente usa.
Esta é uma pilha de dependências legada com limites de compatibilidade definidos. Instalar uma versão moderna de Bootstrap junto dela não é uma estratégia de migração. Diferencie a reutilização do código sob a licença MIT do repositório da identidade governamental, dos logotipos oficiais e da licença de conteúdo exibida nas páginas do governo. A prévia usa atividades fictícias da comunidade e não afirma ser um serviço do governo argentino.
Uma âncora envolve o corpo do painel; não aninhe controles interativos.
<div class="row">
<div class="col-sm-4">
<a class="panel panel-default" href="/activities/repair-cafe/">
<div class="panel-body">
<h3>Repair café</h3>
<p class="text-muted">Skills · Saturday, 10:00</p>
</div>
</a>
</div>
</div>Painéis nativos de Poncho, filtro de categorias funcional e visualização de detalhes que restaura o foco.
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Community activities</title><link rel="stylesheet" href="vendor/poncho-2.0.320/bootstrap.min.css"><link rel="stylesheet" href="vendor/poncho-2.0.320/poncho.min.css"><style>html,body{height:auto}body{padding:30px 0;font-family:Arial,sans-serif!important}h1,h2,h3{font-family:Georgia,serif!important}.container{max-width:100%}.panel{display:block}.filter{display:flex;gap:15px;flex-wrap:wrap;align-items:end;margin:30px 0}.filter>div{flex:1;min-width:180px}.panel:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #333;outline-offset:3px}#detail{border-left:5px solid var(--secondary);padding-left:20px;margin:25px 0}footer{font:14px/1.5 Arial;border-top:1px solid #ddd;padding-top:20px}[hidden]{display:none!important}</style><main class="container"><p class="text-muted">COMMUNITY PROGRAMME · INDEPENDENT EXAMPLE</p><h1>Find a local activity</h1><p class="lead">Browse practical sessions at the community centre.</p><div class="filter"><div><label for="category">Activity type</label><select id="category" class="form-control"><option value="all">All activities</option><option value="skills">Skills</option><option value="outdoors">Outdoors</option><option value="arts">Arts</option></select></div><button id="reset" class="btn btn-link" type="button">Reset filter</button></div><p id="count" role="status">3 activities</p><div class="row"><div class="col-sm-4" data-category="skills"><a class="panel panel-default" href="#detail" data-title="Repair café" data-copy="Bring one small household item to a supervised repair session. This demonstration does not reserve a place."><div class="panel-body"><h3>Repair café</h3><p class="text-muted">Skills · Saturday, 10:00</p></div></a></div><div class="col-sm-4" data-category="outdoors"><a class="panel panel-default" href="#detail" data-title="Community garden" data-copy="Meet at the garden gate for a planting session. Wear suitable footwear; tools are provided in this fictional programme."><div class="panel-body"><h3>Community garden</h3><p class="text-muted">Outdoors · Sunday, 09:30</p></div></a></div><div class="col-sm-4" data-category="arts"><a class="panel panel-default" href="#detail" data-title="Printmaking workshop" data-copy="Explore simple printing techniques in the studio. This local example has no registration service."><div class="panel-body"><h3>Printmaking workshop</h3><p class="text-muted">Arts · Tuesday, 16:00</p></div></a></div></div><section id="detail" hidden tabindex="-1"><h2 id="title"></h2><p id="copy"></p><button id="close" class="btn btn-primary">Back to activities</button></section><footer>Native Poncho 2.0.320 CSS with Bootstrap 3.4.1. Arial / Georgia fallbacks. Original activity data and filtering; no government identity or booking service.</footer></main><script>let opener;const select=document.querySelector('#category');function filter(){let n=0;document.querySelectorAll('[data-category]').forEach(x=>{x.hidden=select.value!=='all'&&x.dataset.category!==select.value;if(!x.hidden)n++});document.querySelector('#count').textContent=n+' activit'+(n===1?'y':'ies');document.querySelector('#detail').hidden=true}select.onchange=filter;document.querySelector('#reset').onclick=()=>{select.value='all';filter();select.focus()};document.querySelectorAll('[data-title]').forEach(a=>a.onclick=e=>{e.preventDefault();opener=a;document.querySelector('#title').textContent=a.dataset.title;document.querySelector('#copy').textContent=a.dataset.copy;document.querySelector('#detail').hidden=false;document.querySelector('#detail').focus()});document.querySelector('#close').onclick=()=>{document.querySelector('#detail').hidden=true;opener.focus()};</script></html>Configuração nativa de CSS. Esta prévia não precisa de Bootstrap JavaScript, pois sua lógica de filtro e detalhes é original. O ZIP completo do exemplo funcional em Sources também inclui as dependências exatas da prévia e o documento completo. Extraia os arquivos, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/poncho.html. Não abra exemplos baseados em módulos por meio de file://.
npm install [email protected] [email protected] # Copy the following package assets into your site's public vendor directory: # node_modules/bootstrap/dist/css/bootstrap.min.css # node_modules/ar-poncho/dist/css/poncho.min.css # Load Bootstrap first, then Poncho. # Optional Bootstrap JS components also need jQuery before bootstrap.min.js.
Use ar-poncho 2.0.320 com Bootstrap 3.4.1. Crie um diretório acessível com uma grade de 12 colunas e cartões de painel com um único link âncora. Preserve as cores, o preenchimento e os raios nativos dos botões. Ofereça filtros identificados por rótulos, contagem de resultados e restauração do foco. Confira a cascata de fontes em relação ao pacote fixado; não misture APIs de Bootstrap 5 nem invente uma confirmação de registro.
Exemplo independente de OpenDesign que usa CSS nativo, sem identidade governamental. A documentação atual e o README antigo divergem quanto às famílias tipográficas; o CSS fixado e o fallback explícito definem esta prévia.
