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.

Leave a comment