Introducción al framework United States Web Design System
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.