Administración pública y servicios públicos · Nuevo recurso
Sistema de diseño USWDS.
Conecta los tokens de espaciado de USWDS, los roles de tema, las tablas semánticas y los acordeones nativos en una comparación de oportunidades con búsqueda.
USWDS 3.14.0 CSS nativo y acordeón de JavaScript; ajuste explícito para usar la fuente del sistema y filtrado local personalizado. · Referencia de implementación
02
Referencia de diseño del sistema de diseño USWDS
Distribución de componentes nativos de USWDS 3.14.0. Tokens predeterminados según la documentación oficial; las sustituciones tipográficas de la vista previa son decisiones locales explícitas.
Sistema de diseño USWDS: un Foundation configurable
Los tokens predeterminados son una configuración inicial
USWDS separa los tokens del sistema, la configuración del tema del proyecto, las clases de utilidad y los componentes. La referencia siguiente recoge las opciones de tema predeterminadas de la documentación actual. Un programa federal puede configurar diferentes funciones tipográficas o alias de color sin sustituir todos los componentes.
La vista previa es una comparación independiente de oportunidades de investigación que usa CSS 3.14.0 y JavaScript de acordeón. No incluye el banner gubernamental ni los elementos de identidad visual. Los nombres y las etapas de los programas son ficticios, y el filtrado se realiza íntegramente en el navegador.
Sistema de diseño USWDS: tokens de espaciado y tema
Interpreta la unidad, no el numeral
Una unidad de espaciado USWDS equivale a 8px: units(2) significa 16px, mientras que units(3) significa 24px. Los tokens de media unidad permiten definir espacios más pequeños, y la utilidad usa 05 para indicar media unidad. La utilidad margin-2 no significa un margen de dos píxeles.
La escala también incluye anchos con nombre, como tablet y desktop. Esos nombres son tokens reutilizables, no un requisito para rediseñar cada página en cada ancho. La comparación usa grid-container alrededor del contenido y una región desplazable específica para la tabla.
Tipos y funciones tipográficas del sistema de diseño USWDS
Una función puede cambiar sin renombrar los componentes
El token sans predeterminado corresponde a Source Sans Pro, y serif a Merriweather. Las funciones de cuerpo y de interfaz corresponden a sans; la de encabezados, a serif. La función family("body") resuelve esa cadena. Al documentar un proyecto, distingue la función semántica de la familia tipográfica final.
La vista previa local usa explícitamente Helvetica/Arial para el cuerpo del texto y Georgia para los encabezados, por lo que no es necesario descargar fuentes. Esta es una modificación para el estudio, no la identidad tipográfica estándar de USWDS. En una compilación de producción, configura esas funciones mediante los ajustes de uswds-core o copia los recursos tipográficos distribuidos.
Alias de color del tema del sistema de diseño USWDS
Mantén los alias vinculados a su función
El alias primary predeterminado corresponde a blue-60v, #005ea2. Primary-dark corresponde a blue-warm-70v, #1a4480; ink corresponde a gray-90, #1b1b1b. Son valores del tema, no una afirmación de que todos los sitios de USWDS deban usar el mismo color de marca.
Usa el alias semántico para una acción o el estilo de un encabezado, y un token de color del sistema solo cuando esa sea la decisión de diseño real. Sustituir un alias primary en los ajustes es una opción más controlada que reemplazar cada cadena hexadecimal coincidente en CSS compilado.
Filas de oportunidades comparables del sistema de diseño USWDS
Conserva la semántica de la tabla
El ejemplo usa un título, encabezados de columna con scope="col" y el nombre de una oportunidad con scope="row". Es una tabla porque permite comparar los mismos campos de tema y etapa en distintos registros. Esas relaciones siguen disponibles cuando la región se desplaza.
El contenedor desplazable tiene tabindex="0" para que quienes usan el teclado puedan acceder a él. Así, los datos anchos quedan limitados a esa región, en lugar de ampliar todo el documento. La vista previa contiene celdas de texto normales; si faltaran datos del programa, habría que mostrar un estado de contenido explícito, no inventar una cifra.
USWDS admite encabezados ordenables mediante data-sortable. Una tabla ordenable también necesita una región usa-table__announcement-region con aria-live="polite". Es posible que los valores numéricos mostrados requieran data-sort-value para ordenarlos como valores y no alfabéticamente. La comparación actual no habilita la ordenación porque la demostración prevista es un filtro por tema de tres filas.
Requisitos como paneles desplegables en el sistema de diseño USWDS
Vincula los ID del botón y del panel
Cada usa-accordion__button tiene un aria-controls que apunta al usa-accordion__content asociado. La funcionalidad nativa de JavaScript actualiza aria-expanded y la visibilidad. El modificador bordered cambia el contenedor; data-allow-multiple permite mantener abiertas varias secciones.
El botón está dentro de un encabezado para que la estructura del contenido siga siendo comprensible. Los requisitos necesarios para decidir si un programa es pertinente deben permanecer visibles fuera del panel desplegable. En este caso, los paneles contienen notas complementarias de preparación y una explicación del conjunto de datos ficticio.
El encabezado describe el tema del panel.
El botón indica el estado de expansión y el ID de destino.
El panel conserva el mismo ID cuando cambia su visibilidad.
Instalación de todo el árbol de recursos del sistema de diseño USWDS
Conserva las rutas que usa CSS compilado
Instala @uswds/[email protected] y copia su directorio dist sin aplanar css, js, img y fonts en una sola carpeta. La hoja de estilos usa rutas relativas para los iconos y las fuentes. De lo contrario, una página puede parecer parcialmente correcta aunque no muestre los símbolos de los paneles desplegables o los tipos de letra.
Carga uswds-init.min.js en la cabecera, luego la hoja de estilos y, después del marcado del cuerpo, uswds.min.js. La biblioteca incluida añade funcionalidad al acordeón. El campo de búsqueda y el filtro por tema que aparecen a continuación usan lógica personalizada de la aplicación; no se conectan a un servicio de búsqueda remoto.
Filtrado y recuperación en el sistema de diseño USWDS
La consulta debe mostrar sus resultados
Los estilos nativos de label, input, select y button proporcionan los controles; la aplicación compara la consulta y el tema seleccionado con los tres registros ficticios. El recuento de resultados es una región dinámica cortés. Si no hay coincidencias, se muestra una explicación y una opción para restablecer los filtros, sin borrar la consulta introducida.
La demostración diferencia intencionalmente entre encontrar una oportunidad y presentar una solicitud. Abrir el contenido de preparación no crea un borrador ni marca un requisito como completado. Una solicitud real de financiación necesitaría sus propias políticas del programa, autenticación y un estado de transacción persistente.
Filtra por Environment y revisa la oportunidad que queda.
Busca una frase sin coincidencias y selecciona Clear filters.
Abre los dos paneles de preparación y comprueba que cada uno tenga su propio estado de expansión.
Ejemplos de componentes del sistema de diseño USWDS
Acordeón con información complementaria de preparación
Panel desplegable nativo de USWDS con un vínculo explícito entre el botón y el panel.
HTML
<div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
<h3 class="usa-accordion__heading">
<button type="button" class="usa-accordion__button"
aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
</h3>
<div id="preparation" class="usa-accordion__content usa-prose" hidden>
<p>This fictional opportunity asks for a project summary and a named contact.</p>
</div>
</div>
El documento completo incluye su estructura, controles e inicialización. Extrae el archivo de ejemplo enlazado para obtener los recursos del proveedor con sus rutas relativas exactas y luego sírvelo mediante HTTP.
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research opportunities — OpenDesign study</title><script src="vendor/uswds-3.14.0/uswds-init.min.js"></script><link rel="stylesheet" href="vendor/uswds-3.14.0/css/uswds.min.css"><style>body,body *,body *:before,body *:after{font-family:Helvetica,Arial,sans-serif!important}h1,h2{font-family:Georgia,serif!important}body{color:#1b1b1b;margin:0}[hidden]{display:none!important}.study-head{background:#d9e8f6;padding:16px 0;border-bottom:4px solid #005ea2}.study-head p{margin:0}.study-form{display:flex;gap:24px;align-items:end;flex-wrap:wrap}.study-form>div{flex:1;min-width:200px}.study-form .usa-input,.study-form .usa-select{max-width:none}.usa-table{width:100%}.study-main{padding-top:32px;padding-bottom:48px}.usa-table th{min-width:120px}#count{margin-top:24px}.study-note{border-top:1px solid #a9aeb1;margin-top:32px;padding-top:16px;line-height:1.5}</style></head><body><header class="study-head"><div class="grid-container"><p><strong>OpenDesign · USWDS component study</strong><br>Fictional research records. No application is submitted.</p></div></header><main class="grid-container study-main"><h1>Research opportunities</h1><p class="usa-intro">Compare topics and read the preparation notes.</p><form class="study-form" id="filters"><div><label class="usa-label" for="query">Search opportunity names</label><input class="usa-input" id="query" type="search"></div><div><label class="usa-label" for="topic">Topic</label><select class="usa-select" id="topic"><option value="">All topics</option><option>Environment</option><option>Transport</option><option>Education</option></select></div><button type="submit" class="usa-button">Apply filters</button><button type="button" class="usa-button usa-button--outline" id="clear">Clear filters</button></form><p id="count" aria-live="polite">3 opportunities</p><div class="usa-table-container--scrollable" tabindex="0"><table class="usa-table usa-table--borderless"><caption>Illustrative research opportunities</caption><thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead><tbody><tr data-topic="Environment"><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr><tr data-topic="Transport"><th scope="row">Accessible transport research</th><td>Transport</td><td>Example review</td></tr><tr data-topic="Education"><th scope="row">Local skills survey</th><td>Education</td><td>Example draft</td></tr></tbody></table></div><p id="empty" hidden>No matching opportunities. Broaden the topic or clear the filters.</p><h2>Preparation notes</h2><div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
<h3 class="usa-accordion__heading">
<button type="button" class="usa-accordion__button"
aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
</h3>
<div id="preparation" class="usa-accordion__content usa-prose" hidden>
<p>This fictional opportunity asks for a project summary and a named contact.</p>
</div>
<h3 class="usa-accordion__heading"><button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="scope">What the example data means</button></h3><div id="scope" class="usa-accordion__content usa-prose" hidden><p>Draft and review are demonstration stages. They do not indicate an actual funding programme or eligibility decision.</p></div>
</div><p class="study-note">USWDS 3.14.0 native accordion and styles, with local Helvetica/Georgia font overrides. Filters are original application code. <a href="vendor/uswds-3.14.0/LICENSE.md">Distribution licence</a>.</p></main><script src="vendor/uswds-3.14.0/uswds.min.js"></script><script>const rows=[...document.querySelectorAll('tbody tr')],q=document.getElementById('query'),t=document.getElementById('topic');function filter(){let n=0;for(const row of rows){const show=(!t.value||row.dataset.topic===t.value)&&row.firstElementChild.textContent.toLowerCase().includes(q.value.trim().toLowerCase());row.hidden=!show;if(show)n++}document.getElementById('count').textContent=n+' '+(n===1?'opportunity':'opportunities');document.getElementById('empty').hidden=n!==0;}document.getElementById('filters').addEventListener('submit',e=>{e.preventDefault();filter()});document.getElementById('clear').addEventListener('click',()=>{q.value='';t.value='';filter();q.focus()});</script></body></html>
Descarga el ejemplo completo desde Fuentes. El README contiene el comando exacto para ejecutarlo en local.
Mantén las rutas de los recursos del proveedor relativas a este documento; el archivo incluye todos los recursos que utiliza esta vista previa.
04
Configuración del agente del sistema de diseño USWDS
Punto de partida para la implementación
Conserva la estructura del directorio dist para que CSS pueda resolver las fuentes y los iconos. Esta es la vía de distribución precompilada; para personalizar el tema, se necesita una compilación de Sass. El ZIP completo del ejemplo funcional, disponible en Sources, también incluye las dependencias exactas de la vista previa y el documento completo. Extráelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/uswds.html. No abras ejemplos basados en módulos mediante file://.
sh / html
npm install @uswds/[email protected]
mkdir -p public/assets/uswds
cp -R node_modules/@uswds/uswds/dist public/assets/uswds/
<!-- HTML head -->
<script src="/assets/uswds/dist/js/uswds-init.min.js"></script>
<link rel="stylesheet" href="/assets/uswds/dist/css/uswds.min.css">
<!-- After the component markup, before closing body -->
<script src="/assets/uswds/dist/js/uswds.min.js"></script>
Una instrucción para tu proyecto
Instrucción para el agente
Crea una comparación ficticia de oportunidades de investigación con USWDS 3.14.0. Carga el árbol completo de recursos de dist, el script de inicialización, la hoja de estilos de componentes y JavaScript. Presenta los registros comparables en una tabla semántica con título y encabezados de columna; incluye búsqueda y filtrado por categoría con etiquetas, un recuento de resultados, un estado útil cuando no hay coincidencias y una opción para restablecer. Usa acordeones nativos para los requisitos complementarios y mantén visible la información esencial de la comparación. Conserva las unidades de espaciado y las correspondencias de roles del tema documentadas; etiqueta la sobreescritura de la fuente del sistema. No conviertas este directorio en un flujo de envío de solicitudes ni des a entender que existe una elegibilidad real o un compromiso de otorgar fondos.
05
Fuentes y alcance del sistema de diseño de USWDS
Estudio independiente de componentes de USWDS 3.14.0. Registros ficticios de oportunidades; no se afirma tener identidad federal ni se ofrece un punto de acceso para solicitudes. Helvetica/Arial y Georgia son sustituciones de fuentes locales, no los recursos de fuente predeterminados de USWDS.
