Notes from building a site with RHDS

[zeroedin]

After implementing RHDS in a couple sites external from other helper resources such as a CMS might provide, I'm using this discussion space as a place to write down notes for things I feel are missing and would be super helpful to be added to the design system moving forward in some capacity.

Warning: Opinions may follow, nothing cannon or saying we must do this, just trying to outline my friction points. If anything I'm saying is currently in WIP I apologize as I'm not trying to call out that work not being finished yet just that its friction right now. Also some of these resources exist in other forms outside the design system documentation currently, I am not also saying those resources couldn't be used, but the design system in my opinion should be the single source of truth on these topics.

Page Layout Helpers

(ie direction on how page layouts should be accomplished).

Grid Layout

In form of simple helper CSS custom element? or even a full on grid system.

Option 1:
custom element form with lightdom css with no js/shadowroot necessary al la .webc?

<rh-grid columns="3">....

Option 2
grid system based helper classes:

<div class="grid grid-col-sm-1 grid-col-md-2">....

Section band and color context theming of their children components.

While section bands can easily be recreated with semantic html tags and our current css token values, in order to implement themed layers we don't have an easy solution for color-palette in a non web component usage.

<section class="darker">...

Also we currently have no guidance on padding and whitespace for varying content and for breakpoints usage of this pattern. We have the spacing section of foundations but it is also currently out of date with --pf based spacers being shown.

Simple typography styles

We have styles for h1-h6 and font families yet we don't talk at all about how these elements get used in a page at a base level. I had questions like:

Visually how should header tags be downsized but stay a h2 given position in hierarchy?
What is the max-width we should allow headers and paragraphs?

Our typography page is out of date points to pfe- based token values: https://ux.redhat.com/foundations/typography/

Simple page layout examples

Some simple page layout examples might be helpful. Kitchen sink so to speak.

Missing components

We have some fundamental missing components such as rh-breadcrumbs and rh-hero can also be questioned if these are patterns or not rather then components, also feature set missing from others that would be useful like linkable tags for blog like pages.

[kylebuch8]

I'd like to add that not having the CDN ready presented some additional challenges in that we first started with jspm.io and decided that it would be better to bundle. Bundling forced us to slightly change our development workflow. That said, even if the CDN was ready, we're unable to use it on localhost so it's a bit of a showstopper.

[zeroedin]

Yes forgot to mention that, 100%!