El framework responsive United States Web Desing Framework es utilizado por agencias federales de Estados Unidos para crear sus sitios web.
El framework USWDS o United States Web Desing Framework es un conjunto de librerías y herramientas para crear aplicaciones web, compartido por el gobierno de Estados Unidos.
El framework USWDS cuenta con archivos javascript, css e imágenes compilados, existen muchos componentes listo para usar:
- Botones
- Tablas
- Formularios
- Acordeon
- Hero
- Grid
- Cabecera, Menus desplegables
- Alertas
- Pie de pagina
- Tags/Etiquetas
- y mucho mas
Pagina de Ejemplo
A continuación les explico algunos ejemplos.
Plantilla Básica
Esta plantilla incluye los archivos css y javascript al documento html.
<!DOCTYPE html> <html> <head> <title>Intro - USWDS</title> <link rel="stylesheet" href="uswds/css/uswds.min.css"> </head> <body> <div class="grid-container"> <div class="grid-row"> <div class="grid-col-12"> </div> </div> </div> <script type="text/javascript" src="uswds/js/uswds.min.js"></script> </body> </html>
Hero
El hero sirve para resaltar contenido al principio de la pagina o en cualquier ubicacion/seccion.
<section class="usa-hero" style="background:#f0f0f0;"> <div class="grid-container"> <div class="usa-hero__callout"> <h1 class="usa-hero__heading"><span class="usa-hero__heading--alt">Hola Mundo</span>Esto es un Usa-Hero</h1> <a class="usa-button" href="javascript:void(0)">Ver mas</a> </div> </div> </section>
Grid
El grid es muy similar a Bootstrap, USWDS tiene container, row y col. Las columnas tienen numeración del 1 al 12.
<div class="grid-container"> <div class="grid-row"> <div class="grid-col-12"> </div> </div> </div>
Botones
El framework USWDS cuenta con 5 tipos de botones.
<button class="usa-button ">Default</button> <button class="usa-button usa-button--secondary ">Secondary</button> <button class="usa-button usa-button--accent-cool ">Accent cool</button> <button class="usa-button usa-button--outline ">Outline</button> <button class="usa-button usa-button--outline usa-button--inverse ">Inverse</button>
Alertas
Tenemos 4 tipos de alertas: success, warning, info y error.
<div class="usa-alert usa-alert--success" > <div class="usa-alert__body"> <h3 class="usa-alert__heading">Success</h3> <p class="usa-alert__text">Alerta 1.</p> </div> </div>
Descargar
A continuación puedes descargar el ejemplo completo con los archivos CSS y JS del framework, ademas de la cabecera con menús, tablas, formularios y pie de pagina.
Link: Descargar ejemplo completo
Mas información
Si requieres mas informacion puedes ir a la Pagina oficial de USWDS o a la pagina de Github del proyecto uswds.