Examina la cuadrícula Bootstrap 3 de Poncho, sus colores semánticos de acción y sus paneles de servicio totalmente interactivos mediante un directorio de actividades funcional.
Filtra la cuadrícula de paneles nativos, abre un detalle y vuelve a la actividad elegida.
ar-poncho 2.0.320 CSS más Bootstrap 3.4.1; valores calculados verificados a 1440, 768 y 390px. Las fuentes alternativas están especificadas explícitamente.
| Nombre / Regla | Valor / Configuración | Uso |
|---|---|---|
Package inspected | ar-poncho 2.0.320 | No uses el banner obsoleto v0.3.3 como versión del paquete. |
Font documentation | Lora headings / Montserrat body | La página actual de tipografía y la importación de fuentes de CSS; el README antiguo del repositorio todavía menciona Encode Sans. |
Body | 16px / 1.42857143; weight 500 | Medido con Bootstrap 3.4.1 y Poncho; la vista previa local usa Arial. |
H1 | 2.5rem = 40px / 44px | El encabezado de la vista previa sigue midiendo 40px en móviles. |
H2 / H3 | 2rem / 1.75rem | Encabezados base; las reglas específicas de cada panel tienen prioridad. |
Panel H3 | 20px / 26px | Contexto del componente; medido en CSS nativo. |
Lead | 18px / 1.2; weight 500 | Una breve introducción, no un encabezado. |
| Nombre / Regla | Valor / Configuración | Uso |
|---|---|---|
--primary | #242C4F | Azul marino para enlaces y acciones principales. |
--secondary | #45658D | Azul secundario. |
--success | #2e7d33 | Función de acción principal o de éxito; no es un adorno arbitrario. |
--danger | #c62828 | Función de acción destructiva o de error. |
--warning | #E7BA61 | Función de atención; aún hay que comprobar el contraste del texto. |
--gray-base | #333333 | Texto predeterminado. |
--gray-lighter | #f2f2f2 | Superficie neutra clara. |
| Nombre / Regla | Valor / Configuración | Uso |
|---|---|---|
Grid | 12 columns; 30px gutter | Bootstrap 3.4.1: 15px de relleno a cada lado de la columna. |
Breakpoints | 768 / 992 / 1200px | sm, md, lg; col-sm-4 crea tres columnas a partir de 768px. |
Containers | 750 / 970 / 1170px | En los puntos de interrupción correspondientes; ancho fluido por debajo de 768px. |
Panel body | 15px 20px | Anulación del componente de Poncho. |
Panel radius / spacing | 10px / 30px bottom margin | CSS nativo, tal como se usa en este ejemplo. |
Button | 16px; 8px 20px padding; 3px border; 30px radius | Tratamiento redondeado de acciones de Poncho; no es la geometría predeterminada de Bootstrap. |
Section spacing | 30px default; 20px small; 40px large | Reglas de section, section-sm y section-lg. |
Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.
Orientación completa, un punto de partida para la implementación y enlaces al código fuente.
Poncho aplica estilos de servicios públicos argentinos sobre Bootstrap 3.4.1. Su página de instalación aún menciona una línea experimental de Bootstrap 4; eso no hace que las clases de Bootstrap 5 sean compatibles con los ejemplos publicados. Este recurso fija ar-poncho 2.0.320 y Bootstrap 3.4.1 para poder examinar en conjunto la estructura de los paneles y su comportamiento adaptable.
El banner de CSS indica v0.3.3, aunque el paquete instalado es 2.0.320. Consulta el manifiesto del paquete y el archivo de bloqueo, no solo el banner. La vista previa independiente usa CSS nativo para los paneles, los botones y la cuadrícula; el filtrado de actividades es original de JavaScript, no un componente de búsqueda de Poncho.
La documentación actual de tipografía indica Lora para los encabezados y Montserrat para el texto del cuerpo. La hoja de estilos descargada importa esas familias, pero también contiene declaraciones anteriores de Encode Sans. El README de configuración del repositorio sigue recomendando Encode Sans. Se trata de una inconsistencia real entre versiones y fuentes; una migración a producción debe revisar la cascada final de la versión elegida, en lugar de suponer que todas las referencias históricas describen un tema uniforme.
La vista previa declara explícitamente Arial y Georgia como alternativas y elimina la importación externa de fuentes para que funcione de forma fiable sin conexión. La geometría nativa sigue siendo visible: cuerpo de 16px, H1 de 40px y entradilla de 18px. Los encabezados de los paneles tienen un tamaño propio de 20px, por lo que copiar la escala base de H3 en una tarjeta cambiaría el componente.
La documentación de botones distingue las acciones predeterminadas de enlace, los enlaces secundarios, una acción principal o de éxito y las acciones destructivas. btn-primary es la acción habitual de estilo de enlace destacado; btn-link sirve para acciones secundarias. btn-success identifica la acción principal para avanzar, y las pautas limitan su uso a una por página. btn-danger se reserva para acciones destructivas o irreversibles.
El navegador de actividades usa una acción secundaria para restablecer el filtro y una acción principal para volver desde el detalle expandido. No incluye un botón verde de inscripción porque no puede inscribir a nadie. Nunca muestres un mensaje de éxito solo porque alguien haya abierto un panel local.
Bootstrap 3 usa una cuadrícula de 12 columnas con medianiles de 30px. Una fila compensa el relleno de 15px de sus columnas. col-sm-4 distribuye los tres paneles de actividades en partes iguales a partir de 768px; por debajo de ese ancho, ocupan todo el ancho disponible. En los puntos de interrupción documentados, los contenedores pasan a medir 750px, 970px y 1170px.
Poncho añade espaciado propio de los componentes: el cuerpo de los paneles usa 15px en vertical y 20px en horizontal, con un margen inferior de 30px. Los botones tienen un radio de 30px, un borde de 3px y un relleno de 8px por 20px. Estos valores explican la diferencia visible respecto a una página Bootstrap sin modificar; no los sustituyas por un tema genérico de tarjetas redondeadas.
Los ejemplos oficiales de paneles envuelven todo el panel en un enlace, con panel-body en su interior y el encabezado y el texto complementario dentro de ese cuerpo. Así, cada elemento compacto del directorio conduce a un único destino coherente. Evita incluir otro enlace o botón dentro de ese enlace: crearía objetivos interactivos en conflicto.
El fragmento de código de producción apunta a una ruta real de actividad. En cambio, la vista previa local intercepta ese mismo enlace semántico para mostrar el texto original del detalle. Registra el elemento que lo abrió, sitúa el foco en la nueva región de detalle y lo devuelve cuando la persona cierra esa región. Este comportamiento de la aplicación se añade al marcado documentado del panel.
<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>El selector de tipo de actividad tiene una etiqueta explícita y tres categorías. Al cambiar la selección, oculta los contenedores de los paneles que no coinciden y actualiza un mensaje de estado con el nuevo recuento. El recuento indica las actividades visibles, no el total de inscripciones ni la disponibilidad. Restablecer el filtro vuelve a mostrar las tres actividades y devuelve el foco al selector.
Al cambiar de categoría, se cierra cualquier detalle abierto para que el contenido de una actividad ahora oculta no quede desconectado de los resultados. Abrir un panel no modifica el filtro. Estas reglas son intencionadamente sencillas, pero bastan para probar la relación entre los controles, los resultados y el detalle.
La tabla oficial de botones muestra una clase CSS deshabilitada. Un botón HTML real que deba deshabilitarse también necesita el atributo disabled; una clase por sí sola no puede impedir la activación mediante el teclado. En el caso de los enlaces, determina si todavía hay un destino válido en lugar de considerar el estilo deshabilitado como un modelo de interacción completo.
Usa un H1 y una jerarquía coherente. Este directorio usa H3 dentro de los paneles porque los detalles ampliados están en una sección H2; para una lista independiente sin una sección intermedia, adapta los niveles de encabezado al documento. Las bibliotecas de iconos decorativos son opcionales y se omiten aquí porque las etiquetas de texto comunican todas las acciones.
Carga Bootstrap CSS antes de Poncho CSS para que el tema sobrescriba los valores de base. La cuadrícula básica y los paneles no requieren Bootstrap JavaScript ni jQuery. Si la aplicación incorpora widgets interactivos de Bootstrap, carga una versión compatible de jQuery antes de Bootstrap 3.4.1 JavaScript y prueba los widgets que realmente utiliza.
Esta es una pila de dependencias heredada con un límite de compatibilidad definido. Instalar una versión moderna de Bootstrap junto a ella no constituye una estrategia de migración. Distingue entre la reutilización del código bajo la licencia MIT del repositorio y la identidad gubernamental, los logotipos oficiales y la licencia de contenido que aparece en las páginas gubernamentales. La vista previa usa actividades comunitarias ficticias y no afirma ser un servicio del Gobierno de Argentina.
Un único enlace envuelve el cuerpo del panel; no anides controles interactivos.
<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>Paneles nativos de Poncho con un filtro de categorías funcional y una vista de detalles que devuelve el 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>Configuración nativa de CSS. Esta vista previa no necesita Bootstrap JavaScript porque la lógica del filtro y los detalles es propia. El ZIP completo del ejemplo funcional, incluido en Fuentes, también proporciona las dependencias exactas de la vista previa y el documento completo. Descomprímelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/poncho.html. No abras ejemplos basados en módulos mediante 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.
Usa ar-poncho 2.0.320 en Bootstrap 3.4.1. Crea un directorio accesible con una cuadrícula de 12 columnas y tarjetas de panel con un único enlace. Conserva los colores de rol, el relleno y los radios nativos de los botones. Incluye filtros etiquetados, recuentos de resultados y restauración del foco. Comprueba la cascada de fuentes con el paquete fijado; no mezcles APIs de Bootstrap 5 ni inventes mensajes de registro exitoso.
Ejemplo independiente de OpenDesign que usa CSS nativo sin identidad gubernamental. La documentación actual y el README antiguo no coinciden en cuanto a las familias tipográficas; el CSS fijado y la alternativa explícita definen esta vista previa.
