Dale Rensing

Grommet – the Glue that Binds Development and Design

May 9, 2019

Simple, consistent, and thoughtfully designed user interfaces (UI) can go a long way to integrating business applications and streamlining operations. Hewlett Packard Enterprise (HPE) is a huge proponent of simplifying complex environments. That’s why HPE developed Grommet, an open source UI development tool, and made it available to anyone looking to create consistent user experiences for their applications.

When I first started working with the Chief Design Office at HPE, I was very excited for the opportunity to learn more about Grommet. Design is playing a bigger part in computing applications today. To me, Grommet is like the glue that binds function and design together. As evidenced by input received through HPE DEV and several tradeshows and events, Grommet is both liked and used, sustained by a vibrant, grassroots community. It has attracted plenty of developer input with over 4,000 commits from a wide variety of different contributors.

For those of you unfamiliar with Grommet, it is a library of reusable UI components for developers and designers. Grommet makes the application creation process both agile and easy. It does so by offering developers commonly used interface elements in a Node package and delivering them as building blocks to create web applications. It also gives designers a full library of design assets and templates. Grommet uses React as an underlying technology to help deliver its modularity and adds accessibility, responsiveness, and theming.

screen shot 2019 05 09 at 3.12.54 pm[2]

Grommet works using a mobile-first strategy in combination with a task-based design approach. Its components offer nothing more and nothing less than what’s required to complete a task, while still being flexible enough to customize and tailor it to your own needs.

Grommet’s libraries give both designers and developers a way to collaborate and inject consistent user experiences into their applications easily. It offers ready-to-use layouts, type, colors, controls, and mechanisms to incorporate and present content. You might want to check out this link for specifics on Grommet components.

Grommet is used by both internal HPE and external developers to build enterprise-class and consumer-grade applications that can be used in web, desktop, and mobile-friendly formats. It underpins many of the company’s software-defined platforms, like HPE Synergy, HPE Storage, Aruba networks and HPE Server management. HPE provides developer support for Grommet through the HPE Developer Community and GitHub.

As much as I’ve learned about Grommet, I still have more questions. Like, what’s up with that purple Gremlin creature that keeps showing up on Grommet pages and Grommet stickers? Stay tuned for a future post where I hope to uncover the answer. For more thoughts on Grommet, you might want to check out the blog by John Paul Mueller of DataCon Services. You can also keep up with what’s going on by connecting with us at HPE DEV and subscribing to our newsletter.

rsz_1rsz_stack waving


Brittany Archibeque

My Journey from Student to HPE Full-stack Developer

May 23, 2019
Dale Rensing

See Where You Can Find The Open Source UI Tool, Grommet, at HPE Discover

May 23, 2019
Brittany Archibeque

Using TypeScript in Grommet Applications

Sep 9, 2019
Ian Bovard

Using Your First Grommet Component with Create-React-App

May 10, 2019
Brad Chamberlain

Announcing Chapel 1.29.0!

Jan 7, 2023
Brad Chamberlain

Announcing Chapel 1.30.0!

Mar 24, 2023
Brad Chamberlain

Announcing Chapel 1.31!

Jun 22, 2023
Brad Chamberlain

Announcing Chapel 1.32!

Oct 5, 2023

HPE Developer Newsletter

Stay in the loop.

Sign up for the HPE Developer Newsletter or visit the Newsletter Archive to see past content.

By clicking on “Subscribe Now”, I agree to HPE sending me personalized email communication about HPE and select HPE-Partner products, services, offers and events. I understand that my email address will be used in accordance with HPE Privacy Statement. You may unsubscribe from receiving HPE and HPE-Partner news and offers at any time by clicking on the Unsubscribe button at the bottom of the newsletter.

For more information on how HPE manages, uses, and protects your personal data please refer to HPE Privacy Statement.