Development Overview

The RHElements pattern library

Before getting started, it’s important to note that because this is a library, each of the components within it are designed to work together. For this reason, RHElements should follow some basic guidelines:

Guidelines for building a RHElement

1. A RHElement should be easy to understand.
   • If it is complicated, can it be split up into simpler pieces?
2. A RHElement component can only be one of these types: content or container.
   • If it is a content component, then it has typography styles.
   • If it is a container component, then it has surface colors and padding, no typography styles!
   • Read more on this below.
3. Context aware
   • Content components should be equipped with styles for the on="dark" attribute, so that they can be used on both light and dark backgrounds.
4. Framework agnostic
   • A RHElement should “just work” when you drop it onto any page (provided the proper polyfills are there). It should have ALL the styles it needs, such as font-family properties.

Container RHElements

A container never imposes padding or styles on the children. It is only concerned with their horizontal or vertical alignment and spacing. For example in a card, you might apply margins to the slots, but you would not apply padding or color not to the content inside of slots.

Example: rh-card

This component has background color options, and attributes to change the vertical spacing between the slots.

Content RHElements

A component always touches all four sides of its parent container. For example, if you are creating a teaser component, it should not have padding or margins around the type. It might, however have margins between the headline and author.

Example: rh-cta

This component has typography styles, and attributes to change the priority level of the call-to-action. It also has on="dark" styles built in, so that colors will automatically adjust.