Construye Aplicaciones Web Accesibles Con Grommet
Tags: react, javascript, webdev, accesibility
Published: 2020-05-29 18:13:25

---
title: Construye Aplicaciones Web Accesibles Con Grommet
published: true
description: Grommet es un framework basado en react que provee accesibilidad, modularidad, diseño responsive y tematización en un paquete ordenado.
cover_image: https://images.pexels.com/photos/271667/pexels-photo-271667.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940
tags: react, javascript, webdev, accesibility
---

Hace unos días rediseñé mi portafolio. Siempre me gusta integrar nuevas tecnologías a cada proyecto personal, de esa manera aprendo algo nuevo y puedo descubrir nuevas joyas que mejoren mi flujo de desarrollo.

**Esta vez fue el turno de Grommet.**

## ¿Que es Grommet?

> Grommet es un framework basado en react que provee accesibilidad, modularidad, diseño responsive y tematización en un paquete ordenado.

Si buscas un framework/sistema de diseño para react, que sea ligero, minimalista, con componentes accesibles y con grandes capacidades de personalizacion, Grommet es lo que buscas.

Cuenta con todos los componentes necesarios para que empieces a construir tu web app. Incluyendo componentes que dan soporte al esquema, tipografía, formularios, visualizaciones de datos y muchas otras utilidades.

![Componentes](https://i.imgur.com/pEm2ehX.png)

## ¿Por que elegí Grommet?

A la hora de usar una librería con componentes de diseño me gusta usar mis propios colores, pero las soluciones para temas personalizados en algunos frameworks es un poco más complicada de lo que me gustaría, buscaba algo fácil de editar e integrar. Y luego de buscar entre varias opciones, noté que Grommet tiene un diseñador para Temas. No busqué más.

El creador de temas para Grommet, hace que crear un nuevo tema sea muy sencillo, y al mismo tiempo te permite la posibilidad de agregar soporte para paletas de colores dark/light

![Componentes](https://i.imgur.com/tsZlBq8.png)

Para cambiar los colores, las fuentes y los tamaños de los elementos solo hacen falta un par de clics, gracias a su diseñador con una interfaz WYSIWYG. Todos los detalles del tema están contenidos en un JSON, y solo basta con incluirlo en el proyecto y pasarlo como propiedad en el tope de nuestra app para ver los componentes tomar el aspecto de nuestra marca :D

Y no solo termina ahí. Grommet también cuenta con un diseñador de componentes, el cual también tiene una interfaz WYSIWYG que te permite crear y modificar componentes en tiempo real ¡Sin necesidad de escribir código! Solo con clics puedes añadir y quitar propiedades a los componentes de Grommet y así empezar a diseñar tus propios componentes.

![Diseñador](https://i.imgur.com/qTpWhhW.png)

Esa herramienta hizo que mi velocidad de desarrollo aumentara de forma significativa, podía diseñar los componentes para mi sitio web, y al mismo tiempo verificar si lucían exactamente como yo esperaba, y por último, exportar mi creación para luego incluir el componente en mi código fuente.

No tuve ningún desafío o contratiempo usando este framework, definitivamente vale la pena intentarlo, estoy seguro de que cada desarrollador puede encontrarle un espacio para algún proyecto y no se arrepentirá.


- [Documentación](https://v2.grommet.io/components)
- [Diseñador de Grommet](https://designer.grommet.io)
- [Resultado de mi portafolio](https://andersonjoseph.github.io)