Developer Guidance
Resources for setting up your application with the HPE Design System library and HPE theme.
Getting started
We're excited you're using the HPE Design System! Below are a set of resources that will help you get your application set-up with Grommet and the HPE theme. If you don't find what you're looking for, please reach out in the #hpe-design-system channel on Slack.
Preferred environment
The HPE Design System is primarily focused on user interfaces developed with ReactJS and Grommet. We encourage teams to use ReactJS and Grommet if possible because there are more resources, examples, and community help for this environment.
Questions and feedback should be routed through the #hpe-design-system channel on Slack.
ReactJS and Grommet starter resources
If you are new to ReactJS, the React Tutorial is a good place to start.
If you are already familiar with ReactJS but are unfamiliar with Grommet, check out the Getting Started with Grommet guide.
Applying the HPE theme
Once your project is set up with ReactJS and Grommet, make sure you have the latest grommet-theme-hpe theme via npm
or yarn
. This will help ensure that your application is aligned with the HPE Design System colors, fonts, and default component styles.
What if our team doesn't use ReactJS?
For non-ReactJS environments, such as those with a large code base that are not ready to absorb changing the UI framework, we recommend using the examples and patterns shown in the HPE Design System as a reference. Styles should be matched as closely as possible. Using the browser develop tools to inspect the styling can help with this process.
If you have questions or would like some guidance on migrating to ReactJS, please reach out to the HPE Design System team on Slack in #hpe-design-system.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.