Developers
Introduction
Welcome to the Red Hat Design System (RHDS) for digital experiences. If you need to develop something using our design system, you have come to the right place.
Read this section to get started and e-mail design-system@redhat.com or connect with us on Slack if you have any questions along the way.
Learn about our design system
Our design system libraries and the documentation website offer assets and guidance needed to create digital experiences. Please use these resources to have a better understanding of how to use our design system.
Foundations
Foundations are how we express our brand through color, space, typography, etc.
Design tokens
Design tokens are how we translate our design language decisions into code.
Documentation
This website offers guidance about how to use our elements and patterns. Learn how to apply them accessibily with developer-specific guidelines.
GitHub repositories
Explore our code, roadmaps, and discussions in the Red Hat Design System repo and the Red Hat Design Tokens repo.
About Web Components
What are Web Components?
Every Web Component is a custom HTML element. Web Components are made with standard web platform APIs, and not only with JavaScript frameworks. Those standards include:
- Custom Elements
- Shadow DOM
- HTML templates
- CSS Custom Properties and Shadow Parts
- Element Internals
- ECMAScript Modules
- and others
These standards combine to enable developers to write reusable and encapsulated UI elements which work with the browser's built-in component model.
Why Web Components?
Encapsulation
Web Components encapsulate their templates, styles, and behavior. They establish a strong boundary between the component's internals and the rest of the website, letting developers write more modular code while avoiding conflicts with page-level CSS and JS. This hides complex logic and templating from the rest of the page's UI, which helps to ship design systems and applications at scale. In addition to encapsulating styles, Web Components can ship complex accessibility patterns, making it easier for page authors to provide accessible, rich experiences.
Web standards APIs
Because Web Components are built with web standards, the technology is future-proofed, reliable, and supported by every modern browser. As the browser's native component model, Web Components continually benefit from new specifications and features as they are added to the web platform (e.g.,Scoped Custom Element Registries).
Framework agnostic
Web Components are framework agnostic, meaning they can be used in any JavaScript framework which outputs HTML. This allows Red Hat to build and maintain a single Design System library that can be used across the entire enterprise. Engineers can then switch frameworks, if necessary, without throwing away all their work. Web Components help to break down silos, increase collaboration, and reduce duplication of effort.
How do Web Components affect performance?
Because the code which delineates the component model for Web Components is already a part of your users' browser, they do not need to rely on client-side JavaScript in the same way that framework components do. We have observed that adding several of our design systems' components to an app increased the bundle size by an amount less than the weight of the react-dom library. Much of that JavaScript payload consists of HTML and CSS, which compresses well and executes efficiently. Advanced techniques like SSR of Declarative Shadow DOM templates can help to reduce loading times and cumulative layout shift.
We anticipate that if HTML modules and CSS modules become widely implemented in browsers, that something like Declarative Custom Elements will make shipping design system elements in plain .html files feasible.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Designers
To get started using our design system as a designer, go to the Designers page.
